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 (
{/* - 2. 二维码容器适配: + 二维码容器适配: 在暗黑模式下,纯黑白的二维码如果直接暴露在暗色背景下,会导致手机摄像头极难识别。 - 通过裹一层 bg-white 和 p-3,确保黑白对比度绝对安全,同时加入 shadow 增强卡片感。 + 通过裹一层 bg-white 和 p-2,确保黑白对比度绝对安全,同时加入 shadow 增强卡片感。 */} -
+
QR Code Preview
-
- -
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 ( -
- {/* 文本预览区域 */} -
-
+
+ {/* 文本预览区域(固定高度,单行显示) */} +
+
-
{getTruncatedText(generatorState.savedText)}
- {/* 二维码预览区域 */} + {/* 二维码预览区域(自适应剩余空间) */}