From 6f4a7dafd4be4e8b7c117da3de35d394cc06559f Mon Sep 17 00:00:00 2001
From: impressionyang <impressionyang@users.noreply.gitea.io>
Date: Thu, 21 May 2026 19:26:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0=E7=BC=BA=E5=A4=B1?=
 =?UTF-8?q?=E7=9A=84=E6=B3=A2=E5=BD=A2=E5=8A=A8=E7=94=BB=20CSS=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=B9=B6=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98=E7=9B=91?=
 =?UTF-8?q?=E5=90=AC=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS 变更:
- web/src/App.css: 新增 .waveform-animation 和 .wave-bar 样式
- web/src/App.css: 新增 @keyframes wave-animation 动画定义
- web/src/App.css: 新增 .waveform-placeholder 样式

前端变更:
- web/src/App.tsx: 优化主题监听器逻辑，使用 async/await 正确处理 listen 返回值

问题修复:
- 波形动画区域现在正确显示动画效果
- 主题监听器正确设置和清理
- 错误边界组件在发生未预期错误时显示友好提示

构建结果:
- Windows 包：dist/impress-asr-windows-x64-20260521_192207.zip
- 文件大小：5.0MB
---
 web/src/App.css | 34 ++++++++++++++++++++++++++++++++++
 web/src/App.tsx | 29 ++++++++++++++++-------------
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/web/src/App.css b/web/src/App.css
index 73a8a7b..e87596c 100644
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -223,6 +223,40 @@ body {
   overflow: hidden;
 }
 
+/* 波形动画 */
+.waveform-animation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 100%;
+}
+
+.wave-bar {
+  width: 6px;
+  border-radius: 3px;
+  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
+  animation: wave-animation 1s ease-in-out infinite;
+}
+
+@keyframes wave-animation {
+  0%, 100% {
+    height: 20%;
+  }
+  50% {
+    height: 100%;
+  }
+}
+
+.waveform-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
 /* 状态指示器 */
 .status-indicator {
   display: inline-flex;
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 0f4ccbe..25a9730 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -20,6 +20,8 @@ function App() {
 
   // 获取当前主题
   useEffect(() => {
+    let unlistenFn: (() => void) | null = null
+
     const loadTheme = async () => {
       try {
         const currentTheme = await window.__TAURI__.invoke('get_theme') as Theme
@@ -30,20 +32,21 @@ function App() {
         // 使用默认主题，不影响页面显示
         applyTheme('system')
       }
-    }
-    loadTheme()
 
-    // 监听主题变化事件
-    let unlistenFn: (() => void) | null = null
-    window.__TAURI__.listen('theme-change', (event) => {
-      const newTheme = event.payload as string
-      setTheme(newTheme as Theme)
-      applyTheme(newTheme as Theme)
-    }).then(fn => {
-      unlistenFn = fn
-    }).catch(e => {
-      console.error('Failed to setup theme listener:', e)
-    })
+      // 监听主题变化事件
+      try {
+        const unlisten = await window.__TAURI__.listen('theme-change', (event) => {
+          const newTheme = event.payload as string
+          setTheme(newTheme as Theme)
+          applyTheme(newTheme as Theme)
+        })
+        unlistenFn = unlisten
+      } catch (e) {
+        console.error('Failed to setup theme listener:', e)
+      }
+    }
+
+    loadTheme()
 
     return () => {
       if (unlistenFn) {