fix: 添加缺失的波形动画 CSS 样式并优化主题监听器
Some checks are pending
Build Windows GUI / build-windows (push) Waiting to run
Build Windows GUI / release (push) Blocked by required conditions

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
This commit is contained in:
impressionyang 2026-05-21 19:26:31 +08:00
parent 66f4b7e0c4
commit 6f4a7dafd4
2 changed files with 50 additions and 13 deletions

View File

@ -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;

View File

@ -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) {