@hzab/formily-result-utils

Formily 结果展示组件集：把字段值按枚举/选项渲染为只读文本、标签或色块，供详情态 schema （@hzab/schema-descriptions、@hzab/schema-descriptions-mobile、@hzab/list-render）作为 x-component 使用。

• Node.js ≥ 24

安装

pnpm add @hzab/formily-result-utils

本包同时发布到公共 npm（registry.npmjs.org，public access）与企业私有源（ld / old）。默认源可直接安装， 无需额外配置；若团队要求走内网源，见消费方接入指南 §2。

消费方需自备 peerDependencies：@formily/react、dayjs、lodash、nanoid、react、react-dom（本包不会随包安装）。

发布形态：本包在本仓以源码直出方式发布——main 指向 src，由消费方打包器编译 TypeScript 与 .less 样式；@hzab/formily-result-utils/src/* 深路径同样可直接引用。随包发布的 dist/ 仅用于 类型解析（types → dist/index.d.ts），不是运行时入口。消费方需要承担的编译责任见 消费方接入指南 §4。

快速开始

组件从根入口导出，注册进 SchemaField 后即可在 schema 里按名字引用：

import { createSchemaField } from "@formily/react";
import { Select, DatePicker, Text, Switch } from "@hzab/formily-result-utils";

const SchemaField = createSchemaField({
  components: { Select, DatePicker, Text, Switch },
});

const schema = {
  type: "object",
  properties: {
    name: { type: "string", title: "姓名", "x-component": "Text" },
    status: {
      type: "string",
      title: "状态",
      "x-component": "Select",
      "x-component-props": { showMode: "tags" },
      enum: [
        { label: "启用", value: "on", color: "#00b42a" },
        { label: "停用", value: "off", color: "#c9cdd4" },
      ],
    },
    createTime: { type: "string", title: "创建时间", "x-component": "DatePicker" },
  },
};

<SchemaField schema={schema} />;

@hzab/schema-descriptions(-mobile) 已内置注册这些组件，用它们时无需再注册，见其 README。

API

根入口导出

| 导出 | 归约到 | 说明 | | ----------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------- | | ResultShow | 自身 | 基础展示：渲染 value ?? content，并做空值占位处理 | | Text / Input / Input.TextArea / Password / NumberPicker | ResultShow | 均为 ResultShow 的别名，便于直接复用具名 schema | | Select | 自身 | 按 field 的 dataSource 把值转成标签文案；传 showMode 时改走 EnumRender | | Cascader | 自身 | 级联值 → 文案 | | TreeSelect | 自身 | 树选择值 → 文案 | | Checkbox | 自身 | 多选值 → 文案 | | Radio | 自身 | 单选值 → 文案 | | Switch | 自身 | 布尔值 → 默认「是 / 否」（见下） | | DatePicker | 自身 | 日期值 → 文案；另导出 getDatePickerVal(val, props) | | TimePicker | 自身 | 时间值 → 文案 |

Switch 未配 enum 时使用默认枚举：

[
  { value: true, label: "是", color: "#00b42a" },
  { value: false, label: "否", color: "#c9cdd4" },
];

showMode（Select / 其他枚举型组件）

showMode 决定值的呈现方式，取值来自常量 SHOW_MODE_TYPES：

| 值 | 渲染组件 | 效果 | | -------------- | ------------ | ------------------------- | | "tags" | Tag | 标签（可带色） | | "prefixNode" | PrefixNode | 前缀节点 + 文案 | | "colorText" | ColorText | 彩色文字 | | 不传 | - | 纯文案（splitStr 连接） |

仅深路径可用（未从根入口导出）

以下组件与工具不在根入口导出，通过深路径引用（现有消费方即如此使用）：

| 路径 | 说明 | | ------------------------------------------------------ | ------------------------------------------------------------------------------------------ | | @hzab/formily-result-utils/src/components/EnumRender | 枚举渲染核心；props 见下 | | .../src/components/Tag、Tags | 标签 / 标签组（ITagProps：className、style、color、fontColor、borderColor 等） | | .../src/components/ColorText、ColorTexts | 彩色文字 | | .../src/components/PrefixNode、PrefixNodes | 前缀节点 | | .../src/common/constant | SHOW_MODE_TYPES、defaultSwitchEnum | | .../src/common/utils | mergeGlobalProps、getFieldOptItByVal 等 | | .../src/common/empty-val | handleEmptyVal、checkEmpty | | .../src/common/upload、upload-type | 上传文件 URL / 类型处理 |

EnumRender props：

| 属性 | 类型 | 默认值 | 说明 | | ------------- | ------------------------------------------- | ------ | ---------------------------------------------------- | | value | any | any[] | - | 字段值（非数组会归一化为数组） | | field | Object | - | Formily field；缺省时用 defaultSwitchEnum 兜底枚举 | | showMode | "tags" | "prefixNode" | "colorText" | - | 呈现方式 | | showId | boolean | true | option 未匹配到时是否直接展示 id | | emptySymbol | string | "-" | 空内容占位符 | | emptyOpt | Object | {} | handleEmptyVal 的配置 | | splitStr | string | "、" | 多个值的连接符 |

注意事项

• 本包是只读展示组件，不是表单控件（@formily/antd 的编辑态组件不在此包）。
• 组件内部 import "./index.less"；sideEffects 为 ["**/*.less"]，src 直出模式下由消费方打包器编译样式。
• 本包没有 exports 字段，深路径就是普通文件路径（src/...），升级时注意不要依赖内部文件结构的稳定性。

相关文档

• 消费方接入指南
• CHANGELOG.md