From 306600a35ca43a75ba7b7699ba4366384657b97a 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:51:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor(qrcode):=20=E4=BC=98=E5=8C=96=E4=BA=8C?=
 =?UTF-8?q?=E7=BB=B4=E7=A0=81=E8=BD=AC=E6=96=87=E6=9C=AC=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8E=E6=96=87=E6=9C=AC=E8=BD=AC=E4=BA=8C=E7=BB=B4?=
 =?UTF-8?q?=E7=A0=81=E9=A3=8E=E6=A0=BC=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 未上传图片时只显示上传区域
- 上传图片后显示小图预览 + 解析结果
- 添加重新上传按钮
- 解析结果文本限制显示长度
- 新增国际化文案（已上传图片、重新上传、解析中等）
- 适配popup窗口紧凑布局
---
 public/_locales/zh/messages.json           | 16 ++++
 src/pages/QrCode/components/ParsePanel.tsx | 85 ++++++++++++++++++----
 2 files changed, 85 insertions(+), 16 deletions(-)

diff --git a/public/_locales/zh/messages.json b/public/_locales/zh/messages.json
index 0addc30..83eb2db 100644
--- a/public/_locales/zh/messages.json
+++ b/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"
diff --git a/src/pages/QrCode/components/ParsePanel.tsx b/src/pages/QrCode/components/ParsePanel.tsx
index a0a2aa6..115ef1c 100644
--- a/src/pages/QrCode/components/ParsePanel.tsx
+++ b/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]);
 
-  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">
+  // 未上传图片：只显示上传区域
+  if (!hasFile) {
+    return (
+      <div className="w-full select-none p-0.5">
         <ImageUploader
           selectedFile={parserState.selectedFile}
           onFileChange={handleFileChange}
@@ -67,30 +82,68 @@ 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}
-              externalError={parserState.parseError || undefined}
-            />
-          </div>
+          <TextInputArea
+            value={parserState.decodedResult}
+            readOnly={true}
+            showClear={false}
+            allowCopy={true}
+            placeholder={parserState.parsing ? '' : t('qrCode:resultPlaceholder')}
+            minRows={4}
+            maxRows={8}
+            externalError={parserState.parseError || undefined}
+          />
         </div>
       </div>
     </div>