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/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;
+}