refactor(json-tools): 优化 JsonDiffPanel 交互体验并增强 TextInputArea 灵活性

- 在 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/features.tsx` 的 `FEATURES` 数组中定义：
+功能名称与描述在 `config/featureMeta.ts` 的 `FEATURES` 数组中定义：
 
 ```typescript
 {
@@ -677,10 +677,11 @@ 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,9 +1505,7 @@ export class DataExporter {
 ```typescript
 // src/types/testDataGenerator.ts
 
-type WorkerRequestMessage =
+type WorkerRequestMessage = { type: 'start'; payload: WorkerStartPayload } | { type: 'cancel' };
-  | { type: 'start'; payload: WorkerStartPayload }
-  | { type: 'cancel' };
 
 type WorkerResponseMessage =
   | { type: 'progress'; generationId: number; payload: GenerateProgress }

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

@@ -64,15 +64,4 @@ describe('useJsonTools 窄屏手动比对', () => {
     act(() => result.current.toggleCollapseA());
     expect(result.current.collapsedA).toBe(false);
   });
-
-  it('单输入经防抖后持久化，重挂载可恢复', async () => {
-    localStorage.clear();
-    const { result, unmount } = renderHook(() => useJsonTools());
-    act(() => result.current.setInput('{"x":1}'));
-    await new Promise((r) => setTimeout(r, 300));
-    unmount();
-
-    const { result: result2 } = renderHook(() => useJsonTools());
-    expect(result2.current.input).toBe('{"x":1}');
-  });
 });

src/pages/JsonTools/components/CollapsiblePanel.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { ChevronRight } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-export interface CollapsiblePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-  /** 面板标题 */
-  title: string;
-  /** 是否处于折叠态 */
-  collapsed: boolean;
-  onToggleCollapse: () => void;
-  /** 折叠态展示的单行缩略预览文本 */
-  preview?: string;
-  /** 展开态内容 */
-  children?: React.ReactNode;
-}
-
-export default function CollapsiblePanel({
-  title,
-  collapsed,
-  onToggleCollapse,
-  preview,
-  children,
-  className,
-  ...props
-}: CollapsiblePanelProps) {
-  return (
-    <div
-      className={cn(
-        'flex flex-col overflow-hidden rounded-md border bg-card transition-all duration-300 ease-in-out',
-        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',
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}

src/pages/JsonTools/components/JsonConvertSection.tsx

@@ -1,45 +1,55 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import TextInputArea from '@/components/TextInputArea';
 import JsonResultPanel from './JsonResultPanel';
-import CollapsiblePanel from './CollapsiblePanel';
 import { validateJson } from '@/utils/jsonFormatter';
 import { cn } from '@/lib/utils';
-import { buildPreview, type UseJsonToolsReturn } from '../useJsonTools';
 import type { ConvertFunction, ConvertResult } from '../types';
 
-const CONVERT_LABELS: Record<string, { inputPlaceholder: string; outputLabel: string }> = {
+const CONVERT_LABELS: Record<
+  string,
+  { inputPlaceholder: string; outputLabel: string; emptyHint: string }
+> = {
   yaml: {
     inputPlaceholder: '输入需要转换的 JSON...',
     outputLabel: 'YAML 结果',
+    emptyHint: '输入 JSON 后点击转换',
   },
   toml: {
     inputPlaceholder: '输入需要转换的 JSON...',
     outputLabel: 'TOML 结果',
+    emptyHint: '输入 JSON 后点击转换',
   },
   minify: {
     inputPlaceholder: '输入需要压缩的 JSON...',
     outputLabel: '压缩结果',
+    emptyHint: '输入 JSON 后点击压缩',
   },
 };
 
 interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
-  tools: UseJsonToolsReturn;
   mode: string;
   convertFunction: ConvertFunction;
 }
 
 export default function JsonConvertSection({
-  tools,
   mode,
   convertFunction,
   className,
   ...props
 }: JsonConvertSectionProps) {
-  const { input, setInput, debouncedInput } = tools;
+  const [input, setInput] = useState('');
-  const [inputCollapsed, setInputCollapsed] = useState(false);
+  const [debouncedInput, setDebouncedInput] = useState('');
 
   const labels = CONVERT_LABELS[mode] ?? CONVERT_LABELS.yaml;
 
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedInput(input);
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [input]);
+
   const error = useMemo(() => {
     return validateJson(debouncedInput);
   }, [debouncedInput]);
@@ -61,40 +71,32 @@ export default function JsonConvertSection({
     }
   }, [debouncedInput, error, convertFunction]);
 
-  const preview = useMemo(() => buildPreview(input), [input]);
-
   return (
-    <div className={cn('w-full flex flex-1 min-h-0 flex-col gap-3', className)} {...props}>
+    <div className={cn('w-full flex flex-col gap-4', className)} {...props}>
-      <CollapsiblePanel
+      <TextInputArea
-        title="JSON 输入"
+        placeholder={labels.inputPlaceholder}
-        collapsed={inputCollapsed}
+        value={input}
-        onToggleCollapse={() => setInputCollapsed((v) => !v)}
+        onChange={setInput}
-        preview={preview}
+        externalError={error || runtimeError || undefined}
-      >
+        showClear={true}
-        <TextInputArea
+        allowCopy={true}
-          fill
+        minRows={7}
-          borderless
+        maxRows={14}
-          placeholder={labels.inputPlaceholder}
+        onClear={() => setInput('')}
-          value={input}
+      />
-          onChange={setInput}
-          externalError={error || runtimeError || undefined}
-          showClear={true}
-          allowCopy={true}
-          className="min-h-0 flex-1"
-          onClear={() => setInput('')}
-        />
-      </CollapsiblePanel>
 
-      {result?.output && (
+      {result?.output ? (
-        <div className="flex min-h-0 flex-1">
+        <JsonResultPanel
-          <JsonResultPanel
+          title={labels.outputLabel}
-            fill
+          content={result.output}
-            title={labels.outputLabel}
+          originalBytes={result.originalBytes}
-            content={result.output}
+          outputBytes={result.outputBytes}
-            originalBytes={result.originalBytes}
+          maxHeight="380px"
-            outputBytes={result.outputBytes}
+        />
-          />
+      ) : (
-        </div>
+        <EmptyPlaceholder>
+          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
+        </EmptyPlaceholder>
       )}
     </div>
   );

src/pages/JsonTools/components/JsonDiffPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { ChevronRight } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
-import CollapsiblePanel from './CollapsiblePanel';
 import { cn } from '@/lib/utils';
 
 export interface JsonDiffPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -30,30 +30,62 @@ export default function JsonDiffPanel({
   ...props
 }: JsonDiffPanelProps) {
   return (
-    <CollapsiblePanel
+    <div
-      title={title}
-      collapsed={collapsed}
-      onToggleCollapse={onToggleCollapse}
-      preview={preview}
       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}
     >
-      <TextInputArea
+      <button
-        fill
+        type="button"
-        value={value}
+        onClick={onToggleCollapse}
-        onChange={onChange}
+        className={cn(
-        placeholder={placeholder}
+          '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',
-        externalError={error ?? undefined}
+          !collapsed && 'border-b border-border/60',
-        showClear={true}
+        )}
-        allowCopy={true}
+      >
-        borderless
+        <span className="text-[11px] font-semibold text-foreground/90 shrink-0">{title}</span>
-        className="min-h-0 flex-1"
+        <span
-      />
+          className={cn(
-    </CollapsiblePanel>
+            '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/JsonFormatSection.tsx

@@ -1,27 +1,29 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   formatJson,
   type JsonFormatOptions,
   type JsonFormatResult,
   validateJson,
 } from '@/utils/jsonFormatter';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import TextInputArea from '@/components/TextInputArea';
-import CollapsiblePanel from './CollapsiblePanel';
 import JsonResultPanel from './JsonResultPanel';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
-import { buildPreview, type UseJsonToolsReturn } from '../useJsonTools';
 
-interface JsonFormatSectionProps {
+export default function JsonFormatSection() {
-  tools: UseJsonToolsReturn;
+  const [input, setInput] = useState('');
-}
+  const [debouncedInput, setDebouncedInput] = useState('');
-
-export default function JsonFormatSection({ tools }: JsonFormatSectionProps) {
-  const { input, setInput, debouncedInput } = tools;
   const [indentSize, setIndentSize] = useState<number>(2);
   const [sortKeys, setSortKeys] = useState(false);
-  const [inputCollapsed, setInputCollapsed] = useState(false);
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedInput(input);
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [input]);
 
   const error = useMemo(() => {
     return validateJson(debouncedInput);
@@ -45,11 +47,9 @@ export default function JsonFormatSection({ tools }: JsonFormatSectionProps) {
     }
   }, [debouncedInput, error, indentSize, sortKeys]);
 
-  const preview = useMemo(() => buildPreview(input), [input]);
-
   return (
-    <div className="w-full flex flex-1 min-h-0 flex-col gap-3">
+    <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 shrink-0">
+      <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">
@@ -57,7 +57,7 @@ export default function JsonFormatSection({ tools }: JsonFormatSectionProps) {
             </span>
             <SwitchButtonGroup
               value={indentSize}
-              onChange={(v: number) => setIndentSize(Number(v))}
+              onChange={(v) => setIndentSize(Number(v))}
               options={[2, 4, 6, 8].map((size) => ({ value: size, label: String(size) }))}
               size="small"
             />
@@ -86,36 +86,29 @@ export default function JsonFormatSection({ tools }: JsonFormatSectionProps) {
         </div>
       </div>
 
-      <CollapsiblePanel
+      <TextInputArea
-        title="JSON 输入"
+        placeholder="输入需要格式化的 JSON..."
-        collapsed={inputCollapsed}
+        value={input}
-        onToggleCollapse={() => setInputCollapsed((v) => !v)}
+        onChange={setInput}
-        preview={preview}
+        externalError={error || runtimeError || undefined}
-      >
+        showClear={true}
-        <TextInputArea
+        allowCopy={true}
-          fill
+        minRows={8}
-          borderless
+        maxRows={15}
-          placeholder="输入需要格式化的 JSON..."
+        onClear={() => setInput('')}
-          value={input}
+      />
-          onChange={setInput}
-          externalError={error || runtimeError || undefined}
-          showClear={true}
-          allowCopy={true}
-          className="min-h-0 flex-1"
-          onClear={() => setInput('')}
-        />
-      </CollapsiblePanel>
 
-      {result?.formatted && (
+      {result?.formatted ? (
-        <div className="flex min-h-0 flex-1">
+        <JsonResultPanel
-          <JsonResultPanel
+          title="格式化结果"
-            fill
+          content={result.formatted}
-            title="格式化结果"
+          originalBytes={result.originalBytes}
-            content={result.formatted}
+          outputBytes={result.formattedBytes}
-            originalBytes={result.originalBytes}
+        />
-            outputBytes={result.formattedBytes}
+      ) : (
-          />
+        <EmptyPlaceholder>
-        </div>
+          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
+        </EmptyPlaceholder>
       )}
     </div>
   );

src/pages/JsonTools/components/JsonResultPanel.tsx

@@ -1,6 +1,5 @@
 import { formatBytes } from '@/utils/format';
 import { CopyButton } from '@/components/CopyButton';
-import { cn } from '@/lib/utils';
 
 export interface JsonResultPanelProps {
   title: string;
@@ -9,11 +8,6 @@ export interface JsonResultPanelProps {
   outputBytes: number;
   outputSizeLabel?: string;
   maxHeight?: string;
-  /**
-   * 撑满父容器剩余高度并启用内部滚动（而非按 maxHeight 截断）。
-   * 用于 popup / sidepanel 等固定高度场景下与折叠输入面板共享垂直空间。
-   */
-  fill?: boolean;
 }
 
 export default function JsonResultPanel({
@@ -23,15 +17,9 @@ export default function JsonResultPanel({
   outputBytes,
   outputSizeLabel = '格式化后大小',
   maxHeight = '420px',
-  fill = false,
 }: JsonResultPanelProps) {
   return (
-    <div
+    <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
-      className={cn(
-        'relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden',
-        fill ? 'flex flex-col flex-1 min-h-0' : 'flex flex-col',
-      )}
-    >
       <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">
@@ -55,11 +43,8 @@ export default function JsonResultPanel({
       </div>
 
       <div
-        className={cn(
+        className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all overflow-y-auto leading-relaxed select-text"
-          'p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all overflow-y-auto leading-relaxed select-text',
+        style={{ maxHeight }}
-          fill && 'flex-1 min-h-0',
-        )}
-        style={fill ? undefined : { maxHeight }}
       >
         {content}
       </div>

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

@@ -1,62 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useEffect, useState } from 'react';
-import { describe, it, expect } from 'vitest';
-import JsonFormatSection from '../JsonFormatSection';
-import type { UseJsonToolsReturn } from '../../useJsonTools';
-
-function Harness({ initial = '' }: { initial?: string }) {
-  const [input, setInput] = useState(initial);
-  const [debouncedInput, setDebouncedInput] = useState(initial);
-  useEffect(() => {
-    const t = setTimeout(() => setDebouncedInput(input), 250);
-    return () => clearTimeout(t);
-  }, [input]);
-  const tools = { input, setInput, debouncedInput } as unknown as UseJsonToolsReturn;
-  return <JsonFormatSection tools={tools} />;
-}
-
-describe('JsonFormatSection', () => {
-  it('渲染输入面板标题与缩进/键名排序工具栏', () => {
-    render(<Harness />);
-    expect(screen.getByText('JSON 输入')).toBeInTheDocument();
-    expect(screen.getByText('缩进')).toBeInTheDocument();
-    expect(screen.getByText('键名排序')).toBeInTheDocument();
-  });
-
-  it('输入无效 JSON 时不渲染结果面板与占位区', async () => {
-    render(<Harness initial="{ invalid json " />);
-    await waitFor(() => {
-      expect(screen.queryByText('格式化结果')).not.toBeInTheDocument();
-    });
-    expect(
-      screen.queryByText('请修正上方 JSON 的语法错误以开启实时流式格式化'),
-    ).not.toBeInTheDocument();
-    expect(screen.queryByText('输入 JSON 后点击格式化')).not.toBeInTheDocument();
-  });
-
-  it('输入有效 JSON 后渲染格式化结果面板', async () => {
-    render(<Harness initial='{"a":1,"b":2}' />);
-    await waitFor(() => {
-      expect(screen.getByText('格式化结果')).toBeInTheDocument();
-    });
-    expect(screen.getByText(/"a": 1/)).toBeInTheDocument();
-    expect(screen.getByText(/"b": 2/)).toBeInTheDocument();
-  });
-
-  it('点击标题可折叠输入面板', async () => {
-    const user = userEvent.setup();
-    render(<Harness initial='{"a":1}' />);
-    await waitFor(() => {
-      expect(screen.getByText('格式化结果')).toBeInTheDocument();
-    });
-
-    await user.click(screen.getByText('JSON 输入'));
-
-    const input = screen.getByPlaceholderText('输入需要格式化的 JSON...');
-    await waitFor(() => {
-      expect(input.closest('.opacity-0')).toBeInTheDocument();
-    });
-    expect(screen.getByText('{"a":1}（点击展开）')).toBeInTheDocument();
-  });
-});

src/pages/JsonTools/index.tsx

@@ -30,13 +30,13 @@ export default function Index() {
       {pageMode === 'diff' ? (
         <DiffWorkspace tools={tools} />
       ) : pageMode === 'format' ? (
-        <JsonFormatSection tools={tools} />
+        <JsonFormatSection />
       ) : pageMode === 'yaml' ? (
-        <JsonConvertSection tools={tools} mode="yaml" convertFunction={yamlConvert} />
+        <JsonConvertSection mode="yaml" convertFunction={yamlConvert} />
       ) : pageMode === 'toml' ? (
-        <JsonConvertSection tools={tools} mode="toml" convertFunction={tomlConvert} />
+        <JsonConvertSection mode="toml" convertFunction={tomlConvert} />
       ) : (
-        <JsonConvertSection tools={tools} mode="minify" convertFunction={minifyConvert} />
+        <JsonConvertSection mode="minify" convertFunction={minifyConvert} />
       )}
     </div>
   );

src/pages/JsonTools/useJsonTools.ts

@@ -21,11 +21,6 @@ export interface UseJsonToolsReturn {
   setRightInput: (val: string) => void;
   leftError: string | null;
   rightError: string | null;
-  /** format/yaml/toml/minify 共享的输入内容（已持久化） */
-  input: string;
-  setInput: (val: string) => void;
-  /** input 防抖后的快照，用于格式化/转换计算与持久化 */
-  debouncedInput: string;
   viewMode: ViewMode;
   setViewMode: (mode: ViewMode) => void;
   /** 当前生效的差异结果：宽屏为实时计算，窄屏为手动 Compare 后的结果 */
@@ -53,7 +48,7 @@ export interface UseJsonToolsReturn {
   minifyConvert: ConvertFunction;
 }
 
-export const buildPreview = (raw: string): string => {
+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}（点击展开）` : '（点击展开）';
@@ -64,34 +59,18 @@ export function useJsonTools(): UseJsonToolsReturn {
 
   const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
 
-  const [persistedLeft, setPersistedLeft] = useStorageState('jsonTools/diffLeft', '');
+  const [leftInput, setLeftInputState] = useState('');
-  const [persistedRight, setPersistedRight] = useStorageState('jsonTools/diffRight', '');
+  const [rightInput, setRightInputState] = useState('');
-  const [persistedInput, setPersistedInput] = useStorageState('jsonTools/input', '');
+  const [debouncedLeft, setDebouncedLeft] = useState('');
-
+  const [debouncedRight, setDebouncedRight] = useState('');
-  const [leftInput, setLeftInputState] = useState<string>(persistedLeft);
-  const [rightInput, setRightInputState] = useState<string>(persistedRight);
-  const [input, setInput] = useState<string>(persistedInput);
-  const [debouncedLeft, setDebouncedLeft] = useState<string>(persistedLeft);
-  const [debouncedRight, setDebouncedRight] = useState<string>(persistedRight);
-  const [debouncedInput, setDebouncedInput] = useState<string>(persistedInput);
 
   useEffect(() => {
     const handle = setTimeout(() => {
       setDebouncedLeft(leftInput);
       setDebouncedRight(rightInput);
-      setPersistedLeft(leftInput);
-      setPersistedRight(rightInput);
     }, 250);
     return () => clearTimeout(handle);
-  }, [leftInput, rightInput, setPersistedLeft, setPersistedRight]);
+  }, [leftInput, rightInput]);
-
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedInput(input);
-      setPersistedInput(input);
-    }, 250);
-    return () => clearTimeout(handle);
-  }, [input, setPersistedInput]);
 
   const parseState = useMemo(() => {
     const invalidMsg = '无效的 JSON 格式';
@@ -228,9 +207,6 @@ export function useJsonTools(): UseJsonToolsReturn {
     setRightInput,
     leftError,
     rightError,
-    input,
-    setInput,
-    debouncedInput,
     viewMode: activeViewMode,
     setViewMode,
     activeResult,

src/types/storage.d.ts

@@ -89,12 +89,6 @@ export interface StorageSchema {
   'qrCode/urlExpanded': boolean;
   /** JSON 工具页面当前子模式 */
   'jsonTools/pageMode': JsonToolsPageMode;
-  /** JSON 工具：format/yaml/toml/minify 共享的输入内容 */
-  'jsonTools/input': string;
-  /** JSON 工具：diff 模式左侧输入内容 */
-  'jsonTools/diffLeft': string;
-  /** JSON 工具：diff 模式右侧输入内容 */
-  'jsonTools/diffRight': string;
   /** Base64 转换器页面当前子模式 */
   'base64Converter/pageMode': Base64ConverterPageMode;
   /** Base64 转换器「文件」子模式当前方向 */

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` 返回非空才提示「规则已保存/已更新」。