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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user