fix: 更新release.yml，移除ignore_labels的默认值以支持自定义标签

fix：修复了语音解密

.github/workflows/release.yml

@@ -54,7 +54,7 @@ jobs:
                   "filter": { "pattern": "^(chore|docs|perf|refactor):.*", "flags": "i" }
                 }
               ],
-              "ignore_labels": true,
+              "ignore_labels": [],
               "commitMode": true,
               "empty_summary": "##  更新详情\n- 常规代码优化与维护"
             }

electron/main.ts

@@ -390,6 +390,10 @@ function registerIpcHandlers() {
     return chatService.getSessions()
   })
 
+  ipcMain.handle('chat:enrichSessionsContactInfo', async (_, usernames: string[]) => {
+    return chatService.enrichSessionsContactInfo(usernames)
+  })
+
   ipcMain.handle('chat:getMessages', async (_, sessionId: string, offset?: number, limit?: number) => {
     return chatService.getMessages(sessionId, offset, limit)
   })

electron/preload.ts

@@ -91,6 +91,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
   chat: {
     connect: () => ipcRenderer.invoke('chat:connect'),
     getSessions: () => ipcRenderer.invoke('chat:getSessions'),
+    enrichSessionsContactInfo: (usernames: string[]) =>
+      ipcRenderer.invoke('chat:enrichSessionsContactInfo', usernames),
     getMessages: (sessionId: string, offset?: number, limit?: number) =>
       ipcRenderer.invoke('chat:getMessages', sessionId, offset, limit),
     getLatestMessages: (sessionId: string, limit?: number) =>

electron/services/chatService.ts

@@ -166,7 +166,7 @@ class ChatService {
   }
 
   /**
-   * 获取会话列表
+   * 获取会话列表（优化：先返回基础数据，不等待联系人信息加载）
    */
   async getSessions(): Promise<{ success: boolean; sessions?: ChatSession[]; error?: string }> {
     try {
@@ -189,8 +189,10 @@ class ChatService {
         return { success: false, error: `会话表异常: ${detail}${tableInfo}${tables}${columns}` }
       }
 
-      // 转换为 ChatSession
+      // 转换为 ChatSession（先加载缓存，但不等待数据库查询）
       const sessions: ChatSession[] = []
+      const now = Date.now()
+      
       for (const row of rows) {
         const username =
           row.username ||
@@ -225,6 +227,15 @@ class ChatService {
         const summary = this.cleanString(row.summary || row.digest || row.last_msg || row.lastMsg || '')
         const lastMsgType = parseInt(row.last_msg_type || row.lastMsgType || '0', 10)
 
+        // 先尝试从缓存获取联系人信息（快速路径）
+        let displayName = username
+        let avatarUrl: string | undefined = undefined
+        const cached = this.avatarCache.get(username)
+        if (cached && now - cached.updatedAt < this.avatarCacheTtlMs) {
+          displayName = cached.displayName || username
+          avatarUrl = cached.avatarUrl
+        }
+
         sessions.push({
           username,
           type: parseInt(row.type || '0', 10),
@@ -233,13 +244,13 @@ class ChatService {
           sortTimestamp: sortTs,
           lastTimestamp: lastTs,
           lastMsgType,
-          displayName: username
+          displayName,
+          avatarUrl
         })
       }
 
-      // 获取联系人信息
+      // 不等待联系人信息加载，直接返回基础会话列表
-      await this.enrichSessionsWithContacts(sessions)
+      // 前端可以异步调用 enrichSessionsWithContacts 来补充信息
-
       return { success: true, sessions }
     } catch (e) {
       console.error('ChatService: 获取会话列表失败:', e)
@@ -248,46 +259,86 @@ class ChatService {
   }
 
   /**
-   * 补充联系人信息
+   * 异步补充会话列表的联系人信息（公开方法，供前端调用）
    */
-  private async enrichSessionsWithContacts(sessions: ChatSession[]): Promise<void> {
+  async enrichSessionsContactInfo(usernames: string[]): Promise<{ 
-    if (sessions.length === 0) return
+    success: boolean
+    contacts?: Record<string, { displayName?: string; avatarUrl?: string }>
+    error?: string 
+  }> {
     try {
+      if (usernames.length === 0) {
+        return { success: true, contacts: {} }
+      }
+
+      const connectResult = await this.ensureConnected()
+      if (!connectResult.success) {
+        return { success: false, error: connectResult.error }
+      }
+
       const now = Date.now()
       const missing: string[] = []
+      const result: Record<string, { displayName?: string; avatarUrl?: string }> = {}
 
-      for (const session of sessions) {
+      // 检查缓存
-        const cached = this.avatarCache.get(session.username)
+      for (const username of usernames) {
+        const cached = this.avatarCache.get(username)
         if (cached && now - cached.updatedAt < this.avatarCacheTtlMs) {
-          if (cached.displayName) session.displayName = cached.displayName
+          result[username] = {
-          if (cached.avatarUrl) {
+            displayName: cached.displayName,
-            session.avatarUrl = cached.avatarUrl
+            avatarUrl: cached.avatarUrl
-            continue
           }
+        } else {
+          missing.push(username)
         }
-        missing.push(session.username)
       }
 
-      if (missing.length === 0) return
+      // 批量查询缺失的联系人信息
-      const missingSet = new Set(missing)
+      if (missing.length > 0) {
-
         const [displayNames, avatarUrls] = await Promise.all([
           wcdbService.getDisplayNames(missing),
           wcdbService.getAvatarUrls(missing)
         ])
 
-      for (const session of sessions) {
+        for (const username of missing) {
-        if (!missingSet.has(session.username)) continue
+          const displayName = displayNames.success && displayNames.map ? displayNames.map[username] : undefined
-        const displayName = displayNames.success && displayNames.map ? displayNames.map[session.username] : undefined
+          const avatarUrl = avatarUrls.success && avatarUrls.map ? avatarUrls.map[username] : undefined
-        const avatarUrl = avatarUrls.success && avatarUrls.map ? avatarUrls.map[session.username] : undefined
+          
-        if (displayName) session.displayName = displayName
+          result[username] = { displayName, avatarUrl }
-        if (avatarUrl) session.avatarUrl = avatarUrl
+          
-        this.avatarCache.set(session.username, {
+          // 更新缓存
-          displayName: session.displayName,
+          this.avatarCache.set(username, {
-          avatarUrl: session.avatarUrl,
+            displayName: displayName || username,
+            avatarUrl,
             updatedAt: now
           })
         }
+      }
+
+      return { success: true, contacts: result }
+    } catch (e) {
+      console.error('ChatService: 补充联系人信息失败:', e)
+      return { success: false, error: String(e) }
+    }
+  }
+
+  /**
+   * 补充联系人信息（私有方法，保持向后兼容）
+   */
+  private async enrichSessionsWithContacts(sessions: ChatSession[]): Promise<void> {
+    if (sessions.length === 0) return
+    try {
+      const usernames = sessions.map(s => s.username)
+      const result = await this.enrichSessionsContactInfo(usernames)
+      if (result.success && result.contacts) {
+        for (const session of sessions) {
+          const contact = result.contacts![session.username]
+          if (contact) {
+            if (contact.displayName) session.displayName = contact.displayName
+            if (contact.avatarUrl) session.avatarUrl = contact.avatarUrl
+          }
+        }
+      }
     } catch (e) {
       console.error('ChatService: 获取联系人信息失败:', e)
     }
@@ -980,6 +1031,118 @@ class ChatService {
     }
   }
 
+  //手动查找 media_*.db 文件（当 WCDB DLL 不支持 listMediaDbs 时的 fallback）
+  private async findMediaDbsManually(): Promise<string[]> {
+    try {
+      const dbPath = this.configService.get('dbPath')
+      const myWxid = this.configService.get('myWxid')
+      if (!dbPath || !myWxid) return []
+
+      // 可能的目录结构：
+      // 1. dbPath 直接指向 db_storage: D:\weixin\WeChat Files\wxid_xxx\db_storage
+      // 2. dbPath 指向账号目录: D:\weixin\WeChat Files\wxid_xxx
+      // 3. dbPath 指向 WeChat Files: D:\weixin\WeChat Files
+      // 4. dbPath 指向微信根目录: D:\weixin
+      // 5. dbPath 指向非标准目录: D:\weixin\xwechat_files
+
+      const searchDirs: string[] = []
+
+      // 尝试1: dbPath 本身就是 db_storage
+      if (basename(dbPath).toLowerCase() === 'db_storage') {
+        searchDirs.push(dbPath)
+      }
+
+      // 尝试2: dbPath/db_storage
+      const dbStorage1 = join(dbPath, 'db_storage')
+      if (existsSync(dbStorage1)) {
+        searchDirs.push(dbStorage1)
+      }
+
+      // 尝试3: dbPath/WeChat Files/[wxid]/db_storage
+      const wechatFiles = join(dbPath, 'WeChat Files')
+      if (existsSync(wechatFiles)) {
+        const wxidDir = join(wechatFiles, myWxid)
+        if (existsSync(wxidDir)) {
+          const dbStorage2 = join(wxidDir, 'db_storage')
+          if (existsSync(dbStorage2)) {
+            searchDirs.push(dbStorage2)
+          }
+        }
+      }
+
+      // 尝试4: 如果 dbPath 已经包含 WeChat Files，直接在其中查找
+      if (dbPath.includes('WeChat Files')) {
+        const parts = dbPath.split(path.sep)
+        const wechatFilesIndex = parts.findIndex(p => p === 'WeChat Files')
+        if (wechatFilesIndex >= 0) {
+          const wechatFilesPath = parts.slice(0, wechatFilesIndex + 1).join(path.sep)
+          const wxidDir = join(wechatFilesPath, myWxid)
+          if (existsSync(wxidDir)) {
+            const dbStorage3 = join(wxidDir, 'db_storage')
+            if (existsSync(dbStorage3) && !searchDirs.includes(dbStorage3)) {
+              searchDirs.push(dbStorage3)
+            }
+          }
+        }
+      }
+
+      // 尝试5: 直接尝试 dbPath/[wxid]/db_storage (适用于 xwechat_files 等非标准目录名)
+      const wxidDirDirect = join(dbPath, myWxid)
+      if (existsSync(wxidDirDirect)) {
+        const dbStorage5 = join(wxidDirDirect, 'db_storage')
+        if (existsSync(dbStorage5) && !searchDirs.includes(dbStorage5)) {
+          searchDirs.push(dbStorage5)
+        }
+      }
+
+      // 在所有可能的目录中查找 media_*.db
+      const mediaDbFiles: string[] = []
+      for (const dir of searchDirs) {
+        if (!existsSync(dir)) continue
+
+        // 直接在当前目录查找
+        const entries = readdirSync(dir)
+        for (const entry of entries) {
+          if (entry.toLowerCase().startsWith('media_') && entry.toLowerCase().endsWith('.db')) {
+            const fullPath = join(dir, entry)
+            if (existsSync(fullPath) && statSync(fullPath).isFile()) {
+              if (!mediaDbFiles.includes(fullPath)) {
+                mediaDbFiles.push(fullPath)
+              }
+            }
+          }
+        }
+
+        // 也检查子目录（特别是 message 子目录）
+        for (const entry of entries) {
+          const subDir = join(dir, entry)
+          if (existsSync(subDir) && statSync(subDir).isDirectory()) {
+            try {
+              const subEntries = readdirSync(subDir)
+              for (const subEntry of subEntries) {
+                if (subEntry.toLowerCase().startsWith('media_') && subEntry.toLowerCase().endsWith('.db')) {
+                  const fullPath = join(subDir, subEntry)
+                  if (existsSync(fullPath) && statSync(fullPath).isFile()) {
+                    if (!mediaDbFiles.includes(fullPath)) {
+                      mediaDbFiles.push(fullPath)
+                    }
+                  }
+                }
+              }
+            } catch (e) {
+              // 忽略无法访问的子目录
+            }
+          }
+        }
+      }
+
+      return mediaDbFiles
+    } catch (e) {
+      console.error('[ChatService] 手动查找 media 数据库失败:', e)
+      return []
+    }
+  }
+
   private getVoiceLookupCandidates(sessionId: string, msg: Message): string[] {
     const candidates: string[] = []
     const add = (value?: string | null) => {
@@ -1833,13 +1996,20 @@ class ChatService {
       })
 
       // 2. 查找所有的 media_*.db
-      const mediaDbs = await wcdbService.listMediaDbs()
+      let mediaDbs = await wcdbService.listMediaDbs()
-      if (!mediaDbs.success || !mediaDbs.data) return { success: false, error: '获取媒体库失败' }
+      // Fallback: 如果 WCDB DLL 不支持 listMediaDbs，手动查找
-      console.info('[ChatService][Voice] media dbs', mediaDbs.data)
+      if (!mediaDbs.success || !mediaDbs.data || mediaDbs.data.length === 0) {
+        const manualMediaDbs = await this.findMediaDbsManually()
+        if (manualMediaDbs.length > 0) {
+          mediaDbs = { success: true, data: manualMediaDbs }
+        } else {
+          return { success: false, error: '未找到媒体库文件 (media_*.db)' }
+        }
+      }
 
       // 3. 在所有媒体库中查找该消息的语音数据
       let silkData: Buffer | null = null
-      for (const dbPath of mediaDbs.data) {
+      for (const dbPath of (mediaDbs.data || [])) {
         const voiceTable = await this.resolveVoiceInfoTableName(dbPath)
         if (!voiceTable) {
           console.warn('[ChatService][Voice] voice table not found', dbPath)
@@ -2165,7 +2335,7 @@ class ChatService {
             .prepare(`SELECT dir_name FROM ${state.dirTable} WHERE dir_id = ? AND username = ? LIMIT 1`)
             .get(dir2, sessionId) as { dir_name?: string } | undefined
           if (dirRow?.dir_name) dirName = dirRow.dir_name as string
-        } catch {}
+        } catch { }
       }
 
       const fullPath = join(accountDir, dir1, dirName, fileName)
@@ -2173,7 +2343,7 @@ class ChatService {
 
       const withDat = `${fullPath}.dat`
       if (existsSync(withDat)) return withDat
-    } catch {}
+    } catch { }
     return null
   }
 

electron/services/wcdbService.ts

@@ -49,6 +49,8 @@ export class WcdbService {
   private wcdbGetEmoticonCdnUrl: any = null
   private avatarUrlCache: Map<string, { url?: string; updatedAt: number }> = new Map()
   private readonly avatarCacheTtlMs = 10 * 60 * 1000
+  private logTimer: NodeJS.Timeout | null = null
+  private lastLogTail: string | null = null
 
   setPaths(resourcesPath: string, userDataPath: string): void {
     this.resourcesPath = resourcesPath
@@ -57,6 +59,11 @@ export class WcdbService {
 
   setLogEnabled(enabled: boolean): void {
     this.logEnabled = enabled
+    if (this.isLogEnabled() && this.initialized) {
+      this.startLogPolling()
+    } else {
+      this.stopLogPolling()
+    }
   }
 
   /**
@@ -433,6 +440,49 @@ export class WcdbService {
     }
   }
 
+  private startLogPolling(): void {
+    if (this.logTimer || !this.isLogEnabled()) return
+    this.logTimer = setInterval(() => {
+      void this.pollLogs()
+    }, 2000)
+  }
+
+  private stopLogPolling(): void {
+    if (this.logTimer) {
+      clearInterval(this.logTimer)
+      this.logTimer = null
+    }
+    this.lastLogTail = null
+  }
+
+  private async pollLogs(): Promise<void> {
+    try {
+      if (!this.wcdbGetLogs || !this.isLogEnabled()) return
+      const outPtr = [null as any]
+      const result = this.wcdbGetLogs(outPtr)
+      if (result !== 0 || !outPtr[0]) return
+      let jsonStr = ''
+      try {
+        jsonStr = this.koffi.decode(outPtr[0], 'char', -1)
+      } finally {
+        try { this.wcdbFreeString(outPtr[0]) } catch { }
+      }
+      const logs = JSON.parse(jsonStr) as string[]
+      if (!Array.isArray(logs) || logs.length === 0) return
+      let startIdx = 0
+      if (this.lastLogTail) {
+        const idx = logs.lastIndexOf(this.lastLogTail)
+        if (idx >= 0) startIdx = idx + 1
+      }
+      for (let i = startIdx; i < logs.length; i += 1) {
+        this.writeLog(`wcdb: ${logs[i]}`)
+      }
+      this.lastLogTail = logs[logs.length - 1]
+    } catch (e) {
+      // ignore polling errors
+    }
+  }
+
   private decodeJsonPtr(outPtr: any): string | null {
     if (!outPtr) return null
     try {
@@ -545,6 +595,9 @@ export class WcdbService {
           console.warn('设置 wxid 失败:', e)
         }
       }
+      if (this.isLogEnabled()) {
+        this.startLogPolling()
+      }
       this.writeLog(`open ok handle=${handle}`)
       return true
     } catch (e) {
@@ -571,6 +624,7 @@ export class WcdbService {
       this.currentKey = null
       this.currentWxid = null
       this.initialized = false
+      this.stopLogPolling()
     }
   }
 
@@ -594,8 +648,15 @@ export class WcdbService {
       return { success: false, error: 'WCDB 未连接' }
     }
     try {
+      // 使用 setImmediate 让事件循环有机会处理其他任务，避免长时间阻塞
+      await new Promise(resolve => setImmediate(resolve))
+      
       const outPtr = [null as any]
       const result = this.wcdbGetSessions(this.handle, outPtr)
+      
+      // DLL 调用后再次让出控制权
+      await new Promise(resolve => setImmediate(resolve))
+      
       if (result !== 0 || !outPtr[0]) {
         this.writeLog(`getSessions failed: code=${result}`)
         return { success: false, error: `获取会话失败: ${result}` }
@@ -652,8 +713,15 @@ export class WcdbService {
     }
     if (usernames.length === 0) return { success: true, map: {} }
     try {
+      // 让出控制权，避免阻塞事件循环
+      await new Promise(resolve => setImmediate(resolve))
+      
       const outPtr = [null as any]
       const result = this.wcdbGetDisplayNames(this.handle, JSON.stringify(usernames), outPtr)
+      
+      // DLL 调用后再次让出控制权
+      await new Promise(resolve => setImmediate(resolve))
+      
       if (result !== 0 || !outPtr[0]) {
         return { success: false, error: `获取昵称失败: ${result}` }
       }
@@ -692,8 +760,15 @@ export class WcdbService {
         return { success: true, map: resultMap }
       }
 
+      // 让出控制权，避免阻塞事件循环
+      await new Promise(resolve => setImmediate(resolve))
+      
       const outPtr = [null as any]
       const result = this.wcdbGetAvatarUrls(this.handle, JSON.stringify(toFetch), outPtr)
+      
+      // DLL 调用后再次让出控制权
+      await new Promise(resolve => setImmediate(resolve))
+      
       if (result !== 0 || !outPtr[0]) {
         if (Object.keys(resultMap).length > 0) {
           return { success: true, map: resultMap, error: `获取头像失败: ${result}` }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "weflow",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "WeFlow - 微信聊天记录查看工具",
   "main": "dist-electron/main.js",
   "author": "cc",
@@ -64,7 +64,7 @@
     },
     "nsis": {
       "oneClick": false,
-      "differentialPackage":false,
+      "differentialPackage": false,
       "allowToChangeInstallationDirectory": true,
       "createDesktopShortcut": true,
       "unicode": true,

src/pages/ChatPage.scss

@@ -883,6 +883,23 @@
   min-height: 0;
   overflow: hidden;
   -webkit-app-region: no-drag;
+  position: relative;
+
+  &.loading .message-list {
+    opacity: 0;
+    transform: translateY(8px);
+    pointer-events: none;
+  }
+
+  &.loaded .message-list {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  &.loaded .loading-overlay {
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 
 .message-list {
@@ -898,6 +915,7 @@
   background-color: var(--bg-tertiary);
   position: relative;
   -webkit-app-region: no-drag !important;
+  transition: opacity 240ms ease, transform 240ms ease;
 
   // 滚动条样式
   &::-webkit-scrollbar {
@@ -918,6 +936,19 @@
   }
 }
 
+.loading-messages.loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background: rgba(10, 10, 10, 0.28);
+  backdrop-filter: blur(6px);
+  transition: opacity 200ms ease;
+  z-index: 2;
+}
+
 .message-list * {
   -webkit-app-region: no-drag !important;
 }
@@ -1108,6 +1139,7 @@
   font-size: 14px;
   line-height: 1.6;
   word-break: break-word;
+  white-space: pre-wrap;
 }
 
 // 表情包消息
@@ -1432,6 +1464,7 @@
 
   .quoted-text {
     color: var(--text-secondary);
+    white-space: pre-wrap;
   }
 }
 

src/pages/ChatPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import { Search, MessageSquare, AlertCircle, Loader2, RefreshCw, X, ChevronDown, Info, Calendar, Database, Hash, Play, Pause, Image as ImageIcon } from 'lucide-react'
 import { useChatStore } from '../stores/chatStore'
 import type { ChatSession, Message } from '../types/models'
@@ -23,11 +23,128 @@ interface SessionDetail {
   messageTables: { dbName: string; tableName: string; count: number }[]
 }
 
-// 头像组件 - 支持骨架屏加载
+// 全局头像加载队列管理器（限制并发，避免卡顿）
-function SessionAvatar({ session, size = 48 }: { session: ChatSession; size?: number }) {
+class AvatarLoadQueue {
+  private queue: Array<{ url: string; resolve: () => void; reject: () => void }> = []
+  private loading = new Set<string>()
+  private readonly maxConcurrent = 1 // 一次只加载1个头像，避免卡顿
+  private readonly delayBetweenBatches = 100 // 批次间延迟100ms，给UI喘息时间
+
+  async enqueue(url: string): Promise<void> {
+    // 如果已经在加载中，直接返回
+    if (this.loading.has(url)) {
+      return Promise.resolve()
+    }
+
+    return new Promise((resolve, reject) => {
+      this.queue.push({ url, resolve, reject })
+      this.processQueue()
+    })
+  }
+
+  private async processQueue() {
+    // 如果已达到最大并发数，等待
+    if (this.loading.size >= this.maxConcurrent) {
+      return
+    }
+
+    // 如果队列为空，返回
+    if (this.queue.length === 0) {
+      return
+    }
+
+    // 取出一个任务
+    const task = this.queue.shift()
+    if (!task) return
+
+    this.loading.add(task.url)
+
+    // 加载图片
+    const img = new Image()
+    img.onload = () => {
+      this.loading.delete(task.url)
+      task.resolve()
+      // 延迟一下再处理下一个，避免一次性加载太多
+      setTimeout(() => this.processQueue(), this.delayBetweenBatches)
+    }
+    img.onerror = () => {
+      this.loading.delete(task.url)
+      task.reject()
+      setTimeout(() => this.processQueue(), this.delayBetweenBatches)
+    }
+    img.src = task.url
+  }
+
+  clear() {
+    this.queue = []
+    this.loading.clear()
+  }
+}
+
+const avatarLoadQueue = new AvatarLoadQueue()
+
+// 头像组件 - 支持骨架屏加载和懒加载（优化：限制并发，使用 memo 避免不必要的重渲染）
+// 会话项组件（使用 memo 优化，避免不必要的重渲染）
+const SessionItem = React.memo(function SessionItem({
+  session,
+  isActive,
+  onSelect,
+  formatTime
+}: {
+  session: ChatSession
+  isActive: boolean
+  onSelect: (session: ChatSession) => void
+  formatTime: (timestamp: number) => string
+}) {
+  // 缓存格式化的时间
+  const timeText = useMemo(() => 
+    formatTime(session.lastTimestamp || session.sortTimestamp),
+    [formatTime, session.lastTimestamp, session.sortTimestamp]
+  )
+
+  return (
+    <div
+      className={`session-item ${isActive ? 'active' : ''}`}
+      onClick={() => onSelect(session)}
+    >
+      <SessionAvatar session={session} size={48} />
+      <div className="session-info">
+        <div className="session-top">
+          <span className="session-name">{session.displayName || session.username}</span>
+          <span className="session-time">{timeText}</span>
+        </div>
+        <div className="session-bottom">
+          <span className="session-summary">{session.summary || '暂无消息'}</span>
+          {session.unreadCount > 0 && (
+            <span className="unread-badge">
+              {session.unreadCount > 99 ? '99+' : session.unreadCount}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}, (prevProps, nextProps) => {
+  // 自定义比较：只在关键属性变化时重渲染
+  return (
+    prevProps.session.username === nextProps.session.username &&
+    prevProps.session.displayName === nextProps.session.displayName &&
+    prevProps.session.avatarUrl === nextProps.session.avatarUrl &&
+    prevProps.session.summary === nextProps.session.summary &&
+    prevProps.session.unreadCount === nextProps.session.unreadCount &&
+    prevProps.session.lastTimestamp === nextProps.session.lastTimestamp &&
+    prevProps.session.sortTimestamp === nextProps.session.sortTimestamp &&
+    prevProps.isActive === nextProps.isActive
+  )
+})
+
+const SessionAvatar = React.memo(function SessionAvatar({ session, size = 48 }: { session: ChatSession; size?: number }) {
   const [imageLoaded, setImageLoaded] = useState(false)
   const [imageError, setImageError] = useState(false)
+  const [shouldLoad, setShouldLoad] = useState(false)
+  const [isInQueue, setIsInQueue] = useState(false)
   const imgRef = useRef<HTMLImageElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
   const isGroup = session.username.includes('@chatroom')
 
   const getAvatarLetter = (): string => {
@@ -37,23 +154,63 @@ function SessionAvatar({ session, size = 48 }: { session: ChatSession; size?: nu
     return chars[0] || '?'
   }
 
+  // 使用 Intersection Observer 实现懒加载（优化性能）
+  useEffect(() => {
+    if (!containerRef.current || shouldLoad || isInQueue) return
+    if (!session.avatarUrl) {
+      // 没有头像URL，不需要加载
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !isInQueue) {
+            // 加入加载队列，而不是立即加载
+            setIsInQueue(true)
+            avatarLoadQueue.enqueue(session.avatarUrl!).then(() => {
+              setShouldLoad(true)
+            }).catch(() => {
+              setImageError(true)
+            }).finally(() => {
+              setIsInQueue(false)
+            })
+            observer.disconnect()
+          }
+        })
+      },
+      {
+        rootMargin: '50px' // 减少预加载距离，只提前50px
+      }
+    )
+
+    observer.observe(containerRef.current)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [session.avatarUrl, shouldLoad, isInQueue])
+
   // 当 avatarUrl 变化时重置状态
   useEffect(() => {
     setImageLoaded(false)
     setImageError(false)
+    setShouldLoad(false)
+    setIsInQueue(false)
   }, [session.avatarUrl])
 
   // 检查图片是否已经从缓存加载完成
   useEffect(() => {
-    if (imgRef.current?.complete && imgRef.current?.naturalWidth > 0) {
+    if (shouldLoad && imgRef.current?.complete && imgRef.current?.naturalWidth > 0) {
       setImageLoaded(true)
     }
-  }, [session.avatarUrl])
+  }, [session.avatarUrl, shouldLoad])
 
-  const hasValidUrl = session.avatarUrl && !imageError
+  const hasValidUrl = session.avatarUrl && !imageError && shouldLoad
 
   return (
     <div
+      ref={containerRef}
       className={`session-avatar ${isGroup ? 'group' : ''} ${hasValidUrl && !imageLoaded ? 'loading' : ''}`}
       style={{ width: size, height: size }}
     >
@@ -67,6 +224,7 @@ function SessionAvatar({ session, size = 48 }: { session: ChatSession; size?: nu
             className={imageLoaded ? 'loaded' : ''}
             onLoad={() => setImageLoaded(true)}
             onError={() => setImageError(true)}
+            loading="lazy"
           />
         </>
       ) : (
@@ -74,7 +232,15 @@ function SessionAvatar({ session, size = 48 }: { session: ChatSession; size?: nu
       )}
     </div>
   )
-}
+}, (prevProps, nextProps) => {
+  // 自定义比较函数，只在关键属性变化时重渲染
+  return (
+    prevProps.session.username === nextProps.session.username &&
+    prevProps.session.displayName === nextProps.session.displayName &&
+    prevProps.session.avatarUrl === nextProps.session.avatarUrl &&
+    prevProps.size === nextProps.size
+  )
+})
 
 function ChatPage(_props: ChatPageProps) {
   const {
@@ -108,6 +274,8 @@ function ChatPage(_props: ChatPageProps) {
   const messageListRef = useRef<HTMLDivElement>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
   const sidebarRef = useRef<HTMLDivElement>(null)
+  const initialRevealTimerRef = useRef<number | null>(null)
+  const sessionListRef = useRef<HTMLDivElement>(null)
   const [currentOffset, setCurrentOffset] = useState(0)
   const [myAvatarUrl, setMyAvatarUrl] = useState<string | undefined>(undefined)
   const [showScrollToBottom, setShowScrollToBottom] = useState(false)
@@ -118,6 +286,13 @@ function ChatPage(_props: ChatPageProps) {
   const [isLoadingDetail, setIsLoadingDetail] = useState(false)
   const [highlightedMessageKeys, setHighlightedMessageKeys] = useState<string[]>([])
   const [isRefreshingSessions, setIsRefreshingSessions] = useState(false)
+  const [hasInitialMessages, setHasInitialMessages] = useState(false)
+  
+  // 联系人信息加载控制
+  const isEnrichingRef = useRef(false)
+  const enrichCancelledRef = useRef(false)
+  const isScrollingRef = useRef(false)
+  const sessionScrollTimeoutRef = useRef<number | null>(null)
 
 
   const highlightedMessageSet = useMemo(() => new Set(highlightedMessageKeys), [highlightedMessageKeys])
@@ -126,6 +301,7 @@ function ChatPage(_props: ChatPageProps) {
   const sessionMapRef = useRef<Map<string, ChatSession>>(new Map())
   const sessionsRef = useRef<ChatSession[]>([])
   const currentSessionRef = useRef<string | null>(null)
+  const prevSessionRef = useRef<string | null>(null)
   const isLoadingMessagesRef = useRef(false)
   const isLoadingMoreRef = useRef(false)
   const isConnectedRef = useRef(false)
@@ -188,7 +364,7 @@ function ChatPage(_props: ChatPageProps) {
     }
   }, [loadMyAvatar])
 
-  // 加载会话列表
+  // 加载会话列表（优化：先返回基础数据，异步加载联系人信息）
   const loadSessions = async (options?: { silent?: boolean }) => {
     if (options?.silent) {
       setIsRefreshingSessions(true)
@@ -198,8 +374,21 @@ function ChatPage(_props: ChatPageProps) {
     try {
       const result = await window.electronAPI.chat.getSessions()
       if (result.success && result.sessions) {
-        const nextSessions = options?.silent ? mergeSessions(result.sessions) : result.sessions
+        // 确保 sessions 是数组
+        const sessionsArray = Array.isArray(result.sessions) ? result.sessions : []
+        const nextSessions = options?.silent ? mergeSessions(sessionsArray) : sessionsArray
+        // 确保 nextSessions 也是数组
+        if (Array.isArray(nextSessions)) {
           setSessions(nextSessions)
+          // 延迟启动联系人信息加载，确保UI先渲染完成
+          setTimeout(() => {
+            void enrichSessionsContactInfo(nextSessions)
+          }, 500)
+        } else {
+          console.error('mergeSessions returned non-array:', nextSessions)
+          setSessions(sessionsArray)
+          void enrichSessionsContactInfo(sessionsArray)
+        }
       } else if (!result.success) {
         setConnectionError(result.error || '获取会话失败')
       }
@@ -215,6 +404,198 @@ function ChatPage(_props: ChatPageProps) {
     }
   }
 
+  // 分批异步加载联系人信息（优化性能：防止重复加载，滚动时暂停，只在空闲时加载）
+  const enrichSessionsContactInfo = async (sessions: ChatSession[]) => {
+    if (sessions.length === 0) return
+    
+    // 防止重复加载
+    if (isEnrichingRef.current) {
+      console.log('[性能监控] 联系人信息正在加载中，跳过重复请求')
+      return
+    }
+    
+    isEnrichingRef.current = true
+    enrichCancelledRef.current = false
+    
+    console.log(`[性能监控] 开始加载联系人信息，会话数: ${sessions.length}`)
+    const totalStart = performance.now()
+    
+    // 延迟启动，等待UI渲染完成
+    await new Promise(resolve => setTimeout(resolve, 500))
+    
+    // 检查是否被取消
+    if (enrichCancelledRef.current) {
+      isEnrichingRef.current = false
+      return
+    }
+    
+    try {
+      // 找出需要加载联系人信息的会话（没有缓存的）
+      const needEnrich = sessions.filter(s => !s.avatarUrl && (!s.displayName || s.displayName === s.username))
+      if (needEnrich.length === 0) {
+        console.log('[性能监控] 所有联系人信息已缓存，跳过加载')
+        isEnrichingRef.current = false
+        return
+      }
+
+      console.log(`[性能监控] 需要加载的联系人信息: ${needEnrich.length} 个`)
+
+      // 进一步减少批次大小，每批3个，避免DLL调用阻塞
+      const batchSize = 3
+      let loadedCount = 0
+      
+      for (let i = 0; i < needEnrich.length; i += batchSize) {
+        // 如果正在滚动，暂停加载
+        if (isScrollingRef.current) {
+          console.log('[性能监控] 检测到滚动，暂停加载联系人信息')
+          // 等待滚动结束
+          while (isScrollingRef.current && !enrichCancelledRef.current) {
+            await new Promise(resolve => setTimeout(resolve, 200))
+          }
+          if (enrichCancelledRef.current) break
+        }
+        
+        // 检查是否被取消
+        if (enrichCancelledRef.current) break
+        
+        const batchStart = performance.now()
+        const batch = needEnrich.slice(i, i + batchSize)
+        const usernames = batch.map(s => s.username)
+        
+        // 使用 requestIdleCallback 延迟执行，避免阻塞UI
+        await new Promise<void>((resolve) => {
+          if ('requestIdleCallback' in window) {
+            window.requestIdleCallback(() => {
+              void loadContactInfoBatch(usernames).then(() => resolve())
+            }, { timeout: 2000 })
+          } else {
+            setTimeout(() => {
+              void loadContactInfoBatch(usernames).then(() => resolve())
+            }, 300)
+          }
+        })
+        
+        loadedCount += batch.length
+        const batchTime = performance.now() - batchStart
+        if (batchTime > 200) {
+          console.warn(`[性能监控] 批次 ${Math.floor(i / batchSize) + 1}/${Math.ceil(needEnrich.length / batchSize)} 耗时: ${batchTime.toFixed(2)}ms (已加载: ${loadedCount}/${needEnrich.length})`)
+        }
+        
+        // 批次间延迟，给UI更多时间（DLL调用可能阻塞，需要更长的延迟）
+        if (i + batchSize < needEnrich.length && !enrichCancelledRef.current) {
+          // 如果不在滚动，可以延迟短一点
+          const delay = isScrollingRef.current ? 1000 : 800
+          await new Promise(resolve => setTimeout(resolve, delay))
+        }
+      }
+      
+      const totalTime = performance.now() - totalStart
+      if (!enrichCancelledRef.current) {
+        console.log(`[性能监控] 联系人信息加载完成，总耗时: ${totalTime.toFixed(2)}ms, 已加载: ${loadedCount}/${needEnrich.length}`)
+      } else {
+        console.log(`[性能监控] 联系人信息加载被取消，已加载: ${loadedCount}/${needEnrich.length}`)
+      }
+    } catch (e) {
+      console.error('加载联系人信息失败:', e)
+    } finally {
+      isEnrichingRef.current = false
+    }
+  }
+
+  // 联系人信息更新队列（防抖批量更新，避免频繁重渲染）
+  const contactUpdateQueueRef = useRef<Map<string, { displayName?: string; avatarUrl?: string }>>(new Map())
+  const contactUpdateTimerRef = useRef<number | null>(null)
+  const lastUpdateTimeRef = useRef(0)
+
+  // 批量更新联系人信息（防抖，减少重渲染次数，增加延迟避免阻塞滚动）
+  const flushContactUpdates = useCallback(() => {
+    if (contactUpdateTimerRef.current) {
+      clearTimeout(contactUpdateTimerRef.current)
+      contactUpdateTimerRef.current = null
+    }
+
+    // 增加防抖延迟到500ms，避免在滚动时频繁更新
+    contactUpdateTimerRef.current = window.setTimeout(() => {
+      const updates = contactUpdateQueueRef.current
+      if (updates.size === 0) return
+
+      const now = Date.now()
+      // 如果距离上次更新太近（小于1秒），继续延迟
+      if (now - lastUpdateTimeRef.current < 1000) {
+        contactUpdateTimerRef.current = window.setTimeout(() => {
+          flushContactUpdates()
+        }, 1000 - (now - lastUpdateTimeRef.current))
+        return
+      }
+
+      const { sessions: currentSessions } = useChatStore.getState()
+      if (!Array.isArray(currentSessions)) return
+
+      let hasChanges = false
+      const updatedSessions = currentSessions.map(session => {
+        const update = updates.get(session.username)
+        if (update) {
+          const newDisplayName = update.displayName || session.displayName || session.username
+          const newAvatarUrl = update.avatarUrl || session.avatarUrl
+          if (newDisplayName !== session.displayName || newAvatarUrl !== session.avatarUrl) {
+            hasChanges = true
+            return {
+              ...session,
+              displayName: newDisplayName,
+              avatarUrl: newAvatarUrl
+            }
+          }
+        }
+        return session
+      })
+
+      if (hasChanges) {
+        const updateStart = performance.now()
+        setSessions(updatedSessions)
+        lastUpdateTimeRef.current = Date.now()
+        const updateTime = performance.now() - updateStart
+        if (updateTime > 50) {
+          console.warn(`[性能监控] setSessions更新耗时: ${updateTime.toFixed(2)}ms, 更新了 ${updates.size} 个联系人`)
+        }
+      }
+
+      updates.clear()
+      contactUpdateTimerRef.current = null
+    }, 500) // 500ms 防抖，减少更新频率
+  }, [setSessions])
+
+  // 加载一批联系人信息并更新会话列表（优化：使用队列批量更新）
+  const loadContactInfoBatch = async (usernames: string[]) => {
+    const startTime = performance.now()
+    try {
+      // 在 DLL 调用前让出控制权（使用 setTimeout 0 代替 setImmediate）
+      await new Promise(resolve => setTimeout(resolve, 0))
+      
+      const dllStart = performance.now()
+      const result = await window.electronAPI.chat.enrichSessionsContactInfo(usernames)
+      const dllTime = performance.now() - dllStart
+      
+      // DLL 调用后再次让出控制权
+      await new Promise(resolve => setTimeout(resolve, 0))
+      
+      const totalTime = performance.now() - startTime
+      if (dllTime > 50 || totalTime > 100) {
+        console.warn(`[性能监控] DLL调用耗时: ${dllTime.toFixed(2)}ms, 总耗时: ${totalTime.toFixed(2)}ms, usernames: ${usernames.length}`)
+      }
+      
+      if (result.success && result.contacts) {
+        // 将更新加入队列，而不是立即更新
+        for (const [username, contact] of Object.entries(result.contacts)) {
+          contactUpdateQueueRef.current.set(username, contact)
+        }
+        // 触发批量更新
+        flushContactUpdates()
+      }
+    } catch (e) {
+      console.error('加载联系人信息批次失败:', e)
+    }
+  }
+
   // 刷新会话列表
   const handleRefresh = async () => {
     await loadSessions({ silent: true })
@@ -326,6 +707,10 @@ function ChatPage(_props: ChatPageProps) {
   // 搜索过滤
   const handleSearch = (keyword: string) => {
     setSearchKeyword(keyword)
+    if (!Array.isArray(sessions)) {
+      setFilteredSessions([])
+      return
+    }
     if (!keyword.trim()) {
       setFilteredSessions(sessions)
       return
@@ -342,13 +727,22 @@ function ChatPage(_props: ChatPageProps) {
   // 关闭搜索框
   const handleCloseSearch = () => {
     setSearchKeyword('')
-    setFilteredSessions(sessions)
+    setFilteredSessions(Array.isArray(sessions) ? sessions : [])
   }
 
-  // 滚动加载更多 + 显示/隐藏回到底部按钮
+  // 滚动加载更多 + 显示/隐藏回到底部按钮（优化：节流，避免频繁执行）
+  const scrollTimeoutRef = useRef<number | null>(null)
   const handleScroll = useCallback(() => {
     if (!messageListRef.current) return
 
+    // 节流：延迟执行，避免滚动时频繁计算
+    if (scrollTimeoutRef.current) {
+      cancelAnimationFrame(scrollTimeoutRef.current)
+    }
+
+    scrollTimeoutRef.current = requestAnimationFrame(() => {
+      if (!messageListRef.current) return
+      
       const { scrollTop, clientHeight, scrollHeight } = messageListRef.current
 
       // 显示回到底部按钮：距离底部超过 300px
@@ -362,7 +756,8 @@ function ChatPage(_props: ChatPageProps) {
           loadMessages(currentSessionId, currentOffset)
         }
       }
-  }, [isLoadingMore, isLoadingMessages, hasMoreMessages, currentSessionId, currentOffset])
+    })
+  }, [isLoadingMore, isLoadingMessages, hasMoreMessages, currentSessionId, currentOffset, loadMessages])
 
   const getMessageKey = useCallback((msg: Message): string => {
     if (msg.localId && msg.localId > 0) return `l:${msg.localId}`
@@ -384,7 +779,14 @@ function ChatPage(_props: ChatPageProps) {
   }, [])
 
   const mergeSessions = useCallback((nextSessions: ChatSession[]) => {
-    if (sessionsRef.current.length === 0) return nextSessions
+    // 确保输入是数组
+    if (!Array.isArray(nextSessions)) {
+      console.warn('mergeSessions: nextSessions is not an array:', nextSessions)
+      return Array.isArray(sessionsRef.current) ? sessionsRef.current : []
+    }
+    if (!Array.isArray(sessionsRef.current) || sessionsRef.current.length === 0) {
+      return nextSessions
+    }
     const prevMap = new Map(sessionsRef.current.map((s) => [s.username, s]))
     return nextSessions.map((next) => {
       const prev = prevMap.get(next.username)
@@ -440,6 +842,20 @@ function ChatPage(_props: ChatPageProps) {
     if (!isConnected && !isConnecting) {
       connect()
     }
+    
+    // 组件卸载时清理
+    return () => {
+      avatarLoadQueue.clear()
+      if (contactUpdateTimerRef.current) {
+        clearTimeout(contactUpdateTimerRef.current)
+      }
+      if (sessionScrollTimeoutRef.current) {
+        clearTimeout(sessionScrollTimeoutRef.current)
+      }
+      contactUpdateQueueRef.current.clear()
+      enrichCancelledRef.current = true
+      isEnrichingRef.current = false
+    }
   }, [])
 
   useEffect(() => {
@@ -496,14 +912,16 @@ function ChatPage(_props: ChatPageProps) {
 
   useEffect(() => {
     const nextMap = new Map<string, ChatSession>()
+    if (Array.isArray(sessions)) {
       for (const session of sessions) {
         nextMap.set(session.username, session)
       }
+    }
     sessionMapRef.current = nextMap
   }, [sessions])
 
   useEffect(() => {
-    sessionsRef.current = sessions
+    sessionsRef.current = Array.isArray(sessions) ? sessions : []
   }, [sessions])
 
   useEffect(() => {
@@ -511,6 +929,53 @@ function ChatPage(_props: ChatPageProps) {
     isLoadingMoreRef.current = isLoadingMore
   }, [isLoadingMessages, isLoadingMore])
 
+  useEffect(() => {
+    if (initialRevealTimerRef.current !== null) {
+      window.clearTimeout(initialRevealTimerRef.current)
+      initialRevealTimerRef.current = null
+    }
+    if (!isLoadingMessages) {
+      if (messages.length === 0) {
+        setHasInitialMessages(true)
+      } else {
+        initialRevealTimerRef.current = window.setTimeout(() => {
+          setHasInitialMessages(true)
+          initialRevealTimerRef.current = null
+        }, 120)
+      }
+    }
+  }, [isLoadingMessages, messages.length])
+
+  useEffect(() => {
+    if (currentSessionId !== prevSessionRef.current) {
+      prevSessionRef.current = currentSessionId
+      if (initialRevealTimerRef.current !== null) {
+        window.clearTimeout(initialRevealTimerRef.current)
+        initialRevealTimerRef.current = null
+      }
+      if (messages.length === 0) {
+        setHasInitialMessages(false)
+      } else if (!isLoadingMessages) {
+        setHasInitialMessages(true)
+      }
+    }
+  }, [currentSessionId, messages.length, isLoadingMessages])
+
+  useEffect(() => {
+    if (currentSessionId && messages.length === 0 && !isLoadingMessages && !isLoadingMore) {
+      loadMessages(currentSessionId, 0)
+    }
+  }, [currentSessionId, messages.length, isLoadingMessages, isLoadingMore])
+
+  useEffect(() => {
+    return () => {
+      if (initialRevealTimerRef.current !== null) {
+        window.clearTimeout(initialRevealTimerRef.current)
+        initialRevealTimerRef.current = null
+      }
+    }
+  }, [])
+
   useEffect(() => {
     isConnectedRef.current = isConnected
   }, [isConnected])
@@ -520,7 +985,14 @@ function ChatPage(_props: ChatPageProps) {
   }, [searchKeyword])
 
   useEffect(() => {
-    if (!searchKeyword.trim()) return
+    if (!Array.isArray(sessions)) {
+      setFilteredSessions([])
+      return
+    }
+    if (!searchKeyword.trim()) {
+      setFilteredSessions(sessions)
+      return
+    }
     const lower = searchKeyword.toLowerCase()
     const filtered = sessions.filter(s =>
       s.displayName?.toLowerCase().includes(lower) ||
@@ -531,8 +1003,8 @@ function ChatPage(_props: ChatPageProps) {
   }, [sessions, searchKeyword, setFilteredSessions])
 
 
-  // 格式化会话时间（相对时间）- 与原项目一致
+  // 格式化会话时间（相对时间）- 使用 useMemo 缓存，避免每次渲染都计算
-  const formatSessionTime = (timestamp: number): string => {
+  const formatSessionTime = useCallback((timestamp: number): string => {
     if (!Number.isFinite(timestamp) || timestamp <= 0) return ''
 
     const now = Date.now()
@@ -555,10 +1027,10 @@ function ChatPage(_props: ChatPageProps) {
     }
 
     return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
-  }
+  }, [])
 
   // 获取当前会话信息
-  const currentSession = sessions.find(s => s.username === currentSessionId)
+  const currentSession = Array.isArray(sessions) ? sessions.find(s => s.username === currentSessionId) : undefined
 
   // 判断是否为群聊
   const isGroupChat = (username: string) => username.includes('@chatroom')
@@ -641,30 +1113,31 @@ function ChatPage(_props: ChatPageProps) {
               </div>
             ))}
           </div>
-        ) : filteredSessions.length > 0 ? (
+        ) : Array.isArray(filteredSessions) && filteredSessions.length > 0 ? (
-          <div className="session-list">
-            {filteredSessions.map(session => (
           <div 
-                key={session.username}
+            className="session-list"
-                className={`session-item ${currentSessionId === session.username ? 'active' : ''}`}
+            ref={sessionListRef}
-                onClick={() => handleSelectSession(session)}
+            onScroll={() => {
+              // 标记正在滚动，暂停联系人信息加载
+              isScrollingRef.current = true
+              if (sessionScrollTimeoutRef.current) {
+                clearTimeout(sessionScrollTimeoutRef.current)
+              }
+              // 滚动结束后200ms才认为滚动停止
+              sessionScrollTimeoutRef.current = window.setTimeout(() => {
+                isScrollingRef.current = false
+                sessionScrollTimeoutRef.current = null
+              }, 200)
+            }}
           >
-                <SessionAvatar session={session} size={48} />
+            {filteredSessions.map(session => (
-                <div className="session-info">
+              <SessionItem
-                  <div className="session-top">
+                key={session.username}
-                    <span className="session-name">{session.displayName || session.username}</span>
+                session={session}
-                    <span className="session-time">{formatSessionTime(session.lastTimestamp || session.sortTimestamp)}</span>
+                isActive={currentSessionId === session.username}
-                  </div>
+                onSelect={handleSelectSession}
-                  <div className="session-bottom">
+                formatTime={formatSessionTime}
-                    <span className="session-summary">{session.summary || '暂无消息'}</span>
+              />
-                    {session.unreadCount > 0 && (
-                      <span className="unread-badge">
-                        {session.unreadCount > 99 ? '99+' : session.unreadCount}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </div>
             ))}
           </div>
         ) : (
@@ -710,15 +1183,15 @@ function ChatPage(_props: ChatPageProps) {
               </div>
             </div>
 
-            <div className="message-content-wrapper">
+            <div className={`message-content-wrapper ${hasInitialMessages ? 'loaded' : 'loading'}`}>
-              {isLoadingMessages ? (
+              {isLoadingMessages && !hasInitialMessages && (
-                <div className="loading-messages">
+                <div className="loading-messages loading-overlay">
                   <Loader2 size={24} />
                   <span>加载消息中...</span>
                 </div>
-              ) : (
+              )}
               <div
-                  className="message-list"
+                className={`message-list ${hasInitialMessages ? 'loaded' : 'loading'}`}
                 ref={messageListRef}
                 onScroll={handleScroll}
               >
@@ -772,7 +1245,6 @@ function ChatPage(_props: ChatPageProps) {
                     <span>回到底部</span>
                   </div>
                 </div>
-              )}
 
               {/* 会话详情面板 */}
               {showDetailPanel && (

src/pages/ExportPage.scss

@@ -379,29 +379,21 @@
     border-radius: 10px;
     font-size: 14px;
     color: var(--text-primary);
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background: var(--bg-hover);
+    }
 
     svg {
       color: var(--text-tertiary);
+      flex-shrink: 0;
     }
 
     span {
       flex: 1;
     }
-
-    .change-btn {
-      background: none;
-      border: none;
-      padding: 4px;
-      cursor: pointer;
-      color: var(--text-tertiary);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:hover {
-        color: var(--text-primary);
-      }
-    }
   }
 
   .media-options {
@@ -471,6 +463,43 @@
     margin: 8px 0 0;
   }
 
+  .select-folder-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 16px;
+    margin-top: 12px;
+    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);
@@ -649,9 +678,245 @@
       }
     }
   }
+
+  .date-picker-modal {
+    background: var(--card-bg);
+    padding: 28px 32px;
+    border-radius: 16px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
+    min-width: 420px;
+    max-width: 500px;
+
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin: 0 0 20px;
+    }
+
+    .quick-select {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 20px;
+
+      .quick-btn {
+        flex: 1;
+        padding: 10px 12px;
+        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);
+        }
+
+        &:active {
+          transform: scale(0.98);
+        }
+      }
+    }
+
+    .date-display {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 20px;
+      background: var(--bg-secondary);
+      border-radius: 12px;
+      margin-bottom: 24px;
+
+      .date-display-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        padding: 8px 12px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover {
+          background: rgba(var(--primary-rgb), 0.05);
+        }
+
+        &.active {
+          background: rgba(var(--primary-rgb), 0.1);
+          border: 1px solid var(--primary);
+        }
+
+        .date-label {
+          font-size: 12px;
+          color: var(--text-tertiary);
+          font-weight: 500;
+        }
+
+        .date-value {
+          font-size: 15px;
+          color: var(--text-primary);
+          font-weight: 600;
+        }
+      }
+
+      .date-separator {
+        font-size: 14px;
+        color: var(--text-tertiary);
+        padding: 0 4px;
+      }
+    }
+
+    .calendar-container {
+      margin-bottom: 20px;
+    }
+
+    .calendar-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      padding: 0 4px;
+
+      .calendar-nav-btn {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: 8px;
+        cursor: pointer;
+        color: var(--text-secondary);
+        transition: all 0.2s;
+
+        &:hover {
+          background: var(--bg-hover);
+          border-color: var(--primary);
+          color: var(--primary);
+        }
+
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+
+      .calendar-month {
+        font-size: 15px;
+        font-weight: 600;
+        color: var(--text-primary);
+      }
+    }
+
+    .calendar-weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 4px;
+      margin-bottom: 8px;
+
+      .calendar-weekday {
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--text-tertiary);
+        padding: 8px 0;
+      }
+    }
+
+    .calendar-days {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 4px;
+
+      .calendar-day {
+        aspect-ratio: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        color: var(--text-primary);
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        position: relative;
+
+        &.empty {
+          cursor: default;
+        }
+
+        &:not(.empty):hover {
+          background: var(--bg-hover);
+        }
+
+        &.in-range {
+          background: rgba(var(--primary-rgb), 0.08);
+        }
+
+        &.start,
+        &.end {
+          background: var(--primary);
+          color: #fff;
+          font-weight: 600;
+
+          &:hover {
+            background: var(--primary-hover);
+          }
+        }
+      }
+    }
+
+    .date-picker-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+
+      button {
+        padding: 10px 20px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:active {
+          transform: scale(0.98);
+        }
+      }
+
+      .cancel-btn {
+        background: var(--bg-secondary);
+        color: var(--text-primary);
+        border: 1px solid var(--border-color);
+
+        &:hover {
+          background: var(--bg-hover);
+        }
+      }
+
+      .confirm-btn {
+        background: var(--primary);
+        color: #fff;
+        border: none;
+
+        &:hover {
+          background: var(--primary-hover);
+        }
+      }
+    }
+  }
 }
 
 @keyframes exportSpin {
-  from { transform: rotate(0deg); }
+  from {
-  to { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }

src/pages/ExportPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
-import { Search, Download, FolderOpen, RefreshCw, Check, Calendar, FileJson, FileText, Table, Loader2, X, ChevronDown, FileSpreadsheet, Database, FileCode, CheckCircle, XCircle, ExternalLink } from 'lucide-react'
+import { Search, Download, FolderOpen, RefreshCw, Check, Calendar, FileJson, FileText, Table, Loader2, X, ChevronDown, ChevronLeft, ChevronRight, FileSpreadsheet, Database, FileCode, CheckCircle, XCircle, ExternalLink } from 'lucide-react'
 import * as configService from '../services/config'
 import './ExportPage.scss'
 
@@ -35,6 +35,9 @@ function ExportPage() {
   const [isExporting, setIsExporting] = useState(false)
   const [exportProgress, setExportProgress] = useState({ current: 0, total: 0, currentName: '' })
   const [exportResult, setExportResult] = useState<ExportResult | null>(null)
+  const [showDatePicker, setShowDatePicker] = useState(false)
+  const [calendarDate, setCalendarDate] = useState(new Date())
+  const [selectingStart, setSelectingStart] = useState(true)
 
   const [options, setOptions] = useState<ExportOptions>({
     format: 'chatlab',
@@ -145,7 +148,8 @@ function ExportPage() {
         exportAvatars: options.exportAvatars,
         dateRange: options.useAllTime ? null : options.dateRange ? {
           start: Math.floor(options.dateRange.start.getTime() / 1000),
-          end: Math.floor(options.dateRange.end.getTime() / 1000)
+          // 将结束日期设置为当天的 23:59:59,以包含当天的所有消息
+          end: Math.floor(new Date(options.dateRange.end.getFullYear(), options.dateRange.end.getMonth(), options.dateRange.end.getDate(), 23, 59, 59).getTime() / 1000)
         } : null
       }
 
@@ -167,6 +171,54 @@ function ExportPage() {
     }
   }
 
+  const getDaysInMonth = (date: Date) => {
+    const year = date.getFullYear()
+    const month = date.getMonth()
+    return new Date(year, month + 1, 0).getDate()
+  }
+
+  const getFirstDayOfMonth = (date: Date) => {
+    const year = date.getFullYear()
+    const month = date.getMonth()
+    return new Date(year, month, 1).getDay()
+  }
+
+  const generateCalendar = () => {
+    const daysInMonth = getDaysInMonth(calendarDate)
+    const firstDay = getFirstDayOfMonth(calendarDate)
+    const days: (number | null)[] = []
+
+    for (let i = 0; i < firstDay; i++) {
+      days.push(null)
+    }
+
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push(i)
+    }
+
+    return days
+  }
+
+  const handleDateSelect = (day: number) => {
+    const year = calendarDate.getFullYear()
+    const month = calendarDate.getMonth()
+    const selectedDate = new Date(year, month, day)
+
+    if (selectingStart) {
+      setOptions({
+        ...options,
+        dateRange: options.dateRange ? { ...options.dateRange, start: selectedDate } : { start: selectedDate, end: new Date() }
+      })
+      setSelectingStart(false)
+    } else {
+      setOptions({
+        ...options,
+        dateRange: options.dateRange ? { ...options.dateRange, end: selectedDate } : { start: new Date(), end: selectedDate }
+      })
+      setSelectingStart(true)
+    }
+  }
+
   const formatOptions = [
     { value: 'chatlab', label: 'ChatLab', icon: FileCode, desc: '标准格式，支持其他软件导入' },
     { value: 'chatlab-jsonl', label: 'ChatLab JSONL', icon: FileCode, desc: '流式格式，适合大量消息' },
@@ -281,12 +333,10 @@ function ExportPage() {
                 <span>导出全部时间</span>
               </label>
               {!options.useAllTime && options.dateRange && (
-                <div className="date-range">
+                <div className="date-range" onClick={() => setShowDatePicker(true)}>
                   <Calendar size={16} />
                   <span>{formatDate(options.dateRange.start)} - {formatDate(options.dateRange.end)}</span>
-                  <button className="change-btn">
                   <ChevronDown size={14} />
-                  </button>
                 </div>
               )}
             </div>
@@ -312,7 +362,26 @@ function ExportPage() {
               <FolderOpen size={16} />
               <span>{exportFolder || '未设置'}</span>
             </div>
-            <p className="path-hint">可在设置页面修改导出目录</p>
+            <button
+              className="select-folder-btn"
+              onClick={async () => {
+                try {
+                  const result = await window.electronAPI.dialog.openFile({
+                    title: '选择导出目录',
+                    properties: ['openDirectory']
+                  })
+                  if (!result.canceled && result.filePaths.length > 0) {
+                    setExportFolder(result.filePaths[0])
+                    await configService.setExportPath(result.filePaths[0])
+                  }
+                } catch (e) {
+                  console.error('选择目录失败:', e)
+                }
+              }}
+            >
+              <FolderOpen size={16} />
+              <span>选择导出目录</span>
+            </button>
           </div>
         </div>
 
@@ -387,6 +456,130 @@ function ExportPage() {
           </div>
         </div>
       )}
+
+      {/* 日期选择弹窗 */}
+      {showDatePicker && (
+        <div className="export-overlay" onClick={() => setShowDatePicker(false)}>
+          <div className="date-picker-modal" onClick={e => e.stopPropagation()}>
+            <h3>选择时间范围</h3>
+            <div className="quick-select">
+              <button
+                className="quick-btn"
+                onClick={() => {
+                  const end = new Date()
+                  const start = new Date(end.getTime() - 7 * 24 * 60 * 60 * 1000)
+                  setOptions({ ...options, dateRange: { start, end } })
+                }}
+              >
+                最近7天
+              </button>
+              <button
+                className="quick-btn"
+                onClick={() => {
+                  const end = new Date()
+                  const start = new Date(end.getTime() - 30 * 24 * 60 * 60 * 1000)
+                  setOptions({ ...options, dateRange: { start, end } })
+                }}
+              >
+                最近30天
+              </button>
+              <button
+                className="quick-btn"
+                onClick={() => {
+                  const end = new Date()
+                  const start = new Date(end.getTime() - 90 * 24 * 60 * 60 * 1000)
+                  setOptions({ ...options, dateRange: { start, end } })
+                }}
+              >
+                最近90天
+              </button>
+            </div>
+            <div className="date-display">
+              <div
+                className={`date-display-item ${selectingStart ? 'active' : ''}`}
+                onClick={() => setSelectingStart(true)}
+              >
+                <span className="date-label">开始日期</span>
+                <span className="date-value">
+                  {options.dateRange?.start.toLocaleDateString('zh-CN', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit'
+                  })}
+                </span>
+              </div>
+              <span className="date-separator">至</span>
+              <div
+                className={`date-display-item ${!selectingStart ? 'active' : ''}`}
+                onClick={() => setSelectingStart(false)}
+              >
+                <span className="date-label">结束日期</span>
+                <span className="date-value">
+                  {options.dateRange?.end.toLocaleDateString('zh-CN', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit'
+                  })}
+                </span>
+              </div>
+            </div>
+            <div className="calendar-container">
+              <div className="calendar-header">
+                <button
+                  className="calendar-nav-btn"
+                  onClick={() => setCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1))}
+                >
+                  <ChevronLeft size={18} />
+                </button>
+                <span className="calendar-month">
+                  {calendarDate.getFullYear()}年{calendarDate.getMonth() + 1}月
+                </span>
+                <button
+                  className="calendar-nav-btn"
+                  onClick={() => setCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1))}
+                >
+                  <ChevronRight size={18} />
+                </button>
+              </div>
+              <div className="calendar-weekdays">
+                {['日', '一', '二', '三', '四', '五', '六'].map(day => (
+                  <div key={day} className="calendar-weekday">{day}</div>
+                ))}
+              </div>
+              <div className="calendar-days">
+                {generateCalendar().map((day, index) => {
+                  if (day === null) {
+                    return <div key={`empty-${index}`} className="calendar-day empty" />
+                  }
+
+                  const currentDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth(), day)
+                  const isStart = options.dateRange?.start.toDateString() === currentDate.toDateString()
+                  const isEnd = options.dateRange?.end.toDateString() === currentDate.toDateString()
+                  const isInRange = options.dateRange && currentDate >= options.dateRange.start && currentDate <= options.dateRange.end
+
+                  return (
+                    <div
+                      key={day}
+                      className={`calendar-day ${isStart ? 'start' : ''} ${isEnd ? 'end' : ''} ${isInRange ? 'in-range' : ''}`}
+                      onClick={() => handleDateSelect(day)}
+                    >
+                      {day}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+            <div className="date-picker-actions">
+              <button className="cancel-btn" onClick={() => setShowDatePicker(false)}>
+                取消
+              </button>
+              <button className="confirm-btn" onClick={() => setShowDatePicker(false)}>
+                确定
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

src/pages/SettingsPage.tsx

@@ -10,12 +10,11 @@ import {
 } from 'lucide-react'
 import './SettingsPage.scss'
 
-type SettingsTab = 'appearance' | 'database' | 'export' | 'cache' | 'about'
+type SettingsTab = 'appearance' | 'database' | 'cache' | 'about'
 
 const tabs: { id: SettingsTab; label: string; icon: React.ElementType }[] = [
   { id: 'appearance', label: '外观', icon: Palette },
   { id: 'database', label: '数据库连接', icon: Database },
-  { id: 'export', label: '导出', icon: Download },
   { id: 'cache', label: '缓存', icon: HardDrive },
   { id: 'about', label: '关于', icon: Info }
 ]
@@ -31,8 +30,6 @@ function SettingsPage() {
   const [dbPath, setDbPath] = useState('')
   const [wxid, setWxid] = useState('')
   const [cachePath, setCachePath] = useState('')
-  const [exportPath, setExportPath] = useState('')
-  const [defaultExportPath, setDefaultExportPath] = useState('')
   const [logEnabled, setLogEnabled] = useState(false)
 
   const [isLoading, setIsLoadingState] = useState(false)
@@ -53,7 +50,6 @@ function SettingsPage() {
 
   useEffect(() => {
     loadConfig()
-    loadDefaultExportPath()
     loadAppVersion()
   }, [])
 
@@ -85,7 +81,6 @@ function SettingsPage() {
       if (savedPath) setDbPath(savedPath)
       if (savedWxid) setWxid(savedWxid)
       if (savedCachePath) setCachePath(savedCachePath)
-      if (savedExportPath) setExportPath(savedExportPath)
       if (savedImageXorKey != null) {
         setImageXorKey(`0x${savedImageXorKey.toString(16).toUpperCase().padStart(2, '0')}`)
       }
@@ -96,14 +91,7 @@ function SettingsPage() {
     }
   }
 
-  const loadDefaultExportPath = async () => {
+
-    try {
-      const downloadsPath = await window.electronAPI.app.getDownloadsPath()
-      setDefaultExportPath(downloadsPath)
-    } catch (e) {
-      console.error('获取默认导出路径失败:', e)
-    }
-  }
 
   const loadAppVersion = async () => {
     try {
@@ -230,18 +218,7 @@ function SettingsPage() {
     }
   }
 
-  const handleSelectExportPath = async () => {
+
-    try {
-      const result = await dialog.openFile({ title: '选择导出目录', properties: ['openDirectory'] })
-      if (!result.canceled && result.filePaths.length > 0) {
-        setExportPath(result.filePaths[0])
-        await configService.setExportPath(result.filePaths[0])
-        showMessage('已设置导出目录', true)
-      }
-    } catch (e) {
-      showMessage('选择目录失败', false)
-    }
-  }
 
   const handleAutoGetDbKey = async () => {
     if (isFetchingDbKey) return
@@ -303,16 +280,7 @@ function SettingsPage() {
     }
   }
 
-  const handleResetExportPath = async () => {
+
-    try {
-      const downloadsPath = await window.electronAPI.app.getDownloadsPath()
-      setExportPath(downloadsPath)
-      await configService.setExportPath(downloadsPath)
-      showMessage('已恢复为下载目录', true)
-    } catch (e) {
-      showMessage('恢复默认失败', false)
-    }
-  }
 
   const handleTestConnection = async () => {
     if (!dbPath) { showMessage('请先选择数据库目录', false); return }
@@ -396,7 +364,6 @@ function SettingsPage() {
       setDbPath('')
       setWxid('')
       setCachePath('')
-      setExportPath('')
       setLogEnabled(false)
       setDbConnected(false)
       await window.electronAPI.window.openOnboardingWindow()
@@ -562,19 +529,7 @@ function SettingsPage() {
     </div>
   )
 
-  const renderExportTab = () => (
+
-    <div className="tab-content">
-      <div className="form-group">
-        <label>导出目录</label>
-        <span className="form-hint">聊天记录导出的默认保存位置</span>
-        <input type="text" placeholder={defaultExportPath || '系统下载目录'} value={exportPath || defaultExportPath} onChange={(e) => setExportPath(e.target.value)} />
-        <div className="btn-row">
-          <button className="btn btn-secondary" onClick={handleSelectExportPath}><FolderOpen size={16} /> 浏览选择</button>
-          <button className="btn btn-secondary" onClick={handleResetExportPath}><RotateCcw size={16} /> 恢复默认</button>
-        </div>
-      </div>
-    </div>
-  )
 
   const renderCacheTab = () => (
     <div className="tab-content">
@@ -672,7 +627,6 @@ function SettingsPage() {
       <div className="settings-body">
         {activeTab === 'appearance' && renderAppearanceTab()}
         {activeTab === 'database' && renderDatabaseTab()}
-        {activeTab === 'export' && renderExportTab()}
         {activeTab === 'cache' && renderCacheTab()}
         {activeTab === 'about' && renderAboutTab()}
       </div>

src/types/electron.d.ts

@@ -55,6 +55,11 @@ export interface ElectronAPI {
   chat: {
     connect: () => Promise<{ success: boolean; error?: string }>
     getSessions: () => Promise<{ success: boolean; sessions?: ChatSession[]; error?: string }>
+    enrichSessionsContactInfo: (usernames: string[]) => Promise<{
+      success: boolean
+      contacts?: Record<string, { displayName?: string; avatarUrl?: string }>
+      error?: string
+    }>
     getMessages: (sessionId: string, offset?: number, limit?: number) => Promise<{
       success: boolean;
       messages?: Message[];