diff --git a/app/static/public/css/imagine_workbench.css b/app/static/public/css/imagine_workbench.css index 7146f87..a814466 100644 --- a/app/static/public/css/imagine_workbench.css +++ b/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; + } } diff --git a/app/static/public/css/video.css b/app/static/public/css/video.css index 559679c..624880f 100644 --- a/app/static/public/css/video.css +++ b/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); diff --git a/app/static/public/js/imagine_workbench.js b/app/static/public/js/imagine_workbench.js index 0afb636..55e1336 100644 --- a/app/static/public/js/imagine_workbench.js +++ b/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 = ''; + const stopIcon = ''; + + 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 + }); } } diff --git a/app/static/public/js/video.js b/app/static/public/js/video.js index 88788b1..e5d56b0 100644 --- a/app/static/public/js/video.js +++ b/app/static/public/js/video.js @@ -593,13 +593,16 @@ if (!spliceBtn) return; const iconExtend = ''; const iconStop = ''; + spliceBtn.classList.remove('is-running', 'is-stopping'); if (state === 'running') { spliceBtn.disabled = false; + spliceBtn.classList.add('is-running'); spliceBtn.innerHTML = `${iconStop}中止延长`; return; } if (state === 'stopping') { spliceBtn.disabled = true; + spliceBtn.classList.add('is-stopping'); spliceBtn.innerHTML = `${iconStop}中止中...`; 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)