fix(ui): 统一停止按钮样式并修复移动端编辑态

app/static/public/css/imagine_workbench.css

@@ -964,12 +964,29 @@ html[data-theme='dark'] .history-prompt {
     gap: 6px;
     border-radius: 8px;
     min-width: 0;
+    transition:
+      background-color .22s ease,
+      color .22s ease,
+      border-color .22s ease,
+      box-shadow .22s ease,
+      transform .18s ease;
   }
 
   .wb-submit-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
+  .wb-submit-btn.is-editing {
+    background: #fee2e2 !important;
+    color: #ef4444 !important;
+    border: 1px solid #fecaca !important;
+    box-shadow: none;
+  }
+
+  .wb-submit-btn.is-editing:active {
+    transform: translateY(1px);
+  }
 }
 
 /* ============================
@@ -1057,6 +1074,23 @@ html[data-theme='dark'] .history-prompt {
     align-items: center;
     gap: 6px;
     justify-content: center;
+    transition:
+      background-color .22s ease,
+      color .22s ease,
+      border-color .22s ease,
+      box-shadow .22s ease,
+      transform .18s ease;
+  }
+
+  .wb-submit-btn.is-editing {
+    background: #fee2e2 !important;
+    color: #ef4444 !important;
+    border: 1px solid #fecaca !important;
+    box-shadow: none;
+  }
+
+  .wb-submit-btn.is-editing:active {
+    transform: translateY(1px);
   }
 
   /* 暗色主题 */
@@ -1074,4 +1108,10 @@ html[data-theme='dark'] .history-prompt {
   html[data-theme='dark'] .wb-icon-btn:active {
     background: #243244;
   }
+
+  html[data-theme='dark'] .wb-submit-btn.is-editing {
+    background: #2d1414 !important;
+    color: #f87171 !important;
+    border-color: #7f1d1d !important;
+  }
 }

app/static/public/css/video.css

@@ -1007,6 +1007,53 @@ body > .video-settings-card > .card-title {
   justify-content: flex-end;
 }
 
+#stopBtn,
+#mobileStartBtn.is-stop,
+#spliceBtn.is-running,
+#mobileSpliceBtn.is-running {
+  background: #fee2e2 !important;
+  color: #ef4444 !important;
+  border: 1px solid #fecaca !important;
+  box-shadow: none;
+}
+
+#stopBtn:hover,
+#mobileStartBtn.is-stop:hover,
+#spliceBtn.is-running:hover,
+#mobileSpliceBtn.is-running:hover {
+  background: #fee2e2 !important;
+  color: #ef4444 !important;
+  border: 1px solid #fecaca !important;
+}
+
+#stopBtn:active,
+#mobileStartBtn.is-stop:active,
+#spliceBtn.is-running:active,
+#mobileSpliceBtn.is-running:active {
+  transform: translateY(1px);
+}
+
+#spliceBtn.is-stopping,
+#mobileSpliceBtn.is-stopping {
+  background: #fee2e2 !important;
+  color: #ef4444 !important;
+  border: 1px solid #fecaca !important;
+  box-shadow: none;
+  cursor: not-allowed;
+  opacity: 0.92;
+}
+
+html[data-theme='dark'] #stopBtn,
+html[data-theme='dark'] #mobileStartBtn.is-stop,
+html[data-theme='dark'] #spliceBtn.is-running,
+html[data-theme='dark'] #mobileSpliceBtn.is-running,
+html[data-theme='dark'] #spliceBtn.is-stopping,
+html[data-theme='dark'] #mobileSpliceBtn.is-stopping {
+  background: #2d1414 !important;
+  color: #f87171 !important;
+  border: 1px solid #7f1d1d !important;
+}
+
 .video-empty {
   text-align: center;
   color: var(--accents-4);

app/static/public/js/imagine_workbench.js

@@ -1913,6 +1913,17 @@
     const wbUseId      = document.getElementById('wbUseIdBtn');
     const wbReset      = document.getElementById('wbResetBtn');
     const wbClearHist  = document.getElementById('wbClearHistoryBtn');
+    const playIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
+    const stopIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="14" height="14"/></svg>';
+
+    function syncStickySubmitState() {
+      if (!wbSubmit || !submitEditBtn) return;
+      const running = submitEditBtn.dataset.running === '1' || submitEditBtn.classList.contains('is-editing');
+      wbSubmit.disabled = submitEditBtn.disabled;
+      wbSubmit.classList.toggle('is-editing', running);
+      wbSubmit.setAttribute('aria-busy', running ? 'true' : 'false');
+      wbSubmit.innerHTML = `${running ? stopIcon : playIcon}${running ? '中止' : '执行编辑'}`;
+    }
 
     // 图标按钮代理原始按钮 click
     if (wbAddRef && selectSeedBtn) {
@@ -1935,12 +1946,17 @@
       });
 
       // 初始化状态
-      wbSubmit.disabled = submitEditBtn.disabled;
+      syncStickySubmitState();
 
-      // 实时同步 disabled
+      // 实时同步状态
       new MutationObserver(() => {
-        wbSubmit.disabled = submitEditBtn.disabled;
-      }).observe(submitEditBtn, { attributes: true, attributeFilter: ['disabled'] });
+        syncStickySubmitState();
+      }).observe(submitEditBtn, {
+        attributes: true,
+        attributeFilter: ['disabled', 'class', 'data-running'],
+        childList: true,
+        subtree: true
+      });
     }
   }
 

app/static/public/js/video.js

@@ -593,13 +593,16 @@
     if (!spliceBtn) return;
     const iconExtend = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>';
     const iconStop = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="14" height="14"/></svg>';
+    spliceBtn.classList.remove('is-running', 'is-stopping');
     if (state === 'running') {
       spliceBtn.disabled = false;
+      spliceBtn.classList.add('is-running');
       spliceBtn.innerHTML = `${iconStop}<span>中止延长</span>`;
       return;
     }
     if (state === 'stopping') {
       spliceBtn.disabled = true;
+      spliceBtn.classList.add('is-stopping');
       spliceBtn.innerHTML = `${iconStop}<span>中止中...</span>`;
       return;
     }
@@ -3815,9 +3818,8 @@
       if (playIcon) playIcon.style.display = running ? 'none' : '';
       if (stopIcon) stopIcon.style.display = running ? '' : 'none';
       if (label) label.textContent = running ? '停止' : '开始生成';
-      // 切换样式：running 时改为 outline 风格
       mobileStart.className = running
-        ? 'geist-button-outline mobile-action-btn gap-2'
+        ? 'geist-button mobile-action-btn gap-2 is-stop'
         : 'geist-button mobile-action-btn gap-2';
       mobileStart.disabled = !running && Boolean(startBtn && startBtn.disabled);
     }
@@ -3849,9 +3851,9 @@
     function syncSpliceBtnState() {
       if (!mobileSplice || !spliceBtn) return;
       mobileSplice.disabled = spliceBtn.disabled;
-      const span = spliceBtn.querySelector('span');
-      const mSpan = mobileSplice.querySelector('span');
-      if (span && mSpan) mSpan.textContent = span.textContent;
+      mobileSplice.classList.toggle('is-running', spliceBtn.classList.contains('is-running'));
+      mobileSplice.classList.toggle('is-stopping', spliceBtn.classList.contains('is-stopping'));
+      mobileSplice.innerHTML = spliceBtn.innerHTML;
     }
     if (spliceBtn) {
       new MutationObserver(syncSpliceBtnState)