refactor(utils): 将 diffNode 实现从递归改为迭代遍历

- 在 utils.ts 中引入 twMerge 以合并 Tailwind 类。
- 在 ConverterForm.tsx 中简化类名，移除冗余样式。
- 在 LiveClock.tsx 中调整样式，优化文本显示。
- 在 ResultView.tsx 中更新布局和样式，提升视觉效果。

.github/CODING_STANDARDS.md

@@ -669,7 +669,7 @@ src/pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
 
 ### 9.1 功能元数据
 
-功能名称与描述在 `config/featureMeta.ts` 的 `FEATURES` 数组中定义：
+功能名称与描述在 `config/features.tsx` 的 `FEATURES` 数组中定义：
 
 ```typescript
 {
@@ -677,11 +677,10 @@ src/pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
   label: '时间戳转换',
   description: '日期与时间戳互转',
   defaultVisible: true,
+  component: TimestampPage,
 }
 ```
 
-页面组件通过 `config/pageLoaders/` 按需加载，不在 `FEATURES` 中引用。
-
 Dashboard 卡片、TopBar 搜索等功能从此处读取 `label` / `description`。
 
 ### 9.2 页面与组件文案

docs/test-data-generator/rule-management.md

@@ -382,14 +382,14 @@ function loadRule(ruleId: string): void {
 
 使用 `localStorage`，键名 `testDataGenerator_rules`。API 为**命名导出函数**（见 `src/utils/ruleStorage.ts`）：
 
-| 函数                                                   | 说明                               |
+| 函数 | 说明 |
-| ------------------------------------------------------ | ---------------------------------- |
+| ---- | ---- |
-| `getAll()` / `getById()` / `getByName()`               | 读取                               |
+| `getAll()` / `getById()` / `getByName()` | 读取 |
 | `save()` / `update()` / `deleteRule()` / `duplicate()` | 写入；失败时返回 `null` 或 `false` |
-| `recordUse()`                                          | 递增 `useCount`、更新 `lastUsedAt` |
+| `recordUse()` | 递增 `useCount`、更新 `lastUsedAt` |
-| `search()` / `getRecent()`                             | 搜索与最近使用                     |
+| `search()` / `getRecent()` | 搜索与最近使用 |
-| `exportRules()` / `importRules()`                      | 导入导出 JSON 数组                 |
+| `exportRules()` / `importRules()` | 导入导出 JSON 数组 |
-| `clear()`                                              | 清空全部规则                       |
+| `clear()` | 清空全部规则 |
 
 写入失败（如 `QuotaExceededError`）时，内部 `setAll()` 返回 `false`，`save`/`update` 返回 `null`，`deleteRule` 返回 `false`，并在控制台输出 `[ruleStorage] 保存规则失败`。调用方须检查返回值，避免误报成功。
 

docs/test-data-generator/technical-implementation.md

@@ -1505,7 +1505,9 @@ export class DataExporter {
 ```typescript
 // src/types/testDataGenerator.ts
 
-type WorkerRequestMessage = { type: 'start'; payload: WorkerStartPayload } | { type: 'cancel' };
+type WorkerRequestMessage =
+  | { type: 'start'; payload: WorkerStartPayload }
+  | { type: 'cancel' };
 
 type WorkerResponseMessage =
   | { type: 'progress'; generationId: number; payload: GenerateProgress }

src/components/SwitchButtonGroup.tsx

@@ -23,12 +23,10 @@ const SIZE_CLASSES = {
   large: 'text-base h-11 px-4 py-2 rounded-lg',
 } as const;
 
-const INTERACTIVE_CLASSES =
-  'active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted';
-
 const SELECTED_CLASSES =
-  'bg-background text-foreground shadow-sm font-semibold hover:bg-background hover:text-foreground';
+  'bg-background text-foreground shadow-sm font-semibold fade-in-zoom-95 hover:shadow-md active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted';
-const UNSELECTED_CLASSES = 'text-muted-foreground hover:bg-accent hover:text-accent-foreground';
+const UNSELECTED_CLASSES =
+  'hover:bg-background/50 hover:text-foreground/80 active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted';
 
 export default function SwitchButtonGroup<T extends string | number = string>({
   value,
@@ -41,7 +39,7 @@ export default function SwitchButtonGroup<T extends string | number = string>({
   return (
     <div
       className={cn(
-        'inline-flex w-full items-center justify-center rounded-lg bg-muted p-1',
+        'inline-flex w-full items-center justify-center rounded-lg bg-muted text-muted-foreground p-1',
         className,
       )}
       {...props}
@@ -55,7 +53,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
           className={cn(
             'flex-1 transition-all',
             SIZE_CLASSES[size],
-            INTERACTIVE_CLASSES,
             value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
           )}
         >

src/components/TextInputArea.tsx

@@ -42,15 +42,6 @@ export interface TextInputAreaProps extends Omit<
   title?: string;
   externalError?: string;
   onClear?: () => void;
-
-  /**
-   * 撑满父容器高度并启用内部滚动（而非按 minRows/maxRows 自动撑高）。
-   * 用于需要固定高度 + 内部滚动的卡片面板。
-   */
-  fill?: boolean;
-
-  /** 是否无边框、无阴影、无圆角（适用于嵌套在其他有边框的容器中） */
-  borderless?: boolean;
 }
 
 function ActionButton({
@@ -115,8 +106,6 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     title,
     externalError,
     onClear,
-    fill = false,
-    borderless = false,
     ...restProps
   } = props;
 
@@ -133,7 +122,6 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
   useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement);
 
   const adjustHeight = useCallback(() => {
-    if (fill) return;
     const textArea = internalRef.current;
     if (!textArea) return;
 
@@ -144,7 +132,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     const nextHeight = Math.max(textArea.scrollHeight, computedMin);
 
     textArea.style.height = `${Math.min(nextHeight, computedMax)}px`;
-  }, [minRows, maxRows, fill]);
+  }, [minRows, maxRows]);
 
   React.useEffect(() => {
     adjustHeight();
@@ -216,7 +204,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
   const hasBottomBar = allowCopy || showClear || bottomActions.length > 0;
 
   return (
-    <div className={cn('w-full flex flex-col gap-1.5', fill && 'flex-1 min-h-0', className)}>
+    <div className={cn('w-full flex flex-col gap-1.5', className)}>
       {hasTopBar && (
         <div className="flex items-center justify-between px-0.5">
           <div className="flex items-center gap-2">
@@ -245,12 +233,8 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
 
       <div
         className={cn(
-          borderless
+          'rounded-md border border-input bg-background shadow-sm transition-all focus-within:ring-1 focus-within:ring-ring focus-within:border-input overflow-hidden',
-            ? 'bg-transparent overflow-hidden'
+          displayError &&
-            : 'rounded-md border border-input bg-background shadow-sm transition-all focus-within:ring-1 focus-within:ring-ring focus-within:border-input overflow-hidden',
-          fill && 'flex-1 min-h-0 flex flex-col',
-          !borderless &&
-            displayError &&
             'border-destructive focus-within:ring-destructive focus-within:border-destructive',
         )}
       >
@@ -263,10 +247,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
           autoFocus={autoFocus}
           readOnly={readOnly}
           placeholder={placeholder}
-          className={cn(
+          className="w-full bg-transparent px-4 py-3 font-mono text-sm leading-relaxed text-foreground placeholder:text-muted-foreground/50 focus:outline-none resize-none border-0 block"
-            'w-full bg-transparent px-4 py-3 font-mono text-sm leading-relaxed text-foreground placeholder:text-muted-foreground/50 focus:outline-none resize-none border-0 block',
-            fill && 'flex-1 h-full overflow-auto diff-scroll',
-          )}
           {...restProps}
         />
 

src/components/__tests__/SwitchButtonGroup.test.tsx

@@ -22,7 +22,7 @@ describe('SwitchButtonGroup 组件', () => {
     const buttonB = screen.getByRole('button', { name: /选项B/i });
 
     expect(buttonA).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
-    expect(buttonB).toHaveClass('hover:bg-accent', 'hover:text-accent-foreground');
+    expect(buttonB).toHaveClass('hover:bg-background/50');
   });
 
   it('点击未选中按钮时应触发 onChange 并传入选中值', () => {
@@ -34,12 +34,11 @@ describe('SwitchButtonGroup 组件', () => {
     expect(handleChange).toHaveBeenCalledWith('b');
   });
 
-  it('点击已选中按钮时仍会触发 onChange 并传回原值', () => {
+  it('点击已选中按钮时不应触发 onChange', () => {
     const handleChange = vi.fn();
     render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
 
     fireEvent.click(screen.getByRole('button', { name: /选项A/i }));
-    expect(handleChange).toHaveBeenCalledTimes(1);
     expect(handleChange).toHaveBeenCalledWith('a');
   });
 
@@ -59,6 +58,13 @@ describe('SwitchButtonGroup 组件', () => {
     expect(button).toHaveClass('text-xs');
   });
 
+  it('应支持 buttonSx 自定义按钮样式', () => {
+    render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
+
+    const button = screen.getByRole('button', { name: /选项A/i });
+    expect(button).toBeInTheDocument();
+  });
+
   it('应支持 ReactNode 类型的 label', () => {
     const nodeOptions = [{ value: 'x', label: <span data-testid="custom-label">自定义</span> }];
     render(<SwitchButtonGroup value="x" options={nodeOptions} onChange={vi.fn()} />);
@@ -66,6 +72,20 @@ describe('SwitchButtonGroup 组件', () => {
     expect(screen.getByTestId('custom-label')).toBeInTheDocument();
   });
 
+  it('默认按钮样式应禁止文字换行', () => {
+    render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
+
+    const button = screen.getByRole('button', { name: /选项A/i });
+    expect(button).toHaveClass('whitespace-nowrap');
+  });
+
+  it('buttonSx 传入时应覆盖默认换行样式', () => {
+    render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
+
+    const button = screen.getByRole('button', { name: /选项A/i });
+    expect(button).toBeInTheDocument();
+  });
+
   describe('number 类型支持', () => {
     const numberOptions = [
       { value: 2, label: '2' },
@@ -85,7 +105,7 @@ describe('SwitchButtonGroup 组件', () => {
       const button2 = screen.getByRole('button', { name: /^2$/i });
       const button4 = screen.getByRole('button', { name: /^4$/i });
 
-      expect(button2).toHaveClass('hover:bg-accent', 'hover:text-accent-foreground');
+      expect(button2).toHaveClass('hover:bg-background/50');
       expect(button4).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
     });
 

src/hooks/useMediaQuery.ts

@@ -1,25 +0,0 @@
-import { useCallback, useSyncExternalStore } from 'react';
-
-/**
- * 监听媒体查询，返回是否匹配。
- * 用于在窄屏（popup/sidepanel）与宽屏（tab）间切换布局。
- */
-export function useMediaQuery(query: string): boolean {
-  const subscribe = useCallback(
-    (onChange: () => void) => {
-      if (typeof window === 'undefined' || !window.matchMedia) return () => {};
-      const mql = window.matchMedia(query);
-      mql.addEventListener('change', onChange);
-      return () => mql.removeEventListener('change', onChange);
-    },
-    [query],
-  );
-
-  const getSnapshot = useCallback(
-    () =>
-      typeof window !== 'undefined' && window.matchMedia ? window.matchMedia(query).matches : false,
-    [query],
-  );
-
-  return useSyncExternalStore(subscribe, getSnapshot, () => false);
-}

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

@@ -1,43 +1,10 @@
 import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import Index from '../index';
 
-const setWide = (wide: boolean) => {
-  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
-    matches: wide,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  }));
-};
-
 describe('JsonTools 页面', () => {
-  beforeEach(() => {
-    // 默认窄屏（matches:false）
-    setWide(false);
-  });
-
   it('应该渲染模式切换按钮', () => {
     render(<Index />);
     expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
   });
-
-  it('窄屏渲染 A/B 数据面板与 Compare 按钮', () => {
-    setWide(false);
-    render(<Index />);
-    expect(screen.getByText('数据 A（原始）')).toBeInTheDocument();
-    expect(screen.getByText('数据 B（目标）')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Compare A & B/i })).toBeInTheDocument();
-  });
-
-  it('宽屏渲染原始/目标 JSON 标签', () => {
-    setWide(true);
-    render(<Index />);
-    expect(screen.getByText('原始 JSON')).toBeInTheDocument();
-    expect(screen.getByText('目标 JSON')).toBeInTheDocument();
-  });
 });

src/pages/JsonTools/__tests__/useJsonTools.test.ts

@@ -1,67 +0,0 @@
-import { renderHook, act } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { useJsonTools } from '../useJsonTools';
-
-describe('useJsonTools 窄屏手动比对', () => {
-  it('canCompare 在两侧输入合法前为 false', () => {
-    const { result } = renderHook(() => useJsonTools());
-    expect(result.current.canCompare).toBe(false);
-
-    act(() => result.current.setLeftInput('{"a":1}'));
-    expect(result.current.canCompare).toBe(false);
-
-    act(() => result.current.setRightInput('{"b":2}'));
-    expect(result.current.canCompare).toBe(true);
-  });
-
-  it('非法 JSON 时 canCompare 为 false', () => {
-    const { result } = renderHook(() => useJsonTools());
-    act(() => {
-      result.current.setLeftInput('{"a":1}');
-      result.current.setRightInput('not json');
-    });
-    expect(result.current.canCompare).toBe(false);
-  });
-
-  it('handleCompare 生成结果并自动折叠两侧面板', () => {
-    const { result } = renderHook(() => useJsonTools());
-    act(() => {
-      result.current.setLeftInput('{"a":1}');
-      result.current.setRightInput('{"a":2}');
-    });
-    act(() => result.current.handleCompare());
-
-    expect(result.current.hasCompared).toBe(true);
-    expect(result.current.activeResult).not.toBeNull();
-    expect(result.current.total).toBeGreaterThan(0);
-    expect(result.current.collapsedA).toBe(true);
-    expect(result.current.collapsedB).toBe(true);
-  });
-
-  it('比对后修改输入会重置结果，但保留折叠态', () => {
-    const { result } = renderHook(() => useJsonTools());
-    act(() => {
-      result.current.setLeftInput('{"a":1}');
-      result.current.setRightInput('{"a":2}');
-    });
-    act(() => result.current.handleCompare());
-    expect(result.current.hasCompared).toBe(true);
-    expect(result.current.collapsedA).toBe(true);
-    expect(result.current.collapsedB).toBe(true);
-
-    act(() => result.current.setLeftInput('{"a":3}'));
-    expect(result.current.hasCompared).toBe(false);
-    expect(result.current.activeResult).toBeNull();
-    expect(result.current.collapsedA).toBe(true);
-    expect(result.current.collapsedB).toBe(true);
-  });
-
-  it('toggleCollapseA/B 可逆切换折叠态', () => {
-    const { result } = renderHook(() => useJsonTools());
-    expect(result.current.collapsedA).toBe(false);
-    act(() => result.current.toggleCollapseA());
-    expect(result.current.collapsedA).toBe(true);
-    act(() => result.current.toggleCollapseA());
-    expect(result.current.collapsedA).toBe(false);
-  });
-});

src/pages/JsonTools/components/CompareActionBar.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { ArrowLeftRight } from 'lucide-react';
-import DiffNavigator from './DiffNavigator';
-import { cn } from '@/lib/utils';
-
-export interface CompareActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  canCompare: boolean;
-  onCompare: () => void;
-  hasCompared: boolean;
-  total: number;
-  currentIndex: number;
-  onPrev: () => void;
-  onNext: () => void;
-  resultsVisible?: boolean;
-  onShowResults?: () => void;
-}
-
-export default function CompareActionBar({
-  canCompare,
-  onCompare,
-  hasCompared,
-  total,
-  currentIndex,
-  onPrev,
-  onNext,
-  resultsVisible = true,
-  onShowResults,
-  className,
-  ...props
-}: CompareActionBarProps) {
-  return (
-    <div className={cn('flex shrink-0 items-center justify-center py-0.5', className)} {...props}>
-      {hasCompared ? (
-        resultsVisible ? (
-          <DiffNavigator
-            total={total}
-            currentIndex={currentIndex}
-            onPrev={onPrev}
-            onNext={onNext}
-          />
-        ) : (
-          <button
-            type="button"
-            onClick={onShowResults}
-            className={cn(
-              'inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors bg-primary text-primary-foreground hover:bg-primary/90',
-            )}
-          >
-            <ArrowLeftRight className="h-3.5 w-3.5" />
-            查看对比结果
-          </button>
-        )
-      ) : (
-        <button
-          type="button"
-          disabled={!canCompare}
-          onClick={onCompare}
-          className={cn(
-            'inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted',
-            canCompare
-              ? 'bg-primary text-primary-foreground hover:bg-primary/90'
-              : 'cursor-not-allowed bg-muted text-muted-foreground',
-          )}
-        >
-          <ArrowLeftRight className="h-3.5 w-3.5" />
-          Compare A &amp; B
-        </button>
-      )}
-    </div>
-  );
-}

src/pages/JsonTools/components/DiffResult.tsx

@@ -7,99 +7,28 @@ export interface DiffResultProps extends React.HTMLAttributes<HTMLDivElement> {
   result: DiffResultType;
   viewMode: ViewMode;
   activePath?: string;
-  /** 窄屏填充模式：撑满父容器可用高度并内部滚动，而非使用固定最小/最大高度 */
-  fill?: boolean;
 }
 
 export default function DiffResult({
   result,
   viewMode,
   activePath,
-  fill = false,
   className,
   ...props
 }: DiffResultProps) {
-  const [expandedPaths, setExpandedPaths] = React.useState<Record<string, 'open' | 'closed'>>({});
-  const togglePath = React.useCallback((path: string, currentExpanded: boolean) => {
-    setExpandedPaths((prev) => ({
-      ...prev,
-      [path]: currentExpanded ? 'closed' : 'open',
-    }));
-  }, []);
-
-  const leftRef = React.useRef<HTMLDivElement | null>(null);
-  const rightRef = React.useRef<HTMLDivElement | null>(null);
-
-  React.useEffect(() => {
-    const leftEl = leftRef.current;
-    const rightEl = rightRef.current;
-    if (!leftEl || !rightEl) return;
-
-    let isSyncingLeftScroll = false;
-    let isSyncingRightScroll = false;
-
-    const handleLeftScroll = () => {
-      if (isSyncingLeftScroll) {
-        isSyncingLeftScroll = false;
-        return;
-      }
-      isSyncingRightScroll = true;
-      rightEl.scrollTop = leftEl.scrollTop;
-      rightEl.scrollLeft = leftEl.scrollLeft;
-    };
-
-    const handleRightScroll = () => {
-      if (isSyncingRightScroll) {
-        isSyncingRightScroll = false;
-        return;
-      }
-      isSyncingLeftScroll = true;
-      leftEl.scrollTop = rightEl.scrollTop;
-      leftEl.scrollLeft = rightEl.scrollLeft;
-    };
-
-    leftEl.addEventListener('scroll', handleLeftScroll);
-    rightEl.addEventListener('scroll', handleRightScroll);
-
-    return () => {
-      leftEl.removeEventListener('scroll', handleLeftScroll);
-      rightEl.removeEventListener('scroll', handleRightScroll);
-    };
-  }, [viewMode]);
-
   if (viewMode === 'sideBySide') {
     return (
       <div
-        className={cn(
+        className={cn('flex flex-col md:flex-row gap-4 items-stretch w-full', className)}
-          'flex flex-col md:flex-row gap-4 items-stretch rounded-xl border border-border bg-muted/30 p-1.5 w-full',
-          fill ? 'min-h-0 flex-1' : '',
-          className,
-        )}
         {...props}
       >
-        <div className="flex-1 min-w-0 min-h-0 flex flex-col">
+        <div className="flex-1 min-w-0">
           <SectionLabel text="原始 JSON" />
-          <JsonTree
+          <JsonTree node={result.root} side="left" activePath={activePath} />
-            ref={leftRef}
-            node={result.root}
-            side="left"
-            activePath={activePath}
-            fill={fill}
-            expandedPaths={expandedPaths}
-            onTogglePath={togglePath}
-          />
         </div>
-        <div className="flex-1 min-w-0 min-h-0 flex flex-col">
+        <div className="flex-1 min-w-0">
           <SectionLabel text="目标 JSON" />
-          <JsonTree
+          <JsonTree node={result.root} side="right" activePath={activePath} />
-            ref={rightRef}
-            node={result.root}
-            side="right"
-            activePath={activePath}
-            fill={fill}
-            expandedPaths={expandedPaths}
-            onTogglePath={togglePath}
-          />
         </div>
       </div>
     );
@@ -108,15 +37,12 @@ export default function DiffResult({
   return (
     <div
       className={cn(
-        'flex flex-col rounded-xl border border-border bg-muted/30 font-mono text-xs shadow-sm overflow-x-auto overflow-y-auto p-1.5',
+        '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',
-        fill ? 'min-h-0 flex-1' : 'min-h-[200px] max-h-[520px]',
         className,
       )}
       {...props}
     >
-      <div className="min-w-full w-fit">
+      <UnifiedView node={result.root} depth={0} activePath={activePath} />
-        <UnifiedView node={result.root} depth={0} activePath={activePath} />
-      </div>
     </div>
   );
 }
@@ -263,7 +189,7 @@ const UnifiedRow = ({ depth, type, text, active, multiline }: UnifiedRowProps) =
         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 before:content-[""]',
+          '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`,

src/pages/JsonTools/components/DiffWorkspace.tsx

@@ -1,154 +0,0 @@
-import JsonDiffInput from './JsonDiffInput';
-import JsonDiffPanel from './JsonDiffPanel';
-import CompareActionBar from './CompareActionBar';
-import DiffResult from './DiffResult';
-import DiffNavigator from './DiffNavigator';
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import EmptyPlaceholder from '@/components/EmptyPlaceholder';
-import type { UseJsonToolsReturn } from '../useJsonTools';
-import type { ViewMode } from '../types';
-
-interface DiffWorkspaceProps {
-  tools: UseJsonToolsReturn;
-}
-
-const VIEW_OPTIONS: { value: ViewMode; label: string }[] = [
-  { value: 'sideBySide', label: '并排' },
-  { value: 'unified', label: '统一' },
-];
-
-export default function DiffWorkspace({ tools }: DiffWorkspaceProps) {
-  const {
-    isWide,
-    viewMode,
-    setViewMode,
-    leftInput,
-    rightInput,
-    setLeftInput,
-    setRightInput,
-    leftError,
-    rightError,
-    activeResult,
-    total,
-    currentDiffIndex,
-    handlePrev,
-    handleNext,
-    activePath,
-    hasCompared,
-    collapsedA,
-    collapsedB,
-    toggleCollapseA,
-    toggleCollapseB,
-    canCompare,
-    handleCompare,
-    previewA,
-    previewB,
-  } = tools;
-
-  const viewToggle = (
-    <div className="flex h-10 items-center justify-between rounded-xl border border-border/60 bg-secondary/40 px-1.5">
-      <SwitchButtonGroup
-        value={viewMode}
-        onChange={(v: ViewMode) => setViewMode(v)}
-        options={VIEW_OPTIONS}
-        size="small"
-      />
-    </div>
-  );
-
-  if (isWide) {
-    return (
-      <div className="flex flex-1 min-h-0 flex-col space-y-4">
-        {viewToggle}
-
-        <div className="flex w-full flex-col items-stretch gap-4 md:flex-row shrink-0">
-          <JsonDiffInput
-            label="原始 JSON"
-            placeholder="输入原始 JSON..."
-            value={leftInput}
-            onChange={setLeftInput}
-            error={leftError}
-            minRows={9}
-          />
-          <JsonDiffInput
-            label="目标 JSON"
-            placeholder="输入目标 JSON..."
-            value={rightInput}
-            onChange={setRightInput}
-            error={rightError}
-            minRows={9}
-          />
-        </div>
-
-        {activeResult ? (
-          <div className="flex min-h-0 flex-1 flex-col space-y-3.5 pt-1">
-            <div className="flex w-full justify-center shrink-0">
-              <DiffNavigator
-                total={total}
-                currentIndex={currentDiffIndex}
-                onPrev={handlePrev}
-                onNext={handleNext}
-              />
-            </div>
-            <DiffResult result={activeResult} viewMode={viewMode} activePath={activePath} fill />
-          </div>
-        ) : (
-          <EmptyPlaceholder className="min-h-[140px] flex-1" messageClassName="max-w-[260px]">
-            {leftError || rightError
-              ? '请修正上方 JSON 的语法错误以开启实时流式比对'
-              : '输入两侧 JSON 后点击比较'}
-          </EmptyPlaceholder>
-        )}
-      </div>
-    );
-  }
-
-  const resultsVisible = collapsedA && collapsedB;
-
-  const handleShowResults = () => {
-    if (!collapsedA) toggleCollapseA();
-    if (!collapsedB) toggleCollapseB();
-  };
-
-  return (
-    <div className="flex flex-1 min-h-0 flex-col gap-3">
-      <JsonDiffPanel
-        title="数据 A（原始）"
-        placeholder="输入原始 JSON..."
-        value={leftInput}
-        onChange={setLeftInput}
-        error={leftError}
-        collapsed={collapsedA}
-        onToggleCollapse={toggleCollapseA}
-        preview={previewA}
-      />
-      <CompareActionBar
-        canCompare={canCompare}
-        onCompare={handleCompare}
-        hasCompared={hasCompared}
-        total={total}
-        currentIndex={currentDiffIndex}
-        onPrev={handlePrev}
-        onNext={handleNext}
-        resultsVisible={resultsVisible}
-        onShowResults={handleShowResults}
-      />
-      <JsonDiffPanel
-        title="数据 B（目标）"
-        placeholder="输入目标 JSON..."
-        value={rightInput}
-        onChange={setRightInput}
-        error={rightError}
-        collapsed={collapsedB}
-        onToggleCollapse={toggleCollapseB}
-        preview={previewB}
-      />
-
-      {activeResult && resultsVisible ? (
-        <div className="flex min-h-0 flex-1">
-          <DiffResult result={activeResult} viewMode={viewMode} activePath={activePath} fill />
-        </div>
-      ) : null}
-    </div>
-  );
-}

src/pages/JsonTools/components/JsonDiffPanel.tsx

@@ -1,91 +0,0 @@
-import React from 'react';
-import { ChevronRight } from 'lucide-react';
-import TextInputArea from '@/components/TextInputArea';
-import { cn } from '@/lib/utils';
-
-export interface JsonDiffPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  /** 面板标题，如 "数据 A（原始）" */
-  title: string;
-  placeholder: string;
-  value: string;
-  onChange: (value: string) => void;
-  error?: string | null;
-  /** 是否处于折叠态 */
-  collapsed: boolean;
-  onToggleCollapse: () => void;
-  /** 折叠态展示的单行缩略预览文本 */
-  preview: string;
-}
-
-export default function JsonDiffPanel({
-  title,
-  placeholder,
-  value,
-  onChange,
-  error,
-  collapsed,
-  onToggleCollapse,
-  preview,
-  className,
-  ...props
-}: JsonDiffPanelProps) {
-  return (
-    <div
-      className={cn(
-        'flex flex-col overflow-hidden rounded-md border bg-card transition-all duration-300 ease-in-out',
-        error
-          ? 'border-destructive focus-within:ring-1 focus-within:ring-destructive focus-within:border-destructive'
-          : 'border-border focus-within:ring-1 focus-within:ring-ring focus-within:border-border/80',
-        className,
-      )}
-      style={{
-        flex: collapsed ? '0 0 36px' : '1 1 120px',
-      }}
-      {...props}
-    >
-      <button
-        type="button"
-        onClick={onToggleCollapse}
-        className={cn(
-          'flex h-[36px] w-full cursor-pointer select-none items-center justify-between bg-muted/20 hover:bg-muted/30 transition-colors px-3 shrink-0 text-left focus:outline-none focus:bg-muted/40',
-          !collapsed && 'border-b border-border/60',
-        )}
-      >
-        <span className="text-[11px] font-semibold text-foreground/90 shrink-0">{title}</span>
-        <span
-          className={cn(
-            'flex-1 truncate font-mono text-xs text-muted-foreground/70 ml-3 transition-all duration-300',
-            collapsed ? 'opacity-100 max-w-full' : 'opacity-0 max-w-0 pointer-events-none',
-          )}
-        >
-          {preview}
-        </span>
-        <ChevronRight
-          className={cn(
-            'h-4 w-4 shrink-0 text-muted-foreground hover:text-foreground transition-transform duration-300',
-            !collapsed && 'rotate-90',
-          )}
-        />
-      </button>
-
-      <div
-        className={cn(
-          'flex-1 min-h-0 flex flex-col transition-opacity duration-300',
-          collapsed ? 'opacity-0 pointer-events-none' : 'opacity-100',
-        )}
-      >
-        <TextInputArea
-          fill
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          externalError={error ?? undefined}
-          showClear={true}
-          allowCopy={true}
-          borderless
-          className="min-h-0 flex-1"
-        />
-      </div>
-    </div>
-  );
-}

src/pages/JsonTools/components/JsonTree.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+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';
@@ -10,9 +10,6 @@ export interface JsonTreeProps extends React.HTMLAttributes<HTMLDivElement> {
   side: TreeSide;
   defaultExpandDepth?: number;
   activePath?: string;
-  fill?: boolean;
-  expandedPaths?: Record<string, 'open' | 'closed'>;
-  onTogglePath?: (path: string, currentExpanded: boolean) => void;
 }
 
 interface NodeRowProps {
@@ -22,8 +19,6 @@ interface NodeRowProps {
   defaultExpandDepth: number;
   activePath?: string;
   isLastChild: boolean;
-  expandedPaths?: Record<string, 'open' | 'closed'>;
-  onTogglePath?: (path: string, currentExpanded: boolean) => void;
 }
 
 const formatPrimitive = (v: unknown): string => {
@@ -67,17 +62,8 @@ const isContainerValue = (v: unknown): boolean => {
 };
 
 const NodeRow = React.memo(
-  ({
+  ({ node, side, depth, defaultExpandDepth, activePath, isLastChild }: NodeRowProps) => {
-    node,
+    const [override, setOverride] = useState<'auto' | 'open' | 'closed'>('auto');
-    side,
-    depth,
-    defaultExpandDepth,
-    activePath,
-    isLastChild,
-    expandedPaths = {},
-    onTogglePath,
-  }: NodeRowProps) => {
-    const override = expandedPaths[node.path] || 'auto';
     const rowRef = useRef<HTMLDivElement | null>(null);
 
     const onActivePath = useMemo(() => {
@@ -137,7 +123,7 @@ const NodeRow = React.memo(
       return (
         <div ref={rowRef} className="w-full flex flex-col">
           <div
-            onClick={() => onTogglePath?.(node.path, expanded)}
+            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,
@@ -185,8 +171,6 @@ const NodeRow = React.memo(
                   defaultExpandDepth={defaultExpandDepth}
                   activePath={activePath}
                   isLastChild={idx === node.children!.length - 1}
-                  expandedPaths={expandedPaths}
-                  onTogglePath={onTogglePath}
                 />
               ))}
             </div>
@@ -220,7 +204,7 @@ const NodeRow = React.memo(
         {!isRoot && (
           <span className="text-foreground/90 font-bold tracking-tight">{node.key}:</span>
         )}
-        <span className={cn('font-medium tracking-tight whitespace-nowrap', theme.text)}>
+        <span className={cn('font-medium tracking-tight truncate flex-1', theme.text)}>
           {formatPrimitive(value)}
           <span className="text-foreground/60 font-sans">{isLastChild ? '' : ','}</span>
         </span>
@@ -231,51 +215,33 @@ const NodeRow = React.memo(
 
 NodeRow.displayName = 'NodeRow';
 
-const JsonTree = React.forwardRef<HTMLDivElement, JsonTreeProps>(
+export default function JsonTree({
-  (
+  node,
-    {
+  side,
-      node,
+  defaultExpandDepth = 2,
-      side,
+  activePath,
-      defaultExpandDepth = 2,
+  className,
-      activePath,
+  ...props
-      fill = false,
+}: JsonTreeProps) {
-      expandedPaths,
+  return (
-      onTogglePath,
+    <div
-      className,
+      className={cn(
-      ...props
+        '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,
-    ref,
+      )}
-  ) => {
+      {...props}
-    return (
+    >
-      <div
+      <NodeRow
-        ref={ref}
+        node={node}
-        className={cn(
+        side={side}
-          'rounded-xl border border-border bg-card text-card-foreground font-mono text-xs shadow-sm overflow-x-auto overflow-y-auto p-2.5 tabular-nums select-text',
+        depth={0}
-          fill ? 'min-h-0 flex-1' : 'min-h-[200px] max-h-[520px]',
+        defaultExpandDepth={defaultExpandDepth}
-          className,
+        activePath={activePath}
-        )}
+        isLastChild
-        {...props}
+      />
-      >
+    </div>
-        <div className="min-w-full w-fit">
+  );
-          <NodeRow
+}
-            node={node}
-            side={side}
-            depth={0}
-            defaultExpandDepth={defaultExpandDepth}
-            activePath={activePath}
-            isLastChild
-            expandedPaths={expandedPaths}
-            onTogglePath={onTogglePath}
-          />
-        </div>
-      </div>
-    );
-  },
-);
-
-JsonTree.displayName = 'JsonTree';
-
-export default JsonTree;
 
 const summarize = (v: unknown): string => {
   if (Array.isArray(v)) return `${v.length} ${v.length === 1 ? 'item' : 'items'}`;

src/pages/JsonTools/components/__tests__/CompareActionBar.test.tsx

@@ -1,56 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi } from 'vitest';
-import CompareActionBar from '../CompareActionBar';
-
-describe('CompareActionBar', () => {
-  it('不可比较时按钮禁用', () => {
-    render(
-      <CompareActionBar
-        canCompare={false}
-        onCompare={() => {}}
-        hasCompared={false}
-        total={0}
-        currentIndex={0}
-        onPrev={() => {}}
-        onNext={() => {}}
-      />,
-    );
-    expect(screen.getByRole('button', { name: /Compare A & B/i })).toBeDisabled();
-  });
-
-  it('可比较时点击触发 onCompare', async () => {
-    const user = userEvent.setup();
-    const onCompare = vi.fn();
-    render(
-      <CompareActionBar
-        canCompare={true}
-        onCompare={onCompare}
-        hasCompared={false}
-        total={0}
-        currentIndex={0}
-        onPrev={() => {}}
-        onNext={() => {}}
-      />,
-    );
-    await user.click(screen.getByRole('button', { name: /Compare A & B/i }));
-    expect(onCompare).toHaveBeenCalled();
-  });
-
-  it('已比较后展示 DiffNavigator（上一处/下一处）', () => {
-    render(
-      <CompareActionBar
-        canCompare={true}
-        onCompare={() => {}}
-        hasCompared={true}
-        total={3}
-        currentIndex={1}
-        onPrev={() => {}}
-        onNext={() => {}}
-      />,
-    );
-    expect(screen.getByLabelText('上一个')).toBeInTheDocument();
-    expect(screen.getByLabelText('下一个')).toBeInTheDocument();
-    expect(screen.queryByText('无差异')).not.toBeInTheDocument();
-  });
-});

src/pages/JsonTools/components/__tests__/JsonDiffPanel.test.tsx

@@ -1,57 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi } from 'vitest';
-import JsonDiffPanel from '../JsonDiffPanel';
-
-describe('JsonDiffPanel', () => {
-  it('展开态渲染标题与输入框', () => {
-    render(
-      <JsonDiffPanel
-        title="数据 A（原始）"
-        placeholder="x"
-        value=""
-        onChange={() => {}}
-        collapsed={false}
-        onToggleCollapse={() => {}}
-        preview=""
-      />,
-    );
-    expect(screen.getByText('数据 A（原始）')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('x')).toBeInTheDocument();
-  });
-
-  it('折叠态渲染预览并隐藏输入框', () => {
-    render(
-      <JsonDiffPanel
-        title="数据 A（原始）"
-        placeholder="x"
-        value=""
-        onChange={() => {}}
-        collapsed={true}
-        onToggleCollapse={() => {}}
-        preview="abc（点击展开）"
-      />,
-    );
-    expect(screen.getByText('abc（点击展开）')).toBeInTheDocument();
-    const input = screen.getByPlaceholderText('x');
-    expect(input.closest('.opacity-0')).toBeInTheDocument();
-  });
-
-  it('点击标题可切换折叠', async () => {
-    const user = userEvent.setup();
-    const onToggle = vi.fn();
-    render(
-      <JsonDiffPanel
-        title="T"
-        placeholder="x"
-        value=""
-        onChange={() => {}}
-        collapsed={false}
-        onToggleCollapse={onToggle}
-        preview=""
-      />,
-    );
-    await user.click(screen.getByText('T'));
-    expect(onToggle).toHaveBeenCalled();
-  });
-});

src/pages/JsonTools/index.tsx

@@ -1,18 +1,41 @@
-import DiffWorkspace from './components/DiffWorkspace';
+import JsonDiffInput from './components/JsonDiffInput';
+import DiffResult from './components/DiffResult';
+import DiffNavigator from './components/DiffNavigator';
 import JsonFormatSection from './components/JsonFormatSection';
 import JsonConvertSection from './components/JsonConvertSection';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import { useJsonTools } from './useJsonTools';
 import type { JsonToolsPageMode } from '@/types/storage';
+import type { ViewMode } from './types';
 
 type PageMode = JsonToolsPageMode;
 
 export default function Index() {
-  const tools = useJsonTools();
+  const {
-  const { pageMode, setPageMode, yamlConvert, tomlConvert, minifyConvert } = tools;
+    pageMode,
+    setPageMode,
+    leftInput,
+    rightInput,
+    setLeftInput,
+    setRightInput,
+    leftError,
+    rightError,
+    viewMode,
+    setViewMode,
+    diffResult,
+    total,
+    currentDiffIndex,
+    handlePrev,
+    handleNext,
+    activePath,
+    yamlConvert,
+    tomlConvert,
+    minifyConvert,
+  } = useJsonTools();
 
   return (
-    <div className="flex h-full min-h-0 w-full select-none flex-col space-y-4 p-4">
+    <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)}
@@ -24,11 +47,62 @@ export default function Index() {
           { value: 'minify', label: '压缩' },
         ]}
         size="small"
-        className="w-full shrink-0 sm:w-auto"
+        className="w-full sm:w-auto"
       />
 
       {pageMode === 'diff' ? (
-        <DiffWorkspace tools={tools} />
+        <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: '并排' },
+                { value: 'unified', label: '统一' },
+              ]}
+              size="small"
+            />
+          </div>
+
+          <div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
+            <JsonDiffInput
+              label="原始 JSON"
+              placeholder="输入原始 JSON..."
+              value={leftInput}
+              onChange={setLeftInput}
+              error={leftError}
+              minRows={9}
+            />
+            <JsonDiffInput
+              label="目标 JSON"
+              placeholder="输入目标 JSON..."
+              value={rightInput}
+              onChange={setRightInput}
+              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>
+          ) : (
+            <EmptyPlaceholder className="min-h-[140px]" messageClassName="max-w-[260px]">
+              {leftError || rightError
+                ? '请修正上方 JSON 的语法错误以开启实时流式比对'
+                : '输入两侧 JSON 后点击比较'}
+            </EmptyPlaceholder>
+          )}
+        </div>
       ) : pageMode === 'format' ? (
         <JsonFormatSection />
       ) : pageMode === 'yaml' ? (

src/pages/JsonTools/useJsonTools.ts

@@ -5,14 +5,10 @@ import { jsonToYaml } from '@/utils/jsonToYaml';
 import { jsonToToml } from '@/utils/jsonToToml';
 import { minifyJson } from '@/utils/jsonFormatter';
 import { isValidPageMode, tryParse } from './constants';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
 import type { JsonToolsPageMode } from '@/types/storage';
 import type { ConvertFunction, ViewMode } from './types';
 
-type DiffResultValue = ReturnType<typeof diffJson>;
-
 export interface UseJsonToolsReturn {
-  isWide: boolean;
   pageMode: JsonToolsPageMode;
   setPageMode: (mode: JsonToolsPageMode) => void;
   leftInput: string;
@@ -23,44 +19,22 @@ export interface UseJsonToolsReturn {
   rightError: string | null;
   viewMode: ViewMode;
   setViewMode: (mode: ViewMode) => void;
-  /** 当前生效的差异结果：宽屏为实时计算，窄屏为手动 Compare 后的结果 */
+  diffResult: ReturnType<typeof diffJson> | null;
-  activeResult: DiffResultValue | null;
   total: number;
   currentDiffIndex: number;
   handlePrev: () => void;
   handleNext: () => void;
   activePath: string | undefined;
-  /** 窄屏：是否已点击 Compare 生成结果 */
-  hasCompared: boolean;
-  /** 窄屏：左右面板是否折叠 */
-  collapsedA: boolean;
-  collapsedB: boolean;
-  toggleCollapseA: () => void;
-  toggleCollapseB: () => void;
-  /** 窄屏：两侧均有合法非空输入时可触发比对 */
-  canCompare: boolean;
-  handleCompare: () => void;
-  /** 窄屏：折叠态单行预览文本 */
-  previewA: string;
-  previewB: string;
   yamlConvert: ConvertFunction;
   tomlConvert: ConvertFunction;
   minifyConvert: ConvertFunction;
 }
 
-const buildPreview = (raw: string): string => {
-  const single = raw.replace(/\s+/g, ' ').trim();
-  const truncated = single.length > 80 ? `${single.slice(0, 80)}…` : single;
-  return truncated ? `${truncated}（点击展开）` : '（点击展开）';
-};
-
 export function useJsonTools(): UseJsonToolsReturn {
-  const isWide = useMediaQuery('(min-width: 768px)');
-
   const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
 
-  const [leftInput, setLeftInputState] = useState('');
+  const [leftInput, setLeftInput] = useState('');
-  const [rightInput, setRightInputState] = useState('');
+  const [rightInput, setRightInput] = useState('');
   const [debouncedLeft, setDebouncedLeft] = useState('');
   const [debouncedRight, setDebouncedRight] = useState('');
 
@@ -84,17 +58,9 @@ export function useJsonTools(): UseJsonToolsReturn {
   const rightError = parseState.right.error;
 
   const [viewMode, setViewMode] = useState<ViewMode>('sideBySide');
-  const activeViewMode = isWide ? viewMode : 'unified';
   const [currentDiffIndex, setCurrentDiffIndex] = useState(0);
 
-  // 窄屏手动比对状态
+  const diffResult = useMemo(() => {
-  const [hasCompared, setHasCompared] = useState(false);
-  const [manualResult, setManualResult] = useState<DiffResultValue | null>(null);
-  const [collapsedA, setCollapsedA] = useState(false);
-  const [collapsedB, setCollapsedB] = useState(false);
-
-  // 宽屏：实时流式比对（保持原行为）
-  const liveResult = useMemo<DiffResultValue | null>(() => {
     const { left, right } = parseState;
     if (left.error || right.error || debouncedLeft.trim() === '' || debouncedRight.trim() === '') {
       return null;
@@ -102,70 +68,7 @@ export function useJsonTools(): UseJsonToolsReturn {
     return diffJson(left.value, right.value);
   }, [parseState, debouncedLeft, debouncedRight]);
 
-  const activeResult = isWide ? liveResult : manualResult;
+  const total = diffResult?.diffPaths.length ?? 0;
-
-  // 即时解析（用于比对按钮可用态与折叠预览，避免 250ms 延迟）
-  const immediateParse = useMemo(() => {
-    const invalidMsg = '无效的 JSON 格式';
-    return {
-      left: tryParse(leftInput, invalidMsg),
-      right: tryParse(rightInput, invalidMsg),
-    };
-  }, [leftInput, rightInput]);
-
-  const canCompare =
-    leftInput.trim() !== '' &&
-    rightInput.trim() !== '' &&
-    !immediateParse.left.error &&
-    !immediateParse.right.error;
-
-  const previewA = useMemo(() => buildPreview(leftInput), [leftInput]);
-  const previewB = useMemo(() => buildPreview(rightInput), [rightInput]);
-
-  const setLeftInput = useCallback(
-    (val: string) => {
-      setLeftInputState(val);
-      if (hasCompared) {
-        setHasCompared(false);
-        setManualResult(null);
-        setCurrentDiffIndex(0);
-      } else {
-        setCurrentDiffIndex(0);
-      }
-    },
-    [hasCompared],
-  );
-
-  const setRightInput = useCallback(
-    (val: string) => {
-      setRightInputState(val);
-      if (hasCompared) {
-        setHasCompared(false);
-        setManualResult(null);
-        setCurrentDiffIndex(0);
-      } else {
-        setCurrentDiffIndex(0);
-      }
-    },
-    [hasCompared],
-  );
-
-  const handleCompare = useCallback(() => {
-    if (!canCompare) return;
-    const left = immediateParse.left.value;
-    const right = immediateParse.right.value;
-    const result = diffJson(left, right);
-    setManualResult(result);
-    setHasCompared(true);
-    setCollapsedA(true);
-    setCollapsedB(true);
-    setCurrentDiffIndex(0);
-  }, [canCompare, immediateParse]);
-
-  const toggleCollapseA = useCallback(() => setCollapsedA((v) => !v), []);
-  const toggleCollapseB = useCallback(() => setCollapsedB((v) => !v), []);
-
-  const total = activeResult?.diffPaths.length ?? 0;
 
   const handlePrev = useCallback(() => {
     if (total === 0) return;
@@ -177,10 +80,7 @@ export function useJsonTools(): UseJsonToolsReturn {
     setCurrentDiffIndex((idx) => (idx + 1) % total);
   }, [total]);
 
-  const activePath =
+  const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
-    activeResult && total > 0 && currentDiffIndex < total
-      ? activeResult.diffPaths[currentDiffIndex]
-      : undefined;
 
   const yamlConvert: ConvertFunction = useCallback((text: string) => {
     const r = jsonToYaml(text);
@@ -198,32 +98,28 @@ export function useJsonTools(): UseJsonToolsReturn {
   }, []);
 
   return {
-    isWide,
     pageMode,
     setPageMode,
     leftInput,
     rightInput,
-    setLeftInput,
+    setLeftInput: (val: string) => {
-    setRightInput,
+      setLeftInput(val);
+      setCurrentDiffIndex(0);
+    },
+    setRightInput: (val: string) => {
+      setRightInput(val);
+      setCurrentDiffIndex(0);
+    },
     leftError,
     rightError,
-    viewMode: activeViewMode,
+    viewMode,
     setViewMode,
-    activeResult,
+    diffResult,
     total,
     currentDiffIndex,
     handlePrev,
     handleNext,
     activePath,
-    hasCompared,
-    collapsedA,
-    collapsedB,
-    toggleCollapseA,
-    toggleCollapseB,
-    canCompare,
-    handleCompare,
-    previewA,
-    previewB,
     yamlConvert,
     tomlConvert,
     minifyConvert,

src/styles/shell.css

@@ -93,27 +93,6 @@
   display: none;
 }
 
-/* 细滚动条：仅作用于需要内部滚动的面板/结果区（覆盖上方的全局隐藏） */
-.diff-scroll {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-.diff-scroll::-webkit-scrollbar {
-  display: block;
-  width: 6px;
-  height: 6px;
-}
-.diff-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-.diff-scroll::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-}
-.dark .diff-scroll::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.25);
-}
-
 @layer components {
   .page-transition-enter {
     @apply motion-reduce:transition-none;

src/utils/README.md

@@ -7,8 +7,8 @@
 | 文件                     | 用途                                                                                                |
 | ------------------------ | --------------------------------------------------------------------------------------------------- |
 | `chromeStorage.ts`       | Chrome Storage API 封装：类型安全的 `StorageUtils` 类，提供 `get/set/remove` 方法                   |
-| `syncSnapshot.ts`        | 通用 `localStorage` 快照读取（`snapshot/{key}`），用于 Router 与 `useStorageState` 首屏防闪烁       |
+| `syncSnapshot.ts`        | 通用 `localStorage` 快照读取（`snapshot/{key}`），用于 Router 与 `useStorageState` 首屏防闪烁     |
-| `themeSnapshot.ts`       | 主题专用快照读写与 `document.documentElement` class 切换                                            |
+| `themeSnapshot.ts`       | 主题专用快照读写与 `document.documentElement` class 切换                                              |
 | `restrictedUrls.ts`      | 受限 URL 检测（`chrome://`、`about:` 等），供 Storage Cleaner 等模块复用                            |
 | `chromeTabs.ts`          | Chrome Tabs API 封装：获取活动标签页、获取域名、在新标签页打开扩展页面                              |
 | `clipboard.ts`           | 剪贴板操作：`copyTextToClipboard`（文本）、`copyImageToClipboard`（图片）                           |
@@ -42,12 +42,12 @@
 
 写入经内部 `setAll()` 完成；`localStorage.setItem` 抛错（如配额超限）时返回 `false`，并 `console.error`，**不会部分提交**：
 
-| 方法           | 写入失败返回值               | 常见失败原因                                           |
+| 方法 | 写入失败返回值 | 常见失败原因 |
-| -------------- | ---------------------------- | ------------------------------------------------------ |
+| ---- | -------------- | ------------ |
-| `save()`       | `null`                       | 达上限、规则不存在（更新时）、`setItem` 异常           |
+| `save()` | `null` | 达上限、规则不存在（更新时）、`setItem` 异常 |
-| `update()`     | `null`                       | 规则不存在、`setItem` 异常                             |
+| `update()` | `null` | 规则不存在、`setItem` 异常 |
-| `deleteRule()` | `false`                      | 规则不存在、`setItem` 异常                             |
+| `deleteRule()` | `false` | 规则不存在、`setItem` 异常 |
-| `duplicate()`  | 仍可能返回对象但数据未持久化 | 见源码：`duplicate` 未检查 `setAll` 返回值（已知缺口） |
+| `duplicate()` | 仍可能返回对象但数据未持久化 | 见源码：`duplicate` 未检查 `setAll` 返回值（已知缺口） |
 
 调用方应检查返回值后再展示成功 Toast。页面层参考 `FieldList.tsx`：`save`/`update` 返回非空才提示「规则已保存/已更新」。