数据字典组件族（*-dict-pro）

基于 @fx/components 基础组件封装的字典驱动组件族，共 8 个。组件只做「数据来源换成字典」，交互全部复用基础组件；全部以 dict-type 为核心 prop，业务表字段存 dict_value。

引入方式

import {
  FxProDictTag,
  FxProDictSelect,
  FxProDictRadio,
  FxProDictRadioGroup,
  FxProDictRadioBtn,
  FxProDictCheckbox,
  FxProDictCheckboxGroup,
  FxProDictCheckboxBtn,
} from '@fx/pro'

数据注入（DICT_OPTIONS_PROVIDER）

@fx/pro 保持业务无关——组件不依赖任何 app 的 store，字典选项由宿主应用 provide 取数函数：

import { provide } from 'vue'
import { DICT_OPTIONS_PROVIDER } from '@fx/pro'
import { useDictStore } from '@/stores/dict'

const dictStore = useDictStore()
provide(DICT_OPTIONS_PROVIDER, (dictType: string) => dictStore.optionsOf(dictType))

未提供时选项为空数组（组件不炸、显示兜底文案）。

组件一览

组件	本体	场景
FxProDictTag	FxTag	状态标签（未知值显示原值兜底，不套标签）
FxProDictSelect	FxSelect + FxOption	单选/多选下拉（multiple 原样透传）
FxProDictRadio	FxRadio	单项，表格/详情场景
FxProDictRadioGroup	FxRadioGroup（type=radio）	单选组
FxProDictRadioBtn	FxRadioGroup（type=button）	单选按钮组
FxProDictCheckbox	FxCheckbox	单项勾选（是/否 类字典，在肯定/否定值间切换）
FxProDictCheckboxGroup	FxCheckboxGroup（type=checkbox）	多选组（v-model 为 dict_value 数组）
FxProDictCheckboxBtn	FxCheckboxGroup（type=button）	多选按钮组

用法示例

<!-- 标签：value → 文案 + 色调（tag_class），未知值显示原值 -->
<FxProDictTag dict-type="sys_normal_disable" :value="row.status" />

<!-- 单选下拉 / 多选下拉 -->
<FxProDictSelect v-model="form.type" dict-type="drama_asset_type" clearable />
<FxProDictSelect v-model="form.tags" dict-type="drama_tag" multiple />

<!-- 单选组 / 按钮组 -->
<FxProDictRadioGroup v-model="form.enabled" dict-type="sys_normal_disable" />
<FxProDictRadioBtn v-model="form.level" dict-type="drama_level" />

<!-- 多选组 / 按钮组 -->
<FxProDictCheckboxGroup v-model="form.scenes" dict-type="drama_scene" />
<FxProDictCheckboxBtn v-model="form.scenes" dict-type="drama_scene" />

统一附加 Props

属性	类型	默认值	说明
dict-type	string	—（必填）	字典类型句柄
include	string[]	—	只保留指定 dict_value（include 优先于 exclude）
exclude	string[]	—	排除指定 dict_value
use-default	boolean	false	v-model 为空时初始化为 is_default 项（受控组件不偷改 v-model，需显式开启；组内无默认项则取首项）
number	boolean	false	number 口径：选项值与 v-model 按 number 处理（非数字值剔除），供后端数值列（如 TINYINT 1/0）严格比对。7 个值组件支持；FxProDictTag 纯显示不需要

其余 props（placeholder / disabled / clearable / multiple…）原样透传给基础组件。

number 口径

dict_value 在字典表里是 VARCHAR，默认一切以 string 为真相。当业务列存数值（1/0）时，开启 number 让选项与 v-model 统一产出 number，避免 1 !== '1' 的严格比对陷阱：

<!-- v-model 产出 number（1/0）；非数字值（如 MANUAL 类字典）被剔除不渲染 -->
<FxProDictSelect dict-type="sys_normal_disable" number v-model="form.status" />
<FxProDictCheckboxGroup dict-type="sys_scene" number v-model="form.scenes" />

• 入向零转换：回显比对走 String() 归一，v-model 传 1 或 '1' 都能命中；
• checkbox 特例：number 下否定项缺失（单项字典）时产 undefined 而非 ""（0 是合法业务值，语义不同）；
• 注入契约 DICT_OPTIONS_PROVIDER 不变——宿主仍供 string 选项，数值化是组件边界内的派生。

函数式 API

组件之外，业务侧更常用 store 的函数式调用（见 web 端 @/stores/dict）：

import { getDictOptions, getDictLabel, getDictTagClass } from '@/stores/dict'

getDictOptions('drama_asset_type') // 同步读缓存，未命中返回 [] 并后台补拉
getDictOptions('sys_normal_disable', { number: true }) // number 口径：值转 number，非数字值剔除
getDictLabel('sys_task_run_status', row.status) // 未知值返回原值（入参 number/string 均可）
getDictTagClass('sys_notice_type', noticeType) // 标签色调