From ee77c97b564a1416a9914c15225687338f8c0266 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Sat, 6 Jun 2026 10:18:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E6=97=B6=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E9=BC=A0=E6=A0=87=E6=BB=9A=E8=BD=AE=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 拖拽状态下监听 wheel 事件
- 使用 preventDefault 阻止默认滚动
- 降低滚动速度 (0.5x) 提供更精确的控制
- 自动更新虚拟列表渲染范围
---
 .../components/FieldList.tsx                  | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/pages/TestDataGenerator/components/FieldList.tsx b/src/pages/TestDataGenerator/components/FieldList.tsx
index f9f7c33..ad6f68e 100644
--- a/src/pages/TestDataGenerator/components/FieldList.tsx
+++ b/src/pages/TestDataGenerator/components/FieldList.tsx
@@ -4,7 +4,7 @@
  * 超过 5 条时启用虚拟列表滚动
  */
 
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { Plus, GripVertical, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useI18n } from '@/utils/chromeI18n';
@@ -147,6 +147,37 @@ export default function FieldList({
     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);
+    };
+
+    // 添加事件监听，使用 passive: false 以允许 preventDefault
+    container.addEventListener('wheel', handleWheel, { passive: false });
+
+    return () => {
+      container.removeEventListener('wheel', handleWheel);
+    };
+  }, [activeId]);
+
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
     setActiveId(null);