字典系统

字典用于管理系统中固定的枚举值，如性别、状态、类型等。

什么是字典？

将硬编码的枚举值提取为可配置的数据：

// 硬编码（不推荐）
const genderOptions = [
  { label: '男', value: 1 },
  { label: '女', value: 2 }
]

// 字典（推荐）
const genderOptions = useDict('gender')
// 返回：[{ label: '男', value: '1' }, { label: '女', value: '2' }]

架构

┌─────────────┐     HTTP      ┌─────────────┐
│   前端       │ ───────────→ │   后端       │
│  DictStore  │               │  Dict API   │
│             │ ←──────────── │             │
└─────────────┘    SSE 推送    └─────────────┘
       │                              │
       ▼                              ▼
┌─────────────┐               ┌─────────────┐
│ localStorage│               │   MySQL     │
│  字典缓存    │               │ sys_dict    │
└─────────────┘               └─────────────┘

前端使用

DictSelect 组件

<template>
  <dict-select v-model="form.gender" dict-code="gender" />
</template>

DictTag 组件

<template>
  <dict-tag dict-code="gender" :value="row.gender" />
</template>

useDict 函数

import { useDict } from '@/utils/dict'

const genderOptions = useDict('gender')
// 返回 Ref<DictData[]>

字典数据结构

interface DictData {
  value: string    // 字典值
  label: string    // 显示文本
  tagType?: string // 标签类型（primary/success/warning/danger/info）
  sort?: number    // 排序
}

字典缓存

1. 首次请求时缓存到 Pinia Store
2. 同时缓存到 localStorage（持久化）
3. 后续请求直接读缓存
4. 后端推送变更时清除缓存

实时同步

后端字典变更时，通过 SSE 推送通知：

// useDictSync 自动监听并清除缓存
on('dict-change', (data) => {
  dictStore.removeCache(data.dictCode)
})

详见 useDictSync。

后端管理

数据库表

-- 字典类型表
CREATE TABLE sys_dict_type (
  id BIGINT PRIMARY KEY,
  dict_code VARCHAR(100) UNIQUE,
  dict_name VARCHAR(100),
  status TINYINT DEFAULT 1
);

-- 字典数据表
CREATE TABLE sys_dict_data (
  id BIGINT PRIMARY KEY,
  dict_code VARCHAR(100),
  value VARCHAR(100),
  label VARCHAR(100),
  tag_type VARCHAR(20),
  sort INT DEFAULT 0
);

字典配置

在「系统管理 → 字典管理」中配置。

下一步

• DictSelect 组件
• DictTag 组件
• useDictSync