refactor(qrcode): 优化布局逻辑，输入态隐藏预览区域

- 输入态：只显示输入框和生成按钮，隐藏二维码预览
- 预览态：上方显示文本预览（超长文本截断），下方显示二维码
- 点击编辑返回输入态，隐藏二维码预览
- 更新测试用例适配新布局

src/pages/QrCode/__tests__/index.test.tsx

@@ -27,12 +27,7 @@ vi.mock('@/config/features', async (importOriginal) => {
 });
 
 vi.mock('@/components/QrCodePreview', () => ({
-  default: ({ placeholderText }: { placeholderText?: string }) => (
+  default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
-    <div data-testid="qr-code-preview">
-      QrCodePreview
-      {placeholderText && <span data-testid="placeholder-text">{placeholderText}</span>}
-    </div>
-  ),
 }));
 
 vi.mock('@/components/ImageUploader', () => ({
@@ -60,7 +55,8 @@ describe('QrCodePage', () => {
     render(<QrCodePage />);
     expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
     expect(screen.getByText('生成二维码')).toBeInTheDocument();
-    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
+    // 输入态应该隐藏二维码预览
+    expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
   });
 
   it('应该渲染模式切换按钮', () => {
@@ -73,17 +69,16 @@ describe('QrCodePage', () => {
     render(<QrCodePage />);
     fireEvent.click(screen.getByText('二维码转文本'));
     expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
-    expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
   });
 
-  it('切换回生成模式应该渲染 QrCodePreview', () => {
+  it('切换回生成模式应该渲染输入态', () => {
     render(<QrCodePage />);
     // 先切换到解析模式
     fireEvent.click(screen.getByText('二维码转文本'));
-    expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
     // 再切换回生成模式
     fireEvent.click(screen.getByText('文本转二维码'));
-    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
+    expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
+    expect(screen.getByText('生成二维码')).toBeInTheDocument();
   });
 
   it('应该渲染输入区域的系统标签', () => {
@@ -91,12 +86,6 @@ describe('QrCodePage', () => {
     expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
   });
 
-  it('应该渲染双翼响应式卡片网格布局', () => {
-    const { container } = render(<QrCodePage />);
-    const gridContainer = container.querySelector('.grid');
-    expect(gridContainer).toBeInTheDocument();
-  });
-
   it('输入态应该显示生成按钮', () => {
     render(<QrCodePage />);
     const generateButton = screen.getByText('生成二维码');
@@ -128,20 +117,40 @@ describe('QrCodePage', () => {
     expect(screen.getByText('原始文本')).toBeInTheDocument();
     expect(screen.getByText('编辑')).toBeInTheDocument();
     expect(screen.queryByText('生成二维码')).not.toBeInTheDocument();
+    // 预览态应该显示二维码
+    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
   });
 
-  it('预览态应该显示保存的文本', () => {
+  it('预览态应该显示截断的文本', () => {
     render(<QrCodePage />);
 
-    // 输入文本
+    // 输入长文本
+    const longText =
+      'https://example.com/very/long/path/that/should/be/truncated/in/the/preview/because/it/exceeds/the/maximum/length';
     const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
-    fireEvent.change(textarea, { target: { value: 'https://example.com' } });
+    fireEvent.change(textarea, { target: { value: longText } });
 
     // 点击生成按钮
     fireEvent.click(screen.getByText('生成二维码'));
 
-    // 验证显示保存的文本
+    // 验证显示截断的文本（100字符 + "..."）
-    expect(screen.getByText('https://example.com')).toBeInTheDocument();
+    const truncatedText = longText.slice(0, 100) + '...';
+    expect(screen.getByText(truncatedText)).toBeInTheDocument();
+  });
+
+  it('预览态应该显示完整的短文本', () => {
+    render(<QrCodePage />);
+
+    // 输入短文本
+    const shortText = 'https://example.com';
+    const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    fireEvent.change(textarea, { target: { value: shortText } });
+
+    // 点击生成按钮
+    fireEvent.click(screen.getByText('生成二维码'));
+
+    // 验证显示完整文本
+    expect(screen.getByText(shortText)).toBeInTheDocument();
   });
 
   it('点击编辑按钮应该返回输入态', () => {
@@ -159,6 +168,8 @@ describe('QrCodePage', () => {
     expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
     expect(screen.getByText('生成二维码')).toBeInTheDocument();
     expect(screen.queryByText('编辑')).not.toBeInTheDocument();
+    // 输入态应该隐藏二维码预览
+    expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
   });
 
   it('返回编辑态应该保留上次输入的内容', () => {

src/pages/QrCode/components/GeneratePanel.tsx

@@ -7,6 +7,9 @@ import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
+/** 文本预览的最大显示字符数 */
+const TEXT_PREVIEW_MAX_LENGTH = 100;
+
 export default function GeneratePanel() {
   const { t } = useI18n('qrCode');
   const {
@@ -21,33 +24,27 @@ export default function GeneratePanel() {
   const isInputStep = generatorState.step === 'input';
   const hasText = generatorState.textToEncode.trim().length > 0;
 
+  /** 截断文本用于预览显示 */
+  const getTruncatedText = (text: string) => {
+    if (text.length <= TEXT_PREVIEW_MAX_LENGTH) return text;
+    return text.slice(0, TEXT_PREVIEW_MAX_LENGTH) + '...';
+  };
+
+  // 输入态：只显示输入框和生成按钮
+  if (isInputStep) {
     return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
+      <div className="w-full select-none p-0.5">
-      {/* 左侧：输入态显示输入框，预览态显示文本预览 */}
         <div
           className={cn(
             'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
-          isInputStep && 'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
+            'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
           )}
         >
-        <div className="flex flex-col space-y-2.5 h-full">
+          <div className="flex flex-col space-y-2.5">
-          <div className="flex items-center justify-between">
             <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
-              {isInputStep ? t('qrCode:urlInputLabel') : t('qrCode:textPreviewLabel')}
+              {t('qrCode:urlInputLabel')}
             </Label>
 
-            {/* 预览态显示编辑按钮 */}
-            {!isInputStep && (
-              <Button variant="ghost" size="sm" onClick={backToEdit} className="h-7 px-2 text-xs">
-                <Pencil className="w-3 h-3 mr-1" />
-                {t('qrCode:editButton')}
-              </Button>
-            )}
-          </div>
-
-          <div className="flex-1 min-h-0">
-            {isInputStep ? (
-              /* 输入态：可编辑的输入框 */
             <TextInputArea
               value={generatorState.textToEncode}
               onChange={setTextToEncode}
@@ -60,21 +57,7 @@ export default function GeneratePanel() {
               externalError={generatorState.inputError || undefined}
               onClear={() => setTextToEncode('')}
             />
-            ) : (
-              /* 预览态：只读文本预览 */
-              <div
-                className="h-full min-h-[150px] p-3 rounded-md border border-input bg-muted/50 overflow-auto"
-                title={generatorState.savedText}
-              >
-                <p className="text-sm text-foreground whitespace-pre-wrap break-all">
-                  {generatorState.savedText}
-                </p>
-              </div>
-            )}
-          </div>
 
-          {/* 输入态显示生成按钮 */}
-          {isInputStep && (
             <Button
               onClick={confirmGenerate}
               disabled={!hasText || generatorState.generating}
@@ -92,19 +75,40 @@ export default function GeneratePanel() {
                 </>
               )}
             </Button>
-          )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // 预览态：显示文本预览 + 二维码
+  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">
+          <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">
+            <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"
+          title={generatorState.savedText}
+        >
+          {getTruncatedText(generatorState.savedText)}
         </div>
       </div>
 
-      {/* 右侧：二维码预览区域 */}
+      {/* 二维码预览区域 */}
-      <div className="flex flex-col h-full">
       <QrCodePreview
         qrCodeDataUrl={generatorState.qrCodeDataUrl}
         onDownload={downloadQrCode}
         onCopy={copyQrCode}
-          placeholderText={isInputStep ? t('qrCode:generateFirstHint') : undefined}
       />
     </div>
-    </div>
   );
 }