Merge pull request #58 from LingandRX/develop

chore: merge develop into main (v1.x.x)

public/_locales/zh/messages.json

@@ -576,6 +576,50 @@
     "message": "点击更换图片",
     "description": "Translation key: qrCode_clickToChange"
   },
+  "qrCode_generateButton": {
+    "message": "生成二维码",
+    "description": "Translation key: qrCode_generateButton"
+  },
+  "qrCode_editButton": {
+    "message": "编辑",
+    "description": "Translation key: qrCode_editButton"
+  },
+  "qrCode_textPreviewLabel": {
+    "message": "原始文本",
+    "description": "Translation key: qrCode_textPreviewLabel"
+  },
+  "qrCode_generateFirstHint": {
+    "message": "输入文本后点击「生成二维码」按钮",
+    "description": "Translation key: qrCode_generateFirstHint"
+  },
+  "qrCode_inputRequired": {
+    "message": "请输入内容",
+    "description": "Translation key: qrCode_inputRequired"
+  },
+  "qrCode_generateError": {
+    "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"
+  },
+  "qrCode_imageToQr": {
+    "message": "解析图片二维码",
+    "description": "Translation key: qrCode_imageToQr"
+  },
   "rightClickRestorer_loading": {
     "message": "正在加载...",
     "description": "Translation key: rightClickRestorer_loading"

src/components/QrCodePreview.tsx

@@ -12,12 +12,15 @@ interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   onDownload: () => void;
   /** 复制回调 */
   onCopy: () => void;
+  /** 自定义占位文本，用于空状态提示 */
+  placeholderText?: string;
 }
 
 const QrCodePreview = ({
   qrCodeDataUrl,
   onDownload,
   onCopy,
+  placeholderText,
   className,
   ...props
 }: QrCodePreviewProps) => {
@@ -33,7 +36,9 @@ const QrCodePreview = ({
         )}
         {...props}
       >
-        <p className="text-sm text-muted-foreground text-center">{t('qrCode:qrCodeWillShow')}</p>
+        <p className="text-sm text-muted-foreground text-center">
+          {placeholderText || t('qrCode:qrCodeWillShow')}
+        </p>
       </div>
     );
   }
