Develop (#21)
docs: 添加组件文档注释和类型导入 refactor: 统一使用 SnackbarOptions 类型 style: 优化导入语句顺序和格式 refactor: 简化假数据生成器中的faker导入和使用 feat(form-recognizer): 增强表单识别功能并优化UI交互 refactor: 移除未使用的组件文件 refactor(页面头部): 提取通用 PageHeader 组件 style(组件): 调整自动刷新开关和存储选项网格的样式 style(ui): 调整时间戳页面和结果视图的样式 ci(workflow): 移除Firefox测试以简化CI流程 refactor(qrcode): 重构二维码解析功能并提取为独立模块 style(页面样式): 统一页面头部图标颜色并优化表单样式 feat(formMapping): 添加表单映射功能 feat(表单映射): 添加配置导出功能及状态提示 feat(表单填充): 新增智能表单填充功能 ci: 精简触发CI的工作流分支 test: 更新路由测试以匹配新增的路由数量 test: 将测试文件中的描述和断言翻译为中文 test(PageHeader): 添加组件测试用例 refactor(theme): 重构主题样式并优化仪表盘卡片组件 refactor(Button): 统一按钮样式并移除重复样式定义 docs: 更新 README 文件中的目录结构说明 refactor: 优化代码类型声明和UI布局 refactor(消息通信): 使用 @webext-core/messaging 重构消息处理逻辑 fix: 修复依赖项缺失导致的潜在问题 refactor: 重构表单识别和消息处理逻辑 feat(侧边栏): 添加侧边栏状态变化通知功能 refactor: 优化高亮组件渲染逻辑并添加防抖处理 refactor: 统一组件导出方式为默认导出 refactor: 重构样式系统并迁移至 MUI 主题 docs: 更新项目文档以反映新增功能和技术栈细节 feat: 添加错误边界组件以捕获子组件错误 refactor(ui): 使用全局 snackbar 替换本地通知组件 refactor(snackbar): 重构全局消息提示为 SnackbarProvider 组件 refactor(Snackbar): 重构消息提示组件并优化样式 refactor: 重构路由和功能配置系统 refactor(GlobalSnackbar): 合并SnackbarProvider到GlobalSnackbar组件 feat(表单映射): 增强高亮器功能并优化元素定位 refactor: 移除表单映射相关功能 feat: 实现页面组件懒加载并优化加载状态显示 refactor: 移除未使用的数据生成和验证工具类 chore: 更新应用图标文件 refactor(qrcode): 替换二维码生成和解析库以减小体积 feat: 添加在标签页打开功能并优化错误处理 feat: 支持独立标签页模式并重构路由配置 feat(ui): 优化响应式布局和样式设计 refactor: 移除URL工具相关代码 refactor: 简化页面标题和存储选项网格的响应式布局 refactor: 优化样式和错误处理 refactor: 重构页面组件结构 style(DashboardPage): 优化仪表盘布局为响应式网格 refactor(ToolCard): 重构工具卡片组件并添加详细注释 feat: 新增文本统计功能 feat(jwt): 添加 JWT 解析工具功能 docs: 更新 README 以更清晰地描述项目功能和结构 docs: 更新AGENTS.md文档以反映项目最新状态 test: 更新特征计数测试以匹配新增工具 style: 统一导入语句顺序 refactor(pages): 重构工具页面组件结构并优化功能实现 feat(顶部栏): 添加搜索功能和历史记录 feat: 添加多语言支持(i18n) feat(顶部栏): 添加语言切换功能并优化国际化支持 feat(i18n): 增加语言归一化和同步功能 fix(剪贴板): 使用国际化文本替换剪贴板消息 test(顶部栏): 更新测试以匹配国际化标题 refactor: 重构组件目录结构 refactor(Dashboard): 优化卡片组件结构并移除无用属性 refactor(timestamp): 合并输入处理函数并优化样式结构 refactor(dashboard): 重构仪表盘卡片组件并优化布局 refactor(storageCleaner): 重构样式代码并优化国际化处理 refactor(StorageCleaner): 优化条件判断和清理未使用的代码 refactor(QrCode): 重构二维码页面样式和组件结构 refactor(ErrorBoundary): 移除冗余状态更新并调整错误背景色 feat(TopBar): 优化顶部导航栏功能并添加样式配置 chore: 在.gitignore中添加docs目录 feat(JsonDiff): 添加差异引擎类型定义 feat: 新增 JSON 差异比较工具功能 feat(主题): 添加暗色模式支持并重构主题系统
This commit is contained in:
LingandRX
@@ -0,0 +1,196 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Stack,
|
||||
ToggleButton,
|
||||
ToggleButtonGroup,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import PageHeader from '@/components/PageHeader';
|
||||
import { jsonDiffPageStyles } from '@/config/pageTheme';
|
||||
import JsonDiffInput from './JsonDiffInput';
|
||||
import DiffResult from './DiffResult';
|
||||
import DiffNavigator from './DiffNavigator';
|
||||
import { diffJson } from './diffEngine';
|
||||
import type { DiffResult as DiffResultType, 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 };
|
||||
}
|
||||
};
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useTranslation(['jsonDiff']);
|
||||
const [leftInput, setLeftInput] = useState('');
|
||||
const [rightInput, setRightInput] = useState('');
|
||||
const [leftError, setLeftError] = useState<string | null>(null);
|
||||
const [rightError, setRightError] = useState<string | null>(null);
|
||||
const [diffResult, setDiffResult] = useState<DiffResultType | null>(null);
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('sideBySide');
|
||||
const [currentDiffIndex, setCurrentDiffIndex] = useState(0);
|
||||
|
||||
// 防抖校验输入
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
const invalid = t('jsonDiff:invalidJson');
|
||||
setLeftError(tryParse(leftInput, invalid).error);
|
||||
setRightError(tryParse(rightInput, invalid).error);
|
||||
}, 300);
|
||||
return () => clearTimeout(handle);
|
||||
}, [leftInput, rightInput, t]);
|
||||
|
||||
const canCompare = useMemo(() => {
|
||||
return leftInput.trim() !== '' && rightInput.trim() !== '' && !leftError && !rightError;
|
||||
}, [leftInput, rightInput, leftError, rightError]);
|
||||
|
||||
const handleCompare = () => {
|
||||
const invalid = t('jsonDiff:invalidJson');
|
||||
const left = tryParse(leftInput, invalid);
|
||||
const right = tryParse(rightInput, invalid);
|
||||
setLeftError(left.error);
|
||||
setRightError(right.error);
|
||||
if (left.error || right.error) {
|
||||
setDiffResult(null);
|
||||
return;
|
||||
}
|
||||
const result = diffJson(left.value, right.value);
|
||||
setDiffResult(result);
|
||||
setCurrentDiffIndex(0);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setLeftInput('');
|
||||
setRightInput('');
|
||||
setLeftError(null);
|
||||
setRightError(null);
|
||||
setDiffResult(null);
|
||||
setCurrentDiffIndex(0);
|
||||
};
|
||||
|
||||
const total = diffResult?.diffPaths.length ?? 0;
|
||||
|
||||
const handlePrev = () => {
|
||||
if (total === 0) return;
|
||||
setCurrentDiffIndex((idx) => (idx - 1 + total) % total);
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (total === 0) return;
|
||||
setCurrentDiffIndex((idx) => (idx + 1) % total);
|
||||
};
|
||||
|
||||
const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Container sx={{ p: 2 }}>
|
||||
<PageHeader
|
||||
title={t('jsonDiff:pageTitle')}
|
||||
subtitle={t('jsonDiff:pageSubtitle')}
|
||||
icon={<CompareArrowsIcon />}
|
||||
iconColor={jsonDiffPageStyles.primaryColor}
|
||||
/>
|
||||
|
||||
<Stack spacing={2.5}>
|
||||
{/* 工具栏 */}
|
||||
<Stack
|
||||
direction={{ xs: 'column', sm: 'row' }}
|
||||
spacing={1.5}
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: 'stretch', sm: 'center' }}
|
||||
>
|
||||
<ToggleButtonGroup
|
||||
size="small"
|
||||
exclusive
|
||||
value={viewMode}
|
||||
onChange={(_, v: ViewMode | null) => v && setViewMode(v)}
|
||||
sx={{ borderRadius: 3 }}
|
||||
>
|
||||
<ToggleButton value="sideBySide" sx={{ px: 2, fontWeight: 700 }}>
|
||||
{t('jsonDiff:sideBySideMode')}
|
||||
</ToggleButton>
|
||||
<ToggleButton value="unified" sx={{ px: 2, fontWeight: 700 }}>
|
||||
{t('jsonDiff:unifiedMode')}
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
<Stack direction="row" spacing={1}>
|
||||
<Button variant="text" onClick={handleClear} sx={{ borderRadius: 3 }}>
|
||||
{t('jsonDiff:clearButton')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={!canCompare}
|
||||
onClick={handleCompare}
|
||||
sx={{ borderRadius: 3, fontWeight: 700, px: 3 }}
|
||||
>
|
||||
{t('jsonDiff:compareButton')}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
{/* 输入区 */}
|
||||
<Stack direction={{ xs: 'column', md: 'row' }} spacing={2}>
|
||||
<JsonDiffInput
|
||||
label={t('jsonDiff:leftLabel')}
|
||||
placeholder={t('jsonDiff:leftPlaceholder')}
|
||||
value={leftInput}
|
||||
onChange={setLeftInput}
|
||||
error={leftError}
|
||||
/>
|
||||
<JsonDiffInput
|
||||
label={t('jsonDiff:rightLabel')}
|
||||
placeholder={t('jsonDiff:rightPlaceholder')}
|
||||
value={rightInput}
|
||||
onChange={setRightInput}
|
||||
error={rightError}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
{/* 差异展示 */}
|
||||
{diffResult ? (
|
||||
<>
|
||||
<DiffNavigator
|
||||
total={total}
|
||||
currentIndex={currentDiffIndex}
|
||||
onPrev={handlePrev}
|
||||
onNext={handleNext}
|
||||
/>
|
||||
<DiffResult result={diffResult} viewMode={viewMode} activePath={activePath} />
|
||||
</>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
p: 3,
|
||||
borderRadius: 3,
|
||||
bgcolor: (theme) =>
|
||||
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.03)' : 'grey.50',
|
||||
border: '1px dashed',
|
||||
borderColor: (theme) =>
|
||||
theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.15)' : 'grey.300',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ fontWeight: 600 }}>
|
||||
{t('jsonDiff:emptyHint')}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user