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>

src/components/dialogs/ImportDialog.tsx

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Modal } from '@/components/ui/Modal';
 
 interface ImportDialogProps {
   open: boolean;
@@ -9,80 +9,23 @@ interface ImportDialogProps {
   onCancel: () => void;
 }
 
-export function ImportDialog({
-  open,
-  systemCount,
-  userCount,
-  onSelect,
-  onCancel,
-}: ImportDialogProps) {
+export function ImportDialog({ open, systemCount, userCount, onSelect, onCancel }: ImportDialogProps) {
   const { t } = useTranslation();
 
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onCancel();
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [open, onCancel]);
-
-  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={onCancel}
-    >
-      <div
-        className="rounded-lg p-6"
-        style={{ backgroundColor: 'var(--app-bg)', color: 'var(--app-fg)' }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <h2 className="text-lg font-semibold mb-4">{t('dialog.importTarget')}</h2>
-        <p className="text-sm mb-4 opacity-70">
-          {systemCount > 0 && `系统变量: ${systemCount} 条`}
-          {systemCount > 0 && userCount > 0 && ' | '}
-          {userCount > 0 && `用户变量: ${userCount} 条`}
-        </p>
-        <div className="flex flex-col gap-2">
-          {systemCount > 0 && (
-            <button
-              className="px-4 py-2 text-sm rounded border text-left"
-              style={{ borderColor: 'var(--app-border)' }}
-              onClick={() => onSelect('system')}
-            >
-              {t('dialog.importSystem')}
-            </button>
-          )}
-          {userCount > 0 && (
-            <button
-              className="px-4 py-2 text-sm rounded border text-left"
-              style={{ borderColor: 'var(--app-border)' }}
-              onClick={() => onSelect('user')}
-            >
-              {t('dialog.importUser')}
-            </button>
-          )}
-          {systemCount > 0 && userCount > 0 && (
-            <button
-              className="px-4 py-2 text-sm rounded border text-left"
-              style={{ borderColor: 'var(--app-border)' }}
-              onClick={() => onSelect('both')}
-            >
-              {t('dialog.importBoth')}
-            </button>
-          )}
-          <button
-            className="px-4 py-2 text-sm rounded border mt-2"
-            style={{ borderColor: 'var(--app-border)' }}
-            onClick={onCancel}
-          >
-            {t('dialog.cancel')}
-          </button>
-        </div>
+    <Modal open={open} onClose={onCancel}>
+      <h2 className="text-lg font-semibold mb-4">{t('dialog.importTarget')}</h2>
+      <p className="text-sm mb-4 opacity-70">
+        {systemCount > 0 && `系统变量: ${systemCount} 条`}
+        {systemCount > 0 && userCount > 0 && ' | '}
+        {userCount > 0 && `用户变量: ${userCount} 条`}
+      </p>
+      <div className="flex flex-col gap-2">
+        {systemCount > 0 && <button className="px-4 py-2 text-sm rounded border text-left" style={{ borderColor: 'var(--app-border)' }} onClick={() => onSelect('system')}>{t('dialog.importSystem')}</button>}
+        {userCount > 0 && <button className="px-4 py-2 text-sm rounded border text-left" style={{ borderColor: 'var(--app-border)' }} onClick={() => onSelect('user')}>{t('dialog.importUser')}</button>}
+        {systemCount > 0 && userCount > 0 && <button className="px-4 py-2 text-sm rounded border text-left" style={{ borderColor: 'var(--app-border)' }} onClick={() => onSelect('both')}>{t('dialog.importBoth')}</button>}
+        <button className="px-4 py-2 text-sm rounded border mt-2" style={{ borderColor: 'var(--app-border)' }} onClick={onCancel}>{t('dialog.cancel')}</button>
       </div>
-    </div>
+    </Modal>
   );
 }