From fae8dea971ed3b19b74fbcf175e32e29f3048eff 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, 27 May 2026 13:50:36 +0800
Subject: [PATCH] fix(QrCodePreview): use shadcn Button instead of manual
 button styles

Replace hand-written button class strings with shadcn Button component
using outline and default variants. Removes ~15 lines of duplicated
Tailwind classes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/QrCodePreview.tsx | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/components/QrCodePreview.tsx b/components/QrCodePreview.tsx
index 5640f03..82864f1 100644
--- a/components/QrCodePreview.tsx
+++ b/components/QrCodePreview.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Copy, Download } from 'lucide-react';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 
 // 继承原生 HTML Div 属性，方便外部无缝扩充类名或监听事件
 interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -59,27 +60,16 @@ const QrCodePreview = ({
           />
         </div>
 
-        {/* 3. 按钮群全面向 shadcn 官方 Button 视觉规范对齐 */}
         <div className="flex w-full gap-2 mt-5">
-          {/* 下载按钮：使用标准的次要按钮风格 (Outline) */}
-          <button
-            type="button"
-            onClick={onDownload}
-            className="flex-1 inline-flex h-9 items-center justify-center gap-2 px-3 text-sm font-medium rounded-md border border-input bg-background shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          >
+          <Button variant="outline" size="sm" onClick={onDownload} className="flex-1">
             <Download className="w-4 h-4 text-muted-foreground" />
             <span className="truncate">{t('qrCode:downloadButton')}</span>
-          </button>
+          </Button>
 
-          {/* 复制按钮：使用标准的主要行动按钮风格 (Default) */}
-          <button
-            type="button"
-            onClick={onCopy}
-            className="flex-1 inline-flex h-9 items-center justify-center gap-2 px-3 text-sm font-medium rounded-md bg-primary text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          >
+          <Button variant="default" size="sm" onClick={onCopy} className="flex-1">
             <Copy className="w-4 h-4" />
             <span className="truncate">{t('qrCode:copyQrButton')}</span>
-          </button>
+          </Button>
         </div>
       </div>
     </div>