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>
This commit is contained in:
雨霖铃
2026-05-27 13:50:36 +08:00
parent e0de152645
commit fae8dea971
+6 -16
View File
@@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import { Copy, Download } from 'lucide-react'; import { Copy, Download } from 'lucide-react';
import { useLazyTranslation } from '@/utils/useLazyTranslation'; 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 属性,方便外部无缝扩充类名或监听事件 // 继承原生 HTML Div 属性,方便外部无缝扩充类名或监听事件
interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> { interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -59,27 +60,16 @@ const QrCodePreview = ({
/> />
</div> </div>
{/* 3. 按钮群全面向 shadcn 官方 Button 视觉规范对齐 */}
<div className="flex w-full gap-2 mt-5"> <div className="flex w-full gap-2 mt-5">
{/* 下载按钮:使用标准的次要按钮风格 (Outline) */} <Button variant="outline" size="sm" onClick={onDownload} className="flex-1">
<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"
>
<Download className="w-4 h-4 text-muted-foreground" /> <Download className="w-4 h-4 text-muted-foreground" />
<span className="truncate">{t('qrCode:downloadButton')}</span> <span className="truncate">{t('qrCode:downloadButton')}</span>
</button> </Button>
{/* 复制按钮:使用标准的主要行动按钮风格 (Default) */} <Button variant="default" size="sm" onClick={onCopy} className="flex-1">
<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"
>
<Copy className="w-4 h-4" /> <Copy className="w-4 h-4" />
<span className="truncate">{t('qrCode:copyQrButton')}</span> <span className="truncate">{t('qrCode:copyQrButton')}</span>
</button> </Button>
</div> </div>
</div> </div>
</div> </div>