From 1f9288f7808e677042dcecb781663e4328f1e8c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Wed, 10 Jun 2026 08:15:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8=20Label=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9B=BF=E6=8D=A2=E5=8E=9F=E7=94=9F=20label?=
 =?UTF-8?q?=20=E5=85=83=E7=B4=A0=EF=BC=8C=E5=B9=B6=E5=9C=A8=20DecodeResult?=
 =?UTF-8?q?Paper=20=E4=B8=AD=E5=BC=95=E5=85=A5=20Input=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DecodeResultPaper.tsx          |  8 ++----
 src/components/ImageUploader.tsx              | 14 +++++++----
 .../components/FieldEditor.tsx                | 25 ++++++++++---------
 .../components/GenerateOptions.tsx            |  9 ++++---
 .../components/GeneratorConfig.tsx            |  5 ++--
 5 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/components/DecodeResultPaper.tsx b/src/components/DecodeResultPaper.tsx
index 9240e76..c3987e0 100644
--- a/src/components/DecodeResultPaper.tsx
+++ b/src/components/DecodeResultPaper.tsx
@@ -9,6 +9,7 @@
  */
 import { Download } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { formatBytes } from '@/utils/format';
 import { useI18n } from '@/utils/chromeI18n';
 
@@ -63,12 +64,7 @@ export default function DecodeResultPaper({
         <label className="block text-xs font-medium text-muted-foreground mb-1">
           {t('decodedFileName')}
         </label>
-        <input
-          type="text"
-          value={fileName}
-          onChange={(e) => onFileNameChange(e.target.value)}
-          className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
-        />
+        <Input value={fileName} onChange={(e) => onFileNameChange(e.target.value)} />
       </div>
 
       {/* 下载按钮 */}
diff --git a/src/components/ImageUploader.tsx b/src/components/ImageUploader.tsx
index 6f3e1cc..fb801b1 100644
--- a/src/components/ImageUploader.tsx
+++ b/src/components/ImageUploader.tsx
@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { Image, X } from 'lucide-react';
 import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
 import { useI18n } from '@/utils/chromeI18n';
 
 interface ImageUploaderProps {
@@ -125,7 +127,7 @@ const ImageUploader = ({
         className="hidden"
         id="qr-code-upload"
       />
-      <label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
+      <Label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
         {selectedFile ? (
           <div className="text-center w-full relative">
             <div className="relative inline-block">
@@ -134,17 +136,19 @@ const ImageUploader = ({
                 alt="QR Code Preview"
                 className="max-w-full max-h-40 rounded-lg object-contain"
               />
-              <button
+              <Button
                 type="button"
+                variant="destructive"
+                size="icon"
                 data-testid="ClearIcon"
                 onClick={(e) => {
                   e.stopPropagation();
                   handleClearFile();
                 }}
-                className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
+                className="absolute -top-2 -right-2 h-6 w-6 rounded-full"
               >
                 <X className="w-3 h-3" />
-              </button>
+              </Button>
             </div>
             <span className="block text-sm text-muted-foreground mt-2">{selectedFile.name}</span>
             <span className="block text-xs text-muted-foreground">{t('qrCode:clickToChange')}</span>
@@ -163,7 +167,7 @@ const ImageUploader = ({
             </span>
           </>
         )}
-      </label>
+      </Label>
     </div>
   );
 };
diff --git a/src/pages/TestDataGenerator/components/FieldEditor.tsx b/src/pages/TestDataGenerator/components/FieldEditor.tsx
index 3a5d740..afac328 100644
--- a/src/pages/TestDataGenerator/components/FieldEditor.tsx
+++ b/src/pages/TestDataGenerator/components/FieldEditor.tsx
@@ -6,6 +6,7 @@
 import { useState, useCallback } from 'react';
 import { useI18n } from '@/utils/chromeI18n';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Badge } from '@/components/ui/badge';
 import { getGeneratorById } from '@/lib/generators';
@@ -110,9 +111,9 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
       <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">
+            <Label className="text-sm font-medium text-foreground">
               {t('testDataGenerator_fieldName')}
-            </label>
+            </Label>
             <span className="text-xs text-muted-foreground">{field.name.length}/20</span>
           </div>
           <Input
@@ -127,9 +128,9 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
 
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <label className="text-sm font-medium text-foreground">
+            <Label className="text-sm font-medium text-foreground">
               {t('testDataGenerator_fieldDescription')}
-            </label>
+            </Label>
             <span className="text-xs text-muted-foreground">
               {(field.description || '').length}/50
             </span>
@@ -147,9 +148,9 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
       {/* 必填/选填配置 */}
       <div className="space-y-3">
         <div className="flex items-center justify-between">
-          <label className="text-sm font-medium text-foreground">
+          <Label className="text-sm font-medium text-foreground">
             {t('testDataGenerator_required')}
-          </label>
+          </Label>
           <Switch checked={field.required} onCheckedChange={handleRequiredChange} />
         </div>
 
@@ -198,26 +199,26 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
 
       {/* 唯一性约束 */}
       <div className="flex items-center justify-between">
-        <label className="text-sm font-medium text-foreground">
+        <Label className="text-sm font-medium text-foreground">
           {t('testDataGenerator_uniqueConstraint')}
-        </label>
+        </Label>
         <Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
       </div>
 
       {/* 生成器选择 */}
       <div className="space-y-2">
-        <label className="text-sm font-medium text-foreground">
+        <Label className="text-sm font-medium text-foreground">
           {t('testDataGenerator_generator')}
-        </label>
+        </Label>
         <GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
       </div>
 
       {/* 生成器参数配置 */}
       {generator && (
         <div className="space-y-2">
-          <label className="text-sm font-medium text-foreground">
+          <Label className="text-sm font-medium text-foreground">
             {t('testDataGenerator_generatorParams')}
-          </label>
+          </Label>
           <GeneratorConfig
             generator={generator}
             params={field.params}
diff --git a/src/pages/TestDataGenerator/components/GenerateOptions.tsx b/src/pages/TestDataGenerator/components/GenerateOptions.tsx
index c197afc..ba5971e 100644
--- a/src/pages/TestDataGenerator/components/GenerateOptions.tsx
+++ b/src/pages/TestDataGenerator/components/GenerateOptions.tsx
@@ -5,6 +5,7 @@
 
 import { useI18n } from '@/utils/chromeI18n';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 
 interface GenerateOptionsProps {
   count: number;
@@ -32,9 +33,9 @@ export default function GenerateOptions({
     <div className="space-y-4">
       {/* 生成数量 */}
       <div className="space-y-2">
-        <label className="text-sm font-medium text-foreground">
+        <Label className="text-sm font-medium text-foreground">
           {t('testDataGenerator_count')}
-        </label>
+        </Label>
         <div className="flex flex-wrap gap-2">
           {COUNT_PRESETS.map((preset) => (
             <button
@@ -67,9 +68,9 @@ export default function GenerateOptions({
 
       {/* 数据格式 */}
       <div className="space-y-2">
-        <label className="text-sm font-medium text-foreground">
+        <Label className="text-sm font-medium text-foreground">
           {t('testDataGenerator_format')}
-        </label>
+        </Label>
         <div className="flex gap-2">
           {FORMAT_OPTIONS.map((option) => (
             <button
diff --git a/src/pages/TestDataGenerator/components/GeneratorConfig.tsx b/src/pages/TestDataGenerator/components/GeneratorConfig.tsx
index f8e3392..53e2f3d 100644
--- a/src/pages/TestDataGenerator/components/GeneratorConfig.tsx
+++ b/src/pages/TestDataGenerator/components/GeneratorConfig.tsx
@@ -4,6 +4,7 @@
  */
 
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import {
   Select,
@@ -39,10 +40,10 @@ export default function GeneratorConfig({ generator, params, onChange }: Generat
     <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">
+          <Label className="text-sm font-medium text-foreground">
             {param.label}
             {param.required && <span className="text-destructive ml-1">*</span>}
-          </label>
+          </Label>
           {param.description && (
             <p className="text-xs text-muted-foreground">{param.description}</p>
           )}