refactor(json): Consolidate JSON utilities and type definitions

Modified files:
- client/src/components/DynamicJsonForm.tsx
- client/src/components/JsonView.tsx
- client/src/components/ToolsTab.tsx
- client/src/components/__tests__/DynamicJsonForm.test.tsx
- client/src/utils/__tests__/jsonPathUtils.test.ts → client/src/utils/__tests__/jsonUtils.test.ts
- client/src/utils/__tests__/schemaUtils.test.ts
- client/src/utils/jsonPathUtils.ts → client/src/utils/jsonUtils.ts
- client/src/utils/schemaUtils.ts

Descriptions:
- Move JSON type definitions from DynamicJsonForm to centralized jsonUtils
- Consolidate utility functions (getDataType, tryParseJson) into jsonUtils
- Rename jsonPathUtils to jsonUtils for better semantic clarity
- Add comprehensive test coverage for new utility functions
- Update imports across all affected components
- Improve type references consistency throughout the codebase
This commit is contained in:
yushengchen
2025-04-08 09:51:50 +08:00
parent da4e2fa844
commit fe74dbea74
8 changed files with 206 additions and 61 deletions

View File

@@ -1,9 +1,10 @@
import { useState, memo, useMemo, useCallback, useEffect } from "react";
import { JsonValue } from "./DynamicJsonForm";
import type { JsonValue } from "@/utils/jsonUtils";
import clsx from "clsx";
import { Copy, CheckCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useToast } from "@/hooks/use-toast";
import { getDataType, tryParseJson } from "@/utils/jsonUtils";
interface JsonViewProps {
data: unknown;
@@ -13,21 +14,6 @@ interface JsonViewProps {
withCopyButton?: boolean;
}
function tryParseJson(str: string): { success: boolean; data: JsonValue } {
const trimmed = str.trim();
if (
!(trimmed.startsWith("{") && trimmed.endsWith("}")) &&
!(trimmed.startsWith("[") && trimmed.endsWith("]"))
) {
return { success: false, data: str };
}
try {
return { success: true, data: JSON.parse(str) };
} catch {
return { success: false, data: str };
}
}
const JsonView = memo(
({
data,
@@ -119,23 +105,15 @@ interface JsonNodeProps {
const JsonNode = memo(
({ data, name, depth = 0, initialExpandDepth }: JsonNodeProps) => {
const [isExpanded, setIsExpanded] = useState(depth < initialExpandDepth);
const getDataType = (value: JsonValue): string => {
if (Array.isArray(value)) return "array";
if (value === null) return "null";
return typeof value;
};
const dataType = getDataType(data);
const typeStyleMap: Record<string, string> = {
const [typeStyleMap] = useState<Record<string, string>>({
number: "text-blue-600",
boolean: "text-amber-600",
null: "text-purple-600",
undefined: "text-gray-600",
string: "text-green-600 break-all whitespace-pre-wrap",
default: "text-gray-700",
};
});
const dataType = getDataType(data);
const renderCollapsible = (isArray: boolean) => {
const items = isArray