数据字典与共享工具
虽然这个页面名沿用了旧占位结构，但这里真正讲的是 VEF 在业务系统里非常高频的一组能力:
- 数据字典
- 选项转换
- 拼音搜索
@vef-framework-react/shared提供的通用工具
数据字典从哪里来
在 createApp().render() 时提供:
createApp().render({
appContext: {
dataDictQueryFn: findDataDictItems
},
...
});
只要这里配置好了，后面的表单和搜索区域就可以直接用:
useDataDictQueryuseDataOptionsSelectuseDataOptionsTreeSelect
一个最常见的例子
const genderSelectProps = useDataOptionsSelect({
dataDictKey: "common.gender"
});
这比页面里自己拉字典、自己做 label/value 转换更稳定，也更统一。
拼音搜索为什么很实用
VEF 的数据选项转换链支持自动补充拼音字段，因此:
- 中文标签可以按中文搜索
- 也可以按全拼或首字母搜索
这对人员、科室、部门、字典项这类后台数据非常有价值。
@vef-framework-react/shared 最值得常用的导出
| 导出 | 用途 |
|---|---|
z | 表单与参数校验 |
EventEmitter | 页面局部事件总线 |
formatDate / getLocalizedDateTime | 日期时间展示 |
flattenTree / mapTree / traverseTree | 树数据处理 |
withPinyin | 为选项补充拼音索引 |
camelCase / constantCase | 字符串转换 |
使用建议
业务页面里只要遇到“字典”“树结构”“格式化”“校验”，优先先看看 shared 和相关 hooks 有没有现成能力。
这套框架本来就是为了减少页面层重复劳动而设计的。