# 规则管理 ## 功能概览 | 功能 | 说明 | 优先级 | | -------- | -------------------- | ------ | | 保存规则 | 将当前配置保存为模板 | 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; // 生成器参数 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): 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 文件导入导出 | | 使用统计 | 记录使用次数和时间 | | 搜索筛选 | 支持关键词搜索和标签筛选 |