Develop (#55)

feat: optimize dashboard/search UX and simplify extension architecture

Redesign Dashboard with compact tool grid and recently used tools
Improve TopBar search UX with Cmd/Ctrl+K shortcut and better history navigation
Reorganize project structure into src/
Migrate i18n from react-i18next to chrome.i18n
Remove runtime language switch and settings page
Remove HTML/Markdown conversion tools
Clean up unused code, dead animations, redundant comments, and imports
Improve component consistency with shadcn/ui patterns
Replace hardcoded strings/colors with i18n tokens and theme tokens
Add comprehensive project documentation and coding standards
Fix CI artifact upload workflow and multiple TypeScript/test issues

Includes various refactors, UI polish, i18n cleanup, CI improvements,
and maintenance updates across the codebase.

src/pages/Base64Converter/Base64ConverterSection.tsx

@@ -0,0 +1,253 @@
+import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
+import TextInputArea from '@/components/TextInputArea';
+import { useI18n } from '@/utils/chromeI18n';
+import CopyButton from '@/components/CopyButton';
+import DecodeResultPaper from '@/components/DecodeResultPaper';
+import { Button } from '@/components/ui/button';
+import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
+import { useStorageState } from '@/utils/useStorageState';
+import type { Base64ConvertDirection } from '@/types/storage';
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { useBase64Converter } from './useBase64Converter';
+import { cn } from '@/lib/utils';
+
+const isValidDirection = (val: unknown): val is Base64ConvertDirection =>
+  val === 'encode' || val === 'decode';
+
+interface Base64ConverterSectionProps {
+  mode: 'file' | 'image';
+}
+
+export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
+  const { t } = useI18n('base64Converter');
+
+  const [direction, setDirection] = useStorageState(
+    `base64Converter/${mode}Mode/direction`,
+    'encode',
+    isValidDirection,
+  );
+
+  const {
+    result,
+    info,
+    isLoading,
+    isDragging,
+    setIsDragging,
+    fileInputRef,
+    encodeError,
+    decodeInput,
+    setDecodeInput,
+    decoded,
+    decodeError,
+    decodedFileName,
+    setCustomFileName,
+    resetAll,
+    safeFileSelect,
+    maxFileSizeStr,
+  } = useBase64Converter({ mode });
+
+  const handleDirectionChange = (next: Base64ConvertDirection) => {
+    if (!next || next === direction) return;
+    resetAll();
+    setDirection(next);
+  };
+
+  const handleDownload = () => {
+    if (decoded) downloadBlob(decoded.blob, decodedFileName);
+  };
+
+  return (
+    <div className="w-full flex flex-col space-y-4">
+      <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
+        <SwitchButtonGroup
+          value={direction}
+          options={[
+            { value: 'encode', label: t('encode') },
+            { value: 'decode', label: t('decode') },
+          ]}
+          onChange={handleDirectionChange}
+          size="small"
+        />
+      </div>
+
+      {direction === 'encode' ? (
+        <div className="flex flex-col space-y-4">
+          <div
+            onDragOver={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragLeave={() => setIsDragging(false)}
+            onDrop={(e) => {
+              e.preventDefault();
+              setIsDragging(false);
+              const file = e.dataTransfer.files[0];
+              if (file) safeFileSelect(file);
+            }}
+            onClick={() => fileInputRef.current?.click()}
+            className={cn(
+              'flex flex-col items-center justify-center min-h-[190px] border-2 border-dashed rounded-2xl p-8 cursor-pointer',
+              isDragging
+                ? 'border-primary bg-primary/10'
+                : info
+                  ? 'border-primary/60 bg-primary/5'
+                  : 'border-border bg-muted/40 hover:border-primary/80 hover:bg-muted/70',
+            )}
+          >
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept={mode === 'image' ? 'image/*' : undefined}
+              hidden
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) safeFileSelect(file);
+              }}
+            />
+            {isLoading ? (
+              <div className="w-9 h-9 border-3 border-primary/20 border-t-primary rounded-full animate-spin" />
+            ) : info ? (
+              <div className="flex flex-col items-center gap-1.5 text-center w-full">
+                {mode === 'image' && result && (
+                  <div className="relative p-1 border border-border bg-background rounded-lg shadow-sm mb-1 max-w-[180px] overflow-hidden">
+                    <img
+                      src={result.output}
+                      alt="preview"
+                      className="max-h-32 w-full object-contain rounded"
+                    />
+                  </div>
+                )}
+                <Upload className={cn('w-8 h-8 text-primary')} />
+                <span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
+                  {info.name}
+                </span>
+                <span className="text-xs text-muted-foreground/80 font-mono tabular-nums">
+                  {formatFileSize(info.size)} · {info.type}
+                </span>
+                <span className="text-[11px] font-medium text-primary/80 mt-1">
+                  {t('clickOrDropToReplace')}
+                </span>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center gap-1.5 text-center">
+                {mode === 'image' ? (
+                  <ImageIcon className="w-8 h-8 text-muted-foreground/60" />
+                ) : (
+                  <Upload className="w-8 h-8 text-muted-foreground/60" />
+                )}
+                <span className="text-xs font-bold text-foreground/80">
+                  {mode === 'image' ? t('clickOrDropToImage') : t('clickOrDropToFile')}
+                </span>
+                <span className="text-[10px] font-medium text-muted-foreground/60">
+                  {t('maxFileSize', { max: maxFileSizeStr })}
+                </span>
+                {mode === 'image' && (
+                  <span className="text-[10px] font-medium text-muted-foreground/50">
+                    {t('supportedFormats')}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+
+          {encodeError && (
+            <div className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-xs font-semibold text-destructive">
+              {encodeError}
+            </div>
+          )}
+
+          {result && (
+            <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">
+                  {t('base64Output')}
+                </span>
+                <div className="flex gap-2">
+                  <CopyButton
+                    text={result.rawBase64}
+                    tooltip={t('copyRaw')}
+                    className="h-6 px-2 rounded-md border text-[10px] font-bold"
+                  />
+                  <CopyButton
+                    text={result.output}
+                    tooltip={t('copyDataUri')}
+                    className="h-6 px-2 rounded-md border text-[10px] font-bold"
+                  />
+                </div>
+              </div>
+              <TextInputArea
+                readOnly
+                value={
+                  result.output.length > 2000
+                    ? `${result.output.substring(0, 2000)}...`
+                    : result.output
+                }
+                showClear={false}
+                minRows={4}
+              />
+              <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>
+                    {t('originalSize')}:{' '}
+                    <span className="font-semibold text-foreground/80">
+                      {formatFileSize(result.originalBytes)}
+                    </span>
+                  </span>
+                  <span className="text-border/60">|</span>
+                  <span>
+                    {t('encodedSize')}:{' '}
+                    <span className="font-semibold text-foreground/80">
+                      {formatFileSize(result.outputBytes)}
+                    </span>
+                  </span>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={resetAll}
+                  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" />
+                  {t('clear')}
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="flex flex-col space-y-4">
+          <TextInputArea
+            placeholder={t('decodeBase64Placeholder')}
+            value={decodeInput}
+            onChange={setDecodeInput}
+            externalError={decodeError || undefined}
+            showClear={true}
+            allowCopy={true}
+            minRows={6}
+            onClear={resetAll}
+          />
+          {decoded && (
+            <DecodeResultPaper
+              title={mode === 'image' ? t('decodedImageOutput') : t('decodedFileOutput')}
+              mimeType={decoded.mimeType}
+              blobSize={decoded.blob.size}
+              fileName={decodedFileName}
+              onFileNameChange={setCustomFileName}
+              onDownload={handleDownload}
+            >
+              {mode === 'image' && (
+                <div className="relative p-1.5 border border-border bg-background dark:bg-muted/10 rounded-xl max-w-[220px] mb-3 overflow-hidden shadow-sm">
+                  <img
+                    src={`data:${decoded.mimeType};base64,${decoded.rawBase64}`}
+                    alt="decoded preview"
+                    className="max-h-40 w-full rounded-lg object-contain bg-[linear-gradient(45deg,#ccc_25%,transparent_25%),linear-gradient(-45deg,#ccc_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#ccc_75%),linear-gradient(-45deg,transparent_75%,#ccc_75%)] bg-[size:10px_10px] bg-[position:0_0,0_5px,5px_-5px,-5px_0] dark:bg-none"
+                  />
+                </div>
+              )}
+            </DecodeResultPaper>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/Base64Converter/TextMode.tsx

@@ -0,0 +1,162 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import TextInputArea from '@/components/TextInputArea';
+import { useI18n } from '@/utils/chromeI18n';
+import CopyButton from '@/components/CopyButton';
+import { base64ToText, textToBase64 } from '@/utils/base64Converter';
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { useContextMenuData } from '@/utils/useContextMenuData';
+import { Button } from '@/components/ui/button';
+
+const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
+
+const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
+  'Invalid Base64 string': 'invalidBase64',
+  'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
+    'binaryDataDetected',
+};
+
+interface TextModeProps {
+  onSwitchToImageMode?: () => void;
+}
+
+export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
+  const { t } = useI18n('base64Converter');
+
+  const [input, setInput] = useState('');
+  const [debouncedInput, setDebouncedInput] = useState('');
+  const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedInput(input);
+    }, 200);
+    return () => clearTimeout(handle);
+  }, [input]);
+
+  const handleContextMenuData = useCallback((payload: string) => {
+    setInput(payload);
+    setDebouncedInput(payload);
+    setDirection('decode');
+  }, []);
+
+  useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
+
+  const conversionPipeline = useMemo(() => {
+    const trimmed = debouncedInput.trim();
+    if (!trimmed) return { output: '', error: null };
+
+    try {
+      if (direction === 'encode') {
+        const result = textToBase64(debouncedInput);
+        return { output: result.output, error: null };
+      } else {
+        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 ? t(i18nKey) : message || t('conversionFailed'),
+      };
+    }
+  }, [debouncedInput, direction, t]);
+
+  const output = conversionPipeline.output;
+  const error = conversionPipeline.error;
+
+  const placeholder =
+    direction === 'encode' ? t('textInputPlaceholder') : t('base64InputPlaceholder');
+  const outputLabel = direction === 'encode' ? t('base64Output') : t('textOutput');
+
+  const showImageHint = useMemo(
+    () => direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input),
+    [direction, input],
+  );
+
+  const handleDirectionChange = (value: 'encode' | 'decode') => {
+    if (value === direction) return;
+    setDirection(value);
+    setInput('');
+    setDebouncedInput('');
+  };
+
+  const handleClear = () => {
+    setInput('');
+    setDebouncedInput('');
+  };
+
+  return (
+    <div className="w-full flex flex-col space-y-4">
+      {/* 受控方向切流中枢 */}
+      <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
+        <SwitchButtonGroup
+          value={direction}
+          options={[
+            { value: 'encode', label: t('encode') },
+            { value: 'decode', label: t('decode') },
+          ]}
+          onChange={handleDirectionChange}
+          size="small"
+        />
+      </div>
+
+      {/* 高性能受控文本输入端 */}
+      <TextInputArea
+        placeholder={placeholder}
+        value={input}
+        onChange={setInput}
+        externalError={error || undefined}
+        showClear={true}
+        allowCopy={true}
+        minRows={5}
+        maxRows={10}
+        onClear={handleClear}
+      />
+
+      {/* 图片 URI 类型劫持警告引导区：
+        - 💡 修复点：彻底废除原生亮色硬编码 hover:bg-blue-100 类名，
+        - 完美向全站 shadcn 暗黑生态看齐，采用标准的 bg-primary/10 混合变体。
+      */}
+      {showImageHint && (
+        <div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
+          <span className="text-xs font-semibold text-primary tracking-tight">
+            {t('imageDataUriHint')}
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={onSwitchToImageMode}
+            className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
+          >
+            {t('switchToImageMode')}
+          </Button>
+        </div>
+      )}
+
+      {/* 5. 编码/解码核心数据承载流卡片 */}
+      {output && (
+        <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">
+              {outputLabel}
+            </span>
+            <CopyButton
+              text={output}
+              className="h-6 px-2 rounded-md border text-[10px] font-bold"
+            />
+          </div>
+
+          <TextInputArea
+            readOnly
+            value={output.length > 2000 ? `${output.substring(0, 2000)}...` : output}
+            showClear={false}
+            minRows={4}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/Base64Converter/__tests__/TextMode.test.tsx

@@ -0,0 +1,190 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import TextMode from '../TextMode';
+
+// Mock CopyButton
+vi.mock('@/components/CopyButton', () => ({
+  CopyButton: ({ text }: { text: string }) => <button data-testid="copy-button">{text}</button>,
+  default: ({ text }: { text: string }) => <button data-testid="copy-button">{text}</button>,
+}));
+
+describe('TextMode', () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('应该渲染编码/解码切换按钮', () => {
+    render(<TextMode />);
+    expect(screen.getByText('编码')).toBeInTheDocument();
+    expect(screen.getByText('解码')).toBeInTheDocument();
+  });
+
+  it('应该渲染输入框和转换按钮', () => {
+    render(<TextMode />);
+    expect(screen.getByPlaceholderText('输入需要编码为 Base64 的文本...')).toBeInTheDocument();
+  });
+
+  it('应该将文本编码为 Base64', async () => {
+    render(<TextMode />);
+    const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
+    fireEvent.change(input, { target: { value: 'Hello' } });
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Base64 编码结果')).toBeInTheDocument();
+    });
+    expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
+  });
+
+  it('应该解码 Base64 文本', async () => {
+    render(<TextMode />);
+
+    // 切换到解码模式
+    fireEvent.click(screen.getByText('解码'));
+
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
+    fireEvent.change(input, { target: { value: 'SGVsbG8=' } });
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('解码文本结果')).toBeInTheDocument();
+    });
+    expect(screen.getByRole('button', { name: 'Hello' })).toBeInTheDocument();
+  });
+
+  it('应该对无效 Base64 显示错误', async () => {
+    render(<TextMode />);
+
+    // 切换到解码模式
+    fireEvent.click(screen.getByText('解码'));
+
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
+    fireEvent.change(input, { target: { value: 'invalid!!!' } });
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Base64 字符串无效')).toBeInTheDocument();
+    });
+  });
+
+  it('切换方向时应该清除输出', async () => {
+    render(<TextMode />);
+
+    // 先编码
+    const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
+    fireEvent.change(input, { target: { value: 'Hello' } });
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
+    });
+
+    // 切换方向
+    fireEvent.click(screen.getByText('解码'));
+
+    // 输出应该被清除
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
+    });
+  });
+
+  it('点击清除按钮应该清空所有内容', async () => {
+    render(<TextMode />);
+
+    const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
+    fireEvent.change(input, { target: { value: 'Hello' } });
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
+      expect(input).toHaveValue('');
+    });
+  });
+
+  it('解码模式下粘贴图片 data URI 时应该显示切换图像模式的提示', () => {
+    render(<TextMode />);
+
+    fireEvent.click(screen.getByText('解码'));
+
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
+    fireEvent.change(input, {
+      target: { value: 'data:image/png;base64,iVBORw0KGgo=' },
+    });
+
+    expect(
+      screen.getByText('检测到图片的 data URI，请使用「图像」选项卡进行解码。'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('切换到图像模式')).toBeInTheDocument();
+  });
+
+  it('粘贴非图片 data URI 时不应该显示图像模式提示', () => {
+    render(<TextMode />);
+
+    fireEvent.click(screen.getByText('解码'));
+
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
+    fireEvent.change(input, { target: { value: 'SGVsbG8=' } });
+
+    expect(
+      screen.queryByText('检测到图片的 data URI，请使用「图像」选项卡进行解码。'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('点击切换图像模式按钮应该调用 onSwitchToImageMode 回调', () => {
+    const onSwitch = vi.fn();
+    render(<TextMode onSwitchToImageMode={onSwitch} />);
+
+    fireEvent.click(screen.getByText('解码'));
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
+    fireEvent.change(input, {
+      target: { value: 'data:image/png;base64,iVBORw0KGgo=' },
+    });
+
+    fireEvent.click(screen.getByText('切换到图像模式'));
+    expect(onSwitch).toHaveBeenCalledTimes(1);
+  });
+
+  it('解码模式下对二进制数据应该显示更清晰的错误', async () => {
+    render(<TextMode />);
+
+    fireEvent.click(screen.getByText('解码'));
+
+    const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
+    fireEvent.change(input, { target: { value: 'iVBORw0KGgo=' } });
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。'),
+      ).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,67 @@
+import { describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import Base64ConverterPage from '../index';
+
+// Mock getEntryPointType
+vi.mock('@/config/features', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/config/features')>();
+  return {
+    ...actual,
+    getEntryPointType: () => 'sidepanel',
+  };
+});
+
+// Mock 子组件
+vi.mock('../TextMode', () => ({
+  default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
+    <div data-testid="text-mode">
+      TextMode
+      {onSwitchToImageMode && <button onClick={onSwitchToImageMode}>switchToImage</button>}
+    </div>
+  ),
+}));
+
+vi.mock('../Base64ConverterSection', () => ({
+  default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
+}));
+
+const waitForStorageInit = () =>
+  act(async () => {
+    await Promise.resolve();
+  });
+
+describe('Base64ConverterPage', () => {
+  it('应该默认渲染文本模式', async () => {
+    render(<Base64ConverterPage />);
+    await waitForStorageInit();
+    expect(screen.getByTestId('text-mode')).toBeInTheDocument();
+  });
+
+  it('应该渲染模式切换按钮', async () => {
+    render(<Base64ConverterPage />);
+    await waitForStorageInit();
+    expect(screen.getByText('文本')).toBeInTheDocument();
+    expect(screen.getByText('文件')).toBeInTheDocument();
+    expect(screen.getByText('图像')).toBeInTheDocument();
+  });
+
+  it('切换到文件模式应该渲染 FileMode', async () => {
+    render(<Base64ConverterPage />);
+    await waitForStorageInit();
+    fireEvent.click(screen.getByText('文件'));
+    await waitFor(() => {
+      expect(screen.getByTestId('file-mode')).toBeInTheDocument();
+    });
+    expect(screen.queryByTestId('text-mode')).not.toBeInTheDocument();
+  });
+
+  it('切换到图像模式应该渲染 ImageMode', async () => {
+    render(<Base64ConverterPage />);
+    await waitForStorageInit();
+    fireEvent.click(screen.getByText('图像'));
+    await waitFor(() => {
+      expect(screen.getByTestId('image-mode')).toBeInTheDocument();
+    });
+    expect(screen.queryByTestId('text-mode')).not.toBeInTheDocument();
+  });
+});

src/pages/Base64Converter/index.tsx

@@ -0,0 +1,43 @@
+import { useI18n } from '@/utils/chromeI18n';
+import { useStorageState } from '@/utils/useStorageState';
+import type { Base64ConverterPageMode } from '@/types/storage';
+import TextMode from './TextMode';
+import Base64ConverterSection from './Base64ConverterSection';
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+
+const VALID_PAGE_MODES: readonly Base64ConverterPageMode[] = ['text', 'file', 'image'];
+const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
+  typeof val === 'string' && (VALID_PAGE_MODES as readonly string[]).includes(val);
+
+type PageMode = Base64ConverterPageMode;
+
+export default function Index() {
+  const { t } = useI18n('base64Converter');
+  const [pageMode, setPageMode] = useStorageState(
+    'base64Converter/pageMode',
+    'text',
+    isValidPageMode,
+  );
+
+  return (
+    <div className="p-4 w-full flex flex-col space-y-4 min-h-[520px] select-none">
+      <SwitchButtonGroup
+        value={pageMode}
+        options={[
+          { value: 'text', label: t('base64Converter:textMode') },
+          { value: 'file', label: t('base64Converter:fileMode') },
+          { value: 'image', label: t('base64Converter:imageMode') },
+        ]}
+        onChange={(value: PageMode) => setPageMode(value)}
+        size="small"
+        className="w-full sm:w-auto"
+      />
+
+      <div className="w-full pt-1">
+        {pageMode === 'text' && <TextMode onSwitchToImageMode={() => setPageMode('image')} />}
+        {pageMode === 'file' && <Base64ConverterSection mode="file" />}
+        {pageMode === 'image' && <Base64ConverterSection mode="image" />}
+      </div>
+    </div>
+  );
+}

src/pages/Base64Converter/useBase64Converter.ts

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
+import type { FileToBase64Result } from '@/utils/base64Converter';
+import {
+  base64ToBlob,
+  fileToBase64,
+  isFileSizeValid,
+  isSupportedImageExtension,
+  isSupportedImageType,
+  MAX_FILE_SIZE,
+} from '@/utils/base64Converter';
+
+interface FileInfo {
+  name: string;
+  size: number;
+  type: string;
+}
+
+interface UseBase64ConverterProps {
+  mode: 'file' | 'image';
+}
+
+export function useBase64Converter({ mode }: UseBase64ConverterProps) {
+  const { t } = useI18n('base64Converter');
+
+  const [result, setResult] = useState<FileToBase64Result | null>(null);
+  const [info, setInfo] = useState<FileInfo | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const cancelRef = useRef(false);
+
+  const [decodeInput, setDecodeInput] = useState('');
+  const [debouncedDecodeInput, setDebouncedDecodeInput] = useState('');
+  const [encodeError, setEncodeError] = useState<string | null>(null);
+  const [customFileName, setCustomFileName] = useState('');
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedDecodeInput(decodeInput);
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [decodeInput]);
+
+  const resetAll = useCallback(() => {
+    cancelRef.current = true;
+    setResult(null);
+    setInfo(null);
+    setIsLoading(false);
+    setDecodeInput('');
+    setDebouncedDecodeInput('');
+    setCustomFileName('');
+    setEncodeError(null);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  }, []);
+
+  const handleFileSelect = useCallback(
+    async (file: File) => {
+      cancelRef.current = false;
+      setEncodeError(null);
+      setResult(null);
+      setInfo(null);
+
+      if (!isFileSizeValid(file.size)) {
+        setEncodeError(t('fileSizeExceeded', { max: `${MAX_FILE_SIZE / 1024 / 1024} MB` }));
+        return;
+      }
+
+      if (
+        mode === 'image' &&
+        !isSupportedImageType(file.type) &&
+        !isSupportedImageExtension(file.name)
+      ) {
+        setEncodeError(t('unsupportedImageType'));
+        return;
+      }
+
+      setInfo({
+        name: file.name,
+        size: file.size,
+        type: file.type || 'application/octet-stream',
+      });
+      setIsLoading(true);
+
+      try {
+        const res = await fileToBase64(file);
+        if (!cancelRef.current) setResult(res);
+      } catch (e) {
+        if (!cancelRef.current) {
+          setEncodeError(e instanceof Error ? e.message : t('conversionFailed'));
+        }
+      } finally {
+        if (!cancelRef.current) setIsLoading(false);
+      }
+    },
+    [mode, t],
+  );
+
+  const safeFileSelect = useCallback(
+    (file: File) => {
+      handleFileSelect(file).catch((err) => {
+        console.error(`Base64 [${mode}] pipeline crash:`, err);
+      });
+    },
+    [handleFileSelect, mode],
+  );
+
+  const decodePipeline = useMemo(() => {
+    const cleanedInput = debouncedDecodeInput.replace(/^data:image\/[a-z+]+;base64,/i, '').trim();
+    if (!cleanedInput) return { decoded: null, error: null };
+
+    try {
+      const res = base64ToBlob(cleanedInput);
+      return { decoded: res, error: null };
+    } catch (e) {
+      const message = e instanceof Error ? e.message : '';
+      return {
+        decoded: null,
+        error: message === 'Invalid Base64 string' ? t('invalidBase64') : t('conversionFailed'),
+      };
+    }
+  }, [debouncedDecodeInput, t]);
+
+  const decoded = decodePipeline.decoded;
+  const decodeError = decodePipeline.error;
+
+  const decodedFileName = useMemo(() => {
+    if (customFileName) return customFileName;
+    if (decoded) return `decoded${decoded.suggestedExtension}`;
+    return '';
+  }, [customFileName, decoded]);
+
+  const maxFileSizeStr = `${MAX_FILE_SIZE / 1024 / 1024} MB`;
+
+  return {
+    result,
+    info,
+    isLoading,
+    isDragging,
+    setIsDragging,
+    fileInputRef,
+    encodeError,
+    decodeInput,
+    setDecodeInput,
+    decoded,
+    decodeError,
+    decodedFileName,
+    setCustomFileName,
+    resetAll,
+    safeFileSelect,
+    maxFileSizeStr,
+  };
+}

src/pages/Dashboard/ToolCard.tsx

@@ -0,0 +1,107 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { LucideProps } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
+import type { PaletteColorKey } from '@/config/features';
+import { cn } from '@/lib/utils';
+
+const PALETTE_COLORS: Record<PaletteColorKey, string> = {
+  primary: '13, 148, 136', // teal
+  success: '22, 163, 74', // green
+  warning: '217, 119, 6', // amber (存储清理的橙色轴)
+  error: '220, 38, 38', // red
+  secondary: '147, 51, 232',
+  info: '37, 99, 235', // blue
+};
+
+export interface ToolCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  snapshot?: React.ReactNode;
+  colorKey: PaletteColorKey;
+  icon: ComponentType<LucideProps>;
+  onNavigate: () => void;
+}
+
+export default function ToolCard({
+  title,
+  description,
+  snapshot,
+  colorKey,
+  icon: IconComponent,
+  onNavigate,
+  className,
+  ...props
+}: ToolCardProps) {
+  const rgbValues = PALETTE_COLORS[colorKey];
+
+  return (
+    <div
+      style={{
+        ['--tool-color' as string]: rgbValues,
+      }}
+      /* 💡 核心修复点：
+        - 坚决不用 h-full 或固定高度，锁死 h-auto（高度自适应流），配合 py-4 px-4 牢牢把内容包裹在卡片体内。
+        - 废除原先会乱飘的内联 style 属性擦写，全权放权给 Tailwind 的声明式 hover 变体。
+      */
+      className={cn(
+        'group relative rounded-xl border border-border/70 bg-card text-card-foreground p-4 h-auto flex flex-col items-stretch justify-start gap-3 shadow-sm select-none box-border',
+        'hover:bg-muted/30',
+        'hover:border-[rgba(var(--tool-color),0.45)]',
+        'hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)] dark:hover:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]',
+        className,
+      )}
+      {...props}
+    >
+      {/* 上半部分：核心信息交互排版轴 */}
+      <div className="flex items-center justify-between w-full relative min-w-0 min-h-[44px]">
+        <div className="flex gap-3 items-center min-w-0 flex-1 pr-2">
+          {/* 左侧圆形图标容器 */}
+          <div
+            className={cn(
+              'flex items-center justify-center w-10 h-10 rounded-xl shrink-0',
+              'bg-[rgba(var(--tool-color),0.08)] dark:bg-[rgba(var(--tool-color),0.12)]',
+              'text-[rgb(var(--tool-color))]',
+            )}
+          >
+            <IconComponent className="h-5 w-5 shrink-0" />
+          </div>
+
+          {/* 中间文字描述区：利用 flex-1 min-w-0 防御文本过长发生恶性撑开 */}
+          <div className="flex-1 min-w-0 flex flex-col">
+            <h4 className="font-bold text-sm tracking-tight text-foreground leading-snug">
+              {title}
+            </h4>
+            {description && (
+              <p className="text-[11px] font-medium text-muted-foreground/90 mt-0.5 leading-normal w-full truncate">
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* 右侧指示小箭头 */}
+        <div className="text-muted-foreground/40 group-hover:text-[rgb(var(--tool-color))] p-1 shrink-0 group-hover:translate-x-0.5">
+          <ChevronRight className="h-4 w-4" />
+        </div>
+
+        {/* 覆盖整个上半部分的绝对定位隐形跳转层（A11y 无障碍标准合规） */}
+        <button
+          type="button"
+          onClick={onNavigate}
+          aria-label={`进入 ${title}`}
+          className="absolute inset-0 w-full h-full cursor-pointer bg-transparent border-none opacity-0 focus-visible:outline-none"
+        />
+      </div>
+
+      {/* 下半部分：未来的动态预览沙箱独立承载区 */}
+      {snapshot != null && (
+        <div className="mt-1 pt-3 border-t border-dashed border-border/80 w-full relative z-10 select-text">
+          {snapshot}
+        </div>
+      )}
+    </div>
+  );
+}
+
+ToolCard.displayName = 'ToolCard';

src/pages/Dashboard/index.tsx

@@ -0,0 +1,99 @@
+import { useRouter } from '@/providers/RouterProvider';
+import { getFeatureByKey } from '@/config/features';
+import type { PageType } from '@/types/storage';
+import { useMemo } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+export default function DashboardPage() {
+  const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
+  const { t } = useI18n(['features']);
+
+  const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
+
+  const visibleFeatures = useMemo(() => {
+    return pageOrder
+      .filter((key) => visibleSet.has(key))
+      .map((key) => ({ key, feature: getFeatureByKey(key) }))
+      .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
+  }, [pageOrder, visibleSet]);
+
+  const recentFeatures = useMemo(() => {
+    return recentlyUsedTools
+      .filter((key) => visibleSet.has(key))
+      .map((key) => ({ key, feature: getFeatureByKey(key) }))
+      .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
+  }, [recentlyUsedTools, visibleSet]);
+
+  const showRecent = recentFeatures.length > 0;
+
+  return (
+    <div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
+      {/* 最近使用 */}
+      {showRecent && (
+        <div className="flex flex-col gap-2">
+          <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
+            {t('dashboard_recentlyUsed')}
+          </h3>
+          <div className="flex flex-wrap gap-2">
+            {recentFeatures.map(({ key, feature }) => {
+              const IconComponent = feature!.icon!;
+              return (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => navigateTo(key as PageType)}
+                  className={cn(
+                    'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium',
+                    'border border-border/60 bg-card text-card-foreground',
+                    'hover:bg-muted/40 hover:border-primary/30',
+                    'transition-colors cursor-pointer',
+                  )}
+                >
+                  <IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
+                  {t(feature!.labelKey)}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* 全部工具 — 紧凑 Grid */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
+          {t('dashboard_allTools')}
+        </h3>
+        <div className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
+          {visibleFeatures.map(({ key, feature }) => {
+            const IconComponent = feature!.icon!;
+            return (
+              <button
+                key={key}
+                type="button"
+                onClick={() => navigateTo(key as PageType)}
+                className={cn(
+                  'group flex flex-col items-center justify-center gap-1.5',
+                  'py-3 px-2 rounded-xl border border-border/50 bg-card',
+                  'hover:bg-muted/40 hover:border-primary/30',
+                  'transition-colors cursor-pointer',
+                )}
+              >
+                <IconComponent
+                  className={cn(
+                    'h-5 w-5 text-muted-foreground/70',
+                    'group-hover:text-foreground',
+                    'transition-colors',
+                  )}
+                />
+                <span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
+                  {t(feature!.labelKey)}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/JsonTools/DiffNavigator.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  total: number;
+  /** 0-based index */
+  currentIndex: number;
+  onPrev: () => void;
+  onNext: () => void;
+}
+
+export default function DiffNavigator({
+  total,
+  currentIndex,
+  onPrev,
+  onNext,
+  className,
+  ...props
+}: DiffNavigatorProps) {
+  const { t } = useI18n('jsonDiff');
+
+  const isFirst = currentIndex <= 0;
+  const isLast = currentIndex >= total - 1;
+
+  if (total === 0) {
+    return (
+      <div
+        className={cn(
+          'flex items-center justify-center gap-3 px-4 py-2 rounded-lg border border-border bg-muted/30 select-none',
+          className,
+        )}
+        {...props}
+      >
+        <span className="text-xs font-semibold text-muted-foreground/90">
+          {t('jsonDiff:noDiffs')}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center justify-center gap-3 px-3 h-9 rounded-md border border-border/80 bg-secondary/60 shadow-sm',
+        className,
+      )}
+      {...props}
+    >
+      {/* 上一处差异按钮 */}
+      <button
+        type="button"
+        disabled={isFirst}
+        aria-label={t('jsonDiff:previousDiff')}
+        onClick={onPrev}
+        className={cn(
+          'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
+          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+          'disabled:pointer-events-none disabled:opacity-30',
+        )}
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </button>
+
+      <span className="text-xs font-bold font-mono min-w-[54px] text-center text-foreground/90 tabular-nums select-none">
+        {currentIndex + 1} <span className="text-muted-foreground/60 font-sans mx-0.5">/</span>{' '}
+        {total}
+      </span>
+
+      {/* 下一处差异按钮 */}
+      <button
+        type="button"
+        disabled={isLast}
+        aria-label={t('jsonDiff:nextDiff')}
+        onClick={onNext}
+        className={cn(
+          'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
+          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+          'disabled:pointer-events-none disabled:opacity-30',
+        )}
+      >
+        <ChevronRight className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}

src/pages/JsonTools/DiffResult.tsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+import JsonTree from './JsonTree';
+import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types';
+
+export interface DiffResultProps extends React.HTMLAttributes<HTMLDivElement> {
+  result: DiffResultType;
+  viewMode: ViewMode;
+  activePath?: string;
+}
+
+export default function DiffResult({
+  result,
+  viewMode,
+  activePath,
+  className,
+  ...props
+}: DiffResultProps) {
+  const { t } = useI18n('jsonDiff');
+
+  if (viewMode === 'sideBySide') {
+    return (
+      <div
+        className={cn('flex flex-col md:flex-row gap-4 items-stretch w-full', className)}
+        {...props}
+      >
+        <div className="flex-1 min-w-0">
+          <SectionLabel text={t('jsonDiff:leftLabel')} />
+          <JsonTree node={result.root} side="left" activePath={activePath} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <SectionLabel text={t('jsonDiff:rightLabel')} />
+          <JsonTree node={result.root} side="right" activePath={activePath} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border border-border bg-card font-mono text-xs shadow-sm overflow-x-auto min-h-[200px] max-h-[520px] overflow-y-auto p-1.5',
+        className,
+      )}
+      {...props}
+    >
+      <UnifiedView node={result.root} depth={0} activePath={activePath} />
+    </div>
+  );
+}
+
+const SectionLabel = ({ text }: { text: string }) => (
+  <span className="block mb-2 text-[10px] font-bold tracking-wider text-muted-foreground/80 uppercase px-0.5 select-none">
+    {text}
+  </span>
+);
+
+const formatPrimitive = (v: unknown): string => {
+  if (v === undefined) return 'undefined';
+  if (v === null) return 'null';
+  if (typeof v === 'string') return JSON.stringify(v);
+  if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+  return JSON.stringify(v);
+};
+
+const isContainerType = (v: unknown): boolean =>
+  (typeof v === 'object' && v !== null) || Array.isArray(v);
+
+const prefixForType = (type: DiffType): string => {
+  if (type === 'added') return '+';
+  if (type === 'removed') return '-';
+  if (type === 'modified') return '~';
+  return ' ';
+};
+
+const typeThemeMap = {
+  added: {
+    text: 'text-emerald-600 dark:text-emerald-400',
+    bg: 'bg-emerald-500/5 dark:bg-emerald-500/10',
+  },
+  removed: {
+    text: 'text-destructive',
+    bg: 'bg-destructive/5 dark:bg-destructive/10',
+  },
+  modified: {
+    text: 'text-amber-600 dark:text-amber-400',
+    bg: 'bg-amber-500/5 dark:bg-amber-500/10',
+  },
+  unchanged: {
+    text: 'text-foreground/80',
+    bg: 'bg-transparent',
+  },
+};
+
+interface UnifiedViewProps {
+  node: DiffNode;
+  depth: number;
+  activePath?: string;
+}
+
+const UnifiedView = ({ node, depth, activePath }: UnifiedViewProps) => {
+  const isRoot = depth === 0;
+  const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+  const isContainer =
+    hasChildren || isContainerType(node.oldValue) || isContainerType(node.newValue);
+  const keyLabel = isRoot ? '' : `${node.key}: `;
+
+  if (!isContainer) {
+    if (node.type === 'modified') {
+      return (
+        <>
+          <UnifiedRow
+            depth={depth}
+            type="removed"
+            text={`${keyLabel}${formatPrimitive(node.oldValue)}`}
+            active={activePath === node.path}
+          />
+          <UnifiedRow
+            depth={depth}
+            type="added"
+            text={`${keyLabel}${formatPrimitive(node.newValue)}`}
+            active={activePath === node.path}
+          />
+        </>
+      );
+    }
+    const value = node.type === 'added' ? node.newValue : node.oldValue;
+    return (
+      <UnifiedRow
+        depth={depth}
+        type={node.type}
+        text={`${keyLabel}${formatPrimitive(value)}`}
+        active={activePath === node.path}
+      />
+    );
+  }
+
+  // 容器节点整块渲染处理
+  if (node.type === 'added') {
+    return (
+      <UnifiedRow
+        depth={depth}
+        type="added"
+        text={`${keyLabel}${stringifyMultiline(node.newValue, depth)}`}
+        active={activePath === node.path}
+        multiline
+      />
+    );
+  }
+  if (node.type === 'removed') {
+    return (
+      <UnifiedRow
+        depth={depth}
+        type="removed"
+        text={`${keyLabel}${stringifyMultiline(node.oldValue, depth)}`}
+        active={activePath === node.path}
+        multiline
+      />
+    );
+  }
+
+  const isArr = Array.isArray(node.oldValue) || Array.isArray(node.newValue);
+  const open = isArr ? '[' : '{';
+  const close = isArr ? ']' : '}';
+
+  return (
+    <>
+      <UnifiedRow depth={depth} type="unchanged" text={`${keyLabel}${open}`} />
+      {node.children?.map((child) => (
+        <UnifiedView key={child.path} node={child} depth={depth + 1} activePath={activePath} />
+      ))}
+      <UnifiedRow depth={depth} type="unchanged" text={close} />
+    </>
+  );
+};
+
+interface UnifiedRowProps {
+  depth: number;
+  type: DiffType;
+  text: string;
+  active?: boolean;
+  multiline?: boolean;
+}
+
+const UnifiedRow = ({ depth, type, text, active, multiline }: UnifiedRowProps) => {
+  const currentTheme = typeThemeMap[type] || typeThemeMap.unchanged;
+
+  return (
+    <div
+      className={cn(
+        'flex items-start w-full font-mono py-0.5 select-text group',
+        currentTheme.bg,
+        currentTheme.text,
+        active &&
+          'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1 before:bg-blue-500',
+      )}
+      style={{
+        paddingLeft: `${Math.max(0.5, depth * 1.25)}rem`,
+        paddingRight: '0.5rem',
+      }}
+    >
+      <span className="font-bold w-5 shrink-0 text-center select-none opacity-70 tabular-nums">
+        {prefixForType(type)}
+      </span>
+
+      <span
+        className={cn(
+          'flex-1 break-all tracking-tight leading-normal',
+          multiline ? 'whitespace-pre' : 'whitespace-nowrap',
+        )}
+      >
+        {text}
+      </span>
+    </div>
+  );
+};
+
+const stringifyMultiline = (v: unknown, depth: number): string => {
+  try {
+    const json = JSON.stringify(v, null, 2);
+    if (!json) return formatPrimitive(v);
+    const indent = '  '.repeat(depth);
+    return json
+      .split('\n')
+      .map((line, idx) => (idx === 0 ? line : indent + line))
+      .join('\n');
+  } catch {
+    return formatPrimitive(v);
+  }
+};

src/pages/JsonTools/JsonConvertSection.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
+import { formatByteSize } from '@/utils/textStatistics';
+import CopyButton from '@/components/CopyButton';
+import TextInputArea from '@/components/TextInputArea';
+import { validateJson } from '@/utils/jsonFormatter';
+import { cn } from '@/lib/utils';
+
+export interface ConvertResult {
+  output: string;
+  originalBytes: number;
+  outputBytes: number;
+}
+
+export type ConvertFunction = (text: string) => ConvertResult;
+
+interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  translationPrefix: string;
+  convertFunction: ConvertFunction;
+}
+
+export default function JsonConvertSection({
+  translationPrefix,
+  convertFunction,
+  className,
+  ...props
+}: JsonConvertSectionProps) {
+  const { t } = useI18n('jsonFormat');
+
+  const [input, setInput] = useState('');
+  const [debouncedInput, setDebouncedInput] = useState('');
+
+  const pk = translationPrefix;
+
+  // Debounce input
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedInput(input);
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [input]);
+
+  const error = useMemo(() => {
+    return validateJson(debouncedInput);
+  }, [debouncedInput]);
+
+  const conversionPipeline = useMemo(() => {
+    const trimmed = debouncedInput.trim();
+    if (!trimmed || error) return null;
+
+    try {
+      return convertFunction(debouncedInput);
+    } catch (e) {
+      // 捕获可能从外部转换器（如 YAML.stringify）中抛出的底层异常
+      return {
+        isRuntimeError: true,
+        errorMessage: 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={t(`jsonFormat:${pk}InputPlaceholder`)}
+        value={input}
+        onChange={setInput}
+        externalError={error || runtimeError || undefined}
+        showClear={true}
+        allowCopy={true}
+        minRows={7}
+        maxRows={14}
+        onClear={() => setInput('')}
+      />
+
+      {/* Result display */}
+      {result && result.output ? (
+        <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
+          <div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
+            <div className="flex gap-4 items-center">
+              <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
+                {t(`jsonFormat:${pk}OutputLabel`)}
+              </span>
+
+              <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
+                <span>
+                  {t('jsonFormat:originalSize')}:{' '}
+                  <span className="font-semibold text-foreground/80">
+                    {formatByteSize(result.originalBytes)}
+                  </span>
+                </span>
+                <span className="text-border/60">|</span>
+                <span>
+                  {t('jsonFormat:formattedSize')}:{' '}
+                  <span className="font-semibold text-foreground/80">
+                    {formatByteSize(result.outputBytes)}
+                  </span>
+                </span>
+              </div>
+            </div>
+
+            <CopyButton
+              text={result.output}
+              className="h-6 w-6 rounded-md border text-muted-foreground"
+            />
+          </div>
+
+          <div className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all max-h-[380px] overflow-y-auto leading-relaxed select-text">
+            {result.output}
+          </div>
+        </div>
+      ) : (
+        <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
+          <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
+            {error ? t('jsonFormat:fixErrorHint') : t(`jsonFormat:${pk}EmptyHint`)}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/JsonTools/JsonDiffInput.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import TextInputArea from '@/components/TextInputArea';
+import { cn } from '@/lib/utils';
+
+export interface JsonDiffInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  label: string;
+  placeholder: string;
+  value: string;
+  onChange: (value: string) => void;
+  error?: string | null;
+  minRows?: number;
+}
+
+export default function JsonDiffInput({
+  label,
+  placeholder,
+  value,
+  onChange,
+  error,
+  minRows = 10,
+  className,
+  ...props
+}: JsonDiffInputProps) {
+  return (
+    <div className={cn('flex-1 min-w-0 flex flex-col', className)} {...props}>
+      <span className="block mb-2 text-[10px] font-bold tracking-wide text-muted-foreground/80 uppercase select-none px-0.5">
+        {label}
+      </span>
+
+      <TextInputArea
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        minRows={minRows}
+        maxRows={16}
+        externalError={error ?? undefined}
+        showClear={true}
+        allowCopy={true}
+      />
+    </div>
+  );
+}

src/pages/JsonTools/JsonFormatSection.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
+import {
+  formatJson,
+  type JsonFormatOptions,
+  type JsonFormatResult,
+  validateJson,
+} from '@/utils/jsonFormatter';
+import { formatByteSize } from '@/utils/textStatistics';
+import CopyButton from '@/components/CopyButton';
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import TextInputArea from '@/components/TextInputArea';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+export default function JsonFormatSection() {
+  const { t } = useI18n('jsonFormat');
+
+  const [input, setInput] = useState('');
+  const [debouncedInput, setDebouncedInput] = useState('');
+  const [indentSize, setIndentSize] = useState<number>(2);
+  const [sortKeys, setSortKeys] = useState(false);
+
+  // Debounce input
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedInput(input);
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [input]);
+
+  const error = useMemo(() => {
+    return validateJson(debouncedInput);
+  }, [debouncedInput]);
+
+  // Real-time formatting pipeline
+  const formattedPipeline = useMemo(() => {
+    const trimmed = debouncedInput.trim();
+    if (!trimmed || error) return null;
+
+    try {
+      const options: JsonFormatOptions = { indentSize, sortKeys };
+      return formatJson(debouncedInput, options);
+    } catch (e) {
+      return {
+        isRuntimeError: true,
+        errorMessage: 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">
+              {t('jsonFormat:indentSize')}
+            </span>
+            <SwitchButtonGroup
+              value={indentSize}
+              onChange={(v) => setIndentSize(Number(v))}
+              options={[2, 4, 6, 8].map((size) => ({ value: size, label: String(size) }))}
+              size="small"
+            />
+          </div>
+
+          <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"
+          >
+            <Checkbox
+              id="sort-keys-checkbox"
+              checked={sortKeys}
+              onClick={(e) => e.stopPropagation()}
+              onCheckedChange={(checked) => setSortKeys(checked === true)}
+              className="h-3.5 w-3.5 rounded border-input data-[state=checked]:bg-primary shadow-sm"
+            />
+            <Label
+              htmlFor="sort-keys-checkbox"
+              className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
+            >
+              {t('jsonFormat:sortKeys')}
+            </Label>
+          </div>
+        </div>
+      </div>
+
+      {/* 满血版输入终端 */}
+      <TextInputArea
+        placeholder={t('jsonFormat:inputPlaceholder')}
+        value={input}
+        onChange={setInput}
+        externalError={error || runtimeError || undefined}
+        showClear={true}
+        allowCopy={true}
+        minRows={8}
+        maxRows={15}
+        onClear={() => setInput('')}
+      />
+
+      {/* 格式化结果流面板展示 */}
+      {result && result.formatted ? (
+        <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
+          {/* 结果栏头部 */}
+          <div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
+            <div className="flex gap-4 items-center">
+              <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
+                {t('jsonFormat:outputLabel')}
+              </span>
+
+              <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
+                <span>
+                  {t('jsonFormat:originalSize')}:{' '}
+                  <span className="font-semibold text-foreground/80">
+                    {formatByteSize(result.originalBytes)}
+                  </span>
+                </span>
+                <span className="text-border/60">|</span>
+                <span>
+                  {t('jsonFormat:formattedSize')}:{' '}
+                  <span className="font-semibold text-foreground/80">
+                    {formatByteSize(result.formattedBytes)}
+                  </span>
+                </span>
+              </div>
+            </div>
+
+            <CopyButton
+              text={result.formatted}
+              className="h-6 w-6 rounded-md border text-muted-foreground"
+            />
+          </div>
+
+          <div className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all max-h-[420px] overflow-y-auto leading-relaxed select-text">
+            {result.formatted}
+          </div>
+        </div>
+      ) : (
+        /* 空状态指示引导区 */
+        <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
+          <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
+            {error ? t('jsonFormat:fixErrorHint') : t('jsonFormat:emptyHint')}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/JsonTools/JsonTree.tsx

@@ -0,0 +1,261 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react'; // 用正统的矢量箭头平替原生的字符 '▾' '▸'
+import type { DiffNode, DiffType } from './types';
+import { cn } from '@/lib/utils';
+
+export type TreeSide = 'left' | 'right';
+
+export interface JsonTreeProps extends React.HTMLAttributes<HTMLDivElement> {
+  node: DiffNode;
+  side: TreeSide;
+  defaultExpandDepth?: number;
+  activePath?: string;
+}
+
+interface NodeRowProps {
+  node: DiffNode;
+  side: TreeSide;
+  depth: number;
+  defaultExpandDepth: number;
+  activePath?: string;
+  isLastChild: boolean;
+}
+
+const formatPrimitive = (v: unknown): string => {
+  if (v === null) return 'null';
+  if (typeof v === 'string') return JSON.stringify(v);
+  if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+  return JSON.stringify(v);
+};
+
+const shouldRenderOnSide = (type: DiffType, side: TreeSide): boolean => {
+  if (type === 'added') return side === 'right';
+  if (type === 'removed') return side === 'left';
+  return true;
+};
+
+const getValueForSide = (node: DiffNode, side: TreeSide): unknown => {
+  return side === 'left' ? node.oldValue : node.newValue;
+};
+
+const typeThemeMap = {
+  added: {
+    text: 'text-emerald-600 dark:text-emerald-400',
+    bg: 'bg-emerald-500/5 dark:bg-emerald-500/10 hover:bg-emerald-500/10 dark:hover:bg-emerald-500/15',
+  },
+  removed: {
+    text: 'text-destructive',
+    bg: 'bg-destructive/5 dark:bg-destructive/10 hover:bg-destructive/10 dark:hover:bg-destructive/15',
+  },
+  modified: {
+    text: 'text-amber-600 dark:text-amber-400',
+    bg: 'bg-amber-500/5 dark:bg-amber-500/10 hover:bg-amber-500/10 dark:hover:bg-amber-500/15',
+  },
+  unchanged: {
+    text: 'text-foreground/80',
+    bg: 'hover:bg-muted/60',
+  },
+};
+
+const isContainerValue = (v: unknown): boolean => {
+  return (typeof v === 'object' && v !== null) || Array.isArray(v);
+};
+
+const NodeRow = React.memo(
+  ({ node, side, depth, defaultExpandDepth, activePath, isLastChild }: NodeRowProps) => {
+    const [override, setOverride] = useState<'auto' | 'open' | 'closed'>('auto');
+    const rowRef = useRef<HTMLDivElement | null>(null);
+
+    const onActivePath = useMemo(() => {
+      return Boolean(
+        activePath &&
+        (activePath === node.path ||
+          activePath.startsWith(`${node.path}.`) ||
+          activePath.startsWith(`${node.path}[`)),
+      );
+    }, [activePath, node.path]);
+
+    const expanded =
+      override === 'open'
+        ? true
+        : override === 'closed'
+          ? 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
+          className="text-transparent select-none opacity-0 h-[22px] leading-relaxed"
+          style={{ paddingLeft: `${depth * 1.15}rem` }}
+        >
+          ·
+        </div>
+      );
+    }
+
+    const value = getValueForSide(node, side);
+    const isContainer = isContainerValue(value) && Array.isArray(node.children);
+    const isArray = Array.isArray(value);
+    const theme = typeThemeMap[node.type] || typeThemeMap.unchanged;
+    const isActive = activePath === node.path;
+    const isRoot = depth === 0;
+
+    const indentStyle = {
+      paddingLeft: `${Math.max(0.25, depth * 1.15)}rem`,
+    };
+
+    const indentClass = cn(
+      'relative',
+      depth > 0 &&
+        'before:absolute before:left-[4px] before:top-0 before:bottom-0 before:w-[1px] before:bg-border/40',
+    );
+
+    if (isContainer && node.children) {
+      const open = isArray ? '[' : '{';
+      const close = isArray ? ']' : '}';
+
+      return (
+        <div ref={rowRef} className="w-full flex flex-col">
+          {/* 大容器开端行 */}
+          <div
+            onClick={() => setOverride(expanded ? 'closed' : 'open')}
+            className={cn(
+              'group flex items-center gap-1 py-0.5 pr-2 text-xs font-mono select-none cursor-pointer rounded-sm w-full h-[22px] leading-relaxed',
+              theme.bg,
+              isActive &&
+                'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-0.5 before:bg-blue-500 rounded-none ring-0',
+            )}
+            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" />
+              ) : (
+                <ChevronRight className="h-3 w-3" />
+              )}
+            </span>
+
+            {!isRoot && (
+              <span className="text-foreground/90 font-bold tracking-tight">{node.key}:</span>
+            )}
+
+            <span className="text-muted-foreground/80 font-semibold">{open}</span>
+
+            {!expanded && (
+              <span className="text-[10px] px-1.5 py-0.2 rounded bg-muted/80 text-muted-foreground font-sans font-medium mx-1 select-none">
+                {summarize(value)}
+              </span>
+            )}
+
+            {!expanded && (
+              <span className="text-muted-foreground/80 font-semibold">
+                {close}
+                {isLastChild ? '' : ','}
+              </span>
+            )}
+          </div>
+
+          {/* 容器子节点递归区 */}
+          {expanded && (
+            <div className={indentClass}>
+              {node.children.map((child, idx) => (
+                <NodeRow
+                  key={child.path}
+                  node={child}
+                  side={side}
+                  depth={depth + 1}
+                  defaultExpandDepth={defaultExpandDepth}
+                  activePath={activePath}
+                  isLastChild={idx === node.children!.length - 1}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* 大容器收尾行 */}
+          {expanded && (
+            <div
+              className="text-muted-foreground/80 font-mono text-xs py-0.5 h-[22px] leading-relaxed"
+              style={{ paddingLeft: `${depth * 1.15 + 0.88}rem` }}
+            >
+              {close}
+              {isLastChild ? '' : ','}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    // 叶子数据行分支
+    return (
+      <div
+        ref={rowRef}
+        className={cn(
+          'flex items-center gap-1 py-0.5 pr-2 font-mono text-xs w-full h-[22px] leading-relaxed rounded-sm',
+          theme.bg,
+          isActive &&
+            'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-0.5 before:bg-blue-500 rounded-none ring-0',
+        )}
+        style={indentStyle}
+      >
+        <span className="w-3.5 shrink-0" /> {/* 与上方的折叠键轴线严格对齐 */}
+        {!isRoot && (
+          <span className="text-foreground/90 font-bold tracking-tight">{node.key}:</span>
+        )}
+        <span className={cn('font-medium tracking-tight truncate flex-1', theme.text)}>
+          {formatPrimitive(value)}
+          <span className="text-foreground/60 font-sans">{isLastChild ? '' : ','}</span>
+        </span>
+      </div>
+    );
+  },
+);
+
+NodeRow.displayName = 'NodeRow';
+
+export default function JsonTree({
+  node,
+  side,
+  defaultExpandDepth = 2,
+  activePath,
+  className,
+  ...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',
+        className,
+      )}
+      {...props}
+    >
+      <NodeRow
+        node={node}
+        side={side}
+        depth={0}
+        defaultExpandDepth={defaultExpandDepth}
+        activePath={activePath}
+        isLastChild
+      />
+    </div>
+  );
+}
+
+const summarize = (v: unknown): string => {
+  if (Array.isArray(v)) return `${v.length} ${v.length === 1 ? 'item' : 'items'}`;
+  if (v && typeof v === 'object') {
+    const n = Object.keys(v).length;
+    return `${n} ${n === 1 ? 'key' : 'keys'}`;
+  }
+  return '';
+};

src/pages/JsonTools/diffEngine.ts

@@ -0,0 +1,189 @@
+import type { DiffNode, DiffResult, DiffType } from './types';
+
+const ROOT_PATH = '$';
+const SENTINEL = Symbol('missing');
+
+type MaybeMissing = unknown | typeof SENTINEL;
+
+const isObject = (v: unknown): v is Record<string, unknown> =>
+  typeof v === 'object' && v !== null && !Array.isArray(v);
+
+const isArray = (v: unknown): v is unknown[] => Array.isArray(v);
+
+/**
+ * 健壮的 JSONPath 生成器：支持针对包含点号、空格或特殊字符的键名进行括号转义拦截
+ */
+const buildPath = (parent: string, key: string, isArrayChild: boolean): string => {
+  if (isArrayChild) {
+    return `${parent}[${key}]`;
+  }
+  const needsEscaping = key.includes('.') || key.includes('[') || key.includes(' ');
+  const formattedKey = needsEscaping ? `["${key}"]` : `.${key}`;
+
+  return parent === ROOT_PATH ? `${ROOT_PATH}${formattedKey}` : `${parent}${formattedKey}`;
+};
+
+const primitiveEqual = (a: unknown, b: unknown): boolean => {
+  if (typeof a === 'number' && typeof b === 'number') {
+    return Object.is(a, b);
+  }
+  return a === b;
+};
+
+const diffNode = (
+  left: MaybeMissing,
+  right: MaybeMissing,
+  key: string,
+  path: string,
+  diffPaths: string[],
+): DiffNode => {
+  // 分支 1：节点增加行为拦截 (叶子节点状态)
+  if (left === SENTINEL && right !== SENTINEL) {
+    diffPaths.push(path);
+    return {
+      key,
+      type: 'added',
+      oldValue: undefined,
+      newValue: right,
+      path,
+      isLeaf: !isObject(right) && !isArray(right),
+      hasDiffInChildren: false, // 自身即是新增，子树无需向下检索
+    };
+  }
+
+  // 分支 2：节点删除行为拦截 (叶子节点状态)
+  if (right === SENTINEL && left !== SENTINEL) {
+    diffPaths.push(path);
+    return {
+      key,
+      type: 'removed',
+      oldValue: left,
+      newValue: undefined,
+      path,
+      isLeaf: !isObject(left) && !isArray(left),
+      hasDiffInChildren: false, // 自身即是删除，子树无需向下检索
+    };
+  }
+
+  const leftObj = isObject(left);
+  const rightObj = isObject(right);
+  const leftArr = isArray(left);
+  const rightArr = isArray(right);
+
+  // 分支 3：双对象深层递归 (容器状态)
+  if (leftObj && rightObj) {
+    const keySet = new Set<string>();
+    const leftKeys = Object.keys(left);
+    const rightKeys = Object.keys(right);
+
+    for (let i = 0; i < leftKeys.length; i++) keySet.add(leftKeys[i]);
+    for (let i = 0; i < rightKeys.length; i++) keySet.add(rightKeys[i]);
+
+    const children: DiffNode[] = [];
+    keySet.forEach((k) => {
+      const childPath = buildPath(path, k, false);
+      const l: MaybeMissing = k in left ? left[k] : SENTINEL;
+      const r: MaybeMissing = k in right ? right[k] : SENTINEL;
+      children.push(diffNode(l, r, k, childPath, diffPaths));
+    });
+
+    const hasDiffInChildren = children.some((c) => c.type !== 'unchanged' || c.hasDiffInChildren);
+
+    return {
+      key,
+      type: hasDiffInChildren ? 'modified' : 'unchanged',
+      oldValue: left,
+      newValue: right,
+      children,
+      path,
+      isLeaf: false,
+      hasDiffInChildren, // 完美注入预计算衍生状态
+    };
+  }
+
+  // 分支 4：双数组深层按序递归 (容器状态)
+  if (leftArr && rightArr) {
+    const len = Math.max(left.length, right.length);
+    const children: DiffNode[] = new Array(len);
+
+    for (let i = 0; i < len; i++) {
+      const k = String(i);
+      const childPath = buildPath(path, k, true);
+      const l: MaybeMissing = i < left.length ? left[i] : SENTINEL;
+      const r: MaybeMissing = i < right.length ? right[i] : SENTINEL;
+      children[i] = diffNode(l, r, k, childPath, diffPaths);
+    }
+
+    const hasDiffInChildren = children.some((c) => c.type !== 'unchanged' || c.hasDiffInChildren);
+
+    return {
+      key,
+      type: hasDiffInChildren ? 'modified' : 'unchanged',
+      oldValue: left,
+      newValue: right,
+      children,
+      path,
+      isLeaf: false,
+      hasDiffInChildren, // 完美注入预计算衍生状态
+    };
+  }
+
+  // 分支 5：绝对类型安全防护大闸 (双基本基元比对)
+  const leftIsContainer = leftObj || leftArr;
+  const rightIsContainer = rightObj || rightArr;
+
+  if (!leftIsContainer && !rightIsContainer) {
+    if (left === null || right === null) {
+      if (left === null && right === null) {
+        return {
+          key,
+          type: 'unchanged',
+          oldValue: left,
+          newValue: right,
+          path,
+          isLeaf: true,
+          hasDiffInChildren: false,
+        };
+      }
+    } else if (typeof left === typeof right) {
+      if (primitiveEqual(left, right)) {
+        return {
+          key,
+          type: 'unchanged',
+          oldValue: left,
+          newValue: right,
+          path,
+          isLeaf: true,
+          hasDiffInChildren: false,
+        };
+      }
+    }
+  }
+
+  // 类型完全发生突变错配，或者基本数值不相等
+  diffPaths.push(path);
+  return {
+    key,
+    type: 'modified',
+    oldValue: left,
+    newValue: right,
+    path,
+    isLeaf: !leftIsContainer && !rightIsContainer,
+    hasDiffInChildren: false, // 变动在自身，后代无子树变动
+  };
+};
+
+/**
+ * 比较两个 JSON 值的差异，返回安全的差异树及高精度差异路径列表。
+ */
+export const diffJson = (left: unknown, right: unknown): DiffResult => {
+  const diffPaths: string[] = [];
+  const root = diffNode(left, right, '', ROOT_PATH, diffPaths);
+  return {
+    root,
+    diffPaths,
+    diffCount: diffPaths.length,
+  };
+};
+
+export type { DiffNode, DiffResult, DiffType };

src/pages/JsonTools/index.tsx

@@ -0,0 +1,198 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
+import JsonDiffInput from './JsonDiffInput';
+import DiffResult from './DiffResult';
+import DiffNavigator from './DiffNavigator';
+import JsonFormatSection from './JsonFormatSection';
+import type { ConvertFunction } from './JsonConvertSection';
+import JsonConvertSection from './JsonConvertSection';
+import { diffJson } from './diffEngine';
+import { jsonToYaml } from '@/utils/jsonToYaml';
+import { jsonToToml } from '@/utils/jsonToToml';
+import { minifyJson } from '@/utils/jsonFormatter';
+import { useStorageState } from '@/utils/useStorageState';
+import type { JsonToolsPageMode } from '@/types/storage';
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import type { ViewMode } from './types';
+
+interface ParseState {
+  value: unknown;
+  error: string | null;
+}
+
+const tryParse = (raw: string, invalidMsg: string): ParseState => {
+  const trimmed = raw.trim();
+  if (!trimmed) return { value: undefined, error: null };
+  try {
+    return { value: JSON.parse(trimmed), error: null };
+  } catch {
+    return { value: undefined, error: invalidMsg };
+  }
+};
+
+const VALID_PAGE_MODES: readonly JsonToolsPageMode[] = ['diff', 'format', 'yaml', 'toml', 'minify'];
+const isValidPageMode = (val: unknown): val is JsonToolsPageMode =>
+  typeof val === 'string' && (VALID_PAGE_MODES as readonly string[]).includes(val);
+
+type PageMode = JsonToolsPageMode;
+
+export default function Index() {
+  const { t } = useI18n(['jsonDiff', 'jsonFormat']);
+  const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
+
+  // Debounce input
+  const [leftInput, setLeftInput] = useState('');
+  const [rightInput, setRightInput] = useState('');
+
+  // Debounced values
+  const [debouncedLeft, setDebouncedLeft] = useState('');
+  const [debouncedRight, setDebouncedRight] = useState('');
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedLeft(leftInput);
+      setDebouncedRight(rightInput);
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [leftInput, rightInput]);
+
+  // Parse debounced inputs
+  const parseState = useMemo(() => {
+    const invalidMsg = t('jsonDiff:invalidJson');
+    return {
+      left: tryParse(debouncedLeft, invalidMsg),
+      right: tryParse(debouncedRight, invalidMsg),
+    };
+  }, [debouncedLeft, debouncedRight, t]);
+
+  const leftError = parseState.left.error;
+  const rightError = parseState.right.error;
+
+  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() === '') {
+      return null;
+    }
+    return diffJson(left.value, right.value);
+  }, [parseState, debouncedLeft, debouncedRight]);
+
+  const total = diffResult?.diffPaths.length ?? 0;
+
+  const handlePrev = useCallback(() => {
+    if (total === 0) return;
+    setCurrentDiffIndex((idx) => (idx - 1 + total) % total);
+  }, [total]);
+
+  const handleNext = useCallback(() => {
+    if (total === 0) return;
+    setCurrentDiffIndex((idx) => (idx + 1) % total);
+  }, [total]);
+
+  const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
+
+  const yamlConvert: ConvertFunction = useCallback((text: string) => {
+    const r = jsonToYaml(text);
+    return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
+  }, []);
+
+  const tomlConvert: ConvertFunction = useCallback((text: string) => {
+    const r = jsonToToml(text);
+    return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
+  }, []);
+
+  const minifyConvert: ConvertFunction = useCallback((text: string) => {
+    const r = minifyJson(text);
+    return { output: r.minified, originalBytes: r.originalBytes, outputBytes: r.minifiedBytes };
+  }, []);
+
+  return (
+    <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
+      <SwitchButtonGroup
+        value={pageMode}
+        onChange={(v: PageMode) => setPageMode(v)}
+        options={[
+          { value: 'diff', label: t('jsonFormat:diffMode') },
+          { value: 'format', label: t('jsonFormat:formatMode') },
+          { value: 'yaml', label: t('jsonFormat:yamlMode') },
+          { value: 'toml', label: t('jsonFormat:tomlMode') },
+          { value: 'minify', label: t('jsonFormat:minifyMode') },
+        ]}
+        size="small"
+        className="w-full sm:w-auto"
+      />
+
+      {pageMode === 'diff' ? (
+        <div className="flex flex-col space-y-4">
+          <div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
+            <SwitchButtonGroup
+              value={viewMode}
+              onChange={(v: ViewMode) => setViewMode(v)}
+              options={[
+                { value: 'sideBySide', label: t('jsonDiff:sideBySideMode') },
+                { value: 'unified', label: t('jsonDiff:unifiedMode') },
+              ]}
+              size="small"
+            />
+          </div>
+
+          <div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
+            <JsonDiffInput
+              label={t('jsonDiff:leftLabel')}
+              placeholder={t('jsonDiff:leftPlaceholder')}
+              value={leftInput}
+              onChange={(val) => {
+                setLeftInput(val);
+                setCurrentDiffIndex(0);
+              }}
+              error={leftError}
+              minRows={9}
+            />
+            <JsonDiffInput
+              label={t('jsonDiff:rightLabel')}
+              placeholder={t('jsonDiff:rightPlaceholder')}
+              value={rightInput}
+              onChange={(val) => {
+                setRightInput(val);
+                setCurrentDiffIndex(0);
+              }}
+              error={rightError}
+              minRows={9}
+            />
+          </div>
+
+          {diffResult ? (
+            <div className="flex flex-col space-y-3.5 w-full pt-1">
+              <div className="flex justify-center w-full">
+                <DiffNavigator
+                  total={total}
+                  currentIndex={currentDiffIndex}
+                  onPrev={handlePrev}
+                  onNext={handleNext}
+                />
+              </div>
+              <DiffResult result={diffResult} viewMode={viewMode} activePath={activePath} />
+            </div>
+          ) : (
+            <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[140px]">
+              <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[260px] leading-relaxed">
+                {leftError || rightError ? t('jsonDiff:fixErrorHint') : t('jsonDiff:emptyHint')}
+              </p>
+            </div>
+          )}
+        </div>
+      ) : pageMode === 'format' ? (
+        <JsonFormatSection />
+      ) : pageMode === 'yaml' ? (
+        <JsonConvertSection translationPrefix="yaml" convertFunction={yamlConvert} />
+      ) : pageMode === 'toml' ? (
+        <JsonConvertSection translationPrefix="toml" convertFunction={tomlConvert} />
+      ) : (
+        <JsonConvertSection translationPrefix="minify" convertFunction={minifyConvert} />
+      )}
+    </div>
+  );
+}

src/pages/JsonTools/types.ts

@@ -0,0 +1,55 @@
+export type DiffType = 'added' | 'removed' | 'modified' | 'unchanged';
+export interface DiffNode {
+  /** 节点键名（对象属性名，或者数组的索引字符串 "0", "1"...） */
+  key: string;
+
+  /** 差异状态机核心分类 */
+  type: DiffType;
+
+  /** * 左侧原始数值快照
+   * 💡 优化点：移除了不安全的可选 ?，如果完全缺失则严格流出 undefined，
+   * 倒逼下游渲染层必须做出明确的条件分支防护。
+   */
+  oldValue: unknown;
+
+  /** 右侧最新数值快照 */
+  newValue: unknown;
+
+  /** * 子节点差异列表
+   * 💡 强类型化：只有当对象或数组这类容器节点发生比对时存在，未选中时默认为空数组 []
+   */
+  children?: DiffNode[];
+
+  /** * 节点的绝对路径表达式（严格遵循高可靠的 JSONPath 规约，如 "$.user.profile" 或 "$.list[0]"）
+   * 用于 DiffNavigator 差异导航条进行秒级的 scrollIntoView 视图精准定位高亮
+   */
+  path: string;
+
+  /** 是否为叶子节点（若为 true 代表当前值为基本基元数据类型，若为 false 代表当前值为大括号或方括号容器） */
+  isLeaf: boolean;
+
+  /**
+   * 💡 性能调优大闸（Computed Guard）：
+   * 预计算状态：代表当前节点的深层子孙节点中，是否存在任意一处 'added' | 'removed' | 'modified' 差异行为。
+   * 这使得外界的 JsonTree 在高频折叠/展开时，能在一帧之内直接通过此属性判断是否需要高亮其父大括号，
+   * 彻底终结了原先命令式深度递归遍历子树的昂贵性能代价！
+   */
+  hasDiffInChildren: boolean;
+}
+
+/** 视图对照渲染模式：sideBySide (双栏对照折叠树) | unified (单栏行级混合拍平) */
+export type ViewMode = 'sideBySide' | 'unified';
+
+export interface DiffResult {
+  /** 经过深层比对算法推导生成的根节点核心差异树（AST） */
+  root: DiffNode;
+
+  /** * 扁平化的高精度差异节点绝对路径映射表。
+   * 里面严格存储了所有 type !== 'unchanged' 的节点 path。
+   * 专供外部的 DiffNavigator (差异控制条) 充当中央路由索引，实现 0 延迟的上一处/下一处无缝切流。
+   */
+  diffPaths: string[];
+
+  /** 差异核心总计数（等价于 diffPaths.length），注入 tabular-nums 配合渲染 */
+  diffCount: number;
+}

src/pages/Jwt/index.tsx

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { parseJwt, stringifyJson } from '@/utils/jwt';
+import CopyButton from '@/components/CopyButton';
+import TextInputArea from '@/components/TextInputArea';
+import { useI18n } from '@/utils/chromeI18n';
+import { useContextMenuData } from '@/utils/useContextMenuData';
+import { cn } from '@/lib/utils';
+
+interface SectionProps {
+  title: string;
+  content: unknown;
+  colorClass: string;
+  bgClass: string;
+  borderClass: string;
+}
+
+const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionProps) => {
+  const { t } = useI18n('jwt');
+  return (
+    <div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
+      <div className="flex justify-between items-center mb-2 select-none">
+        <span className={cn('text-xs font-bold tracking-wider uppercase', colorClass)}>
+          {title}
+        </span>
+        <CopyButton
+          text={JSON.stringify(content)}
+          className="h-6 w-6 rounded-md border text-muted-foreground"
+        />
+      </div>
+      <pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
+        {content ? stringifyJson(content) : t('jwt:invalidFormat')}
+      </pre>
+    </div>
+  );
+};
+
+export default function Index() {
+  const { t } = useI18n(['jwt', 'jsonFormat']);
+  const [jwtInput, setJwtInput] = useState('');
+
+  // 2. 防抖中转管道：切断高频键盘敲击时的红色语法闪烁
+  const [debouncedInput, setDebouncedInput] = useState('');
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedInput(jwtInput);
+    }, 200);
+    return () => clearTimeout(handle);
+  }, [jwtInput]);
+
+  const handleContextMenuData = useCallback((payload: string) => {
+    const cleaned = payload.replace(/^Bearer\s*/i, '').trim();
+    setJwtInput(cleaned);
+  }, []);
+
+  useContextMenuData({ featureKey: 'jwt', onData: handleContextMenuData });
+
+  const result = useMemo(() => {
+    if (!debouncedInput.trim()) {
+      return null;
+    }
+    return parseJwt(debouncedInput);
+  }, [debouncedInput]);
+
+  return (
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
+      <div className="flex flex-col gap-4">
+        {/* 输入终端 */}
+        <TextInputArea
+          minRows={5}
+          maxRows={10}
+          placeholder={t('jwt_placeholder')}
+          value={jwtInput}
+          onChange={(val) => {
+            const cleaned = val.replace(/^Bearer\s*/i, '').trim();
+            setJwtInput(cleaned);
+          }}
+          allowCopy={true}
+          showClear={true}
+          externalError={result?.error || undefined}
+          onClear={() => setJwtInput('')}
+        />
+
+        {/* 解码看板结果展现 */}
+        {result && !result.error && (
+          <div className="flex flex-col gap-4">
+            {/* Header 分区：完美致敬 JWT.io 的鲜艳色彩，同时实现黑夜暗化自适应 */}
+            <Section
+              title={t('jwt:headerTitle')}
+              content={result.header}
+              colorClass="text-[#fb015b] dark:text-rose-400"
+              borderClass="border-[#fb015b]/20 dark:border-rose-500/20"
+              bgClass="bg-[#fb015b]/5 dark:bg-rose-500/5"
+            />
+
+            {/* Payload 分区 */}
+            <Section
+              title={t('jwt:payloadTitle')}
+              content={result.payload}
+              colorClass="text-[#a03aff] dark:text-purple-400" // 针对暗黑模式略微调高对比度
+              borderClass="border-[#a03aff]/20 dark:border-purple-500/20"
+              bgClass="bg-[#a03aff]/5 dark:bg-purple-500/5"
+            />
+
+            {/* Signature 签名区：完全对齐标准的 shadcn 骨架阶度 */}
+            <div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
+              <div className="flex justify-between items-center mb-2">
+                <span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
+                  {t('jwt:signatureTitle')}
+                </span>
+                <CopyButton
+                  text={result.signature || ''}
+                  className="h-6 w-6 rounded-md border text-muted-foreground"
+                />
+              </div>
+              <span className="block text-xs font-mono break-all text-foreground/80 bg-muted/30 dark:bg-muted/10 p-3 rounded-lg border border-border/50 leading-relaxed select-text">
+                {result.signature || t('jwt:noSignature')}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* 当解析错误时的干净中性引导拦截 */}
+        {result?.error && (
+          <div className="p-6 rounded-xl bg-muted/30 border border-dashed border-border text-center">
+            <p className="text-xs font-semibold text-muted-foreground/80">
+              {t('jsonFormat:invalidJson')}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import QrCodePage from '../index';
+
+vi.mock('lucide-react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('lucide-react')>();
+  return {
+    ...actual,
+    QrCode: () => <div data-testid="mock-lucide-qrcode">Icon</div>,
+  };
+});
+
+vi.mock('@/components/GlobalSnackbar', () => ({
+  useSnackbar: () => ({
+    showMessage: vi.fn(),
+  }),
+}));
+
+vi.mock('@/config/features', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/config/features')>();
+  return {
+    ...actual,
+    getEntryPointType: () => 'sidepanel',
+  };
+});
+
+vi.mock('@/components/QrCodePreview', () => ({
+  default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
+}));
+
+vi.mock('@/components/ImageUploader', () => ({
+  default: () => <div data-testid="image-uploader">ImageUploader</div>,
+}));
+
+vi.mock('qrious', () => ({
+  default: vi.fn().mockImplementation(() => ({
+    toDataURL: () => 'data:image/png;base64,mock',
+  })),
+}));
+
+describe('QrCodePage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('应该默认渲染生成模式', () => {
+    render(<QrCodePage />);
+    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
+  });
+
+  it('应该渲染模式切换按钮', () => {
+    render(<QrCodePage />);
+    expect(screen.getByText('文本转二维码')).toBeInTheDocument();
+    expect(screen.getByText('二维码转文本')).toBeInTheDocument();
+  });
+
+  it('切换到解析模式应该渲染 ImageUploader', () => {
+    render(<QrCodePage />);
+    fireEvent.click(screen.getByText('二维码转文本'));
+    expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
+    expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
+  });
+
+  it('切换回生成模式应该渲染 QrCodePreview', () => {
+    render(<QrCodePage />);
+    // 先切换到解析模式
+    fireEvent.click(screen.getByText('二维码转文本'));
+    expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
+    // 再切换回生成模式
+    fireEvent.click(screen.getByText('文本转二维码'));
+    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
+  });
+
+  it('应该渲染输入区域的系统标签（对齐新版 Label 机制）', () => {
+    render(<QrCodePage />);
+    expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
+  });
+
+  it('应该渲染双翼响应式卡片网格布局', () => {
+    const { container } = render(<QrCodePage />);
+    const gridContainer = container.querySelector('.grid');
+    expect(gridContainer).toBeInTheDocument();
+  });
+});

src/pages/QrCode/components/GeneratePanel.tsx

@@ -0,0 +1,51 @@
+import TextInputArea from '@/components/TextInputArea';
+import QrCodePreview from '@/components/QrCodePreview';
+import { useI18n } from '@/utils/chromeI18n';
+import { useQrCodeContext } from '../contexts/QrCodeContext';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+export default function GeneratePanel() {
+  const { t } = useI18n('qrCode');
+  const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
+      <div
+        className={cn(
+          'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
+          'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
+        )}
+      >
+        <div className="flex flex-col space-y-2.5 h-full">
+          <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
+            {t('qrCode:urlInputLabel')}
+          </Label>
+
+          <div className="flex-1 min-h-0">
+            <TextInputArea
+              value={generatorState.textToEncode}
+              onChange={setTextToEncode}
+              placeholder={t('qrCode:urlInputPlaceholder')}
+              showCount={true}
+              showClear={true}
+              allowCopy={true}
+              minRows={6}
+              maxRows={12}
+              externalError={generatorState.inputError || undefined}
+              onClear={() => setTextToEncode('')}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col h-full">
+        <QrCodePreview
+          qrCodeDataUrl={generatorState.qrCodeDataUrl}
+          onDownload={downloadQrCode}
+          onCopy={copyQrCode}
+        />
+      </div>
+    </div>
+  );
+}

src/pages/QrCode/components/ParsePanel.tsx

@@ -0,0 +1,99 @@
+import { useCallback, useEffect } from 'react';
+import TextInputArea from '@/components/TextInputArea';
+import ImageUploader from '@/components/ImageUploader';
+import { useSnackbar } from '@/components/GlobalSnackbar';
+import { useI18n } from '@/utils/chromeI18n';
+import { useQrCodeContext } from '../contexts/QrCodeContext';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+export default function ParsePanel() {
+  const { t } = useI18n('qrCode');
+  const { showMessage } = useSnackbar();
+  const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
+
+  // 全局粘贴事件监听
+  const handlePaste = useCallback(
+    async (e: ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].type.startsWith('image/')) {
+          e.preventDefault();
+          const file = items[i].getAsFile();
+          if (file) {
+            handleFileChange(file);
+            showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
+          }
+          return;
+        }
+      }
+
+      const text = e.clipboardData?.getData('text/plain');
+      if (text && text.startsWith('data:image/')) {
+        e.preventDefault();
+        try {
+          const response = await fetch(text);
+          const blob = await response.blob();
+          const file = new File([blob], 'pasted-image.png', { type: blob.type });
+          handleFileChange(file);
+          showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
+        } catch (error) {
+          console.error('处理 Base64 图片失败:', error);
+          showMessage(t('qrCode:imagePasteError'), { severity: 'error', autoHideDuration: 3000 });
+        }
+      }
+    },
+    [handleFileChange, showMessage, t],
+  );
+
+  useEffect(() => {
+    document.addEventListener('paste', handlePaste);
+    return () => {
+      document.removeEventListener('paste', handlePaste);
+    };
+  }, [handlePaste]);
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
+      <div className="flex flex-col h-full">
+        <ImageUploader
+          selectedFile={parserState.selectedFile}
+          onFileChange={handleFileChange}
+          onClearFile={handleClearFile}
+          previewUrl={parserState.previewUrl}
+          onPreviewUrlChange={(url) => setParserState((prev) => ({ ...prev, previewUrl: url }))}
+          dragging={parserState.dragging}
+          onDraggingChange={(dragging) => setParserState((prev) => ({ ...prev, dragging }))}
+        />
+      </div>
+
+      <div
+        className={cn(
+          'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
+          'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
+        )}
+      >
+        <div className="flex flex-col space-y-2.5 h-full">
+          <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider pl-0.5">
+            {t('qrCode:resultLabel')}
+          </Label>
+
+          <div className="flex-1 min-h-0">
+            <TextInputArea
+              value={parserState.decodedResult}
+              readOnly={true}
+              showClear={false}
+              allowCopy={true}
+              placeholder=""
+              minRows={6}
+              maxRows={12}
+              externalError={parserState.parseError || undefined}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/QrCode/contexts/QrCodeContext.ts

@@ -0,0 +1,30 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { createContext, useContext } from 'react';
+import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
+
+export interface QrCodeContextValue {
+  mode: QrCodeMode;
+  setMode: (mode: QrCodeMode) => void;
+
+  generatorState: QrCodeGeneratorState;
+  setTextToEncode: (text: string) => void;
+
+  downloadQrCode: () => void;
+  copyQrCode: () => Promise<void>;
+
+  parserState: QrCodeParserState;
+  setParserState: Dispatch<SetStateAction<QrCodeParserState>>;
+  parseQrCode: (file: File) => Promise<void>;
+  handleFileChange: (file: File) => void;
+  handleClearFile: () => void;
+}
+
+export const QrCodeContext = createContext<QrCodeContextValue | null>(null);
+
+export function useQrCodeContext() {
+  const context = useContext(QrCodeContext);
+  if (!context) {
+    throw new Error('useQrCodeContext must be used within a valid QrCodeProvider container');
+  }
+  return context;
+}

src/pages/QrCode/hooks/useQrCode.ts

@@ -0,0 +1,192 @@
+import { useCallback, useMemo, useState } from 'react';
+import QRious from 'qrious';
+import { useSnackbar } from '@/components/GlobalSnackbar';
+import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
+import { useContextMenuData } from '@/utils/useContextMenuData';
+import { useI18n } from '@/utils/chromeI18n';
+import { useDebounce } from '@/utils/useDebounce';
+import type { QrCodeContextValue } from '../contexts/QrCodeContext';
+import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
+
+export function useQrCode(): QrCodeContextValue {
+  const { t } = useI18n('qrCode');
+  const { showMessage } = useSnackbar();
+
+  const [mode, setMode] = useState<QrCodeMode>('generate');
+
+  const [generatorState, setGeneratorState] = useState<
+    Omit<QrCodeGeneratorState, 'generating' | 'qrCodeDataUrl'>
+  >({
+    textToEncode: '',
+    inputError: '',
+  });
+
+  const [parserState, setParserState] = useState<QrCodeParserState>({
+    decodedResult: '',
+    parsing: false,
+    parseError: '',
+    selectedFile: null,
+    previewUrl: '',
+    dragging: false,
+  });
+
+  const debouncedTextToEncode = useDebounce(generatorState.textToEncode, 200);
+
+  const qrCodeDataUrl = useMemo(() => {
+    const text = debouncedTextToEncode.trim();
+    if (!text) return '';
+
+    try {
+      let url = text;
+      if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        url = 'https://' + url;
+      }
+
+      const isDark = document.documentElement.classList.contains('dark');
+
+      const qr = new QRious({
+        value: url,
+        size: 260,
+        level: 'H',
+        foreground: isDark ? '#f3f4f6' : '#0f172a',
+        background: isDark ? 'transparent' : '#ffffff',
+      });
+
+      return qr.toDataURL();
+    } catch (error) {
+      console.error('QR code generation sync task failed:', error);
+      return '';
+    }
+  }, [debouncedTextToEncode]);
+
+  const fullGeneratorState = useMemo<QrCodeGeneratorState>(
+    () => ({
+      ...generatorState,
+      qrCodeDataUrl,
+      generating: false,
+    }),
+    [generatorState, qrCodeDataUrl],
+  );
+
+  const setTextToEncode = useCallback((text: string) => {
+    setGeneratorState((prev) => ({ ...prev, textToEncode: text, inputError: '' }));
+  }, []);
+
+  const handleContextMenuData = useCallback((payload: string) => {
+    setMode('generate');
+    setGeneratorState((prev) => ({ ...prev, textToEncode: payload, inputError: '' }));
+  }, []);
+
+  useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
+
+  // 反向活态解析二维码算法
+  const parseQrCode = useCallback(
+    async (file: File) => {
+      try {
+        setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
+
+        const result = await parseQrCodeFromFile(file);
+
+        if (result.success && result.data) {
+          setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
+          showMessage(t('qrCode:parseSuccess'), { severity: 'success', autoHideDuration: 1000 });
+        } else {
+          const errorMsg = result.error || t('qrCode:noQrDetected');
+          setParserState((prev) => ({ ...prev, parseError: errorMsg }));
+          showMessage(errorMsg, { severity: 'error', autoHideDuration: 3000 });
+        }
+      } catch (error) {
+        console.error('解析二维码失败:', error);
+        const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
+        setParserState((prev) => ({ ...prev, parseError: errorMsg }));
+        showMessage(errorMsg, { severity: 'error', autoHideDuration: 3000 });
+      } finally {
+        setParserState((prev) => ({ ...prev, parsing: false }));
+      }
+    },
+    [t, showMessage],
+  );
+
+  const downloadQrCode = useCallback(() => {
+    if (!qrCodeDataUrl) return;
+
+    const link = document.createElement('a');
+    link.href = qrCodeDataUrl;
+    link.download = 'qrcode.png';
+    link.click();
+    showMessage(t('qrCode:qrCodeDownloadSuccess'), { severity: 'success', autoHideDuration: 1000 });
+  }, [qrCodeDataUrl, showMessage, t]);
+
+  const copyQrCode = useCallback(async () => {
+    if (!qrCodeDataUrl) return;
+
+    try {
+      const response = await fetch(qrCodeDataUrl);
+      const blob = await response.blob();
+
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'image/png': blob,
+        }),
+      ]);
+
+      showMessage(t('qrCode:qrCodeCopySuccess'), { severity: 'success', autoHideDuration: 1000 });
+    } catch (error) {
+      console.error('复制二维码失败:', error);
+      showMessage(t('qrCode:copyError'), { severity: 'error', autoHideDuration: 3000 });
+    }
+  }, [qrCodeDataUrl, showMessage, t]);
+
+  const handleFileChange = useCallback(
+    (file: File) => {
+      setParserState((prev) => {
+        if (prev.previewUrl) {
+          URL.revokeObjectURL(prev.previewUrl);
+        }
+        return {
+          ...prev,
+          selectedFile: file,
+          previewUrl: URL.createObjectURL(file),
+          decodedResult: '',
+          parseError: '',
+        };
+      });
+
+      // 触发解析安全的后台 Promise
+      parseQrCode(file).catch((err) => {
+        console.error('Parser standalone task thread exploded:', err);
+      });
+    },
+    [parseQrCode],
+  );
+
+  // 清除解析受控文件
+  const handleClearFile = useCallback(() => {
+    setParserState((prev) => {
+      if (prev.previewUrl) {
+        URL.revokeObjectURL(prev.previewUrl);
+      }
+      return {
+        ...prev,
+        selectedFile: null,
+        previewUrl: '',
+        decodedResult: '',
+        parseError: '',
+      };
+    });
+  }, []);
+
+  return {
+    mode,
+    setMode,
+    generatorState: fullGeneratorState,
+    setTextToEncode,
+    parseQrCode,
+    downloadQrCode,
+    copyQrCode,
+    parserState,
+    setParserState,
+    handleFileChange,
+    handleClearFile,
+  };
+}

src/pages/QrCode/index.tsx

@@ -0,0 +1,46 @@
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+
+import { useI18n } from '@/utils/chromeI18n';
+import { QrCodeContext } from './contexts/QrCodeContext';
+import { useQrCode } from './hooks/useQrCode';
+import GeneratePanel from './components/GeneratePanel';
+import ParsePanel from './components/ParsePanel';
+import type { QrCodeMode } from './types';
+
+export default function Index() {
+  const { t } = useI18n('qrCode');
+  const qrCode = useQrCode();
+
+  // 模式选项驱动骨架
+  const modeOptions = [
+    { value: 'generate' as QrCodeMode, label: t('qrCode:urlToQr') },
+    { value: 'parse' as QrCodeMode, label: t('qrCode:qrToUrl') },
+  ];
+
+  return (
+    <QrCodeContext.Provider value={qrCode}>
+      <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
+        <div className="w-full sm:w-fit pt-0.5">
+          <SwitchButtonGroup
+            value={qrCode.mode}
+            options={modeOptions}
+            onChange={qrCode.setMode}
+            size="small"
+          />
+        </div>
+
+        <div className="w-full pt-1.5">
+          {qrCode.mode === 'generate' ? (
+            <div>
+              <GeneratePanel />
+            </div>
+          ) : (
+            <div>
+              <ParsePanel />
+            </div>
+          )}
+        </div>
+      </div>
+    </QrCodeContext.Provider>
+  );
+}

src/pages/QrCode/types.ts

@@ -0,0 +1,39 @@
+/**
+ * 二维码工具页面的状态类型定义
+ */
+
+/** 二维码功能核心主路由模式 */
+export type QrCodeMode = 'generate' | 'parse';
+
+/** * 二维码生成器的状态
+ * 💡 架构优化：保留与全局 Context 骨架契合的形态，
+ * 外部依然可以流畅读取这些状态，但在新架构下运行效率和稳定性大幅提升！
+ */
+export interface QrCodeGeneratorState {
+  /** 受控的输入源文本（支持 URL 或任意文本快照） */
+  textToEncode: string;
+  /** 由防抖源文本流在单次渲染内存中同步派生出的二维码 Base64 Data URL */
+  qrCodeDataUrl: string;
+  /** 是否正在生成（流式架构下已默认为恒定 false 的非阻塞快照，保留作为 UI 骨架兼容） */
+  generating: boolean;
+  /** 输入文本校验或底层画布崩溃的错误提示信息 */
+  inputError: string;
+}
+
+/** * 二维码解析器的状态
+ * 反向活态图片读取终端的流式驱动核心
+ */
+export interface QrCodeParserState {
+  /** 解析解密出的原始文本结果 */
+  decodedResult: string;
+  /** 异步文件系统/画布读取时的后台线程状态锁 */
+  parsing: boolean;
+  /** 图像由于残缺、无矩阵或非标准二维码引发的解析错误信息 */
+  parseError: string;
+  /** 当前被拖拽、粘贴或点击选中的 File 原生文件句柄 */
+  selectedFile: File | null;
+  /** 内存沙箱级别的原生 Blob/File 图片临时预览虚拟 URL */
+  previewUrl: string;
+  /** 用户鼠标拖拽文件在边界内滑移悬停的活态状态大闸 */
+  dragging: boolean;
+}

src/pages/README.md

@@ -0,0 +1,140 @@
+# pages/
+
+功能页面组件目录，每个子目录对应一个工具页面。
+
+## 目录结构约定
+
+典型页面遵循 **UI + Hook 分离** 模式：
+
+```
+pages/FeatureName/
+├── index.tsx              # 页面 UI（纯展示，使用 shadcn/ui 组件）
+├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
+├── constants.ts           # 常量定义（可选）
+├── SubComponent.tsx       # 子组件（可选）
+└── __tests__/             # 测试文件
+    └── index.test.tsx
+```
+
+## 页面列表
+
+### Dashboard/
+
+仪表盘首页，以卡片网格展示所有可见工具，支持点击导航。
+
+| 文件           | 用途                                         |
+| -------------- | -------------------------------------------- |
+| `index.tsx`    | 页面组件，渲染工具卡片网格                   |
+| `ToolCard.tsx` | 工具卡片组件，展示图标、标题、描述和实时数据 |
+
+### Timestamp/
+
+时间戳转换工具，支持秒/毫秒级互转、多时区选择、实时时钟。
+
+| 文件                       | 用途                                                              |
+| -------------------------- | ----------------------------------------------------------------- |
+| `index.tsx`                | 页面 UI                                                           |
+| `useTimestampConverter.ts` | 业务逻辑 Hook，包含转换模式、输入、单位、时区状态和响应式计算管线 |
+| `LiveClock.tsx`            | 实时时钟子组件，`React.memo` 优化                                 |
+| `ResultView.tsx`           | 转换结果展示子组件                                                |
+| `constants.ts`             | 时区列表等常量                                                    |
+
+### StorageCleaner/
+
+浏览器存储清理工具，支持 Cookie/LocalStorage/SessionStorage/IndexedDB/Cache/SW 清理。
+
+| 文件                        | 用途           |
+| --------------------------- | -------------- |
+| `index.tsx`                 | 页面 UI        |
+| `useStorageCleaner.ts`      | 业务逻辑 Hook  |
+| `StorageOptionsGrid.tsx`    | 清理选项网格   |
+| `StorageCleanerConfirm.tsx` | 清理确认对话框 |
+| `AutoRefreshToggle.tsx`     | 自动刷新开关   |
+| `ErrorDisplay.tsx`          | 错误展示组件   |
+| `CleaningResult.tsx`        | 清理结果展示   |
+| `OptionItem.tsx`            | 单个选项组件   |
+
+### QrCode/
+
+二维码工具，支持生成（URL→QR）和解析（QR→URL）。
+
+| 文件/目录     | 用途             |
+| ------------- | ---------------- |
+| `index.tsx`   | 页面 UI          |
+| `types.ts`    | 类型定义         |
+| `contexts/`   | Context Provider |
+| `hooks/`      | 业务逻辑 Hooks   |
+| `components/` | 子组件           |
+
+### TextStatistics/
+
+文本统计工具，实时计算字符数、单词数、行数、字节大小。
+
+| 文件        | 用途                                          |
+| ----------- | --------------------------------------------- |
+| `index.tsx` | 页面组件，集成 `TextInputArea` 和统计结果展示 |
+
+### Jwt/
+
+JWT 解析工具，解码 Header/Payload/Signature。
+
+| 文件/目录     | 用途             |
+| ------------- | ---------------- |
+| `index.tsx`   | 页面 UI          |
+| `types.ts`    | 类型定义         |
+| `contexts/`   | Context Provider |
+| `hooks/`      | 业务逻辑 Hooks   |
+| `components/` | 子组件           |
+
+### JsonTools/
+
+JSON 工具集：差异比较、格式化、YAML/TOML/Minify 转换。
+
+| 文件                     | 用途                         |
+| ------------------------ | ---------------------------- |
+| `index.tsx`              | 页面入口，子模式切换         |
+| `types.ts`               | 类型定义                     |
+| `diffEngine.ts`          | 差异比较引擎                 |
+| `JsonDiffInput.tsx`      | JSON 输入组件                |
+| `DiffResult.tsx`         | 差异结果展示                 |
+| `DiffNavigator.tsx`      | 差异导航器                   |
+| `JsonFormatSection.tsx`  | 格式化区域                   |
+| `JsonConvertSection.tsx` | 转换区域（YAML/TOML/Minify） |
+| `JsonTree.tsx`           | JSON 树形展示                |
+
+### Base64Converter/
+
+Base64 编解码工具，支持文本/文件/图片三种模式。
+
+| 文件                         | 用途                  |
+| ---------------------------- | --------------------- |
+| `index.tsx`                  | 页面入口，子模式切换  |
+| `useBase64Converter.ts`      | 业务逻辑 Hook         |
+| `TextMode.tsx`               | 文本模式              |
+| `Base64ConverterSection.tsx` | 文件/图片通用转换区域 |
+
+### MarkdownToHtml/
+
+Markdown 转 HTML 工具，支持分栏/预览/源码三种视图模式。
+
+### HtmlToMarkdown/
+
+HTML 转 Markdown 工具，支持分栏/预览/Markdown 三种视图模式。
+
+### RightClickRestorer/
+
+右键菜单恢复工具，解除网站对右键的限制。
+
+| 文件                       | 用途          |
+| -------------------------- | ------------- |
+| `index.tsx`                | 页面 UI       |
+| `useRightClickRestorer.ts` | 业务逻辑 Hook |
+
+## 新增页面
+
+1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型成员
+2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置
+3. 在 `pages/` 创建页面目录（遵循上述结构）
+4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译
+5. 如需新权限，更新 `wxt.config.ts`
+6. 添加对应的单元测试

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

@@ -0,0 +1,38 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import RightClickRestorerPage from '../index';
+
+const mockUnlock = vi.fn();
+
+vi.mock('../useRightClickRestorer', () => ({
+  useRightClickRestorer: () => ({
+    domain: 'example.com',
+    isLoading: false,
+    isUnlocked: false,
+    isUnsupported: false,
+    unlock: mockUnlock,
+  }),
+}));
+
+describe('RightClickRestorerPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render current domain', () => {
+    render(<RightClickRestorerPage />);
+    expect(screen.getByText(/example\.com/)).toBeInTheDocument();
+  });
+
+  it('should render locked status', () => {
+    render(<RightClickRestorerPage />);
+    expect(screen.getByText(/未解锁/)).toBeInTheDocument();
+  });
+
+  it('should call unlock when button clicked', () => {
+    render(<RightClickRestorerPage />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(mockUnlock).toHaveBeenCalled();
+  });
+});

src/pages/RightClickRestorer/__tests__/useRightClickRestorer.test.ts

@@ -0,0 +1,92 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useRightClickRestorer } from '../useRightClickRestorer';
+import { sendMessageToContent } from '@/utils/messages';
+
+const mockTabsQuery = vi.fn();
+
+vi.mock('@/utils/messages', () => ({
+  MessageAction: {
+    RESTORE_RIGHT_CLICK: 'restoreRightClick',
+    QUERY_RIGHT_CLICK_STATUS: 'queryRightClickStatus',
+  },
+  sendMessageToContent: vi.fn(),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockTabsQuery.mockResolvedValue([{ url: 'https://example.com/path' }]);
+  chrome.tabs.query = mockTabsQuery;
+  vi.mocked(sendMessageToContent).mockResolvedValue({ success: true, restored: false });
+});
+
+describe('useRightClickRestorer', () => {
+  it('should load domain and query status', async () => {
+    const { result } = renderHook(() => useRightClickRestorer());
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.domain).toBe('example.com');
+    expect(result.current.isUnlocked).toBe(false);
+    expect(result.current.isUnsupported).toBe(false);
+    expect(sendMessageToContent).toHaveBeenCalledWith('queryRightClickStatus');
+  });
+
+  it('should mark internal pages as unsupported', async () => {
+    mockTabsQuery.mockResolvedValue([{ url: 'chrome://newtab/' }]);
+    chrome.tabs.query = mockTabsQuery;
+
+    const { result } = renderHook(() => useRightClickRestorer());
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.isUnsupported).toBe(true);
+    expect(result.current.isUnlocked).toBe(false);
+    expect(sendMessageToContent).not.toHaveBeenCalled();
+  });
+
+  it('should unlock right click', async () => {
+    vi.mocked(sendMessageToContent).mockResolvedValueOnce({ success: true, restored: false });
+    vi.mocked(sendMessageToContent).mockResolvedValueOnce({ success: true, restored: true });
+
+    const { result } = renderHook(() => useRightClickRestorer());
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    await act(async () => {
+      await result.current.unlock();
+    });
+
+    expect(result.current.isUnlocked).toBe(true);
+    expect(sendMessageToContent).toHaveBeenLastCalledWith('restoreRightClick');
+  });
+
+  it('should not unlock unsupported pages', async () => {
+    mockTabsQuery.mockResolvedValue([{ url: 'chrome://settings/' }]);
+    chrome.tabs.query = mockTabsQuery;
+
+    const { result } = renderHook(() => useRightClickRestorer());
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    await act(async () => {
+      await result.current.unlock();
+    });
+
+    expect(result.current.isUnlocked).toBe(false);
+    expect(sendMessageToContent).not.toHaveBeenCalled();
+  });
+
+  it('should handle sendMessage failure gracefully', async () => {
+    vi.mocked(sendMessageToContent).mockRejectedValue(new Error('Connection failed'));
+
+    const { result } = renderHook(() => useRightClickRestorer());
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    await act(async () => {
+      await result.current.unlock();
+    });
+
+    expect(result.current.isUnlocked).toBe(false);
+  });
+});

src/pages/RightClickRestorer/index.tsx

@@ -0,0 +1,85 @@
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Shield, ShieldCheck, MousePointerClick, AlertTriangle } from 'lucide-react';
+import { useRightClickRestorer } from './useRightClickRestorer';
+import { useI18n } from '@/utils/chromeI18n';
+
+export default function RightClickRestorerPage() {
+  const { t } = useI18n('rightClickRestorer');
+  const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
+        <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
+          {t('rightClickRestorer:loading')}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 w-full flex flex-col space-y-4">
+      {/* Current Domain */}
+      <div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
+        <div className="p-4">
+          <Label className="text-sm font-medium">{t('rightClickRestorer:currentDomain')}</Label>
+          <div className="mt-2 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 || '—'}
+            </code>
+            {isUnsupported ? (
+              <Badge variant="destructive" className="gap-1 shrink-0">
+                <AlertTriangle className="h-3 w-3" />
+                {t('rightClickRestorer:unsupported')}
+              </Badge>
+            ) : isUnlocked ? (
+              <Badge variant="default" className="gap-1 bg-green-600 hover:bg-green-700 shrink-0">
+                <ShieldCheck className="h-3 w-3" />
+                {t('rightClickRestorer:statusUnlocked')}
+              </Badge>
+            ) : (
+              <Badge variant="secondary" className="gap-1 shrink-0">
+                <Shield className="h-3 w-3" />
+                {t('rightClickRestorer:statusLocked')}
+              </Badge>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Unlock Action */}
+      <div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
+        <div className="p-4 space-y-3">
+          {isUnsupported ? (
+            <>
+              <p className="text-xs text-muted-foreground">
+                {t('rightClickRestorer:unsupportedDesc')}
+              </p>
+              <Button className="w-full gap-2" disabled variant="secondary">
+                <AlertTriangle className="h-4 w-4" />
+                {t('rightClickRestorer:unsupported')}
+              </Button>
+            </>
+          ) : (
+            <>
+              <p className="text-xs text-muted-foreground">{t('rightClickRestorer:unlockDesc')}</p>
+              <Button
+                className="w-full gap-2"
+                onClick={() => void unlock()}
+                disabled={isUnlocked}
+                variant={isUnlocked ? 'secondary' : 'default'}
+              >
+                <MousePointerClick className="h-4 w-4" />
+                {isUnlocked
+                  ? t('rightClickRestorer:alreadyUnlocked')
+                  : t('rightClickRestorer:unlockBtn')}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/RightClickRestorer/useRightClickRestorer.ts

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useState } from 'react';
+import { MessageAction, sendMessageToContent } from '@/utils/messages';
+
+const UNSUPPORTED_PROTOCOLS = new Set([
+  'chrome:',
+  'chrome-extension:',
+  'about:',
+  'edge:',
+  'brave:',
+]);
+
+function isUnsupportedPage(url: string | undefined): boolean {
+  if (!url) return true;
+  try {
+    const protocol = new URL(url).protocol;
+    return UNSUPPORTED_PROTOCOLS.has(protocol);
+  } catch {
+    return true;
+  }
+}
+
+export interface UseRightClickRestorerReturn {
+  domain: string;
+  isLoading: boolean;
+  isUnlocked: boolean;
+  isUnsupported: boolean;
+  unlock: () => Promise<void>;
+}
+
+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);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+        const url = tab?.url;
+
+        if (url) {
+          try {
+            setDomain(new URL(url).hostname);
+          } catch {
+            setDomain('');
+          }
+        }
+
+        if (isUnsupportedPage(url)) {
+          setIsUnsupported(true);
+          setIsLoading(false);
+          return;
+        }
+
+        const response = await sendMessageToContent(MessageAction.QUERY_RIGHT_CLICK_STATUS);
+        if (response?.success) {
+          setIsUnlocked(response.restored);
+        }
+      } catch (err) {
+        console.error('[RightClickRestorer] Failed to load state:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void load();
+  }, []);
+
+  const unlock = useCallback(async () => {
+    if (isUnsupported) return;
+
+    try {
+      const response = await sendMessageToContent(MessageAction.RESTORE_RIGHT_CLICK);
+      if (response?.success) {
+        setIsUnlocked(response.restored);
+      }
+    } catch (err) {
+      console.error('[RightClickRestorer] Failed to unlock:', err);
+    }
+  }, [isUnsupported]);
+
+  return {
+    domain,
+    isLoading,
+    isUnlocked,
+    isUnsupported,
+    unlock,
+  };
+}

src/pages/StorageCleaner/AutoRefreshToggle.tsx

@@ -0,0 +1,67 @@
+/**
+ * 自动刷新开关组件
+ *
+ * 用于 StorageCleaner 页面，控制是否自动刷新存储数据列表。
+ * 以卡片形式展示，左侧为标签文本，右侧为 shadcn/ui Switch 开关。
+ *
+ * @example
+ * ```tsx
+ * <AutoRefreshToggle
+ *   reloadAfterClean={reloadAfterClean}
+ *   onChange={(checked) => setReloadAfterClean(checked)}
+ * />
+ * ```
+ */
+
+import React from 'react';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+
+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,
+  className,
+  ...props
+}: AutoRefreshToggleProps) {
+  const { t } = useI18n('storageCleaner');
+
+  return (
+    <div
+      className={cn(
+        'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex justify-between items-center',
+        className,
+      )}
+      {...props}
+    >
+      {/* Label 与 Switch 通过 htmlFor + id 关联，支持点击文字触发开关 */}
+      <Label
+        htmlFor="auto-refresh-switch"
+        className="text-sm font-bold text-foreground cursor-pointer select-none tracking-tight"
+      >
+        {t('storageCleaner:autoRefresh')}
+      </Label>
+
+      <Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />
+    </div>
+  );
+}

src/pages/StorageCleaner/CleaningResult.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { CheckCircle, XCircle } from 'lucide-react';
+import type { CleaningResult as CleaningResultType } from '@/types/storage';
+import { formatCleaningResult } from '@/utils/storageCleaner';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
+  result: CleaningResultType | null;
+}
+
+export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
+  const { t } = useI18n('storageCleaner');
+
+  if (!result) return null;
+
+  const isSuccess = result.success;
+
+  return (
+    <div className={cn('w-full', className)} {...props}>
+      <div
+        className={cn(
+          'flex items-start gap-3 rounded-xl py-2.5 px-3.5 border shadow-sm',
+          isSuccess
+            ? 'bg-emerald-500/5 border-emerald-500/20 text-emerald-600 dark:text-emerald-400'
+            : 'bg-destructive/5 border-destructive/20 text-destructive',
+        )}
+      >
+        {isSuccess ? (
+          <CheckCircle className="h-4 w-4 shrink-0 mt-0.5 text-emerald-500" />
+        ) : (
+          <XCircle className="h-4 w-4 shrink-0 mt-0.5 text-destructive" />
+        )}
+
+        <span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
+          {isSuccess
+            ? formatCleaningResult(result, t)
+            : result.error || t('storageCleaner:partialFailure')}
+        </span>
+      </div>
+    </div>
+  );
+}

