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

移除 chrome.i18n 后，将各功能页面、布局与工具模块的 UI 文案改为内联中文；
删除冗余注释与过度抽象（如 ToolCard、StatCard），精简 props 与状态管理；
同步优化 JsonTools、StorageCleaner、Timestamp、TestDataGenerator、Dashboard、
Base64Converter、RightClickRestorer、TextStatistics、TopBar、RouterProvider、
ThemeModeProvider 及生成器库与 utils 工具文件。

src/pages/Base64Converter/components/Base64ConverterSection.tsx

@@ -40,12 +40,12 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
     decodedFileName,
     setCustomFileName,
     resetAll,
-    safeFileSelect,
+    handleFileSelect,
     maxFileSizeStr,
   } = useBase64Converter({ mode });
 
   const handleDirectionChange = (next: Base64ConvertDirection) => {
-    if (!next || next === direction) return;
+    if (next === direction) return;
     resetAll();
     setDirection(next);
   };
@@ -80,7 +80,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
               e.preventDefault();
               setIsDragging(false);
               const file = e.dataTransfer.files[0];
-              if (file) safeFileSelect(file);
+              if (file) void handleFileSelect(file);
             }}
             onClick={() => fileInputRef.current?.click()}
             className={cn(
@@ -99,7 +99,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
               hidden
               onChange={(e) => {
                 const file = e.target.files?.[0];
-                if (file) safeFileSelect(file);
+                if (file) void handleFileSelect(file);
               }}
             />
             {isLoading ? (
@@ -123,7 +123,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                   {formatBytes(info.size)} · {info.type}
                 </span>
                 <span className="text-[11px] font-medium text-primary/80 mt-1">
-                  {'点击或拖拽以替换文件'}
+                  点击或拖拽以替换文件
                 </span>
               </div>
             ) : (
@@ -158,17 +158,17 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
             <div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
               <div className="flex justify-between items-center select-none">
                 <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
-                  {'Base64 编码结果'}
+                  Base64 编码结果
                 </span>
                 <div className="flex gap-2">
                   <CopyButton
                     text={result.rawBase64}
-                    tooltip={'复制纯 Base64'}
+                    tooltip="复制纯 Base64"
                     className="h-6 px-2 rounded-md border text-[10px] font-bold"
                   />
                   <CopyButton
                     text={result.output}
-                    tooltip={'复制 Data URI'}
+                    tooltip="复制 Data URI"
                     className="h-6 px-2 rounded-md border text-[10px] font-bold"
                   />
                 </div>
@@ -186,14 +186,14 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
               <div className="flex items-center justify-between font-mono text-[10px] text-muted-foreground/70 select-none pt-1">
                 <div className="flex gap-4 items-center tabular-nums">
                   <span>
-                    {'原始大小'}:{' '}
+                    原始大小:{' '}
                     <span className="font-semibold text-foreground/80">
                       {formatBytes(result.originalBytes)}
                     </span>
                   </span>
                   <span className="text-border/60">|</span>
                   <span>
-                    {'编码大小'}:{' '}
+                    编码大小:{' '}
                     <span className="font-semibold text-foreground/80">
                       {formatBytes(result.outputBytes)}
                     </span>
@@ -206,7 +206,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                   className="h-7 rounded-md text-muted-foreground hover:text-destructive text-[11px] gap-1 px-2"
                 >
                   <Trash2 className="w-3.5 h-3.5" />
-                  {'清空'}
+                  清空
                 </Button>
               </div>
             </div>
@@ -215,7 +215,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
       ) : (
         <div className="flex flex-col space-y-4">
           <TextInputArea
-            placeholder={'输入需要解码的 Base64 或 data URI...'}
+            placeholder="输入需要解码的 Base64 或 data URI..."
             value={decodeInput}
             onChange={setDecodeInput}
             externalError={decodeError || undefined}

src/pages/Base64Converter/components/DecodeResultPaper.tsx

@@ -1,12 +1,3 @@
-/**
- * DecodeResultPaper
- *
- * FileMode 与 ImageMode 通用的 decode 结果展示组件。
- * 提取了二者 decode 输出区完全一致的结构：
- *   标题 → 可选预览（children）→ 文件信息 → 文件名输入 → 下载按钮
- *
- * FileMode 直接使用，ImageMode 通过 children 传入图片预览。
- */
 import { Download } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -14,19 +5,12 @@ import { Label } from '@/components/ui/label';
 import { formatBytes } from '@/utils/format';
 
 interface DecodeResultPaperProps {
-  /** 标题文案 */
   title: string;
-  /** 解码后推断的 MIME 类型 */
   mimeType: string;
-  /** 解码后 Blob 的大小（字节） */
   blobSize: number;
-  /** 当前文件名 */
   fileName: string;
-  /** 文件名变更回调 */
   onFileNameChange: (name: string) => void;
-  /** 下载按钮点击回调 */
   onDownload: () => void;
-  /** 可选的预览内容，ImageMode 用于渲染图片预览 */
   children?: React.ReactNode;
 }
 
@@ -41,31 +25,20 @@ export default function DecodeResultPaper({
 }: DecodeResultPaperProps) {
   return (
     <div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
-      {/* 标题 */}
       <span className="block mb-2 text-xs font-bold text-muted-foreground">{title}</span>
 
-      {/* 可选预览内容（ImageMode 的图片） */}
       {children}
 
-      {/* 文件信息 */}
       <div className="flex gap-4 mb-3">
-        <span className="text-xs text-muted-foreground">
-          {'推断的 MIME 类型'}: {mimeType}
-        </span>
-        <span className="text-xs text-muted-foreground">
-          {'解码大小'}: {formatBytes(blobSize)}
-        </span>
+        <span className="text-xs text-muted-foreground">推断的 MIME 类型: {mimeType}</span>
+        <span className="text-xs text-muted-foreground">解码大小: {formatBytes(blobSize)}</span>
       </div>
 
-      {/* 文件名输入 */}
       <div className="mb-3">
-        <Label className="block text-xs font-medium text-muted-foreground mb-1">
-          {'解码后文件名'}
-        </Label>
+        <Label className="block text-xs font-medium text-muted-foreground mb-1">解码后文件名</Label>
         <Input value={fileName} onChange={(e) => onFileNameChange(e.target.value)} />
       </div>
 
-      {/* 下载按钮 */}
       <Button
         variant="default"
         onClick={onDownload}
@@ -73,7 +46,7 @@ export default function DecodeResultPaper({
         className="w-full rounded-lg font-bold"
       >
         <Download className="mr-2 h-4 w-4" />
-        {'下载'}
+        下载
       </Button>
     </div>
   );

src/pages/Base64Converter/components/TextMode.tsx

@@ -8,7 +8,7 @@ interface TextModeProps {
   onSwitchToImageMode?: () => void;
 }
 
-export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
+export default function TextMode({ onSwitchToImageMode }: TextModeProps) {
   const {
     input,
     setInput,

src/pages/Base64Converter/useBase64Converter.ts

@@ -93,16 +93,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
     [mode],
   );
 
-  const safeFileSelect = useCallback(
-    (file: File) => {
-      handleFileSelect(file).catch((err) => {
-        console.error(`Base64 [${mode}] pipeline crash:`, err);
-      });
-    },
-    [handleFileSelect, mode],
-  );
-
-  const decodePipeline = useMemo(() => {
+  const decodeResult = useMemo(() => {
     const cleanedInput = debouncedDecodeInput.replace(/^data:image\/[a-z+]+;base64,/i, '').trim();
     if (!cleanedInput) return { decoded: null, error: null };
 
@@ -118,8 +109,8 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
     }
   }, [debouncedDecodeInput]);
 
-  const decoded = decodePipeline.decoded;
-  const decodeError = decodePipeline.error;
+  const decoded = decodeResult.decoded;
+  const decodeError = decodeResult.error;
 
   const decodedFileName = useMemo(() => {
     if (customFileName) return customFileName;
@@ -144,7 +135,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
     decodedFileName,
     setCustomFileName,
     resetAll,
-    safeFileSelect,
+    handleFileSelect,
     maxFileSizeStr,
   };
 }

src/pages/Base64Converter/useTextMode.ts

@@ -4,7 +4,7 @@ import { useContextMenuData } from '@/utils/useContextMenuData';
 
 const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
 
-const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
+const ERROR_MESSAGES: Record<string, string> = {
   'Invalid Base64 string': '无效的 Base64 字符串',
   'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
     '检测到二进制数据（如图像），请使用图像选项卡',
@@ -30,7 +30,7 @@ export function useTextMode() {
 
   useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
 
-  const conversionPipeline = useMemo(() => {
+  const conversion = useMemo(() => {
     const trimmed = debouncedInput.trim();
     if (!trimmed) return { output: '', error: null };
 
@@ -38,31 +38,26 @@ export function useTextMode() {
       if (direction === 'encode') {
         const result = textToBase64(debouncedInput);
         return { output: result.output, error: null };
-      } else {
-        const decoded = base64ToText(trimmed);
-        return { output: decoded, error: null };
       }
+      const decoded = base64ToText(trimmed);
+      return { output: decoded, error: null };
     } catch (e) {
       const message = e instanceof Error ? e.message : '';
-      const i18nKey = ERROR_MESSAGE_TO_I18N[message];
       return {
         output: '',
-        error: i18nKey || message || '转换失败',
+        error: ERROR_MESSAGES[message] || message || '转换失败',
       };
     }
   }, [debouncedInput, direction]);
 
-  const output = conversionPipeline.output;
-  const error = conversionPipeline.error;
+  const output = conversion.output;
+  const error = conversion.error;
 
   const placeholder =
     direction === 'encode' ? '输入需要编码为 Base64 的文本...' : '输入需要解码的 Base64 字符串...';
   const outputLabel = direction === 'encode' ? 'Base64 编码结果' : '解码文本结果';
 
-  const showImageHint = useMemo(
-    () => direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input),
-    [direction, input],
-  );
+  const showImageHint = direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input);
 
   const handleDirectionChange = (value: 'encode' | 'decode') => {
     if (value === direction) return;

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

@@ -1,8 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { getFeatureByKey } from '@/config/features';
-import type { DashboardFeatureItem } from '../useDashboard';
+import { resolveDashboardFeatures, type DashboardFeatureItem } from '../dashboardFeatures';
 import Index from '../index';
 
 const mockNavigateTo = vi.fn();
@@ -13,11 +12,7 @@ vi.mock('../useDashboard', () => ({
 }));
 
 function buildFeatureItem(key: 'timestamp' | 'jwt'): DashboardFeatureItem {
-  const feature = getFeatureByKey(key)!;
-  return {
-    key,
-    feature: feature as DashboardFeatureItem['feature'],
-  };
+  return resolveDashboardFeatures([key], [key])[0]!;
 }
 
 describe('Dashboard 页面', () => {

src/pages/Dashboard/dashboardFeatures.ts

@@ -14,10 +14,6 @@ function isDashboardFeature(feature: FeatureConfig): feature is DashboardFeature
   return feature.icon != null;
 }
 
-/**
- * 将页面 key 列表解析为 Dashboard 可展示的工具项。
- * 过滤条件：在 visiblePages 中且 feature 配置了 icon。
- */
 export function resolveDashboardFeatures(
   keys: PageType[],
   visiblePages: PageType[],

src/pages/Dashboard/index.tsx

@@ -9,7 +9,7 @@ export default function Index() {
       {showRecent && (
         <div className="flex flex-col gap-2">
           <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
-            {'最近使用'}
+            最近使用
           </h3>
           <div className="flex flex-wrap gap-2">
             {recentFeatures.map(({ key, feature }) => {
@@ -37,10 +37,10 @@ export default function Index() {
 
       <div className="flex flex-col gap-2">
         <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
-          {'全部工具'}
+          全部工具
         </h3>
         {visibleFeatures.length === 0 ? (
-          <p className="text-sm text-muted-foreground py-4 text-center">{'没有可用的工具'}</p>
+          <p className="text-sm text-muted-foreground py-4 text-center">没有可用的工具</p>
         ) : (
           <div
             className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}

src/pages/Dashboard/useDashboard.ts

@@ -3,8 +3,6 @@ import { useRouter } from '@/providers/RouterProvider';
 import type { PageType } from '@/types/storage';
 import { resolveDashboardFeatures, type DashboardFeatureItem } from './dashboardFeatures';
 
-export type { DashboardFeatureItem } from './dashboardFeatures';
-
 export interface UseDashboardReturn {
   visibleFeatures: DashboardFeatureItem[];
   recentFeatures: DashboardFeatureItem[];

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

@@ -5,7 +5,6 @@ import Index from '../index';
 describe('JsonTools 页面', () => {
   it('应该渲染模式切换按钮', () => {
     render(<Index />);
-    // 基本渲染测试：页面含多个模式切换按钮，应至少渲染一个
     expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
   });
 });

src/pages/JsonTools/components/DiffNavigator.tsx

@@ -30,7 +30,7 @@ export default function DiffNavigator({
         )}
         {...props}
       >
-        <span className="text-xs font-semibold text-muted-foreground/90">{'无差异'}</span>
+        <span className="text-xs font-semibold text-muted-foreground/90">无差异</span>
       </div>
     );
   }
@@ -43,11 +43,10 @@ export default function DiffNavigator({
       )}
       {...props}
     >
-      {/* 上一处差异按钮 */}
       <button
         type="button"
         disabled={isFirst}
-        aria-label={'上一个'}
+        aria-label="上一个"
         onClick={onPrev}
         className={cn(
           'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
@@ -63,11 +62,10 @@ export default function DiffNavigator({
         {total}
       </span>
 
-      {/* 下一处差异按钮 */}
       <button
         type="button"
         disabled={isLast}
-        aria-label={'下一个'}
+        aria-label="下一个"
         onClick={onNext}
         className={cn(
           'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',

src/pages/JsonTools/components/DiffResult.tsx

@@ -23,11 +23,11 @@ export default function DiffResult({
         {...props}
       >
         <div className="flex-1 min-w-0">
-          <SectionLabel text={'原始 JSON'} />
+          <SectionLabel text="原始 JSON" />
           <JsonTree node={result.root} side="left" activePath={activePath} />
         </div>
         <div className="flex-1 min-w-0">
-          <SectionLabel text={'目标 JSON'} />
+          <SectionLabel text="目标 JSON" />
           <JsonTree node={result.root} side="right" activePath={activePath} />
         </div>
       </div>
@@ -133,7 +133,6 @@ const UnifiedView = ({ node, depth, activePath }: UnifiedViewProps) => {
     );
   }
 
-  // 容器节点整块渲染处理
   if (node.type === 'added') {
     return (
       <UnifiedRow

src/pages/JsonTools/components/JsonConvertSection.tsx

@@ -28,12 +28,12 @@ const CONVERT_LABELS: Record<
 };
 
 interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
-  translationPrefix: string;
+  mode: string;
   convertFunction: ConvertFunction;
 }
 
 export default function JsonConvertSection({
-  translationPrefix,
+  mode,
   convertFunction,
   className,
   ...props
@@ -41,10 +41,8 @@ export default function JsonConvertSection({
   const [input, setInput] = useState('');
   const [debouncedInput, setDebouncedInput] = useState('');
 
-  const pk = translationPrefix;
-  const labels = CONVERT_LABELS[pk] || CONVERT_LABELS.yaml;
+  const labels = CONVERT_LABELS[mode] ?? CONVERT_LABELS.yaml;
 
-  // Debounce input
   useEffect(() => {
     const handle = setTimeout(() => {
       setDebouncedInput(input);
@@ -56,33 +54,25 @@ export default function JsonConvertSection({
     return validateJson(debouncedInput);
   }, [debouncedInput]);
 
-  const conversionPipeline = useMemo(() => {
+  const { result, runtimeError } = useMemo((): {
+    result: ConvertResult | null;
+    runtimeError: string | null;
+  } => {
     const trimmed = debouncedInput.trim();
-    if (!trimmed || error) return null;
+    if (!trimmed || error) return { result: null, runtimeError: null };
 
     try {
-      return convertFunction(debouncedInput);
+      return { result: convertFunction(debouncedInput), runtimeError: null };
     } catch (e) {
-      // 捕获可能从外部转换器（如 YAML.stringify）中抛出的底层异常
       return {
-        isRuntimeError: true,
-        errorMessage: e instanceof Error ? e.message : String(e),
+        result: null,
+        runtimeError: e instanceof Error ? e.message : String(e),
       };
     }
   }, [debouncedInput, error, convertFunction]);
 
-  const runtimeError =
-    conversionPipeline && 'isRuntimeError' in conversionPipeline
-      ? conversionPipeline.errorMessage
-      : null;
-  const result =
-    conversionPipeline && !('isRuntimeError' in conversionPipeline)
-      ? (conversionPipeline as ConvertResult)
-      : null;
-
   return (
     <div className={cn('w-full flex flex-col gap-4', className)} {...props}>
-      {/* 输入区 */}
       <TextInputArea
         placeholder={labels.inputPlaceholder}
         value={input}
@@ -95,8 +85,7 @@ export default function JsonConvertSection({
         onClear={() => setInput('')}
       />
 
-      {/* Result display */}
-      {result && result.output ? (
+      {result?.output ? (
         <JsonResultPanel
           title={labels.outputLabel}
           content={result.output}

src/pages/JsonTools/components/JsonFormatSection.tsx

@@ -18,7 +18,6 @@ export default function JsonFormatSection() {
   const [indentSize, setIndentSize] = useState<number>(2);
   const [sortKeys, setSortKeys] = useState(false);
 
-  // Debounce input
   useEffect(() => {
     const handle = setTimeout(() => {
       setDebouncedInput(input);
@@ -30,40 +29,31 @@ export default function JsonFormatSection() {
     return validateJson(debouncedInput);
   }, [debouncedInput]);
 
-  // Real-time formatting pipeline
-  const formattedPipeline = useMemo(() => {
+  const { result, runtimeError } = useMemo((): {
+    result: JsonFormatResult | null;
+    runtimeError: string | null;
+  } => {
     const trimmed = debouncedInput.trim();
-    if (!trimmed || error) return null;
+    if (!trimmed || error) return { result: null, runtimeError: null };
 
     try {
       const options: JsonFormatOptions = { indentSize, sortKeys };
-      return formatJson(debouncedInput, options);
+      return { result: formatJson(debouncedInput, options), runtimeError: null };
     } catch (e) {
       return {
-        isRuntimeError: true,
-        errorMessage: e instanceof SyntaxError ? e.message : String(e),
+        result: null,
+        runtimeError: e instanceof SyntaxError ? e.message : String(e),
       };
     }
   }, [debouncedInput, error, indentSize, sortKeys]);
 
-  const runtimeError =
-    formattedPipeline && 'isRuntimeError' in formattedPipeline
-      ? formattedPipeline.errorMessage
-      : null;
-  const result =
-    formattedPipeline && !('isRuntimeError' in formattedPipeline)
-      ? (formattedPipeline as JsonFormatResult)
-      : null;
-
   return (
     <div className="w-full flex flex-col gap-4">
-      {/* 工具控制栏 */}
       <div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
         <div className="flex gap-4 items-center w-full">
-          {/* 缩进配置区 */}
           <div className="flex gap-2 items-center shrink-0 select-none">
             <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-              {'缩进'}
+              缩进
             </span>
             <SwitchButtonGroup
               value={indentSize}
@@ -75,7 +65,6 @@ export default function JsonFormatSection() {
 
           <div className="h-4 w-px bg-border/60" />
 
-          {/* 键名排序区 */}
           <div
             onClick={() => setSortKeys(!sortKeys)}
             className="flex items-center gap-2 cursor-pointer select-none group py-1"
@@ -91,15 +80,14 @@ export default function JsonFormatSection() {
               htmlFor="sort-keys-checkbox"
               className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
             >
-              {'键名排序'}
+              键名排序
             </Label>
           </div>
         </div>
       </div>
 
-      {/* 满血版输入终端 */}
       <TextInputArea
-        placeholder={'输入需要格式化的 JSON...'}
+        placeholder="输入需要格式化的 JSON..."
         value={input}
         onChange={setInput}
         externalError={error || runtimeError || undefined}
@@ -110,8 +98,7 @@ export default function JsonFormatSection() {
         onClear={() => setInput('')}
       />
 
-      {/* 格式化结果流面板展示 */}
-      {result && result.formatted ? (
+      {result?.formatted ? (
         <JsonResultPanel
           title="格式化结果"
           content={result.formatted}

src/pages/JsonTools/components/JsonResultPanel.tsx

@@ -28,7 +28,7 @@ export default function JsonResultPanel({
 
           <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
             <span>
-              {'原始大小'}:{' '}
+              原始大小:{' '}
               <span className="font-semibold text-foreground/80">{formatBytes(originalBytes)}</span>
             </span>
             <span className="text-border/60">|</span>

src/pages/JsonTools/components/JsonTree.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ChevronDown, ChevronRight } from 'lucide-react'; // 用正统的矢量箭头平替原生的字符 '▾' '▸'
+import { ChevronDown, ChevronRight } from 'lucide-react';
 import type { DiffNode, DiffType } from '../types';
 import { cn } from '@/lib/utils';
 
@@ -82,14 +82,12 @@ const NodeRow = React.memo(
           ? false
           : onActivePath || depth < defaultExpandDepth;
 
-    // 当激活路径精准定位到本行时，平滑滚动至容器中心
     useEffect(() => {
       if (activePath === node.path) {
         rowRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
       }
     }, [activePath, node.path]);
 
-    // 占位空行分支：必须加 h-[22px] 锁定绝对等高，防止两侧文本高度塌陷发生高低错位
     if (!shouldRenderOnSide(node.type, side)) {
       return (
         <div
@@ -124,7 +122,6 @@ const NodeRow = React.memo(
 
       return (
         <div ref={rowRef} className="w-full flex flex-col">
-          {/* 大容器开端行 */}
           <div
             onClick={() => setOverride(expanded ? 'closed' : 'open')}
             className={cn(
@@ -135,7 +132,6 @@ const NodeRow = React.memo(
             )}
             style={indentStyle}
           >
-            {/* 折叠小箭头：升级为精巧的 Lucide SVG 矢量微动效 */}
             <span className="w-3.5 h-3.5 flex items-center justify-center text-muted-foreground/80 shrink-0">
               {expanded ? (
                 <ChevronDown className="h-3 w-3" />
@@ -164,7 +160,6 @@ const NodeRow = React.memo(
             )}
           </div>
 
-          {/* 容器子节点递归区 */}
           {expanded && (
             <div className={indentClass}>
               {node.children.map((child, idx) => (
@@ -181,7 +176,6 @@ const NodeRow = React.memo(
             </div>
           )}
 
-          {/* 大容器收尾行 */}
           {expanded && (
             <div
               className="text-muted-foreground/80 font-mono text-xs py-0.5 h-[22px] leading-relaxed"
@@ -195,7 +189,6 @@ const NodeRow = React.memo(
       );
     }
 
-    // 叶子数据行分支
     return (
       <div
         ref={rowRef}
@@ -207,7 +200,7 @@ const NodeRow = React.memo(
         )}
         style={indentStyle}
       >
-        <span className="w-3.5 shrink-0" /> {/* 与上方的折叠键轴线严格对齐 */}
+        <span className="w-3.5 shrink-0" />
         {!isRoot && (
           <span className="text-foreground/90 font-bold tracking-tight">{node.key}:</span>
         )}
@@ -231,7 +224,6 @@ export default function JsonTree({
   ...props
 }: JsonTreeProps) {
   return (
-    /* 最外层承载器：统一收拢至标准的 bg-card 与等宽 tabular-nums 控制轴 */
     <div
       className={cn(
         'rounded-xl border border-border bg-card text-card-foreground font-mono text-xs shadow-sm overflow-x-auto min-h-[200px] max-h-[520px] overflow-y-auto p-2.5 tabular-nums select-text',

src/pages/JsonTools/index.tsx

@@ -66,16 +66,16 @@ export default function Index() {
 
           <div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
             <JsonDiffInput
-              label={'原始 JSON'}
-              placeholder={'输入原始 JSON...'}
+              label="原始 JSON"
+              placeholder="输入原始 JSON..."
               value={leftInput}
               onChange={setLeftInput}
               error={leftError}
               minRows={9}
             />
             <JsonDiffInput
-              label={'目标 JSON'}
-              placeholder={'输入目标 JSON...'}
+              label="目标 JSON"
+              placeholder="输入目标 JSON..."
               value={rightInput}
               onChange={setRightInput}
               error={rightError}
@@ -106,11 +106,11 @@ export default function Index() {
       ) : pageMode === 'format' ? (
         <JsonFormatSection />
       ) : pageMode === 'yaml' ? (
-        <JsonConvertSection translationPrefix="yaml" convertFunction={yamlConvert} />
+        <JsonConvertSection mode="yaml" convertFunction={yamlConvert} />
       ) : pageMode === 'toml' ? (
-        <JsonConvertSection translationPrefix="toml" convertFunction={tomlConvert} />
+        <JsonConvertSection mode="toml" convertFunction={tomlConvert} />
       ) : (
-        <JsonConvertSection translationPrefix="minify" convertFunction={minifyConvert} />
+        <JsonConvertSection mode="minify" convertFunction={minifyConvert} />
       )}
     </div>
   );

src/pages/JsonTools/useJsonTools.ts

@@ -11,7 +11,6 @@ import type { ConvertFunction, ViewMode } from './types';
 export interface UseJsonToolsReturn {
   pageMode: JsonToolsPageMode;
   setPageMode: (mode: JsonToolsPageMode) => void;
-  // Diff mode state
   leftInput: string;
   rightInput: string;
   setLeftInput: (val: string) => void;
@@ -26,7 +25,6 @@ export interface UseJsonToolsReturn {
   handlePrev: () => void;
   handleNext: () => void;
   activePath: string | undefined;
-  // Convert functions
   yamlConvert: ConvertFunction;
   tomlConvert: ConvertFunction;
   minifyConvert: ConvertFunction;
@@ -35,13 +33,11 @@ export interface UseJsonToolsReturn {
 export function useJsonTools(): UseJsonToolsReturn {
   const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
 
-  // Diff inputs
   const [leftInput, setLeftInput] = useState('');
   const [rightInput, setRightInput] = useState('');
   const [debouncedLeft, setDebouncedLeft] = useState('');
   const [debouncedRight, setDebouncedRight] = useState('');
 
-  // Debounce
   useEffect(() => {
     const handle = setTimeout(() => {
       setDebouncedLeft(leftInput);
@@ -50,7 +46,6 @@ export function useJsonTools(): UseJsonToolsReturn {
     return () => clearTimeout(handle);
   }, [leftInput, rightInput]);
 
-  // Parse debounced inputs
   const parseState = useMemo(() => {
     const invalidMsg = '无效的 JSON 格式';
     return {
@@ -65,7 +60,6 @@ export function useJsonTools(): UseJsonToolsReturn {
   const [viewMode, setViewMode] = useState<ViewMode>('sideBySide');
   const [currentDiffIndex, setCurrentDiffIndex] = useState(0);
 
-  // Real-time diff computation
   const diffResult = useMemo(() => {
     const { left, right } = parseState;
     if (left.error || right.error || debouncedLeft.trim() === '' || debouncedRight.trim() === '') {
@@ -88,7 +82,6 @@ export function useJsonTools(): UseJsonToolsReturn {
 
   const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
 
-  // Convert functions
   const yamlConvert: ConvertFunction = useCallback((text: string) => {
     const r = jsonToYaml(text);
     return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };

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

@@ -2,12 +2,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import ImageUploader from '../components/ImageUploader';
 
-// 配置多端一致性常驻桩（WXT 规范）
 const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
 (globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
 (globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
 
-// 模拟 URL API
 const mockCreateObjectURL = vi.fn();
 const mockRevokeObjectURL = vi.fn();
 Object.defineProperty(window.URL, 'createObjectURL', { value: mockCreateObjectURL });
@@ -171,21 +169,4 @@ describe('ImageUploader 组件', () => {
       expect(pasteListeners).toHaveLength(0);
     });
   });
-
-  describe('样式测试', () => {
-    it('拖拽状态时应应用拖拽样式', () => {
-      const { container } = render(<ImageUploader {...defaultProps} dragging={true} />);
-      const dropzone = container.firstChild as HTMLElement;
-      expect(dropzone).toBeInTheDocument();
-    });
-
-    it('有文件时应应用有文件样式', () => {
-      const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
-      const { container } = render(
-        <ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
-      );
-      const dropzone = container.firstChild as HTMLElement;
-      expect(dropzone).toBeInTheDocument();
-    });
-  });
 });

src/pages/QrCode/components/GeneratePanel.tsx

@@ -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}

src/pages/QrCode/components/ImageUploader.tsx

@@ -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>
           </>
         )}

src/pages/QrCode/components/ParsePanel.tsx

@@ -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

src/pages/QrCode/components/QrCodePreview.tsx

@@ -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>

src/pages/QrCode/hooks/useQrCode.ts

@@ -12,32 +12,26 @@ function isUrl(text: string): boolean {
   const trimmed = text.trim();
   if (!trimmed) return false;
 
-  // 检查是否以 http:// 或 https:// 开头
   if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
     return true;
   }
 
-  // 检查是否为域名格式（包含.且不以特殊字符开头）
   const domainPattern = /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\.[a-zA-Z]{2,})+([/:].*)?$/;
   return domainPattern.test(trimmed);
 }
 
-/** 检测URL是否为图片格式 */
 function isImageUrl(url: string): boolean {
   const trimmedUrl = url.trim().toLowerCase();
 
-  // 检查是否为 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;
@@ -46,7 +40,6 @@ function isImageUrl(url: string): boolean {
   return false;
 }
 
-/** 生成二维码的核心逻辑 */
 function generateQrCodeDataUrl(text: string): string {
   const trimmedText = text.trim();
   if (!trimmedText) return '';
@@ -241,7 +234,17 @@ export function useQrCode(): QrCodeContextValue {
 
       const qrCodeDataUrl = generateQrCodeDataUrl(payload);
 
-      if (!qrCodeDataUrl) {
+      if (qrCodeDataUrl) {
+        setGeneratorState((prev) => ({
+          ...prev,
+          step: 'preview',
+          textToEncode: payload,
+          savedText: payload.trim(),
+          qrCodeDataUrl,
+          generating: false,
+          inputError: '',
+        }));
+      } else {
         setGeneratorState((prev) => ({
           ...prev,
           step: 'input',
@@ -328,7 +331,7 @@ export function useQrCode(): QrCodeContextValue {
       });
 
       parseQrCode(file).catch((err) => {
-        console.error('Parser standalone task thread exploded:', err);
+        console.error('解析二维码失败:', err);
       });
     },
     [parseQrCode],

src/pages/RightClickRestorer/constants.ts

@@ -6,10 +6,6 @@ export type RestorerStatus = 'unsupported' | 'locked' | 'unlocked';
 export const CARD_CLASS =
   'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden space-y-3';
 
-export const LOADING_TEXT = '正在加载...';
-
-export const DOMAIN_LABEL = '当前域名';
-
 interface StatusConfig {
   badgeVariant: 'default' | 'secondary' | 'destructive';
   badgeClassName: string;
@@ -50,7 +46,7 @@ export const STATUS_CONFIG: Record<RestorerStatus, StatusConfig> = {
     badgeClassName: 'gap-1 bg-green-600 hover:bg-green-700 shrink-0',
     badgeIcon: ShieldCheck,
     badgeLabel: '已解锁',
-    description: '点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。',
+    description: '当前网站右键菜单已临时解锁。刷新页面后需要重新解锁。',
     buttonIcon: MousePointerClick,
     buttonLabel: '右键已解锁',
     buttonDisabled: true,

src/pages/RightClickRestorer/index.tsx

@@ -2,7 +2,7 @@ import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Loader2 } from 'lucide-react';
-import { CARD_CLASS, DOMAIN_LABEL, LOADING_TEXT, STATUS_CONFIG } from './constants';
+import { CARD_CLASS, STATUS_CONFIG } from './constants';
 import { useRightClickRestorer } from './useRightClickRestorer';
 
 export default function Index() {
@@ -13,7 +13,7 @@ export default function Index() {
       <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
         <Loader2 className="h-6 w-6 text-muted-foreground/80 animate-spin" />
         <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
-          {LOADING_TEXT}
+          正在加载...
         </span>
       </div>
     );
@@ -24,9 +24,9 @@ export default function Index() {
   const ButtonIcon = config.buttonIcon;
 
   return (
-    <div className="p-4 w-full flex flex-col space-y-4">
+    <div className="p-4 w-full">
       <div className={CARD_CLASS}>
-        <Label className="text-sm font-medium">{DOMAIN_LABEL}</Label>
+        <Label className="text-sm font-medium">当前域名</Label>
         <div className="flex items-center justify-between gap-2">
           <code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
             {domain || '—'}
@@ -42,7 +42,7 @@ export default function Index() {
           className="w-full gap-2"
           disabled={config.buttonDisabled}
           variant={config.buttonVariant}
-          onClick={config.buttonDisabled ? undefined : () => void unlock()}
+          onClick={() => void unlock()}
         >
           <ButtonIcon className="h-4 w-4" />
           {config.buttonLabel}

src/pages/RightClickRestorer/useRightClickRestorer.ts

@@ -3,11 +3,6 @@ import { MessageAction, sendMessageToContent } from '@/utils/messages';
 import { isUnsupportedPageUrl } from '@/utils/restrictedUrls';
 import type { RestorerStatus } from './constants';
 
-function deriveStatus(isUnsupported: boolean, isUnlocked: boolean): RestorerStatus {
-  if (isUnsupported) return 'unsupported';
-  return isUnlocked ? 'unlocked' : 'locked';
-}
-
 export interface UseRightClickRestorerReturn {
   domain: string;
   isLoading: boolean;
@@ -16,10 +11,9 @@ export interface UseRightClickRestorerReturn {
 }
 
 export function useRightClickRestorer(): UseRightClickRestorerReturn {
-  const [domain, setDomain] = useState<string>('');
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [isUnlocked, setIsUnlocked] = useState<boolean>(false);
-  const [isUnsupported, setIsUnsupported] = useState<boolean>(false);
+  const [domain, setDomain] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [status, setStatus] = useState<RestorerStatus>('locked');
 
   useEffect(() => {
     const load = async () => {
@@ -30,13 +24,13 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
         setDomain(url ? new URL(url).hostname : '');
 
         if (isUnsupportedPageUrl(url)) {
-          setIsUnsupported(true);
+          setStatus('unsupported');
           return;
         }
 
         const response = await sendMessageToContent(MessageAction.QUERY_RIGHT_CLICK_STATUS);
         if (response?.success) {
-          setIsUnlocked(response.restored);
+          setStatus(response.restored ? 'unlocked' : 'locked');
         }
       } catch (err) {
         console.error('[RightClickRestorer] Failed to load state:', err);
@@ -49,12 +43,12 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
   }, []);
 
   async function unlock() {
-    if (isUnsupported) return;
+    if (status === 'unsupported') return;
 
     try {
       const response = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
       if (response?.success) {
-        setIsUnlocked(response.restored);
+        setStatus(response.restored ? 'unlocked' : 'locked');
       }
     } catch (err) {
       console.error('[RightClickRestorer] Failed to unlock:', err);
@@ -64,7 +58,7 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
   return {
     domain,
     isLoading,
-    status: deriveStatus(isUnsupported, isUnlocked),
+    status,
     unlock,
   };
 }

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

@@ -5,7 +5,6 @@ import Index from '../index';
 import { clearStorage, getCookieSize, getCurrentTab } from '@/utils/storageCleaner';
 import { toast } from 'sonner';
 
-// Mock the chrome APIs
 vi.mock('@/utils/chromeStorage', () => ({
   storageUtil: {
     get: vi.fn().mockResolvedValue(null),

src/pages/StorageCleaner/components/AutoRefreshToggle.tsx

@@ -1,18 +1,3 @@
-/**
- * 自动刷新开关行
- *
- * 用于 StorageCleaner 页面的操作区域内（非独立卡片），
- * 控制清理后是否自动刷新页面。左侧为标签文本，右侧为 shadcn/ui Switch 开关。
- *
- * @example
- * ```tsx
- * <AutoRefreshToggle
- *   reloadAfterClean={reloadAfterClean}
- *   onChange={(checked) => setReloadAfterClean(checked)}
- * />
- * ```
- */
-
 import React from 'react';
 import { cn } from '@/lib/utils';
 import { Switch } from '@/components/ui/switch';
@@ -22,20 +7,10 @@ export interface AutoRefreshToggleProps extends Omit<
   React.HTMLAttributes<HTMLDivElement>,
   'onChange'
 > {
-  /** 开关的当前状态（受控） */
   reloadAfterClean: boolean;
-  /** 状态变化时的回调函数 */
   onChange: (checked: boolean) => void;
 }
 
-/**
- * 自动刷新开关
- *
- * @param reloadAfterClean - 当前开关状态
- * @param onChange - 状态变化回调，接收新的布尔值
- * @param className - 额外的 CSS 类名，用于覆盖或扩展样式
- * @param props - 透传给外层 div 的其他 HTML 属性
- */
 export default function AutoRefreshToggle({
   reloadAfterClean,
   onChange,
@@ -54,7 +29,7 @@ export default function AutoRefreshToggle({
         htmlFor="auto-refresh-switch"
         className="text-xs font-bold text-muted-foreground/90 cursor-pointer select-none tracking-wide uppercase"
       >
-        {'清理后自动刷新页面'}
+        清理后自动刷新页面
       </Label>
 
       <Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />

src/pages/StorageCleaner/components/ErrorDisplay.tsx

@@ -24,7 +24,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
         </p>
 
         <p className="text-xs font-medium leading-relaxed text-muted-foreground/90 px-2">
-          {'存储清理功能仅适用于标准网页'}
+          存储清理功能仅适用于标准网页
         </p>
       </div>
     </div>

src/pages/StorageCleaner/components/OptionItem.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { formatBytes } from '@/utils/format';
 import { cn } from '@/lib/utils';
 import type { StorageSizeInfo } from '../useStorageCleaner';
-import { OPTION_LABELS } from '../constants';
+import { CLEAN_OPTION_KEYS, OPTION_LABELS } from '../constants';
 import { Checkbox } from '@/components/ui/checkbox';
 
 interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  labelKey: string;
+  labelKey: (typeof CLEAN_OPTION_KEYS)[number];
   checked: boolean;
   sizeInfo?: StorageSizeInfo;
   onChange: () => void;
@@ -22,8 +22,7 @@ export default function OptionItem({
 }: OptionItemProps) {
   const sizeValue = sizeInfo?.value;
   const isCount = sizeInfo?.displayType === 'count';
-  const label =
-    labelKey in OPTION_LABELS ? OPTION_LABELS[labelKey as keyof typeof OPTION_LABELS] : labelKey;
+  const label = OPTION_LABELS[labelKey];
 
   return (
     <div
@@ -58,7 +57,7 @@ export default function OptionItem({
           </span>
         ) : (
           <span className="block text-[10px] font-medium text-muted-foreground/50 mt-0.5 italic">
-            {'无数据'}
+            无数据
           </span>
         )}
       </div>

src/pages/StorageCleaner/components/StorageCleanerConfirm.tsx

@@ -10,7 +10,7 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { AlertTriangle } from 'lucide-react';
 import type { StorageCleanerOptions } from '@/types/storage';
-import { OPTION_LABELS } from '../constants';
+import { OPTION_LABELS, CLEAN_OPTION_KEYS } from '../constants';
 import { cn } from '@/lib/utils';
 
 export interface StorageCleanerConfirmProps {
@@ -26,11 +26,9 @@ export function StorageCleanerConfirm({
   onConfirm,
   options,
 }: StorageCleanerConfirmProps) {
-  const selectedOptions = Object.entries(options)
-    .filter(([_, value]) => value)
-    .map(([key]) =>
-      key in OPTION_LABELS ? OPTION_LABELS[key as keyof typeof OPTION_LABELS] : key,
-    );
+  const selectedOptions = CLEAN_OPTION_KEYS.filter((key) => options[key]).map(
+    (key) => OPTION_LABELS[key],
+  );
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
@@ -42,14 +40,14 @@ export function StorageCleanerConfirm({
         {/* 头部标题区域 */}
         <DialogHeader className="pt-1">
           <DialogTitle className="text-center text-lg font-bold tracking-tight text-foreground">
-            {'确认清理数据？'}
+            确认清理数据？
           </DialogTitle>
         </DialogHeader>
 
         {/* 内容主体：限制最大宽度，防止内部元素在大分辨率下被横向拉得太松散 */}
         <div className="text-center py-4 flex flex-col items-center w-full max-w-[280px] mx-auto">
           <DialogDescription className="mb-4 text-xs font-medium text-muted-foreground/90 leading-relaxed">
-            {'您将永久删除当前页面的以下选定存储项。'}
+            您将永久删除当前页面的以下选定存储项。
           </DialogDescription>
 
           {/* 待清理项目徽章群 */}
@@ -69,7 +67,7 @@ export function StorageCleanerConfirm({
           <div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px]">
             <AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
             <span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
-              {'此操作不可撤销'}
+              此操作不可撤销
             </span>
           </div>
         </div>
@@ -81,7 +79,7 @@ export function StorageCleanerConfirm({
             onClick={onConfirm}
             className="w-full text-xs font-bold shadow-sm h-9"
           >
-            {'确认清理'}
+            确认清理
           </Button>
           <Button
             variant="outline"
@@ -89,7 +87,7 @@ export function StorageCleanerConfirm({
             onClick={onClose}
             className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
           >
-            {'取消'}
+            取消
           </Button>
         </DialogFooter>
       </DialogContent>

src/pages/StorageCleaner/components/StorageOptionsGrid.tsx

@@ -51,7 +51,7 @@ export default function StorageOptionsGrid({
         className="border-t border-border flex justify-between items-center pl-3.5 pr-7 py-2.5 bg-muted/20 hover:bg-muted/40 cursor-pointer select-none transition-colors"
       >
         <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer tracking-wide uppercase">
-          {'全选所有项'}
+          全选所有项
         </Label>
 
         <Checkbox

src/pages/StorageCleaner/index.tsx

@@ -34,7 +34,7 @@ export default function Index() {
       <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
         <Loader2 className="h-6 w-6 text-muted-foreground/80" />
         <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
-          {'正在读取数据...'}
+          正在读取数据...
         </span>
       </div>
     );
@@ -73,7 +73,7 @@ export default function Index() {
             {loading ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                {'正在清理...'}
+                正在清理...
               </>
             ) : (
               '立即清理'

src/pages/StorageCleaner/useStorageCleaner.ts

@@ -117,7 +117,6 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     };
   }, []);
 
-  // 核心数据拉取链条
   const loadInfo = useCallback(async () => {
     const currentRequestId = ++requestIdRef.current;
     setIsRefreshingSizes(true);
@@ -189,7 +188,6 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     }, 300);
   }, []);
 
-  // 监听浏览器标签行为
   useEffect(() => {
     loadInfoRef.current().catch(console.error);
 
@@ -216,15 +214,12 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
 
     if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
     storageTimerRef.current = setTimeout(async () => {
-      try {
-        await storageUtil.set('storageCleaner/preferences', {
+      await storageUtil
+        .set('storageCleaner/preferences', {
           reloadAfterClean,
           selectedTypes: options,
-        });
-      } catch (err) {
-        console.error('Failed to save storage cleaner preferences:', err);
-        toast.warning('偏好保存失败，本次设置可能不会保留');
-      }
+        })
+        .catch(console.error);
     }, 500);
   }, [options, reloadAfterClean, isInitializing]);
 
@@ -251,7 +246,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     if (loadingRef.current) return;
 
     const tab = await getCurrentTab();
-    if (!tab || tab.id === undefined || !tab.url) {
+    if (!tab || !tab.id || !tab.url) {
       toast.warning('无法获取当前标签页');
       return;
     }
@@ -286,7 +281,6 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
       toast.error(`清理失败: ${String(err)}`);
     } finally {
       setLoading(false);
-      setShowConfirm(false);
     }
   }, [options, reloadAfterClean, loadInfo]);
 

src/pages/TestDataGenerator/components/DataPreview.tsx

@@ -75,7 +75,7 @@ export default function DataPreview({ fields }: DataPreviewProps) {
     return (
       <div className="flex flex-col items-center justify-center h-full text-center">
         <FileJson className="h-8 w-8 text-muted-foreground/30 mb-2" />
-        <p className="text-xs text-muted-foreground/50">{'配置字段后点击「生成数据」按钮'}</p>
+        <p className="text-xs text-muted-foreground/50">配置字段后点击「生成数据」按钮</p>
       </div>
     );
   }
@@ -87,10 +87,10 @@ export default function DataPreview({ fields }: DataPreviewProps) {
           <div className="h-5 w-5 rounded bg-primary/10 flex items-center justify-center">
             <FileText className="h-3 w-3 text-primary" />
           </div>
-          <span className="text-xs font-medium text-muted-foreground">{'示例数据'}</span>
+          <span className="text-xs font-medium text-muted-foreground">示例数据</span>
         </div>
         <span className="text-[10px] text-muted-foreground/50 bg-muted px-1.5 py-0.5 rounded">
-          {Object.keys(sampleData).length} {'字段'}
+          {Object.keys(sampleData).length} 字段
         </span>
       </div>
 

src/pages/TestDataGenerator/components/ExportPanel.tsx

@@ -50,27 +50,27 @@ export default function ExportPanel({ result }: ExportPanelProps) {
 
   return (
     <div className="space-y-2">
-      <h4 className="text-sm font-medium text-foreground">{'导出数据'}</h4>
+      <h4 className="text-sm font-medium text-foreground">导出数据</h4>
 
       <div className="grid grid-cols-2 gap-2">
         <Button variant="outline" size="sm" onClick={handleCopyJSON} className="h-9 gap-1.5">
           <Copy className="h-4 w-4" />
-          {'复制 JSON'}
+          复制 JSON
         </Button>
 
         <Button variant="outline" size="sm" onClick={handleCopyCSV} className="h-9 gap-1.5">
           <Copy className="h-4 w-4" />
-          {'复制 CSV'}
+          复制 CSV
         </Button>
 
         <Button variant="outline" size="sm" onClick={handleDownloadJSON} className="h-9 gap-1.5">
           <Download className="h-4 w-4" />
-          {'下载 JSON'}
+          下载 JSON
         </Button>
 
         <Button variant="outline" size="sm" onClick={handleDownloadCSV} className="h-9 gap-1.5">
           <Download className="h-4 w-4" />
-          {'下载 CSV'}
+          下载 CSV
         </Button>
       </div>
     </div>

src/pages/TestDataGenerator/components/FieldEditor.tsx

@@ -102,13 +102,13 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
       <div className="space-y-4">
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <Label className="text-sm font-medium text-foreground">{'字段名称'}</Label>
+            <Label className="text-sm font-medium text-foreground">字段名称</Label>
             <span className="text-xs text-muted-foreground">{field.name.length}/20</span>
           </div>
           <Input
             value={field.name}
             onChange={(e) => handleNameChange(e.target.value)}
-            placeholder={'请输入字段名称'}
+            placeholder="请输入字段名称"
             maxLength={20}
             className={`h-9 ${nameError ? 'border-destructive' : ''}`}
           />
@@ -117,7 +117,7 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
 
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <Label className="text-sm font-medium text-foreground">{'字段描述'}</Label>
+            <Label className="text-sm font-medium text-foreground">字段描述</Label>
             <span className="text-xs text-muted-foreground">
               {(field.description || '').length}/50
             </span>
@@ -125,7 +125,7 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
           <Input
             value={field.description || ''}
             onChange={(e) => handleDescriptionChange(e.target.value)}
-            placeholder={'可选，添加字段说明'}
+            placeholder="可选，添加字段说明"
             maxLength={50}
             className="h-9"
           />
@@ -134,14 +134,14 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
 
       <div className="space-y-3">
         <div className="flex items-center justify-between">
-          <Label className="text-sm font-medium text-foreground">{'必填'}</Label>
+          <Label className="text-sm font-medium text-foreground">必填</Label>
           <Switch checked={field.required} onCheckedChange={handleRequiredChange} />
         </div>
 
         {!field.required && (
           <div className="space-y-2 pl-1">
             <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">{'空值率'}</span>
+              <span className="text-sm text-muted-foreground">空值率</span>
               <Badge variant="secondary" className="text-xs">
                 {field.nullRate}%
               </Badge>
@@ -180,18 +180,18 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
       </div>
 
       <div className="flex items-center justify-between">
-        <Label className="text-sm font-medium text-foreground">{'唯一性约束'}</Label>
+        <Label className="text-sm font-medium text-foreground">唯一性约束</Label>
         <Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
       </div>
 
       <div className="space-y-2">
-        <Label className="text-sm font-medium text-foreground">{'数据生成器'}</Label>
+        <Label className="text-sm font-medium text-foreground">数据生成器</Label>
         <GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
       </div>
 
       {generator && (
         <div className="space-y-2">
-          <Label className="text-sm font-medium text-foreground">{'生成器参数'}</Label>
+          <Label className="text-sm font-medium text-foreground">生成器参数</Label>
           <GeneratorConfig
             generator={generator}
             params={field.params}

src/pages/TestDataGenerator/components/FieldItem.tsx

@@ -23,7 +23,6 @@ export default function FieldItem({ field, onClick }: FieldItemProps) {
       <div
         className={`h-full ${field.description ? 'flex flex-col justify-center' : 'flex items-center'}`}
       >
-        {/* 第一行：字段名 + 标签 */}
         <div className="flex items-center gap-1.5 overflow-hidden">
           <span className="font-medium text-sm text-foreground truncate shrink-0 max-w-[140px]">
             {field.name}
@@ -41,11 +40,10 @@ export default function FieldItem({ field, onClick }: FieldItemProps) {
           )}
           {field.unique && (
             <Badge variant="outline" className="text-[10px] shrink-0 px-1 py-0 text-blue-500">
-              {'唯一'}
+              唯一
             </Badge>
           )}
         </div>
-        {/* 第二行：描述 */}
         {field.description && (
           <p className="text-[11px] text-muted-foreground mt-0.5 truncate leading-tight">
             {field.description}

src/pages/TestDataGenerator/components/FieldList.tsx

@@ -86,7 +86,6 @@ function SortableFieldItem({
       }`}
     >
       <div className="flex items-center gap-2 h-full px-3 py-2">
-        {/* 拖拽手柄 */}
         <button
           className="cursor-grab active:cursor-grabbing p-1 rounded hover:bg-muted/50 touch-none shrink-0"
           {...attributes}
@@ -267,7 +266,7 @@ export default function FieldList({
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between mb-3">
         <h3 className="text-sm font-medium text-foreground">
-          {'字段'} ({fields.length}/{MAX_FIELDS})
+          字段 ({fields.length}/{MAX_FIELDS})
         </h3>
         <div className="flex items-center gap-2">
           {editingRule ? (
@@ -278,10 +277,10 @@ export default function FieldList({
                 onClick={handleUpdateRule}
                 disabled={fields.length === 0}
                 className="h-8 gap-1.5 px-2.5"
-                title={`${'编辑中'}: ${editingRule.name}`}
+                title={`编辑中: ${editingRule.name}`}
               >
                 <Save className="h-3.5 w-3.5" />
-                {'更新规则'}
+                更新规则
               </Button>
               <Button
                 variant="ghost"
@@ -290,7 +289,7 @@ export default function FieldList({
                 disabled={fields.length === 0}
                 className="h-8 px-2"
               >
-                {'另存为'}
+                另存为
               </Button>
             </>
           ) : (
@@ -302,7 +301,7 @@ export default function FieldList({
               className="h-8 gap-1.5 px-2.5"
             >
               <Save className="h-3.5 w-3.5" />
-              {'保存规则'}
+              保存规则
             </Button>
           )}
           <Button
@@ -313,7 +312,7 @@ export default function FieldList({
             className="h-8 gap-1.5 px-2.5"
           >
             <Plus className="h-4 w-4" />
-            {'添加字段'}
+            添加字段
           </Button>
         </div>
       </div>
@@ -322,8 +321,8 @@ export default function FieldList({
         {fields.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-8 text-center">
             <GripVertical className="h-10 w-10 text-muted-foreground/40 mb-3" />
-            <p className="text-sm text-muted-foreground">{'暂无字段'}</p>
-            <p className="text-xs text-muted-foreground/70 mt-1">{'点击上方按钮添加第一个字段'}</p>
+            <p className="text-sm text-muted-foreground">暂无字段</p>
+            <p className="text-xs text-muted-foreground/70 mt-1">点击上方按钮添加第一个字段</p>
           </div>
         ) : (
           <DndContext
@@ -405,7 +404,6 @@ export default function FieldList({
         )}
       </div>
 
-      {/* 保存规则对话框 */}
       <Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
         <DialogContent
           showCloseButton={false}
@@ -415,42 +413,41 @@ export default function FieldList({
             <Input
               value={ruleName}
               onChange={(e) => setRuleName(e.target.value)}
-              placeholder={'规则名称'}
+              placeholder="规则名称"
               className="h-9"
             />
             <Input
               value={ruleDescription}
               onChange={(e) => setRuleDescription(e.target.value)}
-              placeholder={'规则描述（可选）'}
+              placeholder="规则描述（可选）"
               className="h-9"
             />
           </div>
           <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
             <Button variant="ghost" size="sm" onClick={() => setShowSaveDialog(false)}>
-              {'取消'}
+              取消
             </Button>
             <Button size="sm" onClick={() => handleSave()} disabled={!ruleName.trim()}>
-              {'确认'}
+              确认
             </Button>
           </div>
         </DialogContent>
       </Dialog>
 
-      {/* 覆盖确认对话框 */}
       <Dialog open={showConfirmOverwrite} onOpenChange={setShowConfirmOverwrite}>
         <DialogContent
           showCloseButton={false}
           className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
         >
           <div className="flex-1 overflow-y-auto px-6 pb-4">
-            <p className="text-sm text-muted-foreground">{'已存在同名规则，是否覆盖保存？'}</p>
+            <p className="text-sm text-muted-foreground">已存在同名规则，是否覆盖保存？</p>
           </div>
           <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
             <Button variant="ghost" size="sm" onClick={() => setShowConfirmOverwrite(false)}>
-              {'取消'}
+              取消
             </Button>
             <Button size="sm" onClick={() => handleSave(true)}>
-              {'覆盖'}
+              覆盖
             </Button>
           </div>
         </DialogContent>

src/pages/TestDataGenerator/components/GenerateButton.tsx

@@ -1,6 +1,5 @@
 /**
  * 生成按钮组件
- * 显示生成按钮、加载状态和进度条
  */
 
 import { Play, Square } from 'lucide-react';
@@ -28,14 +27,13 @@ export default function GenerateButton({
         <>
           <Button variant="destructive" onClick={onCancel} className="w-full h-11 gap-2">
             <Square className="h-5 w-5" />
-            {'取消'}
+            取消
           </Button>
 
-          {/* 进度条 */}
           {progress && (
             <div className="space-y-2">
               <div className="flex items-center justify-between text-xs text-muted-foreground">
-                <span>{`已生成 ${progress.generated} / ${progress.total} 条`}</span>
+                <span>{`已生成 ${progress.generated.toLocaleString()} / ${progress.total.toLocaleString()} 条`}</span>
                 <span>{progress.progress}%</span>
               </div>
               <div className="h-2 bg-muted rounded-full overflow-hidden">
@@ -46,7 +44,7 @@ export default function GenerateButton({
               </div>
               {progress.estimatedTimeLeft !== undefined && (
                 <p className="text-xs text-muted-foreground text-center">
-                  {`预计剩余 ${progress.estimatedTimeLeft} 秒`}
+                  {`预计剩余 ${Math.ceil(progress.estimatedTimeLeft / 1000)} 秒`}
                 </p>
               )}
             </div>
@@ -55,7 +53,7 @@ export default function GenerateButton({
       ) : (
         <Button onClick={onClick} disabled={disabled} className="w-full h-11 gap-2">
           <Play className="h-5 w-5" />
-          {'生成数据'}
+          生成数据
         </Button>
       )}
     </div>

src/pages/TestDataGenerator/components/GenerateOptions.tsx

@@ -28,9 +28,8 @@ export default function GenerateOptions({
 }: GenerateOptionsProps) {
   return (
     <div className="space-y-4">
-      {/* 生成数量 */}
       <div className="space-y-2">
-        <Label className="text-sm font-medium text-foreground">{'生成数量'}</Label>
+        <Label className="text-sm font-medium text-foreground">生成数量</Label>
         <div className="flex flex-wrap gap-2">
           {COUNT_PRESETS.map((preset) => (
             <button
@@ -61,9 +60,8 @@ export default function GenerateOptions({
         />
       </div>
 
-      {/* 数据格式 */}
       <div className="space-y-2">
-        <Label className="text-sm font-medium text-foreground">{'数据格式'}</Label>
+        <Label className="text-sm font-medium text-foreground">数据格式</Label>
         <div className="flex gap-2">
           {FORMAT_OPTIONS.map((option) => (
             <button

src/pages/TestDataGenerator/components/GeneratorConfig.tsx

@@ -27,7 +27,7 @@ export default function GeneratorConfig({ generator, params, onChange }: Generat
   };
 
   if (generator.params.length === 0) {
-    return <p className="text-sm text-muted-foreground py-2">{'此生成器无可配置参数'}</p>;
+    return <p className="text-sm text-muted-foreground py-2">此生成器无可配置参数</p>;
   }
 
   return (
@@ -108,7 +108,7 @@ export default function GeneratorConfig({ generator, params, onChange }: Generat
                     .filter(Boolean),
                 )
               }
-              placeholder={'用逗号分隔多个值'}
+              placeholder="用逗号分隔多个值"
               className="h-9"
             />
           )}

src/pages/TestDataGenerator/components/GeneratorSelector.tsx

@@ -30,18 +30,16 @@ export default function GeneratorSelector({ selectedId, onChange }: GeneratorSel
 
   return (
     <div className="space-y-3">
-      {/* 搜索框 */}
       <div className="relative">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
         <Input
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder={'搜索生成器...'}
+          placeholder="搜索生成器..."
           className="pl-9 h-9"
         />
       </div>
 
-      {/* 分类标签 */}
       {!searchQuery && (
         <div className="flex flex-wrap gap-2">
           {generatorCategories.map((category) => {
@@ -64,7 +62,6 @@ export default function GeneratorSelector({ selectedId, onChange }: GeneratorSel
         </div>
       )}
 
-      {/* 生成器列表 */}
       <div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto">
         {generators.map((generator) => (
           <button

src/pages/TestDataGenerator/components/ResultPanel.tsx

@@ -35,13 +35,11 @@ export default function ResultPanel({ result }: ResultPanelProps) {
 
   return (
     <div className="space-y-3">
-      {/* 状态标题 */}
       <div className="flex items-center gap-2">
         {getStatusIcon()}
         <span className="text-sm font-medium text-foreground">{getStatusText()}</span>
       </div>
 
-      {/* 统计信息 */}
       {result.stats && (
         <div className="grid grid-cols-3 gap-3">
           <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
@@ -49,7 +47,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
             <span className="text-lg font-semibold text-foreground">
               {result.stats.total.toLocaleString()}
             </span>
-            <span className="text-xs text-muted-foreground">{'总条数'}</span>
+            <span className="text-xs text-muted-foreground">总条数</span>
           </div>
 
           <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
@@ -57,7 +55,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
             <span className="text-lg font-semibold text-green-500">
               {result.stats.success.toLocaleString()}
             </span>
-            <span className="text-xs text-muted-foreground">{'成功'}</span>
+            <span className="text-xs text-muted-foreground">成功</span>
           </div>
 
           <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
@@ -65,17 +63,16 @@ export default function ResultPanel({ result }: ResultPanelProps) {
             <span className="text-lg font-semibold text-foreground">
               {(result.stats.duration / 1000).toFixed(2)}s
             </span>
-            <span className="text-xs text-muted-foreground">{'耗时'}</span>
+            <span className="text-xs text-muted-foreground">耗时</span>
           </div>
         </div>
       )}
 
-      {/* 警告信息 */}
       {result.warnings && result.warnings.length > 0 && (
         <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
           <div className="flex items-center gap-2 mb-2">
             <AlertTriangle className="h-4 w-4 text-yellow-500" />
-            <span className="text-sm font-medium text-yellow-500">{'警告'}</span>
+            <span className="text-sm font-medium text-yellow-500">警告</span>
           </div>
           <ul className="list-disc list-inside space-y-1">
             {result.warnings.slice(0, 5).map((warning, index) => (
@@ -92,7 +89,6 @@ export default function ResultPanel({ result }: ResultPanelProps) {
         </div>
       )}
 
-      {/* 错误信息 */}
       {result.error && (
         <div className="p-3 rounded-lg bg-destructive/10 border border-destructive/20">
           <div className="flex items-center gap-2">

src/pages/TestDataGenerator/components/RuleManager.tsx

@@ -165,7 +165,6 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
 
   return (
     <div className="space-y-4">
-      {/* 删除确认对话框 */}
       <Dialog open={!!ruleToDelete} onOpenChange={() => setRuleToDelete(null)}>
         <DialogContent
           showCloseButton={false}
@@ -178,16 +177,15 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
           </div>
           <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
             <Button variant="ghost" size="sm" onClick={() => setRuleToDelete(null)}>
-              {'取消'}
+              取消
             </Button>
             <Button variant="destructive" size="sm" onClick={handleDelete}>
-              {'确认'}
+              确认
             </Button>
           </div>
         </DialogContent>
       </Dialog>
 
-      {/* 工具栏 */}
       <div className="flex items-center gap-2 flex-wrap">
         <Button
           variant="outline"
@@ -201,7 +199,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
           ) : (
             <Upload className="h-4 w-4" />
           )}
-          {'导入'}
+          导入
         </Button>
         <Button
           variant="outline"
@@ -215,17 +213,16 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
           ) : (
             <Download className="h-4 w-4" />
           )}
-          {'导出数据'}
+          导出数据
         </Button>
       </div>
 
-      {/* 搜索框 */}
       <div className="relative">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
         <Input
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value.slice(0, 20))}
-          placeholder={'搜索规则...'}
+          placeholder="搜索规则..."
           className="pl-9 pr-24 h-9"
           maxLength={20}
         />
@@ -234,7 +231,6 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
         </span>
       </div>
 
-      {/* 规则列表 */}
       <div className="space-y-2 max-h-64 overflow-y-auto">
         {filteredRules.length === 0 ? (
           <div className="text-center py-6">
@@ -252,9 +248,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
                   <span className="font-medium text-sm text-foreground truncate">{rule.name}</span>
-                  <span className="text-xs text-muted-foreground">
-                    {rule.fields.length} {'字段'}
-                  </span>
+                  <span className="text-xs text-muted-foreground">{rule.fields.length} 字段</span>
                 </div>
                 {rule.description && (
                   <p className="text-xs text-muted-foreground truncate mt-0.5">
@@ -276,7 +270,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                   size="icon"
                   className="h-7 w-7"
                   onClick={() => handleLoad(rule)}
-                  title={'加载'}
+                  title="加载"
                 >
                   <FolderOpen className="h-3.5 w-3.5" />
                 </Button>
@@ -285,7 +279,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                   size="icon"
                   className="h-7 w-7"
                   onClick={() => handleEdit(rule)}
-                  title={'编辑'}
+                  title="编辑"
                 >
                   <Edit className="h-3.5 w-3.5" />
                 </Button>
@@ -294,7 +288,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                   size="icon"
                   className="h-7 w-7"
                   onClick={() => handleDuplicate(rule.id)}
-                  title={'复制'}
+                  title="复制"
                 >
                   <Copy className="h-3.5 w-3.5" />
                 </Button>
@@ -303,7 +297,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                   size="icon"
                   className="h-7 w-7 text-destructive hover:text-destructive"
                   onClick={() => setRuleToDelete(rule)}
-                  title={'删除'}
+                  title="删除"
                 >
                   <Trash2 className="h-3.5 w-3.5" />
                 </Button>

src/pages/TestDataGenerator/index.tsx

@@ -1,21 +1,10 @@
-/**
- * 测试数据生成器主页面
- */
-
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { Settings, Database, Tag } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { useGenerator } from './hooks/useGenerator';
-import type { FieldConfig, GenerateResult, DataRule } from '@/types/testDataGenerator';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
-
-// 生成唯一 ID 的辅助函数
-function generateId(): string {
-  return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
-}
-
+import { useGenerator } from './hooks/useGenerator';
 import FieldList, { MAX_FIELDS } from './components/FieldList';
 import FieldEditor from './components/FieldEditor';
 import GenerateOptions from './components/GenerateOptions';
@@ -24,39 +13,38 @@ import DataPreview from './components/DataPreview';
 import ResultPanel from './components/ResultPanel';
 import ExportPanel from './components/ExportPanel';
 import RuleManager from './components/RuleManager';
+import type { FieldConfig, GenerateResult, DataRule } from '@/types/testDataGenerator';
+
+function generateId(): string {
+  return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
 
 type TabType = 'fields' | 'rules';
 
 export default function TestDataGeneratorPage() {
   const { isGenerating, progress, result, error, generate, cancel, clearResult } = useGenerator();
 
-  // 字段配置
   const [fields, setFields] = useState<FieldConfig[]>([]);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [isEditorOpen, setIsEditorOpen] = useState(false);
   const [editingRule, setEditingRule] = useState<DataRule | null>(null);
 
-  // 生成选项
   const [count, setCount] = useState(100);
   const [format, setFormat] = useState<'json' | 'csv'>('json');
 
-  // 当前标签页
   const [activeTab, setActiveTab] = useState<TabType>('fields');
 
-  // 生成完成时显示 toast 提示（避免重复触发）
   const lastToastResultRef = useRef<GenerateResult | null>(null);
 
-  // 生成完成时显示 toast 提示（避免重复触发）
   useEffect(() => {
     if (result?.success && result.stats && result !== lastToastResultRef.current) {
       lastToastResultRef.current = result;
       toast.success('生成完成', {
-        description: `${result.stats.total} ${'条数据'}`,
+        description: `${result.stats.total} 条数据`,
       });
     }
   }, [result]);
 
-  // 添加新字段
   const handleAddField = useCallback(() => {
     setFields((prev) => {
       if (prev.length >= MAX_FIELDS) return prev;
@@ -74,7 +62,6 @@ export default function TestDataGeneratorPage() {
     });
   }, []);
 
-  // 更新字段
   const handleUpdateField = useCallback((index: number, field: FieldConfig) => {
     setFields((prev) => {
       const newFields = [...prev];
@@ -83,7 +70,6 @@ export default function TestDataGeneratorPage() {
     });
   }, []);
 
-  // 删除字段
   const handleRemoveField = useCallback((index: number) => {
     setFields((prev) => prev.filter((_, i) => i !== index));
     setSelectedIndex((prev) => {
@@ -93,7 +79,6 @@ export default function TestDataGeneratorPage() {
     });
   }, []);
 
-  // 拖拽排序
   const handleReorder = useCallback((oldIndex: number, newIndex: number) => {
     setFields((prev) => {
       const newFields = [...prev];
@@ -111,7 +96,6 @@ export default function TestDataGeneratorPage() {
     });
   }, []);
 
-  // 加载规则
   const handleLoadRule = useCallback(
     (loadedFields: FieldConfig[]) => {
       setFields(loadedFields);
@@ -122,7 +106,6 @@ export default function TestDataGeneratorPage() {
     [clearResult],
   );
 
-  // 编辑规则
   const handleEditRule = useCallback(
     (rule: DataRule) => {
       setFields(rule.fields);
@@ -135,21 +118,17 @@ export default function TestDataGeneratorPage() {
     [clearResult],
   );
 
-  // 保存规则成功后清除编辑状态
   const handleRuleSaved = useCallback(() => {
     setEditingRule(null);
   }, []);
 
-  // 开始生成
   const handleGenerate = useCallback(() => {
     if (fields.length === 0) return;
     generate(fields, count, format === 'csv');
   }, [fields, count, format, generate]);
 
-  // 获取选中的字段（-1 或 null 表示未选中）
   const selectedField = selectedIndex !== null && selectedIndex >= 0 ? fields[selectedIndex] : null;
 
-  // 打开字段编辑器
   const handleOpenEditor = useCallback((index: number) => {
     setSelectedIndex(index);
     setIsEditorOpen(true);
@@ -158,11 +137,8 @@ export default function TestDataGeneratorPage() {
   return (
     <div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
       <div className="max-w-7xl mx-auto p-4 sm:p-6">
-        {/* 主要内容区域 - 左右分栏 */}
         <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 items-start">
-          {/* 左侧面板 - 字段配置 */}
           <div className="lg:col-span-3 space-y-4">
-            {/* 标签页切换 */}
             <div className="flex gap-1 p-1 bg-muted rounded-lg">
               <button
                 onClick={() => setActiveTab('fields')}
@@ -174,7 +150,7 @@ export default function TestDataGeneratorPage() {
                 )}
               >
                 <Settings className="h-4 w-4" />
-                {'字段配置'}
+                字段配置
               </button>
               <button
                 onClick={() => setActiveTab('rules')}
@@ -186,11 +162,10 @@ export default function TestDataGeneratorPage() {
                 )}
               >
                 <Tag className="h-4 w-4" />
-                {'规则管理'}
+                规则管理
               </button>
             </div>
 
-            {/* 字段配置标签页 */}
             {activeTab === 'fields' && (
               <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
                 <FieldList
@@ -206,14 +181,12 @@ export default function TestDataGeneratorPage() {
               </div>
             )}
 
-            {/* 规则管理标签页 */}
             {activeTab === 'rules' && (
               <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
                 <RuleManager onLoad={handleLoadRule} onEdit={handleEditRule} />
               </div>
             )}
 
-            {/* 生成选项 */}
             <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
               <GenerateOptions
                 count={count}
@@ -223,7 +196,6 @@ export default function TestDataGeneratorPage() {
               />
             </div>
 
-            {/* 生成按钮 */}
             <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
               <GenerateButton
                 onClick={handleGenerate}
@@ -235,10 +207,7 @@ export default function TestDataGeneratorPage() {
             </div>
           </div>
 
-          {/* 右侧面板 - 数据预览和结果 */}
           <div className="lg:col-span-2 space-y-4">
-            {/* 结果状态 */}
-            {/* 仅在失败或有警告时显示结果面板 */}
             {((result && !result.success) ||
               (result?.warnings && result.warnings.length > 0) ||
               error) && (
@@ -253,18 +222,16 @@ export default function TestDataGeneratorPage() {
               </div>
             )}
 
-            {/* 数据预览 */}
             <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
               <h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
                 <Database className="h-4 w-4" />
-                {'数据预览'}
+                数据预览
               </h3>
               <div className="h-[280px]">
                 <DataPreview fields={fields} />
               </div>
             </div>
 
-            {/* 导出面板 */}
             {result?.data && result.data.length > 0 && (
               <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
                 <ExportPanel result={result} />
@@ -274,7 +241,6 @@ export default function TestDataGeneratorPage() {
         </div>
       </div>
 
-      {/* 字段编辑弹窗 */}
       <Dialog open={isEditorOpen} onOpenChange={setIsEditorOpen}>
         <DialogContent
           showCloseButton={false}
@@ -291,10 +257,10 @@ export default function TestDataGeneratorPage() {
           </div>
           <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
             <Button variant="ghost" size="sm" onClick={() => setIsEditorOpen(false)}>
-              {'取消'}
+              取消
             </Button>
             <Button size="sm" onClick={() => setIsEditorOpen(false)}>
-              {'完成'}
+              完成
             </Button>
           </div>
         </DialogContent>

src/pages/TextStatistics/components/StatCard.tsx

@@ -1,17 +0,0 @@
-interface StatCardProps {
-  label: string;
-  value: React.ReactNode;
-}
-
-export default function StatCard({ label, value }: StatCardProps) {
-  return (
-    <div className="flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring">
-      <span className="text-xs font-medium text-muted-foreground tracking-wider mb-1 select-none">
-        {label}
-      </span>
-      <span className="font-mono text-lg md:text-2xl font-extrabold text-primary break-all tracking-tight leading-none tabular-nums select-all">
-        {value}
-      </span>
-    </div>
-  );
-}

src/pages/TextStatistics/index.tsx

@@ -1,17 +1,24 @@
 import TextInputArea from '@/components/TextInputArea';
 import { formatBytes } from '@/utils/format';
-import StatCard from './components/StatCard';
+import { cn } from '@/lib/utils';
 import { useTextStatistics } from './useTextStatistics';
 
 export default function Index() {
   const { text, stats, setText } = useTextStatistics();
 
+  const statItems = [
+    { label: '字符数', value: stats.characters },
+    { label: '单词数', value: stats.words },
+    { label: '行数', value: stats.lines },
+    { label: '字节大小', value: formatBytes(stats.bytes) },
+  ];
+
   return (
     <div className="p-4 w-full space-y-4">
       <TextInputArea
         value={text}
         onChange={setText}
-        placeholder={'在此输入或粘贴文本...'}
+        placeholder="在此输入或粘贴文本..."
         minRows={10}
         maxRows={18}
         showClear={true}
@@ -19,10 +26,22 @@ export default function Index() {
       />
 
       <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-        <StatCard label="字符数" value={stats.characters} />
-        <StatCard label="单词数" value={stats.words} />
-        <StatCard label="行数" value={stats.lines} />
-        <StatCard label="字节大小" value={formatBytes(stats.bytes)} />
+        {statItems.map((item) => (
+          <div
+            key={item.label}
+            className={cn(
+              'flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground',
+              'hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring',
+            )}
+          >
+            <span className="text-xs font-medium text-muted-foreground tracking-wider mb-1 select-none">
+              {item.label}
+            </span>
+            <span className="font-mono text-lg md:text-2xl font-extrabold text-primary break-all tracking-tight leading-none tabular-nums select-all">
+              {item.value}
+            </span>
+          </div>
+        ))}
       </div>
     </div>
   );

src/pages/TextStatistics/useTextStatistics.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { getTextStats, type TextStats } from '@/utils/textStatistics';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 
@@ -10,12 +10,6 @@ export interface UseTextStatisticsReturn {
 
 export function useTextStatistics(): UseTextStatisticsReturn {
   const [text, setText] = useState('');
-  const [debouncedText, setDebouncedText] = useState('');
-
-  useEffect(() => {
-    const handle = setTimeout(() => setDebouncedText(text), 200);
-    return () => clearTimeout(handle);
-  }, [text]);
 
   const handleContextMenuData = useCallback((payload: string) => {
     setText(payload);
@@ -23,7 +17,7 @@ export function useTextStatistics(): UseTextStatisticsReturn {
 
   useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
 
-  const stats = useMemo(() => getTextStats(debouncedText), [debouncedText]);
+  const stats = getTextStats(text);
 
   return { text, stats, setText };
 }

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

@@ -5,7 +5,6 @@ import Index from '../index';
 describe('Timestamp 页面', () => {
   it('应该渲染模式切换按钮', () => {
     render(<Index />);
-    // 基本渲染测试：页面含多个模式切换按钮，应至少渲染一个
     expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
   });
 });

src/pages/Timestamp/components/ConverterForm.tsx

@@ -8,9 +8,15 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
-import { MODE_OPTIONS, UNIT_OPTIONS, ZONES, type ZoneType } from '../constants';
+import {
+  CARD_CLASS,
+  INPUT_PLACEHOLDERS,
+  MODE_OPTIONS,
+  UNIT_OPTIONS,
+  ZONES,
+  type ZoneType,
+} from '../constants';
 import type { UseTimestampConverterReturn } from '../useTimestampConverter';
-import ToolCard from './ToolCard';
 
 type ConverterFormProps = Omit<UseTimestampConverterReturn, 'result' | 'handleUseNow'>;
 
@@ -20,20 +26,19 @@ export default function ConverterForm({
   unit,
   zone,
   error,
-  inputPlaceholder,
   setMode,
   setInput,
   setUnit,
   setZone,
 }: ConverterFormProps) {
   return (
-    <ToolCard className="gap-4">
+    <div className={cn(CARD_CLASS, 'gap-4')}>
       <SwitchButtonGroup value={mode} options={MODE_OPTIONS} onChange={setMode} size="small" />
 
       <div className="flex flex-col gap-1.5">
         <Input
           type="text"
-          placeholder={inputPlaceholder}
+          placeholder={INPUT_PLACEHOLDERS[mode]}
           value={input}
           onChange={(e) => setInput(e.target.value)}
           className={cn(
@@ -71,6 +76,6 @@ export default function ConverterForm({
           </SelectContent>
         </Select>
       </div>
-    </ToolCard>
+    </div>
   );
 }

src/pages/Timestamp/components/LiveClock.tsx

@@ -34,7 +34,7 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
       {...props}
     >
       <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
-        {'当前时间戳'}
+        当前时间戳
       </span>
 
       <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
@@ -47,7 +47,7 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
           onUseNow(rawTime);
           toast.success('已使用当前时间戳');
         }}
-        title={'填充到下方'}
+        title="填充到下方"
         variant="ghost"
         size="icon"
         className="h-7 w-7 text-muted-foreground hover:text-foreground"
@@ -55,7 +55,7 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
         <Clock className="w-3.5 h-3.5" />
       </Button>
 
-      <CopyButton text={text} tooltip={'复制时间戳'} className="h-7 w-7 rounded-md border" />
+      <CopyButton text={text} tooltip="复制时间戳" className="h-7 w-7 rounded-md border" />
     </div>
   );
 }

src/pages/Timestamp/components/ResultView.tsx

@@ -14,15 +14,16 @@ export default function ResultView({
   className,
   ...props
 }: ResultViewProps) {
+  if (!result && !showEmptyPlaceholder) return null;
+
   if (!result) {
-    if (!showEmptyPlaceholder) return null;
     return (
       <EmptyPlaceholder
         className={cn('flex-1 min-h-[320px]', className)}
         messageClassName="text-sm font-medium text-muted-foreground max-w-none"
         {...props}
       >
-        {'请输入并点击转换'}
+        请输入并点击转换
       </EmptyPlaceholder>
     );
   }
@@ -30,7 +31,7 @@ export default function ResultView({
   return (
     <div className={cn('flex flex-col w-full', className)} {...props}>
       <span className="block text-muted-foreground/90 mb-2.5 text-xs font-semibold tracking-wider uppercase">
-        {'转换结果'}
+        转换结果
       </span>
 
       <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
@@ -39,7 +40,7 @@ export default function ResultView({
         </span>
         <CopyButton
           text={result}
-          tooltip={'复制结果'}
+          tooltip="复制结果"
           variant="ghost"
           size="icon"
           className="h-7 w-7 text-muted-foreground hover:text-foreground"

src/pages/Timestamp/components/ToolCard.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { cn } from '@/lib/utils';
-import { CARD_CLASS } from '../constants';
-
-interface ToolCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export default function ToolCard({ children, className, ...props }: ToolCardProps) {
-  return (
-    <div className={cn(CARD_CLASS, className)} {...props}>
-      {children}
-    </div>
-  );
-}

src/pages/Timestamp/index.tsx

@@ -1,7 +1,8 @@
+import { cn } from '@/lib/utils';
 import LiveClock from './components/LiveClock';
 import ConverterForm from './components/ConverterForm';
 import ResultView from './components/ResultView';
-import ToolCard from './components/ToolCard';
+import { CARD_CLASS } from './constants';
 import { useTimestampConverter } from './useTimestampConverter';
 
 export default function Index() {
@@ -14,9 +15,9 @@ export default function Index() {
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
         <ConverterForm {...formProps} />
 
-        <ToolCard className="h-full">
+        <div className={cn(CARD_CLASS, 'h-full')}>
           <ResultView result={result} showEmptyPlaceholder />
-        </ToolCard>
+        </div>
       </div>
     </div>
   );

src/pages/Timestamp/useTimestampConverter.ts

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import dayjs from '@/utils/dayjs';
 import type { UnitType, ZoneType, ModeType } from './constants';
-import { DATE_FORMAT, INPUT_PLACEHOLDERS, msToUnit, dayjsFromTimestamp } from './constants';
+import { DATE_FORMAT, msToUnit, dayjsFromTimestamp } from './constants';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 
 export interface UseTimestampConverterReturn {
@@ -11,7 +11,6 @@ export interface UseTimestampConverterReturn {
   zone: ZoneType;
   result: string;
   error: string;
-  inputPlaceholder: string;
 
   setMode: (mode: ModeType) => void;
   setInput: (value: string) => void;
@@ -101,7 +100,6 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
     zone,
     result,
     error,
-    inputPlaceholder: INPUT_PLACEHOLDERS[mode],
     setMode: handleSetMode,
     setInput,
     setUnit,