# 界面设计 ## 设计原则 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] [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