Forge Admin

Appearance

🔒 升级 PRO

字典管理 ​

字典管理模块用于维护系统中的枚举常量数据，通过键值对的形式统一管理下拉选项和状态标签，避免前端硬编码。

功能入口 ​

登录后点 平台管理 → 基础配置 → 字典管理（路由 /system/dictType）。点行操作 字典数据 进入该类型下的字典项。

字典管理列表

2026-08-26 演示站实拍。搜索：字典名称、字典类型、状态。主按钮是 新增字典类型 / 批量删除。列表列：字典、状态、备注、创建时间、操作。行操作是 字典数据 / 编辑 / 更多。字典列同时显示名称和类型编码。

字典类型与字典数据 ​

字典体系分为两个层级：

  • 字典类型：字典的分类定义，如 sys_user_sex（用户性别）
  • 字典数据：字典类型下的具体键值对，如 0 = 男, 1 = 女

新增字典类型 ​

点 新增字典类型。

新增字典类型

2026-08-26 演示站实拍。

字段必填说明
字典名称是如「用户性别」
字典类型是如 sys_user_sex
状态是正常 / 禁用
备注否

行操作是 字典数据 / 编辑 / 更多。更多里目前是删除。点 字典数据 进该类型下的字典项。

添加字典数据 ​

  1. 在左侧字典类型列表中，点击目标字典类型
  2. 右侧面板显示该类型下的字典数据列表，点击 新增 按钮
  3. 填写字典数据项：
    • 字典标签：前端显示的文本，如"男"
    • 字典键值：后端存储的值，如 0
    • 样式回显：可选，控制 DictTag 标签颜色
    • 排序号：控制下拉选项的显示顺序
    • 状态：正常 / 停用
  4. 点击 确定 保存
  5. 重复以上步骤添加所有需要的数据项

前端组件使用 ​

Forge Admin 提供了两个专用组件来消费字典数据：

DictSelect 下拉选择 ​

DictSelect 组件用于表单中的下拉选择，自动从字典加载选项：

vue
<DictSelect dict-type="sys_user_sex" v-model:value="formData.sex" />
  • dict-type 属性指定字典类型编码
  • 组件自动请求后端字典接口获取选项列表
  • 支持 v-model:value 双向绑定

DictTag 标签渲染 ​

DictTag 组件用于表格中渲染字典标签，自动匹配颜色样式：

vue
<DictTag :value="row.status" dict-type="sys_normal_disable" />
  • value 属性传入字典键值
  • dict-type 属性指定字典类型
  • 自动根据字典数据的样式配置渲染对应颜色标签

字典使用规范 ​

  • 下拉选项和状态标签必须使用字典组件，禁止前端硬编码
  • 字典数据通过 useDict('<dict_type>') 组合式 API 读取
  • 字典值的 dict_value 必须与后端枚举/存储值保持一致
  • 业务枚举和可配置枚举必须维护到字典表，禁止写死 options

相关文档 ​