refactor: 抽取 Modal 组件、支持 JSON/CSV 导出、清理冗余代码

- 新增 Modal 组件,消除 3 个 Dialog 中重复的遮罩层/Escape/stopPropagation 代码
- PathEditDialog/HelpDialog/ImportDialog 改用 Modal 包裹
- handleExport 支持 JSON/CSV 两种格式(CSV 导出代码之前存在但从未接线)
- App.tsx 移除冗余的 initDarkMode 后重复设 store 的逻辑
- ErrorBoundary 添加 componentDidCatch 日志和 console.error

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-26 00:51:32 +08:00
parent b159407773
commit d28861ff9c
7 changed files with 94 additions and 175 deletions
+34
View File
@@ -0,0 +1,34 @@
import { useEffect, type ReactNode } from 'react';
interface ModalProps {
open: boolean;
onClose: () => void;
children: ReactNode;
}
export function Modal({ open, onClose, children }: ModalProps) {
useEffect(() => {
if (!open) return;
const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', handler);
return () => window.removeEventListener('keydown', handler);
}, [open, onClose]);
if (!open) return null;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center"
style={{ backgroundColor: 'rgba(0,0,0,0.4)' }}
onClick={onClose}
>
<div
className="rounded-lg p-6"
style={{ backgroundColor: 'var(--app-bg)', color: 'var(--app-fg)' }}
onClick={(e) => e.stopPropagation()}
>
{children}
</div>
</div>
);
}