feat: 实现测试数据生成器完整功能
- 添加类型定义 (FieldConfig, DataRule, GeneratorDefinition 等) - 实现 21 个数据生成器 (个人信息/业务数据/技术数据/基础类型) - 实现 Web Worker 后台数据生成引擎 - 实现规则存储与管理功能 - 实现 JSON/CSV 数据导出功能 - 开发完整 UI 组件 (字段管理/生成器选择/数据预览/导出面板等) - 集成到应用功能配置，添加国际化支持 功能特性: - 实时预览生成的数据 - 字段配置 (名称/描述/必填/空值率/唯一性约束) - 规则管理 (保存/加载/搜索/导入导出) - Web Worker 后台生成，支持进度显示和取消 - 响应式布局，支持多种设备 docs: 更新 TASKS.md 所有子任务复选框为已完成状态
This commit is contained in:
雨霖铃
@@ -0,0 +1,125 @@
|
||||
/**
|
||||
* 数据预览组件
|
||||
* 展示生成的数据，支持 JSON 和 CSV 格式切换
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Copy, Check, FileJson, FileText } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { DataExporter } from '@/utils/dataExporter';
|
||||
import type { GenerateResult } from '@/types/testDataGenerator';
|
||||
|
||||
interface DataPreviewProps {
|
||||
result: GenerateResult | null;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
type PreviewFormat = 'json' | 'csv';
|
||||
|
||||
export default function DataPreview({ result, pageSize = 20 }: DataPreviewProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const [format, setFormat] = useState<PreviewFormat>('json');
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
if (!result?.data || result.data.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<FileJson className="h-12 w-12 text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">{t('testDataGenerator_noData')}</p>
|
||||
<p className="text-xs text-muted-foreground/70 mt-1">{t('testDataGenerator_noDataHint')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const data = result.data;
|
||||
const totalPages = Math.ceil(data.length / pageSize);
|
||||
const startIndex = currentPage * pageSize;
|
||||
const endIndex = Math.min(startIndex + pageSize, data.length);
|
||||
const currentPageData = data.slice(startIndex, endIndex);
|
||||
|
||||
const content =
|
||||
format === 'json' ? DataExporter.toJSON(currentPageData) : DataExporter.toCSV(currentPageData);
|
||||
|
||||
const handleCopy = async () => {
|
||||
const fullContent = format === 'json' ? DataExporter.toJSON(data) : DataExporter.toCSV(data);
|
||||
const success = await DataExporter.copyToClipboard(fullContent);
|
||||
if (success) {
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 工具栏 */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant={format === 'json' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setFormat('json')}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
<FileJson className="h-4 w-4" />
|
||||
JSON
|
||||
</Button>
|
||||
<Button
|
||||
variant={format === 'csv' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setFormat('csv')}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
<FileText className="h-4 w-4" />
|
||||
CSV
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button variant="ghost" size="sm" onClick={handleCopy} className="h-8 gap-1.5">
|
||||
{copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
|
||||
{copied ? t('testDataGenerator_copied') : t('testDataGenerator_copy')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 代码预览 */}
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<pre className="h-full overflow-auto p-4 rounded-lg bg-muted/50 text-sm font-mono text-foreground whitespace-pre-wrap break-all">
|
||||
{content}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-3 pt-3 border-t">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('testDataGenerator_pageInfo', {
|
||||
current: currentPage + 1,
|
||||
total: totalPages,
|
||||
})}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
|
||||
disabled={currentPage === 0}
|
||||
className="h-7"
|
||||
>
|
||||
{t('testDataGenerator_prevPage')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
|
||||
disabled={currentPage === totalPages - 1}
|
||||
className="h-7"
|
||||
>
|
||||
{t('testDataGenerator_nextPage')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* 导出面板组件
|
||||
* 提供复制、下载 JSON、下载 CSV 选项
|
||||
*/
|
||||
|
||||
import { Copy, Download } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { DataExporter } from '@/utils/dataExporter';
|
||||
import type { GenerateResult } from '@/types/testDataGenerator';
|
||||
|
||||
interface ExportPanelProps {
|
||||
result: GenerateResult | null;
|
||||
}
|
||||
|
||||
export default function ExportPanel({ result }: ExportPanelProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
|
||||
if (!result?.data || result.data.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleCopyJSON = async () => {
|
||||
const content = DataExporter.toJSON(result.data!);
|
||||
await DataExporter.copyToClipboard(content);
|
||||
};
|
||||
|
||||
const handleCopyCSV = async () => {
|
||||
const content = DataExporter.toCSV(result.data!);
|
||||
await DataExporter.copyToClipboard(content);
|
||||
};
|
||||
|
||||
const handleDownloadJSON = () => {
|
||||
const file = DataExporter.toSingleFile(result.data!, 'json', 'test-data');
|
||||
DataExporter.download(file);
|
||||
};
|
||||
|
||||
const handleDownloadCSV = () => {
|
||||
const file = DataExporter.toSingleFile(result.data!, 'csv', 'test-data');
|
||||
DataExporter.download(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium text-foreground">{t('testDataGenerator_export')}</h4>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleCopyJSON} className="h-9 gap-1.5">
|
||||
<Copy className="h-4 w-4" />
|
||||
{t('testDataGenerator_copyJSON')}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={handleCopyCSV} className="h-9 gap-1.5">
|
||||
<Copy className="h-4 w-4" />
|
||||
{t('testDataGenerator_copyCSV')}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={handleDownloadJSON} className="h-9 gap-1.5">
|
||||
<Download className="h-4 w-4" />
|
||||
{t('testDataGenerator_downloadJSON')}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={handleDownloadCSV} className="h-9 gap-1.5">
|
||||
<Download className="h-4 w-4" />
|
||||
{t('testDataGenerator_downloadCSV')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* 字段编辑器组件
|
||||
* 编辑单个字段的详细配置
|
||||
*/
|
||||
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { getGeneratorById } from '@/lib/generators';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
import GeneratorSelector from './GeneratorSelector';
|
||||
import GeneratorConfig from './GeneratorConfig';
|
||||
|
||||
interface FieldEditorProps {
|
||||
field: FieldConfig;
|
||||
onChange: (field: FieldConfig) => void;
|
||||
}
|
||||
|
||||
export default function FieldEditor({ field, onChange }: FieldEditorProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
|
||||
const handleNameChange = (name: string) => {
|
||||
onChange({ ...field, name });
|
||||
};
|
||||
|
||||
const handleDescriptionChange = (description: string) => {
|
||||
onChange({ ...field, description });
|
||||
};
|
||||
|
||||
const handleRequiredChange = (required: boolean) => {
|
||||
onChange({
|
||||
...field,
|
||||
required,
|
||||
nullRate: required ? 0 : field.nullRate,
|
||||
});
|
||||
};
|
||||
|
||||
const handleNullRateChange = (nullRate: number) => {
|
||||
onChange({ ...field, nullRate });
|
||||
};
|
||||
|
||||
const handleUniqueChange = (unique: boolean) => {
|
||||
onChange({ ...field, unique });
|
||||
};
|
||||
|
||||
const handleGeneratorChange = (generatorId: string) => {
|
||||
const generator = getGeneratorById(generatorId);
|
||||
const defaultParams: Record<string, unknown> = {};
|
||||
generator?.params.forEach((p) => {
|
||||
defaultParams[p.key] = p.defaultValue;
|
||||
});
|
||||
onChange({
|
||||
...field,
|
||||
generatorId,
|
||||
params: defaultParams,
|
||||
});
|
||||
};
|
||||
|
||||
const handleParamsChange = (params: Record<string, unknown>) => {
|
||||
onChange({ ...field, params });
|
||||
};
|
||||
|
||||
const nullRatePresets = [
|
||||
{ label: t('testDataGenerator_nullRateLow'), value: 5 },
|
||||
{ label: t('testDataGenerator_nullRateMedium'), value: 20 },
|
||||
{ label: t('testDataGenerator_nullRateHigh'), value: 50 },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* 基础配置 */}
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_fieldName')}
|
||||
</label>
|
||||
<Input
|
||||
value={field.name}
|
||||
onChange={(e) => handleNameChange(e.target.value)}
|
||||
placeholder={t('testDataGenerator_fieldNamePlaceholder')}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_fieldDescription')}
|
||||
</label>
|
||||
<Input
|
||||
value={field.description || ''}
|
||||
onChange={(e) => handleDescriptionChange(e.target.value)}
|
||||
placeholder={t('testDataGenerator_fieldDescriptionPlaceholder')}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 必填/选填配置 */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_required')}
|
||||
</label>
|
||||
<Switch checked={field.required} onCheckedChange={handleRequiredChange} />
|
||||
</div>
|
||||
|
||||
{!field.required && (
|
||||
<div className="space-y-2 pl-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t('testDataGenerator_nullRate')}
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{field.nullRate}%
|
||||
</Badge>
|
||||
</div>
|
||||
<Input
|
||||
type="number"
|
||||
value={field.nullRate}
|
||||
onChange={(e) => handleNullRateChange(Number(e.target.value))}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
className="h-9 w-full"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
{nullRatePresets.map((preset) => (
|
||||
<button
|
||||
key={preset.value}
|
||||
onClick={() => handleNullRateChange(preset.value)}
|
||||
className={`px-2 py-1 text-xs rounded-md transition-colors ${
|
||||
field.nullRate === preset.value
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 唯一性约束 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_uniqueConstraint')}
|
||||
</label>
|
||||
<Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
|
||||
</div>
|
||||
|
||||
{/* 生成器选择 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_generator')}
|
||||
</label>
|
||||
<GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
|
||||
</div>
|
||||
|
||||
{/* 生成器参数配置 */}
|
||||
{generator && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_generatorParams')}
|
||||
</label>
|
||||
<GeneratorConfig
|
||||
generator={generator}
|
||||
params={field.params}
|
||||
onChange={handleParamsChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* 字段项组件
|
||||
* 展示单个字段的基本信息
|
||||
*/
|
||||
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { getGeneratorById } from '@/lib/generators';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
interface FieldItemProps {
|
||||
field: FieldConfig;
|
||||
onClick: () => void;
|
||||
isSelected: boolean;
|
||||
}
|
||||
|
||||
export default function FieldItem({ field, onClick, isSelected }: FieldItemProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex-1 cursor-pointer p-2 rounded-md transition-colors ${
|
||||
isSelected ? 'bg-primary/10' : 'hover:bg-muted/50'
|
||||
}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm text-foreground truncate">{field.name}</span>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{generator?.name || field.generatorId}
|
||||
</Badge>
|
||||
{!field.required && (
|
||||
<Badge variant="outline" className="text-xs text-muted-foreground">
|
||||
{field.nullRate}%
|
||||
</Badge>
|
||||
)}
|
||||
{field.unique && (
|
||||
<Badge variant="outline" className="text-xs text-blue-500">
|
||||
{t('testDataGenerator_unique')}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{field.description && (
|
||||
<p className="text-xs text-muted-foreground mt-1 truncate">{field.description}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* 字段列表组件
|
||||
* 展示所有字段配置，支持添加、删除、排序
|
||||
*/
|
||||
|
||||
import { Plus, GripVertical, Trash2, ChevronUp, ChevronDown } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
import FieldItem from './FieldItem';
|
||||
|
||||
interface FieldListProps {
|
||||
fields: FieldConfig[];
|
||||
onUpdate: (index: number, field: FieldConfig) => void;
|
||||
onRemove: (index: number) => void;
|
||||
onAdd: () => void;
|
||||
onSelect: (index: number) => void;
|
||||
selectedIndex: number | null;
|
||||
}
|
||||
|
||||
export default function FieldList({
|
||||
fields,
|
||||
onUpdate,
|
||||
onRemove,
|
||||
onAdd,
|
||||
onSelect,
|
||||
selectedIndex,
|
||||
}: FieldListProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
|
||||
const handleMoveUp = (index: number) => {
|
||||
if (index === 0) return;
|
||||
const newFields = [...fields];
|
||||
[newFields[index - 1], newFields[index]] = [newFields[index], newFields[index - 1]];
|
||||
onUpdate(index - 1, newFields[index - 1]);
|
||||
onUpdate(index, newFields[index]);
|
||||
};
|
||||
|
||||
const handleMoveDown = (index: number) => {
|
||||
if (index === fields.length - 1) return;
|
||||
const newFields = [...fields];
|
||||
[newFields[index], newFields[index + 1]] = [newFields[index + 1], newFields[index]];
|
||||
onUpdate(index, newFields[index]);
|
||||
onUpdate(index + 1, newFields[index + 1]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_fields')} ({fields.length})
|
||||
</h3>
|
||||
<Button variant="outline" size="sm" onClick={onAdd} className="h-8 gap-1.5">
|
||||
<Plus className="h-4 w-4" />
|
||||
{t('testDataGenerator_addField')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto space-y-2 min-h-0">
|
||||
{fields.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<GripVertical className="h-10 w-10 text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">{t('testDataGenerator_noFields')}</p>
|
||||
<p className="text-xs text-muted-foreground/70 mt-1">
|
||||
{t('testDataGenerator_addFieldHint')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
fields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className={`group relative rounded-lg border transition-colors ${
|
||||
selectedIndex === index
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-muted-foreground/30'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 p-3">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => handleMoveUp(index)}
|
||||
disabled={index === 0}
|
||||
>
|
||||
<ChevronUp className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => handleMoveDown(index)}
|
||||
disabled={index === fields.length - 1}
|
||||
>
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<FieldItem
|
||||
field={field}
|
||||
onClick={() => onSelect(index)}
|
||||
isSelected={selectedIndex === index}
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive"
|
||||
onClick={() => onRemove(index)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* 生成按钮组件
|
||||
* 显示生成按钮、加载状态和进度条
|
||||
*/
|
||||
|
||||
import { Play, Square } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { GenerateProgress } from '@/types/testDataGenerator';
|
||||
|
||||
interface GenerateButtonProps {
|
||||
onClick: () => void;
|
||||
onCancel: () => void;
|
||||
isGenerating: boolean;
|
||||
progress: GenerateProgress | null;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export default function GenerateButton({
|
||||
onClick,
|
||||
onCancel,
|
||||
isGenerating,
|
||||
progress,
|
||||
disabled,
|
||||
}: GenerateButtonProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{isGenerating ? (
|
||||
<>
|
||||
<Button variant="destructive" onClick={onCancel} className="w-full h-11 gap-2">
|
||||
<Square className="h-5 w-5" />
|
||||
{t('testDataGenerator_cancel')}
|
||||
</Button>
|
||||
|
||||
{/* 进度条 */}
|
||||
{progress && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>
|
||||
{t('testDataGenerator_progress', {
|
||||
current: progress.generated.toLocaleString(),
|
||||
total: progress.total.toLocaleString(),
|
||||
})}
|
||||
</span>
|
||||
<span>{progress.progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 bg-muted rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-primary transition-all duration-300"
|
||||
style={{ width: `${progress.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
{progress.estimatedTimeLeft !== undefined && (
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
{t('testDataGenerator_estimatedTime', {
|
||||
time: Math.ceil(progress.estimatedTimeLeft / 1000),
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Button onClick={onClick} disabled={disabled} className="w-full h-11 gap-2">
|
||||
<Play className="h-5 w-5" />
|
||||
{t('testDataGenerator_generate')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/**
|
||||
* 生成选项组件
|
||||
* 配置生成数量、数据格式等选项
|
||||
*/
|
||||
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
|
||||
interface GenerateOptionsProps {
|
||||
count: number;
|
||||
onCountChange: (count: number) => void;
|
||||
format: 'json' | 'csv';
|
||||
onFormatChange: (format: 'json' | 'csv') => void;
|
||||
defaultNullRate: number;
|
||||
onDefaultNullRateChange: (rate: number) => void;
|
||||
}
|
||||
|
||||
const COUNT_PRESETS = [10, 50, 100, 500, 1000, 5000, 10000];
|
||||
|
||||
export default function GenerateOptions({
|
||||
count,
|
||||
onCountChange,
|
||||
format,
|
||||
onFormatChange,
|
||||
defaultNullRate,
|
||||
onDefaultNullRateChange,
|
||||
}: GenerateOptionsProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 生成数量 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_count')}
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{COUNT_PRESETS.map((preset) => (
|
||||
<button
|
||||
key={preset}
|
||||
onClick={() => onCountChange(preset)}
|
||||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
count === preset
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{preset.toLocaleString()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Input
|
||||
type="number"
|
||||
value={count}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
if (value > 0 && value <= 100000) {
|
||||
onCountChange(value);
|
||||
}
|
||||
}}
|
||||
min={1}
|
||||
max={100000}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 数据格式 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_format')}
|
||||
</label>
|
||||
<Select value={format} onValueChange={(v) => onFormatChange(v as 'json' | 'csv')}>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="json">JSON</SelectItem>
|
||||
<SelectItem value="csv">CSV</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 默认空值率 */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_defaultNullRate')}
|
||||
</label>
|
||||
<span className="text-sm text-muted-foreground">{defaultNullRate}%</span>
|
||||
</div>
|
||||
<Input
|
||||
type="number"
|
||||
value={defaultNullRate}
|
||||
onChange={(e) => onDefaultNullRateChange(Number(e.target.value))}
|
||||
min={0}
|
||||
max={50}
|
||||
step={5}
|
||||
className="h-9 w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
/**
|
||||
* 生成器配置组件
|
||||
* 根据生成器参数定义动态渲染配置表单
|
||||
*/
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
interface GeneratorConfigProps {
|
||||
generator: GeneratorDefinition;
|
||||
params: Record<string, unknown>;
|
||||
onChange: (params: Record<string, unknown>) => void;
|
||||
}
|
||||
|
||||
export default function GeneratorConfig({ generator, params, onChange }: GeneratorConfigProps) {
|
||||
const handleParamChange = (key: string, value: unknown) => {
|
||||
onChange({ ...params, [key]: value });
|
||||
};
|
||||
|
||||
if (generator.params.length === 0) {
|
||||
return <p className="text-sm text-muted-foreground py-2">此生成器无可配置参数</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4 p-3 rounded-lg bg-muted/30">
|
||||
{generator.params.map((param) => (
|
||||
<div key={param.key} className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{param.label}
|
||||
{param.required && <span className="text-destructive ml-1">*</span>}
|
||||
</label>
|
||||
{param.description && (
|
||||
<p className="text-xs text-muted-foreground">{param.description}</p>
|
||||
)}
|
||||
|
||||
{param.type === 'string' && (
|
||||
<Input
|
||||
value={String(params[param.key] ?? param.defaultValue)}
|
||||
onChange={(e) => handleParamChange(param.key, e.target.value)}
|
||||
placeholder={param.placeholder}
|
||||
className="h-9"
|
||||
/>
|
||||
)}
|
||||
|
||||
{param.type === 'number' && (
|
||||
<Input
|
||||
type="number"
|
||||
value={Number(params[param.key] ?? param.defaultValue)}
|
||||
onChange={(e) => handleParamChange(param.key, Number(e.target.value))}
|
||||
min={param.min}
|
||||
max={param.max}
|
||||
className="h-9"
|
||||
/>
|
||||
)}
|
||||
|
||||
{param.type === 'boolean' && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{params[param.key] !== false ? '启用' : '禁用'}
|
||||
</span>
|
||||
<Switch
|
||||
checked={params[param.key] !== false}
|
||||
onCheckedChange={(checked) => handleParamChange(param.key, checked)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{param.type === 'select' && (
|
||||
<Select
|
||||
value={String(params[param.key] ?? param.defaultValue)}
|
||||
onValueChange={(value) => handleParamChange(param.key, value)}
|
||||
>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{param.options?.map((option) => (
|
||||
<SelectItem key={String(option.value)} value={String(option.value)}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{param.type === 'array' && (
|
||||
<Input
|
||||
value={
|
||||
Array.isArray(params[param.key])
|
||||
? (params[param.key] as string[]).join(', ')
|
||||
: String(param.defaultValue || '')
|
||||
}
|
||||
onChange={(e) =>
|
||||
handleParamChange(
|
||||
param.key,
|
||||
e.target.value
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean),
|
||||
)
|
||||
}
|
||||
placeholder="用逗号分隔多个值"
|
||||
className="h-9"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* 生成器选择器组件
|
||||
* 以分类形式展示所有可用生成器
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Search, User, Briefcase, Code, Hash } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { generatorCategories, getGeneratorsByCategory, searchGenerators } from '@/lib/generators';
|
||||
|
||||
interface GeneratorSelectorProps {
|
||||
selectedId: string;
|
||||
onChange: (id: string) => void;
|
||||
}
|
||||
|
||||
const categoryIcons: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
personal: User,
|
||||
business: Briefcase,
|
||||
technical: Code,
|
||||
basic: Hash,
|
||||
};
|
||||
|
||||
export default function GeneratorSelector({ selectedId, onChange }: GeneratorSelectorProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [activeCategory, setActiveCategory] = useState<string>(generatorCategories[0]?.id || '');
|
||||
|
||||
const generators = searchQuery
|
||||
? searchGenerators(searchQuery)
|
||||
: getGeneratorsByCategory(activeCategory);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* 搜索框 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder={t('testDataGenerator_searchGenerator')}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 分类标签 */}
|
||||
{!searchQuery && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{generatorCategories.map((category) => {
|
||||
const Icon = categoryIcons[category.id];
|
||||
return (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => setActiveCategory(category.id)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
activeCategory === category.id
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{Icon && <Icon className="h-3.5 w-3.5" />}
|
||||
{category.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成器列表 */}
|
||||
<div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto">
|
||||
{generators.map((generator) => (
|
||||
<button
|
||||
key={generator.id}
|
||||
onClick={() => onChange(generator.id)}
|
||||
className={`flex flex-col items-start p-2 text-left rounded-md border transition-colors ${
|
||||
selectedId === generator.id
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-muted-foreground/30'
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm font-medium text-foreground">{generator.name}</span>
|
||||
<span className="text-xs text-muted-foreground line-clamp-1">
|
||||
{generator.description}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* 结果面板组件
|
||||
* 展示生成结果的状态和统计信息
|
||||
*/
|
||||
|
||||
import { CheckCircle, AlertTriangle, XCircle, Clock, Database } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { GenerateResult } from '@/types/testDataGenerator';
|
||||
|
||||
interface ResultPanelProps {
|
||||
result: GenerateResult | null;
|
||||
}
|
||||
|
||||
export default function ResultPanel({ result }: ResultPanelProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
|
||||
if (!result) return null;
|
||||
|
||||
const getStatusIcon = () => {
|
||||
if (result.success && (!result.warnings || result.warnings.length === 0)) {
|
||||
return <CheckCircle className="h-5 w-5 text-green-500" />;
|
||||
}
|
||||
if (result.success && result.warnings && result.warnings.length > 0) {
|
||||
return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
|
||||
}
|
||||
return <XCircle className="h-5 w-5 text-destructive" />;
|
||||
};
|
||||
|
||||
const getStatusText = () => {
|
||||
if (result.success && (!result.warnings || result.warnings.length === 0)) {
|
||||
return t('testDataGenerator_success');
|
||||
}
|
||||
if (result.success && result.warnings && result.warnings.length > 0) {
|
||||
return t('testDataGenerator_partialSuccess');
|
||||
}
|
||||
return t('testDataGenerator_failed');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* 状态标题 */}
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusIcon()}
|
||||
<span className="text-sm font-medium text-foreground">{getStatusText()}</span>
|
||||
</div>
|
||||
|
||||
{/* 统计信息 */}
|
||||
{result.stats && (
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
||||
<Database className="h-4 w-4 text-muted-foreground mb-1" />
|
||||
<span className="text-lg font-semibold text-foreground">
|
||||
{result.stats.total.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('testDataGenerator_totalCount')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mb-1" />
|
||||
<span className="text-lg font-semibold text-green-500">
|
||||
{result.stats.success.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('testDataGenerator_successCount')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
||||
<Clock className="h-4 w-4 text-muted-foreground mb-1" />
|
||||
<span className="text-lg font-semibold text-foreground">
|
||||
{(result.stats.duration / 1000).toFixed(2)}s
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">{t('testDataGenerator_duration')}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 警告信息 */}
|
||||
{result.warnings && result.warnings.length > 0 && (
|
||||
<div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<AlertTriangle className="h-4 w-4 text-yellow-500" />
|
||||
<span className="text-sm font-medium text-yellow-500">
|
||||
{t('testDataGenerator_warnings')}
|
||||
</span>
|
||||
</div>
|
||||
<ul className="list-disc list-inside space-y-1">
|
||||
{result.warnings.slice(0, 5).map((warning, index) => (
|
||||
<li key={index} className="text-xs text-yellow-500/80">
|
||||
{warning}
|
||||
</li>
|
||||
))}
|
||||
{result.warnings.length > 5 && (
|
||||
<li className="text-xs text-yellow-500/80">
|
||||
... {t('testDataGenerator_moreWarnings', { count: result.warnings.length - 5 })}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 错误信息 */}
|
||||
{result.error && (
|
||||
<div className="p-3 rounded-lg bg-destructive/10 border border-destructive/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<XCircle className="h-4 w-4 text-destructive" />
|
||||
<span className="text-sm text-destructive">{result.error}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
/**
|
||||
* 规则管理器组件
|
||||
* 管理测试数据生成规则的保存、加载、删除等操作
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Search, Save, Upload, Download, Trash2, Copy, Edit, Clock, Tag } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
interface RuleManagerProps {
|
||||
currentFields: FieldConfig[];
|
||||
onLoad: (fields: FieldConfig[]) => void;
|
||||
}
|
||||
|
||||
export default function RuleManager({ currentFields, onLoad }: RuleManagerProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
||||
const [ruleName, setRuleName] = useState('');
|
||||
const [ruleDescription, setRuleDescription] = useState('');
|
||||
|
||||
const loadRules = () => {
|
||||
setRules(ruleStorage.getAll());
|
||||
};
|
||||
|
||||
const filteredRules = searchQuery ? ruleStorage.search(searchQuery) : rules;
|
||||
|
||||
const handleSave = () => {
|
||||
if (!ruleName.trim()) return;
|
||||
|
||||
const newRule = ruleStorage.save({
|
||||
name: ruleName.trim(),
|
||||
description: ruleDescription.trim(),
|
||||
fields: currentFields,
|
||||
});
|
||||
|
||||
if (newRule) {
|
||||
loadRules();
|
||||
setShowSaveDialog(false);
|
||||
setRuleName('');
|
||||
setRuleDescription('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoad = (rule: DataRule) => {
|
||||
onLoad(rule.fields);
|
||||
ruleStorage.recordUse(rule.id);
|
||||
loadRules();
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
ruleStorage.deleteRule(id);
|
||||
loadRules();
|
||||
};
|
||||
|
||||
const handleDuplicate = (id: string) => {
|
||||
ruleStorage.duplicate(id);
|
||||
loadRules();
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
const json = ruleStorage.exportRules();
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'test-data-rules.json';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleImport = async () => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
input.onchange = async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const text = await file.text();
|
||||
const result = ruleStorage.importRules(text);
|
||||
|
||||
if (result.errors.length > 0) {
|
||||
console.warn('[RuleManager] 导入警告:', result.errors);
|
||||
}
|
||||
|
||||
loadRules();
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
const formatDate = (timestamp: number) => {
|
||||
return new Date(timestamp).toLocaleDateString('zh-CN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 工具栏 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowSaveDialog(true)}
|
||||
disabled={currentFields.length === 0}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
<Save className="h-4 w-4" />
|
||||
{t('testDataGenerator_saveRule')}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleImport} className="h-8 gap-1.5">
|
||||
<Upload className="h-4 w-4" />
|
||||
{t('testDataGenerator_import')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleExport}
|
||||
disabled={rules.length === 0}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
{t('testDataGenerator_export')}
|
||||
</Button>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('testDataGenerator_ruleCount', { count: rules.length, max: 20 })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 搜索框 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder={t('testDataGenerator_searchRules')}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 保存对话框 */}
|
||||
{showSaveDialog && (
|
||||
<div className="p-3 rounded-lg border bg-card space-y-3">
|
||||
<h4 className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_saveNewRule')}
|
||||
</h4>
|
||||
<Input
|
||||
value={ruleName}
|
||||
onChange={(e) => setRuleName(e.target.value)}
|
||||
placeholder={t('testDataGenerator_ruleNamePlaceholder')}
|
||||
className="h-9"
|
||||
/>
|
||||
<Input
|
||||
value={ruleDescription}
|
||||
onChange={(e) => setRuleDescription(e.target.value)}
|
||||
placeholder={t('testDataGenerator_ruleDescPlaceholder')}
|
||||
className="h-9"
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowSaveDialog(false)}>
|
||||
{t('testDataGenerator_cancel')}
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleSave} disabled={!ruleName.trim()}>
|
||||
{t('testDataGenerator_confirm')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 规则列表 */}
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{filteredRules.length === 0 ? (
|
||||
<div className="text-center py-6">
|
||||
<Tag className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{searchQuery
|
||||
? t('testDataGenerator_noSearchResults')
|
||||
: t('testDataGenerator_noRules')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredRules.map((rule) => (
|
||||
<div
|
||||
key={rule.id}
|
||||
className="flex items-center gap-3 p-2 rounded-lg border hover:bg-muted/30 transition-colors"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm text-foreground truncate">{rule.name}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{rule.fields.length} {t('testDataGenerator_fields')}
|
||||
</span>
|
||||
</div>
|
||||
{rule.description && (
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||
{rule.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatDate(rule.updatedAt)}
|
||||
</span>
|
||||
<span>{t('testDataGenerator_usedTimes', { count: rule.useCount })}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => handleLoad(rule)}
|
||||
title={t('testDataGenerator_load')}
|
||||
>
|
||||
<Edit className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => handleDuplicate(rule.id)}
|
||||
title={t('testDataGenerator_duplicate')}
|
||||
>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-destructive hover:text-destructive"
|
||||
onClick={() => handleDelete(rule.id)}
|
||||
title={t('testDataGenerator_delete')}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* 数据生成器 Hook
|
||||
* 管理 Web Worker 的创建、销毁和通信
|
||||
*/
|
||||
|
||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
||||
import type {
|
||||
FieldConfig,
|
||||
GenerateResult,
|
||||
GenerateProgress,
|
||||
WorkerMessage,
|
||||
} from '@/types/testDataGenerator';
|
||||
|
||||
export interface UseGeneratorReturn {
|
||||
/** 是否正在生成 */
|
||||
isGenerating: boolean;
|
||||
/** 生成进度 */
|
||||
progress: GenerateProgress | null;
|
||||
/** 生成结果 */
|
||||
result: GenerateResult | null;
|
||||
/** 错误信息 */
|
||||
error: string | null;
|
||||
/** 开始生成 */
|
||||
generate: (fields: FieldConfig[], count: number, csvMode?: boolean) => void;
|
||||
/** 取消生成 */
|
||||
cancel: () => void;
|
||||
/** 清除结果 */
|
||||
clearResult: () => void;
|
||||
}
|
||||
|
||||
export function useGenerator(): UseGeneratorReturn {
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [progress, setProgress] = useState<GenerateProgress | null>(null);
|
||||
const [result, setResult] = useState<GenerateResult | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const workerRef = useRef<Worker | null>(null);
|
||||
|
||||
// 清理 Worker
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (workerRef.current) {
|
||||
workerRef.current.terminate();
|
||||
workerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 创建或复用 Worker
|
||||
*/
|
||||
const getWorker = useCallback((): Worker => {
|
||||
if (workerRef.current) {
|
||||
workerRef.current.terminate();
|
||||
}
|
||||
|
||||
const worker = new Worker(new URL('@/workers/generator.worker.ts', import.meta.url), {
|
||||
type: 'module',
|
||||
});
|
||||
|
||||
worker.onmessage = (e: MessageEvent<WorkerMessage>) => {
|
||||
const data = e.data;
|
||||
const { type } = data;
|
||||
|
||||
switch (type) {
|
||||
case 'progress':
|
||||
setProgress(data.payload as GenerateProgress);
|
||||
break;
|
||||
case 'complete':
|
||||
setIsGenerating(false);
|
||||
setResult(data.payload as GenerateResult);
|
||||
setProgress(null);
|
||||
break;
|
||||
case 'error':
|
||||
setIsGenerating(false);
|
||||
setError((data.payload as { error: string }).error);
|
||||
setProgress(null);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
worker.onerror = (err) => {
|
||||
console.error('[useGenerator] Worker 错误:', err);
|
||||
setIsGenerating(false);
|
||||
setError('Worker 运行错误');
|
||||
setProgress(null);
|
||||
};
|
||||
|
||||
workerRef.current = worker;
|
||||
return worker;
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 开始生成
|
||||
*/
|
||||
const generate = useCallback(
|
||||
(fields: FieldConfig[], count: number, csvMode = false) => {
|
||||
if (isGenerating) return;
|
||||
|
||||
setIsGenerating(true);
|
||||
setProgress(null);
|
||||
setResult(null);
|
||||
setError(null);
|
||||
|
||||
const worker = getWorker();
|
||||
const message: WorkerMessage = {
|
||||
type: 'start',
|
||||
payload: { fields, count, csvMode },
|
||||
};
|
||||
worker.postMessage(message);
|
||||
},
|
||||
[isGenerating, getWorker],
|
||||
);
|
||||
|
||||
/**
|
||||
* 取消生成
|
||||
*/
|
||||
const cancel = useCallback(() => {
|
||||
if (workerRef.current && isGenerating) {
|
||||
const message: WorkerMessage = { type: 'cancel' };
|
||||
workerRef.current.postMessage(message);
|
||||
setIsGenerating(false);
|
||||
setProgress(null);
|
||||
}
|
||||
}, [isGenerating]);
|
||||
|
||||
/**
|
||||
* 清除结果
|
||||
*/
|
||||
const clearResult = useCallback(() => {
|
||||
setResult(null);
|
||||
setProgress(null);
|
||||
setError(null);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
isGenerating,
|
||||
progress,
|
||||
result,
|
||||
error,
|
||||
generate,
|
||||
cancel,
|
||||
clearResult,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,245 @@
|
||||
/**
|
||||
* 测试数据生成器主页面
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { Settings, Database, Tag } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useGenerator } from './hooks/useGenerator';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
// 生成唯一 ID 的辅助函数
|
||||
function generateId(): string {
|
||||
return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
import FieldList from './components/FieldList';
|
||||
import FieldEditor from './components/FieldEditor';
|
||||
import GenerateOptions from './components/GenerateOptions';
|
||||
import GenerateButton from './components/GenerateButton';
|
||||
import DataPreview from './components/DataPreview';
|
||||
import ResultPanel from './components/ResultPanel';
|
||||
import ExportPanel from './components/ExportPanel';
|
||||
import RuleManager from './components/RuleManager';
|
||||
|
||||
type TabType = 'fields' | 'rules';
|
||||
|
||||
export default function TestDataGeneratorPage() {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const { isGenerating, progress, result, error, generate, cancel, clearResult } = useGenerator();
|
||||
|
||||
// 字段配置
|
||||
const [fields, setFields] = useState<FieldConfig[]>([]);
|
||||
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
|
||||
|
||||
// 生成选项
|
||||
const [count, setCount] = useState(100);
|
||||
const [format, setFormat] = useState<'json' | 'csv'>('json');
|
||||
const [defaultNullRate, setDefaultNullRate] = useState(10);
|
||||
|
||||
// 当前标签页
|
||||
const [activeTab, setActiveTab] = useState<TabType>('fields');
|
||||
|
||||
// 添加新字段
|
||||
const handleAddField = useCallback(() => {
|
||||
const newField: FieldConfig = {
|
||||
id: generateId(),
|
||||
name: `field${fields.length + 1}`,
|
||||
generatorId: 'chineseName',
|
||||
params: {},
|
||||
required: true,
|
||||
nullRate: 0,
|
||||
unique: false,
|
||||
};
|
||||
setFields([...fields, newField]);
|
||||
setSelectedIndex(fields.length);
|
||||
}, [fields]);
|
||||
|
||||
// 更新字段
|
||||
const handleUpdateField = useCallback(
|
||||
(index: number, field: FieldConfig) => {
|
||||
const newFields = [...fields];
|
||||
newFields[index] = field;
|
||||
setFields(newFields);
|
||||
},
|
||||
[fields],
|
||||
);
|
||||
|
||||
// 删除字段
|
||||
const handleRemoveField = useCallback(
|
||||
(index: number) => {
|
||||
const newFields = fields.filter((_, i) => i !== index);
|
||||
setFields(newFields);
|
||||
if (selectedIndex === index) {
|
||||
setSelectedIndex(null);
|
||||
} else if (selectedIndex !== null && selectedIndex > index) {
|
||||
setSelectedIndex(selectedIndex - 1);
|
||||
}
|
||||
},
|
||||
[fields, selectedIndex],
|
||||
);
|
||||
|
||||
// 加载规则
|
||||
const handleLoadRule = useCallback(
|
||||
(loadedFields: FieldConfig[]) => {
|
||||
setFields(loadedFields);
|
||||
setSelectedIndex(null);
|
||||
clearResult();
|
||||
},
|
||||
[clearResult],
|
||||
);
|
||||
|
||||
// 开始生成
|
||||
const handleGenerate = useCallback(() => {
|
||||
if (fields.length === 0) return;
|
||||
generate(fields, count, format === 'csv');
|
||||
}, [fields, count, format, generate]);
|
||||
|
||||
// 获取选中的字段
|
||||
const selectedField = selectedIndex !== null ? fields[selectedIndex] : null;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
|
||||
<div className="max-w-7xl mx-auto p-4 sm:p-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="mb-6">
|
||||
<h1 className="text-xl font-semibold text-foreground">{t('testDataGenerator_title')}</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">{t('testDataGenerator_description')}</p>
|
||||
</div>
|
||||
|
||||
{/* 主要内容区域 - 左右分栏 */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4 items-start">
|
||||
{/* 左侧面板 - 字段配置 */}
|
||||
<div className="lg:col-span-3 space-y-4">
|
||||
{/* 标签页切换 */}
|
||||
<div className="flex gap-1 p-1 bg-muted rounded-lg">
|
||||
<button
|
||||
onClick={() => setActiveTab('fields')}
|
||||
className={cn(
|
||||
'flex-1 flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium rounded-md transition-colors',
|
||||
activeTab === 'fields'
|
||||
? 'bg-background text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
{t('testDataGenerator_fieldConfig')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('rules')}
|
||||
className={cn(
|
||||
'flex-1 flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium rounded-md transition-colors',
|
||||
activeTab === 'rules'
|
||||
? 'bg-background text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
<Tag className="h-4 w-4" />
|
||||
{t('testDataGenerator_ruleManagement')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 字段配置标签页 */}
|
||||
{activeTab === 'fields' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* 字段列表 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<FieldList
|
||||
fields={fields}
|
||||
onUpdate={handleUpdateField}
|
||||
onRemove={handleRemoveField}
|
||||
onAdd={handleAddField}
|
||||
onSelect={setSelectedIndex}
|
||||
selectedIndex={selectedIndex}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 字段编辑器 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
{selectedField ? (
|
||||
<FieldEditor
|
||||
field={selectedField}
|
||||
onChange={(updatedField) => handleUpdateField(selectedIndex!, updatedField)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Settings className="h-10 w-10 text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('testDataGenerator_selectFieldToEdit')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 规则管理标签页 */}
|
||||
{activeTab === 'rules' && (
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<RuleManager currentFields={fields} onLoad={handleLoadRule} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成选项 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<GenerateOptions
|
||||
count={count}
|
||||
onCountChange={setCount}
|
||||
format={format}
|
||||
onFormatChange={setFormat}
|
||||
defaultNullRate={defaultNullRate}
|
||||
onDefaultNullRateChange={setDefaultNullRate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 生成按钮 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<GenerateButton
|
||||
onClick={handleGenerate}
|
||||
onCancel={cancel}
|
||||
isGenerating={isGenerating}
|
||||
progress={progress}
|
||||
disabled={fields.length === 0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧面板 - 数据预览和结果 */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
{/* 结果状态 */}
|
||||
{(result || error) && (
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
{error ? (
|
||||
<div className="flex items-center gap-2 text-destructive">
|
||||
<span className="text-sm">{error}</span>
|
||||
</div>
|
||||
) : (
|
||||
<ResultPanel result={result} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 数据预览 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
|
||||
<Database className="h-4 w-4" />
|
||||
{t('testDataGenerator_dataPreview')}
|
||||
</h3>
|
||||
<div className="h-[400px]">
|
||||
<DataPreview result={result} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 导出面板 */}
|
||||
{result?.data && result.data.length > 0 && (
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<ExportPanel result={result} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user