Skip to content

字典与权限

字典解决“业务值如何显示”,按钮权限解决“当前用户是否看到或操作动作”。两者都是前端适配层,不替代后端数据校验和鉴权。

字典接入

ts
app.use(SuperFormPlugin, {
  dictApi: async (name) => {
    const result = await dictionaryApi.get(name);
    return result.map((item) => ({
      label: item.name,
      value: item.code,
      disabled: item.disabled,
    }));
  },
});

字段只声明名称:

ts
{ type: 'Select', field: 'status', label: '状态', dictName: 'enabled_status' }

同一结果用于 Select 选项以及表格、详情的只读映射。

options 与 dictName 的选择

来源适合场景
options 静态数组页面常量、不会复用
options Ref/函数依赖当前模型或实时接口
dictName跨页面共享的标准字典

组件库不内置缓存。缓存、请求合并、过期和租户隔离应在 dictApi 中完成:

ts
const cache = new Map();

async function dictApi(name) {
  if (!cache.has(name)) cache.set(name, api.getDictionary(name));
  return cache.get(name);
}

标签展示

options 或 dictName 存在时只读默认使用 Tag。字段级配置优先于全局:

ts
// 全局颜色序列
tagViewer: ['blue', 'green', 'orange']

// 全局值到颜色
tagViewer: { enabled: 'green', disabled: 'default' }

// 当前字段关闭 Tag
{ type: 'Select', field: 'status', dictName: 'status', tagViewer: false }

// 当前字段完整规则
{
  type: 'Select',
  field: 'status',
  options: statusOptions,
  tagViewer: (value) => ({
    label: value === 'error' ? '异常' : '正常',
    color: value === 'error' ? 'red' : 'green',
  }),
}

tagViewer 还接受字符串数组、值到颜色对象、{ label?, value, color, icon? }[]。只想显示普通选项文字时设为 false

项目中的状态值通常是稳定的,更推荐在全局函数中把值、显示标签和语义色一起标准化:

ts
app.use(SuperFormPlugin, {
  tagViewer(value) {
    const statusMap: Record<string, { label: string; color: string }> = {
      0: { label: "停用", color: "default" },
      1: { label: "启用", color: "green" },
      2: { label: "异常", color: "red" },
    };
    return statusMap[String(value)];
  },
});

函数只接收当前值;返回颜色字符串时保留 options/dictName 提供的标签,返回对象时可以同时覆盖 labelcoloricon

按钮权限

ts
app.use(SuperFormPlugin, {
  buttonRoles: () => permissionStore.currentRoles,
});

buttonRoles() 在按钮组或表格操作列构建时读取当前权限数组,不会持续监听 store。路由权限模式下,应先在导航守卫或页面进入阶段更新当前页面权限,再挂载页面;同一页面内权限发生变化时,需要让相关按钮组重新创建。

ts
{
  name: 'delete',
  roleName: 'user:delete',
  unauthorized: 'disable',
  disabledTooltip: '当前账号没有删除权限',
}
配置行为
roleName不做权限过滤
命中角色正常显示
未命中,默认隐藏
unauthorized: 'hide'明确隐藏
unauthorized: 'disable'显示但禁用

按钮组也可设置统一 unauthorized,单按钮配置优先。

可见场景与业务状态

权限、场景、动态状态是三层不同判断:

ts
{
  name: 'approve',
  roleName: 'order:approve',
  visibleIn: 'detail',
  hidden: ({ record }) => record.status !== 'pending',
  disabled: ({ record }) => record.locked,
}
  • roleName:用户是否有权限。
  • visibleIn:表单/详情场景是否展示。
  • hidden / disabled:当前业务数据是否允许操作。

安全边界

按钮权限只控制前端界面。后端必须再次校验用户身份、资源范围和动作权限。字段级权限可在生成 Schema 前过滤,或用 hidden / disabled 响应业务状态。

基于 MIT 许可发布