雨霖铃
c40b66b703
主要更新： - 添加字段必填/选填设置和空值率配置 - 移除标签管理系统（20条规则无需标签） - 添加组合策略保证唯一性生成 - 添加价格生成器（真实分布/心理定价） - 添加场景化生成器（年龄/数量/评分/折扣/库存） - 更新所有文档移除emoji，使用纯文字 - 更新类型定义和生成逻辑
24 KiB
24 KiB
界面设计
设计原则
- 简洁直观 - 一目了然的布局
- 操作便捷 - 减少点击次数
- 实时反馈 - 配置即预览
- 响应式 - 支持多种屏幕尺寸
页面结构
主页面布局
┌─────────────────────────────────────────────────────────────────────┐
│ 🧪 测试数据生成器 [帮助] │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────┐ ┌───────────────────────┐ │
│ │ 字段配置 │ │ 数据预览 │ │
│ │ │ │ │ │
│ │ [+ 添加字段] │ │ [实时预览数据] │ │
│ │ │ │ │ │
│ │ 字段列表... │ │ │ │
│ │ │ │ │ │
│ └─────────────────────────────────────┘ └───────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ 生成选项 │ │
│ │ 数量、格式、约束... │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ 操作栏 │ │
│ │ [生成] [保存规则] [规则管理] │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
组件设计
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] [SQL] [TypeScript] │
│ │
└─────────────────────────────────────────────────────────────────────┘
功能:
- 实时更新预览
- 支持格式切换
- 分页显示更多数据
- 一键复制
4. 生成选项组件
功能: 配置生成参数
界面:
┌─────────────────────────────────────────────────────────────────────┐
│ 生成选项 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌───────────────────────┐ │
│ │ 生成数量 │ │ 数据格式 │ │ 约束条件 │ │
│ │ │ │ │ │ │ │
│ │ [100 ] │ │ ○ JSON │ │ ☑ name 唯一 │ │
│ │ [10 ▼] │ │ ○ CSV │ │ ☑ email 唯一 │ │
│ │ [100 ▼] │ │ ○ SQL │ │ ☑ phone 唯一 │ │
│ │ [自定义 ] │ │ ○ TypeScript │ │ ☐ age 唯一 │ │
│ │ │ │ │ │ │ │
│ └─────────────────┘ └─────────────────┘ └───────────────────────┘ │
│ │
│ 默认空值率 (选填字段) │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ 空值概率: [====|----] 50% │ │
│ │ 预设: [低 20%] [中 50%] [高 80%] │ │
│ │ 说明: 未单独设置空值率的选填字段将使用此默认值 │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
5. 操作栏组件
功能: 顶部操作按钮
界面:
┌─────────────────────────────────────────────────────────────────────┐
│ 操作栏 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ [生成数据] [保存规则] [规则管理] [导入规则] [导出]│
│ │
└─────────────────────────────────────────────────────────────────────┘
6. 生成结果组件
功能: 展示生成结果
界面:
┌─────────────────────────────────────────────────────────────────────┐
│ 生成结果 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 成功生成 100 条数据 │
│ │
│ 数据统计: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ • 总条数: 100 │ │
│ │ • 文件大小: 12.5 KB │ │
│ │ • 唯一性检查: 全部通过 │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ 数据预览: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ [JSON 格式预览...] │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ 导出选项: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ [复制全部] [下载 JSON] [下载 CSV] [下载 SQL] │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ [关闭] │
│ │
└─────────────────────────────────────────────────────────────────────┘
7. 规则管理组件
功能: 管理已保存的规则
界面:
┌─────────────────────────────────────────────────────────────────────┐
│ 规则管理 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 搜索: [搜索规则名称... ] │
│ │
│ 规则列表: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ 电商用户数据 - 测试用 │ │
│ │ 用于测试用户注册功能 │ │
│ │ 4 个字段 | 100 条 | JSON │ │
│ │ 2024-01-15 创建 | 使用 12 次 │ │
│ │ [加载] [编辑] [导出] [删除] │ │
│ │ │ │
│ │ 电商订单数据 - 测试用 │ │
│ │ 用于测试订单功能 │ │
│ │ 6 个字段 | 500 条 | JSON │ │
│ │ 2024-01-16 创建 | 使用 8 次 │ │
│ │ [加载] [编辑] [导出] [删除] │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ [导入规则] [导出全部] │
│ │
└─────────────────────────────────────────────────────────────────────┘
响应式设计
桌面端 (>1024px)
- 左右分栏布局
- 字段配置区占 60%
- 数据预览区占 40%
平板端 (768px-1024px)
- 左右分栏布局
- 字段配置区占 50%
- 数据预览区占 50%
移动端 (<768px)
- 单栏布局
- 字段配置和数据预览上下排列
- 预览区默认折叠
交互细节
拖拽排序
- 字段支持拖拽排序
- 拖拽时显示占位符
- 释放后立即生效
实时预览
- 配置参数时实时更新预览
- 延迟 300ms 防抖
- 加载状态显示
快捷操作
- Ctrl+C 复制选中数据
- Ctrl+V 粘贴规则配置
- Ctrl+S 保存当前配置
主题支持
浅色主题
- 背景色: #ffffff
- 文字色: #333333
- 边框色: #e0e0e0
- 主题色: #3b82f6
深色主题
- 背景色: #1a1a1a
- 文字色: #ffffff
- 边框色: #404040
- 主题色: #60a5fa