From bfde0250e330808990bb71712b5e2aec692c6bfd Mon Sep 17 00:00:00 2001
From: libingxiang <libx@shpso.com>
Date: Wed, 8 Jul 2026 11:22:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=96=87=E5=AD=97=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      | 128 ++++++++++++++++---------------
 src/components/SubtitlePanel.vue |   2 +-
 2 files changed, 66 insertions(+), 64 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 431c2f4..d195a0f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -100,8 +100,8 @@
         <svg
             v-if="pickPhase === 'recording'"
             viewBox="0 0 24 24"
-            width="26"
-            height="26"
+            width="30"
+            height="30"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
@@ -118,8 +118,8 @@
             v-else-if="pickPhase === 'processing'"
             class="anim-dots"
             viewBox="0 0 24 24"
-            width="26"
-            height="26"
+            width="30"
+            height="30"
             fill="none"
             stroke="currentColor"
             stroke-width="1.5"
@@ -159,8 +159,8 @@
             v-else-if="pickPhase === 'waiting'"
             class="anim-ellipsis"
             viewBox="0 0 24 24"
-            width="26"
-            height="26"
+            width="30"
+            height="30"
             fill="none"
             stroke="currentColor"
             stroke-width="1.5"
@@ -197,8 +197,8 @@
             v-else-if="pickPhase === 'broadcasting'"
             class="anim-wave"
             viewBox="0 0 24 24"
-            width="26"
-            height="26"
+            width="30"
+            height="30"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
@@ -217,8 +217,8 @@
         <svg
             v-else
             viewBox="0 0 24 24"
-            width="26"
-            height="26"
+            width="30"
+            height="30"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
@@ -268,8 +268,8 @@
         <svg
             v-if="pickPhase === 'idle' && !isMuted"
             viewBox="0 0 24 24"
-            width="26"
-            height="26"
+            width="30"
+            height="30"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
@@ -286,8 +286,8 @@
             v-else-if="pickPhase === 'processing'"
             class="anim-dots"
             viewBox="0 0 24 24"
-            width="26"
-            height="26"
+            width="30"
+            height="30"
             fill="none"
             stroke="currentColor"
             stroke-width="1.5"
@@ -327,8 +327,8 @@
             v-else-if="pickPhase === 'waiting'"
             class="anim-ellipsis"
             viewBox="0 0 24 24"
-            width="26"
-            height="26"
+            width="30"
+            height="30"
             fill="none"
             stroke="currentColor"
             stroke-width="1.5"
@@ -365,8 +365,8 @@
             v-else-if="pickPhase === 'broadcasting'"
             class="anim-wave"
             viewBox="0 0 24 24"
-            width="26"
-            height="26"
+            width="30"
+            height="30"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
@@ -385,8 +385,8 @@
         <svg
             v-else
             viewBox="0 0 24 24"
-            width="26"
-            height="26"
+            width="30"
+            height="30"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
@@ -414,8 +414,8 @@
       <button class="interrupt-btn interrupt-bottom-right" @click="dhInterrupt">
         <svg
             viewBox="0 0 24 24"
-            width="24"
-            height="24"
+            width="28"
+            height="28"
             fill="none"
             stroke="currentColor"
             stroke-width="2.5"
