hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-25 07:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
cc
2026-01-12 23:42:09 +08:00
parent 756ee03aa0
commit bd94ba7b1a
19 changed files with 4699 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -14,6 +14,7 @@ import GroupAnalyticsPage from './pages/GroupAnalyticsPage'
import DataManagementPage from './pages/DataManagementPage'
import SettingsPage from './pages/SettingsPage'
import ExportPage from './pages/ExportPage'
import ClonePage from './pages/ClonePage'
import { useAppStore } from './stores/appStore'
import { themes, useThemeStore, type ThemeId } from './stores/themeStore'
import * as configService from './services/config'
@@ -311,6 +312,7 @@ function App() {
<Route path="/group-analytics" element={<GroupAnalyticsPage />} />
<Route path="/annual-report" element={<AnnualReportPage />} />
<Route path="/annual-report/view" element={<AnnualReportWindow />} />
<Route path="/clone" element={<ClonePage />} />
<Route path="/data-management" element={<DataManagementPage />} />
<Route path="/settings" element={<SettingsPage />} />
<Route path="/export" element={<ExportPage />} />

12
src/components/Sidebar.tsx
View File

@@ -1,6 +1,6 @@
import { useState } from 'react'
import { NavLink, useLocation } from 'react-router-dom'
import { Home, MessageSquare, BarChart3, Users, FileText, Database, Settings, ChevronLeft, ChevronRight, Download } from 'lucide-react'
import { Home, MessageSquare, BarChart3, Users, FileText, Database, Settings, ChevronLeft, ChevronRight, Download, Bot } from 'lucide-react'
import './Sidebar.scss'
function Sidebar() {
@@ -34,6 +34,16 @@ function Sidebar() {
<span className="nav-label">聊天</span>
</NavLink>
{/* 好友克隆 */}
<NavLink
to="/clone"
className={`nav-item ${isActive('/clone') ? 'active' : ''}`}
title={collapsed ? '好友克隆' : undefined}
>
<span className="nav-icon"><Bot size={20} /></span>
<span className="nav-label">好友克隆</span>
</NavLink>
{/* 私聊分析 */}
<NavLink
to="/analytics"

204
src/pages/ChatPage.tsx
View File

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

404
src/pages/ClonePage.scss Normal file
View File

@@ -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%;
}
}

481
src/pages/ClonePage.tsx Normal file
View File

@@ -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

12
src/services/config.ts
View File

@@ -15,6 +15,7 @@ export const CONFIG_KEYS = {
AGREEMENT_ACCEPTED: 'agreementAccepted',
LOG_ENABLED: 'logEnabled',
ONBOARDING_DONE: 'onboardingDone',
LLM_MODEL_PATH: 'llmModelPath',
IMAGE_XOR_KEY: 'imageXorKey',
IMAGE_AES_KEY: 'imageAesKey'
} as const
@@ -132,6 +133,17 @@ export async function setLogEnabled(enabled: boolean): Promise<void> {
await config.set(CONFIG_KEYS.LOG_ENABLED, enabled)
}
// 获取 LLM 模型路径
export async function getLlmModelPath(): Promise<string | null> {
const value = await config.get(CONFIG_KEYS.LLM_MODEL_PATH)
return (value as string) || null
}
// 设置 LLM 模型路径
export async function setLlmModelPath(path: string): Promise<void> {
await config.set(CONFIG_KEYS.LLM_MODEL_PATH, path)
}
// 清除所有配置
export async function clearConfig(): Promise<void> {
await config.clear()

18
src/types/electron.d.ts vendored
View File

@@ -95,6 +95,24 @@ export interface ElectronAPI {
getImageData: (sessionId: string, msgId: string) => Promise<{ success: boolean; data?: string; error?: string }>
getVoiceData: (sessionId: string, msgId: string) => Promise<{ success: boolean; data?: string; error?: string }>
}
clone: {
indexSession: (sessionId: string, options?: {
reset?: boolean
batchSize?: number
chunkGapSeconds?: number
maxChunkChars?: number
maxChunkMessages?: number
}) => Promise<{ success: boolean; totalMessages?: number; totalChunks?: number; debug?: any; error?: string }>
query: (payload: {
sessionId: string
keyword: string
options?: { topK?: number; roleFilter?: 'target' | 'me' }
}) => Promise<{ success: boolean; results?: any[]; debug?: any; error?: string }>
getToneGuide: (sessionId: string) => Promise<{ success: boolean; data?: any; error?: string }>
generateToneGuide: (sessionId: string, sampleSize?: number) => Promise<{ success: boolean; data?: any; error?: string }>
chat: (payload: { sessionId: string; message: string; topK?: number }) => Promise<{ success: boolean; response?: string; error?: string }>
onIndexProgress: (callback: (payload: { requestId: string; totalMessages: number; totalChunks: number; hasMore: boolean }) => void) => () => void
}
image: {
decrypt: (payload: { sessionId?: string; imageMd5?: string; imageDatName?: string; force?: boolean }) => Promise<{ success: boolean; localPath?: string; error?: string }>
resolveCache: (payload: { sessionId?: string; imageMd5?: string; imageDatName?: string }) => Promise<{ success: boolean; localPath?: string; hasUpdate?: boolean; error?: string }>