@hzab/schema-descriptions-mobile

移动端详情（只读展示）渲染器：用 Formily schema 描述字段，按 descriptions 场景渲染为详情视图。

• Node.js ≥ 24

安装

pnpm add @hzab/schema-descriptions-mobile

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

消费方需自备 peerDependencies：@formily/antd-mobile、@formily/core、@formily/json-schema、@formily/react、@formily/reactive、@formily/shared、@hzab/formily-result-utils、antd-mobile、antd-mobile-icons、react、react-dom（本包不会随包安装）。

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

快速开始

默认导出即组件（内部为 forwardRef，ref.current.formRender 可取到 Formily Form 实例）：

import SchemaDescriptions from "@hzab/schema-descriptions-mobile";

const schema = {
  form: { layout: "horizontal" },
  schema: {
    type: "object",
    properties: {
      name: { type: "string", title: "姓名", "x-component": "Text" },
      status: { type: "string", title: "状态", "x-component": "Select" },
    },
  },
};

<SchemaDescriptions schema={schema} data={{ name: "张三", status: "active" }} />;

API

Props

| 属性 | 类型 | 必须 | 默认值 | 说明 | | -------------- | ----------------- | ---- | -------------- | ------------------------------------------------------------------------ | | schema | Object | 是 | - | Formily schema。既可传 { form, schema } 结构，也可直接传 schema 本体 | | data | Object | 否 | - | 详情数据；同时作为 initialValues，且每次变化都会 setValues | | layout | string | 否 | "horizontal" | 布局，覆盖 schema.form.layout | | components | Object | 否 | - | 追加/覆盖 SchemaField 的组件注册表（合并顺序见下） | | schemaScope | Object | 否 | - | 追加给 schema 表达式的作用域变量 | | formOptions | Object | 否 | - | 透传给 createForm 的选项（在 initialValues 之后展开，可覆盖它） | | init | (form) => void | 否 | - | 组件挂载后回调一次，入参为 Formily Form 实例 | | footerRender | () => ReactNode | 否 | - | 渲染在详情内容下方的自定义节点 | | className | string | 否 | - | 追加到外层 div.schema-descriptions 的 className |

ref

| 字段 | 说明 | | ------------ | ---------------------------------------- | | formRender | Formily Form 实例（createForm 的产物） |

schema 结构

{
  form: { layout: "horizontal" },   // 可选：FormLayout 配置
  schema: { type: "object", properties: { /* 字段 */ } },
}

layout 的处理：以 props.layout 优先，其次 schema.form.layout，都没有时回落 "horizontal"。

内置组件注册表

SchemaField 默认注册：

• Slider、Card、FormGrid、Space（来自 antd-mobile / @formily/antd-mobile）；
• 本包自定义组件：ArrayCards、ArrayTable、FormCollapse、FormItem；
• @hzab/formily-result-utils 的全部导出：Cascader、Checkbox、DatePicker、Radio、Select、 Switch、TimePicker、TreeSelect、ResultShow，以及别名 Input、Text、Password、NumberPicker；
• 最后合并 props.components（同名覆盖内置项）。

因此 schema 里 "x-component": "Text" / "Select" / "DatePicker" 等直接可用，无需自行注册。

内置作用域

scope 默认含 scenario: "schema-descriptions-mobile"，可用于 x-reactions 表达式区分场景； props.schemaScope 的键会合并进该作用域。

提示：本组件面向只读展示，内部通过 GlobalPropsContext 传出 _scenario_: "descriptions"； 需要可编辑表单请用 @hzab/form-render-mobile。

相关文档

• 消费方接入指南
• @hzab/formily-result-utils —— 内置的详情字段渲染组件
• CHANGELOG.md