Skip to content

状态、主题与字典

Store 职责

Store职责持久化
settings系统主题、布局与组件偏好localStorage,带 schema 迁移
user用户详情、菜单、角色与动态路由来源localStorage
dict全局数据字典与渲染辅助localStorage
tab已打开页签按 store 配置
lock锁屏、可选 PIN 散列、自动锁屏时长localStorage
socketWebSocket 连接状态运行时状态

主题与布局

主题支持亮色、暗色和跟随系统;支持纯色主题、背景皮肤、圆角、灰色/色弱模式。当前提供三种布局模式:垂直布局(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),让当前会话重新拉取。生产后端应为字典接口设置合理缓存策略和版本机制。

基于 MIT License 开源