雨霖铃
27c1cf37e3
- Add environment variable files (.env, .env.local, .env.*.local) - Add build output directories (dist/, build/) - Add test coverage directory (coverage/) - Add IDE workspace files (*.code-workspace) - Add TypeScript build info files (*.tsbuildinfo, *.tsxbuildinfo) - Remove docs/* to track documentation files
348 lines
23 KiB
Markdown
348 lines
23 KiB
Markdown
# 界面设计
|
|
|
|
## 设计原则
|
|
|
|
1. **简洁直观** - 一目了然的布局
|
|
2. **操作便捷** - 减少点击次数
|
|
3. **实时反馈** - 配置即预览
|
|
4. **响应式** - 支持多种屏幕尺寸
|
|
|
|
---
|
|
|
|
## 页面结构
|
|
|
|
### 主页面布局
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ 🧪 测试数据生成器 [帮助] │
|
|
├─────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ ┌─────────────────────────────────────┐ ┌───────────────────────┐ │
|
|
│ │ 📋 字段配置 │ │ 📊 数据预览 │ │
|
|
│ │ │ │ │ │
|
|
│ │ [+ 添加字段] │ │ [实时预览数据] │ │
|
|
│ │ │ │ │ │
|
|
│ │ 字段列表... │ │ │ │
|
|
│ │ │ │ │ │
|
|
│ └─────────────────────────────────────┘ └───────────────────────┘ │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ ⚙️ 生成选项 │ │
|
|
│ │ 数量、格式、约束... │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ 📤 操作栏 │ │
|
|
│ │ [🚀 生成] [💾 保存规则] [📚 规则管理] │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 组件设计
|
|
|
|
### 1. 字段列表组件
|
|
|
|
**功能**: 展示和管理所有字段
|
|
|
|
**界面**:
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ 📋 字段配置 │
|
|
├─────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ [+ 添加字段] │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ 1. name [中文姓名 ▼] [⚙️] [❌] [⬆️][⬇️] │ │
|
|
│ │ 2. email [邮箱地址 ▼] [⚙️] [❌] [⬆️][⬇️] │ │
|
|
│ │ 3. phone [手机号 ▼] [⚙️] [❌] [⬆️][⬇️] │ │
|
|
│ │ 4. age [年龄 ▼] [⚙️] [❌] [⬆️][⬇️] │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ [+ 添加字段] │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**交互**:
|
|
|
|
- 点击字段名可编辑
|
|
- 点击生成器下拉框可切换生成器
|
|
- 点击 ⚙️ 展开参数配置
|
|
- 点击 ❌ 删除字段
|
|
- 点击 ⬆️⬇️ 调整顺序
|
|
|
|
---
|
|
|
|
### 2. 字段配置组件
|
|
|
|
**功能**: 配置单个字段的详细参数
|
|
|
|
**界面**:
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ 字段配置 │
|
|
├─────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ 📝 基础配置 │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ 字段名称: [name ] │ │
|
|
│ │ 字段描述: [用户姓名 ] │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ 🔧 生成器选择 │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ 分类: [👤 个人信息 ▼] │ │
|
|
│ │ 生成器: [中文姓名 ▼] │ │
|
|
│ │ 📖 说明: 生成中文姓名，如张三、李四 │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ⚙️ 参数配置 │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ 姓氏池: [百家姓前100 ▼] │ │
|
|
│ │ 名字长度: [1] ~ [2] │ │
|
|
│ │ ☑ 唯一性约束 │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ 🎲 预览示例 │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ 张伟, 李娜, 王强, 赵敏, 刘洋 │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ [✅ 保存] [❌ 取消] │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### 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 唯一 │ │
|
|
│ │ │ │ │ │ │ │
|
|
│ └─────────────────┘ └─────────────────┘ └───────────────────────┘ │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### 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
|