({
className={cn(
'flex-1 transition-all',
SIZE_CLASSES[size],
+ INTERACTIVE_CLASSES,
value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
)}
>
diff --git a/src/components/__tests__/SwitchButtonGroup.test.tsx b/src/components/__tests__/SwitchButtonGroup.test.tsx
index de0492b..1a59c96 100644
--- a/src/components/__tests__/SwitchButtonGroup.test.tsx
+++ b/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-background/50');
+ expect(buttonB).toHaveClass('hover:bg-accent', 'hover:text-accent-foreground');
});
it('点击未选中按钮时应触发 onChange 并传入选中值', () => {
@@ -34,11 +34,12 @@ describe('SwitchButtonGroup 组件', () => {
expect(handleChange).toHaveBeenCalledWith('b');
});
- it('点击已选中按钮时不应触发 onChange', () => {
+ it('点击已选中按钮时仍会触发 onChange 并传回原值', () => {
const handleChange = vi.fn();
render(
);
fireEvent.click(screen.getByRole('button', { name: /选项A/i }));
+ expect(handleChange).toHaveBeenCalledTimes(1);
expect(handleChange).toHaveBeenCalledWith('a');
});
@@ -58,13 +59,6 @@ describe('SwitchButtonGroup 组件', () => {
expect(button).toHaveClass('text-xs');
});
- it('应支持 buttonSx 自定义按钮样式', () => {
- render(
);
-
- const button = screen.getByRole('button', { name: /选项A/i });
- expect(button).toBeInTheDocument();
- });
-
it('应支持 ReactNode 类型的 label', () => {
const nodeOptions = [{ value: 'x', label:
自定义 }];
render(
);
@@ -72,20 +66,6 @@ describe('SwitchButtonGroup 组件', () => {
expect(screen.getByTestId('custom-label')).toBeInTheDocument();
});
- it('默认按钮样式应禁止文字换行', () => {
- render(
);
-
- const button = screen.getByRole('button', { name: /选项A/i });
- expect(button).toHaveClass('whitespace-nowrap');
- });
-
- it('buttonSx 传入时应覆盖默认换行样式', () => {
- render(
);
-
- const button = screen.getByRole('button', { name: /选项A/i });
- expect(button).toBeInTheDocument();
- });
-
describe('number 类型支持', () => {
const numberOptions = [
{ value: 2, label: '2' },
@@ -105,7 +85,7 @@ describe('SwitchButtonGroup 组件', () => {
const button2 = screen.getByRole('button', { name: /^2$/i });
const button4 = screen.getByRole('button', { name: /^4$/i });
- expect(button2).toHaveClass('hover:bg-background/50');
+ expect(button2).toHaveClass('hover:bg-accent', 'hover:text-accent-foreground');
expect(button4).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
});
From 60e74b5383e7f2b9d941abe285712de83edfc733 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <2712495353@qq.com>
Date: Mon, 13 Jul 2026 23:23:49 +0800
Subject: [PATCH 09/12] =?UTF-8?q?feat(json-tools):=20=E5=AE=9E=E7=8E=B0?=
=?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80=E4=B8=8E=E7=AA=84?=
=?UTF-8?q?=E5=B1=8F=E6=89=8B=E5=8A=A8=E6=AF=94=E5=AF=B9=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/TextInputArea.tsx | 18 +-
src/hooks/useMediaQuery.ts | 25 +++
src/pages/JsonTools/__tests__/index.test.tsx | 35 +++-
.../JsonTools/__tests__/useJsonTools.test.ts | 67 ++++++++
.../JsonTools/components/CompareActionBar.tsx | 72 ++++++++
src/pages/JsonTools/components/DiffResult.tsx | 90 +++++++++-
.../JsonTools/components/DiffWorkspace.tsx | 154 ++++++++++++++++++
.../JsonTools/components/JsonDiffPanel.tsx | 76 +++++++++
src/pages/JsonTools/components/JsonTree.tsx | 96 +++++++----
.../__tests__/CompareActionBar.test.tsx | 56 +++++++
.../__tests__/JsonDiffPanel.test.tsx | 56 +++++++
src/pages/JsonTools/index.tsx | 86 +---------
src/pages/JsonTools/useJsonTools.ts | 136 ++++++++++++++--
src/styles/shell.css | 21 +++
14 files changed, 849 insertions(+), 139 deletions(-)
create mode 100644 src/hooks/useMediaQuery.ts
create mode 100644 src/pages/JsonTools/__tests__/useJsonTools.test.ts
create mode 100644 src/pages/JsonTools/components/CompareActionBar.tsx
create mode 100644 src/pages/JsonTools/components/DiffWorkspace.tsx
create mode 100644 src/pages/JsonTools/components/JsonDiffPanel.tsx
create mode 100644 src/pages/JsonTools/components/__tests__/CompareActionBar.test.tsx
create mode 100644 src/pages/JsonTools/components/__tests__/JsonDiffPanel.test.tsx
diff --git a/src/components/TextInputArea.tsx b/src/components/TextInputArea.tsx
index 3af1d16..9e92015 100644
--- a/src/components/TextInputArea.tsx
+++ b/src/components/TextInputArea.tsx
@@ -42,6 +42,12 @@ export interface TextInputAreaProps extends Omit<
title?: string;
externalError?: string;
onClear?: () => void;
+
+ /**
+ * 撑满父容器高度并启用内部滚动（而非按 minRows/maxRows 自动撑高）。
+ * 用于需要固定高度 + 内部滚动的卡片面板。
+ */
+ fill?: boolean;
}
function ActionButton({
@@ -106,6 +112,7 @@ const TextInputArea = forwardRef
((props
title,
externalError,
onClear,
+ fill = false,
...restProps
} = props;
@@ -122,6 +129,7 @@ const TextInputArea = forwardRef((props
useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement);
const adjustHeight = useCallback(() => {
+ if (fill) return;
const textArea = internalRef.current;
if (!textArea) return;
@@ -132,7 +140,7 @@ const TextInputArea = forwardRef((props
const nextHeight = Math.max(textArea.scrollHeight, computedMin);
textArea.style.height = `${Math.min(nextHeight, computedMax)}px`;
- }, [minRows, maxRows]);
+ }, [minRows, maxRows, fill]);
React.useEffect(() => {
adjustHeight();
@@ -204,7 +212,7 @@ const TextInputArea = forwardRef((props
const hasBottomBar = allowCopy || showClear || bottomActions.length > 0;
return (
-
+
{hasTopBar && (
@@ -234,6 +242,7 @@ const TextInputArea = forwardRef
((props
((props
autoFocus={autoFocus}
readOnly={readOnly}
placeholder={placeholder}
- 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"
+ className={cn(
+ '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}
/>
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..54d0447
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,25 @@
+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);
+}
diff --git a/src/pages/JsonTools/__tests__/index.test.tsx b/src/pages/JsonTools/__tests__/index.test.tsx
index 66c0f00..c05e6a0 100644
--- a/src/pages/JsonTools/__tests__/index.test.tsx
+++ b/src/pages/JsonTools/__tests__/index.test.tsx
@@ -1,10 +1,43 @@
import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi, beforeEach } 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(
);
expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
});
+
+ it('窄屏渲染 A/B 数据面板与 Compare 按钮', () => {
+ setWide(false);
+ render(
);
+ 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(
);
+ expect(screen.getByText('原始 JSON')).toBeInTheDocument();
+ expect(screen.getByText('目标 JSON')).toBeInTheDocument();
+ });
});
diff --git a/src/pages/JsonTools/__tests__/useJsonTools.test.ts b/src/pages/JsonTools/__tests__/useJsonTools.test.ts
new file mode 100644
index 0000000..7a96ebc
--- /dev/null
+++ b/src/pages/JsonTools/__tests__/useJsonTools.test.ts
@@ -0,0 +1,67 @@
+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);
+ });
+});
diff --git a/src/pages/JsonTools/components/CompareActionBar.tsx b/src/pages/JsonTools/components/CompareActionBar.tsx
new file mode 100644
index 0000000..fa84cdc
--- /dev/null
+++ b/src/pages/JsonTools/components/CompareActionBar.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { ArrowLeftRight } from 'lucide-react';
+import DiffNavigator from './DiffNavigator';
+import { cn } from '@/lib/utils';
+
+export interface CompareActionBarProps extends React.HTMLAttributes
{
+ 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 (
+
+ {hasCompared ? (
+ resultsVisible ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
-
+
-
+
-
);
@@ -37,12 +108,15 @@ export default function DiffResult({
return (
);
}
@@ -189,7 +263,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',
+ 'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1 before:bg-blue-500 before:content-[""]',
)}
style={{
paddingLeft: `${Math.max(0.5, depth * 1.25)}rem`,
diff --git a/src/pages/JsonTools/components/DiffWorkspace.tsx b/src/pages/JsonTools/components/DiffWorkspace.tsx
new file mode 100644
index 0000000..677c7df
--- /dev/null
+++ b/src/pages/JsonTools/components/DiffWorkspace.tsx
@@ -0,0 +1,154 @@
+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 = (
+
+ setViewMode(v)}
+ options={VIEW_OPTIONS}
+ size="small"
+ />
+
+ );
+
+ if (isWide) {
+ return (
+
+ {viewToggle}
+
+
+
+
+
+
+ {activeResult ? (
+
+ ) : (
+
+ {leftError || rightError
+ ? '请修正上方 JSON 的语法错误以开启实时流式比对'
+ : '输入两侧 JSON 后点击比较'}
+
+ )}
+
+ );
+ }
+
+ const resultsVisible = collapsedA && collapsedB;
+
+ const handleShowResults = () => {
+ if (!collapsedA) toggleCollapseA();
+ if (!collapsedB) toggleCollapseB();
+ };
+
+ return (
+
+
+
+
+
+ {activeResult && resultsVisible ? (
+
+
+
+ ) : null}
+
+ );
+}
diff --git a/src/pages/JsonTools/components/JsonDiffPanel.tsx b/src/pages/JsonTools/components/JsonDiffPanel.tsx
new file mode 100644
index 0000000..dc995ca
--- /dev/null
+++ b/src/pages/JsonTools/components/JsonDiffPanel.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import TextInputArea from '@/components/TextInputArea';
+import { cn } from '@/lib/utils';
+
+export interface JsonDiffPanelProps extends Omit
, 'onChange'> {
+ /** 面板标题，如 "数据 A（原始）" */
+ title: string;
+ placeholder: string;
+ value: string;
+ onChange: (value: string) => void;
+ error?: string | null;
+ /** 是否处于折叠态（Accordion 收起） */
+ collapsed: boolean;
+ onToggleCollapse: () => void;
+ /** 折叠态展示的单行缩略预览文本 */
+ preview: string;
+}
+
+export default function JsonDiffPanel({
+ title,
+ placeholder,
+ value,
+ onChange,
+ error,
+ collapsed,
+ onToggleCollapse,
+ preview,
+ className,
+ ...props
+}: JsonDiffPanelProps) {
+ return (
+
+ {collapsed ? (
+
+ ) : (
+ <>
+
+ {title}
+
+
+
+
+ )}
+
setOverride(expanded ? 'closed' : 'open')}
+ onClick={() => onTogglePath?.(node.path, expanded)}
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,
@@ -171,6 +185,8 @@ const NodeRow = React.memo(
defaultExpandDepth={defaultExpandDepth}
activePath={activePath}
isLastChild={idx === node.children!.length - 1}
+ expandedPaths={expandedPaths}
+ onTogglePath={onTogglePath}
/>
))}
@@ -204,7 +220,7 @@ const NodeRow = React.memo(
{!isRoot && (
{node.key}:
)}
-
+
{formatPrimitive(value)}
{isLastChild ? '' : ','}
@@ -215,33 +231,51 @@ const NodeRow = React.memo(
NodeRow.displayName = 'NodeRow';
-export default function JsonTree({
- node,
- side,
- defaultExpandDepth = 2,
- activePath,
- className,
- ...props
-}: JsonTreeProps) {
- return (
-
-
-
- );
-}
+const JsonTree = React.forwardRef(
+ (
+ {
+ node,
+ side,
+ defaultExpandDepth = 2,
+ activePath,
+ fill = false,
+ expandedPaths,
+ onTogglePath,
+ className,
+ ...props
+ },
+ ref,
+ ) => {
+ return (
+
+ );
+ },
+);
+
+JsonTree.displayName = 'JsonTree';
+
+export default JsonTree;
const summarize = (v: unknown): string => {
if (Array.isArray(v)) return `${v.length} ${v.length === 1 ? 'item' : 'items'}`;
diff --git a/src/pages/JsonTools/components/__tests__/CompareActionBar.test.tsx b/src/pages/JsonTools/components/__tests__/CompareActionBar.test.tsx
new file mode 100644
index 0000000..734fa71
--- /dev/null
+++ b/src/pages/JsonTools/components/__tests__/CompareActionBar.test.tsx
@@ -0,0 +1,56 @@
+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(
+ {}}
+ 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(
+ {}}
+ onNext={() => {}}
+ />,
+ );
+ await user.click(screen.getByRole('button', { name: /Compare A & B/i }));
+ expect(onCompare).toHaveBeenCalled();
+ });
+
+ it('已比较后展示 DiffNavigator（上一处/下一处）', () => {
+ render(
+ {}}
+ hasCompared={true}
+ total={3}
+ currentIndex={1}
+ onPrev={() => {}}
+ onNext={() => {}}
+ />,
+ );
+ expect(screen.getByLabelText('上一个')).toBeInTheDocument();
+ expect(screen.getByLabelText('下一个')).toBeInTheDocument();
+ expect(screen.queryByText('无差异')).not.toBeInTheDocument();
+ });
+});
diff --git a/src/pages/JsonTools/components/__tests__/JsonDiffPanel.test.tsx b/src/pages/JsonTools/components/__tests__/JsonDiffPanel.test.tsx
new file mode 100644
index 0000000..66009cb
--- /dev/null
+++ b/src/pages/JsonTools/components/__tests__/JsonDiffPanel.test.tsx
@@ -0,0 +1,56 @@
+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(
+ {}}
+ collapsed={false}
+ onToggleCollapse={() => {}}
+ preview=""
+ />,
+ );
+ expect(screen.getByText('数据 A（原始）')).toBeInTheDocument();
+ expect(screen.getByPlaceholderText('x')).toBeInTheDocument();
+ });
+
+ it('折叠态渲染预览并隐藏输入框', () => {
+ render(
+ {}}
+ collapsed={true}
+ onToggleCollapse={() => {}}
+ preview="abc（点击展开）"
+ />,
+ );
+ expect(screen.getByText('abc（点击展开）')).toBeInTheDocument();
+ expect(screen.queryByPlaceholderText('x')).not.toBeInTheDocument();
+ });
+
+ it('点击标题可切换折叠', async () => {
+ const user = userEvent.setup();
+ const onToggle = vi.fn();
+ render(
+ {}}
+ collapsed={false}
+ onToggleCollapse={onToggle}
+ preview=""
+ />,
+ );
+ await user.click(screen.getByText('T'));
+ expect(onToggle).toHaveBeenCalled();
+ });
+});
diff --git a/src/pages/JsonTools/index.tsx b/src/pages/JsonTools/index.tsx
index fe44397..f019610 100644
--- a/src/pages/JsonTools/index.tsx
+++ b/src/pages/JsonTools/index.tsx
@@ -1,41 +1,18 @@
-import JsonDiffInput from './components/JsonDiffInput';
-import DiffResult from './components/DiffResult';
-import DiffNavigator from './components/DiffNavigator';
+import DiffWorkspace from './components/DiffWorkspace';
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 {
- pageMode,
- setPageMode,
- leftInput,
- rightInput,
- setLeftInput,
- setRightInput,
- leftError,
- rightError,
- viewMode,
- setViewMode,
- diffResult,
- total,
- currentDiffIndex,
- handlePrev,
- handleNext,
- activePath,
- yamlConvert,
- tomlConvert,
- minifyConvert,
- } = useJsonTools();
+ const tools = useJsonTools();
+ const { pageMode, setPageMode, yamlConvert, tomlConvert, minifyConvert } = tools;
return (
-
+
setPageMode(v)}
@@ -47,62 +24,11 @@ export default function Index() {
{ value: 'minify', label: '压缩' },
]}
size="small"
- className="w-full sm:w-auto"
+ className="w-full shrink-0 sm:w-auto"
/>
{pageMode === 'diff' ? (
-
-
- setViewMode(v)}
- options={[
- { value: 'sideBySide', label: '并排' },
- { value: 'unified', label: '统一' },
- ]}
- size="small"
- />
-
-
-
-
-
-
-
- {diffResult ? (
-
- ) : (
-
- {leftError || rightError
- ? '请修正上方 JSON 的语法错误以开启实时流式比对'
- : '输入两侧 JSON 后点击比较'}
-
- )}
-
diff --git a/src/pages/JsonTools/components/JsonDiffPanel.tsx b/src/pages/JsonTools/components/JsonDiffPanel.tsx
index dc995ca..0c627cf 100644
--- a/src/pages/JsonTools/components/JsonDiffPanel.tsx
+++ b/src/pages/JsonTools/components/JsonDiffPanel.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { ChevronDown, ChevronRight } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
import TextInputArea from '@/components/TextInputArea';
import { cn } from '@/lib/utils';
@@ -10,7 +10,7 @@ export interface JsonDiffPanelProps extends Omit
void;
error?: string | null;
- /** 是否处于折叠态（Accordion 收起） */
+ /** 是否处于折叠态 */
collapsed: boolean;
onToggleCollapse: () => void;
/** 折叠态展示的单行缩略预览文本 */
@@ -32,45 +32,60 @@ export default function JsonDiffPanel({
return (
- {collapsed ? (
-
- ) : (
- <>
-
- {title}
-
-
-
-
- )}
+ {preview}
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
-
setInput('')}
- />
+ const preview = useMemo(() => buildPreview(input), [input]);
- {result?.output ? (
-
+ setInputCollapsed((v) => !v)}
+ preview={preview}
+ >
+ setInput('')}
/>
- ) : (
-
- {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
-
+
+
+ {result?.output && (
+
+
+
)}
-
-
-
-
-
-
-
+
+
@@ -57,7 +61,7 @@ export default function JsonFormatSection() {
setIndentSize(Number(v))}
+ onChange={(v: number) => setIndentSize(Number(v))}
options={[2, 4, 6, 8].map((size) => ({ value: size, label: String(size) }))}
size="small"
/>
@@ -86,29 +90,36 @@ export default function JsonFormatSection() {
-
setInput('')}
- />
-
- {result?.formatted ? (
- setInputCollapsed((v) => !v)}
+ preview={preview}
+ >
+ setInput('')}
/>
- ) : (
-
- {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
-
+
+
+ {result?.formatted && (
+
+
+
)}
);
diff --git a/src/pages/JsonTools/components/JsonResultPanel.tsx b/src/pages/JsonTools/components/JsonResultPanel.tsx
index b0b820f..5098999 100644
--- a/src/pages/JsonTools/components/JsonResultPanel.tsx
+++ b/src/pages/JsonTools/components/JsonResultPanel.tsx
@@ -1,5 +1,6 @@
import { formatBytes } from '@/utils/format';
import { CopyButton } from '@/components/CopyButton';
+import { cn } from '@/lib/utils';
export interface JsonResultPanelProps {
title: string;
@@ -8,6 +9,11 @@ export interface JsonResultPanelProps {
outputBytes: number;
outputSizeLabel?: string;
maxHeight?: string;
+ /**
+ * 撑满父容器剩余高度并启用内部滚动（而非按 maxHeight 截断）。
+ * 用于 popup / sidepanel 等固定高度场景下与折叠输入面板共享垂直空间。
+ */
+ fill?: boolean;
}
export default function JsonResultPanel({
@@ -17,9 +23,15 @@ export default function JsonResultPanel({
outputBytes,
outputSizeLabel = '格式化后大小',
maxHeight = '420px',
+ fill = false,
}: JsonResultPanelProps) {
return (
-
+
@@ -43,8 +55,11 @@ export default function JsonResultPanel({
{content}
diff --git a/src/pages/JsonTools/components/__tests__/JsonFormatSection.test.tsx b/src/pages/JsonTools/components/__tests__/JsonFormatSection.test.tsx
new file mode 100644
index 0000000..75637eb
--- /dev/null
+++ b/src/pages/JsonTools/components/__tests__/JsonFormatSection.test.tsx
@@ -0,0 +1,56 @@
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import JsonFormatSection from '../JsonFormatSection';
+
+describe('JsonFormatSection', () => {
+ it('渲染输入面板标题与缩进/键名排序工具栏', () => {
+ render(
);
+ expect(screen.getByText('JSON 输入')).toBeInTheDocument();
+ expect(screen.getByText('缩进')).toBeInTheDocument();
+ expect(screen.getByText('键名排序')).toBeInTheDocument();
+ });
+
+ it('输入无效 JSON 时不渲染结果面板与占位区', async () => {
+ render(
);
+ const input = screen.getByPlaceholderText('输入需要格式化的 JSON...');
+ fireEvent.change(input, { target: { value: '{ 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(
);
+ const input = screen.getByPlaceholderText('输入需要格式化的 JSON...');
+ fireEvent.change(input, { target: { value: '{"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(
);
+ const input = screen.getByPlaceholderText('输入需要格式化的 JSON...');
+ fireEvent.change(input, { target: { value: '{"a":1}' } });
+ await waitFor(() => {
+ expect(screen.getByText('格式化结果')).toBeInTheDocument();
+ });
+
+ await user.click(screen.getByText('JSON 输入'));
+
+ // 折叠后输入框内容区隐藏
+ await waitFor(() => {
+ expect(input.closest('.opacity-0')).toBeInTheDocument();
+ });
+ // 折叠态展示单行预览
+ expect(screen.getByText('{"a":1}（点击展开）')).toBeInTheDocument();
+ });
+});
diff --git a/src/pages/JsonTools/useJsonTools.ts b/src/pages/JsonTools/useJsonTools.ts
index 842079a..c3e7af5 100644
--- a/src/pages/JsonTools/useJsonTools.ts
+++ b/src/pages/JsonTools/useJsonTools.ts
@@ -48,7 +48,7 @@ export interface UseJsonToolsReturn {
minifyConvert: ConvertFunction;
}
-const buildPreview = (raw: string): string => {
+export 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}（点击展开）` : '（点击展开）';
From 10817c3aac2e9914f18d9783466f0b5ea63cc6e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <2712495353@qq.com>
Date: Tue, 14 Jul 2026 20:16:09 +0800
Subject: [PATCH 12/12] =?UTF-8?q?refactor(json-tools):=20=E9=87=8D?=
=?UTF-8?q?=E6=9E=84=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86=E9=80=BB=E8=BE=91?=
=?UTF-8?q?=E5=B9=B6=E5=AE=9E=E7=8E=B0=E8=BE=93=E5=85=A5=E5=86=85=E5=AE=B9?=
=?UTF-8?q?=E6=8C=81=E4=B9=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../JsonTools/__tests__/useJsonTools.test.ts | 11 ++++++
.../components/JsonConvertSection.tsx | 16 +++------
.../components/JsonFormatSection.tsx | 20 +++++------
.../__tests__/JsonFormatSection.test.tsx | 32 ++++++++++-------
src/pages/JsonTools/index.tsx | 8 ++---
src/pages/JsonTools/useJsonTools.ts | 34 ++++++++++++++++---
src/types/storage.d.ts | 6 ++++
7 files changed, 82 insertions(+), 45 deletions(-)
diff --git a/src/pages/JsonTools/__tests__/useJsonTools.test.ts b/src/pages/JsonTools/__tests__/useJsonTools.test.ts
index 7a96ebc..d84563e 100644
--- a/src/pages/JsonTools/__tests__/useJsonTools.test.ts
+++ b/src/pages/JsonTools/__tests__/useJsonTools.test.ts
@@ -64,4 +64,15 @@ 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}');
+ });
});
diff --git a/src/pages/JsonTools/components/JsonConvertSection.tsx b/src/pages/JsonTools/components/JsonConvertSection.tsx
index 86298b1..0d03eeb 100644
--- a/src/pages/JsonTools/components/JsonConvertSection.tsx
+++ b/src/pages/JsonTools/components/JsonConvertSection.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
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 } from '../useJsonTools';
+import { buildPreview, type UseJsonToolsReturn } from '../useJsonTools';
import type { ConvertFunction, ConvertResult } from '../types';
const CONVERT_LABELS: Record
= {
@@ -23,29 +23,23 @@ const CONVERT_LABELS: Record {
+ tools: UseJsonToolsReturn;
mode: string;
convertFunction: ConvertFunction;
}
export default function JsonConvertSection({
+ tools,
mode,
convertFunction,
className,
...props
}: JsonConvertSectionProps) {
- const [input, setInput] = useState('');
- const [debouncedInput, setDebouncedInput] = useState('');
+ const { input, setInput, debouncedInput } = tools;
const [inputCollapsed, setInputCollapsed] = useState(false);
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]);
diff --git a/src/pages/JsonTools/components/JsonFormatSection.tsx b/src/pages/JsonTools/components/JsonFormatSection.tsx
index cac1ec0..094d8d3 100644
--- a/src/pages/JsonTools/components/JsonFormatSection.tsx
+++ b/src/pages/JsonTools/components/JsonFormatSection.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
import {
formatJson,
type JsonFormatOptions,
@@ -11,22 +11,18 @@ import CollapsiblePanel from './CollapsiblePanel';
import JsonResultPanel from './JsonResultPanel';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
-import { buildPreview } from '../useJsonTools';
+import { buildPreview, type UseJsonToolsReturn } from '../useJsonTools';
-export default function JsonFormatSection() {
- const [input, setInput] = useState('');
- const [debouncedInput, setDebouncedInput] = useState('');
+interface JsonFormatSectionProps {
+ tools: UseJsonToolsReturn;
+}
+
+export default function JsonFormatSection({ tools }: JsonFormatSectionProps) {
+ const { input, setInput, debouncedInput } = tools;
const [indentSize, setIndentSize] = useState(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);
}, [debouncedInput]);
diff --git a/src/pages/JsonTools/components/__tests__/JsonFormatSection.test.tsx b/src/pages/JsonTools/components/__tests__/JsonFormatSection.test.tsx
index 75637eb..cc07842 100644
--- a/src/pages/JsonTools/components/__tests__/JsonFormatSection.test.tsx
+++ b/src/pages/JsonTools/components/__tests__/JsonFormatSection.test.tsx
@@ -1,20 +1,31 @@
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+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 ;
+}
describe('JsonFormatSection', () => {
it('渲染输入面板标题与缩进/键名排序工具栏', () => {
- render();
+ render();
expect(screen.getByText('JSON 输入')).toBeInTheDocument();
expect(screen.getByText('缩进')).toBeInTheDocument();
expect(screen.getByText('键名排序')).toBeInTheDocument();
});
it('输入无效 JSON 时不渲染结果面板与占位区', async () => {
- render();
- const input = screen.getByPlaceholderText('输入需要格式化的 JSON...');
- fireEvent.change(input, { target: { value: '{ invalid json ' } });
+ render();
await waitFor(() => {
expect(screen.queryByText('格式化结果')).not.toBeInTheDocument();
});
@@ -25,9 +36,7 @@ describe('JsonFormatSection', () => {
});
it('输入有效 JSON 后渲染格式化结果面板', async () => {
- render();
- const input = screen.getByPlaceholderText('输入需要格式化的 JSON...');
- fireEvent.change(input, { target: { value: '{"a":1,"b":2}' } });
+ render();
await waitFor(() => {
expect(screen.getByText('格式化结果')).toBeInTheDocument();
});
@@ -37,20 +46,17 @@ describe('JsonFormatSection', () => {
it('点击标题可折叠输入面板', async () => {
const user = userEvent.setup();
- render();
- const input = screen.getByPlaceholderText('输入需要格式化的 JSON...');
- fireEvent.change(input, { target: { value: '{"a":1}' } });
+ render();
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();
});
});
diff --git a/src/pages/JsonTools/index.tsx b/src/pages/JsonTools/index.tsx
index f019610..9fb13a8 100644
--- a/src/pages/JsonTools/index.tsx
+++ b/src/pages/JsonTools/index.tsx
@@ -30,13 +30,13 @@ export default function Index() {
{pageMode === 'diff' ? (
) : pageMode === 'format' ? (
-
+
) : pageMode === 'yaml' ? (
-
+
) : pageMode === 'toml' ? (
-
+
) : (
-
+
)}
);
diff --git a/src/pages/JsonTools/useJsonTools.ts b/src/pages/JsonTools/useJsonTools.ts
index c3e7af5..604601b 100644
--- a/src/pages/JsonTools/useJsonTools.ts
+++ b/src/pages/JsonTools/useJsonTools.ts
@@ -21,6 +21,11 @@ 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 后的结果 */
@@ -59,18 +64,34 @@ export function useJsonTools(): UseJsonToolsReturn {
const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
- const [leftInput, setLeftInputState] = useState('');
- const [rightInput, setRightInputState] = useState('');
- const [debouncedLeft, setDebouncedLeft] = useState('');
- const [debouncedRight, setDebouncedRight] = useState('');
+ const [persistedLeft, setPersistedLeft] = useStorageState('jsonTools/diffLeft', '');
+ const [persistedRight, setPersistedRight] = useStorageState('jsonTools/diffRight', '');
+ const [persistedInput, setPersistedInput] = useStorageState('jsonTools/input', '');
+
+ const [leftInput, setLeftInputState] = useState
(persistedLeft);
+ const [rightInput, setRightInputState] = useState(persistedRight);
+ const [input, setInput] = useState(persistedInput);
+ const [debouncedLeft, setDebouncedLeft] = useState(persistedLeft);
+ const [debouncedRight, setDebouncedRight] = useState(persistedRight);
+ const [debouncedInput, setDebouncedInput] = useState(persistedInput);
useEffect(() => {
const handle = setTimeout(() => {
setDebouncedLeft(leftInput);
setDebouncedRight(rightInput);
+ setPersistedLeft(leftInput);
+ setPersistedRight(rightInput);
}, 250);
return () => clearTimeout(handle);
- }, [leftInput, rightInput]);
+ }, [leftInput, rightInput, setPersistedLeft, setPersistedRight]);
+
+ useEffect(() => {
+ const handle = setTimeout(() => {
+ setDebouncedInput(input);
+ setPersistedInput(input);
+ }, 250);
+ return () => clearTimeout(handle);
+ }, [input, setPersistedInput]);
const parseState = useMemo(() => {
const invalidMsg = '无效的 JSON 格式';
@@ -207,6 +228,9 @@ export function useJsonTools(): UseJsonToolsReturn {
setRightInput,
leftError,
rightError,
+ input,
+ setInput,
+ debouncedInput,
viewMode: activeViewMode,
setViewMode,
activeResult,
diff --git a/src/types/storage.d.ts b/src/types/storage.d.ts
index eb906de..7fb43e1 100644
--- a/src/types/storage.d.ts
+++ b/src/types/storage.d.ts
@@ -89,6 +89,12 @@ 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 转换器「文件」子模式当前方向 */