# @aglyn/shared-ui-jsx-forms 中文文档

规范地址：https://npmcn.com/package/%40aglyn/shared-ui-jsx-forms/

版本：1\.19\.0
npm 元数据更新时间：2026-11-07T13:59:30.708Z
中文译文更新时间：2026-11-05T22:52:15.130Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aglyn/shared-ui-jsx-forms
原文对照：https://npmcn.com/package/%40aglyn/shared-ui-jsx-forms/?lang=original
项目主页：https://aglyn.com/
源码仓库：https://github.com/aglyn/aglyn

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：993 kB，153 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：12 个
- peer 依赖：next ^16\.3\.3，react ^19\.2\.8，@mui/material ^9\.3\.1，@mui/icons-material ^9\.3\.1，@mui/x-date-pickers ^9\.12\.0
- 首次发布：2026-09-20T23:54:24.867Z
- 最新版本发布：2026-11-07T13:59:30.380Z
- 近 30 天下载量：10627（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：161（近 12 个月 161 个）

## 中文简介

材料 UI 组件映射器 [数据驱动窗体](https://github.com/data-driven-forms/react-forms),加 Aglyn 编辑器的额外字段类型: 颜色和图标拾取器、 CSS 维度、 边框和梯度编辑器、 断点跨行、 数据

## 安装

```sh
npm install @aglyn/shared-ui-jsx-forms
```

也可以使用：`pnpm add @aglyn/shared-ui-jsx-forms`、`yarn add @aglyn/shared-ui-jsx-forms`、`bun add @aglyn/shared-ui-jsx-forms`

## README

# @aglyn/ shared- ii- jsx- 形式

材料 UI 组件映射器 [数据驱动窗体](https://github.com/data-driven-forms/react-forms),加上额外的字段类型 Aglyn 编辑器需要:颜色和图标取取器,CSS维度,边框和梯度编辑器,一个断点跨行,一个数据表,以及主题尺度和预设选择器. 设计师的属性面板和插件的控制台表都随它而提供. 如果您使用带有当前 MUI 版本的数据驱动窗体, 请安装它 .

> 从Aglyn monorepo出版到npm. 随后的版本 [语义版本](https://semver.org/)。 。 。 .

## 安装

```
npm install @aglyn/shared-ui-jsx-forms
```

同伴依赖性 : `react`, (中文(简体) ), `next`, (中文(简体) ), `@mui/material`, (中文(简体) ), `@mui/icons-material` 财务报告和审定财务报表 `@mui/x-date-pickers`。 。 。 . `next` 字段组件被装入 `next/dynamic`。 。 。 . `@data-driven-forms/react-form-renderer` 是一个正常的依赖,并且是再出口的,所以您不会单独导入.

## 里面有什么东西

-   **组件映射器.** `componentMapper` 地图 `FieldComponentType` 到它的地盘。 较窄的映射器覆盖常见子集: `simpleComponentMapper` (选择、子窗体、切换、文本字段、文本区域), `optionComponentMapper`, (中文(简体) ), `dateTimeComponentMapper` 财务报告和审定财务报表 `pickerComponentMapper`。单项导出为 `FIELD_MAP_*`,并且懒散地装入的字段组件为 `Field*` (单位:千美元)`FieldTextField`, (中文(简体) ), `FieldSelect`, (中文(简体) ), `FieldColorPicker` (见a/cn.9/wg.iii/wp.iii/wp.1号文件).
-   **映射器组件 .** 写入当前 MUI API : `Checkbox`, (中文(简体) ), `Radio`, (中文(简体) ), `Select`, (中文(简体) ), `Switch`, (中文(简体) ), `Slider`, (中文(简体) ), `TextField`, (中文(简体) ), `Textarea`, (中文(简体) ), `DatePicker`, (中文(简体) ), `TimePicker`, (中文(简体) ), `DualListSelect`, (中文(简体) ), `SubForm`, (中文(简体) ), `Tabs`, (中文(简体) ), `Wizard`, (中文(简体) ), `PlainText`。映射器是一个端口 `@data-driven-forms/mui-component-mapper` (阿帕切-2.0) (中文(简体) ).
-   **编辑器字段类型 .** `CssDimension`, (中文(简体) ), `CssBorder`, (中文(简体) ), `CssGradient`, (中文(简体) ), `BreakpointSpan` 中,每个数据表字段都坚持一个字符串 `seed…Draft` 编号 : `serialize…Draft` 帮助者被导出旁边. `ColorPickerComponent` 可以通过 `ColorPickerTokensContext`。 。 。 . `IconSelectControl` 通过 id 选择材料设计图标.
-   **Num.** `FieldComponentType`, (中文(简体) ), `FieldValidatorType`, (中文(简体) ), `FieldDataType`。 。 。 .
-   **模板和抽屉.** `GridFormTemplateComponent` 财务报告和审定财务报表 `ArtifactFormTemplate` 是将字段设置在带有提交按钮的 MUI 网格中的窗体模板. `CreateArtifactDrawer` 是一个抽屉,带有一个名称和描述的创建格式,可以接受 `extraFields`。 。 。 .
-   **从数据驱动形式再出口.** `FormRenderer`, (中文(简体) ), `FormSpy`, (中文(简体) ), `FieldProvider`, (中文(简体) ), `useFieldApi`, (中文(简体) ), `useFormApi`, (中文(简体) ), `componentTypes`, (中文(简体) ), `validatorTypes`, (中文(简体) ), `dataTypes`, (中文(简体) ), `WizardContext` 编辑 `FieldSchema`, (中文(简体) ), `ComponentMapper`, (中文(简体) ), `Validator` 和相关类型.
-   **助会者.** `withGridItem`, (中文(简体) ), `validationMessage`, (中文(简体) ), `optionIsEqualToValue`。 。 。 .

## 使用量

```tsx
'use client'

import {
  ArtifactFormTemplate,
  FieldComponentType,
  FormRenderer,
  simpleComponentMapper,
} from '@aglyn/shared-ui-jsx-forms'

const schema = {
  fields: [
    {
      component: FieldComponentType.TEXT_FIELD,
      name: 'displayName',
      label: 'Name',
      isRequired: true,
    },
    {
      component: FieldComponentType.SWITCH,
      name: 'enabled',
      label: 'Enabled',
    },
  ],
}

export function Example() {
  return (
    <FormRenderer
      FormTemplate={ArtifactFormTemplate}
      componentMapper={simpleComponentMapper}
      schema={schema}
      onSubmit={(values) => console.log(values)}
    />
  )
}
```

`@aglyn/shared-data-forms` 已预定义连接到相同字段( 电子邮件、 密码、 地址) 的计划 `fields` 阵列.

## 怎样才合适

A 类 `shared` UI软件包. 这取决于 `@aglyn/shared-ui-jsx`, (中文(简体) ), `@aglyn/shared-ui-theme`, (中文(简体) ), `@aglyn/shared-ui-color-picker`, (中文(简体) ), `@aglyn/shared-data-enums`, (中文(简体) ), `@aglyn/shared-data-mdi`, (中文(简体) ), `@aglyn/shared-util-tools` 财务报告和审定财务报表 `@aglyn/shared-util-vendor`。 。 。 . `@aglyn/besigner-ui` 而表格、电子邮件和营销插件都取决于它。 共享软件包是通用的:它们只导入其他共享软件包并持有没有插件的域名.

## 许可证

阿帕奇2.0 (英语). 资料来源: [https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/jsx-forms. 中国植物物种信息数据库](https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/jsx-forms)

## 常见问题

### @aglyn/shared-ui-jsx-forms 是什么？

材料 UI 组件映射器 数据驱动窗体,加 Aglyn 编辑器的额外字段类型: 颜色和图标拾取器、 CSS 维度、 边框和梯度编辑器、 断点跨行、 数据

### 如何安装 @aglyn/shared-ui-jsx-forms？

在项目目录运行 npm install @aglyn/shared-ui-jsx-forms，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（^16\.3\.3）、react（^19\.2\.8）、@mui/material（^9\.3\.1）、@mui/icons-material（^9\.3\.1）、@mui/x-date-pickers（^9\.12\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aglyn/shared-ui-jsx-forms 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aglyn/shared-ui-jsx-forms 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aglyn/shared-ui-jsx-forms 可以商用吗？

@aglyn/shared-ui-jsx-forms 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @aglyn/shared-ui-jsx-forms 的下载量有多少？

根据 npm 官方下载统计，@aglyn/shared-ui-jsx-forms 在 2026/10/05 – 2026/11/03 这 30 天内被下载 10,627 次，日均约 354 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aglyn/shared-ui-jsx-forms 还在维护吗？

最新版本 1\.19\.0 发布于 2026/11/07（今天）；至今共发布 161 个版本，其中过去 12 个月发布了 161 个；首次发布于 2026/09/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。