From 016173a9c5808ee61d432b810497d41c8548cff5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= Date: Wed, 10 Jun 2026 20:39:40 +0800 Subject: [PATCH] =?UTF-8?q?refactor(JsonTools):=20=E8=A7=84=E8=8C=83?= =?UTF-8?q?=E5=8C=96=E9=A1=B5=E9=9D=A2=E7=BB=84=E4=BB=B6=E7=9B=AE=E5=BD=95?= =?UTF-8?q?=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将子组件移至 components/ 子目录（JsonDiffInput、DiffResult、JsonFormatSection、JsonConvertSection、DiffNavigator、JsonTree） - 将 diffEngine.ts 工具函数移至 src/utils/ - 提取 ConvertFunction/ConvertResult 类型到 types.ts，解决循环依赖 - 创建 __tests__/ 目录结构 - 更新所有相关导入路径 Co-authored-by: Cursor --- src/pages/JsonTools/__tests__/index.test.tsx | 11 +++++++++++ .../JsonTools/{ => components}/DiffNavigator.tsx | 0 src/pages/JsonTools/{ => components}/DiffResult.tsx | 2 +- .../JsonTools/{ => components}/JsonConvertSection.tsx | 9 +-------- .../JsonTools/{ => components}/JsonDiffInput.tsx | 0 .../JsonTools/{ => components}/JsonFormatSection.tsx | 0 src/pages/JsonTools/{ => components}/JsonTree.tsx | 2 +- src/pages/JsonTools/index.tsx | 10 +++++----- src/pages/JsonTools/types.ts | 10 ++++++++++ src/pages/JsonTools/useJsonTools.ts | 5 ++--- src/utils/__tests__/diffEngine.test.ts | 2 +- src/{pages/JsonTools => utils}/diffEngine.ts | 2 +- 12 files changed, 33 insertions(+), 20 deletions(-) create mode 100644 src/pages/JsonTools/__tests__/index.test.tsx rename src/pages/JsonTools/{ => components}/DiffNavigator.tsx (100%) rename src/pages/JsonTools/{ => components}/DiffResult.tsx (99%) rename src/pages/JsonTools/{ => components}/JsonConvertSection.tsx (96%) rename src/pages/JsonTools/{ => components}/JsonDiffInput.tsx (100%) rename src/pages/JsonTools/{ => components}/JsonFormatSection.tsx (100%) rename src/pages/JsonTools/{ => components}/JsonTree.tsx (99%) rename src/{pages/JsonTools => utils}/diffEngine.ts (98%) diff --git a/src/pages/JsonTools/__tests__/index.test.tsx b/src/pages/JsonTools/__tests__/index.test.tsx new file mode 100644 index 0000000..78ef06b --- /dev/null +++ b/src/pages/JsonTools/__tests__/index.test.tsx @@ -0,0 +1,11 @@ +import { render, screen } from '@testing-library/react'; +import { describe, it, expect } from 'vitest'; +import Index from '../index'; + +describe('JsonTools 页面', () => { + it('应该渲染页面标题', () => { + render(); + // 基本渲染测试 + expect(screen.getByRole('button')).toBeInTheDocument(); + }); +}); diff --git a/src/pages/JsonTools/DiffNavigator.tsx b/src/pages/JsonTools/components/DiffNavigator.tsx similarity index 100% rename from src/pages/JsonTools/DiffNavigator.tsx rename to src/pages/JsonTools/components/DiffNavigator.tsx diff --git a/src/pages/JsonTools/DiffResult.tsx b/src/pages/JsonTools/components/DiffResult.tsx similarity index 99% rename from src/pages/JsonTools/DiffResult.tsx rename to src/pages/JsonTools/components/DiffResult.tsx index 58cc318..c7b9397 100644 --- a/src/pages/JsonTools/DiffResult.tsx +++ b/src/pages/JsonTools/components/DiffResult.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useI18n } from '@/utils/chromeI18n'; import { cn } from '@/lib/utils'; import JsonTree from './JsonTree'; -import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types'; +import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from '../types'; export interface DiffResultProps extends React.HTMLAttributes { result: DiffResultType; diff --git a/src/pages/JsonTools/JsonConvertSection.tsx b/src/pages/JsonTools/components/JsonConvertSection.tsx similarity index 96% rename from src/pages/JsonTools/JsonConvertSection.tsx rename to src/pages/JsonTools/components/JsonConvertSection.tsx index 4218aff..b1a4ef8 100644 --- a/src/pages/JsonTools/JsonConvertSection.tsx +++ b/src/pages/JsonTools/components/JsonConvertSection.tsx @@ -5,14 +5,7 @@ import { CopyButton } from '@/components/CopyButton'; import TextInputArea from '@/components/TextInputArea'; import { validateJson } from '@/utils/jsonFormatter'; import { cn } from '@/lib/utils'; - -export interface ConvertResult { - output: string; - originalBytes: number; - outputBytes: number; -} - -export type ConvertFunction = (text: string) => ConvertResult; +import type { ConvertFunction, ConvertResult } from '../types'; interface JsonConvertSectionProps extends React.HTMLAttributes { translationPrefix: string; diff --git a/src/pages/JsonTools/JsonDiffInput.tsx b/src/pages/JsonTools/components/JsonDiffInput.tsx similarity index 100% rename from src/pages/JsonTools/JsonDiffInput.tsx rename to src/pages/JsonTools/components/JsonDiffInput.tsx diff --git a/src/pages/JsonTools/JsonFormatSection.tsx b/src/pages/JsonTools/components/JsonFormatSection.tsx similarity index 100% rename from src/pages/JsonTools/JsonFormatSection.tsx rename to src/pages/JsonTools/components/JsonFormatSection.tsx diff --git a/src/pages/JsonTools/JsonTree.tsx b/src/pages/JsonTools/components/JsonTree.tsx similarity index 99% rename from src/pages/JsonTools/JsonTree.tsx rename to src/pages/JsonTools/components/JsonTree.tsx index ac510d0..0641979 100644 --- a/src/pages/JsonTools/JsonTree.tsx +++ b/src/pages/JsonTools/components/JsonTree.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; import { ChevronDown, ChevronRight } from 'lucide-react'; // 用正统的矢量箭头平替原生的字符 '▾' '▸' -import type { DiffNode, DiffType } from './types'; +import type { DiffNode, DiffType } from '../types'; import { cn } from '@/lib/utils'; export type TreeSide = 'left' | 'right'; diff --git a/src/pages/JsonTools/index.tsx b/src/pages/JsonTools/index.tsx index 359b851..b0ac7e7 100644 --- a/src/pages/JsonTools/index.tsx +++ b/src/pages/JsonTools/index.tsx @@ -1,9 +1,9 @@ import { useI18n } from '@/utils/chromeI18n'; -import JsonDiffInput from './JsonDiffInput'; -import DiffResult from './DiffResult'; -import DiffNavigator from './DiffNavigator'; -import JsonFormatSection from './JsonFormatSection'; -import JsonConvertSection from './JsonConvertSection'; +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 { useJsonTools } from './useJsonTools'; import type { JsonToolsPageMode } from '@/types/storage'; diff --git a/src/pages/JsonTools/types.ts b/src/pages/JsonTools/types.ts index 93063ce..3fc6a9e 100644 --- a/src/pages/JsonTools/types.ts +++ b/src/pages/JsonTools/types.ts @@ -53,3 +53,13 @@ export interface DiffResult { /** 差异核心总计数（等价于 diffPaths.length），注入 tabular-nums 配合渲染 */ diffCount: number; } + +/** JSON 转换结果 */ +export interface ConvertResult { + output: string; + originalBytes: number; + outputBytes: number; +} + +/** JSON 转换函数类型 */ +export type ConvertFunction = (text: string) => ConvertResult; diff --git a/src/pages/JsonTools/useJsonTools.ts b/src/pages/JsonTools/useJsonTools.ts index 57d91e2..b576319 100644 --- a/src/pages/JsonTools/useJsonTools.ts +++ b/src/pages/JsonTools/useJsonTools.ts @@ -1,14 +1,13 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { useI18n } from '@/utils/chromeI18n'; import { useStorageState } from '@/utils/useStorageState'; -import { diffJson } from './diffEngine'; +import { diffJson } from '@/utils/diffEngine'; import { jsonToYaml } from '@/utils/jsonToYaml'; import { jsonToToml } from '@/utils/jsonToToml'; import { minifyJson } from '@/utils/jsonFormatter'; import { isValidPageMode, tryParse } from './constants'; import type { JsonToolsPageMode } from '@/types/storage'; -import type { ConvertFunction } from './JsonConvertSection'; -import type { ViewMode } from './types'; +import type { ConvertFunction, ViewMode } from './types'; export interface UseJsonToolsReturn { pageMode: JsonToolsPageMode; diff --git a/src/utils/__tests__/diffEngine.test.ts b/src/utils/__tests__/diffEngine.test.ts index e874794..0d39b4c 100644 --- a/src/utils/__tests__/diffEngine.test.ts +++ b/src/utils/__tests__/diffEngine.test.ts @@ -1,5 +1,5 @@ import { describe, it, expect } from 'vitest'; -import { diffJson } from '../../pages/JsonTools/diffEngine'; +import { diffJson } from '../diffEngine'; describe('diffJson', () => { it('should detect added property', () => { diff --git a/src/pages/JsonTools/diffEngine.ts b/src/utils/diffEngine.ts similarity index 98% rename from src/pages/JsonTools/diffEngine.ts rename to src/utils/diffEngine.ts index cb4b720..93c11b6 100644 --- a/src/pages/JsonTools/diffEngine.ts +++ b/src/utils/diffEngine.ts @@ -1,4 +1,4 @@ -import type { DiffNode, DiffResult, DiffType } from './types'; +import type { DiffNode, DiffResult, DiffType } from '@/pages/JsonTools/types'; const ROOT_PATH = '$'; const SENTINEL = Symbol('missing');