diff --git a/src/App.vue b/src/App.vue index d062c6e..e659301 100644 --- a/src/App.vue +++ b/src/App.vue @@ -817,7 +817,14 @@ async function handleVoiceQueryComplete(text: string) { } &.mic-off { - opacity: 0.6; + background: rgba(239, 68, 68, 0.15); + border-color: rgba(239, 68, 68, 0.5); + color: rgba(239, 68, 68, 0.8); + opacity: 1; + + .mic-label { + color: rgba(239, 68, 68, 0.8); + } } &.mic-processing { diff --git a/src/components/SubtitlePanel.vue b/src/components/SubtitlePanel.vue index 20c4361..f2dc97c 100644 --- a/src/components/SubtitlePanel.vue +++ b/src/components/SubtitlePanel.vue @@ -4,7 +4,7 @@ class="subtitle-content ai-only-mode" ref="scrollContainerRef" > -
+
{{ aiSubtitle }}
- -
- - - -
(null); const aiSubtitleTextRef = ref(null); const aiFontSize = ref(18); -const aiTextOverflow = ref(false); +const isUserScrolling = ref(false); const computeAIFontSize = () => { const text = props.aiSubtitle; @@ -80,41 +62,19 @@ const computeAIFontSize = () => { else aiFontSize.value = 12; }; -const checkAIOverflow = () => { - nextTick(() => { - const bar = aiSubtitleBarRef.value; - const textEl = aiSubtitleTextRef.value; - if (bar && textEl) { - aiTextOverflow.value = textEl.scrollHeight > bar.clientHeight + 4; - } - }); -}; - -const scrollAIToBottom = () => { - if (aiSubtitleBarRef.value) { - aiSubtitleBarRef.value.scrollTo({ - top: aiSubtitleBarRef.value.scrollHeight, - behavior: "smooth", - }); - } -}; - -const scrollToBottom = () => { - const el = scrollContainerRef.value; - if (!el) return; - el.scrollTo({ - top: el.scrollHeight, - behavior: "smooth", - }); +const handleScroll = () => { + if (!aiSubtitleBarRef.value) return; + const { scrollTop, scrollHeight, clientHeight } = aiSubtitleBarRef.value; + const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10; + isUserScrolling.value = !isAtBottom; }; watch( () => props.aiSubtitle, () => { computeAIFontSize(); - checkAIOverflow(); nextTick(() => { - if (aiSubtitleBarRef.value) { + if (aiSubtitleBarRef.value && !isUserScrolling.value) { aiSubtitleBarRef.value.scrollTo({ top: aiSubtitleBarRef.value.scrollHeight, behavior: "smooth", @@ -171,13 +131,14 @@ watch( .ai-only-mode { display: flex; - align-items: flex-end; + flex-direction: column; padding-bottom: 4px; } .ai-subtitle-bar { width: 100%; - max-height: 100%; + flex: 1; + min-height: 0; overflow-y: auto; background: linear-gradient( 135deg, @@ -210,27 +171,4 @@ watch( transition: font-size 0.3s ease; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } - -.scroll-hint { - position: sticky; - bottom: 0; - left: 50%; - transform: translateX(-50%); - display: flex; - align-items: center; - justify-content: center; - width: 28px; - height: 28px; - border-radius: 50%; - background: rgba(108, 140, 255, 0.3); - color: rgba(255, 255, 255, 0.8); - cursor: pointer; - margin: 8px auto 0; - transition: all 0.2s; - - &:hover { - background: rgba(108, 140, 255, 0.5); - transform: translateX(-50%) scale(1.1); - } -}