style(qrcode): 优化预览态布局适配popup窗口

- 调整文本预览区域高度,单行显示截断文本
- 缩小二维码图片尺寸(56x56 -> 48x48)
- 减少内边距和间距,更紧凑的布局
- 确保完整显示在popup窗口中无需滚动
This commit is contained in:
雨霖铃
2026-05-30 20:46:47 +08:00
parent 9458d62a99
commit a0345b384d
3 changed files with 23 additions and 23 deletions
+12 -12
View File
@@ -46,34 +46,34 @@ const QrCodePreview = ({
return (
<div
className={cn(
'flex flex-col justify-center items-center min-h-[200px] border border-input rounded-xl p-6 bg-muted/40',
'flex flex-col justify-center items-center border border-input rounded-xl p-4 bg-muted/40',
className,
)}
{...props}
>
<div className="flex flex-col items-center w-full max-w-xs">
{/*
2. 二维码容器适配:
二维码容器适配:
在暗黑模式下,纯黑白的二维码如果直接暴露在暗色背景下,会导致手机摄像头极难识别。
通过裹一层 bg-white 和 p-3,确保黑白对比度绝对安全,同时加入 shadow 增强卡片感。
通过裹一层 bg-white 和 p-2,确保黑白对比度绝对安全,同时加入 shadow 增强卡片感。
*/}
<div className="p-3 bg-white rounded-lg shadow-sm border border-border/40">
<div className="p-2 bg-white rounded-lg shadow-sm border border-border/40">
<img
src={qrCodeDataUrl}
alt="QR Code Preview"
className="w-56 h-56 max-w-full object-contain block animate-in fade-in duration-300"
className="w-48 h-48 max-w-full object-contain block animate-in fade-in duration-300"
/>
</div>
<div className="flex w-full gap-2 mt-5">
<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>
<div className="flex w-full gap-2 mt-3">
<Button variant="outline" size="sm" onClick={onDownload} className="flex-1 h-8">
<Download className="w-3.5 h-3.5 text-muted-foreground" />
<span className="truncate text-xs">{t('qrCode:downloadButton')}</span>
</Button>
<Button variant="default" size="sm" onClick={onCopy} className="flex-1">
<Copy className="w-4 h-4" />
<span className="truncate">{t('qrCode:copyQrButton')}</span>
<Button variant="default" size="sm" onClick={onCopy} className="flex-1 h-8">
<Copy className="w-3.5 h-3.5" />
<span className="truncate text-xs">{t('qrCode:copyQrButton')}</span>
</Button>
</div>
</div>