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;
|
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 {
|
.status-indicator {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|||||||
@ -20,6 +20,8 @@ function App() {
|
|||||||
|
|
||||||
// 获取当前主题
|
// 获取当前主题
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
let unlistenFn: (() => void) | null = null
|
||||||
|
|
||||||
const loadTheme = async () => {
|
const loadTheme = async () => {
|
||||||
try {
|
try {
|
||||||
const currentTheme = await window.__TAURI__.invoke('get_theme') as Theme
|
const currentTheme = await window.__TAURI__.invoke('get_theme') as Theme
|
||||||
@ -30,20 +32,21 @@ function App() {
|
|||||||
// 使用默认主题,不影响页面显示
|
// 使用默认主题,不影响页面显示
|
||||||
applyTheme('system')
|
applyTheme('system')
|
||||||
}
|
}
|
||||||
}
|
|
||||||
loadTheme()
|
|
||||||
|
|
||||||
// 监听主题变化事件
|
// 监听主题变化事件
|
||||||
let unlistenFn: (() => void) | null = null
|
try {
|
||||||
window.__TAURI__.listen('theme-change', (event) => {
|
const unlisten = await window.__TAURI__.listen('theme-change', (event) => {
|
||||||
const newTheme = event.payload as string
|
const newTheme = event.payload as string
|
||||||
setTheme(newTheme as Theme)
|
setTheme(newTheme as Theme)
|
||||||
applyTheme(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 () => {
|
return () => {
|
||||||
if (unlistenFn) {
|
if (unlistenFn) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user