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