src/pages/StorageCleaner/ErrorDisplay.tsx

@@ -0,0 +1,35 @@
+import { AlertCircle } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
+  error: string;
+}
+
+export default function ErrorDisplay({ error, className, ...props }: ErrorDisplayProps) {
+  const { t } = useI18n('storageCleaner');
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center py-8 min-h-[240px] sm:min-h-[360px] p-4 text-center',
+        className,
+      )}
+      {...props}
+    >
+      <div className="w-full max-w-xs flex flex-col items-center justify-center rounded-xl p-5 border border-destructive/20 bg-destructive/5 shadow-sm">
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive mb-3.5 shrink-0">
+          <AlertCircle className="h-5 w-5" />
+        </div>
+
+        <p className="text-sm font-semibold leading-relaxed text-destructive break-all px-1 mb-2">
+          {error}
+        </p>
+
+        <p className="text-xs font-medium leading-relaxed text-muted-foreground/90 px-2">
+          {t('storageCleaner:errorStandardOnly')}
+        </p>
+      </div>
+    </div>
+  );
+}

src/pages/StorageCleaner/OptionItem.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { formatSize } from '@/utils/storageCleaner';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+// 引入官方的 Checkbox 原子组件
+import { Checkbox } from '@/components/ui/checkbox';
+
+interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  labelKey: string;
+  checked: boolean;
+  size?: number;
+  isCount?: boolean;
+  onChange: () => void;
+}
+
+export default function OptionItem({
+  labelKey,
+  checked,
+  size,
+  isCount = false,
+  onChange,
+  className,
+  ...props
+}: OptionItemProps) {
+  const { t } = useI18n('storageCleaner');
+
+  return (
+    <div
+      onClick={onChange}
+      className={cn(
+        'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none',
+        checked
+          ? 'bg-primary/5 border-primary/30 shadow-sm'
+          : 'bg-transparent border-transparent hover:bg-muted/70',
+        className,
+      )}
+      {...props}
+    >
+      {/* 左侧数据区域 */}
+      <div className="flex-1 min-w-0 mr-4">
+        <span
+          className={cn(
+            'block text-xs font-semibold leading-tight truncate',
+            checked ? 'text-foreground font-bold' : 'text-foreground/80',
+          )}
+        >
+          {t(labelKey)}
+        </span>
+
+        {/* 底部容量大小或计数标识 */}
+        {size !== undefined && size > 0 ? (
+          <span className="block text-[10px] font-mono font-medium text-muted-foreground/80 mt-0.5 tabular-nums">
+            {isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatSize(size)}
+          </span>
+        ) : (
+          <span className="block text-[10px] font-medium text-muted-foreground/60 mt-0.5 italic">
+            {t('storageCleaner:noData')}
+          </span>
+        )}
+      </div>
+
+      <Checkbox
+        checked={checked}
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={onChange}
+        className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+      />
+    </div>
+  );
+}

