|
1 | 1 | # Form Engine |
| 2 | + |
| 3 | +一个基于 React 的动态表单引擎,支持表单动态渲染、字段验证、事件处理和布局控制。 |
| 4 | + |
| 5 | +## 项目结构 |
| 6 | + |
| 7 | +``` |
| 8 | +coding-form/ |
| 9 | +├── packages/ |
| 10 | +│ └── form-view/ # 核心表单视图库 |
| 11 | +│ ├── src/ |
| 12 | +│ │ ├── form/ # 表单组件 |
| 13 | +│ │ ├── factory/ # 表单项工厂 |
| 14 | +│ │ ├── register/ # 组件注册中心 |
| 15 | +│ │ ├── store/ # Redux 状态管理 |
| 16 | +│ │ ├── context/ # React Context |
| 17 | +│ │ ├── instance/ # 表单实例控制 |
| 18 | +│ │ ├── presenters/ # 表单展示层 |
| 19 | +│ │ ├── validate/ # 表单验证 |
| 20 | +│ │ ├── event/ # 事件处理 |
| 21 | +│ │ ├── layout/ # 布局系统 |
| 22 | +│ │ ├── hooks/ # 自定义 Hooks |
| 23 | +│ │ └── types/ # TypeScript 类型定义 |
| 24 | +│ └── dist/ # 构建输出 |
| 25 | +├── apps/ # 示例应用 |
| 26 | +│ ├── app-pc/ # PC 端示例 |
| 27 | +│ └── app-mobile/ # 移动端示例 |
| 28 | +└── package.json # 工作区配置 |
| 29 | +``` |
| 30 | + |
| 31 | +## 核心功能 |
| 32 | + |
| 33 | +### 1. 动态表单渲染 |
| 34 | + |
| 35 | +通过元数据(Meta)动态生成表单,支持: |
| 36 | +- 多种数据类型:`STRING`, `INTEGER`, `LONG`, `DOUBLE`, `BOOLEAN` |
| 37 | +- 字段属性:名称、编码、类型、默认值、提示等 |
| 38 | +- 嵌套子表单(subForms) |
| 39 | + |
| 40 | +### 2. 表单验证 |
| 41 | + |
| 42 | +```typescript |
| 43 | +interface FormFieldValidator { |
| 44 | + target: FieldKey; // 校验目标字段 |
| 45 | + validator: (instance: FormInstance, value: any) => boolean | string; |
| 46 | +} |
| 47 | +``` |
| 48 | + |
| 49 | +- 支持自定义验证规则 |
| 50 | +- 异步验证支持 |
| 51 | +- 隐藏字段自动跳过验证 |
| 52 | + |
| 53 | +### 3. 事件系统 |
| 54 | + |
| 55 | +支持表单事件绑定和处理: |
| 56 | + |
| 57 | +```typescript |
| 58 | +interface FormEvent { |
| 59 | + type: 'load' | 'change' | 'blur'; // 事件类型 |
| 60 | + target: FieldKey; // 事件目标 |
| 61 | + event: (formInstance: FormInstance, value: any) => void; |
| 62 | +} |
| 63 | +``` |
| 64 | + |
| 65 | +- `load`: 表单加载时触发 |
| 66 | +- `change`: 字段值变化时触发 |
| 67 | +- `blur`: 字段失去焦点时触发 |
| 68 | + |
| 69 | +### 4. 布局控制 |
| 70 | + |
| 71 | +支持卡片布局和默认布局: |
| 72 | + |
| 73 | +```typescript |
| 74 | +interface FormLayout { |
| 75 | + formCode: string; |
| 76 | + type: 'card'; |
| 77 | + props: CardLayout |
| 78 | +} |
| 79 | + |
| 80 | +interface CardLayout { |
| 81 | + title: string; |
| 82 | + layout: 'horizontal' | 'vertical'; |
| 83 | + fields: FieldLayout[]; |
| 84 | + mainFields: string[]; |
| 85 | +} |
| 86 | +``` |
| 87 | + |
| 88 | +### 5. 表单实例控制 |
| 89 | + |
| 90 | +提供丰富的表单操作方法: |
| 91 | + |
| 92 | +```typescript |
| 93 | +// 获取/设置字段值 |
| 94 | +getFieldValue(name: string, formCode?: string) |
| 95 | +getFieldsValue(formCode?: string) |
| 96 | +setFieldValue(name: string, value: any, formCode?: string) |
| 97 | +setFieldsValue(values: any, formCode?: string) |
| 98 | + |
| 99 | +// 表单操作 |
| 100 | +resetFields(nameList?: string[], formCode?: string) |
| 101 | +validateFields(nameList?: string[], formCode?: string) |
| 102 | +submit(formCode?: string) |
| 103 | + |
| 104 | +// 动态控制 |
| 105 | +hiddenFields(hidden: boolean, nameList: string[]|string, formCode?: string) |
| 106 | +requiredFields(required: boolean, nameList: string[]|string, formCode?: string) |
| 107 | +``` |
| 108 | + |
| 109 | +## 快速开始 |
| 110 | + |
| 111 | +### 1. 安装依赖 |
| 112 | + |
| 113 | +```bash |
| 114 | +pnpm install |
| 115 | +``` |
| 116 | + |
| 117 | +### 2. 注册表单组件 |
| 118 | + |
| 119 | +```tsx |
| 120 | +import { FormRegistry } from '@coding-form/form-view'; |
| 121 | +import YourFormComponent from './YourFormComponent'; |
| 122 | +import formInstanceFactory from './formInstanceFactory'; |
| 123 | + |
| 124 | +FormRegistry.getInstance().register(YourFormComponent, formInstanceFactory); |
| 125 | +``` |
| 126 | + |
| 127 | +### 3. 使用表单视图 |
| 128 | + |
| 129 | +```tsx |
| 130 | +import { FormView } from '@coding-form/form-view'; |
| 131 | + |
| 132 | +const meta = { |
| 133 | + name: '用户信息', |
| 134 | + code: 'user_form', |
| 135 | + fields: [ |
| 136 | + { |
| 137 | + id: '1', |
| 138 | + name: '姓名', |
| 139 | + code: 'name', |
| 140 | + type: 'text_input', |
| 141 | + dataType: 'STRING', |
| 142 | + hidden: false, |
| 143 | + required: true, |
| 144 | + placeholder: '请输入姓名' |
| 145 | + } |
| 146 | + ] |
| 147 | +}; |
| 148 | + |
| 149 | +<FormView meta={meta} />; |
| 150 | +``` |
| 151 | + |
| 152 | +### 4. 开发模式 |
| 153 | + |
| 154 | +```bash |
| 155 | +# 监听构建 form-view |
| 156 | +pnpm watch:form-view |
| 157 | + |
| 158 | +# 运行 PC 示例应用 |
| 159 | +pnpm dev:app-pc |
| 160 | + |
| 161 | +# 运行移动端示例应用 |
| 162 | +pnpm dev:app-mobile |
| 163 | +``` |
| 164 | + |
| 165 | +### 5. 构建 |
| 166 | + |
| 167 | +```bash |
| 168 | +pnpm build |
| 169 | +``` |
| 170 | + |
| 171 | +## 技术栈 |
| 172 | + |
| 173 | +- **React 18** - UI 框架 |
| 174 | +- **TypeScript** - 类型系统 |
| 175 | +- **Redux Toolkit** - 状态管理 |
| 176 | +- **React Redux** - React 绑定 |
| 177 | +- **Rslib** - 构建工具 |
| 178 | + |
| 179 | +## API 参考 |
| 180 | + |
| 181 | +### FormView 组件属性 |
| 182 | + |
| 183 | +| 属性 | 类型 | 说明 | |
| 184 | +|------|------|------| |
| 185 | +| meta | FormMeta | 表单元数据定义 | |
| 186 | +| form | FormInstance | 表单实例 | |
| 187 | +| onValuesChange | (values: any) => void | 值变化回调 | |
| 188 | +| review | boolean | 是否预览模式 | |
| 189 | +| validators | FormFieldValidator[] | 验证规则数组 | |
| 190 | +| events | FormEvent[] | 事件定义数组 | |
| 191 | +| layouts | FormLayout[] | 布局定义数组 | |
| 192 | + |
| 193 | +### 数据类型 |
| 194 | + |
| 195 | +| 类型 | 说明 | |
| 196 | +|------|------| |
| 197 | +| STRING | 字符串 | |
| 198 | +| INTEGER | 整数 | |
| 199 | +| LONG | 长整数 | |
| 200 | +| DOUBLE | 小数 | |
| 201 | +| BOOLEAN | 布尔值 | |
| 202 | + |
| 203 | +## 许可证 |
| 204 | + |
| 205 | +ISC |
0 commit comments