@@ -41,34 +46,34 @@ const QrCodePreview = ({
   return (
     <div
       className={cn(
-        'flex flex-col justify-center items-center min-h-[200px] border border-input rounded-xl p-6 bg-muted/40',
+        'flex flex-col justify-center items-center border border-input rounded-xl p-4 bg-muted/40',
         className,
       )}
       {...props}
     >
       <div className="flex flex-col items-center w-full max-w-xs">
         {/*
-          2. 二维码容器适配：
+          二维码容器适配：
           在暗黑模式下，纯黑白的二维码如果直接暴露在暗色背景下，会导致手机摄像头极难识别。
-          通过裹一层 bg-white 和 p-3，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
+          通过裹一层 bg-white 和 p-2，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
         */}
-        <div className="p-3 bg-white rounded-lg shadow-sm border border-border/40">
+        <div className="p-2 bg-white rounded-lg shadow-sm border border-border/40">
           <img
             src={qrCodeDataUrl}
             alt="QR Code Preview"
-            className="w-56 h-56 max-w-full object-contain block animate-in fade-in duration-300"
+            className="w-48 h-48 max-w-full object-contain block animate-in fade-in duration-300"
           />
         </div>
 
-        <div className="flex w-full gap-2 mt-5">
-          <Button variant="outline" size="sm" onClick={onDownload} className="flex-1">
-            <Download className="w-4 h-4 text-muted-foreground" />
-            <span className="truncate">{t('qrCode:downloadButton')}</span>
+        <div className="flex w-full gap-2 mt-3">
+          <Button variant="outline" size="sm" onClick={onDownload} className="flex-1 h-8">
+            <Download className="w-3.5 h-3.5 text-muted-foreground" />
+            <span className="truncate text-xs">{t('qrCode:downloadButton')}</span>
           </Button>
 
-          <Button variant="default" size="sm" onClick={onCopy} className="flex-1">
-            <Copy className="w-4 h-4" />
-            <span className="truncate">{t('qrCode:copyQrButton')}</span>
+          <Button variant="default" size="sm" onClick={onCopy} className="flex-1 h-8">
+            <Copy className="w-3.5 h-3.5" />
+            <span className="truncate text-xs">{t('qrCode:copyQrButton')}</span>
           </Button>
         </div>
       </div>

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

@@ -7,6 +7,8 @@ vi.mock('lucide-react', async (importOriginal) => {
   return {
     ...actual,
     QrCode: () => <div data-testid="mock-lucide-qrcode">Icon</div>,
+    Pencil: () => <div data-testid="mock-lucide-pencil">Icon</div>,
+    Loader2: () => <div data-testid="mock-lucide-loader">Icon</div>,
   };
 });
 
@@ -32,20 +34,29 @@ vi.mock('@/components/ImageUploader', () => ({
   default: () => <div data-testid="image-uploader">ImageUploader</div>,
 }));
 
-vi.mock('qrious', () => ({
-  default: vi.fn().mockImplementation(() => ({
+vi.mock('qrious', () => {
+  return {
+    default: class QRious {
+      constructor() {
+        return {
           toDataURL: () => 'data:image/png;base64,mock',
-  })),
-}));
+        };
+      }
+    },
+  };
+});
 
 describe('QrCodePage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it('应该默认渲染生成模式', () => {
+  it('应该默认渲染生成模式的输入态', () => {
     render(<QrCodePage />);
-    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
+    expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
+    expect(screen.getByText('生成二维码')).toBeInTheDocument();
+    // 输入态应该隐藏二维码预览
+    expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
   });
 
   it('应该渲染模式切换按钮', () => {
@@ -58,27 +69,123 @@ 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('应该渲染输入区域的系统标签（对齐新版 Label 机制）', () => {
+  it('应该渲染输入区域的系统标签', () => {
     render(<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('生成二维码');
+    expect(generateButton).toBeInTheDocument();
+    expect(generateButton).toBeDisabled(); // 空输入时按钮应该禁用
+  });
+
+  it('有输入内容时生成按钮应该可用', () => {
+    render(<QrCodePage />);
+    const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    fireEvent.change(textarea, { target: { value: 'https://example.com' } });
+
+    const generateButton = screen.getByText('生成二维码');
+    expect(generateButton).not.toBeDisabled();
+  });
+
+  it('点击生成按钮应该切换到预览态', () => {
+    render(<QrCodePage />);
+
+    // 输入文本
+    const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    fireEvent.change(textarea, { target: { value: 'https://example.com' } });
+
+    // 点击生成按钮
+    const generateButton = screen.getByText('生成二维码');
+    fireEvent.click(generateButton);
+
+    // 验证切换到预览态
+    expect(screen.getByText('原始文本')).toBeInTheDocument();
+    expect(screen.getByText('编辑')).toBeInTheDocument();
+    expect(screen.queryByText('生成二维码')).not.toBeInTheDocument();
+    // 预览态应该显示二维码
+    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
+  });
+
+  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: longText } });
+
+    // 点击生成按钮
+    fireEvent.click(screen.getByText('生成二维码'));
+
+    // 验证显示截断的文本（80字符 + "..."）
+    const truncatedText = longText.slice(0, 80) + '...';
+    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('点击编辑按钮应该返回输入态', () => {
+    render(<QrCodePage />);
+
+    // 输入文本并生成
+    const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    fireEvent.change(textarea, { target: { value: 'https://example.com' } });
+    fireEvent.click(screen.getByText('生成二维码'));
+
+    // 点击编辑按钮
+    fireEvent.click(screen.getByText('编辑'));
+
+    // 验证返回输入态
+    expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
+    expect(screen.getByText('生成二维码')).toBeInTheDocument();
+    expect(screen.queryByText('编辑')).not.toBeInTheDocument();
+    // 输入态应该隐藏二维码预览
+    expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
+  });
+
+  it('返回编辑态应该保留上次输入的内容', () => {
+    render(<QrCodePage />);
+
+    // 输入文本并生成
+    const textarea = screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    fireEvent.change(textarea, { target: { value: 'https://example.com' } });
+    fireEvent.click(screen.getByText('生成二维码'));
+
+    // 点击编辑按钮
+    fireEvent.click(screen.getByText('编辑'));
+
+    // 验证输入框保留了上次的内容
+    const textareaAfterEdit =
+      screen.getByPlaceholderText('请输入 URL 或文本内容，将自动生成二维码');
+    expect(textareaAfterEdit).toHaveValue('https://example.com');
   });
 });

src/pages/QrCode/components/GeneratePanel.tsx

@@ -1,51 +1,114 @@
+import { Loader2, Pencil, QrCode } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
 import QrCodePreview from '@/components/QrCodePreview';
 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 TEXT_PREVIEW_MAX_LENGTH = 80;
+
 export default function GeneratePanel() {
   const { t } = useI18n('qrCode');
-  const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
+  const {
+    generatorState,
+    setTextToEncode,
+    confirmGenerate,
+    backToEdit,
+    downloadQrCode,
+    copyQrCode,
+  } = useQrCodeContext();
 
+  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',
             '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 select-none pl-0.5">
               {t('qrCode:urlInputLabel')}
             </Label>
 
-          <div className="flex-1 min-h-0">
             <TextInputArea
               value={generatorState.textToEncode}
               onChange={setTextToEncode}
               placeholder={t('qrCode:urlInputPlaceholder')}
               showCount={true}
               showClear={true}
-              allowCopy={true}
+              allowCopy={false}
               minRows={6}
               maxRows={12}
               externalError={generatorState.inputError || undefined}
               onClear={() => setTextToEncode('')}
             />
+
+            <Button
+              onClick={confirmGenerate}
+              disabled={!hasText || generatorState.generating}
+              className="w-full"
+            >
+              {generatorState.generating ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  {t('qrCode:generating')}
+                </>
+              ) : (
+                <>
+                  <QrCode className="w-4 h-4 mr-2" />
+                  {t('qrCode:generateButton')}
+                </>
+              )}
+            </Button>
           </div>
         </div>
       </div>
+    );
+  }
+
+  // 预览态：显示文本预览 + 二维码（紧凑布局，适配popup窗口）
+  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:textPreviewLabel')}
+          </Label>
+          <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 px-3 py-2 cursor-default line-clamp-1"
+          title={generatorState.savedText}
+        >
+          {getTruncatedText(generatorState.savedText)}
+        </div>
+      </div>
 
-      <div className="flex flex-col h-full">
+      {/* 二维码预览区域（自适应剩余空间） */}
       <QrCodePreview
         qrCodeDataUrl={generatorState.qrCodeDataUrl}
         onDownload={downloadQrCode}
         onCopy={copyQrCode}
       />
     </div>
-    </div>
   );
 }

