雨霖铃
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
494 lines
26 KiB
Markdown
494 lines
26 KiB
Markdown
# 规则管理
|
|
|
|
## 功能概览
|
|
|
|
| 功能 | 说明 | 优先级 |
|
|
| -------- | -------------------- | ------ |
|
|
| 保存规则 | 将当前配置保存为模板 | P0 |
|
|
| 规则列表 | 查看所有已保存的规则 | P0 |
|
|
| 规则搜索 | 按关键词搜索规则 | P1 |
|
|
| 标签筛选 | 按标签分类筛选规则 | P1 |
|
|
| 规则编辑 | 修改已保存的规则 | P0 |
|
|
| 规则删除 | 删除不需要的规则 | P0 |
|
|
| 规则加载 | 一键加载规则配置 | P0 |
|
|
| 规则复制 | 复制规则配置 | P1 |
|
|
| 规则导出 | 导出为 JSON 文件 | P1 |
|
|
| 规则导入 | 从 JSON 文件导入 | P1 |
|
|
|
|
---
|
|
|
|
## 数据结构
|
|
|
|
### 规则模板
|
|
|
|
```typescript
|
|
interface RuleTemplate {
|
|
id: string; // 唯一标识
|
|
name: string; // 规则名称
|
|
description?: string; // 规则描述
|
|
tags: string[]; // 标签列表
|
|
fields: FieldConfig[]; // 字段配置
|
|
options: {
|
|
total: number; // 生成数量
|
|
format: 'json' | 'csv' | 'sql' | 'typescript';
|
|
};
|
|
metadata: {
|
|
createdAt: number; // 创建时间
|
|
updatedAt: number; // 更新时间
|
|
lastUsedAt?: number; // 最后使用时间
|
|
useCount: number; // 使用次数
|
|
};
|
|
}
|
|
```
|
|
|
|
### 字段配置
|
|
|
|
```typescript
|
|
interface FieldConfig {
|
|
id: string; // 字段唯一标识
|
|
name: string; // 字段名
|
|
generator: string; // 生成器名称
|
|
params: Record<string, any>; // 生成器参数
|
|
unique: boolean; // 唯一性约束
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 功能详情
|
|
|
|
### 1. 保存规则
|
|
|
|
**触发方式**: 用户点击"保存规则"按钮
|
|
|
|
**界面设计**:
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ 💾 保存规则 │
|
|
├─────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ 📝 规则信息 │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ 规则名称: │ │
|
|
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
|
│ │ │ [电商用户数据 - 测试用 ]│ │ │
|
|
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ 规则描述 (可选): │ │
|
|
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
|
│ │ │ [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │ │
|
|
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ 标签 (可选): │ │
|
|
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
|
│ │ │ [电商] [用户] [测试数据] [+ 添加标签] │ │ │
|
|
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ 📊 规则预览 │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ 字段数量: 4 个 │ │
|
|
│ │ • name (中文姓名) │ │
|
|
│ │ • email (邮箱地址) │ │
|
|
│ │ • phone (手机号) │ │
|
|
│ │ • age (年龄) │ │
|
|
│ │ │ │
|
|
│ │ 生成数量: 100 条 │ │
|
|
│ │ 数据格式: JSON │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ [💾 保存] [❌ 取消] │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**保存逻辑**:
|
|
|
|
1. 验证规则名称不为空
|
|
2. 生成唯一 ID
|
|
3. 设置创建时间和更新时间
|
|
4. 初始化使用次数为 0
|
|
5. 保存到 localStorage
|
|
|
|
---
|
|
|
|
### 2. 规则列表
|
|
|
|
**界面设计**:
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ 📚 规则管理 │
|
|
├─────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ 🔍 搜索: [搜索规则名称或标签... ] │
|
|
│ │
|
|
│ 📁 标签筛选 │
|
|
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
|
│ │ 全部 │ │ 电商 │ │ 用户 │ │ 测试数据 │ │ 最近使用 │ │
|
|
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
|
|
│ │
|
|
│ 📋 规则列表 │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
|
│ │ │ 📦 电商用户数据 - 测试用 │ │ │
|
|
│ │ │ ─────────────────────────────────────────────────────── │ │ │
|
|
│ │ │ 📝 用于测试用户注册功能，包含姓名、邮箱、手机号 │ │ │
|
|
│ │ │ 🏷️ 电商 用户 测试数据 │ │ │
|
|
│ │ │ 📊 4 个字段 | 100 条 | JSON │ │ │
|
|
│ │ │ 📅 2024-01-15 14:30 创建 | 2024-01-20 10:15 最后使用 │ │ │
|
|
│ │ │ │ │ │
|
|
│ │ │ [📥 加载] [📋 复制] [📤 导出] [✏️ 编辑] [🗑️ 删除] │ │ │
|
|
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ [📥 导入规则] [📤 导出全部] [🗑️ 清空全部] │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**列表项信息**:
|
|
|
|
- 规则名称
|
|
- 规则描述
|
|
- 标签
|
|
- 字段数量、生成数量、数据格式
|
|
- 创建时间、最后使用时间
|
|
- 操作按钮
|
|
|
|
---
|
|
|
|
### 3. 规则搜索
|
|
|
|
**搜索逻辑**:
|
|
|
|
- 支持按规则名称搜索
|
|
- 支持按规则描述搜索
|
|
- 支持按标签搜索
|
|
- 搜索为模糊匹配，不区分大小写
|
|
|
|
**实现方式**:
|
|
|
|
```typescript
|
|
search(keyword: string): RuleTemplate[] {
|
|
const rules = this.getAll();
|
|
const lowerKeyword = keyword.toLowerCase();
|
|
|
|
return rules.filter(r =>
|
|
r.name.toLowerCase().includes(lowerKeyword) ||
|
|
r.description?.toLowerCase().includes(lowerKeyword) ||
|
|
r.tags.some(t => t.toLowerCase().includes(lowerKeyword))
|
|
);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### 4. 标签筛选
|
|
|
|
**标签来源**:
|
|
|
|
- 从所有已保存的规则中提取
|
|
- 自动去重
|
|
- 按使用频率排序
|
|
|
|
**筛选逻辑**:
|
|
|
|
- 点击标签，筛选包含该标签的规则
|
|
- 支持多标签筛选（交集）
|
|
- "全部"标签显示所有规则
|
|
|
|
---
|
|
|
|
### 5. 规则编辑
|
|
|
|
**界面设计**:
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ ✏️ 编辑规则 - 电商用户数据 │
|
|
├─────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ 📝 基本信息 │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ 规则名称: [电商用户数据 - 测试用 ]│ │
|
|
│ │ 规则描述: [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │
|
|
│ │ 标签: [电商] [用户] [测试数据] [+ 添加标签] │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ 📋 字段配置 (可直接编辑) │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ 1. name [中文姓名 ▼] [⚙️] [❌] [⬆️][⬇️] │ │
|
|
│ │ 2. email [邮箱地址 ▼] [⚙️] [❌] [⬆️][⬇️] │ │
|
|
│ │ 3. phone [手机号 ▼] [⚙️] [❌] [⬆️][⬇️] │ │
|
|
│ │ 4. age [年龄 ▼] [⚙️] [❌] [⬆️][⬇️] │ │
|
|
│ │ │ │
|
|
│ │ [+ 添加字段] │ │
|
|
│ │ │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ⚙️ 生成选项 │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ 数量: [100] 格式: [JSON ▼] │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ [💾 保存修改] [❌ 取消] │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**编辑逻辑**:
|
|
|
|
1. 加载原规则配置到编辑器
|
|
2. 用户修改配置
|
|
3. 点击保存时更新规则
|
|
4. 更新 metadata.updatedAt
|
|
5. 保存到 localStorage
|
|
|
|
---
|
|
|
|
### 6. 规则删除
|
|
|
|
**删除流程**:
|
|
|
|
1. 点击删除按钮
|
|
2. 弹出确认对话框
|
|
3. 确认后删除规则
|
|
4. 刷新规则列表
|
|
|
|
**确认对话框**:
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ ⚠️ 确认删除 │
|
|
├─────────────────────────────────────────┤
|
|
│ │
|
|
│ 确定要删除规则 "电商用户数据" 吗？ │
|
|
│ │
|
|
│ 此操作不可撤销。 │
|
|
│ │
|
|
│ [❌ 取消] [🗑️ 删除] │
|
|
│ │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
### 7. 规则加载
|
|
|
|
**加载流程**:
|
|
|
|
1. 点击"加载"按钮
|
|
2. 将规则配置应用到当前编辑器
|
|
3. 更新预览数据
|
|
4. 记录使用时间和次数
|
|
|
|
**实现方式**:
|
|
|
|
```typescript
|
|
loadRule(ruleId: string): void {
|
|
const rule = this.storage.getById(ruleId);
|
|
|
|
// 应用规则配置
|
|
this.setFields(rule.fields);
|
|
this.setOptions(rule.options);
|
|
|
|
// 记录使用
|
|
this.storage.recordUse(ruleId);
|
|
|
|
// 更新预览
|
|
this.updatePreview();
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### 8. 规则复制
|
|
|
|
**复制逻辑**:
|
|
|
|
1. 点击"复制"按钮
|
|
2. 创建规则的副本
|
|
3. 名称添加"(副本)"后缀
|
|
4. 生成新的 ID
|
|
5. 保存为新规则
|
|
|
|
---
|
|
|
|
### 9. 规则导出
|
|
|
|
**导出界面**:
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ 📤 导出规则 │
|
|
├─────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ 📋 选择要导出的规则: │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ ☑️ 电商用户数据 - 测试用 (4个字段, 100条) │ │
|
|
│ │ ☑️ 电商订单数据 - 测试用 (6个字段, 500条) │ │
|
|
│ │ ☐ 用户登录数据 - 测试用 (3个字段, 50条) │ │
|
|
│ │ │ │
|
|
│ │ [全选] [全不选] │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ 📤 导出格式: │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ ○ 导出为单个 JSON 文件 (所有规则合并) │ │
|
|
│ │ ● 导出为多个 JSON 文件 (每个规则一个文件) │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ [📤 导出] [❌ 取消] │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**导出格式**:
|
|
|
|
```json
|
|
{
|
|
"version": "1.0",
|
|
"exportedAt": "2024-01-20T10:15:45.000Z",
|
|
"rules": [
|
|
{
|
|
"id": "rule_123456",
|
|
"name": "电商用户数据 - 测试用",
|
|
"description": "用于测试用户注册功能",
|
|
"tags": ["电商", "用户", "测试数据"],
|
|
"fields": [...],
|
|
"options": {...},
|
|
"metadata": {...}
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### 10. 规则导入
|
|
|
|
**导入界面**:
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
│ 📥 导入规则 │
|
|
├─────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ 📤 选择导入方式: │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ │ ○ 从文件导入 │ │
|
|
│ │ ┌─────────────────────────────────────────────────────┐ │ │
|
|
│ │ │ 📁 拖拽文件到这里，或 [点击选择文件] │ │ │
|
|
│ │ │ 支持格式: .json │ │ │
|
|
│ │ └─────────────────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ ○ 从剪贴板粘贴 │ │
|
|
│ │ ┌─────────────────────────────────────────────────────┐ │ │
|
|
│ │ │ 粘贴 JSON 规则内容... │ │ │
|
|
│ │ └─────────────────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ 📊 预览导入内容: │
|
|
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
│ │ ✅ 格式验证通过 │ │
|
|
│ │ 规则数量: 2 个 │ │
|
|
│ │ • 电商用户数据 (4个字段) │ │
|
|
│ │ • 电商订单数据 (6个字段) │ │
|
|
│ └───────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ [📥 导入] [❌ 取消] │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**导入逻辑**:
|
|
|
|
1. 解析 JSON 文件
|
|
2. 验证格式是否正确
|
|
3. 预览导入内容
|
|
4. 确认后逐条导入
|
|
5. 生成新 ID 避免冲突
|
|
6. 处理导入结果（成功/失败数量）
|
|
|
|
---
|
|
|
|
## 存储机制
|
|
|
|
### 本地存储
|
|
|
|
使用 localStorage 存储规则数据:
|
|
|
|
```typescript
|
|
class RuleStorage {
|
|
private readonly STORAGE_KEY = 'testDataGenerator_rules';
|
|
|
|
// 获取所有规则
|
|
getAll(): RuleTemplate[] {
|
|
const data = localStorage.getItem(this.STORAGE_KEY);
|
|
return data ? JSON.parse(data) : [];
|
|
}
|
|
|
|
// 保存规则
|
|
save(rule: RuleTemplate): void {
|
|
const rules = this.getAll();
|
|
rules.push(rule);
|
|
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
|
}
|
|
|
|
// 更新规则
|
|
update(id: string, updates: Partial<RuleTemplate>): void {
|
|
const rules = this.getAll();
|
|
const index = rules.findIndex((r) => r.id === id);
|
|
if (index !== -1) {
|
|
rules[index] = { ...rules[index], ...updates };
|
|
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
|
}
|
|
}
|
|
|
|
// 删除规则
|
|
delete(id: string): void {
|
|
const rules = this.getAll();
|
|
const filtered = rules.filter((r) => r.id !== id);
|
|
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(filtered));
|
|
}
|
|
|
|
// 记录使用
|
|
recordUse(id: string): void {
|
|
const rules = this.getAll();
|
|
const rule = rules.find((r) => r.id === id);
|
|
if (rule) {
|
|
rule.metadata.lastUsedAt = Date.now();
|
|
rule.metadata.useCount++;
|
|
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 存储限制
|
|
|
|
- localStorage 容量: 5-10MB（浏览器限制）
|
|
- 单个规则约 1-5KB
|
|
- 预计可存储 1000-5000 个规则
|
|
|
|
---
|
|
|
|
## 功能亮点
|
|
|
|
| 亮点 | 说明 |
|
|
| -------- | ------------------------------ |
|
|
| 本地存储 | 数据保存在浏览器本地，无需后端 |
|
|
| 快速复用 | 一键加载已保存的规则 |
|
|
| 标签管理 | 按标签分类管理规则 |
|
|
| 导入导出 | 支持 JSON 文件导入导出 |
|
|
| 使用统计 | 记录使用次数和时间 |
|
|
| 搜索筛选 | 支持关键词搜索和标签筛选 |
|