midscene/apps/record-form

Record Form

一个基于 React + Ant Design 的用户注册表单应用，集成了 rrweb 录制功能。

功能特性

表单功能

• ✅ 用户名输入（必填，最少3个字符）
• ✅ 密码输入（必填，最少6个字符）
• ✅ 确认密码（必填，需与密码一致）
• ✅ 电子邮箱（必填，邮箱格式验证）
• ✅ 手机号码（可选，中国手机号格式验证）
• ✅ 性别选择（下拉选择：男/女/其他）
• ✅ 出生日期（日期选择器）
• ✅ 地址输入（文本域，最多200字符）
• ✅ 用户协议同意（必填复选框）

录制功能

• ✅ 集成 rrweb 录制用户操作
• ✅ 实时显示录制事件数量
• ✅ 事件转换和处理
• ✅ 支持点击、滚动、输入事件录制

UI/UX 特性

• ✅ 现代化的渐变背景设计
• ✅ 响应式布局，支持移动端
• ✅ Ant Design 组件库，美观易用
• ✅ 表单验证和错误提示
• ✅ 成功提交反馈

技术栈

• React 19 - 前端框架
• TypeScript - 类型安全
• Ant Design 5 - UI 组件库
• rrweb - 用户行为录制
• Rsbuild - 构建工具

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

项目结构

src/
├── App.tsx          # 主应用组件
├── App.css          # 样式文件
├── types.d.ts       # TypeScript 类型声明
├── index.tsx        # 应用入口
└── env.d.ts         # 环境类型声明

使用说明

1. 打开应用后会自动开始录制用户操作
2. 填写表单信息，所有必填字段都需要完成
3. 密码需要至少6个字符，确认密码必须与密码一致
4. 邮箱需要符合邮箱格式
5. 手机号码如果填写需要符合中国手机号格式
6. 必须同意用户协议才能提交
7. 提交成功后会在控制台输出表单数据和录制的事件

录制事件说明

应用会录制以下类型的用户操作：

• 页面导航事件
• 鼠标点击事件
• 页面滚动事件
• 表单输入事件

录制的事件会被转换为标准格式，包含事件类型、坐标、值、时间戳等信息。