新增了导出联系人的功能

electron/main.ts

@@ -18,6 +18,7 @@ import { KeyService } from './services/keyService'
 import { voiceTranscribeService } from './services/voiceTranscribeService'
 import { videoService } from './services/videoService'
 import { snsService } from './services/snsService'
+import { contactExportService } from './services/contactExportService'
 
 
 // 配置自动更新
@@ -625,11 +626,15 @@ function registerIpcHandlers() {
   })
 
   ipcMain.handle('chat:getContact', async (_, username: string) => {
-    return chatService.getContact(username)
+    return await chatService.getContact(username)
   })
 
   ipcMain.handle('chat:getContactAvatar', async (_, username: string) => {
-    return chatService.getContactAvatar(username)
+    return await chatService.getContactAvatar(username)
+  })
+
+  ipcMain.handle('chat:getContacts', async () => {
+    return await chatService.getContacts()
   })
 
   ipcMain.handle('chat:getCachedMessages', async (_, sessionId: string) => {
@@ -710,6 +715,10 @@ function registerIpcHandlers() {
     return exportService.exportSessionToChatLab(sessionId, outputPath, options)
   })
 
+  ipcMain.handle('export:exportContacts', async (_, outputDir: string, options: any) => {
+    return contactExportService.exportContacts(outputDir, options)
+  })
+
   // 数据分析相关
   ipcMain.handle('analytics:getOverallStatistics', async (_, force?: boolean) => {
     return analyticsService.getOverallStatistics(force)

electron/preload.ts

@@ -120,7 +120,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
       return () => ipcRenderer.removeListener('chat:voiceTranscriptPartial', listener)
     },
     execQuery: (kind: string, path: string | null, sql: string) =>
-      ipcRenderer.invoke('chat:execQuery', kind, path, sql)
+      ipcRenderer.invoke('chat:execQuery', kind, path, sql),
+    getContacts: () => ipcRenderer.invoke('chat:getContacts')
   },
 
 
@@ -194,6 +195,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
       ipcRenderer.invoke('export:exportSessions', sessionIds, outputDir, options),
     exportSession: (sessionId: string, outputPath: string, options: any) =>
       ipcRenderer.invoke('export:exportSession', sessionId, outputPath, options),
+    exportContacts: (outputDir: string, options: any) =>
+      ipcRenderer.invoke('export:exportContacts', outputDir, options),
     onProgress: (callback: (payload: { current: number; total: number; currentSession: string; phase: string }) => void) => {
       ipcRenderer.on('export:progress', (_, payload) => callback(payload))
       return () => ipcRenderer.removeAllListeners('export:progress')

electron/services/chatService.ts

@@ -67,6 +67,15 @@ export interface Contact {
   nickName: string
 }
 
+export interface ContactInfo {
+  username: string
+  displayName: string
+  remark?: string
+  nickname?: string
+  avatarUrl?: string
+  type: 'friend' | 'group' | 'official' | 'other'
+}
+
 // 表情包缓存
 const emojiCache: Map<string, string> = new Map()
 const emojiDownloading: Map<string, Promise<string | null>> = new Map()
@@ -494,6 +503,153 @@ class ChatService {
     }
   }
 
+  /**
+   * 获取通讯录列表
+   */
+  async getContacts(): Promise<{ success: boolean; contacts?: ContactInfo[]; error?: string }> {
+    try {
+      const connectResult = await this.ensureConnected()
+      if (!connectResult.success) {
+        return { success: false, error: connectResult.error }
+      }
+
+      // 使用execQuery直接查询加密的contact.db
+      // kind='contact', path=null表示使用已打开的contact.db
+      const contactQuery = `
+        SELECT username, remark, nick_name, alias, local_type
+        FROM contact
+      `
+
+      console.log('查询contact.db...')
+      const contactResult = await wcdbService.execQuery('contact', null, contactQuery)
+
+      if (!contactResult.success || !contactResult.rows) {
+        console.error('查询联系人失败:', contactResult.error)
+        return { success: false, error: contactResult.error || '查询联系人失败' }
+      }
+
+      console.log('查询到', contactResult.rows.length, '条联系人记录')
+      const rows = contactResult.rows as Record<string, any>[]
+
+      // 调试：显示前5条数据样本
+      console.log('📋 前5条数据样本:')
+      rows.slice(0, 5).forEach((row, idx) => {
+        console.log(`  ${idx + 1}. username: ${row.username}, local_type: ${row.local_type}, remark: ${row.remark || '无'}, nick_name: ${row.nick_name || '无'}`)
+      })
+
+      // 调试：统计local_type分布
+      const localTypeStats = new Map<number, number>()
+      rows.forEach(row => {
+        const lt = row.local_type || 0
+        localTypeStats.set(lt, (localTypeStats.get(lt) || 0) + 1)
+      })
+      console.log('📊 local_type分布:', Object.fromEntries(localTypeStats))
+
+      // 获取会话表的最后联系时间用于排序
+      const lastContactTimeMap = new Map<string, number>()
+      const sessionResult = await wcdbService.getSessions()
+      if (sessionResult.success && sessionResult.sessions) {
+        for (const session of sessionResult.sessions as any[]) {
+          const username = session.username || session.user_name || session.userName || ''
+          const timestamp = session.sort_timestamp || session.sortTimestamp || 0
+          if (username && timestamp) {
+            lastContactTimeMap.set(username, timestamp)
+          }
+        }
+      }
+
+      // 转换为ContactInfo
+      const contacts: (ContactInfo & { lastContactTime: number })[] = []
+
+      for (const row of rows) {
+        const username = row.username || ''
+
+        // 过滤系统账号和特殊账号 - 完全复制cipher的逻辑
+        if (!username) continue
+        if (username === 'filehelper' || username === 'fmessage' || username === 'floatbottle' ||
+          username === 'medianote' || username === 'newsapp' || username.startsWith('fake_') ||
+          username === 'weixin' || username === 'qmessage' || username === 'qqmail' ||
+          username === 'tmessage' || username.startsWith('wxid_') === false &&
+          username.includes('@') === false && username.startsWith('gh_') === false &&
+          /^[a-zA-Z0-9_-]+$/.test(username) === false) {
+          continue
+        }
+
+        // 判断类型 - 正确规则：wxid开头且有alias的是好友
+        let type: 'friend' | 'group' | 'official' | 'other' = 'other'
+        const localType = row.local_type || 0
+
+        if (username.includes('@chatroom')) {
+          type = 'group'
+        } else if (username.startsWith('gh_')) {
+          type = 'official'
+        } else if (localType === 3 || localType === 4) {
+          type = 'official'
+        } else if (username.startsWith('wxid_') && row.alias) {
+          // wxid开头且有alias的是好友
+          type = 'friend'
+        } else if (localType === 1) {
+          // local_type=1 也是好友
+          type = 'friend'
+        } else if (localType === 2) {
+          // local_type=2 是群成员但非好友，跳过
+          continue
+        } else if (localType === 0) {
+          // local_type=0 可能是好友或其他，检查是否有备注或昵称
+          if (row.remark || row.nick_name) {
+            type = 'friend'
+          } else {
+            continue
+          }
+        } else {
+          // 其他未知类型，跳过
+          continue
+        }
+
+        const displayName = row.remark || row.nick_name || row.alias || username
+
+        contacts.push({
+          username,
+          displayName,
+          remark: row.remark || undefined,
+          nickname: row.nick_name || undefined,
+          avatarUrl: undefined,
+          type,
+          lastContactTime: lastContactTimeMap.get(username) || 0
+        })
+      }
+
+      console.log('过滤后得到', contacts.length, '个有效联系人')
+      console.log('📊 按类型统计:', {
+        friends: contacts.filter(c => c.type === 'friend').length,
+        groups: contacts.filter(c => c.type === 'group').length,
+        officials: contacts.filter(c => c.type === 'official').length,
+        other: contacts.filter(c => c.type === 'other').length
+      })
+
+      // 按最近联系时间排序
+      contacts.sort((a, b) => {
+        const timeA = a.lastContactTime || 0
+        const timeB = b.lastContactTime || 0
+        if (timeA && timeB) {
+          return timeB - timeA
+        }
+        if (timeA && !timeB) return -1
+        if (!timeA && timeB) return 1
+        return a.displayName.localeCompare(b.displayName, 'zh-CN')
+      })
+
+      // 移除临时的lastContactTime字段
+      const result = contacts.map(({ lastContactTime, ...rest }) => rest)
+
+      console.log('返回', result.length, '个联系人')
+      return { success: true, contacts: result }
+    } catch (e) {
+      console.error('ChatService: 获取通讯录失败:', e)
+      return { success: false, error: String(e) }
+    }
+  }
+
   /**
    * 获取消息列表（支持跨多个数据库合并，已优化）
    */

electron/services/contactExportService.ts

@@ -0,0 +1,159 @@
+import * as fs from 'fs'
+import * as path from 'path'
+import { chatService } from './chatService'
+
+interface ContactExportOptions {
+    format: 'json' | 'csv' | 'vcf'
+    exportAvatars: boolean
+    contactTypes: {
+        friends: boolean
+        groups: boolean
+        officials: boolean
+    }
+}
+
+/**
+ * 联系人导出服务
+ */
+class ContactExportService {
+    /**
+     * 导出联系人
+     */
+    async exportContacts(
+        outputDir: string,
+        options: ContactExportOptions
+    ): Promise<{ success: boolean; successCount?: number; error?: string }> {
+        try {
+            // 获取所有联系人
+            const contactsResult = await chatService.getContacts()
+            if (!contactsResult.success || !contactsResult.contacts) {
+                return { success: false, error: contactsResult.error || '获取联系人失败' }
+            }
+
+            let contacts = contactsResult.contacts
+
+            // 根据类型过滤
+            contacts = contacts.filter(c => {
+                if (c.type === 'friend' && !options.contactTypes.friends) return false
+                if (c.type === 'group' && !options.contactTypes.groups) return false
+                if (c.type === 'official' && !options.contactTypes.officials) return false
+                return true
+            })
+
+            if (contacts.length === 0) {
+                return { success: false, error: '没有符合条件的联系人' }
+            }
+
+            // 确保输出目录存在
+            if (!fs.existsSync(outputDir)) {
+                fs.mkdirSync(outputDir, { recursive: true })
+            }
+
+            const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5)
+            let outputPath: string
+
+            switch (options.format) {
+                case 'json':
+                    outputPath = path.join(outputDir, `contacts_${timestamp}.json`)
+                    await this.exportToJSON(contacts, outputPath)
+                    break
+                case 'csv':
+                    outputPath = path.join(outputDir, `contacts_${timestamp}.csv`)
+                    await this.exportToCSV(contacts, outputPath)
+                    break
+                case 'vcf':
+                    outputPath = path.join(outputDir, `contacts_${timestamp}.vcf`)
+                    await this.exportToVCF(contacts, outputPath)
+                    break
+                default:
+                    return { success: false, error: '不支持的导出格式' }
+            }
+
+            return { success: true, successCount: contacts.length }
+        } catch (e) {
+            return { success: false, error: String(e) }
+        }
+    }
+
+    /**
+     * 导出为JSON格式
+     */
+    private async exportToJSON(contacts: any[], outputPath: string): Promise<void> {
+        const data = {
+            exportedAt: new Date().toISOString(),
+            count: contacts.length,
+            contacts: contacts.map(c => ({
+                username: c.username,
+                displayName: c.displayName,
+                remark: c.remark,
+                nickname: c.nickname,
+                type: c.type
+            }))
+        }
+        fs.writeFileSync(outputPath, JSON.stringify(data, null, 2), 'utf-8')
+    }
+
+    /**
+     * 导出为CSV格式
+     */
+    private async exportToCSV(contacts: any[], outputPath: string): Promise<void> {
+        const headers = ['用户名', '显示名称', '备注', '昵称', '类型']
+        const rows = contacts.map(c => [
+            c.username || '',
+            c.displayName || '',
+            c.remark || '',
+            c.nickname || '',
+            this.getTypeLabel(c.type)
+        ])
+
+        const csvContent = [
+            headers.join(','),
+            ...rows.map(row => row.map(cell => `"${cell}"`).join(','))
+        ].join('\n')
+
+        fs.writeFileSync(outputPath, '\uFEFF' + csvContent, 'utf-8') // 添加BOM以支持Excel
+    }
+
+    /**
+     * 导出为VCF格式（vCard）
+     */
+    private async exportToVCF(contacts: any[], outputPath: string): Promise<void> {
+        const vcards = contacts
+            .filter(c => c.type === 'friend') // VCF通常只用于个人联系人
+            .map(c => {
+                const lines = ['BEGIN:VCARD', 'VERSION:3.0']
+
+                // 全名
+                lines.push(`FN:${c.displayName || c.username}`)
+
+                // 昵称
+                if (c.nickname) {
+                    lines.push(`NICKNAME:${c.nickname}`)
+                }
+
+                // 备注
+                if (c.remark) {
+                    lines.push(`NOTE:${c.remark}`)
+                }
+
+                // 微信ID
+                lines.push(`X-WECHAT-ID:${c.username}`)
+
+                lines.push('END:VCARD')
+                return lines.join('\r\n')
+            })
+
+        fs.writeFileSync(outputPath, vcards.join('\r\n\r\n'), 'utf-8')
+    }
+
+    private getTypeLabel(type: string): string {
+        switch (type) {
+            case 'friend': return '好友'
+            case 'group': return '群聊'
+            case 'official': return '公众号'
+            default: return '其他'
+        }
+    }
+}
+
+export const contactExportService = new ContactExportService()