src/pages/QrCode/components/ParsePanel.tsx

@@ -1,9 +1,11 @@
 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';
 
@@ -11,6 +13,8 @@ export default function ParsePanel() {
   const { t } = useI18n('qrCode');
   const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
 
+  const hasFile = parserState.selectedFile !== null;
+
   // 全局粘贴事件监听
   const handlePaste = useCallback(
     async (e: ClipboardEvent) => {
@@ -54,9 +58,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 +72,62 @@ 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>
+            {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>
   );
 }

src/pages/QrCode/contexts/QrCodeContext.ts

@@ -8,6 +8,10 @@ export interface QrCodeContextValue {
 
   generatorState: QrCodeGeneratorState;
   setTextToEncode: (text: string) => void;
+  /** 显式触发生成二维码并切换到预览态 */
+  confirmGenerate: () => void;
+  /** 返回编辑态，保留上次输入内容 */
+  backToEdit: () => void;
 
   downloadQrCode: () => void;
   copyQrCode: () => Promise<void>;

src/pages/QrCode/hooks/useQrCode.ts

@@ -1,42 +1,61 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import QRious from 'qrious';
 import { toast } from 'sonner';
 import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 import { useI18n } from '@/utils/chromeI18n';
-import { useDebounce } from '@/utils/useDebounce';
 import type { QrCodeContextValue } from '../contexts/QrCodeContext';
 import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
 
-export function useQrCode(): QrCodeContextValue {
-  const { t } = useI18n('qrCode');
+/** 防抖延迟时间（毫秒） */
+const DEBOUNCE_DELAY = 500;
 
-  const [mode, setMode] = useState<QrCodeMode>('generate');
+/** 检测文本是否为URL格式 */
+function isUrl(text: string): boolean {
+  const trimmed = text.trim();
+  if (!trimmed) return false;
 
-  const [generatorState, setGeneratorState] = useState<
-    Omit<QrCodeGeneratorState, 'generating' | 'qrCodeDataUrl'>
-  >({
-    textToEncode: '',
-    inputError: '',
-  });
+  // 检查是否以 http:// 或 https:// 开头
+  if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
+    return true;
+  }
 
-  const [parserState, setParserState] = useState<QrCodeParserState>({
-    decodedResult: '',
-    parsing: false,
-    parseError: '',
-    selectedFile: null,
-    previewUrl: '',
-    dragging: false,
-  });
+  // 检查是否为域名格式（包含.且不以特殊字符开头）
+  const domainPattern = /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\.[a-zA-Z]{2,})+([/:].*)?$/;
+  return domainPattern.test(trimmed);
+}
 
-  const debouncedTextToEncode = useDebounce(generatorState.textToEncode, 200);
+/** 检测URL是否为图片格式 */
+function isImageUrl(url: string): boolean {
+  const trimmedUrl = url.trim().toLowerCase();
 
-  const qrCodeDataUrl = useMemo(() => {
-    const text = debouncedTextToEncode.trim();
-    if (!text) return '';
+  // 检查是否为 data:image 格式
+  if (trimmedUrl.startsWith('data:image/')) {
+    return true;
+  }
+
+  // 检查是否包含图片扩展名
+  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.ico'];
+  if (imageExtensions.some((ext) => trimmedUrl.includes(ext))) {
+    return true;
+  }
+
+  // 检查URL路径中是否包含图片相关关键词
+  const imageKeywords = ['/image/', '/img/', '/photo/', '/pic/', '/upload/'];
+  if (imageKeywords.some((keyword) => trimmedUrl.includes(keyword))) {
+    return true;
+  }
+
+  return false;
+}
+
+/** 生成二维码的核心逻辑 */
+function generateQrCodeDataUrl(text: string): string {
+  const trimmedText = text.trim();
+  if (!trimmedText) return '';
 
   try {
-      let url = text;
+    let url = trimmedText;
     if (!url.startsWith('http://') && !url.startsWith('https://')) {
       url = 'https://' + url;
     }
@@ -53,28 +72,220 @@ export function useQrCode(): QrCodeContextValue {
 
     return qr.toDataURL();
   } catch (error) {
-      console.error('QR code generation sync task failed:', error);
+    console.error('QR code generation failed:', error);
     return '';
   }
-  }, [debouncedTextToEncode]);
+}
 
-  const fullGeneratorState = useMemo<QrCodeGeneratorState>(
-    () => ({
-      ...generatorState,
+export function useQrCode(): QrCodeContextValue {
+  const { t } = useI18n('qrCode');
+
+  const [mode, setMode] = useState<QrCodeMode>('generate');
+
+  const [generatorState, setGeneratorState] = useState<QrCodeGeneratorState>({
+    step: 'input',
+    textToEncode: '',
+    savedText: '',
+    qrCodeDataUrl: '',
+    generating: false,
+    inputError: '',
+  });
+
+  const [parserState, setParserState] = useState<QrCodeParserState>({
+    decodedResult: '',
+    parsing: false,
+    parseError: '',
+    selectedFile: null,
+    previewUrl: '',
+    dragging: false,
+  });
+
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // 清除防抖定时器
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  /** 自动检测URL并生成二维码 */
+  const autoGenerateIfUrl = useCallback(
+    (text: string) => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+
+      if (!isUrl(text)) {
+        return;
+      }
+
+      debounceTimerRef.current = setTimeout(() => {
+        setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
+
+        const qrCodeDataUrl = generateQrCodeDataUrl(text);
+
+        if (qrCodeDataUrl) {
+          setGeneratorState((prev) => ({
+            ...prev,
+            step: 'preview',
+            savedText: text.trim(),
             qrCodeDataUrl,
             generating: false,
-    }),
-    [generatorState, qrCodeDataUrl],
+          }));
+        } else {
+          setGeneratorState((prev) => ({
+            ...prev,
+            generating: false,
+            inputError: t('qrCode:generateError'),
+          }));
+        }
+      }, DEBOUNCE_DELAY);
+    },
+    [t],
   );
 
-  const setTextToEncode = useCallback((text: string) => {
+  const setTextToEncode = useCallback(
+    (text: string) => {
       setGeneratorState((prev) => ({ ...prev, textToEncode: text, inputError: '' }));
+      autoGenerateIfUrl(text);
+    },
+    [autoGenerateIfUrl],
+  );
+
+  /** 手动触发生成二维码（用于非URL文本） */
+  const confirmGenerate = useCallback(() => {
+    const text = generatorState.textToEncode.trim();
+
+    if (!text) {
+      setGeneratorState((prev) => ({ ...prev, inputError: t('qrCode:inputRequired') }));
+      toast.error(t('qrCode:inputRequired'));
+      return;
+    }
+
+    setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
+
+    const qrCodeDataUrl = generateQrCodeDataUrl(text);
+
+    if (!qrCodeDataUrl) {
+      setGeneratorState((prev) => ({
+        ...prev,
+        generating: false,
+        inputError: t('qrCode:generateError'),
+      }));
+      toast.error(t('qrCode:generateError'));
+      return;
+    }
+
+    setGeneratorState((prev) => ({
+      ...prev,
+      step: 'preview',
+      savedText: text,
+      qrCodeDataUrl,
+      generating: false,
+    }));
+  }, [generatorState.textToEncode, t]);
+
+  /** 返回编辑态，保留上次输入内容 */
+  const backToEdit = useCallback(() => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    setGeneratorState((prev) => ({
+      ...prev,
+      step: 'input',
+      textToEncode: prev.savedText,
+      qrCodeDataUrl: '',
+      inputError: '',
+    }));
   }, []);
 
-  const handleContextMenuData = useCallback((payload: string) => {
+  /** 从图片URL解析二维码 */
+  const parseQrCodeFromUrl = useCallback(
+    async (imageUrl: string) => {
+      try {
+        setParserState((prev) => ({
+          ...prev,
+          parsing: true,
+          parseError: '',
+          decodedResult: '',
+          previewUrl: imageUrl,
+          selectedFile: null,
+        }));
+
+        // 从URL获取图片并转换为File对象
+        const response = await fetch(imageUrl);
+        const blob = await response.blob();
+        const file = new File([blob], 'qrcode-image.png', { type: blob.type });
+
+        setParserState((prev) => ({ ...prev, selectedFile: file }));
+
+        const result = await parseQrCodeFromFile(file);
+
+        if (result.success && result.data) {
+          setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
+          toast.success(t('qrCode:parseSuccess'));
+        } else {
+          const errorMsg = result.error || t('qrCode:noQrDetected');
+          setParserState((prev) => ({ ...prev, parseError: errorMsg }));
+          toast.error(errorMsg);
+        }
+      } catch (error) {
+        console.error('解析图片二维码失败:', error);
+        const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
+        setParserState((prev) => ({ ...prev, parseError: errorMsg }));
+        toast.error(errorMsg);
+      } finally {
+        setParserState((prev) => ({ ...prev, parsing: false }));
+      }
+    },
+    [t],
+  );
+
+  /** 右键菜单传入URL时，自动生成二维码或解析图片 */
+  const handleContextMenuData = useCallback(
+    (payload: string) => {
+      // 检测是否为图片URL，如果是则切换到解析模式
+      if (isImageUrl(payload)) {
+        setMode('parse');
+        void parseQrCodeFromUrl(payload);
+        return;
+      }
+
+      // 非图片URL，生成二维码
       setMode('generate');
-    setGeneratorState((prev) => ({ ...prev, textToEncode: payload, inputError: '' }));
-  }, []);
+
+      // 直接生成二维码，无需等待
+      const qrCodeDataUrl = generateQrCodeDataUrl(payload);
+
+      if (qrCodeDataUrl) {
+        // 生成成功，直接跳转到预览态
+        setGeneratorState((prev) => ({
+          ...prev,
+          step: 'preview',
+          textToEncode: payload,
+          savedText: payload.trim(),
+          qrCodeDataUrl,
+          generating: false,
+          inputError: '',
+        }));
+      } else {
+        // 生成失败，停留在输入态，显示文本供用户编辑
+        setGeneratorState((prev) => ({
+          ...prev,
+          step: 'input',
+          textToEncode: payload,
+          savedText: '',
+          qrCodeDataUrl: '',
+          generating: false,
+          inputError: '',
+        }));
+      }
+    },
+    [parseQrCodeFromUrl],
+  );
 
   useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
 
@@ -107,20 +318,20 @@ export function useQrCode(): QrCodeContextValue {
   );
 
   const downloadQrCode = useCallback(() => {
-    if (!qrCodeDataUrl) return;
+    if (!generatorState.qrCodeDataUrl) return;
 
     const link = document.createElement('a');
-    link.href = qrCodeDataUrl;
+    link.href = generatorState.qrCodeDataUrl;
     link.download = 'qrcode.png';
     link.click();
     toast.success(t('qrCode:qrCodeDownloadSuccess'));
-  }, [qrCodeDataUrl, t]);
+  }, [generatorState.qrCodeDataUrl, t]);
 
   const copyQrCode = useCallback(async () => {
-    if (!qrCodeDataUrl) return;
+    if (!generatorState.qrCodeDataUrl) return;
 
     try {
-      const response = await fetch(qrCodeDataUrl);
+      const response = await fetch(generatorState.qrCodeDataUrl);
       const blob = await response.blob();
 
       await navigator.clipboard.write([
@@ -134,7 +345,7 @@ export function useQrCode(): QrCodeContextValue {
       console.error('复制二维码失败:', error);
       toast.error(t('qrCode:copyError'));
     }
-  }, [qrCodeDataUrl, t]);
+  }, [generatorState.qrCodeDataUrl, t]);
 
   const handleFileChange = useCallback(
     (file: File) => {
@@ -178,8 +389,10 @@ export function useQrCode(): QrCodeContextValue {
   return {
     mode,
     setMode,
-    generatorState: fullGeneratorState,
+    generatorState,
     setTextToEncode,
+    confirmGenerate,
+    backToEdit,
     parseQrCode,
     downloadQrCode,
     copyQrCode,

src/pages/QrCode/types.ts

@@ -5,16 +5,23 @@
 /** 二维码功能核心主路由模式 */
 export type QrCodeMode = 'generate' | 'parse';
 
+/** 生成器的操作步骤 */
+export type GeneratorStep = 'input' | 'preview';
+
 /** * 二维码生成器的状态
- * 💡 架构优化：保留与全局 Context 骨架契合的形态，
- * 外部依然可以流畅读取这些状态，但在新架构下运行效率和稳定性大幅提升！
+ * 💡 架构优化：采用两步操作模式（输入态 → 预览态），
+ * 用户显式点击生成按钮后才生成二维码，体验更清晰！
  */
 export interface QrCodeGeneratorState {
+  /** 当前操作步骤：输入态或预览态 */
+  step: GeneratorStep;
   /** 受控的输入源文本（支持 URL 或任意文本快照） */
   textToEncode: string;
-  /** 由防抖源文本流在单次渲染内存中同步派生出的二维码 Base64 Data URL */
+  /** 保存的文本快照，用于预览态展示和编辑态回填 */
+  savedText: string;
+  /** 由用户显式触发生成的二维码 Base64 Data URL */
   qrCodeDataUrl: string;
-  /** 是否正在生成（流式架构下已默认为恒定 false 的非阻塞快照，保留作为 UI 骨架兼容） */
+  /** 是否正在生成 */
   generating: boolean;
   /** 输入文本校验或底层画布崩溃的错误提示信息 */
   inputError: string;

src/utils/__tests__/contextMenu.test.ts

@@ -12,8 +12,8 @@ describe('contextMenu', () => {
   });
 
   describe('CONTEXT_MENU_CONFIGS', () => {
-    it('应该包含 7 个菜单项配置', () => {
-      expect(CONTEXT_MENU_CONFIGS).toHaveLength(7);
+    it('应该包含 8 个菜单项配置', () => {
+      expect(CONTEXT_MENU_CONFIGS).toHaveLength(8);
     });
 
     it('应该有一个父级菜单项 Testing Tools', () => {
@@ -43,13 +43,22 @@ describe('contextMenu', () => {
       expect(pageMenus).toHaveLength(2);
       expect(pageMenus.map((m) => m.id)).toEqual(['storageCleaner', 'qrCode-page']);
     });
+
+    it('应该有 1 个 image 上下文的子菜单', () => {
+      const imageMenus = CONTEXT_MENU_CONFIGS.filter(
+        (c) => c.contexts[0] === 'image' && c.parentId === 'testing-tools-parent',
+      );
+      expect(imageMenus).toHaveLength(1);
+      expect(imageMenus[0].id).toBe('qrCode-image');
+      expect(imageMenus[0].title).toBe('🖼️ 解析图片二维码');
+    });
   });
 
   describe('createAllContextMenus', () => {
     it('应该为每个配置调用 chrome.contextMenus.create', () => {
       createAllContextMenus();
 
-      expect(chrome.contextMenus.create).toHaveBeenCalledTimes(7);
+      expect(chrome.contextMenus.create).toHaveBeenCalledTimes(8);
     });
 
     it('应该使用正确的参数创建菜单项', () => {
@@ -185,5 +194,33 @@ describe('contextMenu', () => {
         data: { featureKey: 'textStatistics', payload: 'short text' },
       });
     });
+
+    it('当点击 qrCode-image 菜单时应返回 qrCode 功能和图片URL', () => {
+      const info = createMockOnClickData({
+        srcUrl: 'https://example.com/image.png',
+      });
+
+      const result = parseContextMenuClick('qrCode-image', info);
+
+      expect(result).toEqual({
+        success: true,
+        data: { featureKey: 'qrCode', payload: 'https://example.com/image.png' },
+      });
+    });
+
+    it('srcUrl 优先于 selectionText 和 pageUrl', () => {
+      const info = createMockOnClickData({
+        srcUrl: 'https://example.com/image.png',
+        selectionText: 'selected text',
+        pageUrl: 'https://example.com',
+      });
+
+      const result = parseContextMenuClick('qrCode-image', info);
+
+      expect(result).toEqual({
+        success: true,
+        data: { featureKey: 'qrCode', payload: 'https://example.com/image.png' },
+      });
+    });
   });
 });

src/utils/contextMenu.ts

@@ -25,6 +25,7 @@ export const MAX_PAYLOAD_LENGTH = 10000;
 /** 菜单项 ID 到 PageType 的映射（仅处理非常规映射） */
 const MENU_ID_TO_PAGE_TYPE: Record<string, PageType> = {
   'qrCode-page': 'qrCode',
+  'qrCode-image': 'qrCode',
 };
 
 /**
@@ -77,6 +78,12 @@ export const CONTEXT_MENU_CONFIGS: ContextMenuItemConfig[] = [
     contexts: [chrome.contextMenus.ContextType.PAGE],
     parentId: PARENT_MENU_ID,
   },
+  {
+    id: 'qrCode-image',
+    title: '🖼️ 解析图片二维码',
+    contexts: [chrome.contextMenus.ContextType.IMAGE],
+    parentId: PARENT_MENU_ID,
+  },
 ];
 
 export function createAllContextMenus(): void {
@@ -96,6 +103,14 @@ export function parseContextMenuClick(
 ): ParseResult {
   const featureKey = getMenuPageType(menuItemId);
 
+  // 处理图片 URL（右键点击图片时）
+  if (info.srcUrl) {
+    return {
+      success: true,
+      data: { featureKey, payload: info.srcUrl },
+    };
+  }
+
   if (info.selectionText) {
     const text = info.selectionText;
 

web-ext.config.ts

@@ -1,6 +1,6 @@
 import { defineWebExtConfig } from 'wxt';
 
 export default defineWebExtConfig({
-  startUrls: ['https://www.baidu.com', 'chrome://extensions/'],
+  startUrls: ['https://www.bing.com', 'chrome://extensions/'],
   chromiumArgs: ['chrome://extensions/'],
 });