Skip to content

Commit a0c5c6d

Browse files
committed
add README.md
1 parent 9f4763d commit a0c5c6d

1 file changed

Lines changed: 204 additions & 0 deletions

File tree

README.md

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,205 @@
11
# 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

Comments
 (0)