测试版本，添加了模拟好友并优化了本地缓存

src/pages/ChatPage.tsx

@@ -5,6 +5,25 @@ import type { ChatSession, Message } from '../types/models'
 import { getEmojiPath } from 'wechat-emojis'
 import './ChatPage.scss'
 
+const SESSION_MESSAGE_CACHE_LIMIT = 150
+const SESSION_MESSAGE_CACHE_MAX_ENTRIES = 200
+const sessionMessageCache = new Map<string, Message[]>()
+
+const cacheSessionMessages = (sessionId: string, messages: Message[]) => {
+  if (!sessionId) return
+  const trimmed = messages.length > SESSION_MESSAGE_CACHE_LIMIT
+    ? messages.slice(-SESSION_MESSAGE_CACHE_LIMIT)
+    : messages.slice()
+  sessionMessageCache.set(sessionId, trimmed)
+  if (sessionMessageCache.size > SESSION_MESSAGE_CACHE_MAX_ENTRIES) {
+    const oldestKey = sessionMessageCache.keys().next().value
+    if (oldestKey) {
+      sessionMessageCache.delete(oldestKey)
+    }
+  }
+}
+
+
 interface ChatPageProps {
   // 保留接口以备将来扩展
 }
@@ -23,66 +42,6 @@ interface SessionDetail {
   messageTables: { dbName: string; tableName: string; count: 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({
@@ -142,7 +101,6 @@ const SessionAvatar = React.memo(function SessionAvatar({ session, size = 48 }:
   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')
@@ -154,59 +112,13 @@ const SessionAvatar = React.memo(function SessionAvatar({ session, size = 48 }:
     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)
+    setShouldLoad(Boolean(session.avatarUrl))
   }, [session.avatarUrl])
 
-  // 检查图片是否已经从缓存加载完成
-  useEffect(() => {
-    if (shouldLoad && imgRef.current?.complete && imgRef.current?.naturalWidth > 0) {
-      setImageLoaded(true)
-    }
-  }, [session.avatarUrl, shouldLoad])
-
-  const hasValidUrl = session.avatarUrl && !imageError && shouldLoad
+  const hasValidUrl = Boolean(session.avatarUrl && !imageError && shouldLoad)
 
   return (
     <div
@@ -380,10 +292,10 @@ function ChatPage(_props: ChatPageProps) {
         // 确保 nextSessions 也是数组
         if (Array.isArray(nextSessions)) {
           setSessions(nextSessions)
-          // 延迟启动联系人信息加载，确保UI先渲染完成
+          // 启动联系人信息加载，UI 已经渲染完成
           setTimeout(() => {
             void enrichSessionsContactInfo(nextSessions)
-          }, 500)
+          }, 0)
         } else {
           console.error('mergeSessions returned non-array:', nextSessions)
           setSessions(sessionsArray)
@@ -420,9 +332,6 @@ function ChatPage(_props: ChatPageProps) {
     console.log(`[性能监控] 开始加载联系人信息，会话数: ${sessions.length}`)
     const totalStart = performance.now()
     
-    // 延迟启动，等待UI渲染完成
-    await new Promise(resolve => setTimeout(resolve, 500))
-    
     // 检查是否被取消
     if (enrichCancelledRef.current) {
       isEnrichingRef.current = false
@@ -440,10 +349,10 @@ function ChatPage(_props: ChatPageProps) {
 
       console.log(`[性能监控] 需要加载的联系人信息: ${needEnrich.length} 个`)
 
-      // 进一步减少批次大小，每批3个，避免DLL调用阻塞
-      const batchSize = 3
+      // 每次最多查询更多联系人，减少批次数
+      const batchSize = 20
       let loadedCount = 0
-      
+     
       for (let i = 0; i < needEnrich.length; i += batchSize) {
         // 如果正在滚动，暂停加载
         if (isScrollingRef.current) {
@@ -462,31 +371,15 @@ function ChatPage(_props: ChatPageProps) {
         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)
-          }
-        })
+        // 在执行 DLL 请求前让出控制权以保持响应
+        await new Promise(resolve => setTimeout(resolve, 0))
+        await loadContactInfoBatch(usernames)
         
         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
@@ -638,6 +531,32 @@ function ChatPage(_props: ChatPageProps) {
     }
   }
 
+  const loadCachedMessagesForSession = async (sessionId: string) => {
+    if (!sessionId) return
+    const cached = sessionMessageCache.get(sessionId)
+    if (cached && cached.length > 0) {
+      setMessages(cached)
+      setHasInitialMessages(true)
+      return
+    }
+    try {
+      const result = await window.electronAPI.chat.getCachedMessages(sessionId)
+      if (result.success && Array.isArray(result.messages) && result.messages.length > 0) {
+        const trimmed = result.messages.length > SESSION_MESSAGE_CACHE_LIMIT
+          ? result.messages.slice(-SESSION_MESSAGE_CACHE_LIMIT)
+          : result.messages
+        sessionMessageCache.set(sessionId, trimmed)
+        setMessages(trimmed)
+        setHasInitialMessages(true)
+        return
+      }
+    } catch (error) {
+      console.error('加载缓存消息失败:', error)
+    }
+    setMessages([])
+    setHasInitialMessages(false)
+  }
+
   // 加载消息
   const loadMessages = async (sessionId: string, offset = 0) => {
     const listEl = messageListRef.current
@@ -647,7 +566,6 @@ function ChatPage(_props: ChatPageProps) {
     
     if (offset === 0) {
       setLoadingMessages(true)
-      setMessages([])
     } else {
       setLoadingMore(true)
     }
@@ -660,6 +578,7 @@ function ChatPage(_props: ChatPageProps) {
       if (result.success && result.messages) {
         if (offset === 0) {
           setMessages(result.messages)
+          cacheSessionMessages(sessionId, result.messages)
           // 首次加载滚动到底部
           requestAnimationFrame(() => {
             if (messageListRef.current) {
@@ -694,14 +613,18 @@ function ChatPage(_props: ChatPageProps) {
   // 选择会话
   const handleSelectSession = (session: ChatSession) => {
     if (session.username === currentSessionId) return
-    setCurrentSession(session.username)
+    const sessionId = session.username
+    setCurrentSession(sessionId)
     setCurrentOffset(0)
-    loadMessages(session.username, 0)
     // 重置详情面板
     setSessionDetail(null)
     if (showDetailPanel) {
-      loadSessionDetail(session.username)
+      loadSessionDetail(sessionId)
     }
+    void (async () => {
+      await loadCachedMessagesForSession(sessionId)
+      loadMessages(sessionId, 0)
+    })()
   }
 
   // 搜索过滤
@@ -845,7 +768,6 @@ function ChatPage(_props: ChatPageProps) {
     
     // 组件卸载时清理
     return () => {
-      avatarLoadQueue.clear()
       if (contactUpdateTimerRef.current) {
         clearTimeout(contactUpdateTimerRef.current)
       }

src/pages/ClonePage.scss

@@ -0,0 +1,404 @@
+.clone-page {
+  gap: 20px;
+}
+
+.clone-hero {
+  background: linear-gradient(135deg, rgba(39, 189, 149, 0.18), rgba(14, 116, 144, 0.14));
+  border: 1px solid rgba(47, 198, 156, 0.2);
+}
+
+.clone-hero-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.clone-hero-title {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+}
+
+.clone-hero-title h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.clone-hero-badges {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.clone-hero-badges span {
+  padding: 6px 12px;
+  border-radius: 9999px;
+  background: rgba(10, 70, 63, 0.18);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.clone-config {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.clone-config-split {
+  display: grid;
+  grid-template-columns: minmax(240px, 340px) minmax(320px, 1fr);
+  gap: 20px;
+  align-items: stretch;
+}
+
+.clone-session-panel,
+.clone-model-panel {
+  background: var(--bg-primary);
+  border-radius: 16px;
+  padding: 16px;
+  border: 1px solid var(--border-color);
+}
+
+.clone-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.clone-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg-secondary);
+  padding: 6px 10px;
+  border-radius: 9999px;
+  border: 1px solid var(--border-color);
+  color: var(--text-tertiary);
+}
+
+.clone-search input {
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 12px;
+  width: 140px;
+  outline: none;
+}
+
+.clone-session-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 280px;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.clone-session-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.02);
+  padding: 10px 12px;
+  border-radius: 14px;
+  text-align: left;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.clone-session-item:hover {
+  border-color: rgba(45, 212, 191, 0.4);
+  background: rgba(45, 212, 191, 0.08);
+}
+
+.clone-session-item.active {
+  border-color: rgba(14, 116, 144, 0.6);
+  background: rgba(14, 116, 144, 0.16);
+}
+
+.clone-session-avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(14, 116, 144, 0.2));
+  color: var(--text-primary);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.clone-session-avatar img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.clone-session-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.clone-session-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.clone-session-meta {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.clone-model-tip {
+  margin-top: 10px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.clone-label {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-tertiary);
+}
+
+.clone-label select,
+.clone-label input {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  padding: 10px 12px;
+  border-radius: 12px;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.clone-input-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.clone-input-row input {
+  flex: 1;
+}
+
+.clone-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 20px;
+}
+
+.clone-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.clone-options label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.clone-options input[type='number'] {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  padding: 8px 10px;
+  border-radius: 10px;
+  color: var(--text-primary);
+}
+
+.clone-checkbox {
+  flex-direction: row !important;
+  align-items: center;
+  gap: 8px;
+  margin-top: 20px;
+  color: var(--text-secondary);
+}
+
+.clone-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.clone-progress {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.clone-alert {
+  margin-top: 12px;
+  background: rgba(239, 68, 68, 0.12);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: #b91c1c;
+  padding: 10px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+}
+
+.clone-tone {
+  margin-top: 12px;
+  background: var(--bg-primary);
+  border-radius: 14px;
+  padding: 12px 14px;
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+.clone-tone pre {
+  margin: 10px 0 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+}
+
+.clone-query {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.clone-query input {
+  flex: 1;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  padding: 10px 12px;
+  border-radius: 12px;
+  color: var(--text-primary);
+}
+
+.clone-query-results {
+  display: grid;
+  gap: 12px;
+}
+
+.clone-card {
+  background: var(--bg-primary);
+  border-radius: 14px;
+  padding: 12px 14px;
+  border: 1px solid var(--border-color);
+}
+
+.clone-card-meta {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-bottom: 6px;
+}
+
+.clone-card-content {
+  font-size: 13px;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.clone-empty {
+  padding: 14px;
+  background: var(--bg-primary);
+  border-radius: 12px;
+  border: 1px dashed var(--border-color);
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+
+.clone-chat {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.clone-chat-history {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 320px;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.clone-bubble {
+  max-width: 80%;
+  padding: 10px 12px;
+  border-radius: 14px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.clone-bubble.user {
+  align-self: flex-end;
+  background: rgba(37, 99, 235, 0.12);
+  border: 1px solid rgba(37, 99, 235, 0.2);
+}
+
+.clone-bubble.assistant {
+  align-self: flex-start;
+  background: rgba(16, 185, 129, 0.12);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.clone-chat-input {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.clone-chat-input input {
+  flex: 1;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  padding: 10px 12px;
+  border-radius: 12px;
+  color: var(--text-primary);
+}
+
+@media (max-width: 960px) {
+  .clone-hero-content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .clone-input-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .clone-config-split {
+    grid-template-columns: 1fr;
+  }
+
+  .clone-search input {
+    width: 100%;
+  }
+}

src/pages/ClonePage.tsx

@@ -0,0 +1,481 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Bot, Search, Wand2, Database, Play, RefreshCw, FileSearch } from 'lucide-react'
+import type { ChatSession } from '../types/models'
+import * as configService from '../services/config'
+import './ClonePage.scss'
+import './DataManagementPage.scss'
+
+type ToneGuide = {
+  summary?: string
+  details?: Record<string, any>
+}
+
+type ChatEntry = {
+  role: 'user' | 'assistant'
+  content: string
+}
+
+function ClonePage() {
+  const [sessions, setSessions] = useState<ChatSession[]>([])
+  const [selectedSession, setSelectedSession] = useState('')
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [searchKeyword, setSearchKeyword] = useState('')
+
+  const [modelPath, setModelPath] = useState('')
+  const [modelSaving, setModelSaving] = useState(false)
+
+  const [resetIndex, setResetIndex] = useState(false)
+  const [batchSize, setBatchSize] = useState(200)
+  const [chunkGapMinutes, setChunkGapMinutes] = useState(10)
+  const [maxChunkChars, setMaxChunkChars] = useState(400)
+  const [maxChunkMessages, setMaxChunkMessages] = useState(20)
+  const [indexing, setIndexing] = useState(false)
+  const [indexStatus, setIndexStatus] = useState<{ totalMessages: number; totalChunks: number; hasMore: boolean } | null>(null)
+
+  const [toneGuide, setToneGuide] = useState<ToneGuide | null>(null)
+  const [toneLoading, setToneLoading] = useState(false)
+  const [toneSampleSize, setToneSampleSize] = useState(500)
+  const [toneError, setToneError] = useState<string | null>(null)
+
+  const [queryKeyword, setQueryKeyword] = useState('')
+  const [queryResults, setQueryResults] = useState<any[]>([])
+  const [queryLoading, setQueryLoading] = useState(false)
+
+  const [chatInput, setChatInput] = useState('')
+  const [chatHistory, setChatHistory] = useState<ChatEntry[]>([])
+  const [chatLoading, setChatLoading] = useState(false)
+
+  useEffect(() => {
+    const loadSessions = async () => {
+      try {
+        const result = await window.electronAPI.chat.getSessions()
+        if (!result.success || !result.sessions) {
+          setLoadError(result.error || '加载会话失败')
+          return
+        }
+        const privateSessions = result.sessions.filter((s) => !s.username.includes('@chatroom'))
+        setSessions(privateSessions)
+        if (privateSessions.length > 0) {
+          setSelectedSession((prev) => prev || privateSessions[0].username)
+        }
+      } catch (err) {
+        setLoadError(String(err))
+      }
+    }
+    loadSessions()
+  }, [])
+
+  useEffect(() => {
+    const loadModelPath = async () => {
+      const saved = await configService.getLlmModelPath()
+      if (saved) setModelPath(saved)
+    }
+    loadModelPath()
+  }, [])
+
+  useEffect(() => {
+    const removeListener = window.electronAPI.clone.onIndexProgress?.((payload) => {
+      setIndexStatus({
+        totalMessages: payload.totalMessages,
+        totalChunks: payload.totalChunks,
+        hasMore: payload.hasMore
+      })
+    })
+    return () => removeListener?.()
+  }, [])
+
+  const sessionLabelMap = useMemo(() => {
+    const map = new Map<string, string>()
+    for (const session of sessions) {
+      map.set(session.username, session.displayName || session.username)
+    }
+    return map
+  }, [sessions])
+
+  const filteredSessions = useMemo(() => {
+    const keyword = searchKeyword.trim().toLowerCase()
+    if (!keyword) return sessions
+    return sessions.filter((session) => {
+      const name = session.displayName || ''
+      return (
+        name.toLowerCase().includes(keyword) ||
+        session.username.toLowerCase().includes(keyword)
+      )
+    })
+  }, [sessions, searchKeyword])
+
+  const getAvatarLetter = (session: ChatSession) => {
+    const name = session.displayName || session.username
+    if (!name) return '?'
+    return [...name][0] || '?'
+  }
+
+  const handlePickModel = async () => {
+    const result = await window.electronAPI.dialog.openFile({
+      title: '选择本地 LLM 模型 (.gguf)',
+      filters: [{ name: 'GGUF', extensions: ['gguf'] }]
+    })
+    if (!result.canceled && result.filePaths.length > 0) {
+      setModelPath(result.filePaths[0])
+    }
+  }
+
+  const handleSaveModel = async () => {
+    setModelSaving(true)
+    try {
+      await configService.setLlmModelPath(modelPath)
+    } finally {
+      setModelSaving(false)
+    }
+  }
+
+  const handleIndex = async () => {
+    if (!selectedSession) return
+    setIndexing(true)
+    setIndexStatus(null)
+    try {
+      await window.electronAPI.clone.indexSession(selectedSession, {
+        reset: resetIndex,
+        batchSize,
+        chunkGapSeconds: Math.max(1, Math.round(chunkGapMinutes * 60)),
+        maxChunkChars,
+        maxChunkMessages
+      })
+    } catch (err) {
+      setLoadError(String(err))
+    } finally {
+      setIndexing(false)
+    }
+  }
+
+  const handleToneGuide = async () => {
+    if (!selectedSession) return
+    setToneLoading(true)
+    setToneError(null)
+    try {
+      const result = await window.electronAPI.clone.generateToneGuide(selectedSession, toneSampleSize)
+      if (result.success) {
+        setToneGuide(result.data || null)
+      } else {
+        setToneError(result.error || '生成失败')
+      }
+    } finally {
+      setToneLoading(false)
+    }
+  }
+
+  const handleLoadToneGuide = async () => {
+    if (!selectedSession) return
+    setToneLoading(true)
+    setToneError(null)
+    try {
+      const result = await window.electronAPI.clone.getToneGuide(selectedSession)
+      if (result.success) {
+        setToneGuide(result.data || null)
+      } else {
+        setToneError(result.error || '未找到说明书')
+      }
+    } finally {
+      setToneLoading(false)
+    }
+  }
+
+  const handleQuery = async () => {
+    if (!selectedSession || !queryKeyword.trim()) return
+    setQueryLoading(true)
+    try {
+      const result = await window.electronAPI.clone.query({
+        sessionId: selectedSession,
+        keyword: queryKeyword.trim(),
+        options: { topK: 5, roleFilter: 'target' }
+      })
+      if (result.success) {
+        setQueryResults(result.results || [])
+      } else {
+        setQueryResults([])
+      }
+    } finally {
+      setQueryLoading(false)
+    }
+  }
+
+  const handleChat = async () => {
+    if (!selectedSession || !chatInput.trim()) return
+    const message = chatInput.trim()
+    setChatInput('')
+    setChatHistory((prev) => [...prev, { role: 'user', content: message }])
+    setChatLoading(true)
+    try {
+      const result = await window.electronAPI.clone.chat({ sessionId: selectedSession, message })
+      const reply = result.success ? (result.response || '') : result.error || '生成失败'
+      setChatHistory((prev) => [...prev, { role: 'assistant', content: reply }])
+    } finally {
+      setChatLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <div className="page-header">
+        <h1>好友克隆</h1>
+      </div>
+
+      <div className="page-scroll clone-page">
+        <section className="page-section clone-hero">
+          <div className="clone-hero-content">
+            <div className="clone-hero-title">
+              <Bot size={28} />
+              <div>
+                <h2>私聊分身实验室</h2>
+                <p className="section-desc">建立长期记忆、生成性格说明书、通过工具调用检索旧对话。</p>
+              </div>
+            </div>
+            <div className="clone-hero-badges">
+              <span>私聊限定</span>
+              <span>本地推理</span>
+              <span>可解释检索</span>
+            </div>
+          </div>
+          {loadError && <div className="clone-alert">{loadError}</div>}
+        </section>
+
+        <section className="page-section">
+          <div className="section-header">
+            <div>
+              <h2>基础配置</h2>
+              <p className="section-desc">选择要克隆的好友，并配置本地 LLM 模型。</p>
+            </div>
+          </div>
+
+          <div className="clone-config clone-config-split">
+            <div className="clone-session-panel">
+              <div className="clone-panel-header">
+                <span>目标好友</span>
+                <div className="clone-search">
+                  <Search size={14} />
+                  <input
+                    type="text"
+                    placeholder="搜索好友"
+                    value={searchKeyword}
+                    onChange={(e) => setSearchKeyword(e.target.value)}
+                  />
+                </div>
+              </div>
+
+              <div className="clone-session-list">
+                {filteredSessions.length === 0 ? (
+                  <div className="clone-empty">暂无可用会话</div>
+                ) : (
+                  filteredSessions.map((session) => (
+                    <button
+                      key={session.username}
+                      className={`clone-session-item ${selectedSession === session.username ? 'active' : ''}`}
+                      onClick={() => setSelectedSession(session.username)}
+                    >
+                      <div className="clone-session-avatar">
+                        <span>{getAvatarLetter(session)}</span>
+                        {session.avatarUrl && (
+                          <img
+                            src={session.avatarUrl}
+                            alt={session.displayName || session.username}
+                            onError={(e) => {
+                              e.currentTarget.style.display = 'none'
+                            }}
+                          />
+                        )}
+                      </div>
+                      <div className="clone-session-info">
+                        <div className="clone-session-name">{sessionLabelMap.get(session.username)}</div>
+                        <div className="clone-session-meta">{session.username}</div>
+                      </div>
+                    </button>
+                  ))
+                )}
+              </div>
+            </div>
+
+            <div className="clone-model-panel">
+              <label className="clone-label">
+                LLM 模型路径 (.gguf)
+                <div className="clone-input-row">
+                  <input
+                    type="text"
+                    value={modelPath}
+                    onChange={(e) => setModelPath(e.target.value)}
+                    placeholder="请选择本地模型路径"
+                  />
+                  <button className="btn btn-secondary" onClick={handlePickModel}>
+                    <FileSearch size={16} />
+                    选择
+                  </button>
+                  <button className="btn btn-primary" onClick={handleSaveModel} disabled={modelSaving}>
+                    保存
+                  </button>
+                </div>
+              </label>
+              <div className="clone-model-tip">
+                建议使用 1.5B 级别 GGUF 模型，首次加载可能需要一些时间。
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <div className="clone-grid">
+          <section className="page-section">
+            <div className="section-header">
+              <div>
+                <h2>长期记忆索引</h2>
+                <p className="section-desc">将私聊消息切片并向量化，建立可检索记忆库。</p>
+              </div>
+            </div>
+
+            <div className="clone-options">
+              <label>
+                <span>批大小</span>
+                <input type="number" min={50} max={1000} value={batchSize} onChange={(e) => setBatchSize(Number(e.target.value))} />
+              </label>
+              <label>
+                <span>时间间隔 (分钟)</span>
+                <input type="number" min={1} max={60} value={chunkGapMinutes} onChange={(e) => setChunkGapMinutes(Number(e.target.value))} />
+              </label>
+              <label>
+                <span>最大字数</span>
+                <input type="number" min={100} max={1200} value={maxChunkChars} onChange={(e) => setMaxChunkChars(Number(e.target.value))} />
+              </label>
+              <label>
+                <span>最大条数</span>
+                <input type="number" min={5} max={50} value={maxChunkMessages} onChange={(e) => setMaxChunkMessages(Number(e.target.value))} />
+              </label>
+              <label className="clone-checkbox">
+                <input type="checkbox" checked={resetIndex} onChange={(e) => setResetIndex(e.target.checked)} />
+                重建索引
+              </label>
+            </div>
+
+            <div className="clone-actions">
+              <button className="btn btn-primary" onClick={handleIndex} disabled={indexing || !selectedSession}>
+                {indexing ? <RefreshCw size={16} className="spin" /> : <Database size={16} />}
+                开始索引
+              </button>
+              {indexStatus && (
+                <div className="clone-progress">
+                  <span>消息 {indexStatus.totalMessages}</span>
+                  <span>分片 {indexStatus.totalChunks}</span>
+                  <span>{indexStatus.hasMore ? '索引中' : '已完成'}</span>
+                </div>
+              )}
+            </div>
+          </section>
+
+          <section className="page-section">
+            <div className="section-header">
+              <div>
+                <h2>性格说明书</h2>
+                <p className="section-desc">抽样目标发言，生成可长期驻留的说话风格。</p>
+              </div>
+            </div>
+
+            <div className="clone-options">
+              <label>
+                <span>抽样条数</span>
+                <input type="number" min={100} max={2000} value={toneSampleSize} onChange={(e) => setToneSampleSize(Number(e.target.value))} />
+              </label>
+              <div className="clone-actions">
+                <button className="btn btn-primary" onClick={handleToneGuide} disabled={toneLoading || !selectedSession}>
+                  {toneLoading ? <RefreshCw size={16} className="spin" /> : <Wand2 size={16} />}
+                  生成说明书
+                </button>
+                <button className="btn btn-secondary" onClick={handleLoadToneGuide} disabled={toneLoading || !selectedSession}>
+                  读取已有
+                </button>
+              </div>
+            </div>
+
+            {toneError && <div className="clone-alert">{toneError}</div>}
+            {toneGuide && (
+              <div className="clone-tone">
+                <strong>{toneGuide.summary || '未生成摘要'}</strong>
+                {toneGuide.details && (
+                  <pre>{JSON.stringify(toneGuide.details, null, 2)}</pre>
+                )}
+              </div>
+            )}
+          </section>
+        </div>
+
+        <section className="page-section">
+          <div className="section-header">
+            <div>
+              <h2>记忆检索测试</h2>
+              <p className="section-desc">输入关键词测试向量检索效果。</p>
+            </div>
+          </div>
+          <div className="clone-query">
+            <input
+              type="text"
+              value={queryKeyword}
+              onChange={(e) => setQueryKeyword(e.target.value)}
+              placeholder="比如：上海、火锅、雨天"
+            />
+            <button className="btn btn-secondary" onClick={handleQuery} disabled={queryLoading || !selectedSession}>
+              {queryLoading ? <RefreshCw size={16} className="spin" /> : <Search size={16} />}
+              搜索
+            </button>
+          </div>
+          <div className="clone-query-results">
+            {queryResults.length === 0 ? (
+              <div className="clone-empty">暂无结果</div>
+            ) : (
+              queryResults.map((item, idx) => (
+                <div key={`${item.id || idx}`} className="clone-card">
+                  <div className="clone-card-meta">
+                    <span>{item.role === 'target' ? '对方' : '我'}</span>
+                    <span>消息 {item.messageCount}</span>
+                  </div>
+                  <div className="clone-card-content">{item.content}</div>
+                </div>
+              ))
+            )}
+          </div>
+        </section>
+
+        <section className="page-section">
+          <div className="section-header">
+            <div>
+              <h2>分身对话</h2>
+              <p className="section-desc">模型会按需调用记忆检索，再用目标口吻回应。</p>
+            </div>
+          </div>
+
+          <div className="clone-chat">
+            <div className="clone-chat-history">
+              {chatHistory.length === 0 ? (
+                <div className="clone-empty">暂无对话</div>
+              ) : (
+                chatHistory.map((entry, idx) => (
+                  <div key={`${entry.role}-${idx}`} className={`clone-bubble ${entry.role}`}>
+                    {entry.content}
+                  </div>
+                ))
+              )}
+            </div>
+            <div className="clone-chat-input">
+              <input
+                type="text"
+                value={chatInput}
+                onChange={(e) => setChatInput(e.target.value)}
+                placeholder="对分身说点什么..."
+              />
+              <button className="btn btn-primary" onClick={handleChat} disabled={chatLoading || !selectedSession}>
+                {chatLoading ? <RefreshCw size={16} className="spin" /> : <Play size={16} />}
+                发送
+              </button>
+            </div>
+          </div>
+        </section>
+      </div>
+    </>
+  )
+}
+
+export default ClonePage