Develop (#74)

* feat: 生成成功改为 toast 提示
* refactor: 数据预览改为显示示例数据，简化组件逻辑
* fix: 非必填字段预览显示 null
* fix: 修复空值率与必填状态的逻辑
* fix: 切换为非必填时默认空值率 100%
* feat: 字段编辑弹窗添加「完成」按钮 去除关闭按钮，添加取消按钮
* refactor: 删除未使用的 defaultNullRate 功能
* feat: 优化规则管理功能
* fix: 更新 features 测试断言以匹配新增的 testDataGenerator
* refactor: 将 formatFileSize 重命名为 formatBytes 并移至通用工具模块
* refactor: 使用 Label 组件替换原生 label 元素，并在 DecodeResultPaper 中引入 Input 组件
* refactor: 规范化页面组件目录结构
* refactor(JsonTools): 规范化页面组件目录结构
* refactor(StorageCleaner): 规范化页面组件目录结构
* refactor(Timestamp): 规范化页面组件目录结构
* refactor(i18n): 移除 chrome.i18n 国际化，统一使用中文硬编码
* refactor(AppRoot): 移除 RouterProvider 组件，直接渲染子组件
* fix(RouterProvider): 将 goBack 重命名为 goHome，修复跨窗同步 merge 不一致
* fix(ThemeModeProvider): 修复主题快照同步与首屏闪烁问题
* refactor: 将 UI 文案改为中文并优化相关逻辑
* refactor: 清理代码注释并优化组件结构
* feat(Dashboard): 重构仪表板功能组件和逻辑
* refactor: 更新功能键名称并移除 README 文件
* refactor: 重构 TopBar 组件并更新项目结构
* feat(TopBar): 添加搜索功能组件并优化结构
* refactor: 统一使用 Button 组件替换原有 button 元素
* feat: 添加 EmptyPlaceholder 组件并更新相关页面
* feat(TextStatistics): 引入 StatCard 组件以优化统计信息展示
* feat(Timestamp): 重构时间戳转换功能，新增 ConverterForm 组件
* feat(Jwt): 重构 JWT 组件，新增常量和结果视图
* refactor(RightClickRestorer): 用状态配置表简化页面 UI 结构
* fix(business): 修复 skewedRandom 函数中的数学计算错误
* refactor(ImageUploader): 移除预览 URL 相关逻辑并简化粘贴事件处理
* feat(TestDataGenerator): 更新规则编辑提示和警告显示逻辑
* refactor(CopyButton.test): 移除冗余测试用例
* refactor(RouterProvider, chromeStorage, useContextMenuData): 更新存储获取逻辑以移除默认值参数
* refactor(代码重复): 抽取共享工具函数与 UI 组件，消除多处重复实现
* fix(RouterProvider): 修复初始加载状态逻辑，确保在加载前不覆盖 chrome.storage
* feat(TopBar): 添加搜索框快捷键提示功能及相关测试
* refactor(StorageCleaner): 移动 isRestrictedUrl 函数到独立模块并更新相关引用
* fix(StorageCleaner): 修复 IndexedDB 清理竞态、部分成功计数与刷新后状态同步
* fix: 修复路由初始化竞态、存储状态静默覆盖与存储清理误删
* refactor: 统一中文文案并简化组件结构，提升代码可读性
* refactor: 更新 Worker 消息类型以支持生成任务 ID
* fix: 修复 ruleStorage 写入失败处理与 CopyButton 成功态样式

src/pages/QrCode/components/GeneratePanel.tsx

@@ -1,17 +1,14 @@
 import { Loader2, Pencil, QrCode } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
-import QrCodePreview from '@/components/QrCodePreview';
-import { useI18n } from '@/utils/chromeI18n';
+import QrCodePreview from './QrCodePreview';
 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,
@@ -24,13 +21,11 @@ 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="w-full select-none p-0.5">
@@ -42,13 +37,13 @@ export default function GeneratePanel() {
         >
           <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')}
+              输入 URL 或文本
             </Label>
 
             <TextInputArea
               value={generatorState.textToEncode}
               onChange={setTextToEncode}
-              placeholder={t('qrCode:urlInputPlaceholder')}
+              placeholder="请输入 URL 或文本内容，将自动生成二维码"
               showCount={true}
               showClear={true}
               allowCopy={false}
@@ -66,12 +61,12 @@ export default function GeneratePanel() {
               {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>
@@ -81,18 +76,16 @@ export default function GeneratePanel() {
     );
   }
 
-  // 预览态：显示文本预览 + 二维码（紧凑布局，适配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
@@ -103,7 +96,6 @@ export default function GeneratePanel() {
         </div>
       </div>
 
-      {/* 二维码预览区域（自适应剩余空间） */}
       <QrCodePreview
         qrCodeDataUrl={generatorState.qrCodeDataUrl}
         onDownload={downloadQrCode}

src/pages/QrCode/components/ImageUploader.tsx

@@ -0,0 +1,121 @@
+import { Image, X } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+
+interface ImageUploaderProps {
+  selectedFile: File | null;
+  onFileChange: (file: File) => void;
+  onClearFile: () => void;
+  previewUrl: string;
+  dragging: boolean;
+  onDraggingChange: (dragging: boolean) => void;
+}
+
+const ImageUploader = ({
+  selectedFile,
+  onFileChange,
+  onClearFile,
+  previewUrl,
+  dragging,
+  onDraggingChange,
+}: ImageUploaderProps) => {
+  const handleClearFile = () => {
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+    onClearFile();
+    toast.success('图片已清除');
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      onFileChange(file);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    onDraggingChange(true);
+  };
+
+  const handleDragLeave = () => {
+    onDraggingChange(false);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    onDraggingChange(false);
+    const droppedFile = e.dataTransfer.files?.[0];
+    if (droppedFile) {
+      onFileChange(droppedFile);
+    }
+  };
+
+  return (
+    <div
+      className={`flex flex-col items-center justify-center h-[250px] border-2 border-dashed rounded-xl p-4 cursor-pointer transition-all duration-200 ${
+        dragging
+          ? 'border-green-600 bg-green-50'
+          : selectedFile
+            ? 'border-green-600 bg-green-50/50'
+            : 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10'
+      }`}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <input
+        type="file"
+        accept="image/*"
+        onChange={handleInputChange}
+        className="hidden"
+        id="qr-code-upload"
+      />
+      <Label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
+        {selectedFile ? (
+          <div className="text-center w-full relative">
+            <div className="relative inline-block">
+              <img
+                src={previewUrl}
+                alt="QR Code Preview"
+                className="max-w-full max-h-40 rounded-lg object-contain"
+              />
+              <Button
+                type="button"
+                variant="destructive"
+                size="icon"
+                data-testid="ClearIcon"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleClearFile();
+                }}
+                className="absolute -top-2 -right-2 h-6 w-6 rounded-full"
+              >
+                <X className="w-3 h-3" />
+              </Button>
+            </div>
+            <span className="block text-sm text-muted-foreground mt-2">{selectedFile.name}</span>
+            <span className="block text-xs text-muted-foreground">点击更换图片</span>
+          </div>
+        ) : (
+          <>
+            <Image
+              data-testid="ImageIcon"
+              className="w-12 h-12 text-muted-foreground mx-auto mb-2"
+            />
+            <span className="block text-sm text-muted-foreground mb-1">
+              点击、拖拽或粘贴上传二维码图片
+            </span>
+            <span className="block text-xs text-muted-foreground">
+              支持 PNG、JPG、WEBP、Base64 格式
+            </span>
+          </>
+        )}
+      </Label>
+    </div>
+  );
+};
+
+export default ImageUploader;

src/pages/QrCode/components/ParsePanel.tsx

@@ -2,20 +2,17 @@ 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 ImageUploader from './ImageUploader';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 
 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) => {
       const items = e.clipboardData?.items;
@@ -27,7 +24,7 @@ export default function ParsePanel() {
           const file = items[i].getAsFile();
           if (file) {
             handleFileChange(file);
-            toast.success(t('qrCode:imagePasted'));
+            toast.success('图片粘贴成功，正在解析...');
           }
           return;
         }
@@ -41,14 +38,14 @@ export default function ParsePanel() {
           const blob = await response.blob();
           const file = new File([blob], 'pasted-image.png', { type: blob.type });
           handleFileChange(file);
-          toast.success(t('qrCode:imagePasted'));
+          toast.success('图片粘贴成功，正在解析...');
         } catch (error) {
           console.error('处理 Base64 图片失败:', error);
-          toast.error(t('qrCode:imagePasteError'));
+          toast.error('粘贴图片失败，请重试');
         }
       }
     },
