Simon
23 lines
812 B
Plaintext
23 lines
812 B
Plaintext
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')
|