develop (#68)
* docs(AGENTS.md): 添加 Git Commit 必须使用中文描述的规范 * docs: 更新测试数据生成器功能设计文档 * refactor: 删除死代码 * docs: 统一测试数据生成器文档，移除 SQL/TypeScript 导出，修复接口命名不一致 * feat: 实现测试数据生成器功能 * docs: 更新 README 和 AGENTS 文档，补充测试数据生成器模块说明
This commit is contained in:
LingandRX
@@ -26,10 +26,16 @@ const DialogOverlay = React.forwardRef<
|
||||
));
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
|
||||
interface DialogContentProps extends React.ComponentPropsWithoutRef<
|
||||
typeof DialogPrimitive.Content
|
||||
> {
|
||||
showCloseButton?: boolean;
|
||||
}
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
DialogContentProps
|
||||
>(({ className, children, showCloseButton = true, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
@@ -41,10 +47,12 @@ const DialogContent = React.forwardRef<
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
));
|
||||
|
||||
@@ -9,8 +9,8 @@ import {
|
||||
|
||||
describe('features', () => {
|
||||
describe('FEATURES', () => {
|
||||
it('should have 9 features defined', () => {
|
||||
expect(FEATURES).toHaveLength(9);
|
||||
it('should have 10 features defined', () => {
|
||||
expect(FEATURES).toHaveLength(10);
|
||||
});
|
||||
|
||||
it('should have all required properties for each feature', () => {
|
||||
@@ -95,7 +95,7 @@ describe('features', () => {
|
||||
describe('getAllFeatureKeys', () => {
|
||||
it('should return all feature keys', () => {
|
||||
const allKeys = getAllFeatureKeys();
|
||||
expect(allKeys).toHaveLength(9);
|
||||
expect(allKeys).toHaveLength(10);
|
||||
expect(allKeys).toContain('dashboard');
|
||||
expect(allKeys).toContain('timestamp');
|
||||
expect(allKeys).toContain('storageCleaner');
|
||||
@@ -105,6 +105,7 @@ describe('features', () => {
|
||||
expect(allKeys).toContain('jsonDiff');
|
||||
expect(allKeys).toContain('base64Converter');
|
||||
expect(allKeys).toContain('rightClickRestorer');
|
||||
expect(allKeys).toContain('testDataGenerator');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -121,9 +122,9 @@ describe('features', () => {
|
||||
expect(pageOrder).toContain('qrCode');
|
||||
});
|
||||
|
||||
it('should have 8 items in page order', () => {
|
||||
it('should have 9 items in page order', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toHaveLength(8);
|
||||
expect(pageOrder).toHaveLength(9);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
GitCompareArrows,
|
||||
ArrowLeftRight,
|
||||
MousePointerClick,
|
||||
FileSpreadsheet,
|
||||
} from 'lucide-react';
|
||||
|
||||
export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
|
||||
@@ -24,6 +25,7 @@ const JwtPage = lazy(() => import('@/pages/Jwt'));
|
||||
const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
|
||||
const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
|
||||
const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
|
||||
const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
|
||||
|
||||
export interface FeatureConfig {
|
||||
key: PageType;
|
||||
@@ -155,6 +157,19 @@ export const FEATURES: FeatureConfig[] = [
|
||||
tab: RightClickRestorerPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'testDataGenerator',
|
||||
labelKey: 'testDataGenerator_title',
|
||||
descriptionKey: 'testDataGenerator_description',
|
||||
themeColorKey: 'warning',
|
||||
icon: FileSpreadsheet,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: TestDataGeneratorPage,
|
||||
sidepanel: TestDataGeneratorPage,
|
||||
tab: TestDataGeneratorPage,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export function getFeatureByKey(key: PageType): FeatureConfig | undefined {
|
||||
|
||||
@@ -0,0 +1,227 @@
|
||||
/**
|
||||
* 基础类型生成器
|
||||
* 包含：随机整数、随机浮点数、随机字符串、从列表选择
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 随机整数生成器
|
||||
*/
|
||||
export const randomIntGenerator: GeneratorDefinition = {
|
||||
id: 'randomInt',
|
||||
name: '随机整数',
|
||||
description: '生成指定范围内的随机整数',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小值',
|
||||
type: 'number',
|
||||
defaultValue: 0,
|
||||
description: '整数最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大值',
|
||||
type: 'number',
|
||||
defaultValue: 100,
|
||||
description: '整数最大值',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 100;
|
||||
return String(randomInt(min, max));
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 100;
|
||||
const range = max - min + 1;
|
||||
return String(min + (index % range));
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 随机浮点数生成器
|
||||
*/
|
||||
export const randomFloat: GeneratorDefinition = {
|
||||
id: 'randomFloat',
|
||||
name: '随机浮点数',
|
||||
description: '生成指定范围内的随机浮点数',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小值',
|
||||
type: 'number',
|
||||
defaultValue: 0,
|
||||
description: '浮点数最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大值',
|
||||
type: 'number',
|
||||
defaultValue: 100,
|
||||
description: '浮点数最大值',
|
||||
},
|
||||
{
|
||||
key: 'decimals',
|
||||
label: '小数位数',
|
||||
type: 'number',
|
||||
defaultValue: 2,
|
||||
min: 0,
|
||||
max: 10,
|
||||
description: '小数位数',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 100;
|
||||
const decimals = (params.decimals as number) ?? 2;
|
||||
const value = min + Math.random() * (max - min);
|
||||
return value.toFixed(decimals);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 随机字符串生成器
|
||||
*/
|
||||
export const randomString: GeneratorDefinition = {
|
||||
id: 'randomString',
|
||||
name: '随机字符串',
|
||||
description: '生成指定长度的随机字符串',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'length',
|
||||
label: '字符串长度',
|
||||
type: 'number',
|
||||
defaultValue: 10,
|
||||
min: 1,
|
||||
max: 100,
|
||||
description: '字符串长度',
|
||||
},
|
||||
{
|
||||
key: 'charset',
|
||||
label: '字符集',
|
||||
type: 'select',
|
||||
defaultValue: 'alphanumeric',
|
||||
description: '使用的字符集',
|
||||
options: [
|
||||
{ label: '字母数字', value: 'alphanumeric' },
|
||||
{ label: '仅字母', value: 'alpha' },
|
||||
{ label: '仅数字', value: 'numeric' },
|
||||
{ label: '小写字母', value: 'lowercase' },
|
||||
{ label: '大写字母', value: 'uppercase' },
|
||||
{ label: '十六进制', value: 'hex' },
|
||||
{ label: 'Base64', value: 'base64' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const length = (params.length as number) || 10;
|
||||
const charset = (params.charset as string) || 'alphanumeric';
|
||||
|
||||
const charsets: Record<string, string> = {
|
||||
alphanumeric: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
|
||||
alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
|
||||
numeric: '0123456789',
|
||||
lowercase: 'abcdefghijklmnopqrstuvwxyz',
|
||||
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
|
||||
hex: '0123456789abcdef',
|
||||
base64: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
|
||||
};
|
||||
|
||||
const chars = charsets[charset] || charsets.alphanumeric;
|
||||
let result = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return result;
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const length = (params.length as number) || 10;
|
||||
const charset = (params.charset as string) || 'alphanumeric';
|
||||
|
||||
const charsets: Record<string, string> = {
|
||||
alphanumeric: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
|
||||
alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
|
||||
numeric: '0123456789',
|
||||
lowercase: 'abcdefghijklmnopqrstuvwxyz',
|
||||
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
|
||||
hex: '0123456789abcdef',
|
||||
base64: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
|
||||
};
|
||||
|
||||
const chars = charsets[charset] || charsets.alphanumeric;
|
||||
const base = String(index).padStart(length, '0');
|
||||
let result = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
const charIndex = parseInt(base[i]) || 0;
|
||||
result += chars[charIndex % chars.length];
|
||||
}
|
||||
return result;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 从列表选择生成器
|
||||
*/
|
||||
export const fromList: GeneratorDefinition = {
|
||||
id: 'fromList',
|
||||
name: '从列表选择',
|
||||
description: '从自定义列表中随机选择',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'values',
|
||||
label: '列表值',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
description: '列表值，用逗号分隔',
|
||||
placeholder: '值1,值2,值3',
|
||||
},
|
||||
{
|
||||
key: 'allowDuplicate',
|
||||
label: '允许重复',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否允许重复选择',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const valuesStr = (params.values as string) || '';
|
||||
const values = valuesStr
|
||||
.split(',')
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v);
|
||||
|
||||
if (values.length === 0) {
|
||||
return '（请配置列表值）';
|
||||
}
|
||||
|
||||
return randomPick(values);
|
||||
},
|
||||
};
|
||||
|
||||
export const basicGenerators: GeneratorDefinition[] = [
|
||||
randomIntGenerator,
|
||||
randomFloat,
|
||||
randomString,
|
||||
fromList,
|
||||
];
|
||||
@@ -0,0 +1,561 @@
|
||||
/**
|
||||
* 业务数据生成器
|
||||
* 包含：订单号、价格、日期、状态、数量、评分、折扣、库存
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化日期
|
||||
*/
|
||||
function formatDate(date: Date, format: string): string {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return format
|
||||
.replace('YYYY', String(year))
|
||||
.replace('MM', month)
|
||||
.replace('DD', day)
|
||||
.replace('HH', hours)
|
||||
.replace('mm', minutes)
|
||||
.replace('ss', seconds);
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单号生成器
|
||||
*/
|
||||
export const orderId: GeneratorDefinition = {
|
||||
id: 'orderId',
|
||||
name: '订单号',
|
||||
description: '生成随机订单号',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'prefix',
|
||||
label: '前缀',
|
||||
type: 'string',
|
||||
defaultValue: 'ORD',
|
||||
description: '订单号前缀',
|
||||
placeholder: '请输入前缀',
|
||||
},
|
||||
{
|
||||
key: 'length',
|
||||
label: '数字长度',
|
||||
type: 'number',
|
||||
defaultValue: 10,
|
||||
min: 6,
|
||||
max: 20,
|
||||
description: '订单号数字部分长度',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const prefix = (params.prefix as string) || 'ORD';
|
||||
const length = (params.length as number) || 10;
|
||||
const maxNum = Math.pow(10, length) - 1;
|
||||
const num = String(randomInt(0, maxNum)).padStart(length, '0');
|
||||
return `${prefix}${num}`;
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const prefix = (params.prefix as string) || 'ORD';
|
||||
const length = (params.length as number) || 10;
|
||||
const num = String(index + 1).padStart(length, '0');
|
||||
return `${prefix}${num}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 价格生成器
|
||||
*/
|
||||
export const price: GeneratorDefinition = {
|
||||
id: 'price',
|
||||
name: '价格',
|
||||
description: '生成随机价格',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最低价格',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
description: '价格最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最高价格',
|
||||
type: 'number',
|
||||
defaultValue: 1000,
|
||||
min: 0,
|
||||
description: '价格最大值',
|
||||
},
|
||||
{
|
||||
key: 'decimals',
|
||||
label: '小数位数',
|
||||
type: 'number',
|
||||
defaultValue: 2,
|
||||
min: 0,
|
||||
max: 4,
|
||||
description: '价格小数位数',
|
||||
},
|
||||
{
|
||||
key: 'strategy',
|
||||
label: '生成策略',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '价格生成策略',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '心理定价', value: 'psychological' },
|
||||
{ label: '真实分布', value: 'realistic' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'currency',
|
||||
label: '货币符号',
|
||||
type: 'string',
|
||||
defaultValue: '¥',
|
||||
description: '货币符号',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 1000;
|
||||
const decimals = (params.decimals as number) ?? 2;
|
||||
const strategy = (params.strategy as string) || 'random';
|
||||
const currency = (params.currency as string) || '¥';
|
||||
|
||||
let value: number;
|
||||
if (strategy === 'psychological') {
|
||||
value = generatePsychologicalPrice(min, max);
|
||||
} else if (strategy === 'realistic') {
|
||||
value = generateRealisticPrice(min, max);
|
||||
} else {
|
||||
value = min + Math.random() * (max - min);
|
||||
}
|
||||
|
||||
return `${currency}${value.toFixed(decimals)}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成心理定价（如 9.99, 19.9, 99）
|
||||
*/
|
||||
function generatePsychologicalPrice(min: number, max: number): number {
|
||||
const patterns = [
|
||||
() => {
|
||||
const base = randomInt(Math.ceil(min), Math.floor(max / 10));
|
||||
return base * 10 - 0.01;
|
||||
},
|
||||
() => {
|
||||
const base = randomInt(Math.ceil(min / 10), Math.floor(max / 10));
|
||||
return base * 10 - 1;
|
||||
},
|
||||
() => {
|
||||
const base = randomInt(Math.ceil(min / 100), Math.floor(max / 100));
|
||||
return base * 100 - 1;
|
||||
},
|
||||
];
|
||||
|
||||
let price = randomPick(patterns)();
|
||||
if (price < min) price = min;
|
||||
if (price > max) price = max;
|
||||
return price;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成真实分布价格（对数正态分布）
|
||||
*/
|
||||
function generateRealisticPrice(min: number, max: number): number {
|
||||
const mean = (Math.log(min) + Math.log(max)) / 2;
|
||||
const stdDev = (Math.log(max) - Math.log(min)) / 4;
|
||||
let u = 0,
|
||||
v = 0;
|
||||
while (u === 0) u = Math.random();
|
||||
while (v === 0) v = Math.random();
|
||||
const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
|
||||
const value = Math.exp(mean + num * stdDev);
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期生成器
|
||||
*/
|
||||
export const date: GeneratorDefinition = {
|
||||
id: 'date',
|
||||
name: '日期',
|
||||
description: '生成随机日期',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'startDate',
|
||||
label: '开始日期',
|
||||
type: 'string',
|
||||
defaultValue: '2020-01-01',
|
||||
description: '日期范围开始',
|
||||
placeholder: 'YYYY-MM-DD',
|
||||
},
|
||||
{
|
||||
key: 'endDate',
|
||||
label: '结束日期',
|
||||
type: 'string',
|
||||
defaultValue: '2025-12-31',
|
||||
description: '日期范围结束',
|
||||
placeholder: 'YYYY-MM-DD',
|
||||
},
|
||||
{
|
||||
key: 'format',
|
||||
label: '日期格式',
|
||||
type: 'select',
|
||||
defaultValue: 'YYYY-MM-DD',
|
||||
description: '输出格式',
|
||||
options: [
|
||||
{ label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
|
||||
{ label: 'YYYY/MM/DD', value: 'YYYY/MM/DD' },
|
||||
{ label: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss' },
|
||||
{ label: 'YYYY/MM/DD HH:mm:ss', value: 'YYYY/MM/DD HH:mm:ss' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const startStr = (params.startDate as string) || '2020-01-01';
|
||||
const endStr = (params.endDate as string) || '2025-12-31';
|
||||
const format = (params.format as string) || 'YYYY-MM-DD';
|
||||
|
||||
const start = new Date(startStr).getTime();
|
||||
const end = new Date(endStr).getTime();
|
||||
const randomTime = start + Math.random() * (end - start);
|
||||
const date = new Date(randomTime);
|
||||
|
||||
return formatDate(date, format);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 状态生成器
|
||||
*/
|
||||
export const status: GeneratorDefinition = {
|
||||
id: 'status',
|
||||
name: '状态',
|
||||
description: '生成随机状态',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'type',
|
||||
label: '状态类型',
|
||||
type: 'select',
|
||||
defaultValue: 'order',
|
||||
description: '选择状态类型',
|
||||
options: [
|
||||
{ label: '订单状态', value: 'order' },
|
||||
{ label: '用户状态', value: 'user' },
|
||||
{ label: '审核状态', value: 'review' },
|
||||
{ label: '支付状态', value: 'payment' },
|
||||
{ label: '自定义', value: 'custom' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'customValues',
|
||||
label: '自定义值',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
description: '自定义状态值，用逗号分隔',
|
||||
placeholder: '状态1,状态2,状态3',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const type = (params.type as string) || 'order';
|
||||
|
||||
const statusMap: Record<string, string[]> = {
|
||||
order: ['待付款', '待发货', '已发货', '已完成', '已取消', '已退款'],
|
||||
user: ['活跃', '未激活', '已禁用', '已注销'],
|
||||
review: ['待审核', '审核中', '已通过', '已拒绝'],
|
||||
payment: ['待支付', '支付中', '支付成功', '支付失败', '已退款'],
|
||||
};
|
||||
|
||||
if (type === 'custom') {
|
||||
const customValues = (params.customValues as string) || '';
|
||||
const values = customValues.split(',').filter((v) => v.trim());
|
||||
if (values.length > 0) {
|
||||
return randomPick(values);
|
||||
}
|
||||
return '未知状态';
|
||||
}
|
||||
|
||||
return randomPick(statusMap[type] || statusMap.order);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 数量生成器
|
||||
*/
|
||||
export const quantity: GeneratorDefinition = {
|
||||
id: 'quantity',
|
||||
name: '数量',
|
||||
description: '生成随机数量',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小值',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
description: '数量最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大值',
|
||||
type: 'number',
|
||||
defaultValue: 100,
|
||||
min: 0,
|
||||
description: '数量最大值',
|
||||
},
|
||||
{
|
||||
key: 'distribution',
|
||||
label: '分布方式',
|
||||
type: 'select',
|
||||
defaultValue: 'uniform',
|
||||
description: '数量分布方式',
|
||||
options: [
|
||||
{ label: '均匀分布', value: 'uniform' },
|
||||
{ label: '泊松分布', value: 'poisson' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 100;
|
||||
const distribution = (params.distribution as string) || 'uniform';
|
||||
|
||||
if (distribution === 'poisson') {
|
||||
return String(poissonRandom(Math.floor((min + max) / 2)));
|
||||
}
|
||||
return String(randomInt(min, max));
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 泊松分布随机数
|
||||
*/
|
||||
function poissonRandom(lambda: number): number {
|
||||
const L = Math.exp(-lambda);
|
||||
let k = 0;
|
||||
let p = 1;
|
||||
do {
|
||||
k++;
|
||||
p *= Math.random();
|
||||
} while (p > L);
|
||||
return k - 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* 评分生成器
|
||||
*/
|
||||
export const rating: GeneratorDefinition = {
|
||||
id: 'rating',
|
||||
name: '评分',
|
||||
description: '生成随机评分',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最低分',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
max: 10,
|
||||
description: '评分最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最高分',
|
||||
type: 'number',
|
||||
defaultValue: 5,
|
||||
min: 0,
|
||||
max: 10,
|
||||
description: '评分最大值',
|
||||
},
|
||||
{
|
||||
key: 'decimals',
|
||||
label: '小数位数',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
max: 2,
|
||||
description: '评分小数位数',
|
||||
},
|
||||
{
|
||||
key: 'skewed',
|
||||
label: '偏向高分',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否偏向高分（模拟真实评分分布）',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 5;
|
||||
const decimals = (params.decimals as number) ?? 1;
|
||||
const skewed = params.skewed !== false;
|
||||
|
||||
if (skewed) {
|
||||
return skewedRandom(min, max).toFixed(decimals);
|
||||
}
|
||||
return (min + Math.random() * (max - min)).toFixed(decimals);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 偏向高分的随机数（模拟真实评分分布）
|
||||
*/
|
||||
function skewedRandom(min: number, max: number): number {
|
||||
// 使用 Beta 分布模拟评分偏向
|
||||
const alpha = 3;
|
||||
const beta = 1;
|
||||
let u = 0,
|
||||
v = 0;
|
||||
while (u === 0) u = Math.random();
|
||||
while (v === 0) v = Math.random();
|
||||
const x = Math.pow(u, 1 / alpha) / Math.pow(u, 1 / alpha) + Math.pow(v, 1 / beta);
|
||||
return min + x * (max - min);
|
||||
}
|
||||
|
||||
/**
|
||||
* 折扣生成器
|
||||
*/
|
||||
export const discount: GeneratorDefinition = {
|
||||
id: 'discount',
|
||||
name: '折扣',
|
||||
description: '生成随机折扣',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最低折扣',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
max: 100,
|
||||
description: '折扣最小值（百分比）',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最高折扣',
|
||||
type: 'number',
|
||||
defaultValue: 50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
description: '折扣最大值（百分比）',
|
||||
},
|
||||
{
|
||||
key: 'strategy',
|
||||
label: '生成策略',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '折扣生成策略',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '心理定价', value: 'psychological' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 50;
|
||||
const strategy = (params.strategy as string) || 'random';
|
||||
|
||||
let discount: number;
|
||||
if (strategy === 'psychological') {
|
||||
discount = generatePsychologicalDiscount(min, max);
|
||||
} else {
|
||||
discount = randomInt(min, max);
|
||||
}
|
||||
return `${discount}%`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成心理折扣（如 5%, 10%, 20%, 30%）
|
||||
*/
|
||||
function generatePsychologicalDiscount(min: number, max: number): number {
|
||||
const psychologicalDiscounts = [5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80];
|
||||
const validDiscounts = psychologicalDiscounts.filter((d) => d >= min && d <= max);
|
||||
if (validDiscounts.length > 0) {
|
||||
return randomPick(validDiscounts);
|
||||
}
|
||||
return randomInt(min, max);
|
||||
}
|
||||
|
||||
/**
|
||||
* 库存生成器
|
||||
*/
|
||||
export const stock: GeneratorDefinition = {
|
||||
id: 'stock',
|
||||
name: '库存',
|
||||
description: '生成随机库存数量',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小库存',
|
||||
type: 'number',
|
||||
defaultValue: 0,
|
||||
min: 0,
|
||||
description: '库存最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大库存',
|
||||
type: 'number',
|
||||
defaultValue: 1000,
|
||||
min: 0,
|
||||
description: '库存最大值',
|
||||
},
|
||||
{
|
||||
key: 'allowZero',
|
||||
label: '允许为零',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否允许库存为零',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 1000;
|
||||
const allowZero = params.allowZero !== false;
|
||||
|
||||
if (allowZero) {
|
||||
return String(randomInt(min, max));
|
||||
}
|
||||
return String(randomInt(Math.max(1, min), max));
|
||||
},
|
||||
};
|
||||
|
||||
export const businessGenerators: GeneratorDefinition[] = [
|
||||
orderId,
|
||||
price,
|
||||
date,
|
||||
status,
|
||||
quantity,
|
||||
rating,
|
||||
discount,
|
||||
stock,
|
||||
];
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* 生成器库索引
|
||||
* 导出所有生成器和分类配置
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
|
||||
import { personalGenerators } from './personal';
|
||||
import { businessGenerators } from './business';
|
||||
import { technicalGenerators } from './technical';
|
||||
import { basicGenerators } from './basic';
|
||||
|
||||
/**
|
||||
* 生成器分类配置
|
||||
*/
|
||||
export const generatorCategories: GeneratorCategory[] = [
|
||||
{ id: 'personal', name: '个人信息', icon: 'User' },
|
||||
{ id: 'business', name: '业务数据', icon: 'Briefcase' },
|
||||
{ id: 'technical', name: '技术数据', icon: 'Code' },
|
||||
{ id: 'basic', name: '基础类型', icon: 'Hash' },
|
||||
];
|
||||
|
||||
/**
|
||||
* 所有生成器列表
|
||||
*/
|
||||
export const allGenerators: GeneratorDefinition[] = [
|
||||
...personalGenerators,
|
||||
...businessGenerators,
|
||||
...technicalGenerators,
|
||||
...basicGenerators,
|
||||
];
|
||||
|
||||
/**
|
||||
* 根据 ID 获取生成器
|
||||
*/
|
||||
export function getGeneratorById(id: string): GeneratorDefinition | undefined {
|
||||
return allGenerators.find((g) => g.id === id);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据分类 ID 获取生成器列表
|
||||
*/
|
||||
export function getGeneratorsByCategory(categoryId: string): GeneratorDefinition[] {
|
||||
return allGenerators.filter((g) => g.categoryId === categoryId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索生成器
|
||||
*/
|
||||
export function searchGenerators(query: string): GeneratorDefinition[] {
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return allGenerators.filter(
|
||||
(g) =>
|
||||
g.name.toLowerCase().includes(lowerQuery) ||
|
||||
g.description.toLowerCase().includes(lowerQuery) ||
|
||||
g.id.toLowerCase().includes(lowerQuery),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,465 @@
|
||||
/**
|
||||
* 个人信息生成器
|
||||
* 包含：中文姓名、邮箱、手机号、身份证号、中文地址、年龄
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
// 中文姓氏
|
||||
const SURNAMES = [
|
||||
'王',
|
||||
'李',
|
||||
'张',
|
||||
'刘',
|
||||
'陈',
|
||||
'杨',
|
||||
'赵',
|
||||
'黄',
|
||||
'周',
|
||||
'吴',
|
||||
'徐',
|
||||
'孙',
|
||||
'胡',
|
||||
'朱',
|
||||
'高',
|
||||
'林',
|
||||
'何',
|
||||
'郭',
|
||||
'马',
|
||||
'罗',
|
||||
'梁',
|
||||
'宋',
|
||||
'郑',
|
||||
'谢',
|
||||
'韩',
|
||||
'唐',
|
||||
'冯',
|
||||
'于',
|
||||
'董',
|
||||
'萧',
|
||||
'程',
|
||||
'曹',
|
||||
'袁',
|
||||
'邓',
|
||||
'许',
|
||||
'傅',
|
||||
'沈',
|
||||
'曾',
|
||||
'彭',
|
||||
'吕',
|
||||
'苏',
|
||||
'卢',
|
||||
'蒋',
|
||||
'蔡',
|
||||
'贾',
|
||||
'丁',
|
||||
'魏',
|
||||
'薛',
|
||||
'叶',
|
||||
'阎',
|
||||
];
|
||||
|
||||
// 中文名字常用字
|
||||
const NAME_CHARS = [
|
||||
'伟',
|
||||
'芳',
|
||||
'娜',
|
||||
'秀英',
|
||||
'敏',
|
||||
'静',
|
||||
'丽',
|
||||
'强',
|
||||
'磊',
|
||||
'洋',
|
||||
'艳',
|
||||
'勇',
|
||||
'军',
|
||||
'杰',
|
||||
'娟',
|
||||
'涛',
|
||||
'明',
|
||||
'超',
|
||||
'秀兰',
|
||||
'霞',
|
||||
'平',
|
||||
'刚',
|
||||
'桂英',
|
||||
'文',
|
||||
'华',
|
||||
'飞',
|
||||
'鑫',
|
||||
'浩',
|
||||
'凯',
|
||||
'宁',
|
||||
'建',
|
||||
'峰',
|
||||
'辉',
|
||||
'成',
|
||||
'宇',
|
||||
'博',
|
||||
'泽',
|
||||
'思',
|
||||
'睿',
|
||||
'晨',
|
||||
'阳',
|
||||
'雪',
|
||||
'冰',
|
||||
'琳',
|
||||
'瑶',
|
||||
'婷',
|
||||
'欣',
|
||||
'悦',
|
||||
'佳',
|
||||
'慧',
|
||||
];
|
||||
|
||||
// 邮箱域名
|
||||
const EMAIL_DOMAINS = ['qq.com', '163.com', '126.com', 'gmail.com', 'outlook.com', 'hotmail.com'];
|
||||
|
||||
// 省份
|
||||
const PROVINCES = [
|
||||
'北京市',
|
||||
'天津市',
|
||||
'上海市',
|
||||
'重庆市',
|
||||
'河北省',
|
||||
'山西省',
|
||||
'辽宁省',
|
||||
'吉林省',
|
||||
'黑龙江省',
|
||||
'江苏省',
|
||||
'浙江省',
|
||||
'安徽省',
|
||||
'福建省',
|
||||
'江西省',
|
||||
'山东省',
|
||||
'河南省',
|
||||
'湖北省',
|
||||
'湖南省',
|
||||
'广东省',
|
||||
'海南省',
|
||||
'四川省',
|
||||
'贵州省',
|
||||
'云南省',
|
||||
'陕西省',
|
||||
'甘肃省',
|
||||
'青海省',
|
||||
'台湾省',
|
||||
'内蒙古自治区',
|
||||
'广西壮族自治区',
|
||||
'西藏自治区',
|
||||
'宁夏回族自治区',
|
||||
'新疆维吾尔自治区',
|
||||
];
|
||||
|
||||
// 城市
|
||||
const CITIES: Record<string, string[]> = {
|
||||
北京市: ['东城区', '西城区', '朝阳区', '海淀区'],
|
||||
上海市: ['黄浦区', '徐汇区', '长宁区', '静安区'],
|
||||
广东省: ['广州市', '深圳市', '东莞市', '佛山市'],
|
||||
浙江省: ['杭州市', '宁波市', '温州市', '嘉兴市'],
|
||||
江苏省: ['南京市', '苏州市', '无锡市', '常州市'],
|
||||
四川省: ['成都市', '绵阳市', '德阳市', '宜宾市'],
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 中文姓名生成器
|
||||
*/
|
||||
export const chineseName: GeneratorDefinition = {
|
||||
id: 'chineseName',
|
||||
name: '中文姓名',
|
||||
description: '生成随机中文姓名',
|
||||
categoryId: 'personal',
|
||||
params: [],
|
||||
generate: () => {
|
||||
const surname = randomPick(SURNAMES);
|
||||
const name = randomPick(NAME_CHARS);
|
||||
return surname + name;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 邮箱生成器
|
||||
*/
|
||||
export const email: GeneratorDefinition = {
|
||||
id: 'email',
|
||||
name: '邮箱',
|
||||
description: '生成随机邮箱地址',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'domain',
|
||||
label: '邮箱域名',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '选择邮箱域名',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
...EMAIL_DOMAINS.map((d) => ({ label: d, value: d })),
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const domain =
|
||||
params.domain === 'random' ? randomPick(EMAIL_DOMAINS) : (params.domain as string);
|
||||
const username = Math.random().toString(36).substring(2, 10);
|
||||
return `${username}@${domain}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 手机号生成器
|
||||
*/
|
||||
export const chinesePhone: GeneratorDefinition = {
|
||||
id: 'chinesePhone',
|
||||
name: '手机号',
|
||||
description: '生成随机中国手机号码',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'prefix',
|
||||
label: '号段前缀',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '选择手机号前缀',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '138', value: '138' },
|
||||
{ label: '139', value: '139' },
|
||||
{ label: '158', value: '158' },
|
||||
{ label: '188', value: '188' },
|
||||
{ label: '177', value: '177' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const prefixes = ['138', '139', '158', '188', '177', '136', '159', '186', '135', '150'];
|
||||
const prefix = params.prefix === 'random' ? randomPick(prefixes) : (params.prefix as string);
|
||||
const suffix = String(randomInt(10000000, 99999999));
|
||||
return prefix + suffix;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 身份证号生成器
|
||||
*/
|
||||
export const idCard: GeneratorDefinition = {
|
||||
id: 'idCard',
|
||||
name: '身份证号',
|
||||
description: '生成随机身份证号码',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'region',
|
||||
label: '地区',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '选择身份证前6位地区码',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '北京', value: '110101' },
|
||||
{ label: '上海', value: '310101' },
|
||||
{ label: '广州', value: '440103' },
|
||||
{ label: '深圳', value: '440305' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
|
||||
const region = params.region === 'random' ? randomPick(regions) : (params.region as string);
|
||||
|
||||
// 出生日期 1960-2005年
|
||||
const year = randomInt(1960, 2005);
|
||||
const month = String(randomInt(1, 12)).padStart(2, '0');
|
||||
const day = String(randomInt(1, 28)).padStart(2, '0');
|
||||
const birthday = `${year}${month}${day}`;
|
||||
|
||||
// 顺序码
|
||||
const sequence = String(randomInt(1, 999)).padStart(3, '0');
|
||||
|
||||
// 前17位
|
||||
const prefix17 = region + birthday + sequence;
|
||||
|
||||
// 校验码
|
||||
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
||||
const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
|
||||
let sum = 0;
|
||||
for (let i = 0; i < 17; i++) {
|
||||
sum += parseInt(prefix17[i]) * weights[i];
|
||||
}
|
||||
const checkCode = checkCodes[sum % 11];
|
||||
|
||||
return prefix17 + checkCode;
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
|
||||
const region =
|
||||
params.region === 'random' ? regions[index % regions.length] : (params.region as string);
|
||||
|
||||
const year = 1990;
|
||||
const month = String(randomInt(1, 12)).padStart(2, '0');
|
||||
const day = String(randomInt(1, 28)).padStart(2, '0');
|
||||
const birthday = `${year}${month}${day}`;
|
||||
|
||||
const sequence = String(index + 1).padStart(3, '0');
|
||||
const prefix17 = region + birthday + sequence;
|
||||
|
||||
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
||||
const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
|
||||
let sum = 0;
|
||||
for (let i = 0; i < 17; i++) {
|
||||
sum += parseInt(prefix17[i]) * weights[i];
|
||||
}
|
||||
const checkCode = checkCodes[sum % 11];
|
||||
|
||||
return prefix17 + checkCode;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 中文地址生成器
|
||||
*/
|
||||
export const chineseAddress: GeneratorDefinition = {
|
||||
id: 'chineseAddress',
|
||||
name: '中文地址',
|
||||
description: '生成随机中文地址',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'includeDetail',
|
||||
label: '包含详细地址',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否包含街道门牌号',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const province = randomPick(PROVINCES);
|
||||
const cities = CITIES[province] || ['市区'];
|
||||
const city = randomPick(cities);
|
||||
const district = `区${randomInt(1, 20)}号`;
|
||||
|
||||
if (params.includeDetail) {
|
||||
const street = `路${randomInt(1, 200)}号`;
|
||||
return `${province}${city}${district}${street}`;
|
||||
}
|
||||
return `${province}${city}${district}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 年龄生成器
|
||||
*/
|
||||
export const age: GeneratorDefinition = {
|
||||
id: 'age',
|
||||
name: '年龄',
|
||||
description: '生成随机年龄',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小年龄',
|
||||
type: 'number',
|
||||
defaultValue: 18,
|
||||
min: 0,
|
||||
max: 150,
|
||||
description: '年龄最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大年龄',
|
||||
type: 'number',
|
||||
defaultValue: 65,
|
||||
min: 0,
|
||||
max: 150,
|
||||
description: '年龄最大值',
|
||||
},
|
||||
{
|
||||
key: 'distribution',
|
||||
label: '分布方式',
|
||||
type: 'select',
|
||||
defaultValue: 'uniform',
|
||||
description: '年龄分布方式',
|
||||
options: [
|
||||
{ label: '均匀分布', value: 'uniform' },
|
||||
{ label: '正态分布', value: 'normal' },
|
||||
{ label: '人口统计分布', value: 'demographic' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 18;
|
||||
const max = (params.max as number) || 65;
|
||||
const distribution = (params.distribution as string) || 'uniform';
|
||||
|
||||
if (distribution === 'normal') {
|
||||
return String(normalRandom(min, max));
|
||||
} else if (distribution === 'demographic') {
|
||||
return String(demographicRandom());
|
||||
}
|
||||
return String(randomInt(min, max));
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 正态分布随机数
|
||||
*/
|
||||
function normalRandom(min: number, max: number): number {
|
||||
const mean = (min + max) / 2;
|
||||
const stdDev = (max - min) / 6;
|
||||
let u = 0,
|
||||
v = 0;
|
||||
while (u === 0) u = Math.random();
|
||||
while (v === 0) v = Math.random();
|
||||
const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
|
||||
const value = Math.round(mean + num * stdDev);
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
/**
|
||||
* 人口统计分布随机数（模拟真实年龄分布）
|
||||
*/
|
||||
function demographicRandom(): number {
|
||||
const ageGroups = [
|
||||
{ min: 0, max: 14, weight: 0.18 },
|
||||
{ min: 15, max: 24, weight: 0.12 },
|
||||
{ min: 25, max: 34, weight: 0.18 },
|
||||
{ min: 35, max: 44, weight: 0.17 },
|
||||
{ min: 45, max: 54, weight: 0.16 },
|
||||
{ min: 55, max: 64, weight: 0.12 },
|
||||
{ min: 65, max: 100, weight: 0.07 },
|
||||
];
|
||||
|
||||
const random = Math.random();
|
||||
let cumulative = 0;
|
||||
for (const group of ageGroups) {
|
||||
cumulative += group.weight;
|
||||
if (random <= cumulative) {
|
||||
return randomInt(group.min, group.max);
|
||||
}
|
||||
}
|
||||
return randomInt(25, 34);
|
||||
}
|
||||
|
||||
export const personalGenerators: GeneratorDefinition[] = [
|
||||
chineseName,
|
||||
email,
|
||||
chinesePhone,
|
||||
idCard,
|
||||
chineseAddress,
|
||||
age,
|
||||
];
|
||||
@@ -0,0 +1,268 @@
|
||||
/**
|
||||
* 技术数据生成器
|
||||
* 包含：UUID、IPv4、URL
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* UUID 生成器
|
||||
*/
|
||||
export const uuid: GeneratorDefinition = {
|
||||
id: 'uuid',
|
||||
name: 'UUID',
|
||||
description: '生成随机 UUID',
|
||||
categoryId: 'technical',
|
||||
params: [
|
||||
{
|
||||
key: 'version',
|
||||
label: 'UUID 版本',
|
||||
type: 'select',
|
||||
defaultValue: 'v4',
|
||||
description: 'UUID 版本',
|
||||
options: [
|
||||
{ label: 'v4 (随机)', value: 'v4' },
|
||||
{ label: 'v1 (时间戳)', value: 'v1' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'uppercase',
|
||||
label: '大写字母',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
description: '是否使用大写字母',
|
||||
},
|
||||
{
|
||||
key: 'noDashes',
|
||||
label: '无连字符',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
description: '是否省略连字符',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const version = (params.version as string) || 'v4';
|
||||
const uppercase = params.uppercase === true;
|
||||
const noDashes = params.noDashes === true;
|
||||
|
||||
let result: string;
|
||||
if (version === 'v1') {
|
||||
result = generateUUIDv1();
|
||||
} else {
|
||||
result = generateUUIDv4();
|
||||
}
|
||||
|
||||
if (uppercase) {
|
||||
result = result.toUpperCase();
|
||||
}
|
||||
|
||||
if (noDashes) {
|
||||
result = result.replace(/-/g, '');
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成 UUID v4
|
||||
*/
|
||||
function generateUUIDv4(): string {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
const r = (Math.random() * 16) | 0;
|
||||
const v = c === 'x' ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成 UUID v1（简化版本，模拟时间戳）
|
||||
*/
|
||||
function generateUUIDv1(): string {
|
||||
const now = Date.now();
|
||||
const timeLow = (now & 0xffffffff).toString(16).padStart(8, '0');
|
||||
const timeMid = ((now >> 32) & 0xffff).toString(16).padStart(4, '0');
|
||||
const timeHi = ((now >> 48) & 0x0fff) | 0x1000;
|
||||
const clockSeq = randomInt(0, 0x3fff) | 0x8000;
|
||||
const node = Array.from({ length: 6 }, () =>
|
||||
randomInt(0, 255).toString(16).padStart(2, '0'),
|
||||
).join('');
|
||||
|
||||
return `${timeLow}-${timeMid}-${timeHi.toString(16)}-${clockSeq.toString(16)}-${node}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* IPv4 生成器
|
||||
*/
|
||||
export const ipv4: GeneratorDefinition = {
|
||||
id: 'ipv4',
|
||||
name: 'IPv4',
|
||||
description: '生成随机 IPv4 地址',
|
||||
categoryId: 'technical',
|
||||
params: [
|
||||
{
|
||||
key: 'type',
|
||||
label: '地址类型',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: 'IP 地址类型',
|
||||
options: [
|
||||
{ label: '完全随机', value: 'random' },
|
||||
{ label: '内网地址', value: 'private' },
|
||||
{ label: '公网地址', value: 'public' },
|
||||
{ label: '环回地址', value: 'loopback' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const type = (params.type as string) || 'random';
|
||||
|
||||
if (type === 'private') {
|
||||
return generatePrivateIPv4();
|
||||
} else if (type === 'loopback') {
|
||||
return '127.0.0.1';
|
||||
} else if (type === 'public') {
|
||||
return generatePublicIPv4();
|
||||
}
|
||||
return generateRandomIPv4();
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成完全随机 IPv4
|
||||
*/
|
||||
function generateRandomIPv4(): string {
|
||||
return Array.from({ length: 4 }, () => randomInt(0, 255)).join('.');
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成内网 IPv4
|
||||
*/
|
||||
function generatePrivateIPv4(): string {
|
||||
const ranges = [
|
||||
{ prefix: '10', second: () => randomInt(0, 255) },
|
||||
{ prefix: '172', second: () => randomInt(16, 31) },
|
||||
{ prefix: '192.168', second: () => randomInt(0, 255) },
|
||||
];
|
||||
const range = randomPick(ranges);
|
||||
|
||||
if (range.prefix === '192.168') {
|
||||
return `192.168.${range.second()}.${randomInt(1, 254)}`;
|
||||
}
|
||||
return `${range.prefix}.${range.second()}.${randomInt(1, 254)}.${randomInt(1, 254)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成公网 IPv4
|
||||
*/
|
||||
function generatePublicIPv4(): string {
|
||||
let first: number;
|
||||
do {
|
||||
first = randomInt(1, 255);
|
||||
} while (first === 10 || first === 127 || first === 192 || first === 172);
|
||||
|
||||
return `${first}.${randomInt(0, 255)}.${randomInt(0, 255)}.${randomInt(1, 254)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* URL 生成器
|
||||
*/
|
||||
export const url: GeneratorDefinition = {
|
||||
id: 'url',
|
||||
name: 'URL',
|
||||
description: '生成随机 URL',
|
||||
categoryId: 'technical',
|
||||
params: [
|
||||
{
|
||||
key: 'protocol',
|
||||
label: '协议',
|
||||
type: 'select',
|
||||
defaultValue: 'https',
|
||||
description: 'URL 协议',
|
||||
options: [
|
||||
{ label: 'HTTPS', value: 'https' },
|
||||
{ label: 'HTTP', value: 'http' },
|
||||
{ label: '随机', value: 'random' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: 'URL 类型',
|
||||
type: 'select',
|
||||
defaultValue: 'website',
|
||||
description: 'URL 类型',
|
||||
options: [
|
||||
{ label: '网站', value: 'website' },
|
||||
{ label: 'API', value: 'api' },
|
||||
{ label: '图片', value: 'image' },
|
||||
{ label: '文件', value: 'file' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'includePath',
|
||||
label: '包含路径',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否包含路径',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const protocol = (params.protocol as string) || 'https';
|
||||
const type = (params.type as string) || 'website';
|
||||
const includePath = params.includePath !== false;
|
||||
|
||||
const actualProtocol = protocol === 'random' ? randomPick(['http', 'https']) : protocol;
|
||||
|
||||
const domains = [
|
||||
'example.com',
|
||||
'test.org',
|
||||
'demo.net',
|
||||
'sample.io',
|
||||
'api.service.com',
|
||||
'cdn.static.com',
|
||||
'img.media.com',
|
||||
];
|
||||
const domain = randomPick(domains);
|
||||
|
||||
let path = '';
|
||||
if (includePath) {
|
||||
if (type === 'api') {
|
||||
path = `/api/v${randomInt(1, 3)}/${randomPick(['users', 'products', 'orders', 'items'])}`;
|
||||
} else if (type === 'image') {
|
||||
path = `/images/${randomPick(['avatar', 'banner', 'logo', 'photo'])}/${randomInt(1, 1000)}.jpg`;
|
||||
} else if (type === 'file') {
|
||||
path = `/files/${randomPick(['document', 'report', 'data'])}/${randomInt(1, 100)}.pdf`;
|
||||
} else {
|
||||
path = `/${randomPick(['about', 'contact', 'products', 'services', 'blog'])}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加查询参数
|
||||
let query = '';
|
||||
if (Math.random() > 0.5) {
|
||||
const params = new URLSearchParams();
|
||||
params.set('id', String(randomInt(1, 10000)));
|
||||
if (Math.random() > 0.5) params.set('page', String(randomInt(1, 100)));
|
||||
if (Math.random() > 0.7) params.set('lang', randomPick(['zh', 'en', 'ja']));
|
||||
query = `?${params.toString()}`;
|
||||
}
|
||||
|
||||
return `${actualProtocol}://${domain}${path}${query}`;
|
||||
},
|
||||
};
|
||||
|
||||
export const technicalGenerators: GeneratorDefinition[] = [uuid, ipv4, url];
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* 生成器内部类型定义
|
||||
* 与 testDataGenerator.ts 分离，用于生成器库内部
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
|
||||
|
||||
export type { GeneratorDefinition, GeneratorCategory };
|
||||
|
||||
/**
|
||||
* 生成器注册表
|
||||
*/
|
||||
export interface GeneratorRegistry {
|
||||
/** 分类列表 */
|
||||
categories: GeneratorCategory[];
|
||||
/** 生成器列表 */
|
||||
generators: GeneratorDefinition[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 随机数生成选项
|
||||
*/
|
||||
export interface RandomOptions {
|
||||
/** 最小值 */
|
||||
min?: number;
|
||||
/** 最大值 */
|
||||
max?: number;
|
||||
/** 是否包含最小值 */
|
||||
includeMin?: boolean;
|
||||
/** 是否包含最大值 */
|
||||
includeMax?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 字符集选项
|
||||
*/
|
||||
export interface CharsetOptions {
|
||||
/** 是否包含大写字母 */
|
||||
uppercase?: boolean;
|
||||
/** 是否包含小写字母 */
|
||||
lowercase?: boolean;
|
||||
/** 是否包含数字 */
|
||||
digits?: boolean;
|
||||
/** 是否包含特殊字符 */
|
||||
special?: boolean;
|
||||
/** 自定义字符集 */
|
||||
custom?: string;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Vendored
+2
-1
@@ -10,7 +10,8 @@ export type PageType =
|
||||
| 'jwt' // JWT 解析工具
|
||||
| 'jsonDiff' // JSON 差异比较工具
|
||||
| 'base64Converter' // Base64 转换器工具
|
||||
| 'rightClickRestorer'; // 右键菜单恢复工具
|
||||
| 'rightClickRestorer' // 右键菜单恢复工具
|
||||
| 'testDataGenerator'; // 测试数据生成器工具
|
||||
|
||||
/**
|
||||
* JSON 工具页面子模式类型定义
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* 测试数据生成器类型定义
|
||||
*/
|
||||
|
||||
/**
|
||||
* 字段配置
|
||||
*/
|
||||
export interface FieldConfig {
|
||||
/** 字段唯一 ID */
|
||||
id: string;
|
||||
/** 字段名称 */
|
||||
name: string;
|
||||
/** 字段描述（可选） */
|
||||
description?: string;
|
||||
/** 使用的生成器 ID */
|
||||
generatorId: string;
|
||||
/** 生成器参数 */
|
||||
params: Record<string, unknown>;
|
||||
/** 是否必填 */
|
||||
required: boolean;
|
||||
/** 空值率（0-100），仅在 required=false 时生效 */
|
||||
nullRate: number;
|
||||
/** 是否唯一约束 */
|
||||
unique: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据规则
|
||||
*/
|
||||
export interface DataRule {
|
||||
/** 规则唯一 ID */
|
||||
id: string;
|
||||
/** 规则名称 */
|
||||
name: string;
|
||||
/** 规则描述 */
|
||||
description?: string;
|
||||
/** 字段配置列表 */
|
||||
fields: FieldConfig[];
|
||||
/** 创建时间 */
|
||||
createdAt: number;
|
||||
/** 更新时间 */
|
||||
updatedAt: number;
|
||||
/** 最后使用时间 */
|
||||
lastUsedAt?: number;
|
||||
/** 使用次数 */
|
||||
useCount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成器参数定义
|
||||
*/
|
||||
export interface GeneratorParam {
|
||||
/** 参数键名 */
|
||||
key: string;
|
||||
/** 参数显示名称 */
|
||||
label: string;
|
||||
/** 参数类型 */
|
||||
type: 'string' | 'number' | 'boolean' | 'select' | 'array';
|
||||
/** 默认值 */
|
||||
defaultValue: unknown;
|
||||
/** 是否必填 */
|
||||
required?: boolean;
|
||||
/** 参数描述 */
|
||||
description?: string;
|
||||
/** 仅当 type=select 时，可选值列表 */
|
||||
options?: { label: string; value: unknown }[];
|
||||
/** 最小值（仅当 type=number 时） */
|
||||
min?: number;
|
||||
/** 最大值（仅当 type=number 时） */
|
||||
max?: number;
|
||||
/** 占位符文本（仅当 type=string 时） */
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成器定义
|
||||
*/
|
||||
export interface GeneratorDefinition {
|
||||
/** 生成器唯一 ID */
|
||||
id: string;
|
||||
/** 生成器显示名称 */
|
||||
name: string;
|
||||
/** 生成器描述 */
|
||||
description: string;
|
||||
/** 分类 ID */
|
||||
categoryId: string;
|
||||
/** 参数定义列表 */
|
||||
params: GeneratorParam[];
|
||||
/** 生成函数 */
|
||||
generate: (params: Record<string, unknown>) => string;
|
||||
/** 在指定索引生成（用于保证唯一性时的确定性生成） */
|
||||
generateAtIndex?: (params: Record<string, unknown>, index: number) => string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成器分类
|
||||
*/
|
||||
export interface GeneratorCategory {
|
||||
/** 分类 ID */
|
||||
id: string;
|
||||
/** 分类名称 */
|
||||
name: string;
|
||||
/** 分类图标 */
|
||||
icon: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据生成结果
|
||||
*/
|
||||
export interface GenerateResult {
|
||||
/** 是否成功 */
|
||||
success: boolean;
|
||||
/** 生成的数据（JSON 格式） */
|
||||
data?: Record<string, unknown>[];
|
||||
/** 错误信息 */
|
||||
error?: string;
|
||||
/** 警告信息（如某些字段生成失败） */
|
||||
warnings?: string[];
|
||||
/** 生成统计 */
|
||||
stats?: {
|
||||
/** 总条数 */
|
||||
total: number;
|
||||
/** 成功条数 */
|
||||
success: number;
|
||||
/** 失败条数 */
|
||||
failed: number;
|
||||
/** 生成耗时（毫秒） */
|
||||
duration: number;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出文件配置
|
||||
*/
|
||||
export interface ExportFile {
|
||||
/** 文件名（不含扩展名） */
|
||||
filename: string;
|
||||
/** 文件内容 */
|
||||
content: string;
|
||||
/** MIME 类型 */
|
||||
mimeType: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成进度信息
|
||||
*/
|
||||
export interface GenerateProgress {
|
||||
/** 当前进度（0-100） */
|
||||
progress: number;
|
||||
/** 已生成条数 */
|
||||
generated: number;
|
||||
/** 总条数 */
|
||||
total: number;
|
||||
/** 预计剩余时间（毫秒） */
|
||||
estimatedTimeLeft?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Worker 消息类型
|
||||
*/
|
||||
export type WorkerMessage =
|
||||
| { type: 'start'; payload: WorkerStartPayload }
|
||||
| { type: 'progress'; payload: GenerateProgress }
|
||||
| { type: 'complete'; payload: GenerateResult }
|
||||
| { type: 'error'; payload: { error: string } }
|
||||
| { type: 'cancel' };
|
||||
|
||||
/**
|
||||
* Worker 启动参数
|
||||
*/
|
||||
export interface WorkerStartPayload {
|
||||
/** 字段配置列表 */
|
||||
fields: FieldConfig[];
|
||||
/** 生成数量 */
|
||||
count: number;
|
||||
/** 是否生成 CSV 格式 */
|
||||
csvMode: boolean;
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
/**
|
||||
* 数据导出工具
|
||||
* 实现 JSON 和 CSV 格式的数据导出
|
||||
*/
|
||||
|
||||
import type { ExportFile } from '@/types/testDataGenerator';
|
||||
|
||||
/**
|
||||
* 数据导出器
|
||||
*/
|
||||
export class DataExporter {
|
||||
/**
|
||||
* 将数据转换为 JSON 字符串
|
||||
*/
|
||||
static toJSON(data: Record<string, unknown>[], pretty = true): string {
|
||||
return JSON.stringify(data, null, pretty ? 2 : undefined);
|
||||
}
|
||||
|
||||
/**
|
||||
* 将数据转换为 CSV 字符串
|
||||
*/
|
||||
static toCSV(data: Record<string, unknown>[]): string {
|
||||
if (data.length === 0) return '';
|
||||
|
||||
// 获取所有列名
|
||||
const headers = Array.from(new Set(data.flatMap((row) => Object.keys(row))));
|
||||
|
||||
// 构建 CSV 内容
|
||||
const rows = [
|
||||
headers.map((h) => this.escapeCSV(h)).join(','),
|
||||
...data.map((row) => headers.map((h) => this.escapeCSV(String(row[h] ?? ''))).join(',')),
|
||||
];
|
||||
|
||||
return rows.join('\n');
|
||||
}
|
||||
|
||||
/**
|
||||
* 转义 CSV 字段
|
||||
*/
|
||||
private static escapeCSV(value: string): string {
|
||||
// 如果包含逗号、引号、换行符，需要用引号包裹
|
||||
if (value.includes(',') || value.includes('"') || value.includes('\n')) {
|
||||
return `"${value.replace(/"/g, '""')}"`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据格式导出数据
|
||||
*/
|
||||
static exportByFormat(data: Record<string, unknown>[], format: 'json' | 'csv'): string {
|
||||
if (format === 'csv') {
|
||||
return this.toCSV(data);
|
||||
}
|
||||
return this.toJSON(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出为多个文件
|
||||
*/
|
||||
static toMultipleFiles(
|
||||
data: Record<string, unknown>[],
|
||||
formats: ('json' | 'csv')[],
|
||||
filename = 'test-data',
|
||||
): ExportFile[] {
|
||||
return formats.map((format) => ({
|
||||
filename,
|
||||
content: this.exportByFormat(data, format),
|
||||
mimeType: this.getMimeType(format),
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出为单个文件
|
||||
*/
|
||||
static toSingleFile(
|
||||
data: Record<string, unknown>[],
|
||||
format: 'json' | 'csv',
|
||||
filename = 'test-data',
|
||||
): ExportFile {
|
||||
return {
|
||||
filename,
|
||||
content: this.exportByFormat(data, format),
|
||||
mimeType: this.getMimeType(format),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 MIME 类型
|
||||
*/
|
||||
private static getMimeType(format: string): string {
|
||||
const mimeTypes: Record<string, string> = {
|
||||
json: 'application/json',
|
||||
csv: 'text/csv',
|
||||
};
|
||||
return mimeTypes[format] || 'application/octet-stream';
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
static download(file: ExportFile): void {
|
||||
const blob = new Blob([file.content], { type: file.mimeType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `${file.filename}.${file.mimeType === 'application/json' ? 'json' : 'csv'}`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载多个文件
|
||||
*/
|
||||
static downloadMultiple(files: ExportFile[]): void {
|
||||
files.forEach((file) => this.download(file));
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制到剪贴板
|
||||
*/
|
||||
static async copyToClipboard(content: string): Promise<boolean> {
|
||||
try {
|
||||
await navigator.clipboard.writeText(content);
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('[DataExporter] 复制失败:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,339 @@
|
||||
/**
|
||||
* 规则存储工具
|
||||
* 实现测试数据生成器规则的持久化存储和管理
|
||||
*/
|
||||
|
||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
/** 存储键名 */
|
||||
const STORAGE_KEY = 'testDataGenerator_rules';
|
||||
|
||||
/** 最大规则数量 */
|
||||
const MAX_RULES = 20;
|
||||
|
||||
/**
|
||||
* 获取所有规则
|
||||
*/
|
||||
export function getAll(): DataRule[] {
|
||||
try {
|
||||
const data = localStorage.getItem(STORAGE_KEY);
|
||||
if (!data) return [];
|
||||
return JSON.parse(data) as DataRule[];
|
||||
} catch (error) {
|
||||
console.error('[ruleStorage] 获取规则列表失败:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据 ID 获取规则
|
||||
*/
|
||||
export function getById(id: string): DataRule | undefined {
|
||||
const rules = getAll();
|
||||
return rules.find((rule) => rule.id === id);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据名称获取规则
|
||||
*/
|
||||
export function getByName(name: string): DataRule | undefined {
|
||||
const rules = getAll();
|
||||
return rules.find((rule) => rule.name === name);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取规则数量
|
||||
*/
|
||||
export function getCount(): number {
|
||||
return getAll().length;
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否达到最大数量限制
|
||||
*/
|
||||
export function isMaxReached(): boolean {
|
||||
return getCount() >= MAX_RULES;
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存规则（新增或更新）
|
||||
*/
|
||||
export function save(
|
||||
rule: Omit<DataRule, 'id' | 'createdAt' | 'updatedAt' | 'useCount'> & { id?: string },
|
||||
): DataRule | null {
|
||||
const rules = getAll();
|
||||
const now = Date.now();
|
||||
|
||||
// 新增规则
|
||||
if (!rule.id) {
|
||||
if (isMaxReached()) {
|
||||
console.warn('[ruleStorage] 规则数量已达上限');
|
||||
return null;
|
||||
}
|
||||
const newRule: DataRule = {
|
||||
...rule,
|
||||
id: generateId(),
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
useCount: 0,
|
||||
};
|
||||
rules.unshift(newRule);
|
||||
setAll(rules);
|
||||
return newRule;
|
||||
}
|
||||
|
||||
// 更新规则
|
||||
const index = rules.findIndex((r) => r.id === rule.id);
|
||||
if (index === -1) {
|
||||
console.warn('[ruleStorage] 规则不存在:', rule.id);
|
||||
return null;
|
||||
}
|
||||
const updatedRule: DataRule = {
|
||||
...rules[index],
|
||||
...rule,
|
||||
id: rule.id,
|
||||
updatedAt: now,
|
||||
};
|
||||
rules[index] = updatedRule;
|
||||
setAll(rules);
|
||||
return updatedRule;
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新规则
|
||||
*/
|
||||
export function update(id: string, updates: Partial<DataRule>): DataRule | null {
|
||||
const rules = getAll();
|
||||
const index = rules.findIndex((r) => r.id === id);
|
||||
if (index === -1) {
|
||||
console.warn('[ruleStorage] 规则不存在:', id);
|
||||
return null;
|
||||
}
|
||||
|
||||
const updatedRule: DataRule = {
|
||||
...rules[index],
|
||||
...updates,
|
||||
id: rules[index].id, // 确保 ID 不被覆盖
|
||||
updatedAt: Date.now(),
|
||||
};
|
||||
rules[index] = updatedRule;
|
||||
setAll(rules);
|
||||
return updatedRule;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除规则
|
||||
*/
|
||||
export function deleteRule(id: string): boolean {
|
||||
const rules = getAll();
|
||||
const index = rules.findIndex((r) => r.id === id);
|
||||
if (index === -1) {
|
||||
console.warn('[ruleStorage] 规则不存在:', id);
|
||||
return false;
|
||||
}
|
||||
rules.splice(index, 1);
|
||||
setAll(rules);
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制规则
|
||||
* @param id 规则 ID
|
||||
* @param copySuffix 复制后缀，默认为中文「（副本）」，可通过 i18n 传入
|
||||
*/
|
||||
export function duplicate(id: string, copySuffix = '（副本）'): DataRule | null {
|
||||
const rule = getById(id);
|
||||
if (!rule) {
|
||||
console.warn('[ruleStorage] 规则不存在:', id);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (isMaxReached()) {
|
||||
console.warn('[ruleStorage] 规则数量已达上限');
|
||||
return null;
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
const newRule: DataRule = {
|
||||
...rule,
|
||||
id: generateId(),
|
||||
name: `${rule.name}${copySuffix}`,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
useCount: 0,
|
||||
};
|
||||
|
||||
const rules = getAll();
|
||||
rules.unshift(newRule);
|
||||
setAll(rules);
|
||||
return newRule;
|
||||
}
|
||||
|
||||
/**
|
||||
* 记录规则使用
|
||||
*/
|
||||
export function recordUse(id: string): void {
|
||||
const rules = getAll();
|
||||
const index = rules.findIndex((r) => r.id === id);
|
||||
if (index === -1) return;
|
||||
|
||||
rules[index].useCount += 1;
|
||||
rules[index].lastUsedAt = Date.now();
|
||||
setAll(rules);
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索规则
|
||||
*/
|
||||
export function search(query: string): DataRule[] {
|
||||
const rules = getAll();
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return rules.filter(
|
||||
(rule) =>
|
||||
rule.name.toLowerCase().includes(lowerQuery) ||
|
||||
rule.description?.toLowerCase().includes(lowerQuery),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最近使用的规则
|
||||
*/
|
||||
export function getRecent(count = 5): DataRule[] {
|
||||
const rules = getAll();
|
||||
return [...rules]
|
||||
.filter((rule) => rule.lastUsedAt)
|
||||
.sort((a, b) => (b.lastUsedAt || 0) - (a.lastUsedAt || 0))
|
||||
.slice(0, count);
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出规则（JSON 字符串）
|
||||
*/
|
||||
export function exportRules(ids?: string[]): string {
|
||||
const rules = getAll();
|
||||
const exportData = ids ? rules.filter((r) => ids.includes(r.id)) : rules;
|
||||
return JSON.stringify(exportData, null, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入规则
|
||||
*/
|
||||
export function importRules(jsonString: string): {
|
||||
success: number;
|
||||
failed: number;
|
||||
errors: string[];
|
||||
} {
|
||||
const result = { success: 0, failed: 0, errors: [] as string[] };
|
||||
|
||||
try {
|
||||
const data = JSON.parse(jsonString);
|
||||
if (!Array.isArray(data)) {
|
||||
result.failed = 1;
|
||||
result.errors.push('导入数据格式错误：不是数组');
|
||||
return result;
|
||||
}
|
||||
|
||||
for (const item of data) {
|
||||
const validation = validateRule(item);
|
||||
if (!validation.valid) {
|
||||
result.failed++;
|
||||
result.errors.push(`规则 "${item.name || '未知'}": ${validation.error}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const saved = save(item as Omit<DataRule, 'id' | 'createdAt' | 'updatedAt' | 'useCount'>);
|
||||
if (saved) {
|
||||
result.success++;
|
||||
} else {
|
||||
result.failed++;
|
||||
result.errors.push(`规则 "${item.name}" 保存失败`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
result.failed = 1;
|
||||
result.errors.push(`导入失败: ${error}`);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空所有规则
|
||||
*/
|
||||
export function clear(): void {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存所有规则到存储
|
||||
*/
|
||||
function setAll(rules: DataRule[]): void {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
|
||||
} catch (error) {
|
||||
console.error('[ruleStorage] 保存规则失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成唯一 ID
|
||||
*/
|
||||
export function generateId(): string {
|
||||
return `rule_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证规则格式
|
||||
*/
|
||||
function validateRule(rule: unknown): { valid: boolean; error?: string } {
|
||||
if (!rule || typeof rule !== 'object') {
|
||||
return { valid: false, error: '规则格式无效' };
|
||||
}
|
||||
|
||||
const obj = rule as Record<string, unknown>;
|
||||
|
||||
if (!obj.name || typeof obj.name !== 'string') {
|
||||
return { valid: false, error: '缺少规则名称' };
|
||||
}
|
||||
|
||||
if (!obj.fields || !Array.isArray(obj.fields)) {
|
||||
return { valid: false, error: '缺少字段配置' };
|
||||
}
|
||||
|
||||
for (const field of obj.fields) {
|
||||
const fieldValidation = validateField(field);
|
||||
if (!fieldValidation.valid) {
|
||||
return {
|
||||
valid: false,
|
||||
error: `字段 "${(field as FieldConfig).name || '未知'}": ${fieldValidation.error}`,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证字段配置
|
||||
*/
|
||||
function validateField(field: unknown): { valid: boolean; error?: string } {
|
||||
if (!field || typeof field !== 'object') {
|
||||
return { valid: false, error: '字段格式无效' };
|
||||
}
|
||||
|
||||
const obj = field as Record<string, unknown>;
|
||||
|
||||
if (!obj.name || typeof obj.name !== 'string') {
|
||||
return { valid: false, error: '缺少字段名称' };
|
||||
}
|
||||
|
||||
if (!obj.generatorId || typeof obj.generatorId !== 'string') {
|
||||
return { valid: false, error: '缺少生成器 ID' };
|
||||
}
|
||||
|
||||
if (typeof obj.required !== 'boolean') {
|
||||
return { valid: false, error: '缺少必填标识' };
|
||||
}
|
||||
|
||||
return { valid: true };
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
/**
|
||||
* 测试数据生成器 Web Worker
|
||||
* 在后台线程中执行数据生成，避免阻塞 UI
|
||||
*/
|
||||
|
||||
import { getGeneratorById } from '@/lib/generators';
|
||||
import type {
|
||||
FieldConfig,
|
||||
WorkerMessage,
|
||||
GenerateResult,
|
||||
GenerateProgress,
|
||||
} from '@/types/testDataGenerator';
|
||||
|
||||
// 生成结果缓存
|
||||
let generatedData: Record<string, unknown>[] = [];
|
||||
let isCancelled = false;
|
||||
|
||||
/**
|
||||
* Worker 消息处理器
|
||||
*/
|
||||
self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
|
||||
const data = e.data;
|
||||
const { type } = data;
|
||||
|
||||
switch (type) {
|
||||
case 'start':
|
||||
isCancelled = false;
|
||||
await handleStart(data.payload);
|
||||
break;
|
||||
case 'cancel':
|
||||
isCancelled = true;
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理开始生成消息
|
||||
*/
|
||||
async function handleStart(payload: {
|
||||
fields: FieldConfig[];
|
||||
count: number;
|
||||
csvMode: boolean;
|
||||
}): Promise<void> {
|
||||
const { fields, count } = payload;
|
||||
generatedData = [];
|
||||
|
||||
try {
|
||||
// 验证所有生成器是否存在
|
||||
for (const field of fields) {
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
if (!generator) {
|
||||
self.postMessage({
|
||||
type: 'error',
|
||||
payload: { error: `生成器 "${field.generatorId}" 不存在` },
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const startTime = Date.now();
|
||||
const warnings: string[] = [];
|
||||
|
||||
// 生成数据
|
||||
for (let i = 0; i < count; i++) {
|
||||
if (isCancelled) {
|
||||
self.postMessage({
|
||||
type: 'complete',
|
||||
payload: {
|
||||
success: false,
|
||||
error: '生成已取消',
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const record: Record<string, unknown> = {};
|
||||
|
||||
for (const field of fields) {
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
if (!generator) continue;
|
||||
|
||||
// 空值率控制
|
||||
if (!field.required && Math.random() * 100 < field.nullRate) {
|
||||
record[field.name] = null;
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
// 唯一性约束处理
|
||||
if (field.unique) {
|
||||
let value: string | undefined;
|
||||
const maxRetries = 100;
|
||||
let retryCount = 0;
|
||||
|
||||
// 小数据量：随机生成 + 重试
|
||||
if (count <= 1000) {
|
||||
while (retryCount < maxRetries) {
|
||||
value = generator.generate(field.params);
|
||||
const isUnique = !generatedData.some((item) => item[field.name] === value);
|
||||
if (isUnique) break;
|
||||
retryCount++;
|
||||
value = undefined;
|
||||
}
|
||||
} else {
|
||||
// 大数据量：使用索引生成策略
|
||||
if (generator.generateAtIndex) {
|
||||
value = generator.generateAtIndex(field.params, i);
|
||||
} else {
|
||||
// 回退到随机生成
|
||||
value = generator.generate(field.params);
|
||||
}
|
||||
}
|
||||
|
||||
if (value !== undefined) {
|
||||
record[field.name] = value;
|
||||
} else {
|
||||
warnings.push(`字段 "${field.name}" 第 ${i + 1} 行唯一值生成失败`);
|
||||
record[field.name] = generator.generate(field.params);
|
||||
}
|
||||
} else {
|
||||
record[field.name] = generator.generate(field.params);
|
||||
}
|
||||
} catch (error) {
|
||||
warnings.push(`字段 "${field.name}" 第 ${i + 1} 行生成错误: ${error}`);
|
||||
record[field.name] = null;
|
||||
}
|
||||
}
|
||||
|
||||
generatedData.push(record);
|
||||
|
||||
// 进度回调（每1000条）
|
||||
if ((i + 1) % 1000 === 0 || i === count - 1) {
|
||||
const progress: GenerateProgress = {
|
||||
progress: Math.round(((i + 1) / count) * 100),
|
||||
generated: i + 1,
|
||||
total: count,
|
||||
estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
|
||||
};
|
||||
self.postMessage({ type: 'progress', payload: progress });
|
||||
}
|
||||
}
|
||||
|
||||
const duration = Date.now() - startTime;
|
||||
const successCount = generatedData.filter((item) => Object.keys(item).length > 0).length;
|
||||
|
||||
const result: GenerateResult = {
|
||||
success: true,
|
||||
data: generatedData,
|
||||
warnings: warnings.length > 0 ? warnings : undefined,
|
||||
stats: {
|
||||
total: count,
|
||||
success: successCount,
|
||||
failed: count - successCount,
|
||||
duration,
|
||||
},
|
||||
};
|
||||
|
||||
self.postMessage({ type: 'complete', payload: result });
|
||||
} catch (error) {
|
||||
self.postMessage({
|
||||
type: 'error',
|
||||
payload: { error: `生成失败: ${error}` },
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user