sequenceDiagram
    participant U as 坐席
    participant TB as TopBar.vue
    participant TS as useThemeStore
    participant UT as useTheme.ts
    participant DOM as document.documentElement
    participant LS as localStorage

    U->>TB: 点击 ☀️/🌙 切换开关
    TB->>TS: toggleTheme()
    TS->>TS: currentTheme = currentTheme === 'light' ? 'dark' : 'light'
    TS->>UT: applyTheme(currentTheme)
    UT->>DOM: setAttribute('data-theme', theme)
    UT->>LS: setItem('theme', theme)
    DOM-->>DOM: CSS 变量自动切换（:root / [data-theme="dark"]）
    DOM-->>U: 300ms 过渡动画，界面变色

    Note over U,LS: 页面加载时
    U->>UT: 首次进入页面
    UT->>LS: getItem('theme')
    LS-->>UT: 'dark' | 'light' | null
    UT->>DOM: setAttribute('data-theme', theme || 'light')