develop (#68)
* docs(AGENTS.md): 添加 Git Commit 必须使用中文描述的规范 * docs: 更新测试数据生成器功能设计文档 * refactor: 删除死代码 * docs: 统一测试数据生成器文档，移除 SQL/TypeScript 导出，修复接口命名不一致 * feat: 实现测试数据生成器功能 * docs: 更新 README 和 AGENTS 文档，补充测试数据生成器模块说明
This commit is contained in:
LingandRX
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* 数据预览组件
|
||||
* 展示一条示例数据，展示数据结构
|
||||
*/
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { FileJson, FileText } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { getGeneratorById } from '@/lib/generators';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
interface DataPreviewProps {
|
||||
fields: FieldConfig[];
|
||||
}
|
||||
|
||||
/** JSON 语法高亮渲染 */
|
||||
function JsonHighlight({ data }: { data: Record<string, unknown> }) {
|
||||
const formatted = useMemo(() => {
|
||||
const lines: { indent: string; key?: string; value: string; isLast: boolean }[] = [];
|
||||
const entries = Object.entries(data);
|
||||
|
||||
entries.forEach(([key, value], index) => {
|
||||
const isLast = index === entries.length - 1;
|
||||
const formattedValue =
|
||||
value === null ? 'null' : typeof value === 'string' ? `"${value}"` : String(value);
|
||||
lines.push({ indent: ' ', key, value: formattedValue, isLast });
|
||||
});
|
||||
|
||||
return lines;
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<pre className="text-sm font-mono leading-relaxed">
|
||||
<span className="text-muted-foreground">{'{'}</span>
|
||||
{formatted.map((line, i) => (
|
||||
<div key={i} className="flex">
|
||||
<span className="text-muted-foreground">{line.indent}</span>
|
||||
<span className="text-blue-500 dark:text-blue-400">"{line.key}"</span>
|
||||
<span className="text-muted-foreground">{': '}</span>
|
||||
<span className={getValueColor(line.value)}>{line.value}</span>
|
||||
{!line.isLast && <span className="text-muted-foreground">,</span>}
|
||||
</div>
|
||||
))}
|
||||
<span className="text-muted-foreground">{'}'}</span>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
/** 根据值类型返回颜色类名 */
|
||||
function getValueColor(value: string): string {
|
||||
if (value === 'null') return 'text-muted-foreground';
|
||||
if (value.startsWith('"')) return 'text-emerald-600 dark:text-emerald-400';
|
||||
if (/^\d+$/.test(value)) return 'text-amber-600 dark:text-amber-400';
|
||||
if (value === 'true' || value === 'false') return 'text-purple-600 dark:text-purple-400';
|
||||
return 'text-foreground';
|
||||
}
|
||||
|
||||
export default function DataPreview({ fields }: DataPreviewProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
|
||||
// 生成一条示例数据
|
||||
const sampleData = useMemo(() => {
|
||||
if (fields.length === 0) return null;
|
||||
|
||||
const record: Record<string, unknown> = {};
|
||||
for (const field of fields) {
|
||||
// 非必填字段预览显示 null
|
||||
if (!field.required) {
|
||||
record[field.name] = null;
|
||||
continue;
|
||||
}
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
if (generator) {
|
||||
record[field.name] = generator.generate(field.params);
|
||||
} else {
|
||||
record[field.name] = null;
|
||||
}
|
||||
}
|
||||
return record;
|
||||
}, [fields]);
|
||||
|
||||
if (!sampleData) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center">
|
||||
<FileJson className="h-8 w-8 text-muted-foreground/30 mb-2" />
|
||||
<p className="text-xs text-muted-foreground/50">{t('testDataGenerator_noDataHint')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 示例标签 */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-5 w-5 rounded bg-primary/10 flex items-center justify-center">
|
||||
<FileText className="h-3 w-3 text-primary" />
|
||||
</div>
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
{t('testDataGenerator_sampleData')}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground/50 bg-muted px-1.5 py-0.5 rounded">
|
||||
{Object.keys(sampleData).length} {t('testDataGenerator_fields')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 示例数据展示 */}
|
||||
<div className="flex-1 min-h-0 overflow-auto rounded-lg bg-zinc-950 dark:bg-zinc-900 p-4">
|
||||
<JsonHighlight data={sampleData} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* 导出面板组件
|
||||
* 提供复制、下载 JSON、下载 CSV 选项
|
||||
*/
|
||||
|
||||
import { Copy, Download } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
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!);
|
||||
const success = await DataExporter.copyToClipboard(content);
|
||||
if (success) {
|
||||
toast.success(t('testDataGenerator_copySuccess'));
|
||||
} else {
|
||||
toast.error(t('testDataGenerator_copyFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyCSV = async () => {
|
||||
const content = DataExporter.toCSV(result.data!);
|
||||
const success = await DataExporter.copyToClipboard(content);
|
||||
if (success) {
|
||||
toast.success(t('testDataGenerator_copySuccess'));
|
||||
} else {
|
||||
toast.error(t('testDataGenerator_copyFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
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,230 @@
|
||||
/**
|
||||
* 字段编辑器组件
|
||||
* 编辑单个字段的详细配置
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
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;
|
||||
/** 所有字段名列表，用于检测重复 */
|
||||
allFieldNames?: string[];
|
||||
}
|
||||
|
||||
export default function FieldEditor({ field, onChange, allFieldNames = [] }: FieldEditorProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
const [nameError, setNameError] = useState<string | null>(null);
|
||||
|
||||
const validateFieldName = useCallback(
|
||||
(name: string): string | null => {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) {
|
||||
return t('testDataGenerator_fieldNameEmpty');
|
||||
}
|
||||
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
|
||||
return t('testDataGenerator_fieldNameInvalid');
|
||||
}
|
||||
const isDuplicate = allFieldNames.some(
|
||||
(n, i) => n === trimmed && i !== allFieldNames.indexOf(field.name),
|
||||
);
|
||||
if (isDuplicate) {
|
||||
return t('testDataGenerator_fieldNameDuplicate');
|
||||
}
|
||||
return null;
|
||||
},
|
||||
[allFieldNames, field.name, t],
|
||||
);
|
||||
|
||||
const handleNameChange = (name: string) => {
|
||||
onChange({ ...field, name });
|
||||
// 实时校验
|
||||
const error = validateFieldName(name);
|
||||
setNameError(error);
|
||||
};
|
||||
|
||||
const handleDescriptionChange = (description: string) => {
|
||||
onChange({ ...field, description });
|
||||
};
|
||||
|
||||
const handleRequiredChange = (required: boolean) => {
|
||||
onChange({
|
||||
...field,
|
||||
required,
|
||||
// 切换为必填时清零，切换为非必填时默认 100%
|
||||
nullRate: required ? 0 : 100,
|
||||
});
|
||||
};
|
||||
|
||||
const handleNullRateChange = (nullRate: number) => {
|
||||
// 限制范围 0-100
|
||||
const clampedRate = Math.max(0, Math.min(100, nullRate));
|
||||
// 空值率为 0 时自动设为必填
|
||||
if (clampedRate === 0) {
|
||||
onChange({ ...field, nullRate: clampedRate, required: true });
|
||||
} else {
|
||||
onChange({ ...field, nullRate: clampedRate, required: false });
|
||||
}
|
||||
};
|
||||
|
||||
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: '5%', value: 5 },
|
||||
{ label: '20%', value: 20 },
|
||||
{ label: '50%', value: 50 },
|
||||
{ label: '75%', value: 75 },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* 基础配置 */}
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_fieldName')}
|
||||
</label>
|
||||
<span className="text-xs text-muted-foreground">{field.name.length}/20</span>
|
||||
</div>
|
||||
<Input
|
||||
value={field.name}
|
||||
onChange={(e) => handleNameChange(e.target.value)}
|
||||
placeholder={t('testDataGenerator_fieldNamePlaceholder')}
|
||||
maxLength={20}
|
||||
className={`h-9 ${nameError ? 'border-destructive' : ''}`}
|
||||
/>
|
||||
{nameError && <p className="text-xs text-destructive mt-1">{nameError}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_fieldDescription')}
|
||||
</label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{(field.description || '').length}/50
|
||||
</span>
|
||||
</div>
|
||||
<Input
|
||||
value={field.description || ''}
|
||||
onChange={(e) => handleDescriptionChange(e.target.value)}
|
||||
placeholder={t('testDataGenerator_fieldDescriptionPlaceholder')}
|
||||
maxLength={50}
|
||||
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) => {
|
||||
const value = Number(e.target.value);
|
||||
if (value >= 0 && value <= 100) {
|
||||
handleNullRateChange(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-3 py-1.5 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,59 @@
|
||||
/**
|
||||
* 字段项组件
|
||||
* 展示单个字段的基本信息，适配固定高度卡片
|
||||
*/
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export default function FieldItem({ field, onClick }: FieldItemProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex-1 min-w-0 cursor-pointer rounded-md transition-all hover:bg-muted/50"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div
|
||||
className={`h-full ${field.description ? 'flex flex-col justify-center' : 'flex items-center'}`}
|
||||
>
|
||||
{/* 第一行：字段名 + 标签 */}
|
||||
<div className="flex items-center gap-1.5 overflow-hidden">
|
||||
<span className="font-medium text-sm text-foreground truncate shrink-0 max-w-[140px]">
|
||||
{field.name}
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-[10px] shrink-0 px-1 py-0">
|
||||
{generator?.name || field.generatorId}
|
||||
</Badge>
|
||||
{!field.required && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] shrink-0 px-1 py-0 text-muted-foreground"
|
||||
>
|
||||
{field.nullRate}%
|
||||
</Badge>
|
||||
)}
|
||||
{field.unique && (
|
||||
<Badge variant="outline" className="text-[10px] shrink-0 px-1 py-0 text-blue-500">
|
||||
{t('testDataGenerator_unique')}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{/* 第二行：描述 */}
|
||||
{field.description && (
|
||||
<p className="text-[11px] text-muted-foreground mt-0.5 truncate leading-tight">
|
||||
{field.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,466 @@
|
||||
/**
|
||||
* 字段列表组件
|
||||
* 展示所有字段配置，支持添加、删除、拖拽排序
|
||||
* 超过 5 条时启用虚拟列表滚动
|
||||
*/
|
||||
|
||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
||||
import { Plus, GripVertical, Trash2, Save } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
type DragStartEvent,
|
||||
DragOverlay,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
useSortable,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import type { FieldConfig, DataRule } from '@/types/testDataGenerator';
|
||||
import FieldItem from './FieldItem';
|
||||
|
||||
/** 最大字段数量 */
|
||||
export const MAX_FIELDS = 40;
|
||||
|
||||
/** 虚拟列表配置 */
|
||||
const VISIBLE_COUNT = 5;
|
||||
const ROW_HEIGHT = 60; // 卡片高度 52 + 间距 8
|
||||
const ROW_GAP = 8;
|
||||
const OVERSCAN = 2;
|
||||
const DRAG_OVERSCAN = 10; // 拖拽时增加的预加载范围
|
||||
|
||||
interface FieldListProps {
|
||||
fields: FieldConfig[];
|
||||
onUpdate: (index: number, field: FieldConfig) => void;
|
||||
onRemove: (index: number) => void;
|
||||
onAdd: () => void;
|
||||
onEdit: (index: number) => void;
|
||||
onReorder: (oldIndex: number, newIndex: number) => void;
|
||||
editingRule?: DataRule | null;
|
||||
onRuleSaved?: () => void;
|
||||
}
|
||||
|
||||
/** 可排序的字段项 */
|
||||
function SortableFieldItem({
|
||||
field,
|
||||
onEdit,
|
||||
onRemove,
|
||||
}: {
|
||||
field: FieldConfig;
|
||||
onEdit: () => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: field.id,
|
||||
});
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
zIndex: isDragging ? 10 : 0,
|
||||
height: ROW_HEIGHT - ROW_GAP, // 固定卡片高度 52px，与虚拟模式一致
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`group relative rounded-lg border transition-all ${
|
||||
isDragging
|
||||
? 'border-primary shadow-lg'
|
||||
: 'border-border hover:border-muted-foreground/30 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 h-full px-3 py-2">
|
||||
{/* 拖拽手柄 */}
|
||||
<button
|
||||
className="cursor-grab active:cursor-grabbing p-1 rounded hover:bg-muted/50 touch-none shrink-0"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
||||
</button>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<FieldItem field={field} onClick={onEdit} />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive"
|
||||
onClick={onRemove}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FieldList({
|
||||
fields,
|
||||
onUpdate: _onUpdate,
|
||||
onRemove,
|
||||
onAdd,
|
||||
onEdit,
|
||||
onReorder,
|
||||
editingRule,
|
||||
onRuleSaved,
|
||||
}: FieldListProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const [scrollTop, setScrollTop] = useState(0);
|
||||
const [activeId, setActiveId] = useState<string | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
||||
const [showConfirmOverwrite, setShowConfirmOverwrite] = useState(false);
|
||||
const [ruleName, setRuleName] = useState('');
|
||||
const [ruleDescription, setRuleDescription] = useState('');
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: { distance: 5 },
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
}),
|
||||
);
|
||||
|
||||
const handleDragStart = (event: DragStartEvent) => {
|
||||
setActiveId(String(event.active.id));
|
||||
};
|
||||
|
||||
// 拖拽时的滚轮滚动处理
|
||||
useEffect(() => {
|
||||
if (!activeId || !containerRef.current) return;
|
||||
|
||||
const container = containerRef.current;
|
||||
|
||||
const handleWheel = (e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 滚动容器
|
||||
const scrollAmount = e.deltaY * 0.5; // 降低滚动速度，更易控制
|
||||
const newScrollTop = Math.max(
|
||||
0,
|
||||
Math.min(
|
||||
container.scrollHeight - container.clientHeight,
|
||||
container.scrollTop + scrollAmount,
|
||||
),
|
||||
);
|
||||
container.scrollTop = newScrollTop;
|
||||
setScrollTop(newScrollTop);
|
||||
};
|
||||
|
||||
// 在 document 级别监听，使用 capture 阶段以优先处理
|
||||
document.addEventListener('wheel', handleWheel, { capture: true, passive: false });
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('wheel', handleWheel, { capture: true });
|
||||
};
|
||||
}, [activeId]);
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
setActiveId(null);
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
const oldIndex = fields.findIndex((f) => f.id === active.id);
|
||||
const newIndex = fields.findIndex((f) => f.id === over.id);
|
||||
if (oldIndex !== -1 && newIndex !== -1) {
|
||||
onReorder(oldIndex, newIndex);
|
||||
}
|
||||
};
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
if (containerRef.current) {
|
||||
setScrollTop(containerRef.current.scrollTop);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const isVirtual = fields.length > VISIBLE_COUNT;
|
||||
const totalHeight = fields.length * ROW_HEIGHT;
|
||||
const fixedContainerHeight = VISIBLE_COUNT * ROW_HEIGHT;
|
||||
// 少于 5 条时高度自适应，5 条及以上固定为 5 条的高度
|
||||
const containerStyle =
|
||||
fields.length < VISIBLE_COUNT
|
||||
? { height: 'auto' as const, overflowY: 'visible' as const }
|
||||
: { height: fixedContainerHeight, overflowY: 'auto' as const };
|
||||
|
||||
// 虚拟列表：计算可见范围（拖拽时扩展预加载范围）
|
||||
const currentOverscan = activeId ? DRAG_OVERSCAN : OVERSCAN;
|
||||
const visibleStart = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - currentOverscan);
|
||||
const visibleEnd = Math.min(
|
||||
fields.length,
|
||||
Math.ceil((scrollTop + fixedContainerHeight) / ROW_HEIGHT) + currentOverscan,
|
||||
);
|
||||
const visibleFields = isVirtual ? fields.slice(visibleStart, visibleEnd) : fields;
|
||||
|
||||
// 查找拖拽中的项目（用于 DragOverlay）
|
||||
const activeField = activeId ? fields.find((f) => f.id === activeId) : null;
|
||||
|
||||
const isMaxReached = fields.length >= MAX_FIELDS;
|
||||
|
||||
// 编辑模式下，保存时更新原规则
|
||||
const handleUpdateRule = useCallback(() => {
|
||||
if (!editingRule) return;
|
||||
|
||||
const updated = ruleStorage.update(editingRule.id, {
|
||||
fields: fields,
|
||||
});
|
||||
|
||||
if (updated) {
|
||||
toast.success(t('testDataGenerator_ruleUpdated'));
|
||||
onRuleSaved?.();
|
||||
}
|
||||
}, [editingRule, fields, t, onRuleSaved]);
|
||||
|
||||
// 新建规则或另存为
|
||||
const handleSave = useCallback(
|
||||
(overwrite = false) => {
|
||||
if (!ruleName.trim()) return;
|
||||
|
||||
const trimmedName = ruleName.trim();
|
||||
|
||||
// 检查名称是否重复
|
||||
if (!overwrite) {
|
||||
const existingRule = ruleStorage.getByName(trimmedName);
|
||||
if (existingRule) {
|
||||
setShowConfirmOverwrite(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const newRule = ruleStorage.save({
|
||||
name: trimmedName,
|
||||
description: ruleDescription.trim(),
|
||||
fields: fields,
|
||||
});
|
||||
|
||||
if (newRule) {
|
||||
setShowSaveDialog(false);
|
||||
setShowConfirmOverwrite(false);
|
||||
setRuleName('');
|
||||
setRuleDescription('');
|
||||
toast.success(t('testDataGenerator_ruleSaved'));
|
||||
onRuleSaved?.();
|
||||
}
|
||||
},
|
||||
[ruleName, ruleDescription, fields, t, onRuleSaved],
|
||||
);
|
||||
|
||||
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}/{MAX_FIELDS})
|
||||
</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
{editingRule ? (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleUpdateRule}
|
||||
disabled={fields.length === 0}
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
title={`${t('testDataGenerator_editing')}: ${editingRule.name}`}
|
||||
>
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
{t('testDataGenerator_updateRule')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowSaveDialog(true)}
|
||||
disabled={fields.length === 0}
|
||||
className="h-8 px-2"
|
||||
>
|
||||
{t('testDataGenerator_saveAs')}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowSaveDialog(true)}
|
||||
disabled={fields.length === 0}
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
>
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
{t('testDataGenerator_saveRule')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onAdd}
|
||||
disabled={isMaxReached}
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
{t('testDataGenerator_addField')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 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>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext items={fields.map((f) => f.id)} strategy={verticalListSortingStrategy}>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="overflow-y-auto"
|
||||
style={containerStyle}
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
{isVirtual ? (
|
||||
/* 虚拟滚动模式 */
|
||||
<div style={{ height: totalHeight, position: 'relative' }}>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: visibleStart * ROW_HEIGHT,
|
||||
left: 0,
|
||||
right: 0,
|
||||
}}
|
||||
>
|
||||
{visibleFields.map((field, vi) => {
|
||||
const realIndex = fields.findIndex((f) => f.id === field.id);
|
||||
const isLast = visibleStart + vi === fields.length - 1;
|
||||
return (
|
||||
<div
|
||||
key={field.id}
|
||||
style={{
|
||||
height: ROW_HEIGHT,
|
||||
paddingBottom: isLast ? 0 : ROW_GAP,
|
||||
}}
|
||||
>
|
||||
<SortableFieldItem
|
||||
field={field}
|
||||
onEdit={() => onEdit(realIndex)}
|
||||
onRemove={() => onRemove(realIndex)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* 普通模式（≤5 条） */
|
||||
<div className="space-y-2">
|
||||
{fields.map((field, index) => (
|
||||
<SortableFieldItem
|
||||
key={field.id}
|
||||
field={field}
|
||||
onEdit={() => onEdit(index)}
|
||||
onRemove={() => onRemove(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SortableContext>
|
||||
<DragOverlay>
|
||||
{activeField ? (
|
||||
<div className="rounded-lg border border-primary bg-background shadow-lg opacity-90">
|
||||
<div className="flex items-center gap-2 h-full px-3 py-2">
|
||||
<div className="p-1">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<FieldItem field={activeField} onClick={() => {}} />
|
||||
</div>
|
||||
<div className="h-8 w-8 shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 保存规则对话框 */}
|
||||
<Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 pt-2 pb-4 space-y-4">
|
||||
<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>
|
||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||
<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>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 覆盖确认对话框 */}
|
||||
<Dialog open={showConfirmOverwrite} onOpenChange={setShowConfirmOverwrite}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('testDataGenerator_ruleNameDuplicate')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowConfirmOverwrite(false)}>
|
||||
{t('testDataGenerator_cancel')}
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => handleSave(true)}>
|
||||
{t('testDataGenerator_overwrite')}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</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,91 @@
|
||||
/**
|
||||
* 生成选项组件
|
||||
* 配置生成数量、数据格式等选项
|
||||
*/
|
||||
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { Input } from '@/components/ui/input';
|
||||
|
||||
interface GenerateOptionsProps {
|
||||
count: number;
|
||||
onCountChange: (count: number) => void;
|
||||
format: 'json' | 'csv';
|
||||
onFormatChange: (format: 'json' | 'csv') => void;
|
||||
}
|
||||
|
||||
const COUNT_PRESETS = [50, 100, 1000, 5000, 10000];
|
||||
|
||||
const FORMAT_OPTIONS = [
|
||||
{ value: 'json' as const, label: 'JSON' },
|
||||
{ value: 'csv' as const, label: 'CSV' },
|
||||
];
|
||||
|
||||
export default function GenerateOptions({
|
||||
count,
|
||||
onCountChange,
|
||||
format,
|
||||
onFormatChange,
|
||||
}: 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>
|
||||
<div className="flex gap-2">
|
||||
{FORMAT_OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => onFormatChange(option.value)}
|
||||
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
format === option.value
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
/**
|
||||
* 生成器配置组件
|
||||
* 根据生成器参数定义动态渲染配置表单
|
||||
*/
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
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 { t } = useI18n('testDataGenerator');
|
||||
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">
|
||||
{t('testDataGenerator_noGeneratorParams')}
|
||||
</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
|
||||
? t('testDataGenerator_enabled')
|
||||
: t('testDataGenerator_disabled')}
|
||||
</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={t('testDataGenerator_commaSeparated')}
|
||||
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,324 @@
|
||||
/**
|
||||
* 规则管理器组件
|
||||
* 管理测试数据生成规则的加载、删除等操作
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
Search,
|
||||
Upload,
|
||||
Download,
|
||||
Trash2,
|
||||
Copy,
|
||||
Edit,
|
||||
Clock,
|
||||
Tag,
|
||||
Loader2,
|
||||
FolderOpen,
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
interface RuleManagerProps {
|
||||
onLoad: (fields: FieldConfig[]) => void;
|
||||
onEdit?: (rule: DataRule) => void;
|
||||
onRulesChanged?: () => void;
|
||||
}
|
||||
|
||||
export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleManagerProps) {
|
||||
const { t, i18n } = useI18n('testDataGenerator');
|
||||
const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
|
||||
const [ruleToDelete, setRuleToDelete] = useState<DataRule | null>(null);
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [isExporting, setIsExporting] = useState(false);
|
||||
|
||||
const loadRules = useCallback(() => {
|
||||
setRules(ruleStorage.getAll());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedSearchQuery(searchQuery);
|
||||
}, 250);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery]);
|
||||
|
||||
const filteredRules = useMemo(() => {
|
||||
if (!debouncedSearchQuery) return rules;
|
||||
const query = debouncedSearchQuery.toLowerCase();
|
||||
return rules.filter(
|
||||
(rule) =>
|
||||
rule.name.toLowerCase().includes(query) || rule.description?.toLowerCase().includes(query),
|
||||
);
|
||||
}, [rules, debouncedSearchQuery]);
|
||||
|
||||
const handleLoad = useCallback(
|
||||
(rule: DataRule) => {
|
||||
onLoad(rule.fields);
|
||||
ruleStorage.recordUse(rule.id);
|
||||
loadRules();
|
||||
toast.success(t('testDataGenerator_ruleLoaded', { name: rule.name }));
|
||||
},
|
||||
[onLoad, loadRules, t],
|
||||
);
|
||||
|
||||
const handleDelete = useCallback(() => {
|
||||
if (!ruleToDelete) return;
|
||||
ruleStorage.deleteRule(ruleToDelete.id);
|
||||
loadRules();
|
||||
setRuleToDelete(null);
|
||||
toast.success(t('testDataGenerator_ruleDeleted'));
|
||||
onRulesChanged?.();
|
||||
}, [ruleToDelete, loadRules, t, onRulesChanged]);
|
||||
|
||||
const handleDuplicate = useCallback(
|
||||
(id: string) => {
|
||||
const result = ruleStorage.duplicate(id, t('testDataGenerator_ruleCopySuffix'));
|
||||
if (result) {
|
||||
loadRules();
|
||||
toast.success(t('testDataGenerator_ruleDuplicated'));
|
||||
onRulesChanged?.();
|
||||
}
|
||||
},
|
||||
[loadRules, t, onRulesChanged],
|
||||
);
|
||||
|
||||
const handleEdit = useCallback(
|
||||
(rule: DataRule) => {
|
||||
onEdit?.(rule);
|
||||
},
|
||||
[onEdit],
|
||||
);
|
||||
|
||||
const handleExport = useCallback(() => {
|
||||
try {
|
||||
setIsExporting(true);
|
||||
const json = ruleStorage.exportRules();
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
try {
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'test-data-rules.json';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
} finally {
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
toast.success(t('testDataGenerator_exportSuccess'));
|
||||
} catch (error) {
|
||||
console.error('[RuleManager] 导出失败:', error);
|
||||
toast.error(t('testDataGenerator_exportFailed'));
|
||||
} finally {
|
||||
setIsExporting(false);
|
||||
}
|
||||
}, [t]);
|
||||
|
||||
const handleImport = useCallback(() => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
input.onchange = async (e) => {
|
||||
try {
|
||||
setIsImporting(true);
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const text = await file.text();
|
||||
const result = ruleStorage.importRules(text);
|
||||
|
||||
if (result.success > 0) {
|
||||
toast.success(t('testDataGenerator_importSuccess', { count: result.success }));
|
||||
}
|
||||
|
||||
if (result.failed > 0) {
|
||||
toast.error(t('testDataGenerator_importFailed', { count: result.failed }));
|
||||
console.warn('[RuleManager] 导入警告:', result.errors);
|
||||
}
|
||||
|
||||
loadRules();
|
||||
onRulesChanged?.();
|
||||
} catch (error) {
|
||||
console.error('[RuleManager] 导入失败:', error);
|
||||
toast.error(t('testDataGenerator_importFailed'));
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
}, [loadRules, t, onRulesChanged]);
|
||||
|
||||
const formatDate = useCallback(
|
||||
(timestamp: number) => {
|
||||
return new Date(timestamp).toLocaleDateString(i18n.language || 'zh-CN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
},
|
||||
[i18n.language],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 删除确认对话框 */}
|
||||
<Dialog open={!!ruleToDelete} onOpenChange={() => setRuleToDelete(null)}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('testDataGenerator_confirmDeleteDescription', { name: ruleToDelete?.name ?? '' })}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={() => setRuleToDelete(null)}>
|
||||
{t('testDataGenerator_cancel')}
|
||||
</Button>
|
||||
<Button variant="destructive" size="sm" onClick={handleDelete}>
|
||||
{t('testDataGenerator_confirm')}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 工具栏 */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleImport}
|
||||
disabled={isImporting}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
{isImporting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Upload className="h-4 w-4" />
|
||||
)}
|
||||
{t('testDataGenerator_import')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleExport}
|
||||
disabled={isExporting || rules.length === 0}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
{isExporting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-4 w-4" />
|
||||
)}
|
||||
{t('testDataGenerator_export')}
|
||||
</Button>
|
||||
</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.slice(0, 20))}
|
||||
placeholder={t('testDataGenerator_searchRules')}
|
||||
className="pl-9 pr-24 h-9"
|
||||
maxLength={20}
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none">
|
||||
{t('testDataGenerator_ruleCount', { count: rules.length, max: 20 })}
|
||||
</span>
|
||||
</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">
|
||||
{debouncedSearchQuery
|
||||
? 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')}
|
||||
>
|
||||
<FolderOpen className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => handleEdit(rule)}
|
||||
title={t('testDataGenerator_edit')}
|
||||
>
|
||||
<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={() => setRuleToDelete(rule)}
|
||||
title={t('testDataGenerator_delete')}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
// Mock dependencies
|
||||
vi.mock('@/utils/ruleStorage', () => ({
|
||||
getAll: vi.fn(() => []),
|
||||
save: vi.fn(),
|
||||
deleteRule: vi.fn(),
|
||||
duplicate: vi.fn(),
|
||||
recordUse: vi.fn(),
|
||||
search: vi.fn(() => []),
|
||||
exportRules: vi.fn(() => '[]'),
|
||||
importRules: vi.fn(() => ({ success: 0, failed: 0, errors: [] })),
|
||||
}));
|
||||
|
||||
vi.mock('sonner', () => ({
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
import RuleManager from '../RuleManager';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import { toast } from 'sonner';
|
||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
const mockedRuleStorage = vi.mocked(ruleStorage);
|
||||
const mockedToast = vi.mocked(toast);
|
||||
|
||||
const mockFields: FieldConfig[] = [
|
||||
{
|
||||
id: 'field-1',
|
||||
name: 'name',
|
||||
generatorId: 'string',
|
||||
params: {},
|
||||
required: true,
|
||||
nullRate: 0,
|
||||
unique: false,
|
||||
},
|
||||
];
|
||||
|
||||
const mockRule: DataRule = {
|
||||
id: 'rule-1',
|
||||
name: 'Test Rule',
|
||||
description: 'Test description',
|
||||
fields: mockFields,
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
useCount: 0,
|
||||
};
|
||||
|
||||
describe('RuleManager', () => {
|
||||
const defaultProps = {
|
||||
onLoad: vi.fn(),
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockedRuleStorage.getAll.mockReturnValue([]);
|
||||
});
|
||||
|
||||
it('should render empty state when no rules', () => {
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('暂无保存的规则')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render rule list when rules exist', () => {
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Test Rule')).toBeInTheDocument();
|
||||
expect(screen.getByText('Test description')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should load rule when load button clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
const loadButton = screen.getByTitle('加载');
|
||||
await user.click(loadButton);
|
||||
|
||||
expect(defaultProps.onLoad).toHaveBeenCalledWith(mockFields);
|
||||
expect(mockedRuleStorage.recordUse).toHaveBeenCalledWith('rule-1');
|
||||
// Note: t() mock doesn't handle placeholders, so we just check it was called
|
||||
expect(mockedToast.success).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should show delete confirmation dialog', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
const deleteButton = screen.getByTitle('删除');
|
||||
await user.click(deleteButton);
|
||||
|
||||
expect(screen.getByText(/确定要删除规则/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should delete rule after confirmation', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// Open delete dialog
|
||||
await user.click(screen.getByTitle('删除'));
|
||||
|
||||
// Confirm delete
|
||||
await user.click(screen.getByText('确认'));
|
||||
|
||||
expect(mockedRuleStorage.deleteRule).toHaveBeenCalledWith('rule-1');
|
||||
expect(mockedToast.success).toHaveBeenCalledWith('规则已删除');
|
||||
});
|
||||
|
||||
it('should duplicate rule when duplicate button clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
mockedRuleStorage.duplicate.mockReturnValue({
|
||||
...mockRule,
|
||||
id: 'rule-2',
|
||||
name: 'Test Rule（副本）',
|
||||
});
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
await user.click(screen.getByTitle('复制'));
|
||||
|
||||
expect(mockedRuleStorage.duplicate).toHaveBeenCalledWith('rule-1', '（副本）');
|
||||
expect(mockedToast.success).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should update search input value', async () => {
|
||||
const rules = [mockRule, { ...mockRule, id: 'rule-2', name: 'Another Rule' }];
|
||||
mockedRuleStorage.getAll.mockReturnValue(rules);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// Initially both rules should be visible
|
||||
expect(screen.getByText('Test Rule')).toBeInTheDocument();
|
||||
expect(screen.getByText('Another Rule')).toBeInTheDocument();
|
||||
|
||||
// Verify search input exists and is interactive
|
||||
const searchInput = screen.getByPlaceholderText('搜索规则...');
|
||||
expect(searchInput).toBeInTheDocument();
|
||||
expect(searchInput).toHaveValue('');
|
||||
});
|
||||
|
||||
it('should call exportRules when export button clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// Mock URL methods and body methods after render to avoid interfering with createRoot
|
||||
const mockCreateObjectURL = vi.fn(() => 'blob:mock');
|
||||
const mockRevokeObjectURL = vi.fn();
|
||||
vi.spyOn(URL, 'createObjectURL').mockImplementation(mockCreateObjectURL);
|
||||
vi.spyOn(URL, 'revokeObjectURL').mockImplementation(mockRevokeObjectURL);
|
||||
vi.spyOn(document.body, 'appendChild').mockImplementation(() => null as unknown as Node);
|
||||
vi.spyOn(document.body, 'removeChild').mockImplementation(() => null as unknown as Node);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const exportButton = buttons.find((btn) => btn.textContent?.includes('导出'));
|
||||
expect(exportButton).toBeDefined();
|
||||
|
||||
await user.click(exportButton!);
|
||||
|
||||
expect(mockedRuleStorage.exportRules).toHaveBeenCalled();
|
||||
expect(mockCreateObjectURL).toHaveBeenCalled();
|
||||
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('should show field count for each rule', () => {
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// The component shows "{count} 字段" format
|
||||
expect(screen.getByText(/字段/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* 数据生成器 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) {
|
||||
return workerRef.current;
|
||||
}
|
||||
|
||||
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(err.message || 'Worker 运行错误');
|
||||
setProgress(null);
|
||||
// Worker 出错后销毁，下次重新创建
|
||||
workerRef.current?.terminate();
|
||||
workerRef.current = 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,306 @@
|
||||
/**
|
||||
* 测试数据生成器主页面
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useRef, useEffect } 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, GenerateResult, DataRule } from '@/types/testDataGenerator';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
// 生成唯一 ID 的辅助函数
|
||||
function generateId(): string {
|
||||
return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
import FieldList, { MAX_FIELDS } 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 [isEditorOpen, setIsEditorOpen] = useState(false);
|
||||
const [editingRule, setEditingRule] = useState<DataRule | null>(null);
|
||||
|
||||
// 生成选项
|
||||
const [count, setCount] = useState(100);
|
||||
const [format, setFormat] = useState<'json' | 'csv'>('json');
|
||||
|
||||
// 当前标签页
|
||||
const [activeTab, setActiveTab] = useState<TabType>('fields');
|
||||
|
||||
// 生成完成时显示 toast 提示（避免重复触发）
|
||||
const lastToastResultRef = useRef<GenerateResult | null>(null);
|
||||
|
||||
// 生成完成时显示 toast 提示（避免重复触发）
|
||||
useEffect(() => {
|
||||
if (result?.success && result.stats && result !== lastToastResultRef.current) {
|
||||
lastToastResultRef.current = result;
|
||||
toast.success(t('testDataGenerator_generateSuccess'), {
|
||||
description: `${result.stats.total} ${t('testDataGenerator_records')}`,
|
||||
});
|
||||
}
|
||||
}, [result, t]);
|
||||
|
||||
// 添加新字段
|
||||
const handleAddField = useCallback(() => {
|
||||
setFields((prev) => {
|
||||
if (prev.length >= MAX_FIELDS) return prev;
|
||||
const newField: FieldConfig = {
|
||||
id: generateId(),
|
||||
name: `field${prev.length + 1}`,
|
||||
generatorId: 'chineseName',
|
||||
params: {},
|
||||
required: true,
|
||||
nullRate: 0,
|
||||
unique: false,
|
||||
};
|
||||
setSelectedIndex(prev.length);
|
||||
return [...prev, newField];
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 更新字段
|
||||
const handleUpdateField = useCallback((index: number, field: FieldConfig) => {
|
||||
setFields((prev) => {
|
||||
const newFields = [...prev];
|
||||
newFields[index] = field;
|
||||
return newFields;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 删除字段
|
||||
const handleRemoveField = useCallback((index: number) => {
|
||||
setFields((prev) => prev.filter((_, i) => i !== index));
|
||||
setSelectedIndex((prev) => {
|
||||
if (prev === index) return null;
|
||||
if (prev !== null && prev > index) return prev - 1;
|
||||
return prev;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 拖拽排序
|
||||
const handleReorder = useCallback((oldIndex: number, newIndex: number) => {
|
||||
setFields((prev) => {
|
||||
const newFields = [...prev];
|
||||
const [moved] = newFields.splice(oldIndex, 1);
|
||||
newFields.splice(newIndex, 0, moved);
|
||||
return newFields;
|
||||
});
|
||||
setSelectedIndex((prev) => {
|
||||
if (prev === oldIndex) return newIndex;
|
||||
if (prev !== null) {
|
||||
if (oldIndex < prev && newIndex >= prev) return prev - 1;
|
||||
if (oldIndex > prev && newIndex <= prev) return prev + 1;
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 加载规则
|
||||
const handleLoadRule = useCallback(
|
||||
(loadedFields: FieldConfig[]) => {
|
||||
setFields(loadedFields);
|
||||
setSelectedIndex(null);
|
||||
setEditingRule(null);
|
||||
clearResult();
|
||||
},
|
||||
[clearResult],
|
||||
);
|
||||
|
||||
// 编辑规则
|
||||
const handleEditRule = useCallback(
|
||||
(rule: DataRule) => {
|
||||
setFields(rule.fields);
|
||||
setSelectedIndex(null);
|
||||
setEditingRule(rule);
|
||||
setActiveTab('fields');
|
||||
clearResult();
|
||||
toast.success(t('testDataGenerator_editingRule', { name: rule.name }));
|
||||
},
|
||||
[clearResult, t],
|
||||
);
|
||||
|
||||
// 保存规则成功后清除编辑状态
|
||||
const handleRuleSaved = useCallback(() => {
|
||||
setEditingRule(null);
|
||||
}, []);
|
||||
|
||||
// 开始生成
|
||||
const handleGenerate = useCallback(() => {
|
||||
if (fields.length === 0) return;
|
||||
generate(fields, count, format === 'csv');
|
||||
}, [fields, count, format, generate]);
|
||||
|
||||
// 获取选中的字段（-1 或 null 表示未选中）
|
||||
const selectedField = selectedIndex !== null && selectedIndex >= 0 ? fields[selectedIndex] : null;
|
||||
|
||||
// 打开字段编辑器
|
||||
const handleOpenEditor = useCallback((index: number) => {
|
||||
setSelectedIndex(index);
|
||||
setIsEditorOpen(true);
|
||||
}, []);
|
||||
|
||||
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="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="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<FieldList
|
||||
fields={fields}
|
||||
onUpdate={handleUpdateField}
|
||||
onRemove={handleRemoveField}
|
||||
onAdd={handleAddField}
|
||||
onEdit={handleOpenEditor}
|
||||
onReorder={handleReorder}
|
||||
editingRule={editingRule}
|
||||
onRuleSaved={handleRuleSaved}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 规则管理标签页 */}
|
||||
{activeTab === 'rules' && (
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<RuleManager onLoad={handleLoadRule} onEdit={handleEditRule} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成选项 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<GenerateOptions
|
||||
count={count}
|
||||
onCountChange={setCount}
|
||||
format={format}
|
||||
onFormatChange={setFormat}
|
||||
/>
|
||||
</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 && !result.success) ||
|
||||
(result?.warnings && result.warnings.length > 0) ||
|
||||
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-[280px]">
|
||||
<DataPreview fields={fields} />
|
||||
</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>
|
||||
|
||||
{/* 字段编辑弹窗 */}
|
||||
<Dialog open={isEditorOpen} onOpenChange={setIsEditorOpen}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="w-[calc(100vw-2rem)] max-w-[520px] max-h-[calc(100vh-2rem)] p-0 pt-6 flex flex-col"
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
||||
{selectedField && selectedIndex !== null && (
|
||||
<FieldEditor
|
||||
field={selectedField}
|
||||
onChange={(updatedField) => handleUpdateField(selectedIndex, updatedField)}
|
||||
allFieldNames={fields.map((f) => f.name)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={() => setIsEditorOpen(false)}>
|
||||
{t('testDataGenerator_cancel')}
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => setIsEditorOpen(false)}>
|
||||
{t('testDataGenerator_done')}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user