状态、主题与字典
Store 职责
| Store | 职责 | 持久化 |
|---|---|---|
settings | 系统主题、布局与组件偏好 | localStorage,带 schema 迁移 |
user | 用户详情、菜单、角色与动态路由来源 | localStorage |
dict | 全局数据字典与渲染辅助 | localStorage |
tab | 已打开页签 | 按 store 配置 |
lock | 锁屏、可选 PIN 散列、自动锁屏时长 | localStorage |
socket | WebSocket 连接状态 | 运行时状态 |
主题与布局
主题支持亮色、暗色和跟随系统;支持纯色主题、背景皮肤、圆角、灰色/色弱模式。当前提供三种布局模式:垂直布局(vertical)、双栏布局(doubleColumn)和内容全屏布局(fullScreen),并可独立控制顶栏、侧栏、页签、面包屑、底部和常用工具按钮。
系统主题变化和其他标签页的配置变化会实时同步。重置设置会删除持久化配置并刷新页面。
数据字典
应用启动时加载字典。推荐返回结构:
json
{
"common_status": [
{ "label": "启用", "value": "1", "tag_type": "success" },
{ "label": "停用", "value": "0", "tag_type": "error" }
]
}使用方式:
ts
const dictStore = useDictStore()
const options = dictStore.options('common_status')
const label = dictStore.label('common_status', row.status)
const tagVNode = dictStore.tag('common_status', row.status)修改字典后需要强制调用 dictStore.load(true),让当前会话重新拉取。生产后端应为字典接口设置合理缓存策略和版本机制。