From ea10b27c14b507c86a1523400ac26e7595c539a7 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:35:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=AE=80=E5=8C=96=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E4=BA=A4=E4=BA=92=20-=20=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E6=89=93=E5=BC=80=E7=BC=96=E8=BE=91=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除字段卡片选中样式
- 点击字段直接打开编辑弹窗
- 简化 FieldItem 组件，移除 isSelected 属性
- 简化 FieldList 接口，onSelect 改为 onEdit

fix: 优化字段编辑弹窗

- 去除弹窗描述文字
- 字段名称增加字符计数 (x/20)
- 字段描述增加字符计数 (x/50)
- 保持 placeholder 提示

fix: 修复弹窗顶部间距问题

- DialogContent 添加 pt-6 避开关闭按钮
- 内容区域移除顶部 padding，改为 pb-6

fix: 增加弹窗顶部间距 (pt-6 → pt-8)

fix: 优化弹窗尺寸和按钮间距

- 弹窗最大宽度 360→420px 适配标签页
- 增加按钮 padding (px-2→px-3, py-1→py-1.5)
- 添加按钮增加 padding (h-8→h-9, px-3)
---
 .../components/FieldEditor.tsx                | 22 +++++++----
 .../components/FieldItem.tsx                  |  9 +----
 .../components/FieldList.tsx                  | 38 ++++++-------------
 src/pages/TestDataGenerator/index.tsx         | 12 ++----
 4 files changed, 32 insertions(+), 49 deletions(-)

