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,272 @@
|
||||
import { Box, Collapse, useTheme } from '@mui/material';
|
||||
import type { Theme } from '@mui/material/styles';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { surfaceTint } from '@/config/pageTheme';
|
||||
import type { DiffNode, DiffType } from './types';
|
||||
|
||||
export type TreeSide = 'left' | 'right';
|
||||
|
||||
interface JsonTreeProps {
|
||||
node: DiffNode;
|
||||
side: TreeSide;
|
||||
defaultExpandDepth?: number;
|
||||
activePath?: string;
|
||||
}
|
||||
|
||||
interface NodeRowProps {
|
||||
node: DiffNode;
|
||||
side: TreeSide;
|
||||
depth: number;
|
||||
defaultExpandDepth: number;
|
||||
activePath?: string;
|
||||
isLastChild: boolean;
|
||||
}
|
||||
|
||||
const formatPrimitive = (v: unknown): string => {
|
||||
if (v === null) return 'null';
|
||||
if (typeof v === 'string') return JSON.stringify(v);
|
||||
if (typeof v === 'number' || typeof v === 'boolean') return String(v);
|
||||
return JSON.stringify(v);
|
||||
};
|
||||
|
||||
/**
|
||||
* 决定当前节点在指定一侧是否需要渲染。
|
||||
* 例如：'added' 节点只在 right 侧出现，'removed' 节点只在 left 侧出现。
|
||||
*/
|
||||
const shouldRenderOnSide = (type: DiffType, side: TreeSide): boolean => {
|
||||
if (type === 'added') return side === 'right';
|
||||
if (type === 'removed') return side === 'left';
|
||||
return true;
|
||||
};
|
||||
|
||||
const getValueForSide = (node: DiffNode, side: TreeSide): unknown => {
|
||||
return side === 'left' ? node.oldValue : node.newValue;
|
||||
};
|
||||
|
||||
const getRowBg = (type: DiffType, side: TreeSide, theme: Theme): string | undefined => {
|
||||
if (!shouldRenderOnSide(type, side)) return undefined;
|
||||
if (type === 'added') return surfaceTint(theme, theme.palette.success.main, 0.15);
|
||||
if (type === 'removed') return surfaceTint(theme, theme.palette.error.main, 0.15);
|
||||
if (type === 'modified') return surfaceTint(theme, theme.palette.warning.main, 0.15);
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const getValueColor = (type: DiffType, side: TreeSide): string | undefined => {
|
||||
if (!shouldRenderOnSide(type, side)) return undefined;
|
||||
if (type === 'added') return 'success.main';
|
||||
if (type === 'removed') return 'error.main';
|
||||
if (type === 'modified') return 'warning.main';
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const isContainerValue = (v: unknown): boolean => {
|
||||
return (typeof v === 'object' && v !== null) || Array.isArray(v);
|
||||
};
|
||||
|
||||
const NodeRow = ({
|
||||
node,
|
||||
side,
|
||||
depth,
|
||||
defaultExpandDepth,
|
||||
activePath,
|
||||
isLastChild,
|
||||
}: NodeRowProps) => {
|
||||
// 'auto' = follow defaults + activePath; otherwise user explicitly toggled
|
||||
const [override, setOverride] = useState<'auto' | 'open' | 'closed'>('auto');
|
||||
const rowRef = useRef<HTMLDivElement | null>(null);
|
||||
const theme = useTheme();
|
||||
|
||||
const onActivePath = Boolean(
|
||||
activePath &&
|
||||
(activePath === node.path ||
|
||||
activePath.startsWith(`${node.path}.`) ||
|
||||
activePath.startsWith(`${node.path}[`)),
|
||||
);
|
||||
|
||||
const expanded =
|
||||
override === 'open'
|
||||
? true
|
||||
: override === 'closed'
|
||||
? false
|
||||
: onActivePath || depth < defaultExpandDepth;
|
||||
|
||||
// 当激活路径定位到本节点时滚动到视图中心（仅 DOM 副作用，不更新 state）
|
||||
useEffect(() => {
|
||||
if (activePath === node.path) {
|
||||
rowRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, [activePath, node.path]);
|
||||
|
||||
if (!shouldRenderOnSide(node.type, side)) {
|
||||
// 渲染占位空行以保持左右两侧高度一致
|
||||
return <Box sx={{ pl: depth * 1.5, color: 'transparent', userSelect: 'none' }}>·</Box>;
|
||||
}
|
||||
|
||||
const value = getValueForSide(node, side);
|
||||
const isContainer = isContainerValue(value) && Array.isArray(node.children);
|
||||
const isArray = Array.isArray(value);
|
||||
const bg = getRowBg(node.type, side, theme);
|
||||
const valueColor = getValueColor(node.type, side);
|
||||
const isActive = activePath === node.path;
|
||||
|
||||
// 根节点渲染
|
||||
const isRoot = depth === 0;
|
||||
|
||||
if (isContainer && node.children) {
|
||||
const open = isArray ? '[' : '{';
|
||||
const close = isArray ? ']' : '}';
|
||||
return (
|
||||
<Box ref={rowRef}>
|
||||
<Box
|
||||
onClick={() => setOverride(expanded ? 'closed' : 'open')}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
pl: depth * 1.5,
|
||||
pr: 1,
|
||||
py: 0.2,
|
||||
bgcolor: bg,
|
||||
outline: isActive ? '2px solid' : 'none',
|
||||
outlineColor: 'primary.main',
|
||||
borderRadius: 0.5,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
whiteSpace: 'nowrap',
|
||||
'&:hover': { bgcolor: bg ?? 'action.hover' },
|
||||
}}
|
||||
>
|
||||
<Box component="span" sx={{ width: 12, color: 'text.secondary', fontSize: '0.7rem' }}>
|
||||
{expanded ? '▾' : '▸'}
|
||||
</Box>
|
||||
{!isRoot && (
|
||||
<Box component="span" sx={{ color: 'text.primary', fontWeight: 700 }}>
|
||||
{isArrayKeyDisplay(node.key)}:
|
||||
</Box>
|
||||
)}
|
||||
<Box component="span" sx={{ color: 'text.secondary' }}>
|
||||
{open}
|
||||
</Box>
|
||||
{!expanded && (
|
||||
<Box component="span" sx={{ color: 'text.disabled', fontStyle: 'italic' }}>
|
||||
{summarize(value)}
|
||||
</Box>
|
||||
)}
|
||||
{!expanded && (
|
||||
<Box component="span" sx={{ color: 'text.secondary' }}>
|
||||
{close}
|
||||
{isLastChild ? '' : ','}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Collapse in={expanded} unmountOnExit>
|
||||
<Box>
|
||||
{node.children.map((child, idx) => (
|
||||
<NodeRow
|
||||
key={child.path}
|
||||
node={child}
|
||||
side={side}
|
||||
depth={depth + 1}
|
||||
defaultExpandDepth={defaultExpandDepth}
|
||||
activePath={activePath}
|
||||
isLastChild={idx === node.children!.length - 1}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
pl: depth * 1.5,
|
||||
color: 'text.secondary',
|
||||
whiteSpace: 'nowrap',
|
||||
ml: '17px',
|
||||
}}
|
||||
>
|
||||
{close}
|
||||
{isLastChild ? '' : ','}
|
||||
</Box>
|
||||
</Collapse>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// 叶子节点
|
||||
return (
|
||||
<Box
|
||||
ref={rowRef}
|
||||
sx={{
|
||||
pl: depth * 1.5,
|
||||
pr: 1,
|
||||
py: 0.2,
|
||||
bgcolor: bg,
|
||||
outline: isActive ? '2px solid' : 'none',
|
||||
outlineColor: 'primary.main',
|
||||
borderRadius: 0.5,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
<Box component="span" sx={{ width: 12 }} />
|
||||
{!isRoot && (
|
||||
<Box component="span" sx={{ color: 'text.primary', fontWeight: 700 }}>
|
||||
{isArrayKeyDisplay(node.key)}:
|
||||
</Box>
|
||||
)}
|
||||
<Box component="span" sx={{ color: valueColor ?? 'text.primary' }}>
|
||||
{formatPrimitive(value)}
|
||||
{isLastChild ? '' : ','}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const isArrayKeyDisplay = (key: string): string => {
|
||||
// 数组索引在父级渲染中已加方括号；这里仅显示对象键名
|
||||
return key;
|
||||
};
|
||||
|
||||
const summarize = (v: unknown): string => {
|
||||
if (Array.isArray(v)) return ` ${v.length} ${v.length === 1 ? 'item' : 'items'} `;
|
||||
if (v && typeof v === 'object') {
|
||||
const n = Object.keys(v).length;
|
||||
return ` ${n} ${n === 1 ? 'key' : 'keys'} `;
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
export default function JsonTree({
|
||||
node,
|
||||
side,
|
||||
defaultExpandDepth = 2,
|
||||
activePath,
|
||||
}: JsonTreeProps) {
|
||||
const sideKey = useMemo(() => side, [side]);
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 3,
|
||||
bgcolor: 'background.paper',
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.8rem',
|
||||
overflowX: 'auto',
|
||||
minHeight: 200,
|
||||
maxHeight: 480,
|
||||
overflowY: 'auto',
|
||||
}}
|
||||
>
|
||||
<NodeRow
|
||||
node={node}
|
||||
side={sideKey}
|
||||
depth={0}
|
||||
defaultExpandDepth={defaultExpandDepth}
|
||||
activePath={activePath}
|
||||
isLastChild
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export type { JsonTreeProps };
|
||||
Reference in New Issue
Block a user