LingandRX
a163297de4
* docs(AGENTS.md): 添加 Git Commit 必须使用中文描述的规范 * docs: 更新测试数据生成器功能设计文档 * refactor: 删除死代码 * docs: 统一测试数据生成器文档，移除 SQL/TypeScript 导出，修复接口命名不一致 * feat: 实现测试数据生成器功能 * docs: 更新 README 和 AGENTS 文档，补充测试数据生成器模块说明
490 lines
35 KiB
Markdown
490 lines
35 KiB
Markdown
# 界面设计
|
||
|
||
## 设计原则
|
||
|
||
1. **简洁直观** - 一目了然的布局
|
||
2. **操作便捷** - 减少点击次数
|
||
3. **实时反馈** - 配置即预览
|
||
4. **响应式** - 支持多种屏幕尺寸
|
||
|
||
---
|
||
|
||
## 页面结构
|
||
|
||
### 主页面布局
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 🧪 测试数据生成器 [帮助] │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────────────────┐ ┌───────────────────────┐ │
|
||
│ │ 字段配置 │ │ 数据预览 │ │
|
||
│ │ │ │ │ │
|
||
│ │ [+ 添加字段] │ │ [实时预览数据] │ │
|
||
│ │ │ │ │ │
|
||
│ │ 字段列表... │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ └─────────────────────────────────────┘ └───────────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 生成选项 │ │
|
||
│ │ 数量、格式、约束... │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 操作栏 │ │
|
||
│ │ [生成] [保存规则] [规则管理] │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 组件设计
|
||
|
||
### 1. 字段列表组件
|
||
|
||
**功能**: 展示和管理所有字段
|
||
|
||
**界面**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 字段配置 │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ [+ 添加字段] │
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 1. name [中文姓名 ▼] [配置] [删除] [上移][下移] │ │
|
||
│ │ 2. email [邮箱地址 ▼] [配置] [删除] [上移][下移] │ │
|
||
│ │ 3. phone [手机号 ▼] [配置] [删除] [上移][下移] │ │
|
||
│ │ 4. age [年龄 ▼] [配置] [删除] [上移][下移] │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ [+ 添加字段] │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**交互**:
|
||
|
||
- 点击字段名可编辑
|
||
- 点击生成器下拉框可切换生成器
|
||
- 点击 配置 展开参数配置
|
||
- 点击 删除 删除字段
|
||
- 点击 上移下移 调整顺序
|
||
|
||
---
|
||
|
||
### 2. 字段配置组件
|
||
|
||
**功能**: 配置单个字段的详细参数
|
||
|
||
**界面**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 字段配置 │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 基础配置 │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 字段名称: [name ] │ │
|
||
│ │ 字段描述: [用户姓名 ] │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 生成器选择 │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 分类: [个人信息 ▼] │ │
|
||
│ │ 生成器: [中文姓名 ▼] │ │
|
||
│ │ 说明: 生成中文姓名，如张三、李四 │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 参数配置 │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 姓氏池: [百家姓前100 ▼] │ │
|
||
│ │ 名字长度: [1] ~ [2] │ │
|
||
│ │ ☑ 唯一性约束 │ │
|
||
│ │ ☑ 必填 │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 空值率设置 (仅选填字段显示) │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 空值概率: [====|----] 50% │ │
|
||
│ │ 预设: [低 20%] [中 50%] [高 80%] │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 预览示例 │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 张伟, 李娜, 王强, 赵敏, 刘洋 │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ [保存] [取消] │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**交互说明**:
|
||
|
||
- **必填复选框**: 勾选后该字段必填，100% 生成数据
|
||
- **空值率设置**: 仅当选填时显示，控制该字段生成空值的概率
|
||
- **预设按钮**: 快速设置常用空值率（低/中/高）
|
||
- **空值率滑块**: 精细调节空值概率（0-100%）
|
||
|
||
---
|
||
|
||
### 3. 数据预览组件
|
||
|
||
**功能**: 实时预览生成的数据
|
||
|
||
**界面**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 数据预览 │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 预览: 前 10 条 │
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ { │ │
|
||
│ │ "name": "张伟", │ │
|
||
│ │ "email": "zhangwei@qq.com", │ │
|
||
│ │ "phone": "13812345678", │ │
|
||
│ │ "age": 28 │ │
|
||
│ │ }, │ │
|
||
│ │ { │ │
|
||
│ │ "name": "李娜", │ │
|
||
│ │ "email": "lina@163.com", │ │
|
||
│ │ "phone": "13987654321", │ │
|
||
│ │ "age": 35 │ │
|
||
│ │ }, │ │
|
||
│ │ ... │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 格式切换: │
|
||
│ [JSON] [CSV] │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**功能**:
|
||
|
||
- 实时更新预览
|
||
- 支持格式切换
|
||
- 分页显示更多数据
|
||
- 一键复制
|
||
|
||
---
|
||
|
||
### 4. 生成选项组件
|
||
|
||
**功能**: 配置生成参数
|
||
|
||
**界面**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 生成选项 │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────┐ ┌─────────────────┐ ┌───────────────────────┐ │
|
||
│ │ 生成数量 │ │ 数据格式 │ │ 约束条件 │ │
|
||
│ │ │ │ │ │ │ │
|
||
│ │ [100 ] │ │ ○ JSON │ │ ☑ name 唯一 │ │
|
||
│ │ [10 ▼] │ │ ○ CSV │ │ ☑ email 唯一 │ │
|
||
│ │ [100 ▼] │ │ │ │ ☑ phone 唯一 │ │
|
||
│ │ [自定义 ] │ │ │ │ ☐ age 唯一 │ │
|
||
│ │ │ │ │ │ │ │
|
||
│ └─────────────────┘ └─────────────────┘ └───────────────────────┘ │
|
||
│ │
|
||
│ 默认空值率 (选填字段) │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 空值概率: [====|----] 50% │ │
|
||
│ │ 预设: [低 20%] [中 50%] [高 80%] │ │
|
||
│ │ 说明: 未单独设置空值率的选填字段将使用此默认值 │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
### 5. 操作栏组件
|
||
|
||
**功能**: 顶部操作按钮
|
||
|
||
**界面**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 操作栏 │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ [生成数据] [保存规则] [规则管理] [导入规则] [导出]│
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
### 6. 生成结果组件
|
||
|
||
**功能**: 展示生成结果，包含成功、警告、错误三种状态
|
||
|
||
**成功状态界面**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 生成结果 │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 生成完成 │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ [成功图标] 成功生成 100 条数据，耗时 1234ms │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 数据统计: │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ • 总条数: 100 │ │
|
||
│ │ • 成功条数: 100 │ │
|
||
│ │ • 失败条数: 0 │ │
|
||
│ │ • 文件大小: 12.5 KB │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 数据预览: │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ [JSON 格式预览...] │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 导出选项: │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ [复制全部] [下载 JSON] [下载 CSV] │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ [关闭] │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**警告状态界面（部分字段失败）**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 生成结果 │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 部分字段生成失败 │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ [警告图标] 有 2 个字段生成失败 │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 失败详情: │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ [警告图标] "phone" - 重试 100 次后仍存在重复 │ │
|
||
│ │ [警告图标] "email" - 重试 100 次后仍存在重复 │ │
|
||
│ │ │ │
|
||
│ │ 提示: 这些字段的值已设置为空，您可以尝试减少生成数量 │ │
|
||
│ │ 或调整字段配置 │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 数据统计: │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ • 总条数: 100 │ │
|
||
│ │ • 成功条数: 98 │ │
|
||
│ │ • 失败条数: 2 │ │
|
||
│ │ • 文件大小: 12.3 KB │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 数据预览: │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ [JSON 格式预览...] │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 导出选项: │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ [复制全部] [下载 JSON] [下载 CSV] │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ [关闭] │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**错误状态界面（生成失败）**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 生成失败 │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ [错误图标] 生成过程中发生错误 │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 错误详情: │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ 错误类型: 生成器不存在 │ │
|
||
│ │ 错误信息: 字段 "phone" 的生成器 "chinesePhone1" 不存在 │ │
|
||
│ │ 错误位置: 字段配置第 2 行 │ │
|
||
│ │ │ │
|
||
│ │ 建议操作: │ │
|
||
│ │ 1. 检查字段配置中的生成器名称是否正确 │ │
|
||
│ │ 2. 确认该生成器已正确注册 │ │
|
||
│ │ │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ [重新配置] [关闭] │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
### 6.1 Toast 提示组件
|
||
|
||
**功能**: 显示临时提示信息
|
||
|
||
**成功提示**:
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ [成功图标] 数据生成成功 │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
**警告提示**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ [警告图标] 有 2 个字段生成失败：phone、email │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**错误提示**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ [错误图标] 生成失败：生成器 "xxx" 不存在 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
### 6.2 Modal 提示组件
|
||
|
||
**功能**: 显示严重错误的模态框
|
||
|
||
**错误模态框**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ [错误图标] 生成失败 │ │
|
||
│ │ │ │
|
||
│ │ 字段 "phone" 的生成器 "chinesePhone1" 不存在 │ │
|
||
│ │ │ │
|
||
│ │ 请检查字段配置中的生成器名称是否正确 │ │
|
||
│ │ │ │
|
||
│ │ ─────────────────────────────────────────────────── │ │
|
||
│ │ │ │
|
||
│ │ [ 确定 ] │ │
|
||
│ │ │ │
|
||
│ └───────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
### 7. 规则管理组件
|
||
|
||
**功能**: 管理已保存的规则
|
||
|
||
**界面**:
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ 规则管理 │
|
||
├─────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 搜索: [搜索规则名称... ] │
|
||
│ │
|
||
│ 规则列表: │
|
||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||
│ │ 电商用户数据 - 测试用 │ │
|
||
│ │ 用于测试用户注册功能 │ │
|
||
│ │ 4 个字段 | 100 条 | JSON │ │
|
||
│ │ 2024-01-15 创建 | 使用 12 次 │ │
|
||
│ │ [加载] [编辑] [导出] [删除] │ │
|
||
│ │ │ │
|
||
│ │ 电商订单数据 - 测试用 │ │
|
||
│ │ 用于测试订单功能 │ │
|
||
│ │ 6 个字段 | 500 条 | JSON │ │
|
||
│ │ 2024-01-16 创建 | 使用 8 次 │ │
|
||
│ │ [加载] [编辑] [导出] [删除] │ │
|
||
│ └───────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ [导入规则] [导出全部] │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 响应式设计
|
||
|
||
### 桌面端 (>1024px)
|
||
|
||
- 左右分栏布局
|
||
- 字段配置区占 60%
|
||
- 数据预览区占 40%
|
||
|
||
---
|
||
|
||
## 交互细节
|
||
|
||
### 拖拽排序
|
||
|
||
- 字段支持拖拽排序（基于 @dnd-kit/sortable）
|
||
- 拖拽手柄（GripVertical 图标）位于字段左侧
|
||
- 拖拽时显示半透明效果和阴影
|
||
- 释放后立即生效，自动更新字段顺序
|
||
|
||
### 实时预览
|
||
|
||
- 配置参数时实时更新预览
|
||
- 延迟 300ms 防抖，避免频繁重渲染
|
||
- 预览最多显示 10 条示例数据
|
||
- 生成完成后切换为完整结果预览
|
||
|
||
### 虚拟列表
|
||
|
||
- 数据量超过 100 条时自动启用虚拟滚动
|
||
- 仅渲染可见区域的行，大幅减少 DOM 节点
|
||
- 行高固定 20px，支持快速滚动
|
||
|
||
---
|
||
|
||
## 主题支持
|
||
|
||
### 浅色主题
|
||
|
||
- 背景色: #ffffff
|
||
- 文字色: #333333
|
||
- 边框色: #e0e0e0
|
||
- 主题色: #3b82f6
|
||
|
||
### 深色主题
|
||
|
||
- 背景色: #1a1a1a
|
||
- 文字色: #ffffff
|
||
- 边框色: #404040
|
||
- 主题色: #60a5fa
|