diff --git a/src/pages/TestDataGenerator/components/FieldList.tsx b/src/pages/TestDataGenerator/components/FieldList.tsx
index 5b695c1..a64a9c3 100644
--- a/src/pages/TestDataGenerator/components/FieldList.tsx
+++ b/src/pages/TestDataGenerator/components/FieldList.tsx
@@ -1,8 +1,10 @@
/**
* 字段列表组件
* 展示所有字段配置,支持添加、删除、拖拽排序
+ * 超过 5 条时启用虚拟列表滚动
*/
+import { useState, useRef, useCallback } from 'react';
import { Plus, GripVertical, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useI18n } from '@/utils/chromeI18n';
@@ -25,6 +27,15 @@ import { CSS } from '@dnd-kit/utilities';
import type { FieldConfig } 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;
+
interface FieldListProps {
fields: FieldConfig[];
onUpdate: (index: number, field: FieldConfig) => void;
@@ -56,6 +67,7 @@ function SortableFieldItem({
transition,
opacity: isDragging ? 0.5 : 1,
zIndex: isDragging ? 10 : 0,
+ height: ROW_HEIGHT - ROW_GAP, // 固定卡片高度 52px,与虚拟模式一致
};
return (
@@ -70,22 +82,24 @@ function SortableFieldItem({
: 'border-border hover:border-muted-foreground/30'
}`}
>
-
+
{/* 拖拽手柄 */}
-
+
+
+