From a0345b384df1725c2c8232983a6db7735c1f95ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Sat, 30 May 2026 20:46:47 +0800
Subject: [PATCH] =?UTF-8?q?style(qrcode):=20=E4=BC=98=E5=8C=96=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=80=81=E5=B8=83=E5=B1=80=E9=80=82=E9=85=8Dpopup?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整文本预览区域高度，单行显示截断文本
- 缩小二维码图片尺寸（56x56 -> 48x48）
- 减少内边距和间距，更紧凑的布局
- 确保完整显示在popup窗口中无需滚动
---
 src/components/QrCodePreview.tsx              | 24 +++++++++----------
 src/pages/QrCode/__tests__/index.test.tsx     |  4 ++--
 src/pages/QrCode/components/GeneratePanel.tsx | 18 +++++++-------
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/QrCodePreview.tsx b/src/components/QrCodePreview.tsx
index 8c3da70..f96a8a0 100644
--- a/src/components/QrCodePreview.tsx
+++ b/src/components/QrCodePreview.tsx
@@ -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>
diff --git a/src/pages/QrCode/__tests__/index.test.tsx b/src/pages/QrCode/__tests__/index.test.tsx
index 75eac20..eca7ae1 100644
--- a/src/pages/QrCode/__tests__/index.test.tsx
+++ b/src/pages/QrCode/__tests__/index.test.tsx
@@ -133,8 +133,8 @@ describe('QrCodePage', () => {
     // 点击生成按钮
     fireEvent.click(screen.getByText('生成二维码'));
 
-    // 验证显示截断的文本（100字符 + "..."）
-    const truncatedText = longText.slice(0, 100) + '...';
+    // 验证显示截断的文本（80字符 + "..."）
+    const truncatedText = longText.slice(0, 80) + '...';
     expect(screen.getByText(truncatedText)).toBeInTheDocument();
   });
 
diff --git a/src/pages/QrCode/components/GeneratePanel.tsx b/src/pages/QrCode/components/GeneratePanel.tsx
index a21b692..b67fb39 100644
--- a/src/pages/QrCode/components/GeneratePanel.tsx
+++ b/src/pages/QrCode/components/GeneratePanel.tsx
@@ -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}