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/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useAppStore } from '@/store/app-store';
-import { initDarkMode, useThemeStore } from '@/store/theme-store';
+import { initDarkMode } from '@/store/theme-store';
 import { AppShell } from '@/components/layout/AppShell';
 import { ErrorBoundary } from '@/components/layout/ErrorBoundary';
 
@@ -9,10 +9,6 @@ export default function App() {
 
   useEffect(() => {
     initDarkMode();
-    const saved = localStorage.getItem('darkMode');
-    if (saved === '1') {
-      useThemeStore.setState({ isDark: true });
-    }
     initialize();
   }, [initialize]);
 

src/components/dialogs/HelpDialog.tsx

@@ -1,50 +1,20 @@
-import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Modal } from '@/components/ui/Modal';
 
-interface HelpDialogProps {
-  open: boolean;
-  onClose: () => void;
-}
+interface HelpDialogProps { open: boolean; onClose: () => void; }
 
 export function HelpDialog({ open, onClose }: HelpDialogProps) {
   const { t } = useTranslation();
 
-  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 max-w-lg"
-        style={{ backgroundColor: 'var(--app-bg)', color: 'var(--app-fg)' }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <h2 className="text-lg font-semibold mb-4">{t('dialog.helpTitle')}</h2>
-        <pre className="text-sm whitespace-pre-wrap font-sans leading-relaxed">
-          {t('help.content')}
-        </pre>
-        <div className="flex justify-end mt-4">
-          <button
-            className="px-4 py-1.5 text-sm rounded text-white"
-            style={{ backgroundColor: '#2563eb' }}
-            onClick={onClose}
-          >
-            {t('dialog.confirm')}
-          </button>
-        </div>
+    <Modal open={open} onClose={onClose}>
+      <h2 className="text-lg font-semibold mb-4">{t('dialog.helpTitle')}</h2>
+      <pre className="text-sm whitespace-pre-wrap font-sans leading-relaxed max-w-lg">{t('help.content')}</pre>
+      <div className="flex justify-end mt-4">
+        <button className="px-4 py-1.5 text-sm rounded text-white" style={{ backgroundColor: '#2563eb' }} onClick={onClose}>
+          {t('dialog.confirm')}
+        </button>
       </div>
-    </div>
+    </Modal>
   );
 }

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>
   );
 }

src/components/dialogs/PathEditDialog.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Modal } from '@/components/ui/Modal';
 
 interface PathEditDialogProps {
   open: boolean;
@@ -13,61 +14,27 @@ export function PathEditDialog({ open, title, initialValue, onConfirm, onCancel
   const { t } = useTranslation();
   const [value, setValue] = useState(initialValue);
 
-  // 每次打开时同步 initialValue（解决 React 复用实例导致空白的问题）
-  useEffect(() => {
-    if (open) {
-      setValue(initialValue);
-    }
-  }, [open, initialValue]);
-
-  if (!open) return null;
+  useEffect(() => { if (open) setValue(initialValue); }, [open, initialValue]);
 
   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 min-w-[400px]"
-        style={{ backgroundColor: 'var(--app-bg)', color: 'var(--app-fg)' }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <h2 className="text-lg font-semibold mb-4">{title}</h2>
-        <label className="text-sm mb-2 block">{t('dialog.pathLabel')}</label>
-        <input
-          type="text"
-          autoFocus
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') onConfirm(value);
-            if (e.key === 'Escape') onCancel();
-          }}
-          className="w-full px-3 py-2 rounded border text-sm outline-none"
-          style={{
-            backgroundColor: 'var(--app-list-bg)',
-            color: 'var(--app-fg)',
-            borderColor: 'var(--app-border)',
-          }}
-        />
-        <div className="flex justify-end gap-2 mt-4">
-          <button
-            className="px-4 py-1.5 text-sm rounded border"
-            style={{ borderColor: 'var(--app-border)' }}
-            onClick={onCancel}
-          >
-            {t('dialog.cancel')}
-          </button>
-          <button
-            className="px-4 py-1.5 text-sm rounded text-white"
-            style={{ backgroundColor: '#2563eb' }}
-            onClick={() => onConfirm(value)}
-          >
-            {t('dialog.confirm')}
-          </button>
-        </div>
+    <Modal open={open} onClose={onCancel}>
+      <h2 className="text-lg font-semibold mb-4">{title}</h2>
+      <label className="text-sm mb-2 block">{t('dialog.pathLabel')}</label>
+      <input
+        type="text" autoFocus value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => { if (e.key === 'Enter') onConfirm(value); }}
+        className="w-full min-w-[400px] px-3 py-2 rounded border text-sm outline-none"
+        style={{ backgroundColor: 'var(--app-list-bg)', color: 'var(--app-fg)', borderColor: 'var(--app-border)' }}
+      />
+      <div className="flex justify-end gap-2 mt-4">
+        <button className="px-4 py-1.5 text-sm rounded border" style={{ borderColor: 'var(--app-border)' }} onClick={onCancel}>
+          {t('dialog.cancel')}
+        </button>
+        <button className="px-4 py-1.5 text-sm rounded text-white" style={{ backgroundColor: '#2563eb' }} onClick={() => onConfirm(value)}>
+          {t('dialog.confirm')}
+        </button>
       </div>
-    </div>
+    </Modal>
   );
 }

src/components/layout/ErrorBoundary.tsx

@@ -7,9 +7,14 @@ export class ErrorBoundary extends Component<Props, State> {
   state: State = { hasError: false, error: '' };
 
   static getDerivedStateFromError(e: Error): State {
+    console.error('[ErrorBoundary]', e);
     return { hasError: true, error: e.message };
   }
 
+  componentDidCatch(_e: Error, info: React.ErrorInfo) {
+    console.error('[ErrorBoundary] componentStack:', info.componentStack);
+  }
+
   render() {
     if (this.state.hasError) {
       return (

src/components/ui/Modal.tsx

@@ -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>
+  );
+}

src/hooks/use-app-actions.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect } from 'react';
 import { useAppStore } from '@/store/app-store';
 import { TargetType } from '@/core/undo-redo';
 import { open } from '@tauri-apps/plugin-dialog';
-import { importFromContent, exportToJson, flattenImportResult } from '@/core/import-export';
+import { importFromContent, exportToJson, exportToCsv, flattenImportResult } from '@/core/import-export';
 import { is_valid_path_format } from '@/core/validation';
 import { useKeyboard } from './use-keyboard';
 import i18n from '@/i18n';
@@ -101,14 +101,18 @@ export function useAppActions(activeTab: TabId, dialogs: DialogState) {
     input.click();
   }, [setImportDialog]);
 
-  const handleExport = useCallback(() => {
+  const handleExport = useCallback((format: 'json' | 'csv' = 'json') => {
     const state = useAppStore.getState();
-    const content = exportToJson({ system: state.sysPaths, user: state.userPaths });
-    const blob = new Blob([content], { type: 'application/json' });
+    const data = { system: state.sysPaths, user: state.userPaths };
+    const isCsv = format === 'csv';
+    const content = isCsv ? exportToCsv(data) : exportToJson(data);
+    const mime = isCsv ? 'text/csv' : 'application/json';
+    const ext = isCsv ? '.csv' : '.json';
+    const blob = new Blob([isCsv ? '' : '', content], { type: mime });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
-    a.download = 'patheditor_export.json';
+    a.download = `patheditor_export${ext}`;
     a.click();
     URL.revokeObjectURL(url);
   }, []);