src/App.tsx

@@ -17,6 +17,7 @@ import SettingsPage from './pages/SettingsPage'
 import ExportPage from './pages/ExportPage'
 import VideoWindow from './pages/VideoWindow'
 import SnsPage from './pages/SnsPage'
+import ContactsPage from './pages/ContactsPage'
 
 import { useAppStore } from './stores/appStore'
 import { themes, useThemeStore, type ThemeId } from './stores/themeStore'
@@ -344,6 +345,7 @@ function App() {
               <Route path="/settings" element={<SettingsPage />} />
               <Route path="/export" element={<ExportPage />} />
               <Route path="/sns" element={<SnsPage />} />
+              <Route path="/contacts" element={<ContactsPage />} />
             </Routes>
           </RouteGuard>
         </main>

src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
-import { Home, MessageSquare, BarChart3, Users, FileText, Database, Settings, ChevronLeft, ChevronRight, Download, Bot, Aperture } from 'lucide-react'
+import { Home, MessageSquare, BarChart3, Users, FileText, Database, Settings, ChevronLeft, ChevronRight, Download, Bot, Aperture, UserCircle } from 'lucide-react'
 import './Sidebar.scss'
 
 function Sidebar() {
@@ -44,7 +44,15 @@ function Sidebar() {
           <span className="nav-label">朋友圈</span>
         </NavLink>
 
-
+        {/* 通讯录 */}
+        <NavLink
+          to="/contacts"
+          className={`nav-item ${isActive('/contacts') ? 'active' : ''}`}
+          title={collapsed ? '通讯录' : undefined}
+        >
+          <span className="nav-icon"><UserCircle size={20} /></span>
+          <span className="nav-label">通讯录</span>
+        </NavLink>
 
         {/* 私聊分析 */}
         <NavLink

src/pages/ContactsPage.scss

@@ -0,0 +1,469 @@
+.contacts-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 2rem;
+  gap: 1.5rem;
+  overflow: hidden;
+
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+
+    h1 {
+      font-size: 1.75rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin: 0;
+    }
+
+    .icon-btn {
+      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) {
+        background: var(--bg-tertiary);
+        color: var(--text-primary);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      svg.spin {
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+
+  .contacts-filters {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    .search-bar {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem 1rem;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-primary);
+      border-radius: 12px;
+      transition: all 0.2s;
+
+      &:focus-within {
+        border-color: var(--brand-primary);
+        box-shadow: 0 0 0 3px var(--brand-primary-alpha);
+      }
+
+      svg {
+        color: var(--text-tertiary);
+        flex-shrink: 0;
+      }
+
+      input {
+        flex: 1;
+        border: none;
+        background: transparent;
+        color: var(--text-primary);
+        font-size: 0.9375rem;
+        outline: none;
+
+        &::placeholder {
+          color: var(--text-tertiary);
+        }
+      }
+
+      .clear-btn {
+        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);
+          color: var(--text-secondary);
+        }
+      }
+    }
+
+    .type-filters {
+      display: flex;
+      gap: 1.5rem;
+      flex-wrap: wrap;
+
+      .filter-checkbox {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+        user-select: none;
+
+        input[type="checkbox"] {
+          position: absolute;
+          opacity: 0;
+          pointer-events: none;
+
+          &:checked+.custom-checkbox {
+            background: var(--brand-primary);
+            border-color: var(--brand-primary);
+
+            &::after {
+              opacity: 1;
+              transform: scale(1);
+            }
+          }
+        }
+
+        .custom-checkbox {
+          position: relative;
+          width: 18px;
+          height: 18px;
+          border: 2px solid var(--border-secondary);
+          border-radius: 4px;
+          background: var(--bg-primary);
+          transition: all 0.2s;
+
+          &::after {
+            content: '';
+            position: absolute;
+            left: 4px;
+            top: 1px;
+            width: 4px;
+            height: 8px;
+            border: solid white;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg) scale(0);
+            opacity: 0;
+            transition: all 0.2s;
+          }
+        }
+
+        svg {
+          color: var(--text-secondary);
+          flex-shrink: 0;
+        }
+
+        span {
+          color: var(--text-primary);
+          font-size: 0.9375rem;
+        }
+
+        &:hover .custom-checkbox {
+          border-color: var(--brand-primary);
+        }
+      }
+    }
+
+    .contacts-count {
+      font-size: 0.875rem;
+      color: var(--text-tertiary);
+    }
+  }
+
+  .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;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+      color: var(--text-tertiary);
+
+      svg.spin {
+        animation: spin 1s linear infinite;
+        color: var(--brand-primary);
+      }
+    }
+
+    .contacts-list {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      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);
+        border-radius: 3px;
+
+        &:hover {
+          background: var(--border-primary);
+        }
+      }
+
+      .contact-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 1rem;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-primary);
+        border-radius: 12px;
+        transition: all 0.2s;
+
+        &:hover {
+          background: var(--bg-tertiary);
+          border-color: var(--border-secondary);
+        }
+
+        .contact-avatar {
+          width: 48px;
+          height: 48px;
+          border-radius: 50%;
+          overflow: hidden;
+          background: var(--bg-tertiary);
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          span {
+            font-size: 1.25rem;
+            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-weight: 500;
+            color: var(--text-primary);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .contact-remark {
+            font-size: 0.875rem;
+            color: var(--text-tertiary);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+        .contact-type {
+          display: flex;
+          align-items: center;
+          gap: 0.375rem;
+          padding: 0.375rem 0.75rem;
+          border-radius: 6px;
+          font-size: 0.8125rem;
+          font-weight: 500;
+          flex-shrink: 0;
+
+          &.friend {
+            background: var(--brand-primary-alpha);
+            color: var(--brand-primary);
+          }
+
+          &.group {
+            background: rgba(52, 211, 153, 0.1);
+            color: rgb(52, 211, 153);
+          }
+
+          &.official {
+            background: rgba(251, 191, 36, 0.1);
+            color: rgb(251, 191, 36);
+          }
+
+          &.other {
+            background: var(--bg-tertiary);
+            color: var(--text-tertiary);
+          }
+
+          svg {
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

src/pages/ContactsPage.tsx

@@ -0,0 +1,320 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Search, RefreshCw, X, User, Users, MessageSquare, Loader2, FolderOpen, Download } from 'lucide-react'
+import './ContactsPage.scss'
+
+interface ContactInfo {
+    username: string
+    displayName: string
+    remark?: string
+    nickname?: string
+    avatarUrl?: string
+    type: 'friend' | 'group' | 'official' | 'other'
+}
+
+function ContactsPage() {
+    const [contacts, setContacts] = useState<ContactInfo[]>([])
+    const [filteredContacts, setFilteredContacts] = useState<ContactInfo[]>([])
+    const [isLoading, setIsLoading] = useState(true)
+    const [searchKeyword, setSearchKeyword] = useState('')
+    const [contactTypes, setContactTypes] = useState({
+        friends: true,
+        groups: true,
+        officials: true
+    })
+
+    // 导出相关状态
+    const [exportFormat, setExportFormat] = useState<'json' | 'csv' | 'vcf'>('json')
+    const [exportAvatars, setExportAvatars] = useState(true)
+    const [exportFolder, setExportFolder] = useState('')
+    const [isExporting, setIsExporting] = useState(false)
+
+    // 加载通讯录
+    const loadContacts = useCallback(async () => {
+        setIsLoading(true)
+        try {
+            const result = await window.electronAPI.chat.connect()
+            if (!result.success) {
+                console.error('连接失败:', result.error)
+                setIsLoading(false)
+                return
+            }
+            const contactsResult = await window.electronAPI.chat.getContacts()
+            console.log('📞 getContacts结果:', contactsResult)
+            if (contactsResult.success && contactsResult.contacts) {
+                console.log('📊 总联系人数:', contactsResult.contacts.length)
+                console.log('📊 按类型统计:', {
+                    friends: contactsResult.contacts.filter(c => c.type === 'friend').length,
+                    groups: contactsResult.contacts.filter(c => c.type === 'group').length,
+                    officials: contactsResult.contacts.filter(c => c.type === 'official').length,
+                    other: contactsResult.contacts.filter(c => c.type === 'other').length
+                })
+
+                // 获取头像URL
+                const usernames = contactsResult.contacts.map(c => c.username)
+                if (usernames.length > 0) {
+                    const avatarResult = await window.electronAPI.chat.enrichSessionsContactInfo(usernames)
+                    if (avatarResult.success && avatarResult.contacts) {
+                        contactsResult.contacts.forEach(contact => {
+                            const enriched = avatarResult.contacts?.[contact.username]
+                            if (enriched?.avatarUrl) {
+                                contact.avatarUrl = enriched.avatarUrl
+                            }
+                        })
+                    }
+                }
+
+                setContacts(contactsResult.contacts)
+                setFilteredContacts(contactsResult.contacts)
+            }
+        } catch (e) {
+            console.error('加载通讯录失败:', e)
+        } finally {
+            setIsLoading(false)
+        }
+    }, [])
+
+    useEffect(() => {
+        loadContacts()
+    }, [loadContacts])
+
+    // 搜索和类型过滤
+    useEffect(() => {
+        let filtered = contacts
+
+        // 类型过滤
+        filtered = filtered.filter(c => {
+            if (c.type === 'friend' && !contactTypes.friends) return false
+            if (c.type === 'group' && !contactTypes.groups) return false
+            if (c.type === 'official' && !contactTypes.officials) return false
+            return true
+        })
+
+        // 关键词过滤
+        if (searchKeyword.trim()) {
+            const lower = searchKeyword.toLowerCase()
+            filtered = filtered.filter(c =>
+                c.displayName?.toLowerCase().includes(lower) ||
+                c.remark?.toLowerCase().includes(lower) ||
+                c.username.toLowerCase().includes(lower)
+            )
+        }
+
+        setFilteredContacts(filtered)
+    }, [searchKeyword, contacts, contactTypes])
+
+    const getAvatarLetter = (name: string) => {
+        if (!name) return '?'
+        return [...name][0] || '?'
+    }
+
+    const getContactTypeIcon = (type: string) => {
+        switch (type) {
+            case 'friend': return <User size={14} />
+            case 'group': return <Users size={14} />
+            case 'official': return <MessageSquare size={14} />
+            default: return <User size={14} />
+        }
+    }
+
+    const getContactTypeName = (type: string) => {
+        switch (type) {
+            case 'friend': return '好友'
+            case 'group': return '群聊'
+            case 'official': return '公众号'
+            default: return '其他'
+        }
+    }
+
+    // 选择导出文件夹
+    const selectExportFolder = async () => {
+        try {
+            const result = await window.electronAPI.dialog.openDirectory({
+                title: '选择导出位置'
+            })
+            if (result && !result.canceled && result.filePaths && result.filePaths.length > 0) {
+                setExportFolder(result.filePaths[0])
+            }
+        } catch (e) {
+            console.error('选择文件夹失败:', e)
+        }
+    }
+
+    // 开始导出
+    const startExport = async () => {
+        if (!exportFolder) {
+            alert('请先选择导出位置')
+            return
+        }
+
+        setIsExporting(true)
+        try {
+            const exportOptions = {
+                format: exportFormat,
+                exportAvatars,
+                contactTypes: {
+                    friends: contactTypes.friends,
+                    groups: contactTypes.groups,
+                    officials: contactTypes.officials
+                }
+            }
+
+            const result = await window.electronAPI.export.exportContacts(exportFolder, exportOptions)
+
+            if (result.success) {
+                alert(`导出成功！共导出 ${result.successCount} 个联系人`)
+            } else {
+                alert(`导出失败：${result.error}`)
+            }
+        } catch (e) {
+            console.error('导出失败:', e)
+            alert(`导出失败：${String(e)}`)
+        } finally {
+            setIsExporting(false)
+        }
+    }
+
+    return (
+        <div className="contacts-page">
+            <div className="page-header">
+                <h1>通讯录</h1>
+                <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
+                        type="text"
+                        placeholder="搜索联系人..."
+                        value={searchKeyword}
+                        onChange={e => setSearchKeyword(e.target.value)}
+                    />
+                    {searchKeyword && (
+                        <button className="clear-btn" onClick={() => setSearchKeyword('')}>
+                            <X size={14} />
+                        </button>
+                    )}
+                </div>
+
+                <div className="type-filters">
+                    <label className="filter-checkbox">
+                        <input
+                            type="checkbox"
+                            checked={contactTypes.friends}
+                            onChange={e => setContactTypes(prev => ({ ...prev, friends: e.target.checked }))}
+                        />
+                        <div className="custom-checkbox"></div>
+                        <User size={16} />
+                        <span>好友</span>
+                    </label>
+                    <label className="filter-checkbox">
+                        <input
+                            type="checkbox"
+                            checked={contactTypes.groups}
+                            onChange={e => setContactTypes(prev => ({ ...prev, groups: e.target.checked }))}
+                        />
+                        <div className="custom-checkbox"></div>
+                        <Users size={16} />
+                        <span>群聊</span>
+                    </label>
+                    <label className="filter-checkbox">
+                        <input
+                            type="checkbox"
+                            checked={contactTypes.officials}
+                            onChange={e => setContactTypes(prev => ({ ...prev, officials: e.target.checked }))}
+                        />
+                        <div className="custom-checkbox"></div>
+                        <MessageSquare size={16} />
+                        <span>公众号</span>
+                    </label>
+                </div>
+
+                <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" />
+                        <span>加载中...</span>
+                    </div>
+                ) : filteredContacts.length === 0 ? (
+                    <div className="empty-state">
+                        <span>暂无联系人</span>
+                    </div>
+                ) : (
+                    <div className="contacts-list">
+                        {filteredContacts.map(contact => (
+                            <div key={contact.username} className="contact-item">
+                                <div className="contact-avatar">
+                                    {contact.avatarUrl ? (
+                                        <img src={contact.avatarUrl} alt="" />
+                                    ) : (
+                                        <span>{getAvatarLetter(contact.displayName)}</span>
+                                    )}
+                                </div>
+                                <div className="contact-info">
+                                    <div className="contact-name">{contact.displayName}</div>
+                                    {contact.remark && contact.remark !== contact.displayName && (
+                                        <div className="contact-remark">备注: {contact.remark}</div>
+                                    )}
+                                </div>
+                                <div className={`contact-type ${contact.type}`}>
+                                    {getContactTypeIcon(contact.type)}
+                                    <span>{getContactTypeName(contact.type)}</span>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default ContactsPage

src/types/electron.d.ts

@@ -1,4 +1,4 @@
-import type { ChatSession, Message, Contact } from './models'
+import type { ChatSession, Message, Contact, ContactInfo } from './models'
 
 export interface ElectronAPI {
   window: {
@@ -76,6 +76,11 @@ export interface ElectronAPI {
     }>
     getContact: (username: string) => Promise<Contact | null>
     getContactAvatar: (username: string) => Promise<{ avatarUrl?: string; displayName?: string } | null>
+    getContacts: () => Promise<{
+      success: boolean
+      contacts?: ContactInfo[]
+      error?: string
+    }>
     getMyAvatarUrl: () => Promise<{ success: boolean; avatarUrl?: string; error?: string }>
     downloadEmoji: (cdnUrl: string, md5?: string) => Promise<{ success: boolean; localPath?: string; error?: string }>
     close: () => Promise<boolean>
@@ -315,6 +320,11 @@ export interface ElectronAPI {
       success: boolean
       error?: string
     }>
+    exportContacts: (outputDir: string, options: { format: 'json' | 'csv' | 'vcf'; exportAvatars: boolean; contactTypes: { friends: boolean; groups: boolean; officials: boolean } }) => Promise<{
+      success: boolean
+      successCount?: number
+      error?: string
+    }>
     onProgress: (callback: (payload: ExportProgress) => void) => () => void
   }
   whisper: {

src/types/models.ts

@@ -23,6 +23,15 @@ export interface Contact {
   smallHeadUrl: string
 }
 
+export interface ContactInfo {
+  username: string
+  displayName: string
+  remark?: string
+  nickname?: string
+  avatarUrl?: string
+  type: 'friend' | 'group' | 'official' | 'other'
+}
+
 // 消息
 export interface Message {
   localId: number