仅看ai,字幕滚动条

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 {

src/components/SubtitlePanel.vue

@@ -4,7 +4,7 @@
       class="subtitle-content ai-only-mode"
       ref="scrollContainerRef"
     >
-      <div v-if="aiSubtitle" class="ai-subtitle-bar" ref="aiSubtitleBarRef">
+      <div v-if="aiSubtitle" class="ai-subtitle-bar" ref="aiSubtitleBarRef" @scroll="handleScroll">
         <div
           class="ai-subtitle-text"
           ref="aiSubtitleTextRef"
@@ -12,24 +12,6 @@
         >
           {{ aiSubtitle }}
         </div>
-        <!-- 滚动指示器 -->
-        <div
-          v-if="aiTextOverflow"
-          class="scroll-hint"
-          @click="scrollAIToBottom"
-        >
-          <svg
-            viewBox="0 0 24 24"
-            width="14"
-            height="14"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-          >
-            <polyline points="6 9 12 15 18 9" />
-          </svg>
-        </div>
       </div>
       <div v-else class="subtitle-placeholder">
         <svg
@@ -63,7 +45,7 @@ const aiSubtitleBarRef = ref<HTMLElement | null>(null);
 const aiSubtitleTextRef = ref<HTMLElement | null>(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);
-  }
-}
 </style>