diff --git a/src/pages/TestDataGenerator/components/FieldEditor.tsx b/src/pages/TestDataGenerator/components/FieldEditor.tsx
index 76f2baa..e074ba0 100644
--- a/src/pages/TestDataGenerator/components/FieldEditor.tsx
+++ b/src/pages/TestDataGenerator/components/FieldEditor.tsx
@@ -73,9 +73,12 @@ export default function FieldEditor({ field, onChange }: FieldEditorProps) {
       {/* 基础配置 */}
       <div className="space-y-4">
         <div className="space-y-2">
-          <label className="text-sm font-medium text-foreground">
-            {t('testDataGenerator_fieldName')}
-          </label>
+          <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)}
@@ -86,9 +89,14 @@ export default function FieldEditor({ field, onChange }: FieldEditorProps) {
         </div>
 
         <div className="space-y-2">
-          <label className="text-sm font-medium text-foreground">
-            {t('testDataGenerator_fieldDescription')}
-          </label>
+          <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)}
@@ -132,7 +140,7 @@ export default function FieldEditor({ field, onChange }: FieldEditorProps) {
                 <button
                   key={preset.value}
                   onClick={() => handleNullRateChange(preset.value)}
-                  className={`px-2 py-1 text-xs rounded-md transition-colors ${
+                  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'
diff --git a/src/pages/TestDataGenerator/components/FieldItem.tsx b/src/pages/TestDataGenerator/components/FieldItem.tsx
index dc6d5ef..9f21b4b 100644
--- a/src/pages/TestDataGenerator/components/FieldItem.tsx
+++ b/src/pages/TestDataGenerator/components/FieldItem.tsx
@@ -11,20 +11,15 @@ import type { FieldConfig } from '@/types/testDataGenerator';
 interface FieldItemProps {
   field: FieldConfig;
   onClick: () => void;
-  isSelected: boolean;
 }
 
-export default function FieldItem({ field, onClick, isSelected }: FieldItemProps) {
+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 ${
-        isSelected
-          ? 'bg-primary/10 pl-2 border-l-2 border-l-primary'
-          : 'hover:bg-muted/50 border-l-2 border-l-transparent'
-      }`}
+      className="flex-1 min-w-0 cursor-pointer rounded-md transition-all hover:bg-muted/50"
       onClick={onClick}
     >
       <div
diff --git a/src/pages/TestDataGenerator/components/FieldList.tsx b/src/pages/TestDataGenerator/components/FieldList.tsx
index 78beca5..a447a29 100644
--- a/src/pages/TestDataGenerator/components/FieldList.tsx
+++ b/src/pages/TestDataGenerator/components/FieldList.tsx
@@ -44,21 +44,18 @@ interface FieldListProps {
   onUpdate: (index: number, field: FieldConfig) => void;
   onRemove: (index: number) => void;
   onAdd: () => void;
-  onSelect: (index: number) => void;
-  selectedIndex: number | null;
+  onEdit: (index: number) => void;
   onReorder: (oldIndex: number, newIndex: number) => void;
 }
 
 /** 可排序的字段项 */
 function SortableFieldItem({
   field,
-  isSelected,
-  onSelect,
+  onEdit,
   onRemove,
 }: {
   field: FieldConfig;
-  isSelected: boolean;
-  onSelect: () => void;
+  onEdit: () => void;
   onRemove: () => void;
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -78,10 +75,8 @@ function SortableFieldItem({
       ref={setNodeRef}
       style={style}
       className={`group relative rounded-lg border transition-all ${
-        isDragging ? 'border-primary shadow-lg' : ''
-      } ${
-        isSelected
-          ? 'border-primary bg-primary/8 shadow-sm ring-1 ring-primary/20'
+        isDragging
+          ? 'border-primary shadow-lg'
           : 'border-border hover:border-muted-foreground/30 hover:shadow-sm'
       }`}
     >
@@ -96,7 +91,7 @@ function SortableFieldItem({
         </button>
 
         <div className="flex-1 min-w-0">
-          <FieldItem field={field} onClick={onSelect} isSelected={isSelected} />
+          <FieldItem field={field} onClick={onEdit} />
         </div>
 
         <Button
@@ -117,8 +112,7 @@ export default function FieldList({
   onUpdate: _onUpdate,
   onRemove,
   onAdd,
-  onSelect,
-  selectedIndex,
+  onEdit,
   onReorder,
 }: FieldListProps) {
   const { t } = useI18n('testDataGenerator');
@@ -135,14 +129,6 @@ export default function FieldList({
     }),
   );
 
-  // 点击已选中的字段时取消选中
-  const handleToggleSelect = useCallback(
-    (index: number) => {
-      onSelect(selectedIndex === index ? -1 : index);
-    },
-    [selectedIndex, onSelect],
-  );
-
   const handleDragStart = (event: DragStartEvent) => {
     setActiveId(String(event.active.id));
   };
@@ -230,7 +216,7 @@ export default function FieldList({
           size="sm"
           onClick={onAdd}
           disabled={isMaxReached}
-          className="h-8 gap-1.5"
+          className="h-9 gap-1.5 px-3"
         >
           <Plus className="h-4 w-4" />
           {t('testDataGenerator_addField')}
@@ -284,8 +270,7 @@ export default function FieldList({
                           >
                             <SortableFieldItem
                               field={field}
-                              isSelected={selectedIndex === realIndex}
-                              onSelect={() => handleToggleSelect(realIndex)}
+                              onEdit={() => onEdit(realIndex)}
                               onRemove={() => onRemove(realIndex)}
                             />
                           </div>
@@ -300,8 +285,7 @@ export default function FieldList({
                       <SortableFieldItem
                         key={field.id}
                         field={field}
-                        isSelected={selectedIndex === index}
-                        onSelect={() => handleToggleSelect(index)}
+                        onEdit={() => onEdit(index)}
                         onRemove={() => onRemove(index)}
                       />
                     ))}
@@ -317,7 +301,7 @@ export default function FieldList({
                       <GripVertical className="h-4 w-4 text-muted-foreground" />
                     </div>
                     <div className="flex-1 min-w-0">
-                      <FieldItem field={activeField} isSelected={false} onClick={() => {}} />
+                      <FieldItem field={activeField} onClick={() => {}} />
                     </div>
                     <div className="h-8 w-8 shrink-0" />
                   </div>
diff --git a/src/pages/TestDataGenerator/index.tsx b/src/pages/TestDataGenerator/index.tsx
index 18f2da8..8474cde 100644
--- a/src/pages/TestDataGenerator/index.tsx
+++ b/src/pages/TestDataGenerator/index.tsx
@@ -9,7 +9,7 @@ import { cn } from '@/lib/utils';
 import { useGenerator } from './hooks/useGenerator';
 import { getGeneratorById } from '@/lib/generators';
 import type { FieldConfig, GenerateResult } from '@/types/testDataGenerator';
-import { Dialog, DialogContent, DialogHeader, DialogDescription } from '@/components/ui/dialog';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
 
 // 生成唯一 ID 的辅助函数
 function generateId(): string {
@@ -227,8 +227,7 @@ export default function TestDataGeneratorPage() {
                   onUpdate={handleUpdateField}
                   onRemove={handleRemoveField}
                   onAdd={handleAddField}
-                  onSelect={handleOpenEditor}
-                  selectedIndex={selectedIndex}
+                  onEdit={handleOpenEditor}
                   onReorder={handleReorder}
                 />
               </div>
@@ -303,11 +302,8 @@ export default function TestDataGeneratorPage() {
 
       {/* 字段编辑弹窗 */}
       <Dialog open={isEditorOpen} onOpenChange={setIsEditorOpen}>
-        <DialogContent className="w-[calc(100vw-2rem)] max-w-[360px] max-h-[calc(100vh-4rem)] overflow-hidden p-0">
-          <DialogHeader className="px-6 pt-6 pb-0">
-            <DialogDescription>{t('testDataGenerator_selectFieldToEdit')}</DialogDescription>
-          </DialogHeader>
-          <div className="overflow-y-auto max-h-[calc(100vh-8rem)] px-6 pb-6">
+        <DialogContent className="w-[calc(100vw-4rem)] max-w-[420px] max-h-[calc(100vh-4rem)] overflow-hidden p-0 pt-8">
+          <div className="overflow-y-auto max-h-[calc(100vh-6rem)] px-6 pb-6">
             {selectedField && selectedIndex !== null && (
               <FieldEditor
                 field={selectedField}