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

refactor(pages): apply UI+Hook separation and unify component naming

Browse Source 
- Dashboard, RightClickRestorer: rename page component to Index
- Jwt: extract useJwt.ts hook + JwtSection.tsx sub-component (127→76 lines)
- TextStatistics: extract useTextStatistics.ts hook (63→48 lines)
- JsonTools: extract useJsonTools.ts hook + constants.ts (199→109 lines)
- All pages now follow CODING_STANDARDS.md §11 pattern
This commit is contained in:
雨霖铃
2026-05-28 23:18:58 +08:00
parent e33761381d
commit 4f7e402dba
10 changed files with 307 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Dashboard/index.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { useMemo } from 'react';
import { useI18n } from '@/utils/chromeI18n';
import { cn } from '@/lib/utils';
export default function DashboardPage() {
export default function Index() {
const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
const { t } = useI18n(['features']);
src/pages/JsonTools/constants.ts
+27
View File
@@ -0,0 +1,27 @@
import type { JsonToolsPageMode } from '@/types/storage';
export const VALID_PAGE_MODES: readonly JsonToolsPageMode[] = [
'diff',
'format',
'yaml',
'toml',
'minify',
];
export const isValidPageMode = (val: unknown): val is JsonToolsPageMode =>
typeof val === 'string' && (VALID_PAGE_MODES as readonly string[]).includes(val);
export interface ParseState {
value: unknown;
error: string | null;
}
export const tryParse = (raw: string, invalidMsg: string): ParseState => {
const trimmed = raw.trim();
if (!trimmed) return { value: undefined, error: null };
try {
return { value: JSON.parse(trimmed), error: null };
} catch {
return { value: undefined, error: invalidMsg };
}
};
src/pages/JsonTools/index.tsx
+25 -105
View File
@@ -1,113 +1,39 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useI18n } from '@/utils/chromeI18n';
import JsonDiffInput from './JsonDiffInput';
import DiffResult from './DiffResult';
import DiffNavigator from './DiffNavigator';
import JsonFormatSection from './JsonFormatSection';
import type { ConvertFunction } from './JsonConvertSection';
import JsonConvertSection from './JsonConvertSection';
import { diffJson } from './diffEngine';
import { jsonToYaml } from '@/utils/jsonToYaml';
import { jsonToToml } from '@/utils/jsonToToml';
import { minifyJson } from '@/utils/jsonFormatter';
import { useStorageState } from '@/utils/useStorageState';
import type { JsonToolsPageMode } from '@/types/storage';
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
import { useJsonTools } from './useJsonTools';
import type { JsonToolsPageMode } from '@/types/storage';
import type { ViewMode } from './types';
interface ParseState {
value: unknown;
error: string | null;
}
const tryParse = (raw: string, invalidMsg: string): ParseState => {
const trimmed = raw.trim();
if (!trimmed) return { value: undefined, error: null };
try {
return { value: JSON.parse(trimmed), error: null };
} catch {
return { value: undefined, error: invalidMsg };
}
};
const VALID_PAGE_MODES: readonly JsonToolsPageMode[] = ['diff', 'format', 'yaml', 'toml', 'minify'];
const isValidPageMode = (val: unknown): val is JsonToolsPageMode =>
typeof val === 'string' && (VALID_PAGE_MODES as readonly string[]).includes(val);
type PageMode = JsonToolsPageMode;
export default function Index() {
const { t } = useI18n(['jsonDiff', 'jsonFormat']);
const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
// Debounce input
const [leftInput, setLeftInput] = useState('');
const [rightInput, setRightInput] = useState('');
// Debounced values
const [debouncedLeft, setDebouncedLeft] = useState('');
const [debouncedRight, setDebouncedRight] = useState('');
useEffect(() => {
const handle = setTimeout(() => {
setDebouncedLeft(leftInput);
setDebouncedRight(rightInput);
}, 250);
return () => clearTimeout(handle);
}, [leftInput, rightInput]);
// Parse debounced inputs
const parseState = useMemo(() => {
const invalidMsg = t('jsonDiff:invalidJson');
return {
left: tryParse(debouncedLeft, invalidMsg),
right: tryParse(debouncedRight, invalidMsg),
};
}, [debouncedLeft, debouncedRight, t]);
const leftError = parseState.left.error;
const rightError = parseState.right.error;
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() === '') {
return null;
}
return diffJson(left.value, right.value);
}, [parseState, debouncedLeft, debouncedRight]);
const total = diffResult?.diffPaths.length ?? 0;
const handlePrev = useCallback(() => {
if (total === 0) return;
setCurrentDiffIndex((idx) => (idx - 1 + total) % total);
}, [total]);
const handleNext = useCallback(() => {
if (total === 0) return;
setCurrentDiffIndex((idx) => (idx + 1) % total);
}, [total]);
const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
const yamlConvert: ConvertFunction = useCallback((text: string) => {
const r = jsonToYaml(text);
return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
}, []);
const tomlConvert: ConvertFunction = useCallback((text: string) => {
const r = jsonToToml(text);
return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
}, []);
const minifyConvert: ConvertFunction = useCallback((text: string) => {
const r = minifyJson(text);
return { output: r.minified, originalBytes: r.originalBytes, outputBytes: r.minifiedBytes };
}, []);
const {
pageMode,
setPageMode,
leftInput,
rightInput,
setLeftInput,
setRightInput,
leftError,
rightError,
viewMode,
setViewMode,
diffResult,
total,
currentDiffIndex,
handlePrev,
handleNext,
activePath,
yamlConvert,
tomlConvert,
minifyConvert,
} = useJsonTools();
return (
<div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
@@ -144,10 +70,7 @@ export default function Index() {
label={t('jsonDiff:leftLabel')}
placeholder={t('jsonDiff:leftPlaceholder')}
value={leftInput}
onChange={(val) => {
setLeftInput(val);
setCurrentDiffIndex(0);
}}
onChange={setLeftInput}
error={leftError}
minRows={9}
/>
@@ -155,10 +78,7 @@ export default function Index() {
label={t('jsonDiff:rightLabel')}
placeholder={t('jsonDiff:rightPlaceholder')}
value={rightInput}
onChange={(val) => {
setRightInput(val);
setCurrentDiffIndex(0);
}}
onChange={setRightInput}
error={rightError}
minRows={9}
/>
src/pages/JsonTools/useJsonTools.ts
+137
View File
@@ -0,0 +1,137 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useI18n } from '@/utils/chromeI18n';
import { useStorageState } from '@/utils/useStorageState';
import { diffJson } from './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';
export interface UseJsonToolsReturn {
pageMode: JsonToolsPageMode;
setPageMode: (mode: JsonToolsPageMode) => void;
// Diff mode state
leftInput: string;
rightInput: string;
setLeftInput: (val: string) => void;
setRightInput: (val: string) => void;
leftError: string | null;
rightError: string | null;
viewMode: ViewMode;
setViewMode: (mode: ViewMode) => void;
diffResult: ReturnType<typeof diffJson> | null;
total: number;
currentDiffIndex: number;
handlePrev: () => void;
handleNext: () => void;
activePath: string | undefined;
// Convert functions
yamlConvert: ConvertFunction;
tomlConvert: ConvertFunction;
minifyConvert: ConvertFunction;
}
export function useJsonTools(): UseJsonToolsReturn {
const { t } = useI18n(['jsonDiff', 'jsonFormat']);
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);
setDebouncedRight(rightInput);
}, 250);
return () => clearTimeout(handle);
}, [leftInput, rightInput]);
// Parse debounced inputs
const parseState = useMemo(() => {
const invalidMsg = t('jsonDiff:invalidJson');
return {
left: tryParse(debouncedLeft, invalidMsg),
right: tryParse(debouncedRight, invalidMsg),
};
}, [debouncedLeft, debouncedRight, t]);
const leftError = parseState.left.error;
const rightError = parseState.right.error;
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() === '') {
return null;
}
return diffJson(left.value, right.value);
}, [parseState, debouncedLeft, debouncedRight]);
const total = diffResult?.diffPaths.length ?? 0;
const handlePrev = useCallback(() => {
if (total === 0) return;
setCurrentDiffIndex((idx) => (idx - 1 + total) % total);
}, [total]);
const handleNext = useCallback(() => {
if (total === 0) return;
setCurrentDiffIndex((idx) => (idx + 1) % total);
}, [total]);
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 };
}, []);
const tomlConvert: ConvertFunction = useCallback((text: string) => {
const r = jsonToToml(text);
return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
}, []);
const minifyConvert: ConvertFunction = useCallback((text: string) => {
const r = minifyJson(text);
return { output: r.minified, originalBytes: r.originalBytes, outputBytes: r.minifiedBytes };
}, []);
return {
pageMode,
setPageMode,
leftInput,
rightInput,
setLeftInput: (val: string) => {
setLeftInput(val);
setCurrentDiffIndex(0);
},
setRightInput: (val: string) => {
setRightInput(val);
setCurrentDiffIndex(0);
},
leftError,
rightError,
viewMode,
setViewMode,
diffResult,
total,
currentDiffIndex,
handlePrev,
handleNext,
activePath,
yamlConvert,
tomlConvert,
minifyConvert,
};
}
src/pages/Jwt/JwtSection.tsx
+38
View File
@@ -0,0 +1,38 @@
import CopyButton from '@/components/CopyButton';
import { useI18n } from '@/utils/chromeI18n';
import { stringifyJson } from '@/utils/jwt';
import { cn } from '@/lib/utils';
interface JwtSectionProps {
title: string;
content: unknown;
colorClass: string;
bgClass: string;
borderClass: string;
}
export default function JwtSection({
title,
content,
colorClass,
bgClass,
borderClass,
}: JwtSectionProps) {
const { t } = useI18n('jwt');
return (
<div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
<div className="flex justify-between items-center mb-2 select-none">
<span className={cn('text-xs font-bold tracking-wider uppercase', colorClass)}>
{title}
</span>
<CopyButton
text={JSON.stringify(content)}
className="h-6 w-6 rounded-md border text-muted-foreground"
/>
</div>
<pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
{content ? stringifyJson(content) : t('jwt:invalidFormat')}
</pre>
</div>
);
}
src/pages/Jwt/index.tsx
+9 -72
View File
@@ -1,91 +1,31 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { parseJwt, stringifyJson } from '@/utils/jwt';
import CopyButton from '@/components/CopyButton';
import TextInputArea from '@/components/TextInputArea';
import CopyButton from '@/components/CopyButton';
import JwtSection from './JwtSection';
import { useJwt } from './useJwt';
import { useI18n } from '@/utils/chromeI18n';
import { useContextMenuData } from '@/utils/useContextMenuData';
import { cn } from '@/lib/utils';
interface SectionProps {
title: string;
content: unknown;
colorClass: string;
bgClass: string;
borderClass: string;
}
const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionProps) => {
const { t } = useI18n('jwt');
return (
<div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
<div className="flex justify-between items-center mb-2 select-none">
<span className={cn('text-xs font-bold tracking-wider uppercase', colorClass)}>
{title}
</span>
<CopyButton
text={JSON.stringify(content)}
className="h-6 w-6 rounded-md border text-muted-foreground"
/>
</div>
<pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
{content ? stringifyJson(content) : t('jwt:invalidFormat')}
</pre>
</div>
);
};
export default function Index() {
const { t } = useI18n(['jwt', 'jsonFormat']);
const [jwtInput, setJwtInput] = useState('');
// 2. 防抖中转管道：切断高频键盘敲击时的红色语法闪烁
const [debouncedInput, setDebouncedInput] = useState('');
useEffect(() => {
const handle = setTimeout(() => {
setDebouncedInput(jwtInput);
}, 200);
return () => clearTimeout(handle);
}, [jwtInput]);
const handleContextMenuData = useCallback((payload: string) => {
const cleaned = payload.replace(/^Bearer\s*/i, '').trim();
setJwtInput(cleaned);
}, []);
useContextMenuData({ featureKey: 'jwt', onData: handleContextMenuData });
const result = useMemo(() => {
if (!debouncedInput.trim()) {
return null;
}
return parseJwt(debouncedInput);
}, [debouncedInput]);
const { jwtInput, result, handleChange, handleClear } = useJwt();
return (
<div className="p-4 w-full flex flex-col space-y-4 select-none">
<div className="flex flex-col gap-4">
{/* 输入终端 */}
<TextInputArea
minRows={5}
maxRows={10}
placeholder={t('jwt_placeholder')}
value={jwtInput}
onChange={(val) => {
const cleaned = val.replace(/^Bearer\s*/i, '').trim();
setJwtInput(cleaned);
}}
onChange={handleChange}
allowCopy={true}
showClear={true}
externalError={result?.error || undefined}
onClear={() => setJwtInput('')}
onClear={handleClear}
/>
{/* 解码看板结果展现 */}
{result && !result.error && (
<div className="flex flex-col gap-4">
{/* Header 分区：完美致敬 JWT.io 的鲜艳色彩，同时实现黑夜暗化自适应 */}
<Section
<JwtSection
title={t('jwt:headerTitle')}
content={result.header}
colorClass="text-[#fb015b] dark:text-rose-400"
@@ -93,16 +33,14 @@ export default function Index() {
bgClass="bg-[#fb015b]/5 dark:bg-rose-500/5"
/>
{/* Payload 分区 */}
<Section
<JwtSection
title={t('jwt:payloadTitle')}
content={result.payload}
colorClass="text-[#a03aff] dark:text-purple-400" // 针对暗黑模式略微调高对比度
colorClass="text-[#a03aff] dark:text-purple-400"
borderClass="border-[#a03aff]/20 dark:border-purple-500/20"
bgClass="bg-[#a03aff]/5 dark:bg-purple-500/5"
/>
{/* Signature 签名区：完全对齐标准的 shadcn 骨架阶度 */}
<div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
<div className="flex justify-between items-center mb-2">
<span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
@@ -120,7 +58,6 @@ export default function Index() {
</div>
)}
{/* 当解析错误时的干净中性引导拦截 */}
{result?.error && (
<div className="p-6 rounded-xl bg-muted/30 border border-dashed border-border text-center">
<p className="text-xs font-semibold text-muted-foreground/80">
src/pages/Jwt/useJwt.ts
+43
View File
@@ -0,0 +1,43 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useContextMenuData } from '@/utils/useContextMenuData';
import { parseJwt } from '@/utils/jwt';
import type { JwtResult } from '@/utils/jwt';
export interface UseJwtReturn {
jwtInput: string;
result: JwtResult | null;
handleChange: (val: string) => void;
handleClear: () => void;
}
export function useJwt(): UseJwtReturn {
const [jwtInput, setJwtInput] = useState('');
const [debouncedInput, setDebouncedInput] = useState('');
// 防抖管道
useEffect(() => {
const handle = setTimeout(() => setDebouncedInput(jwtInput), 200);
return () => clearTimeout(handle);
}, [jwtInput]);
// 右键菜单数据
const handleContextMenuData = useCallback((payload: string) => {
setJwtInput(payload.replace(/^Bearer\s*/i, '').trim());
}, []);
useContextMenuData({ featureKey: 'jwt', onData: handleContextMenuData });
// 响应式解析
const result = useMemo(() => {
if (!debouncedInput.trim()) return null;
return parseJwt(debouncedInput);
}, [debouncedInput]);
const handleChange = useCallback((val: string) => {
setJwtInput(val.replace(/^Bearer\s*/i, '').trim());
}, []);
const handleClear = useCallback(() => setJwtInput(''), []);
return { jwtInput, result, handleChange, handleClear };
}
src/pages/RightClickRestorer/index.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { Shield, ShieldCheck, MousePointerClick, AlertTriangle } from 'lucide-re
import { useRightClickRestorer } from './useRightClickRestorer';
import { useI18n } from '@/utils/chromeI18n';
export default function RightClickRestorerPage() {
export default function Index() {
const { t } = useI18n('rightClickRestorer');
const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
src/pages/TextStatistics/index.tsx
+3 -14
View File
@@ -1,21 +1,12 @@
import { useCallback, useMemo, useState } from 'react';
import TextInputArea from '@/components/TextInputArea';
import { formatByteSize, getTextStats } from '@/utils/textStatistics';
import { formatByteSize } from '@/utils/textStatistics';
import { useI18n } from '@/utils/chromeI18n';
import { useContextMenuData } from '@/utils/useContextMenuData';
import { useTextStatistics } from './useTextStatistics';
import { cn } from '@/lib/utils';
export default function Index() {
const { t } = useI18n('textStatistics');
const [text, setText] = useState('');
const handleContextMenuData = useCallback((payload: string) => {
setText(payload);
}, []);
useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
const stats = useMemo(() => getTextStats(text), [text]);
const { text, stats, setText } = useTextStatistics();
const statItems = [
{ label: t('textStatistics:characters'), value: stats.characters },
@@ -26,7 +17,6 @@ export default function Index() {
return (
<div className="p-4 w-full space-y-4">
{/* 文本输入区域 */}
<TextInputArea
value={text}
onChange={setText}
@@ -37,7 +27,6 @@ export default function Index() {
allowCopy={true}
/>
{/* 统计结果展示区域 */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
{statItems.map((item) => (
<div
src/pages/TextStatistics/useTextStatistics.ts
+23
View File
@@ -0,0 +1,23 @@
import { useCallback, useMemo, useState } from 'react';
import { getTextStats, type TextStats } from '@/utils/textStatistics';
import { useContextMenuData } from '@/utils/useContextMenuData';
export interface UseTextStatisticsReturn {
text: string;
stats: TextStats;
setText: (text: string) => void;
}
export function useTextStatistics(): UseTextStatisticsReturn {
const [text, setText] = useState('');
const handleContextMenuData = useCallback((payload: string) => {
setText(payload);
}, []);
useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
const stats = useMemo(() => getTextStats(text), [text]);
return { text, stats, setText };
}