src/pages/StorageCleaner/StorageCleanerConfirm.tsx

@@ -0,0 +1,100 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { AlertTriangle } from 'lucide-react';
+import type { StorageCleanerOptions } from '@/types/storage';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+export interface StorageCleanerConfirmProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  options: StorageCleanerOptions;
+}
+
+export function StorageCleanerConfirm({
+  open,
+  onClose,
+  onConfirm,
+  options,
+}: StorageCleanerConfirmProps) {
+  const { t } = useI18n('storageCleaner');
+
+  const selectedOptions = Object.entries(options)
+    .filter(([_, value]) => value)
+    .map(([key, _]) => t(`storageCleaner:options.${key as keyof StorageCleanerOptions}`));
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent
+        className={cn(
+          'w-[90%] max-w-[340px] p-6 gap-0 rounded-2xl overflow-hidden shadow-xl border border-border bg-card text-card-foreground',
+        )}
+      >
+        {/* 头部标题区域 */}
+        <DialogHeader className="pt-1">
+          <DialogTitle className="text-center text-lg font-bold tracking-tight text-foreground">
+            {t('storageCleaner:confirmTitle')}
+          </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">
+            {t('storageCleaner:confirmDesc')}
+          </DialogDescription>
+
+          {/* 待清理项目徽章群 */}
+          <div className="flex flex-wrap gap-1.5 justify-center mb-5 w-full">
+            {selectedOptions.map((label) => (
+              <Badge
+                key={label}
+                variant="secondary"
+                className="px-2.5 py-0.5 text-[11px] font-semibold border border-border/40 select-none bg-muted/60"
+              >
+                {label}
+              </Badge>
+            ))}
+          </div>
+
+          {/* 风险警告横幅 */}
+          <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">
+              {t('storageCleaner:irreversible')}
+            </span>
+          </div>
+        </div>
+
+        <DialogFooter className="flex flex-col gap-2 w-full pt-2">
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={onConfirm}
+            className="w-full text-xs font-bold shadow-sm h-9"
+          >
+            {t('storageCleaner:confirmAction')}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onClose}
+            className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
+          >
+            {t('common_buttons_cancel')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default StorageCleanerConfirm;

src/pages/StorageCleaner/StorageOptionsGrid.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import type { StorageCleanerOptions } from '@/types/storage';
+import OptionItem from './OptionItem';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  options: StorageCleanerOptions;
+  sizes: Record<string, number>;
+  allSelected: boolean;
+  someSelected: boolean;
+  onOptionChange: (key: keyof StorageCleanerOptions) => void;
+  onSelectAll: (checked: boolean) => void;
+}
+
+export default function StorageOptionsGrid({
+  options,
+  sizes,
+  allSelected,
+  someSelected,
+  onOptionChange,
+  onSelectAll,
+  className,
+  ...props
+}: StorageOptionsGridProps) {
+  const { t } = useI18n('storageCleaner');
+
+  const optionKeys: { key: keyof StorageCleanerOptions; isCount?: boolean }[] = [
+    { key: 'localStorage' },
+    { key: 'sessionStorage' },
+    { key: 'indexedDB' },
+    { key: 'cookies' },
+    { key: 'cacheStorage', isCount: true },
+    { key: 'serviceWorkers', isCount: true },
+  ];
+
+  const handleToggleAll = () => {
+    onSelectAll(!allSelected);
+  };
+
+  return (
+    <div
+      className={cn(
+        'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="p-3">
+        <div className="grid grid-cols-2 gap-2.5 items-stretch">
+          {optionKeys.map(({ key, isCount }) => (
+            <OptionItem
+              key={key}
+              labelKey={`storageCleaner:options.${key}`}
+              checked={options[key]}
+              size={sizes[key]}
+              isCount={isCount}
+              onChange={() => onOptionChange(key)}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div
+        onClick={handleToggleAll}
+        className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 cursor-pointer select-none"
+      >
+        <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer">
+          {t('storageCleaner:selectAll')}
+        </Label>
+
+        <Checkbox
+          checked={allSelected ? true : someSelected ? 'indeterminate' : false}
+          onClick={(e) => e.stopPropagation()}
+          onCheckedChange={(checked) => onSelectAll(checked === true)}
+          className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary"
+        />
+      </div>
+    </div>
+  );
+}

src/pages/StorageCleaner/index.tsx

@@ -0,0 +1,92 @@
+import { Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import StorageCleanerConfirm from '@/pages/StorageCleaner/StorageCleanerConfirm';
+import { useStorageCleaner } from './useStorageCleaner';
+import StorageOptionsGrid from './StorageOptionsGrid';
+import AutoRefreshToggle from './AutoRefreshToggle';
+import ErrorDisplay from './ErrorDisplay';
+import CleaningResult from './CleaningResult';
+import { useI18n } from '@/utils/chromeI18n';
+
+export default function Index() {
+  const { t } = useI18n('storageCleaner');
+
+  const {
+    error,
+    isInitializing,
+    options,
+    sizes,
+    reloadAfterClean,
+    loading,
+    result,
+    showConfirm,
+    setShowConfirm,
+    allSelected,
+    someSelected,
+    handleReloadAfterCleanChange,
+    handleOptionChange,
+    handleSelectAll,
+    handleClean,
+  } = useStorageCleaner();
+
+  const isButtonDisabled = !(someSelected || allSelected) || loading;
+
+  if (isInitializing) {
+    return (
+      <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">
+          {t('storageCleaner:initializing')}
+        </span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return <ErrorDisplay error={error} />;
+  }
+
+  return (
+    <div className="p-4 w-full flex flex-col space-y-3.5">
+      <StorageOptionsGrid
+        options={options}
+        sizes={sizes}
+        allSelected={allSelected}
+        someSelected={someSelected}
+        onOptionChange={handleOptionChange}
+        onSelectAll={handleSelectAll}
+      />
+
+      <AutoRefreshToggle
+        reloadAfterClean={reloadAfterClean}
+        onChange={handleReloadAfterCleanChange}
+      />
+
+      <Button
+        variant="destructive"
+        size="default"
+        onClick={() => setShowConfirm(true)}
+        disabled={isButtonDisabled}
+        className="w-full h-10 font-bold shadow-sm text-sm tracking-wide"
+      >
+        {loading ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            {t('storageCleaner:cleaning')}
+          </>
+        ) : (
+          t('storageCleaner:cleanNow')
+        )}
+      </Button>
+
+      <CleaningResult result={result} />
+
+      <StorageCleanerConfirm
+        open={showConfirm}
+        onClose={() => setShowConfirm(false)}
+        onConfirm={handleClean}
+        options={options}
+      />
+    </div>
+  );
+}

src/pages/StorageCleaner/useStorageCleaner.ts

@@ -0,0 +1,269 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { storageUtil } from '@/utils/chromeStorage';
+import type {
+  CleaningResult,
+  StorageCleanerOptions,
+  StorageCleanerPreferences,
+} from '@/types/storage';
+import {
+  clearStorage,
+  getCacheStorageSize,
+  getCookieSize,
+  getCurrentTab,
+  getLocalStorageSize,
+  getOriginStorageEstimate,
+  getServiceWorkerCount,
+  getSessionStorageSize,
+  isRestrictedUrl,
+} from '@/utils/storageCleaner';
+import { MessageAction, sendMessage } from '@/utils/messages';
+import { useI18n } from '@/utils/chromeI18n';
+import { toast } from 'sonner';
+
+const DEFAULT_OPTIONS: StorageCleanerOptions = {
+  localStorage: true,
+  sessionStorage: true,
+  indexedDB: true,
+  cookies: true,
+  cacheStorage: true,
+  serviceWorkers: true,
+};
+
+const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
+  reloadAfterClean: true,
+  selectedTypes: DEFAULT_OPTIONS,
+};
+
+export interface UseStorageCleanerReturn {
+  domain: string;
+  error: string;
+  isInitializing: boolean;
+  options: StorageCleanerOptions;
+  sizes: Record<string, number>;
+  reloadAfterClean: boolean;
+  loading: boolean;
+  result: CleaningResult | null;
+  showConfirm: boolean;
+  setShowConfirm: (show: boolean) => void;
+  totalSize: number;
+  allSelected: boolean;
+  someSelected: boolean;
+
+  handleReloadAfterCleanChange: (checked: boolean) => void;
+  handleOptionChange: (key: keyof StorageCleanerOptions) => void;
+  handleSelectAll: (checked: boolean) => void;
+  handleClean: () => Promise<void>;
+}
+
+export function useStorageCleaner(): UseStorageCleanerReturn {
+  const { t } = useI18n(['storageCleaner', 'common']);
+  const [domain, setDomain] = useState<string>('');
+  const [error, setError] = useState<string>('');
+  const [isInitializing, setIsInitializing] = useState<boolean>(true);
+  const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
+  const [sizes, setSizes] = useState<Record<string, number>>({});
+  const [reloadAfterClean, setReloadAfterClean] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [result, setResult] = useState<CleaningResult | null>(null);
+  const [showConfirm, setShowConfirm] = useState<boolean>(false);
+
+  const requestIdRef = useRef<number>(0);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const storageTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const loadingRef = useRef(loading);
+
+  useEffect(() => {
+    loadingRef.current = loading;
+  }, [loading]);
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
+    };
+  }, []);
+
+  // 核心数据拉取链条
+  const loadInfo = useCallback(async () => {
+    const currentRequestId = ++requestIdRef.current;
+    try {
+      const tab = await getCurrentTab();
+      if (currentRequestId !== requestIdRef.current) return;
+
+      if (!tab || !tab.url) {
+        setError(t('storageCleaner:errorNoTab'));
+        return;
+      }
+      if (isRestrictedUrl(tab.url)) {
+        setError(t('storageCleaner:errorRestricted'));
+        return;
+      }
+
+      setError('');
+      const url = tab.url;
+      const tabId = tab.id!;
+      setDomain(new URL(url).hostname);
+
+      const [savedPrefs, cSize, lsSize, ssSize, idbSize, cacheCount, swCount] = await Promise.all([
+        storageUtil.get('storageCleaner/preferences', DEFAULT_PREFERENCES),
+        getCookieSize(url),
+        getLocalStorageSize(tabId),
+        getSessionStorageSize(tabId),
+        getOriginStorageEstimate(tabId),
+        getCacheStorageSize(tabId),
+        getServiceWorkerCount(tabId),
+      ]);
+
+      if (currentRequestId !== requestIdRef.current) return;
+
+      if (savedPrefs) {
+        setReloadAfterClean(savedPrefs.reloadAfterClean ?? DEFAULT_PREFERENCES.reloadAfterClean);
+        setOptions(savedPrefs.selectedTypes ?? DEFAULT_PREFERENCES.selectedTypes);
+      }
+
+      setSizes({
+        cookies: cSize,
+        localStorage: lsSize,
+        sessionStorage: ssSize,
+        indexedDB: idbSize,
+        cacheStorage: cacheCount,
+        serviceWorkers: swCount,
+      });
+    } finally {
+      if (currentRequestId === requestIdRef.current) {
+        setIsInitializing(false);
+      }
+    }
+  }, [t]);
+
+  const loadInfoRef = useRef(loadInfo);
+  useEffect(() => {
+    loadInfoRef.current = loadInfo;
+  });
+
+  const debouncedLoadInfo = useCallback(() => {
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = setTimeout(() => {
+      loadInfoRef.current().catch(console.error);
+    }, 300);
+  }, []);
+
+  // 监听浏览器标签行为
+  useEffect(() => {
+    loadInfoRef.current().catch(console.error);
+
+    const handleTabChange = () => debouncedLoadInfo();
+    const handleTabUpdated = (_tabId: number, changeInfo: { status?: string; url?: string }) => {
+      if (changeInfo.status === 'complete' || changeInfo.url) {
+        debouncedLoadInfo();
+      }
+    };
+
+    chrome.tabs.onActivated.addListener(handleTabChange);
+    chrome.tabs.onUpdated.addListener(handleTabUpdated);
+    chrome.windows.onFocusChanged.addListener(handleTabChange);
+
+    return () => {
+      chrome.tabs.onActivated.removeListener(handleTabChange);
+      chrome.tabs.onUpdated.removeListener(handleTabUpdated);
+      chrome.windows.onFocusChanged.removeListener(handleTabChange);
+    };
+  }, [debouncedLoadInfo]);
+
+  useEffect(() => {
+    if (isInitializing) return;
+
+    if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
+    storageTimerRef.current = setTimeout(async () => {
+      await storageUtil
+        .set('storageCleaner/preferences', {
+          reloadAfterClean,
+          selectedTypes: options,
+        })
+        .catch(console.error);
+    }, 500);
+  }, [options, reloadAfterClean, isInitializing]);
+
+  const handleReloadAfterCleanChange = useCallback((checked: boolean) => {
+    setReloadAfterClean(checked);
+  }, []);
+
+  const handleOptionChange = useCallback((key: keyof StorageCleanerOptions) => {
+    setOptions((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
+  const handleSelectAll = useCallback((checked: boolean) => {
+    setOptions({
+      localStorage: checked,
+      sessionStorage: checked,
+      indexedDB: checked,
+      cookies: checked,
+      cacheStorage: checked,
+      serviceWorkers: checked,
+    });
+  }, []);
+
+  const handleClean = useCallback(async () => {
+    if (loadingRef.current) return;
+
+    const tab = await getCurrentTab();
+    if (!tab || !tab.id || !tab.url) {
+      toast.warning(t('storageCleaner:errorNoTab'));
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const cleaningResult = await clearStorage(tab.id, tab.url, options);
+      setResult(cleaningResult);
+
+      if (reloadAfterClean && cleaningResult.success) {
+        toast.success(t('storageCleaner:cleanSuccessReload'));
+        await sendMessage(MessageAction.RELOAD_TAB, { tabId: tab.id, delay: 1000 });
+      } else {
+        await loadInfo();
+      }
+    } catch (err) {
+      toast.error(`${t('storageCleaner:cleanError')}: ${String(err)}`);
+    } finally {
+      setLoading(false);
+      setShowConfirm(false);
+    }
+  }, [options, reloadAfterClean, loadInfo, t]);
+
+  const totalSize = useMemo(() => {
+    return (
+      (sizes.cookies || 0) +
+      (sizes.localStorage || 0) +
+      (sizes.sessionStorage || 0) +
+      (sizes.indexedDB || 0)
+    );
+  }, [sizes]);
+
+  const selectionMetrics = useMemo(() => {
+    const vals = Object.values(options);
+    const all = vals.every(Boolean);
+    const some = vals.some(Boolean) && !all;
+    return { all, some };
+  }, [options]);
+
+  return {
+    domain,
+    error,
+    isInitializing,
+    options,
+    sizes,
+    reloadAfterClean,
+    loading,
+    result,
+    showConfirm,
+    setShowConfirm,
+    totalSize,
+    allSelected: selectionMetrics.all,
+    someSelected: selectionMetrics.some,
+    handleReloadAfterCleanChange,
+    handleOptionChange,
+    handleSelectAll,
+    handleClean,
+  };
+}

src/pages/TextStatistics/index.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useMemo, useState } from 'react';
+import TextInputArea from '@/components/TextInputArea';
+import { formatByteSize, getTextStats } from '@/utils/textStatistics';
+import { useI18n } from '@/utils/chromeI18n';
+import { useContextMenuData } from '@/utils/useContextMenuData';
+import { cn } from '@/lib/utils';
+
+export default function Index() {
+  const { t } = useI18n('textStatistics');
+  const [text, setText] = useState('');
+
+  const handleContextMenuData = useCallback((payload: string) => {
+    setText(payload);
+  }, []);
+
+  useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
+
+  const stats = useMemo(() => getTextStats(text), [text]);
+
+  const statItems = [
+    { label: t('textStatistics:characters'), value: stats.characters },
+    { label: t('textStatistics:words'), value: stats.words },
+    { label: t('textStatistics:lines'), value: stats.lines },
+    { label: t('textStatistics:bytes'), value: formatByteSize(stats.bytes) },
+  ];
+
+  return (
+    <div className="p-4 w-full space-y-4">
+      {/* 文本输入区域 */}
+      <TextInputArea
+        value={text}
+        onChange={setText}
+        placeholder={t('textStatistics:placeholder')}
+        minRows={10}
+        maxRows={18}
+        showClear={true}
+        allowCopy={true}
+      />
+
+      {/* 统计结果展示区域 */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        {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/Timestamp/LiveClock.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Clock } from 'lucide-react';
+import CopyButton from '@/components/CopyButton';
+import { useSnackbar } from '@/components/GlobalSnackbar';
+import type { UnitType } from './constants';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
+  unit: UnitType;
+  onUseNow: (val: number) => void;
+}
+
+const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClockProps) => {
+  const { t } = useI18n('timestamp');
+  const { showMessage } = useSnackbar();
+  const onUseNowRef = useRef(onUseNow);
+
+  const [currentDisplay, setCurrentDisplay] = useState(() => {
+    const initNow = Date.now();
+    return {
+      rawTime: initNow,
+      text: String(Math.floor(initNow / (unit === 'ms' ? 1 : 1000))),
+    };
+  });
+
+  useEffect(() => {
+    onUseNowRef.current = onUseNow;
+  }, [onUseNow]);
+
+  useEffect(() => {
+    const tick = () => {
+      const rightNow = Date.now();
+      const nextText = String(Math.floor(rightNow / (unit === 'ms' ? 1 : 1000)));
+
+      setCurrentDisplay((prev) => {
+        if (prev.text === nextText) return prev;
+        return { rawTime: rightNow, text: nextText };
+      });
+    };
+
+    const tickId = setInterval(tick, 200);
+    return () => clearInterval(tickId);
+  }, [unit]);
+
+  const handleUseNow = useCallback(() => {
+    onUseNowRef.current(currentDisplay.rawTime);
+    showMessage?.(t('timestamp:usedSuccess'), { severity: 'success' });
+  }, [currentDisplay.rawTime, showMessage, t]);
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3 px-3 h-10 rounded-lg border border-border/80 bg-secondary/50',
+        className,
+      )}
+      {...props}
+    >
+      <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
+        {t('timestamp:currentTs')}
+      </span>
+
+      <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
+        {currentDisplay.text}
+      </span>
+
+      <button
+        type="button"
+        onClick={handleUseNow}
+        title={t('timestamp:useNowTooltip')}
+        className="flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      >
+        <Clock className="w-3.5 h-3.5" />
+      </button>
+
+      <CopyButton
+        text={currentDisplay.text}
+        tooltip={t('timestamp:copyTsTooltip')}
+        className="h-7 w-7 rounded-md border"
+      />
+    </div>
+  );
+});
+
+LiveClock.displayName = 'LiveClock';
+
+export default LiveClock;

src/pages/Timestamp/ResultView.tsx

@@ -0,0 +1,119 @@
+import React, { useMemo } from 'react';
+import dayjs from '@/utils/dayjs';
+import CopyButton from '@/components/CopyButton';
+import type { UnitType } from './constants';
+import { DATE_FORMAT } from './constants';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  result: string;
+  mode: 'ts2dt' | 'dt2ts';
+  unit: UnitType;
+  zone: string;
+
+  showEmptyPlaceholder?: boolean;
+}
+
+const ResultView = React.memo(
+  ({
+    result,
+    mode,
+    unit,
+    zone,
+    showEmptyPlaceholder = false,
+    className,
+    ...props
+  }: ResultViewProps) => {
+    const { t } = useI18n('timestamp');
+
+    const extraInfo = useMemo(() => {
+      if (!result) return null;
+      const d =
+        mode === 'ts2dt'
+          ? dayjs(result, DATE_FORMAT).tz(zone)
+          : unit === 'ms'
+            ? dayjs(Number(result))
+            : dayjs.unix(Number(result));
+
+      return {
+        relative: d.fromNow(),
+        iso: d.toISOString(),
+        utc: d.utc().format(DATE_FORMAT) + ' UTC',
+      };
+    }, [result, mode, zone, unit]);
+
+    if (!result) {
+      if (!showEmptyPlaceholder) return null;
+      return (
+        <div
+          className={cn(
+            'flex-1 flex items-center justify-center text-sm font-medium border border-dashed border-border/60 rounded-xl py-12 px-4 text-center text-muted-foreground bg-muted/20 min-h-[320px]',
+            className,
+          )}
+          {...props}
+        >
+          {t('timestamp:resultEmpty')}
+        </div>
+      );
+    }
+
+    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">
+          {t('timestamp:resultLabel')}
+        </span>
+
+        <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative mb-3.5 shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
+          <span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
+            {result}
+          </span>
+          <CopyButton
+            text={result}
+            tooltip={t('timestamp:copyResultTooltip')}
+            className="h-8 w-8 rounded-md shrink-0 border"
+          />
+        </div>
+
+        <div className="bg-muted/40 p-4 rounded-xl border border-border/50 flex flex-col gap-3">
+          {[
+            { label: t('timestamp:relativeTime'), value: extraInfo?.relative },
+            { label: t('timestamp:iso8601'), value: extraInfo?.iso, isMono: true },
+            { label: t('timestamp:utcTime'), value: extraInfo?.utc, isMono: true },
+          ].map((item) => (
+            <div
+              key={item.label}
+              className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1.5 py-0.5 border-b border-border/30 last:border-0 pb-2 sm:pb-0 last:pb-0"
+            >
+              <span className="text-muted-foreground font-semibold text-xs shrink-0 select-none">
+                {item.label}
+              </span>
+              <div className="flex items-center justify-between sm:justify-end gap-2 min-w-0 w-full sm:w-auto">
+                <span
+                  className={cn(
+                    'text-xs text-foreground/90 font-medium break-all text-left sm:text-right tabular-nums',
+                    item.isMono && 'font-mono text-[11px]',
+                  )}
+                >
+                  {item.value}
+                </span>
+                {item.value && (
+                  <CopyButton
+                    text={item.value}
+                    tooltip={t('timestamp:copyTooltip')}
+                    className="h-6 w-6 rounded-md border shrink-0 text-muted-foreground"
+                  />
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);
+
+ResultView.displayName = 'ResultView';
+
+export default ResultView;

src/pages/Timestamp/constants.ts

@@ -0,0 +1,6 @@
+export const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
+
+export const ZONES = ['Asia/Shanghai', 'America/New_York', 'Europe/London'] as const;
+
+export type UnitType = 'ms' | 's';
+export type ZoneType = (typeof ZONES)[number];

src/pages/Timestamp/index.tsx

@@ -0,0 +1,109 @@
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { ZONES } from './constants';
+import LiveClock from './LiveClock';
+import ResultView from './ResultView';
+import { useTimestampConverter } from './useTimestampConverter';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+export default function Index() {
+  const { t } = useI18n('timestamp');
+
+  const {
+    mode,
+    input,
+    unit,
+    zone,
+    result,
+    error,
+    setMode,
+    setInput,
+    setUnit,
+    setZone,
+    handleUseNow,
+  } = useTimestampConverter();
+
+  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 space-y-4">
+        <LiveClock unit={unit} onUseNow={handleUseNow} />
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
+          <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex flex-col justify-between">
+            <div className="flex flex-col gap-4">
+              <SwitchButtonGroup
+                value={mode}
+                options={[
+                  { value: 'ts2dt', label: t('timestamp:tsToDate') },
+                  { value: 'dt2ts', label: t('timestamp:dateToTs') },
+                ]}
+                onChange={(newMode) => setMode(newMode as 'ts2dt' | 'dt2ts')}
+                size="small"
+              />
+
+              <div className="flex flex-col gap-1.5">
+                <Input
+                  type="text"
+                  placeholder={
+                    mode === 'ts2dt' ? t('timestamp:placeholderTs') : t('timestamp:placeholderDate')
+                  }
+                  value={input}
+                  onChange={(e: { target: { value: string } }) => setInput(e.target.value)}
+                  className={cn(
+                    'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background',
+                    error && 'border-destructive focus-visible:ring-destructive',
+                  )}
+                />
+
+                {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
+              </div>
+
+              <div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
+                <SwitchButtonGroup
+                  value={unit}
+                  options={[
+                    { value: 'ms', label: t('timestamp:unitMs') },
+                    { value: 's', label: t('timestamp:unitS') },
+                  ]}
+                  onChange={(v) => setUnit(v as 'ms' | 's')}
+                  size="small"
+                  className="sm:w-auto shrink-0"
+                />
+
+                <Select value={zone} onValueChange={(v: string) => setZone(v as typeof zone)}>
+                  <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
+                    <SelectValue placeholder="选择时区" />
+                  </SelectTrigger>
+                  <SelectContent className="max-h-64 font-mono">
+                    {ZONES.map((z) => (
+                      <SelectItem
+                        key={z}
+                        value={z}
+                        className="text-xs font-semibold focus:bg-accent cursor-pointer"
+                      >
+                        {z}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+
+          <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm h-full flex flex-col">
+            <ResultView result={result} mode={mode} unit={unit} zone={zone} showEmptyPlaceholder />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Timestamp/useTimestampConverter.ts

@@ -0,0 +1,118 @@
+import { useCallback, useMemo, useState } from 'react';
+import dayjs from '@/utils/dayjs';
+import type { UnitType, ZoneType } from './constants';
+import { DATE_FORMAT } from './constants';
+import { useI18n } from '@/utils/chromeI18n';
+import { useContextMenuData } from '@/utils/useContextMenuData';
+
+export interface UseTimestampConverterReturn {
+  mode: 'ts2dt' | 'dt2ts';
+  input: string;
+  unit: UnitType;
+  zone: ZoneType;
+  result: string;
+  error: string;
+
+  setMode: (mode: 'ts2dt' | 'dt2ts') => void;
+  setInput: (value: string) => void;
+  setUnit: (unit: UnitType) => void;
+  setZone: (zone: ZoneType) => void;
+  handleUseNow: (now: number) => void;
+}
+
+function isTimestampLike(input: string): boolean {
+  const trimmed = input.trim();
+  return /^\d+$/.test(trimmed) && trimmed.length >= 10;
+}
+
+export function useTimestampConverter(): UseTimestampConverterReturn {
+  const { t } = useI18n('timestamp');
+  const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
+  const [unit, setUnit] = useState<UnitType>('ms');
+  const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
+
+  const [input, setInput] = useState(() => String(Date.now()));
+
+  const conversionPipeline = useMemo(() => {
+    const rawInput = input.trim();
+    if (!rawInput) return { result: '', error: '' };
+
+    if (mode === 'ts2dt') {
+      const num = Number(rawInput);
+      if (isNaN(num)) {
+        return { result: '', error: t('timestamp:errors.invalidNumber') };
+      }
+      const d = unit === 'ms' ? dayjs(num) : dayjs.unix(num);
+      if (!d.isValid()) {
+        return { result: '', error: t('timestamp:errors.invalidTimestamp') };
+      }
+      return { result: d.tz(zone).format(DATE_FORMAT), error: '' };
+    } else {
+      const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
+      if (!d.isValid()) {
+        return { result: '', error: t('timestamp:errors.invalidFormat') };
+      }
+      const ms = d.valueOf();
+      const outputTs = unit === 'ms' ? String(ms) : String(Math.floor(ms / 1000));
+      return { result: outputTs, error: '' };
+    }
+  }, [input, mode, unit, zone, t]);
+
+  const { result, error } = conversionPipeline;
+
+  const handleContextMenuData = useCallback((payload: string) => {
+    const trimmed = payload.trim();
+    if (isTimestampLike(trimmed)) {
+      setMode('ts2dt');
+      const detectedUnit: UnitType = trimmed.length >= 13 ? 'ms' : 's';
+      setUnit(detectedUnit);
+      setInput(trimmed);
+    } else {
+      const d = dayjs(trimmed);
+      if (d.isValid()) {
+        setMode('dt2ts');
+        setInput(d.format(DATE_FORMAT));
+      } else {
+        setMode('ts2dt');
+        setInput(trimmed);
+      }
+    }
+  }, []);
+
+  useContextMenuData({ featureKey: 'timestamp', onData: handleContextMenuData });
+
+  const handleUseNow = useCallback(
+    (now: number) => {
+      if (mode === 'ts2dt') {
+        setInput(String(unit === 'ms' ? now : Math.floor(now / 1000)));
+      } else {
+        setInput(dayjs(now).tz(zone).format(DATE_FORMAT));
+      }
+    },
+    [mode, unit, zone],
+  );
+
+  const handleSetMode = useCallback(
+    (newMode: 'ts2dt' | 'dt2ts') => {
+      setMode(newMode);
+      if (result && !error) {
+        setInput(result);
+      }
+    },
+    [result, error],
+  );
+
+  return {
+    mode,
+    input,
+    unit,
+    zone,
+    result,
+    error,
+    setMode: handleSetMode,
+    setInput,
+    setUnit,
+    setZone,
+    handleUseNow,
+  };
+}