ui改

src/pages/ContactsPage.scss

@@ -1,39 +1,49 @@
 .contacts-page {
   display: flex;
-  flex-direction: column;
+  height: calc(100% + 48px);
-  height: 100%;
+  margin: -24px;
-  padding: 2rem;
+  background: var(--bg-primary);
-  gap: 1.5rem;
   overflow: hidden;
 
-  .page-header {
+  // 左侧联系人面板
+  .contacts-panel {
+    width: 380px;
+    min-width: 380px;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--border-color);
+    background: var(--card-bg);
+  }
+
+  .panel-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 1rem;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border-color);
 
-    h1 {
+    h2 {
-      font-size: 1.75rem;
+      font-size: 18px;
       font-weight: 600;
       color: var(--text-primary);
       margin: 0;
     }
 
     .icon-btn {
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: var(--bg-tertiary);
+      border-radius: 8px;
+      cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 36px;
-      height: 36px;
-      border: none;
-      border-radius: 8px;
-      background: var(--bg-secondary);
       color: var(--text-secondary);
-      cursor: pointer;
       transition: all 0.2s;
 
-      &:hover:not(:disabled) {
+      &:hover {
-        background: var(--bg-tertiary);
+        background: var(--bg-hover);
         color: var(--text-primary);
       }
 
@@ -42,31 +52,25 @@
         cursor: not-allowed;
       }
 
-      svg.spin {
+      .spin {
-        animation: spin 1s linear infinite;
+        animation: contactsSpin 1s linear infinite;
       }
     }
   }
 
-  .contacts-filters {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-
   .search-bar {
-      position: relative;
     display: flex;
     align-items: center;
-      gap: 0.75rem;
+    gap: 10px;
-      padding: 0.75rem 1rem;
+    margin: 16px 20px;
+    padding: 10px 14px;
     background: var(--bg-secondary);
-      border: 1px solid var(--border-primary);
+    border-radius: 10px;
-      border-radius: 12px;
+    border: 1px solid var(--border-color);
-      transition: all 0.2s;
+    transition: border-color 0.2s;
 
     &:focus-within {
-        border-color: var(--brand-primary);
+      border-color: var(--primary);
-        box-shadow: 0 0 0 3px var(--brand-primary-alpha);
     }
 
     svg {
@@ -77,10 +81,10 @@
     input {
       flex: 1;
       border: none;
-        background: transparent;
+      background: none;
-        color: var(--text-primary);
-        font-size: 0.9375rem;
       outline: none;
+      font-size: 14px;
+      color: var(--text-primary);
 
       &::placeholder {
         color: var(--text-tertiary);
@@ -88,35 +92,37 @@
     }
 
     .clear-btn {
+      background: none;
+      border: none;
+      padding: 4px;
+      cursor: pointer;
+      color: var(--text-tertiary);
       display: flex;
       align-items: center;
       justify-content: center;
-        padding: 4px;
-        border: none;
-        background: transparent;
-        color: var(--text-tertiary);
-        cursor: pointer;
       border-radius: 4px;
-        transition: all 0.2s;
 
       &:hover {
-          background: var(--bg-tertiary);
+        background: var(--bg-hover);
-          color: var(--text-secondary);
+        color: var(--text-primary);
       }
     }
   }
 
   .type-filters {
     display: flex;
-      gap: 1.5rem;
+    gap: 16px;
+    padding: 0 20px 12px;
     flex-wrap: wrap;
 
     .filter-checkbox {
       display: flex;
       align-items: center;
-        gap: 0.5rem;
+      gap: 8px;
       cursor: pointer;
       user-select: none;
+      font-size: 14px;
+      color: var(--text-primary);
 
       input[type="checkbox"] {
         position: absolute;
@@ -124,8 +130,8 @@
         pointer-events: none;
 
         &:checked+.custom-checkbox {
-            background: var(--brand-primary);
+          background: var(--primary);
-            border-color: var(--brand-primary);
+          border-color: var(--primary);
 
           &::after {
             opacity: 1;
@@ -138,7 +144,7 @@
         position: relative;
         width: 18px;
         height: 18px;
-          border: 2px solid var(--border-secondary);
+        border: 2px solid var(--border-color);
         border-radius: 4px;
         background: var(--bg-primary);
         transition: all 0.2s;
@@ -163,157 +169,18 @@
         flex-shrink: 0;
       }
 
-        span {
-          color: var(--text-primary);
-          font-size: 0.9375rem;
-        }
-
       &:hover .custom-checkbox {
-          border-color: var(--brand-primary);
+        border-color: var(--primary);
       }
     }
   }
 
   .contacts-count {
-      font-size: 0.875rem;
+    padding: 0 20px 12px;
-      color: var(--text-tertiary);
+    font-size: 13px;
-    }
-  }
-
-  .export-section {
-    padding: 1.5rem;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-primary);
-    border-radius: 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-
-    h3 {
-      margin: 0;
-      font-size: 1rem;
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-
-    .export-format {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-
-      label {
-        font-size: 0.9375rem;
     color: var(--text-secondary);
-        white-space: nowrap;
   }
 
-      select {
-        padding: 0.5rem 0.75rem;
-        border: 1px solid var(--border-primary);
-        border-radius: 8px;
-        background: var(--bg-primary);
-        color: var(--text-primary);
-        font-size: 0.9375rem;
-        cursor: pointer;
-        transition: all 0.2s;
-
-        &:hover {
-          border-color: var(--brand-primary);
-        }
-
-        &:focus {
-          outline: none;
-          border-color: var(--brand-primary);
-          box-shadow: 0 0 0 3px var(--brand-primary-alpha);
-        }
-      }
-    }
-
-    .export-options {
-      display: flex;
-      gap: 1rem;
-
-      label {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        cursor: pointer;
-
-        input[type="checkbox"] {
-          width: 16px;
-          height: 16px;
-          cursor: pointer;
-        }
-
-        span {
-          font-size: 0.9375rem;
-          color: var(--text-primary);
-        }
-      }
-    }
-
-    .export-folder {
-      .folder-btn {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.75rem 1rem;
-        border: 1px solid var(--border-primary);
-        border-radius: 8px;
-        background: var(--bg-primary);
-        color: var(--text-secondary);
-        cursor: pointer;
-        transition: all 0.2s;
-        font-size: 0.9375rem;
-
-        &:hover {
-          border-color: var(--brand-primary);
-          color: var(--text-primary);
-        }
-
-        span {
-          flex: 1;
-          text-align: left;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-
-    .export-action-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-      padding: 0.75rem 1.5rem;
-      border: none;
-      border-radius: 8px;
-      background: #3b82f6;
-      color: #ffffff;
-      font-size: 0.9375rem;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s;
-
-      &:hover:not(:disabled) {
-        background: #2563eb;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background: #9ca3af;
-      }
-    }
-  }
-
-  .contacts-content {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
   .loading-state,
   .empty-state {
     flex: 1;
@@ -321,65 +188,54 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-      gap: 1rem;
+    gap: 12px;
     color: var(--text-tertiary);
+    font-size: 14px;
 
-      svg.spin {
+    .spin {
-        animation: spin 1s linear infinite;
+      animation: contactsSpin 1s linear infinite;
-        color: var(--brand-primary);
     }
   }
 
   .contacts-list {
     flex: 1;
     overflow-y: auto;
-      display: flex;
+    padding: 0 12px 12px;
-      flex-direction: column;
-      gap: 0.5rem;
-      padding-right: 0.5rem;
 
     &::-webkit-scrollbar {
       width: 6px;
     }
 
-      &::-webkit-scrollbar-track {
-        background: transparent;
-      }
-
     &::-webkit-scrollbar-thumb {
-        background: var(--border-secondary);
+      background: var(--text-tertiary);
       border-radius: 3px;
-
+      opacity: 0.3;
-        &:hover {
-          background: var(--border-primary);
     }
   }
 
   .contact-item {
     display: flex;
     align-items: center;
-        gap: 1rem;
+    gap: 12px;
-        padding: 1rem;
+    padding: 12px;
-        background: var(--bg-secondary);
+    border-radius: 10px;
-        border: 1px solid var(--border-primary);
-        border-radius: 12px;
     transition: all 0.2s;
+    margin-bottom: 4px;
 
     &:hover {
-          background: var(--bg-tertiary);
+      background: var(--bg-hover);
-          border-color: var(--border-secondary);
     }
 
     .contact-avatar {
-          width: 48px;
+      width: 44px;
-          height: 48px;
+      height: 44px;
-          border-radius: 50%;
+      border-radius: 10px;
-          overflow: hidden;
+      background: linear-gradient(135deg, var(--primary), var(--primary-hover));
-          background: var(--bg-tertiary);
-          flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
+      overflow: hidden;
+      flex-shrink: 0;
 
       img {
         width: 100%;
@@ -388,50 +244,48 @@
       }
 
       span {
-            font-size: 1.25rem;
+        color: #fff;
+        font-size: 16px;
         font-weight: 600;
-            color: var(--text-secondary);
       }
     }
 
     .contact-info {
       flex: 1;
       min-width: 0;
-          display: flex;
+    }
-          flex-direction: column;
-          gap: 0.25rem;
 
     .contact-name {
-            font-size: 1rem;
+      font-size: 14px;
       font-weight: 500;
       color: var(--text-primary);
+      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-            white-space: nowrap;
     }
 
     .contact-remark {
-            font-size: 0.875rem;
+      font-size: 12px;
       color: var(--text-tertiary);
+      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-            white-space: nowrap;
+      margin-top: 2px;
-          }
     }
 
     .contact-type {
       display: flex;
       align-items: center;
-          gap: 0.375rem;
+      gap: 4px;
-          padding: 0.375rem 0.75rem;
+      padding: 4px 10px;
       border-radius: 6px;
-          font-size: 0.8125rem;
+      font-size: 12px;
       font-weight: 500;
       flex-shrink: 0;
 
       &.friend {
-            background: var(--brand-primary-alpha);
+        background: rgba(var(--primary-rgb), 0.1);
-            color: var(--brand-primary);
+        color: var(--primary);
       }
 
       &.group {
@@ -444,21 +298,256 @@
         color: rgb(251, 191, 36);
       }
 
-          &.other {
-            background: var(--bg-tertiary);
-            color: var(--text-tertiary);
-          }
-
       svg {
         flex-shrink: 0;
       }
     }
   }
+
+  // 右侧设置面板
+  .settings-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .settings-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px 24px;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--text-tertiary);
+      border-radius: 3px;
+    }
+  }
+
+  .setting-section {
+    margin-bottom: 28px;
+
+    h3 {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin: 0 0 14px;
+    }
+  }
+
+  .format-select {
+    position: relative;
+    /* margin-bottom 移到 .setting-section */
+
+    .select-trigger {
+      width: 100%;
+      padding: 10px 16px;
+      border: 1px solid var(--border-color);
+      border-radius: 9999px;
+      /* Rounded pill shape */
+      font-size: 14px;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover {
+        border-color: var(--text-tertiary);
+      }
+
+      &.open {
+        border-color: var(--primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
+      }
+    }
+
+    .select-value {
+      flex: 1;
+      min-width: 0;
+      text-align: left;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .select-dropdown {
+      position: absolute;
+      top: calc(100% + 6px);
+      left: 0;
+      right: 0;
+      background: color-mix(in srgb, var(--bg-primary) 85%, var(--bg-secondary));
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+      padding: 6px;
+      box-shadow: var(--shadow-md);
+      z-index: 20;
+      max-height: 260px;
+      overflow-y: auto;
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
+    }
+
+    .select-option {
+      width: 100%;
+      text-align: left;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 10px 12px;
+      border: none;
+      border-radius: 10px;
+      background: transparent;
+      cursor: pointer;
+      transition: all 0.15s;
+      color: var(--text-primary);
+      font-size: 14px;
+
+      &:hover {
+        background: var(--bg-tertiary);
+      }
+
+      &.active {
+        background: color-mix(in srgb, var(--primary) 12%, transparent);
+        color: var(--primary);
+
+        .option-desc {
+          color: var(--primary);
+        }
+      }
+    }
+
+    .option-label {
+      font-weight: 500;
+    }
+
+    .option-desc {
+      font-size: 12px;
+      color: var(--text-tertiary);
+    }
+  }
+
+  .checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--text-primary);
+
+    input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      accent-color: var(--primary);
+      cursor: pointer;
+    }
+  }
+
+  .export-path-display {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 16px;
+    background: var(--bg-secondary);
+    border-radius: 10px;
+    font-size: 13px;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+
+    svg {
+      color: var(--primary);
+      flex-shrink: 0;
+    }
+
+    span {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .select-folder-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 16px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background: var(--bg-hover);
+      border-color: var(--primary);
+      color: var(--primary);
+
+      svg {
+        color: var(--primary);
+      }
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    svg {
+      color: var(--text-secondary);
+      transition: color 0.2s;
+    }
+  }
+
+  .export-action {
+    padding: 20px 24px;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .export-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 14px 24px;
+    background: var(--primary);
+    color: #fff;
+    border: none;
+    border-radius: 12px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover:not(:disabled) {
+      background: var(--primary-hover);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .spin {
+      animation: contactsSpin 1s linear infinite;
     }
   }
 }
 
-@keyframes spin {
+@keyframes contactsSpin {
   from {
     transform: rotate(0deg);
   }

src/pages/ContactsPage.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
-import { Search, RefreshCw, X, User, Users, MessageSquare, Loader2, FolderOpen, Download } from 'lucide-react'
+import { Search, RefreshCw, X, User, Users, MessageSquare, Loader2, FolderOpen, Download, ChevronDown } from 'lucide-react'
 import './ContactsPage.scss'
 
 interface ContactInfo {
@@ -27,6 +27,8 @@ function ContactsPage() {
     const [exportAvatars, setExportAvatars] = useState(true)
     const [exportFolder, setExportFolder] = useState('')
     const [isExporting, setIsExporting] = useState(false)
+    const [showFormatSelect, setShowFormatSelect] = useState(false)
+    const formatDropdownRef = useRef<HTMLDivElement>(null)
 
     // 加载通讯录
     const loadContacts = useCallback(async () => {
@@ -102,6 +104,18 @@ function ContactsPage() {
         setFilteredContacts(filtered)
     }, [searchKeyword, contacts, contactTypes])
 
+    // 点击外部关闭下拉菜单
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            const target = event.target as Node
+            if (showFormatSelect && formatDropdownRef.current && !formatDropdownRef.current.contains(target)) {
+                setShowFormatSelect(false)
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside)
+        return () => document.removeEventListener('mousedown', handleClickOutside)
+    }, [showFormatSelect])
+
     const getAvatarLetter = (name: string) => {
         if (!name) return '?'
         return [...name][0] || '?'
@@ -173,16 +187,27 @@ function ContactsPage() {
         }
     }
 
+    const exportFormatOptions = [
+        { value: 'json', label: 'JSON', desc: '详细格式，包含完整联系人信息' },
+        { value: 'csv', label: 'CSV (Excel)', desc: '电子表格格式，适合Excel查看' },
+        { value: 'vcf', label: 'VCF (vCard)', desc: '标准名片格式，支持导入手机' }
+    ]
+
+    const getOptionLabel = (value: string) => {
+        return exportFormatOptions.find(opt => opt.value === value)?.label || value
+    }
+
     return (
         <div className="contacts-page">
-            <div className="page-header">
+            {/* 左侧：联系人列表 */}
-                <h1>通讯录</h1>
+            <div className="contacts-panel">
+                <div className="panel-header">
+                    <h2>通讯录</h2>
                     <button className="icon-btn" onClick={loadContacts} disabled={isLoading}>
                         <RefreshCw size={18} className={isLoading ? 'spin' : ''} />
                     </button>
                 </div>
 
-            <div className="contacts-filters">
                 <div className="search-bar">
                     <Search size={16} />
                     <input
@@ -203,7 +228,7 @@ function ContactsPage() {
                         <input
                             type="checkbox"
                             checked={contactTypes.friends}
-                            onChange={e => setContactTypes(prev => ({ ...prev, friends: e.target.checked }))}
+                            onChange={e => setContactTypes({ ...contactTypes, friends: e.target.checked })}
                         />
                         <div className="custom-checkbox"></div>
                         <User size={16} />
@@ -213,7 +238,7 @@ function ContactsPage() {
                         <input
                             type="checkbox"
                             checked={contactTypes.groups}
-                            onChange={e => setContactTypes(prev => ({ ...prev, groups: e.target.checked }))}
+                            onChange={e => setContactTypes({ ...contactTypes, groups: e.target.checked })}
                         />
                         <div className="custom-checkbox"></div>
                         <Users size={16} />
@@ -223,7 +248,7 @@ function ContactsPage() {
                         <input
                             type="checkbox"
                             checked={contactTypes.officials}
-                            onChange={e => setContactTypes(prev => ({ ...prev, officials: e.target.checked }))}
+                            onChange={e => setContactTypes({ ...contactTypes, officials: e.target.checked })}
                         />
                         <div className="custom-checkbox"></div>
                         <MessageSquare size={16} />
@@ -234,50 +259,7 @@ function ContactsPage() {
                 <div className="contacts-count">
                     共 {filteredContacts.length} 个联系人
                 </div>
-            </div>
 
-            {/* 导出区域 */}
-            <div className="export-section">
-                <h3>导出通讯录</h3>
-
-                <div className="export-format">
-                    <label>导出格式：</label>
-                    <select value={exportFormat} onChange={e => setExportFormat(e.target.value as 'json' | 'csv' | 'vcf')}>
-                        <option value="json">JSON</option>
-                        <option value="csv">CSV</option>
-                        <option value="vcf">VCF (vCard)</option>
-                    </select>
-                </div>
-
-                <div className="export-options">
-                    <label>
-                        <input
-                            type="checkbox"
-                            checked={exportAvatars}
-                            onChange={e => setExportAvatars(e.target.checked)}
-                        />
-                        <span>导出头像</span>
-                    </label>
-                </div>
-
-                <div className="export-folder">
-                    <button onClick={selectExportFolder} className="folder-btn">
-                        <FolderOpen size={16} />
-                        <span>{exportFolder || '选择导出位置'}</span>
-                    </button>
-                </div>
-
-                <button
-                    className="export-action-btn"
-                    onClick={startExport}
-                    disabled={!exportFolder || isExporting}
-                >
-                    <Download size={16} />
-                    <span>{isExporting ? '导出中...' : '开始导出'}</span>
-                </button>
-            </div>
-
-            <div className="contacts-content">
                 {isLoading ? (
                     <div className="loading-state">
                         <Loader2 size={32} className="spin" />
@@ -313,6 +295,91 @@ function ContactsPage() {
                     </div>
                 )}
             </div>
+
+            {/* 右侧：导出设置 */}
+            <div className="settings-panel">
+                <div className="panel-header">
+                    <h2>导出设置</h2>
+                </div>
+
+                <div className="settings-content">
+                    <div className="setting-section">
+                        <h3>导出格式</h3>
+                        <div className="format-select" ref={formatDropdownRef}>
+                            <button
+                                type="button"
+                                className={`select-trigger ${showFormatSelect ? 'open' : ''}`}
+                                onClick={() => setShowFormatSelect(!showFormatSelect)}
+                            >
+                                <span className="select-value">{getOptionLabel(exportFormat)}</span>
+                                <ChevronDown size={16} />
+                            </button>
+                            {showFormatSelect && (
+                                <div className="select-dropdown">
+                                    {exportFormatOptions.map(option => (
+                                        <button
+                                            key={option.value}
+                                            type="button"
+                                            className={`select-option ${exportFormat === option.value ? 'active' : ''}`}
+                                            onClick={() => {
+                                                setExportFormat(option.value as 'json' | 'csv' | 'vcf')
+                                                setShowFormatSelect(false)
+                                            }}
+                                        >
+                                            <span className="option-label">{option.label}</span>
+                                            <span className="option-desc">{option.desc}</span>
+                                        </button>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    <div className="setting-section">
+                        <h3>导出选项</h3>
+                        <label className="checkbox-item">
+                            <input
+                                type="checkbox"
+                                checked={exportAvatars}
+                                onChange={e => setExportAvatars(e.target.checked)}
+                            />
+                            <span>导出头像</span>
+                        </label>
+                    </div>
+
+                    <div className="setting-section">
+                        <h3>导出位置</h3>
+                        <div className="export-path-display">
+                            <FolderOpen size={16} />
+                            <span>{exportFolder || '未设置'}</span>
+                        </div>
+                        <button className="select-folder-btn" onClick={selectExportFolder}>
+                            <FolderOpen size={16} />
+                            <span>选择导出目录</span>
+                        </button>
+                    </div>
+                </div>
+
+                <div className="export-action">
+                    <button
+                        className="export-btn"
+                        onClick={startExport}
+                        disabled={!exportFolder || isExporting}
+                    >
+                        {isExporting ? (
+                            <>
+                                <Loader2 size={18} className="spin" />
+                                <span>导出中...</span>
+                            </>
+                        ) : (
+                            <>
+                                <Download size={18} />
+                                <span>开始导出</span>
+                            </>
+                        )}
+                    </button>
+                </div>
+            </div>
         </div>
     )
 }