@@ -773,9 +773,9 @@ async function handleVoiceQueryComplete(text: string) {
 /* ===== 拾音按钮 ===== */
 .mic-btn {
   flex-shrink: 0;
-  width: 110px;
-  height: 110px;
-  border-radius: 30px;
+  width: 130px;
+  height: 130px;
+  border-radius: 36px;
   border: 2px solid rgba(255, 255, 255, 0.15);
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(12px);
@@ -785,15 +785,16 @@ async function handleVoiceQueryComplete(text: string) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 6px;
   transition: all 0.25s ease;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
 
   .mic-label {
-    font-size: 10px;
+    font-size: 12px;
     font-weight: 500;
+    color: #ffffff;
     opacity: 0.7;
   }
 
@@ -812,7 +813,7 @@ async function handleVoiceQueryComplete(text: string) {
     box-shadow: 0 0 40px rgba(239, 68, 68, 0.3);
 
     .mic-label {
-      color: #f87171;
+      color: #ffffff;
       opacity: 1;
     }
   }
@@ -824,7 +825,7 @@ async function handleVoiceQueryComplete(text: string) {
     box-shadow: 0 0 32px rgba(52, 211, 153, 0.25);
 
     .mic-label {
-      color: #34d399;
+      color: #ffffff;
       opacity: 1;
     }
   }
@@ -836,7 +837,7 @@ async function handleVoiceQueryComplete(text: string) {
     opacity: 1;
 
     .mic-label {
-      color: rgba(239, 68, 68, 0.8);
+      color: #ffffff;
     }
   }
 
@@ -847,7 +848,7 @@ async function handleVoiceQueryComplete(text: string) {
     box-shadow: 0 0 24px rgba(96, 165, 250, 0.2);
 
     .mic-label {
-      color: #60a5fa;
+      color: #ffffff;
       opacity: 1;
     }
   }
@@ -859,7 +860,7 @@ async function handleVoiceQueryComplete(text: string) {
     box-shadow: 0 0 24px rgba(245, 158, 11, 0.2);
 
     .mic-label {
-      color: #fbbf24;
+      color: #ffffff;
       opacity: 1;
     }
   }
@@ -871,7 +872,7 @@ async function handleVoiceQueryComplete(text: string) {
     box-shadow: 0 0 24px rgba(52, 211, 153, 0.2);
 
     .mic-label {
-      color: #34d399;
+      color: #ffffff;
       opacity: 1;
     }
   }
@@ -1017,9 +1018,9 @@ async function handleVoiceQueryComplete(text: string) {
 /* ===== 打断按钮 ===== */
 .interrupt-btn {
   flex-shrink: 0;
-  width: 110px;
-  height: 110px;
-  border-radius: 30px;
+  width: 130px;
+  height: 130px;
+  border-radius: 36px;
   border: 2px solid rgba(251, 146, 60, 0.35);
   background: rgba(251, 146, 60, 0.12);
   backdrop-filter: blur(12px);
@@ -1029,15 +1030,16 @@ async function handleVoiceQueryComplete(text: string) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 6px;
   transition: all 0.25s ease;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
 
   .interrupt-label {
-    font-size: 10px;
+    font-size: 12px;
     font-weight: 600;
+    color: #ffffff;
     opacity: 0.85;
   }
 
@@ -1138,17 +1140,17 @@ async function handleVoiceQueryComplete(text: string) {
   }
 
   .mic-btn {
-    width: 70px;
-    height: 70px;
-    border-radius: 20px;
+    width: 85px;
+    height: 85px;
+    border-radius: 24px;
 
     .mic-label {
-      font-size: 8px;
+      font-size: 10px;
     }
   }
 
   .mic-btn-ring {
-    border-radius: 20px;
+    border-radius: 24px;
   }
 
   .interrupt-bottom-right {
@@ -1166,12 +1168,12 @@ async function handleVoiceQueryComplete(text: string) {
   }
 
   .interrupt-btn {
-    width: 70px;
-    height: 70px;
-    border-radius: 20px;
+    width: 85px;
+    height: 85px;
+    border-radius: 24px;
 
     .interrupt-label {
-      font-size: 8px;
+      font-size: 10px;
     }
   }
 
@@ -1232,13 +1234,13 @@ async function handleVoiceQueryComplete(text: string) {
   }
 
   .mic-btn {
-    width: 80px;
-    height: 80px;
-    border-radius: 22px;
+    width: 95px;
+    height: 95px;
+    border-radius: 26px;
   }
 
   .mic-btn-ring {
-    border-radius: 22px;
+    border-radius: 26px;
   }
 
   .interrupt-bottom-right {
@@ -1256,9 +1258,9 @@ async function handleVoiceQueryComplete(text: string) {
   }
 
   .interrupt-btn {
-    width: 80px;
-    height: 80px;
-    border-radius: 22px;
+    width: 95px;
+    height: 95px;
+    border-radius: 26px;
   }
 
   .hangup-top-left {
@@ -1320,17 +1322,17 @@ async function handleVoiceQueryComplete(text: string) {
   }
 
   .mic-btn {
-    width: 64px;
-    height: 64px;
-    border-radius: 18px;
+    width: 80px;
+    height: 80px;
+    border-radius: 22px;
 
     .mic-label {
-      font-size: 8px;
+      font-size: 10px;
     }
   }
 
   .mic-btn-ring {
-    border-radius: 18px;
+    border-radius: 22px;
   }
 
   .interrupt-bottom-right {
@@ -1348,12 +1350,12 @@ async function handleVoiceQueryComplete(text: string) {
   }
 
   .interrupt-btn {
-    width: 64px;
-    height: 64px;
-    border-radius: 18px;
+    width: 80px;
+    height: 80px;
+    border-radius: 22px;
 
     .interrupt-label {
-      font-size: 8px;
+      font-size: 10px;
     }
   }
 
diff --git a/src/components/SubtitlePanel.vue b/src/components/SubtitlePanel.vue
index f2dc97c..8983a6e 100644
--- a/src/components/SubtitlePanel.vue
+++ b/src/components/SubtitlePanel.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick } from "vue";
+import {ref, watch, nextTick, onMounted} from "vue";
 
 const props = defineProps<{
   aiSubtitle: string;