24 KiB
24 KiB
规则管理
功能概览
| 功能 | 说明 | 优先级 |
|---|---|---|
| 保存规则 | 将当前配置保存为模板 | P0 |
| 规则列表 | 查看所有已保存的规则 | P0 |
| 规则搜索 | 按关键词搜索规则 | P1 |
| 规则编辑 | 修改已保存的规则 | P0 |
| 规则删除 | 删除不需要的规则 | P0 |
| 规则加载 | 一键加载规则配置 | P0 |
| 规则复制 | 复制规则配置 | P1 |
| 规则导出 | 导出为 JSON 文件 | P1 |
| 规则导入 | 从 JSON 文件导入 | P1 |
规则数量限制
- 最大规则数量: 20 条
- 超出限制: 当规则数量达到 20 条时，保存按钮置灰，提示"已达到最大规则数量"
- 解决方式: 用户需要删除已有规则后才能保存新规则
数据结构
与源码对齐：类型定义见
src/types/testDataGenerator.ts。规则不持久化生成数量与导出格式（由页面GenerateOptions状态管理）。
规则模板
interface DataRule {
id: string;
name: string;
description?: string;
fields: FieldConfig[];
createdAt: number;
updatedAt: number;
lastUsedAt?: number;
useCount: number;
}
字段配置
interface FieldConfig {
id: string;
name: string;
description?: string;
generatorId: string; // 生成器 ID，对应 lib/generators 中的 id
params: Record<string, unknown>;
required: boolean;
nullRate: number; // 空值率 0-100，仅 required=false 时生效
unique: boolean;
}
功能详情
1. 保存规则
触发方式: 用户点击"保存规则"按钮
界面设计:
┌─────────────────────────────────────────────────────────────────────┐
│ 保存规则 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 规则信息 │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ 规则名称: │ │
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
│ │ │ [电商用户数据 - 测试用 ]│ │ │
│ │ └─────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 规则描述 (可选): │ │
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
│ │ │ [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │ │
│ │ └─────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ 规则预览 │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ 字段数量: 4 个 │ │
│ │ • name (中文姓名) │ │
│ │ • email (邮箱地址) │ │
│ │ • phone (手机号) │ │
│ │ • age (年龄) │ │
│ │ │ │
│ │ 生成数量: 100 条 │ │
│ │ 数据格式: JSON │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ [保存] [取消] │
│ │
└─────────────────────────────────────────────────────────────────────┘
保存逻辑:
- 验证规则名称不为空
- 检查规则数量是否达到上限（20 条）
- 若达上限，
save()返回null，UI 应阻止或提示 - 生成唯一 ID，写入
createdAt/updatedAt，useCount初始为 0 - 调用
ruleStorage.save()；仅当返回值非null时视为成功（localStorage写入失败同样返回null）
2. 规则列表
界面设计:
┌─────────────────────────────────────────────────────────────────────┐
│ 规则管理 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 搜索: [搜索规则名称... ] │
│ │
│ 规则列表 (已保存 15/20 条) │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
│ │ │ 电商用户数据 - 测试用 │ │ │
│ │ │ ─────────────────────────────────────────────────────── │ │ │
│ │ │ 用于测试用户注册功能，包含姓名、邮箱、手机号 │ │ │
│ │ │ 4 个字段 | 100 条 | JSON │ │ │
│ │ │ 2024-01-15 14:30 创建 | 2024-01-20 10:15 最后使用 │ │ │
│ │ │ │ │ │
│ │ │ [加载] [复制] [导出] [编辑] [删除] │ │ │
│ │ └─────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ [导入规则] [导出全部] [清空全部] │
│ │
└─────────────────────────────────────────────────────────────────────┘
列表项信息:
- 规则名称
- 规则描述
- 字段数量、生成数量、数据格式
- 创建时间、最后使用时间
- 操作按钮
3. 规则搜索
搜索逻辑:
- 支持按规则名称搜索
- 支持按规则描述搜索
- 搜索为模糊匹配，不区分大小写
实现方式（src/utils/ruleStorage.ts）:
import * as ruleStorage from '@/utils/ruleStorage';
function searchRules(query: string): DataRule[] {
return ruleStorage.search(query);
}
4. 规则编辑
界面设计:
┌─────────────────────────────────────────────────────────────────────┐
│ 编辑规则 - 电商用户数据 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 基本信息 │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ 规则名称: [电商用户数据 - 测试用 ]│ │
│ │ 规则描述: [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ 字段配置 (可直接编辑) │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. name [中文姓名 ▼] [配置] [删除] [上移][下移] │ │
│ │ 2. email [邮箱地址 ▼] [配置] [删除] [上移][下移] │ │
│ │ 3. phone [手机号 ▼] [配置] [删除] [上移][下移] │ │
│ │ 4. age [年龄 ▼] [配置] [删除] [上移][下移] │ │
│ │ │ │
│ │ [+ 添加字段] │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ 生成选项 │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ 数量: [100] 格式: [JSON ▼] │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ [保存修改] [取消] │
│ │
└─────────────────────────────────────────────────────────────────────┘
编辑逻辑:
- 加载原规则配置到编辑器
- 用户修改配置
- 点击保存时调用
ruleStorage.update()；返回非null才更新updatedAt并提示成功
5. 规则删除
删除流程:
- 点击删除按钮
- 弹出确认对话框
- 确认后删除规则
- 刷新规则列表
确认对话框:
┌─────────────────────────────────────────┐
│ 确认删除 │
├─────────────────────────────────────────┤
│ │
│ 确定要删除规则 "电商用户数据" 吗？ │
│ │
│ 此操作不可撤销。 │
│ │
│ [取消] [删除] │
│ │
└─────────────────────────────────────────┘
6. 规则加载
加载流程:
- 点击"加载"按钮
- 将规则配置应用到当前编辑器
- 更新预览数据
- 记录使用时间和次数
实现方式:
function loadRule(ruleId: string): void {
const rule = ruleStorage.getById(ruleId);
if (!rule) return;
setFields(rule.fields);
ruleStorage.recordUse(ruleId);
}
7. 规则复制
复制逻辑:
- 点击"复制"按钮
- 创建规则的副本
- 名称添加「（副本）」后缀（默认
duplicate(id, '（副本）')） - 生成新的 ID
- 保存为新规则
8. 规则导出
导出界面:
┌─────────────────────────────────────────────────────────────────────┐
│ 导出规则 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 选择要导出的规则: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ ☑ 电商用户数据 - 测试用 (4个字段, 100条) │ │
│ │ ☑ 电商订单数据 - 测试用 (6个字段, 500条) │ │
│ │ ☐ 用户登录数据 - 测试用 (3个字段, 50条) │ │
│ │ │ │
│ │ [全选] [全不选] │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ 导出格式: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ ○ 导出为单个 JSON 文件 (所有规则合并) │ │
│ │ ● 导出为多个 JSON 文件 (每个规则一个文件) │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ [导出] [取消] │
│ │
└─────────────────────────────────────────────────────────────────────┘
导出格式（exportRules() 返回 DataRule[] 的 JSON 字符串，无外层包装）:
[
{
"id": "rule_123456",
"name": "电商用户数据 - 测试用",
"description": "用于测试用户注册功能",
"fields": [],
"createdAt": 1704067200000,
"updatedAt": 1704067200000,
"useCount": 0
}
]
9. 规则导入
导入界面:
┌─────────────────────────────────────────────────────────────────────┐
│ 导入规则 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 选择导入方式: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ○ 从文件导入 │ │
│ │ ┌─────────────────────────────────────────────────────┐ │ │
│ │ │ 拖拽文件到这里，或 [点击选择文件] │ │ │
│ │ │ 支持格式: .json │ │ │
│ │ └─────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ○ 从剪贴板粘贴 │ │
│ │ ┌─────────────────────────────────────────────────────┐ │ │
│ │ │ 粘贴 JSON 规则内容... │ │ │
│ │ └─────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ 预览导入内容: │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ 格式验证通过 │ │
│ │ 规则数量: 2 个 │ │
│ │ • 电商用户数据 (4个字段) │ │
│ │ • 电商订单数据 (6个字段) │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
│ [导入] [取消] │
│ │
└─────────────────────────────────────────────────────────────────────┘
导入逻辑:
- 解析 JSON 文件
- 验证格式是否正确
- 预览导入内容
- 确认后逐条导入
- 生成新 ID 避免冲突
- 处理导入结果（成功/失败数量）
存储机制
本地存储
使用 localStorage，键名 testDataGenerator_rules。API 为命名导出函数（见 src/utils/ruleStorage.ts）：
| 函数 | 说明 |
|---|---|
getAll() / getById() / getByName() |
读取 |
save() / update() / deleteRule() / duplicate() |
写入；失败时返回 null 或 false |
recordUse() |
递增 useCount、更新 lastUsedAt |
search() / getRecent() |
搜索与最近使用 |
exportRules() / importRules() |
导入导出 JSON 数组 |
clear() |
清空全部规则 |
写入失败（如 QuotaExceededError）时，内部 setAll() 返回 false，save/update 返回 null，deleteRule 返回 false，并在控制台输出 [ruleStorage] 保存规则失败。调用方须检查返回值，避免误报成功。
import * as ruleStorage from '@/utils/ruleStorage';
const saved = ruleStorage.save({ name: '示例', fields });
if (!saved) {
// 达上限或 localStorage 不可用
}
存储限制
- 规则数量限制: 最多 20 条
- localStorage 容量: 5-10MB（浏览器限制）
- 单个规则约 1-5KB
- 预计可存储 1000-5000 个规则（但受数量限制，最多 20 条）
功能亮点
| 亮点 | 说明 |
|---|---|
| 本地存储 | 数据保存在浏览器本地，无需后端 |
| 快速复用 | 一键加载已保存的规则 |
| 导入导出 | 支持 JSON 文件导入导出 |
| 使用统计 | 记录使用次数和时间 |
| 搜索筛选 | 支持关键词搜索 |