rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: 统一中文文案并简化组件结构，提升代码可读性

Browse Source 
移除 chrome.i18n 后，将各功能页面、布局与工具模块的 UI 文案改为内联中文；
删除冗余注释与过度抽象（如 ToolCard、StatCard），精简 props 与状态管理；
同步优化 JsonTools、StorageCleaner、Timestamp、TestDataGenerator、Dashboard、
Base64Converter、RightClickRestorer、TextStatistics、TopBar、RouterProvider、
ThemeModeProvider 及生成器库与 utils 工具文件。
This commit is contained in:
雨霖铃
2026-06-27 10:49:36 +08:00
parent f3a9838017
commit d38bafe237
85 changed files with 324 additions and 864 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/JsonTools/__tests__/index.test.tsx
-1
View File
@@ -5,7 +5,6 @@ import Index from '../index';
describe('JsonTools 页面', () => {
it('应该渲染模式切换按钮', () => {
render(<Index />);
// 基本渲染测试：页面含多个模式切换按钮，应至少渲染一个
expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
});
});
src/pages/JsonTools/components/DiffNavigator.tsx
+3 -5
View File
@@ -30,7 +30,7 @@ export default function DiffNavigator({
)}
{...props}
>
<span className="text-xs font-semibold text-muted-foreground/90">{'无差异'}</span>
<span className="text-xs font-semibold text-muted-foreground/90">无差异</span>
</div>
);
}
@@ -43,11 +43,10 @@ export default function DiffNavigator({
)}
{...props}
>
{/* 上一处差异按钮 */}
<button
type="button"
disabled={isFirst}
aria-label={'上一个'}
aria-label="上一个"
onClick={onPrev}
className={cn(
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
@@ -63,11 +62,10 @@ export default function DiffNavigator({
{total}
</span>
{/* 下一处差异按钮 */}
<button
type="button"
disabled={isLast}
aria-label={'下一个'}
aria-label="下一个"
onClick={onNext}
className={cn(
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
src/pages/JsonTools/components/DiffResult.tsx
+2 -3
View File
@@ -23,11 +23,11 @@ export default function DiffResult({
{...props}
>
<div className="flex-1 min-w-0">
<SectionLabel text={'原始 JSON'} />
<SectionLabel text="原始 JSON" />
<JsonTree node={result.root} side="left" activePath={activePath} />
</div>
<div className="flex-1 min-w-0">
<SectionLabel text={'目标 JSON'} />
<SectionLabel text="目标 JSON" />
<JsonTree node={result.root} side="right" activePath={activePath} />
</div>
</div>
@@ -133,7 +133,6 @@ const UnifiedView = ({ node, depth, activePath }: UnifiedViewProps) => {
);
}
// 容器节点整块渲染处理
if (node.type === 'added') {
return (
<UnifiedRow
src/pages/JsonTools/components/JsonConvertSection.tsx
+12 -23
View File
@@ -28,12 +28,12 @@ const CONVERT_LABELS: Record<
};
interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
translationPrefix: string;
mode: string;
convertFunction: ConvertFunction;
}
export default function JsonConvertSection({
translationPrefix,
mode,
convertFunction,
className,
...props
@@ -41,10 +41,8 @@ export default function JsonConvertSection({
const [input, setInput] = useState('');
const [debouncedInput, setDebouncedInput] = useState('');
const pk = translationPrefix;
const labels = CONVERT_LABELS[pk] || CONVERT_LABELS.yaml;
const labels = CONVERT_LABELS[mode] ?? CONVERT_LABELS.yaml;
// Debounce input
useEffect(() => {
const handle = setTimeout(() => {
setDebouncedInput(input);
@@ -56,33 +54,25 @@ export default function JsonConvertSection({
return validateJson(debouncedInput);
}, [debouncedInput]);
const conversionPipeline = useMemo(() => {
const { result, runtimeError } = useMemo((): {
result: ConvertResult | null;
runtimeError: string | null;
} => {
const trimmed = debouncedInput.trim();
if (!trimmed || error) return null;
if (!trimmed || error) return { result: null, runtimeError: null };
try {
return convertFunction(debouncedInput);
return { result: convertFunction(debouncedInput), runtimeError: null };
} catch (e) {
// 捕获可能从外部转换器（如 YAML.stringify）中抛出的底层异常
return {
isRuntimeError: true,
errorMessage: e instanceof Error ? e.message : String(e),
result: null,
runtimeError: e instanceof Error ? e.message : String(e),
};
}
}, [debouncedInput, error, convertFunction]);
const runtimeError =
conversionPipeline && 'isRuntimeError' in conversionPipeline
? conversionPipeline.errorMessage
: null;
const result =
conversionPipeline && !('isRuntimeError' in conversionPipeline)
? (conversionPipeline as ConvertResult)
: null;
return (
<div className={cn('w-full flex flex-col gap-4', className)} {...props}>
{/* 输入区 */}
<TextInputArea
placeholder={labels.inputPlaceholder}
value={input}
@@ -95,8 +85,7 @@ export default function JsonConvertSection({
onClear={() => setInput('')}
/>
{/* Result display */}
{result && result.output ? (
{result?.output ? (
<JsonResultPanel
title={labels.outputLabel}
content={result.output}
src/pages/JsonTools/components/JsonFormatSection.tsx
+12 -25
View File
@@ -18,7 +18,6 @@ export default function JsonFormatSection() {
const [indentSize, setIndentSize] = useState<number>(2);
const [sortKeys, setSortKeys] = useState(false);
// Debounce input
useEffect(() => {
const handle = setTimeout(() => {
setDebouncedInput(input);
@@ -30,40 +29,31 @@ export default function JsonFormatSection() {
return validateJson(debouncedInput);
}, [debouncedInput]);
// Real-time formatting pipeline
const formattedPipeline = useMemo(() => {
const { result, runtimeError } = useMemo((): {
result: JsonFormatResult | null;
runtimeError: string | null;
} => {
const trimmed = debouncedInput.trim();
if (!trimmed || error) return null;
if (!trimmed || error) return { result: null, runtimeError: null };
try {
const options: JsonFormatOptions = { indentSize, sortKeys };
return formatJson(debouncedInput, options);
return { result: formatJson(debouncedInput, options), runtimeError: null };
} catch (e) {
return {
isRuntimeError: true,
errorMessage: e instanceof SyntaxError ? e.message : String(e),
result: null,
runtimeError: e instanceof SyntaxError ? e.message : String(e),
};
}
}, [debouncedInput, error, indentSize, sortKeys]);
const runtimeError =
formattedPipeline && 'isRuntimeError' in formattedPipeline
? formattedPipeline.errorMessage
: null;
const result =
formattedPipeline && !('isRuntimeError' in formattedPipeline)
? (formattedPipeline as JsonFormatResult)
: null;
return (
<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">
<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">
{'缩进'}
缩进
</span>
<SwitchButtonGroup
value={indentSize}
@@ -75,7 +65,6 @@ export default function JsonFormatSection() {
<div className="h-4 w-px bg-border/60" />
{/* 键名排序区 */}
<div
onClick={() => setSortKeys(!sortKeys)}
className="flex items-center gap-2 cursor-pointer select-none group py-1"
@@ -91,15 +80,14 @@ export default function JsonFormatSection() {
htmlFor="sort-keys-checkbox"
className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
>
{'键名排序'}
键名排序
</Label>
</div>
</div>
</div>
{/* 满血版输入终端 */}
<TextInputArea
placeholder={'输入需要格式化的 JSON...'}
placeholder="输入需要格式化的 JSON..."
value={input}
onChange={setInput}
externalError={error || runtimeError || undefined}
@@ -110,8 +98,7 @@ export default function JsonFormatSection() {
onClear={() => setInput('')}
/>
{/* 格式化结果流面板展示 */}
{result && result.formatted ? (
{result?.formatted ? (
<JsonResultPanel
title="格式化结果"
content={result.formatted}
src/pages/JsonTools/components/JsonResultPanel.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export default function JsonResultPanel({
<div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
<span>
{'原始大小'}:{' '}
原始大小:{' '}
<span className="font-semibold text-foreground/80">{formatBytes(originalBytes)}</span>
</span>
<span className="text-border/60">|</span>
src/pages/JsonTools/components/JsonTree.tsx
+2 -10
View File
@@ -1,5 +1,5 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { ChevronDown, ChevronRight } from 'lucide-react'; // 用正统的矢量箭头平替原生的字符 '▾' '▸'
import { ChevronDown, ChevronRight } from 'lucide-react';
import type { DiffNode, DiffType } from '../types';
import { cn } from '@/lib/utils';
@@ -82,14 +82,12 @@ const NodeRow = React.memo(
? false
: onActivePath || depth < defaultExpandDepth;
// 当激活路径精准定位到本行时，平滑滚动至容器中心
useEffect(() => {
if (activePath === node.path) {
rowRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}, [activePath, node.path]);
// 占位空行分支：必须加 h-[22px] 锁定绝对等高，防止两侧文本高度塌陷发生高低错位
if (!shouldRenderOnSide(node.type, side)) {
return (
<div
@@ -124,7 +122,6 @@ const NodeRow = React.memo(
return (
<div ref={rowRef} className="w-full flex flex-col">
{/* 大容器开端行 */}
<div
onClick={() => setOverride(expanded ? 'closed' : 'open')}
className={cn(
@@ -135,7 +132,6 @@ const NodeRow = React.memo(
)}
style={indentStyle}
>
{/* 折叠小箭头：升级为精巧的 Lucide SVG 矢量微动效 */}
<span className="w-3.5 h-3.5 flex items-center justify-center text-muted-foreground/80 shrink-0">
{expanded ? (
<ChevronDown className="h-3 w-3" />
@@ -164,7 +160,6 @@ const NodeRow = React.memo(
)}
</div>
{/* 容器子节点递归区 */}
{expanded && (
<div className={indentClass}>
{node.children.map((child, idx) => (
@@ -181,7 +176,6 @@ const NodeRow = React.memo(
</div>
)}
{/* 大容器收尾行 */}
{expanded && (
<div
className="text-muted-foreground/80 font-mono text-xs py-0.5 h-[22px] leading-relaxed"
@@ -195,7 +189,6 @@ const NodeRow = React.memo(
);
}
// 叶子数据行分支
return (
<div
ref={rowRef}
@@ -207,7 +200,7 @@ const NodeRow = React.memo(
)}
style={indentStyle}
>
<span className="w-3.5 shrink-0" /> {/* 与上方的折叠键轴线严格对齐 */}
<span className="w-3.5 shrink-0" />
{!isRoot && (
<span className="text-foreground/90 font-bold tracking-tight">{node.key}:</span>
)}
@@ -231,7 +224,6 @@ export default function JsonTree({
...props
}: JsonTreeProps) {
return (
/* 最外层承载器：统一收拢至标准的 bg-card 与等宽 tabular-nums 控制轴 */
<div
className={cn(
'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',
src/pages/JsonTools/index.tsx
+7 -7
View File
@@ -66,16 +66,16 @@ export default function Index() {
<div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
<JsonDiffInput
label={'原始 JSON'}
placeholder={'输入原始 JSON...'}
label="原始 JSON"
placeholder="输入原始 JSON..."
value={leftInput}
onChange={setLeftInput}
error={leftError}
minRows={9}
/>
<JsonDiffInput
label={'目标 JSON'}
placeholder={'输入目标 JSON...'}
label="目标 JSON"
placeholder="输入目标 JSON..."
value={rightInput}
onChange={setRightInput}
error={rightError}
@@ -106,11 +106,11 @@ export default function Index() {
) : pageMode === 'format' ? (
<JsonFormatSection />
) : pageMode === 'yaml' ? (
<JsonConvertSection translationPrefix="yaml" convertFunction={yamlConvert} />
<JsonConvertSection mode="yaml" convertFunction={yamlConvert} />
) : pageMode === 'toml' ? (
<JsonConvertSection translationPrefix="toml" convertFunction={tomlConvert} />
<JsonConvertSection mode="toml" convertFunction={tomlConvert} />
) : (
<JsonConvertSection translationPrefix="minify" convertFunction={minifyConvert} />
<JsonConvertSection mode="minify" convertFunction={minifyConvert} />
)}
</div>
);
src/pages/JsonTools/useJsonTools.ts
-7
View File
@@ -11,7 +11,6 @@ import type { ConvertFunction, ViewMode } from './types';
export interface UseJsonToolsReturn {
pageMode: JsonToolsPageMode;
setPageMode: (mode: JsonToolsPageMode) => void;
// Diff mode state
leftInput: string;
rightInput: string;
setLeftInput: (val: string) => void;
@@ -26,7 +25,6 @@ export interface UseJsonToolsReturn {
handlePrev: () => void;
handleNext: () => void;
activePath: string | undefined;
// Convert functions
yamlConvert: ConvertFunction;
tomlConvert: ConvertFunction;
minifyConvert: ConvertFunction;
@@ -35,13 +33,11 @@ export interface UseJsonToolsReturn {
export function useJsonTools(): UseJsonToolsReturn {
const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
// Diff inputs
const [leftInput, setLeftInput] = useState('');
const [rightInput, setRightInput] = useState('');
const [debouncedLeft, setDebouncedLeft] = useState('');
const [debouncedRight, setDebouncedRight] = useState('');
// Debounce
useEffect(() => {
const handle = setTimeout(() => {
setDebouncedLeft(leftInput);
@@ -50,7 +46,6 @@ export function useJsonTools(): UseJsonToolsReturn {
return () => clearTimeout(handle);
}, [leftInput, rightInput]);
// Parse debounced inputs
const parseState = useMemo(() => {
const invalidMsg = '无效的 JSON 格式';
return {
@@ -65,7 +60,6 @@ export function useJsonTools(): UseJsonToolsReturn {
const [viewMode, setViewMode] = useState<ViewMode>('sideBySide');
const [currentDiffIndex, setCurrentDiffIndex] = useState(0);
// Real-time diff computation
const diffResult = useMemo(() => {
const { left, right } = parseState;
if (left.error || right.error || debouncedLeft.trim() === '' || debouncedRight.trim() === '') {
@@ -88,7 +82,6 @@ export function useJsonTools(): UseJsonToolsReturn {
const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
// Convert functions
const yamlConvert: ConvertFunction = useCallback((text: string) => {
const r = jsonToYaml(text);
return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };