fix: 添加缺失的波形动画 CSS 样式并优化主题监听器
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:
parent
66f4b7e0c4
commit
6f4a7dafd4
@ -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;
|
||||
|
||||
@ -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) => {
|
||||
try {
|
||||
const unlisten = await 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)
|
||||
})
|
||||
unlistenFn = unlisten
|
||||
} catch (e) {
|
||||
console.error('Failed to setup theme listener:', e)
|
||||
}
|
||||
}
|
||||
|
||||
loadTheme()
|
||||
|
||||
return () => {
|
||||
if (unlistenFn) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user