-    [handleFileChange, t],
+    [handleFileChange],
   );
 
   useEffect(() => {
@@ -58,7 +55,6 @@ export default function ParsePanel() {
     };
   }, [handlePaste]);
 
-  // 未上传图片：只显示上传区域
   if (!hasFile) {
     return (
       <div className="w-full select-none p-0.5">
@@ -67,7 +63,6 @@ export default function ParsePanel() {
           onFileChange={handleFileChange}
           onClearFile={handleClearFile}
           previewUrl={parserState.previewUrl}
-          onPreviewUrlChange={(url) => setParserState((prev) => ({ ...prev, previewUrl: url }))}
           dragging={parserState.dragging}
           onDraggingChange={(dragging) => setParserState((prev) => ({ ...prev, dragging }))}
         />
@@ -75,18 +70,16 @@ export default function ParsePanel() {
     );
   }
 
-  // 已上传图片：显示图片预览 + 解析结果
   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">
@@ -98,13 +91,12 @@ export default function ParsePanel() {
           <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>
+              <p className="text-xs text-primary animate-pulse mt-1">解析中...</p>
             )}
           </div>
         </div>
       </div>
 
-      {/* 解析结果区域 */}
       <div
         className={cn(
           'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
@@ -113,7 +105,7 @@ export default function ParsePanel() {
       >
         <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>
 
           <TextInputArea
@@ -121,7 +113,7 @@ export default function ParsePanel() {
             readOnly={true}
             showClear={false}
             allowCopy={true}
-            placeholder={parserState.parsing ? '' : t('qrCode:resultPlaceholder')}
+            placeholder={parserState.parsing ? '' : '解析结果将显示在此处'}
             minRows={4}
             maxRows={8}
             externalError={parserState.parseError || undefined}

src/pages/QrCode/components/QrCodePreview.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Copy, Download } from 'lucide-react';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  qrCodeDataUrl: string;
+  onDownload: () => void;
+  onCopy: () => void;
+  placeholderText?: string;
+}
+
+const QrCodePreview = ({
+  qrCodeDataUrl,
+  onDownload,
+  onCopy,
+  placeholderText,
+  className,
+  ...props
+}: QrCodePreviewProps) => {
+  if (!qrCodeDataUrl) {
+    return (
+      <EmptyPlaceholder
+        className={cn('min-h-[200px] p-4', className)}
+        messageClassName="text-sm text-muted-foreground max-w-none"
+        {...props}
+      >
+        {placeholderText || '二维码将显示在这里'}
+      </EmptyPlaceholder>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        '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">
+        <div className="p-2 bg-white rounded-lg shadow-sm border border-border/40">
+          <img
+            src={qrCodeDataUrl}
+            alt="QR Code Preview"
+            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-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">下载二维码</span>
+          </Button>
+
+          <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">复制二维码</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QrCodePreview;