refactor(qrcode): 优化二维码转文本布局，与文本转二维码风格统一

- 未上传图片时只显示上传区域
- 上传图片后显示小图预览 + 解析结果
- 添加重新上传按钮
- 解析结果文本限制显示长度
- 新增国际化文案（已上传图片、重新上传、解析中等）
- 适配popup窗口紧凑布局

public/_locales/zh/messages.json

@@ -600,6 +600,22 @@
     "message": "生成二维码失败，请重试",
     "description": "Translation key: qrCode_generateError"
   },
+  "qrCode_uploadedImage": {
+    "message": "已上传图片",
+    "description": "Translation key: qrCode_uploadedImage"
+  },
+  "qrCode_reuploadButton": {
+    "message": "重新上传",
+    "description": "Translation key: qrCode_reuploadButton"
+  },
+  "qrCode_parsing": {
+    "message": "解析中...",
+    "description": "Translation key: qrCode_parsing"
+  },
+  "qrCode_resultPlaceholder": {
+    "message": "解析结果将显示在此处",
+    "description": "Translation key: qrCode_resultPlaceholder"
+  },
   "rightClickRestorer_loading": {
     "message": "正在加载...",
     "description": "Translation key: rightClickRestorer_loading"

src/pages/QrCode/components/ParsePanel.tsx

@@ -1,16 +1,30 @@
 import { useCallback, useEffect } from 'react';
+import { RefreshCw } from 'lucide-react';
 import { toast } from 'sonner';
 import TextInputArea from '@/components/TextInputArea';
 import ImageUploader from '@/components/ImageUploader';
 import { useI18n } from '@/utils/chromeI18n';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
+import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
+/** 解析结果文本的最大显示字符数 */
+const RESULT_PREVIEW_MAX_LENGTH = 80;
+
 export default function ParsePanel() {
   const { t } = useI18n('qrCode');
   const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
 
+  const hasFile = parserState.selectedFile !== null;
+  const hasResult = parserState.decodedResult.length > 0;
+
+  /** 截断文本用于预览显示 */
+  const getTruncatedText = (text: string) => {
+    if (text.length <= RESULT_PREVIEW_MAX_LENGTH) return text;
+    return text.slice(0, RESULT_PREVIEW_MAX_LENGTH) + '...';
+  };
+
   // 全局粘贴事件监听
   const handlePaste = useCallback(
     async (e: ClipboardEvent) => {
@@ -54,9 +68,10 @@ export default function ParsePanel() {
     };
   }, [handlePaste]);
 
+  // 未上传图片：只显示上传区域
+  if (!hasFile) {
     return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
-      <div className="flex flex-col h-full">
+      <div className="w-full select-none p-0.5">
         <ImageUploader
           selectedFile={parserState.selectedFile}
           onFileChange={handleFileChange}
@@ -67,32 +82,70 @@ export default function ParsePanel() {
           onDraggingChange={(dragging) => setParserState((prev) => ({ ...prev, dragging }))}
         />
       </div>
+    );
+  }
 
+  // 已上传图片：显示图片预览 + 解析结果
+  return (
+    <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:uploadedImage')}
+          </Label>
+          <Button variant="ghost" size="sm" onClick={handleClearFile} className="h-6 px-2 text-xs">
+            <RefreshCw className="w-3 h-3 mr-1" />
+            {t('qrCode:reuploadButton')}
+          </Button>
+        </div>
+        <div className="flex items-center gap-3 bg-muted/50 rounded-md p-2">
+          <img
+            src={parserState.previewUrl}
+            alt="Uploaded QR Code"
+            className="w-16 h-16 object-contain rounded"
+          />
+          <div className="flex-1 min-w-0">
+            <p className="text-sm text-foreground truncate">{parserState.selectedFile?.name}</p>
+            {hasResult && (
+              <p
+                className="text-xs text-muted-foreground mt-1 line-clamp-1"
+                title={parserState.decodedResult}
+              >
+                {getTruncatedText(parserState.decodedResult)}
+              </p>
+            )}
+            {parserState.parsing && (
+              <p className="text-xs text-primary animate-pulse mt-1">{t('qrCode:parsing')}</p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* 解析结果区域 */}
       <div
         className={cn(
           'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
           '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">
           <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider pl-0.5">
             {t('qrCode:resultLabel')}
           </Label>
 
-          <div className="flex-1 min-h-0">
           <TextInputArea
             value={parserState.decodedResult}
             readOnly={true}
             showClear={false}
             allowCopy={true}
-              placeholder=""
-              minRows={6}
-              maxRows={12}
+            placeholder={parserState.parsing ? '' : t('qrCode:resultPlaceholder')}
+            minRows={4}
+            maxRows={8}
             externalError={parserState.parseError || undefined}
           />
         </div>
       </div>
     </div>
-    </div>
   );
 }