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

- 调整文本预览区域高度，单行显示截断文本
- 缩小二维码图片尺寸（56x56 -> 48x48）
- 减少内边距和间距，更紧凑的布局
- 确保完整显示在popup窗口中无需滚动

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();
   });
 

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}