refactor: 统一中文文案并简化组件结构，提升代码可读性

移除 chrome.i18n 后，将各功能页面、布局与工具模块的 UI 文案改为内联中文；删除冗余注释与过度抽象（如 ToolCard、StatCard），精简 props 与状态管理；同步优化 JsonTools、StorageCleaner、Timestamp、TestDataGenerator、Dashboard、 Base64Converter、RightClickRestorer、TextStatistics、TopBar、RouterProvider、 ThemeModeProvider 及生成器库与 utils 工具文件。
2026-06-27 10:49:36 +08:00
parent f3a9838017
commit d38bafe237
85 changed files with 324 additions and 864 deletions
@@ -6,7 +6,6 @@ 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() {
@@ -22,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">
@@ -40,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">
-              {'输入 URL 或文本'}
+              输入 URL 或文本
            </Label>

            <TextInputArea
              value={generatorState.textToEncode}
              onChange={setTextToEncode}
-              placeholder={'请输入 URL 或文本内容，将自动生成二维码'}
+              placeholder="请输入 URL 或文本内容，将自动生成二维码"
              showCount={true}
              showClear={true}
              allowCopy={false}
@@ -64,12 +61,12 @@ export default function GeneratePanel() {
              {generatorState.generating ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  {'生成中...'}
+                  生成中...
                </>
              ) : (
                <>
                  <QrCode className="w-4 h-4 mr-2" />
-                  {'生成二维码'}
+                  生成二维码
                </>
              )}
            </Button>
@@ -79,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">
-            {'原始文本'}
+            原始文本
          </Label>
          <Button variant="ghost" size="sm" onClick={backToEdit} className="h-6 px-2 text-xs">
            <Pencil className="w-3 h-3 mr-1" />
-            {'编辑'}
+            编辑
          </Button>
        </div>
        <div
@@ -101,7 +96,6 @@ export default function GeneratePanel() {
        </div>
      </div>

-      {/* 二维码预览区域（自适应剩余空间） */}
      <QrCodePreview
        qrCodeDataUrl={generatorState.qrCodeDataUrl}
        onDownload={downloadQrCode}
@@ -1,21 +1,14 @@
-import { useCallback, useRef } from 'react';
 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;
-  /** 文件预览 URL */
  previewUrl: string;
-  /** 是否正在拖拽 */
  dragging: boolean;
-  /** 拖拽状态变更回调 */
  onDraggingChange: (dragging: boolean) => void;
 }

@@ -27,26 +20,18 @@ const ImageUploader = ({
  dragging,
  onDraggingChange,
 }: ImageUploaderProps) => {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleFileChange = useCallback(
-    (file: File) => {
-      onFileChange(file);
-    },
-    [onFileChange],
-  );
-
-  const handleClearFile = useCallback(() => {
+  const handleClearFile = () => {
    if (previewUrl) {
      URL.revokeObjectURL(previewUrl);
    }
    onClearFile();
    toast.success('图片已清除');
-  }, [previewUrl, onClearFile]);
+  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files.length > 0) {
-      handleFileChange(e.target.files[0]);
+    const file = e.target.files?.[0];
+    if (file) {
+      onFileChange(file);
    }
  };

@@ -64,7 +49,7 @@ const ImageUploader = ({
    onDraggingChange(false);
    const droppedFile = e.dataTransfer.files?.[0];
    if (droppedFile) {
-      handleFileChange(droppedFile);
+      onFileChange(droppedFile);
    }
  };

@@ -82,7 +67,6 @@ const ImageUploader = ({
      onDrop={handleDrop}
    >
      <input
-        ref={fileInputRef}
        type="file"
        accept="image/*"
        onChange={handleInputChange}
@@ -113,7 +97,7 @@ const ImageUploader = ({
              </Button>
            </div>
            <span className="block text-sm text-muted-foreground mt-2">{selectedFile.name}</span>
-            <span className="block text-xs text-muted-foreground">{'点击更换图片'}</span>
+            <span className="block text-xs text-muted-foreground">点击更换图片</span>
          </div>
        ) : (
          <>
@@ -122,10 +106,10 @@ const ImageUploader = ({
              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 格式'}
+              支持 PNG、JPG、WEBP、Base64 格式
            </span>
          </>
        )}
@@ -13,7 +13,6 @@ export default function ParsePanel() {

  const hasFile = parserState.selectedFile !== null;

-  // 全局粘贴事件监听
  const handlePaste = useCallback(
    async (e: ClipboardEvent) => {
      const items = e.clipboardData?.items;
@@ -56,7 +55,6 @@ export default function ParsePanel() {
    };
  }, [handlePaste]);

-  // 未上传图片：只显示上传区域
  if (!hasFile) {
    return (
      <div className="w-full select-none p-0.5">
@@ -72,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">
-            {'已上传图片'}
+            已上传图片
          </Label>
          <Button variant="ghost" size="sm" onClick={handleClearFile} className="h-6 px-2 text-xs">
            <RefreshCw className="w-3 h-3 mr-1" />
-            {'重新上传'}
+            重新上传
          </Button>
        </div>
        <div className="flex items-center gap-3 bg-muted/50 rounded-md p-2">
@@ -95,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">{'解析中...'}</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',
@@ -110,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">
-            {'解析结果'}
+            解析结果
          </Label>

          <TextInputArea
@@ -4,15 +4,10 @@ import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';

-// 继承原生 HTML Div 属性，方便外部无缝扩充类名或监听事件
 interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** 二维码 Data URL */
  qrCodeDataUrl: string;
-  /** 下载回调 */
  onDownload: () => void;
-  /** 复制回调 */
  onCopy: () => void;
-  /** 自定义占位文本，用于空状态提示 */
  placeholderText?: string;
 }

@@ -24,7 +19,6 @@ const QrCodePreview = ({
  className,
  ...props
 }: QrCodePreviewProps) => {
-  // 空状态下的虚线骨架屏
  if (!qrCodeDataUrl) {
    return (
      <EmptyPlaceholder
@@ -46,11 +40,6 @@ const QrCodePreview = ({
      {...props}
    >
      <div className="flex flex-col items-center w-full max-w-xs">
-        {/*
-          二维码容器适配：
-          在暗黑模式下，纯黑白的二维码如果直接暴露在暗色背景下，会导致手机摄像头极难识别。
-          通过裹一层 bg-white 和 p-2，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
-        */}
        <div className="p-2 bg-white rounded-lg shadow-sm border border-border/40">
          <img
            src={qrCodeDataUrl}
@@ -62,12 +51,12 @@ const QrCodePreview = ({
        <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>
+            <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>
+            <span className="truncate text-xs">复制二维码</span>
          </Button>
        </div>
      </div>