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
@@ -8,7 +8,7 @@ import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';
/** 文本预览的最大显示字符数 */
const TEXT_PREVIEW_MAX_LENGTH = 100;
const TEXT_PREVIEW_MAX_LENGTH = 80;
export default function GeneratePanel() {
const { t } = useI18n('qrCode');
@@ -81,29 +81,29 @@ export default function GeneratePanel() {
);
}
// 预览态:显示文本预览 + 二维码
// 预览态:显示文本预览 + 二维码(紧凑布局,适配popup窗口)
return (
<div className="w-full select-none p-0.5 space-y-4">
{/* 文本预览区域 */}
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-4">
<div className="flex items-center justify-between mb-2">
<div className="w-full select-none p-0.5 flex flex-col">
{/* 文本预览区域(固定高度,单行显示) */}
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
<div className="flex items-center justify-between mb-1.5">
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
{t('qrCode:textPreviewLabel')}
</Label>
<Button variant="ghost" size="sm" onClick={backToEdit} className="h-7 px-2 text-xs">
<Button variant="ghost" size="sm" onClick={backToEdit} className="h-6 px-2 text-xs">
<Pencil className="w-3 h-3 mr-1" />
{t('qrCode:editButton')}
</Button>
</div>
<div
className="text-sm text-foreground bg-muted/50 rounded-md p-3 cursor-default"
className="text-sm text-foreground bg-muted/50 rounded-md px-3 py-2 cursor-default line-clamp-1"
title={generatorState.savedText}
>
{getTruncatedText(generatorState.savedText)}
</div>
</div>
{/* 二维码预览区域 */}
{/* 二维码预览区域(自适应剩余空间) */}
<QrCodePreview
qrCodeDataUrl={generatorState.qrCodeDataUrl}
onDownload={downloadQrCode}