From 3ab7194501ace03357ff0fdeb31b5fd5c00d5a94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 19 Jun 2026 10:08:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BB=9F=E4=B8=80=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20Button=20=E7=BB=84=E4=BB=B6=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E5=8E=9F=E6=9C=89=20button=20=E5=85=83=E7=B4=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 CopyButton、SwitchButtonGroup 和 TextInputArea 组件中，将原有的 button 元素替换为统一的 Button 组件，提升代码一致性和可维护性。
- 更新相关样式和属性以适应新组件，确保功能正常。
---
 src/components/CopyButton.tsx        | 16 ++++++----------
 src/components/SwitchButtonGroup.tsx | 10 +++++-----
 src/components/TextInputArea.tsx     |  9 ++++++---
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
index fcc57e6..64b5314 100644
--- a/src/components/CopyButton.tsx
+++ b/src/components/CopyButton.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Check, Copy } from 'lucide-react';
 import { copyTextToClipboard } from '@/utils/clipboard';
-import { cn } from '@/lib/utils';
-import { buttonVariants, type ButtonProps } from '@/components/ui/button';
+import { Button, type ButtonProps } from '@/components/ui/button';
 import { toast } from 'sonner';
 
 interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
@@ -47,17 +46,14 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
   };
 
   return (
-    <button
+    <Button
       type="button"
       onClick={handleCopy}
       title={tooltip ?? '复制'}
       aria-label={tooltip ?? '复制'}
-      className={cn(
-        buttonVariants({ variant, size }),
-        copied &&
-          'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/10',
-        className,
-      )}
+      variant={variant}
+      size={size}
+      className={className}
       {...props}
     >
       {copied ? (
@@ -65,7 +61,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       ) : (
         <Copy className="h-[1.2em] w-[1.2em]" />
       )}
-    </button>
+    </Button>
   );
 };
 
diff --git a/src/components/SwitchButtonGroup.tsx b/src/components/SwitchButtonGroup.tsx
index 7333727..b0e425d 100644
--- a/src/components/SwitchButtonGroup.tsx
+++ b/src/components/SwitchButtonGroup.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
 export interface SwitchOption<T extends string | number = string> {
@@ -45,21 +46,20 @@ export default function SwitchButtonGroup<T extends string | number = string>({
       {...props}
     >
       {options.map((option) => (
-        <button
+        <Button
           key={option.value}
           type="button"
+          variant="ghost"
           onClick={() => onChange(option.value)}
           className={cn(
-            'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
-            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
-            'disabled:pointer-events-none disabled:opacity-50',
+            'flex-1 transition-all',
             SIZE_CLASSES[size],
             value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
             buttonClassName,
           )}
         >
           {option.label}
-        </button>
+        </Button>
       ))}
     </div>
   );
diff --git a/src/components/TextInputArea.tsx b/src/components/TextInputArea.tsx
index 8031803..58e79a9 100644
--- a/src/components/TextInputArea.tsx
+++ b/src/components/TextInputArea.tsx
@@ -3,6 +3,7 @@ import { X } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
 import { CopyButton } from '@/components/CopyButton';
+import { Button } from './ui/button';
 
 export type ValidateRule = {
   validator: (value: string) => boolean;
@@ -273,14 +274,16 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
                 <CopyButton text={value} tooltip={'复制内容'} size="sm" className="h-7 w-7 p-1" />
               )}
               {showClear && value && !disabled && !readOnly && (
-                <button
+                <Button
                   type="button"
                   onClick={handleClear}
                   aria-label={'清空'}
-                  className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                 >
                   <X className="h-4 w-4" />
-                </button>
+                </Button>
               )}
             </div>
           </div>