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')
|