mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-25 23:35:49 +00:00
Compare commits
57 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e7e4ffd53f | ||
|
|
04e0bf6b29 | ||
|
|
dadd9d799c | ||
|
|
b3aaea16f2 | ||
|
|
f3994a1a72 | ||
|
|
26fbfd2c98 | ||
|
|
3c51dee9a6 | ||
|
|
b9fa0cc215 | ||
|
|
21f748a2dc | ||
|
|
87fe130791 | ||
|
|
ff1bc279f2 | ||
|
|
77689ec528 | ||
|
|
5ea0b65905 | ||
|
|
eac6b053ee | ||
|
|
d52abfddbf | ||
|
|
8f2e403837 | ||
|
|
17c9436c30 | ||
|
|
9969c073e5 | ||
|
|
dc83297854 | ||
|
|
b6c9f2b32b | ||
|
|
e63f901478 | ||
|
|
893cdb4d92 | ||
|
|
d99ec05e81 | ||
|
|
c8f726eddc | ||
|
|
4e57a30c90 | ||
|
|
0a88275669 | ||
|
|
2a45cf1276 | ||
|
|
d63f1e0d79 | ||
|
|
f55507cd99 | ||
|
|
836b0f9df4 | ||
|
|
b09068f1f7 | ||
|
|
714a9400d5 | ||
|
|
13dd2fca21 | ||
|
|
5d1f834b61 | ||
|
|
3ca86224eb | ||
|
|
f10e974f36 | ||
|
|
76c40e4118 | ||
|
|
5307f55840 | ||
|
|
3405f26d10 | ||
|
|
85d82bfd09 | ||
|
|
e557ee224e | ||
|
|
88544c4a5d | ||
|
|
b66fc32068 | ||
|
|
7ac3c281a3 | ||
|
|
28616493ce | ||
|
|
d68e4fe880 | ||
|
|
1fd676d63e | ||
|
|
9f31ac0529 | ||
|
|
3c32ad5ca8 | ||
|
|
879d84b597 | ||
|
|
ab3551fb91 | ||
|
|
b9d1ea316f | ||
|
|
7762bd37c9 | ||
|
|
2e61902556 | ||
|
|
9e8072c337 | ||
|
|
827e77c9a3 | ||
|
|
1f03d35253 |
48
README.md
48
README.md
@@ -29,18 +29,17 @@ WeFlow 是一个**完全本地**的微信**实时**聊天记录查看、分析
|
|||||||
> [!TIP]
|
> [!TIP]
|
||||||
> 如果导出聊天记录后,想深入分析聊天内容可以试试 [ChatLab](https://chatlab.fun/)
|
> 如果导出聊天记录后,想深入分析聊天内容可以试试 [ChatLab](https://chatlab.fun/)
|
||||||
|
|
||||||
> [!TIP]
|
> [!NOTE]
|
||||||
> 仅支持微信 **4.0** 及以上版本
|
> 仅支持微信 **4.0 及以上**版本,确保你的微信版本符合要求
|
||||||
|
|
||||||
|
|
||||||
# 加入微信交流群
|
# 加入微信交流群
|
||||||
|
|
||||||
> 🎉 扫码加入微信群,与其他 WeFlow 用户一起交流问题和使用心得。
|
> 🎉 扫码加入微信群,与其他 WeFlow 用户一起交流问题和使用心得。
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<img src="2wm.png" alt="WeFlow 微信交流群二维码(一群)" width="220" style="margin-right: 16px;">
|
<img src="mdassets/us.png" alt="WeFlow 微信交流群二维码" width="220" style="margin-right: 16px;"
|
||||||
<img src="3wm.png" alt="WeFlow 微信交流群二维码(二群)" width="220">
|
|
||||||
</p>
|
</p>
|
||||||
<p align="center">一群满了加二群</p>
|
|
||||||
|
|
||||||
## 主要功能
|
## 主要功能
|
||||||
|
|
||||||
@@ -48,10 +47,7 @@ WeFlow 是一个**完全本地**的微信**实时**聊天记录查看、分析
|
|||||||
- 统计分析与群聊画像
|
- 统计分析与群聊画像
|
||||||
- 年度报告与可视化概览
|
- 年度报告与可视化概览
|
||||||
- 导出聊天记录为 HTML 等格式
|
- 导出聊天记录为 HTML 等格式
|
||||||
- 本地解密与数据库管理
|
|
||||||
|
|
||||||
> [!NOTE]
|
|
||||||
> ⚠️ 本工具仅适配微信 **4.0 及以上**版本,请确保你的微信版本符合要求
|
|
||||||
|
|
||||||
## 快速开始
|
## 快速开始
|
||||||
|
|
||||||
@@ -78,39 +74,19 @@ npm run build
|
|||||||
|
|
||||||
打包产物在 `release` 目录下。
|
打包产物在 `release` 目录下。
|
||||||
|
|
||||||
## 技术栈
|
|
||||||
|
|
||||||
- **前端**: React 19 + TypeScript + Zustand
|
|
||||||
- **桌面**: Electron 39
|
|
||||||
- **构建**: Vite + electron-builder
|
|
||||||
- **数据库**: better-sqlite3 + WCDB DLL
|
|
||||||
- **样式**: SCSS + CSS Variables
|
|
||||||
|
|
||||||
## 项目结构
|
|
||||||
|
|
||||||
```
|
|
||||||
WeFlow/
|
|
||||||
├── electron/ # Electron 主进程
|
|
||||||
│ ├── main.ts # 主进程入口
|
|
||||||
│ ├── preload.ts # 预加载脚本
|
|
||||||
│ └── services/ # 后端服务
|
|
||||||
│ ├── chatService.ts # 聊天数据服务
|
|
||||||
│ ├── wcdbService.ts # 数据库服务
|
|
||||||
│ └── ...
|
|
||||||
├── src/ # React 前端
|
|
||||||
│ ├── components/ # 通用组件
|
|
||||||
│ ├── pages/ # 页面组件
|
|
||||||
│ ├── stores/ # Zustand 状态管理
|
|
||||||
│ ├── services/ # 前端服务
|
|
||||||
│ └── types/ # TypeScript 类型定义
|
|
||||||
├── public/ # 静态资源
|
|
||||||
└── resources/ # 打包资源
|
|
||||||
```
|
|
||||||
|
|
||||||
## 致谢
|
## 致谢
|
||||||
|
|
||||||
- [密语 CipherTalk](https://github.com/ILoveBingLu/miyu) 为本项目提供了基础框架
|
- [密语 CipherTalk](https://github.com/ILoveBingLu/miyu) 为本项目提供了基础框架
|
||||||
|
|
||||||
|
## 支持我们
|
||||||
|
|
||||||
|
如果 WeFlow 确实帮到了你,可以考虑请我们喝杯咖啡:
|
||||||
|
|
||||||
|
|
||||||
|
> TRC20 **Address:** `TZCtAw8CaeARWZBfvjidCnTcfnAtf6nvS6`
|
||||||
|
|
||||||
|
|
||||||
## Star History
|
## Star History
|
||||||
|
|
||||||
@@ -128,6 +104,4 @@ WeFlow/
|
|||||||
|
|
||||||
**请负责任地使用本工具,遵守相关法律法规**
|
**请负责任地使用本工具,遵守相关法律法规**
|
||||||
|
|
||||||
我们总是在向前走,却很少有机会回头看看
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
114
electron/main.ts
114
electron/main.ts
@@ -1,3 +1,4 @@
|
|||||||
|
import './preload-env'
|
||||||
import { app, BrowserWindow, ipcMain, nativeTheme, session } from 'electron'
|
import { app, BrowserWindow, ipcMain, nativeTheme, session } from 'electron'
|
||||||
import { Worker } from 'worker_threads'
|
import { Worker } from 'worker_threads'
|
||||||
import { join, dirname } from 'path'
|
import { join, dirname } from 'path'
|
||||||
@@ -18,6 +19,7 @@ import { KeyService } from './services/keyService'
|
|||||||
import { voiceTranscribeService } from './services/voiceTranscribeService'
|
import { voiceTranscribeService } from './services/voiceTranscribeService'
|
||||||
import { videoService } from './services/videoService'
|
import { videoService } from './services/videoService'
|
||||||
import { snsService } from './services/snsService'
|
import { snsService } from './services/snsService'
|
||||||
|
import { contactExportService } from './services/contactExportService'
|
||||||
|
|
||||||
|
|
||||||
// 配置自动更新
|
// 配置自动更新
|
||||||
@@ -136,6 +138,28 @@ function createWindow(options: { autoShow?: boolean } = {}) {
|
|||||||
win.loadFile(join(__dirname, '../dist/index.html'))
|
win.loadFile(join(__dirname, '../dist/index.html'))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 拦截请求,修改 Referer 和 User-Agent 以通过微信 CDN 鉴权
|
||||||
|
session.defaultSession.webRequest.onBeforeSendHeaders(
|
||||||
|
{
|
||||||
|
urls: [
|
||||||
|
'*://*.qpic.cn/*',
|
||||||
|
'*://*.qlogo.cn/*',
|
||||||
|
'*://*.wechat.com/*',
|
||||||
|
'*://*.weixin.qq.com/*'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
(details, callback) => {
|
||||||
|
details.requestHeaders['User-Agent'] = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 MicroMessenger/7.0.20.1781(0x6700143B) WindowsWechat(0x63090719) XWEB/8351"
|
||||||
|
details.requestHeaders['Accept'] = "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8"
|
||||||
|
details.requestHeaders['Accept-Encoding'] = "gzip, deflate, br"
|
||||||
|
details.requestHeaders['Accept-Language'] = "zh-CN,zh;q=0.9"
|
||||||
|
details.requestHeaders['Referer'] = "https://servicewechat.com/"
|
||||||
|
details.requestHeaders['Connection'] = "keep-alive"
|
||||||
|
details.requestHeaders['Range'] = "bytes=0-"
|
||||||
|
callback({ cancel: false, requestHeaders: details.requestHeaders })
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
return win
|
return win
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -345,6 +369,66 @@ function createVideoPlayerWindow(videoPath: string, videoWidth?: number, videoHe
|
|||||||
return win
|
return win
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建独立的聊天记录窗口
|
||||||
|
*/
|
||||||
|
function createChatHistoryWindow(sessionId: string, messageId: number) {
|
||||||
|
const isDev = !!process.env.VITE_DEV_SERVER_URL
|
||||||
|
const iconPath = isDev
|
||||||
|
? join(__dirname, '../public/icon.ico')
|
||||||
|
: join(process.resourcesPath, 'icon.ico')
|
||||||
|
|
||||||
|
// 根据系统主题设置窗口背景色
|
||||||
|
const isDark = nativeTheme.shouldUseDarkColors
|
||||||
|
|
||||||
|
const win = new BrowserWindow({
|
||||||
|
width: 600,
|
||||||
|
height: 800,
|
||||||
|
minWidth: 400,
|
||||||
|
minHeight: 500,
|
||||||
|
icon: iconPath,
|
||||||
|
webPreferences: {
|
||||||
|
preload: join(__dirname, 'preload.js'),
|
||||||
|
contextIsolation: true,
|
||||||
|
nodeIntegration: false
|
||||||
|
},
|
||||||
|
titleBarStyle: 'hidden',
|
||||||
|
titleBarOverlay: {
|
||||||
|
color: '#00000000',
|
||||||
|
symbolColor: isDark ? '#ffffff' : '#1a1a1a',
|
||||||
|
height: 32
|
||||||
|
},
|
||||||
|
show: false,
|
||||||
|
backgroundColor: isDark ? '#1A1A1A' : '#F0F0F0',
|
||||||
|
autoHideMenuBar: true
|
||||||
|
})
|
||||||
|
|
||||||
|
win.once('ready-to-show', () => {
|
||||||
|
win.show()
|
||||||
|
})
|
||||||
|
|
||||||
|
if (process.env.VITE_DEV_SERVER_URL) {
|
||||||
|
win.loadURL(`${process.env.VITE_DEV_SERVER_URL}#/chat-history/${sessionId}/${messageId}`)
|
||||||
|
|
||||||
|
win.webContents.on('before-input-event', (event, input) => {
|
||||||
|
if (input.key === 'F12' || (input.control && input.shift && input.key === 'I')) {
|
||||||
|
if (win.webContents.isDevToolsOpened()) {
|
||||||
|
win.webContents.closeDevTools()
|
||||||
|
} else {
|
||||||
|
win.webContents.openDevTools()
|
||||||
|
}
|
||||||
|
event.preventDefault()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
win.loadFile(join(__dirname, '../dist/index.html'), {
|
||||||
|
hash: `/chat-history/${sessionId}/${messageId}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return win
|
||||||
|
}
|
||||||
|
|
||||||
function showMainWindow() {
|
function showMainWindow() {
|
||||||
shouldShowMain = true
|
shouldShowMain = true
|
||||||
if (mainWindowReady) {
|
if (mainWindowReady) {
|
||||||
@@ -451,7 +535,7 @@ function registerIpcHandlers() {
|
|||||||
|
|
||||||
// 监听下载进度
|
// 监听下载进度
|
||||||
autoUpdater.on('download-progress', (progress) => {
|
autoUpdater.on('download-progress', (progress) => {
|
||||||
win?.webContents.send('app:downloadProgress', progress.percent)
|
win?.webContents.send('app:downloadProgress', progress)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 下载完成后自动安装
|
// 下载完成后自动安装
|
||||||
@@ -506,6 +590,12 @@ function registerIpcHandlers() {
|
|||||||
createVideoPlayerWindow(videoPath, videoWidth, videoHeight)
|
createVideoPlayerWindow(videoPath, videoWidth, videoHeight)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 打开聊天记录窗口
|
||||||
|
ipcMain.handle('window:openChatHistoryWindow', (_, sessionId: string, messageId: number) => {
|
||||||
|
createChatHistoryWindow(sessionId, messageId)
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
// 根据视频尺寸调整窗口大小
|
// 根据视频尺寸调整窗口大小
|
||||||
ipcMain.handle('window:resizeToFitVideo', (event, videoWidth: number, videoHeight: number) => {
|
ipcMain.handle('window:resizeToFitVideo', (event, videoWidth: number, videoHeight: number) => {
|
||||||
const win = BrowserWindow.fromWebContents(event.sender)
|
const win = BrowserWindow.fromWebContents(event.sender)
|
||||||
@@ -625,11 +715,15 @@ function registerIpcHandlers() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
ipcMain.handle('chat:getContact', async (_, username: string) => {
|
ipcMain.handle('chat:getContact', async (_, username: string) => {
|
||||||
return chatService.getContact(username)
|
return await chatService.getContact(username)
|
||||||
})
|
})
|
||||||
|
|
||||||
ipcMain.handle('chat:getContactAvatar', async (_, username: string) => {
|
ipcMain.handle('chat:getContactAvatar', async (_, username: string) => {
|
||||||
return chatService.getContactAvatar(username)
|
return await chatService.getContactAvatar(username)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle('chat:getContacts', async () => {
|
||||||
|
return await chatService.getContacts()
|
||||||
})
|
})
|
||||||
|
|
||||||
ipcMain.handle('chat:getCachedMessages', async (_, sessionId: string) => {
|
ipcMain.handle('chat:getCachedMessages', async (_, sessionId: string) => {
|
||||||
@@ -670,7 +764,7 @@ function registerIpcHandlers() {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
ipcMain.handle('chat:getMessageById', async (_, sessionId: string, localId: number) => {
|
ipcMain.handle('chat:getMessage', async (_, sessionId: string, localId: number) => {
|
||||||
return chatService.getMessageById(sessionId, localId)
|
return chatService.getMessageById(sessionId, localId)
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -682,6 +776,14 @@ function registerIpcHandlers() {
|
|||||||
return snsService.getTimeline(limit, offset, usernames, keyword, startTime, endTime)
|
return snsService.getTimeline(limit, offset, usernames, keyword, startTime, endTime)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
ipcMain.handle('sns:debugResource', async (_, url: string) => {
|
||||||
|
return snsService.debugResource(url)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle('sns:proxyImage', async (_, url: string) => {
|
||||||
|
return snsService.proxyImage(url)
|
||||||
|
})
|
||||||
|
|
||||||
// 私聊克隆
|
// 私聊克隆
|
||||||
|
|
||||||
|
|
||||||
@@ -710,6 +812,10 @@ function registerIpcHandlers() {
|
|||||||
return exportService.exportSessionToChatLab(sessionId, outputPath, options)
|
return exportService.exportSessionToChatLab(sessionId, outputPath, options)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
ipcMain.handle('export:exportContacts', async (_, outputDir: string, options: any) => {
|
||||||
|
return contactExportService.exportContacts(outputDir, options)
|
||||||
|
})
|
||||||
|
|
||||||
// 数据分析相关
|
// 数据分析相关
|
||||||
ipcMain.handle('analytics:getOverallStatistics', async (_, force?: boolean) => {
|
ipcMain.handle('analytics:getOverallStatistics', async (_, force?: boolean) => {
|
||||||
return analyticsService.getOverallStatistics(force)
|
return analyticsService.getOverallStatistics(force)
|
||||||
|
|||||||
39
electron/preload-env.ts
Normal file
39
electron/preload-env.ts
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import { join, dirname } from 'path'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 强制将本地资源目录添加到 PATH 最前端,确保优先加载本地 DLL
|
||||||
|
* 解决系统中存在冲突版本的 DLL 导致的应用崩溃问题
|
||||||
|
*/
|
||||||
|
function enforceLocalDllPriority() {
|
||||||
|
const isDev = !!process.env.VITE_DEV_SERVER_URL
|
||||||
|
const sep = process.platform === 'win32' ? ';' : ':'
|
||||||
|
|
||||||
|
let possiblePaths: string[] = []
|
||||||
|
|
||||||
|
if (isDev) {
|
||||||
|
// 开发环境
|
||||||
|
possiblePaths.push(join(process.cwd(), 'resources'))
|
||||||
|
} else {
|
||||||
|
// 生产环境
|
||||||
|
possiblePaths.push(dirname(process.execPath))
|
||||||
|
if (process.resourcesPath) {
|
||||||
|
possiblePaths.push(process.resourcesPath)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const dllPaths = possiblePaths.join(sep)
|
||||||
|
|
||||||
|
if (process.env.PATH) {
|
||||||
|
process.env.PATH = dllPaths + sep + process.env.PATH
|
||||||
|
} else {
|
||||||
|
process.env.PATH = dllPaths
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('[WeFlow] Environment PATH updated to enforce local DLL priority:', dllPaths)
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
enforceLocalDllPriority()
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[WeFlow] Failed to enforce local DLL priority:', e)
|
||||||
|
}
|
||||||
@@ -29,7 +29,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
getVersion: () => ipcRenderer.invoke('app:getVersion'),
|
getVersion: () => ipcRenderer.invoke('app:getVersion'),
|
||||||
checkForUpdates: () => ipcRenderer.invoke('app:checkForUpdates'),
|
checkForUpdates: () => ipcRenderer.invoke('app:checkForUpdates'),
|
||||||
downloadAndInstall: () => ipcRenderer.invoke('app:downloadAndInstall'),
|
downloadAndInstall: () => ipcRenderer.invoke('app:downloadAndInstall'),
|
||||||
onDownloadProgress: (callback: (progress: number) => void) => {
|
onDownloadProgress: (callback: (progress: any) => void) => {
|
||||||
ipcRenderer.on('app:downloadProgress', (_, progress) => callback(progress))
|
ipcRenderer.on('app:downloadProgress', (_, progress) => callback(progress))
|
||||||
return () => ipcRenderer.removeAllListeners('app:downloadProgress')
|
return () => ipcRenderer.removeAllListeners('app:downloadProgress')
|
||||||
},
|
},
|
||||||
@@ -57,7 +57,9 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
openVideoPlayerWindow: (videoPath: string, videoWidth?: number, videoHeight?: number) =>
|
openVideoPlayerWindow: (videoPath: string, videoWidth?: number, videoHeight?: number) =>
|
||||||
ipcRenderer.invoke('window:openVideoPlayerWindow', videoPath, videoWidth, videoHeight),
|
ipcRenderer.invoke('window:openVideoPlayerWindow', videoPath, videoWidth, videoHeight),
|
||||||
resizeToFitVideo: (videoWidth: number, videoHeight: number) =>
|
resizeToFitVideo: (videoWidth: number, videoHeight: number) =>
|
||||||
ipcRenderer.invoke('window:resizeToFitVideo', videoWidth, videoHeight)
|
ipcRenderer.invoke('window:resizeToFitVideo', videoWidth, videoHeight),
|
||||||
|
openChatHistoryWindow: (sessionId: string, messageId: number) =>
|
||||||
|
ipcRenderer.invoke('window:openChatHistoryWindow', sessionId, messageId)
|
||||||
},
|
},
|
||||||
|
|
||||||
// 数据库路径
|
// 数据库路径
|
||||||
@@ -120,7 +122,10 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
return () => ipcRenderer.removeListener('chat:voiceTranscriptPartial', listener)
|
return () => ipcRenderer.removeListener('chat:voiceTranscriptPartial', listener)
|
||||||
},
|
},
|
||||||
execQuery: (kind: string, path: string | null, sql: string) =>
|
execQuery: (kind: string, path: string | null, sql: string) =>
|
||||||
ipcRenderer.invoke('chat:execQuery', kind, path, sql)
|
ipcRenderer.invoke('chat:execQuery', kind, path, sql),
|
||||||
|
getContacts: () => ipcRenderer.invoke('chat:getContacts'),
|
||||||
|
getMessage: (sessionId: string, localId: number) =>
|
||||||
|
ipcRenderer.invoke('chat:getMessage', sessionId, localId)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
@@ -194,6 +199,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
ipcRenderer.invoke('export:exportSessions', sessionIds, outputDir, options),
|
ipcRenderer.invoke('export:exportSessions', sessionIds, outputDir, options),
|
||||||
exportSession: (sessionId: string, outputPath: string, options: any) =>
|
exportSession: (sessionId: string, outputPath: string, options: any) =>
|
||||||
ipcRenderer.invoke('export:exportSession', sessionId, outputPath, options),
|
ipcRenderer.invoke('export:exportSession', sessionId, outputPath, options),
|
||||||
|
exportContacts: (outputDir: string, options: any) =>
|
||||||
|
ipcRenderer.invoke('export:exportContacts', outputDir, options),
|
||||||
onProgress: (callback: (payload: { current: number; total: number; currentSession: string; phase: string }) => void) => {
|
onProgress: (callback: (payload: { current: number; total: number; currentSession: string; phase: string }) => void) => {
|
||||||
ipcRenderer.on('export:progress', (_, payload) => callback(payload))
|
ipcRenderer.on('export:progress', (_, payload) => callback(payload))
|
||||||
return () => ipcRenderer.removeAllListeners('export:progress')
|
return () => ipcRenderer.removeAllListeners('export:progress')
|
||||||
@@ -214,6 +221,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
// 朋友圈
|
// 朋友圈
|
||||||
sns: {
|
sns: {
|
||||||
getTimeline: (limit: number, offset: number, usernames?: string[], keyword?: string, startTime?: number, endTime?: number) =>
|
getTimeline: (limit: number, offset: number, usernames?: string[], keyword?: string, startTime?: number, endTime?: number) =>
|
||||||
ipcRenderer.invoke('sns:getTimeline', limit, offset, usernames, keyword, startTime, endTime)
|
ipcRenderer.invoke('sns:getTimeline', limit, offset, usernames, keyword, startTime, endTime),
|
||||||
|
debugResource: (url: string) => ipcRenderer.invoke('sns:debugResource', url),
|
||||||
|
proxyImage: (url: string) => ipcRenderer.invoke('sns:proxyImage', url)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -58,6 +58,26 @@ export interface Message {
|
|||||||
encrypVer?: number
|
encrypVer?: number
|
||||||
cdnThumbUrl?: string
|
cdnThumbUrl?: string
|
||||||
voiceDurationSeconds?: number
|
voiceDurationSeconds?: number
|
||||||
|
// Type 49 细分字段
|
||||||
|
linkTitle?: string // 链接/文件标题
|
||||||
|
linkUrl?: string // 链接 URL
|
||||||
|
linkThumb?: string // 链接缩略图
|
||||||
|
fileName?: string // 文件名
|
||||||
|
fileSize?: number // 文件大小
|
||||||
|
fileExt?: string // 文件扩展名
|
||||||
|
xmlType?: string // XML 中的 type 字段
|
||||||
|
// 名片消息
|
||||||
|
cardUsername?: string // 名片的微信ID
|
||||||
|
cardNickname?: string // 名片的昵称
|
||||||
|
// 聊天记录
|
||||||
|
chatRecordTitle?: string // 聊天记录标题
|
||||||
|
chatRecordList?: Array<{
|
||||||
|
datatype: number
|
||||||
|
sourcename: string
|
||||||
|
sourcetime: string
|
||||||
|
datadesc: string
|
||||||
|
datatitle?: string
|
||||||
|
}>
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Contact {
|
export interface Contact {
|
||||||
@@ -67,6 +87,15 @@ export interface Contact {
|
|||||||
nickName: string
|
nickName: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface ContactInfo {
|
||||||
|
username: string
|
||||||
|
displayName: string
|
||||||
|
remark?: string
|
||||||
|
nickname?: string
|
||||||
|
avatarUrl?: string
|
||||||
|
type: 'friend' | 'group' | 'official' | 'other'
|
||||||
|
}
|
||||||
|
|
||||||
// 表情包缓存
|
// 表情包缓存
|
||||||
const emojiCache: Map<string, string> = new Map()
|
const emojiCache: Map<string, string> = new Map()
|
||||||
const emojiDownloading: Map<string, Promise<string | null>> = new Map()
|
const emojiDownloading: Map<string, Promise<string | null>> = new Map()
|
||||||
@@ -97,6 +126,9 @@ class ChatService {
|
|||||||
timeColumn?: string
|
timeColumn?: string
|
||||||
name2IdTable?: string
|
name2IdTable?: string
|
||||||
}>()
|
}>()
|
||||||
|
// 缓存会话表信息,避免每次查询
|
||||||
|
private sessionTablesCache = new Map<string, Array<{ tableName: string; dbPath: string }>>()
|
||||||
|
private readonly sessionTablesCacheTtl = 300000 // 5分钟
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.configService = new ConfigService()
|
this.configService = new ConfigService()
|
||||||
@@ -494,6 +526,153 @@ class ChatService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取通讯录列表
|
||||||
|
*/
|
||||||
|
async getContacts(): Promise<{ success: boolean; contacts?: ContactInfo[]; error?: string }> {
|
||||||
|
try {
|
||||||
|
const connectResult = await this.ensureConnected()
|
||||||
|
if (!connectResult.success) {
|
||||||
|
return { success: false, error: connectResult.error }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用execQuery直接查询加密的contact.db
|
||||||
|
// kind='contact', path=null表示使用已打开的contact.db
|
||||||
|
const contactQuery = `
|
||||||
|
SELECT username, remark, nick_name, alias, local_type
|
||||||
|
FROM contact
|
||||||
|
`
|
||||||
|
|
||||||
|
console.log('查询contact.db...')
|
||||||
|
const contactResult = await wcdbService.execQuery('contact', null, contactQuery)
|
||||||
|
|
||||||
|
if (!contactResult.success || !contactResult.rows) {
|
||||||
|
console.error('查询联系人失败:', contactResult.error)
|
||||||
|
return { success: false, error: contactResult.error || '查询联系人失败' }
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('查询到', contactResult.rows.length, '条联系人记录')
|
||||||
|
const rows = contactResult.rows as Record<string, any>[]
|
||||||
|
|
||||||
|
// 调试:显示前5条数据样本
|
||||||
|
console.log('📋 前5条数据样本:')
|
||||||
|
rows.slice(0, 5).forEach((row, idx) => {
|
||||||
|
console.log(` ${idx + 1}. username: ${row.username}, local_type: ${row.local_type}, remark: ${row.remark || '无'}, nick_name: ${row.nick_name || '无'}`)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 调试:统计local_type分布
|
||||||
|
const localTypeStats = new Map<number, number>()
|
||||||
|
rows.forEach(row => {
|
||||||
|
const lt = row.local_type || 0
|
||||||
|
localTypeStats.set(lt, (localTypeStats.get(lt) || 0) + 1)
|
||||||
|
})
|
||||||
|
console.log('📊 local_type分布:', Object.fromEntries(localTypeStats))
|
||||||
|
|
||||||
|
// 获取会话表的最后联系时间用于排序
|
||||||
|
const lastContactTimeMap = new Map<string, number>()
|
||||||
|
const sessionResult = await wcdbService.getSessions()
|
||||||
|
if (sessionResult.success && sessionResult.sessions) {
|
||||||
|
for (const session of sessionResult.sessions as any[]) {
|
||||||
|
const username = session.username || session.user_name || session.userName || ''
|
||||||
|
const timestamp = session.sort_timestamp || session.sortTimestamp || 0
|
||||||
|
if (username && timestamp) {
|
||||||
|
lastContactTimeMap.set(username, timestamp)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 转换为ContactInfo
|
||||||
|
const contacts: (ContactInfo & { lastContactTime: number })[] = []
|
||||||
|
|
||||||
|
for (const row of rows) {
|
||||||
|
const username = row.username || ''
|
||||||
|
|
||||||
|
// 过滤系统账号和特殊账号 - 完全复制cipher的逻辑
|
||||||
|
if (!username) continue
|
||||||
|
if (username === 'filehelper' || username === 'fmessage' || username === 'floatbottle' ||
|
||||||
|
username === 'medianote' || username === 'newsapp' || username.startsWith('fake_') ||
|
||||||
|
username === 'weixin' || username === 'qmessage' || username === 'qqmail' ||
|
||||||
|
username === 'tmessage' || username.startsWith('wxid_') === false &&
|
||||||
|
username.includes('@') === false && username.startsWith('gh_') === false &&
|
||||||
|
/^[a-zA-Z0-9_-]+$/.test(username) === false) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断类型 - 正确规则:wxid开头且有alias的是好友
|
||||||
|
let type: 'friend' | 'group' | 'official' | 'other' = 'other'
|
||||||
|
const localType = row.local_type || 0
|
||||||
|
|
||||||
|
if (username.includes('@chatroom')) {
|
||||||
|
type = 'group'
|
||||||
|
} else if (username.startsWith('gh_')) {
|
||||||
|
type = 'official'
|
||||||
|
} else if (localType === 3 || localType === 4) {
|
||||||
|
type = 'official'
|
||||||
|
} else if (username.startsWith('wxid_') && row.alias) {
|
||||||
|
// wxid开头且有alias的是好友
|
||||||
|
type = 'friend'
|
||||||
|
} else if (localType === 1) {
|
||||||
|
// local_type=1 也是好友
|
||||||
|
type = 'friend'
|
||||||
|
} else if (localType === 2) {
|
||||||
|
// local_type=2 是群成员但非好友,跳过
|
||||||
|
continue
|
||||||
|
} else if (localType === 0) {
|
||||||
|
// local_type=0 可能是好友或其他,检查是否有备注或昵称
|
||||||
|
if (row.remark || row.nick_name) {
|
||||||
|
type = 'friend'
|
||||||
|
} else {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 其他未知类型,跳过
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
const displayName = row.remark || row.nick_name || row.alias || username
|
||||||
|
|
||||||
|
contacts.push({
|
||||||
|
username,
|
||||||
|
displayName,
|
||||||
|
remark: row.remark || undefined,
|
||||||
|
nickname: row.nick_name || undefined,
|
||||||
|
avatarUrl: undefined,
|
||||||
|
type,
|
||||||
|
lastContactTime: lastContactTimeMap.get(username) || 0
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('过滤后得到', contacts.length, '个有效联系人')
|
||||||
|
console.log('📊 按类型统计:', {
|
||||||
|
friends: contacts.filter(c => c.type === 'friend').length,
|
||||||
|
groups: contacts.filter(c => c.type === 'group').length,
|
||||||
|
officials: contacts.filter(c => c.type === 'official').length,
|
||||||
|
other: contacts.filter(c => c.type === 'other').length
|
||||||
|
})
|
||||||
|
|
||||||
|
// 按最近联系时间排序
|
||||||
|
contacts.sort((a, b) => {
|
||||||
|
const timeA = a.lastContactTime || 0
|
||||||
|
const timeB = b.lastContactTime || 0
|
||||||
|
if (timeA && timeB) {
|
||||||
|
return timeB - timeA
|
||||||
|
}
|
||||||
|
if (timeA && !timeB) return -1
|
||||||
|
if (!timeA && timeB) return 1
|
||||||
|
return a.displayName.localeCompare(b.displayName, 'zh-CN')
|
||||||
|
})
|
||||||
|
|
||||||
|
// 移除临时的lastContactTime字段
|
||||||
|
const result = contacts.map(({ lastContactTime, ...rest }) => rest)
|
||||||
|
|
||||||
|
console.log('返回', result.length, '个联系人')
|
||||||
|
return { success: true, contacts: result }
|
||||||
|
} catch (e) {
|
||||||
|
console.error('ChatService: 获取通讯录失败:', e)
|
||||||
|
return { success: false, error: String(e) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取消息列表(支持跨多个数据库合并,已优化)
|
* 获取消息列表(支持跨多个数据库合并,已优化)
|
||||||
*/
|
*/
|
||||||
@@ -867,6 +1046,26 @@ class ChatService {
|
|||||||
let encrypVer: number | undefined
|
let encrypVer: number | undefined
|
||||||
let cdnThumbUrl: string | undefined
|
let cdnThumbUrl: string | undefined
|
||||||
let voiceDurationSeconds: number | undefined
|
let voiceDurationSeconds: number | undefined
|
||||||
|
// Type 49 细分字段
|
||||||
|
let linkTitle: string | undefined
|
||||||
|
let linkUrl: string | undefined
|
||||||
|
let linkThumb: string | undefined
|
||||||
|
let fileName: string | undefined
|
||||||
|
let fileSize: number | undefined
|
||||||
|
let fileExt: string | undefined
|
||||||
|
let xmlType: string | undefined
|
||||||
|
// 名片消息
|
||||||
|
let cardUsername: string | undefined
|
||||||
|
let cardNickname: string | undefined
|
||||||
|
// 聊天记录
|
||||||
|
let chatRecordTitle: string | undefined
|
||||||
|
let chatRecordList: Array<{
|
||||||
|
datatype: number
|
||||||
|
sourcename: string
|
||||||
|
sourcetime: string
|
||||||
|
datadesc: string
|
||||||
|
datatitle?: string
|
||||||
|
}> | undefined
|
||||||
|
|
||||||
if (localType === 47 && content) {
|
if (localType === 47 && content) {
|
||||||
const emojiInfo = this.parseEmojiInfo(content)
|
const emojiInfo = this.parseEmojiInfo(content)
|
||||||
@@ -884,6 +1083,23 @@ class ChatService {
|
|||||||
videoMd5 = this.parseVideoMd5(content)
|
videoMd5 = this.parseVideoMd5(content)
|
||||||
} else if (localType === 34 && content) {
|
} else if (localType === 34 && content) {
|
||||||
voiceDurationSeconds = this.parseVoiceDurationSeconds(content)
|
voiceDurationSeconds = this.parseVoiceDurationSeconds(content)
|
||||||
|
} else if (localType === 42 && content) {
|
||||||
|
// 名片消息
|
||||||
|
const cardInfo = this.parseCardInfo(content)
|
||||||
|
cardUsername = cardInfo.username
|
||||||
|
cardNickname = cardInfo.nickname
|
||||||
|
} else if (localType === 49 && content) {
|
||||||
|
// Type 49 消息(链接、文件、小程序、转账等)
|
||||||
|
const type49Info = this.parseType49Message(content)
|
||||||
|
xmlType = type49Info.xmlType
|
||||||
|
linkTitle = type49Info.linkTitle
|
||||||
|
linkUrl = type49Info.linkUrl
|
||||||
|
linkThumb = type49Info.linkThumb
|
||||||
|
fileName = type49Info.fileName
|
||||||
|
fileSize = type49Info.fileSize
|
||||||
|
fileExt = type49Info.fileExt
|
||||||
|
chatRecordTitle = type49Info.chatRecordTitle
|
||||||
|
chatRecordList = type49Info.chatRecordList
|
||||||
} else if (localType === 244813135921 || (content && content.includes('<type>57</type>'))) {
|
} else if (localType === 244813135921 || (content && content.includes('<type>57</type>'))) {
|
||||||
const quoteInfo = this.parseQuoteMessage(content)
|
const quoteInfo = this.parseQuoteMessage(content)
|
||||||
quotedContent = quoteInfo.content
|
quotedContent = quoteInfo.content
|
||||||
@@ -910,7 +1126,18 @@ class ChatService {
|
|||||||
voiceDurationSeconds,
|
voiceDurationSeconds,
|
||||||
aesKey,
|
aesKey,
|
||||||
encrypVer,
|
encrypVer,
|
||||||
cdnThumbUrl
|
cdnThumbUrl,
|
||||||
|
linkTitle,
|
||||||
|
linkUrl,
|
||||||
|
linkThumb,
|
||||||
|
fileName,
|
||||||
|
fileSize,
|
||||||
|
fileExt,
|
||||||
|
xmlType,
|
||||||
|
cardUsername,
|
||||||
|
cardNickname,
|
||||||
|
chatRecordTitle,
|
||||||
|
chatRecordList
|
||||||
})
|
})
|
||||||
const last = messages[messages.length - 1]
|
const last = messages[messages.length - 1]
|
||||||
if ((last.localType === 3 || last.localType === 34) && (last.localId === 0 || last.createTime === 0)) {
|
if ((last.localType === 3 || last.localType === 34) && (last.localId === 0 || last.createTime === 0)) {
|
||||||
@@ -970,7 +1197,7 @@ class ChatService {
|
|||||||
const title = this.extractXmlValue(content, 'title')
|
const title = this.extractXmlValue(content, 'title')
|
||||||
return title || '[引用消息]'
|
return title || '[引用消息]'
|
||||||
case 266287972401:
|
case 266287972401:
|
||||||
return '[拍一拍]'
|
return this.cleanPatMessage(content)
|
||||||
case 81604378673:
|
case 81604378673:
|
||||||
return '[聊天记录]'
|
return '[聊天记录]'
|
||||||
case 8594229559345:
|
case 8594229559345:
|
||||||
@@ -1008,18 +1235,36 @@ class ChatService {
|
|||||||
return `[链接] ${title}`
|
return `[链接] ${title}`
|
||||||
case '6':
|
case '6':
|
||||||
return `[文件] ${title}`
|
return `[文件] ${title}`
|
||||||
|
case '19':
|
||||||
|
return `[聊天记录] ${title}`
|
||||||
case '33':
|
case '33':
|
||||||
case '36':
|
case '36':
|
||||||
return `[小程序] ${title}`
|
return `[小程序] ${title}`
|
||||||
case '57':
|
case '57':
|
||||||
// 引用消息,title 就是回复的内容
|
// 引用消息,title 就是回复的内容
|
||||||
return title
|
return title
|
||||||
|
case '2000':
|
||||||
|
return `[转账] ${title}`
|
||||||
default:
|
default:
|
||||||
return title
|
return title
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 如果没有 title,根据 type 返回默认标签
|
||||||
|
switch (type) {
|
||||||
|
case '6':
|
||||||
|
return '[文件]'
|
||||||
|
case '19':
|
||||||
|
return '[聊天记录]'
|
||||||
|
case '33':
|
||||||
|
case '36':
|
||||||
|
return '[小程序]'
|
||||||
|
case '2000':
|
||||||
|
return '[转账]'
|
||||||
|
default:
|
||||||
return '[消息]'
|
return '[消息]'
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 解析表情包信息
|
* 解析表情包信息
|
||||||
@@ -1302,6 +1547,185 @@ class ChatService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析名片消息
|
||||||
|
* 格式: <msg username="wxid_xxx" nickname="昵称" ... />
|
||||||
|
*/
|
||||||
|
private parseCardInfo(content: string): { username?: string; nickname?: string } {
|
||||||
|
try {
|
||||||
|
if (!content) return {}
|
||||||
|
|
||||||
|
// 提取 username
|
||||||
|
const username = this.extractXmlAttribute(content, 'msg', 'username') || undefined
|
||||||
|
|
||||||
|
// 提取 nickname
|
||||||
|
const nickname = this.extractXmlAttribute(content, 'msg', 'nickname') || undefined
|
||||||
|
|
||||||
|
return { username, nickname }
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[ChatService] 名片解析失败:', e)
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析 Type 49 消息(链接、文件、小程序、转账等)
|
||||||
|
* 根据 <appmsg><type>X</type> 区分不同类型
|
||||||
|
*/
|
||||||
|
private parseType49Message(content: string): {
|
||||||
|
xmlType?: string
|
||||||
|
linkTitle?: string
|
||||||
|
linkUrl?: string
|
||||||
|
linkThumb?: string
|
||||||
|
fileName?: string
|
||||||
|
fileSize?: number
|
||||||
|
fileExt?: string
|
||||||
|
chatRecordTitle?: string
|
||||||
|
chatRecordList?: Array<{
|
||||||
|
datatype: number
|
||||||
|
sourcename: string
|
||||||
|
sourcetime: string
|
||||||
|
datadesc: string
|
||||||
|
datatitle?: string
|
||||||
|
}>
|
||||||
|
} {
|
||||||
|
try {
|
||||||
|
if (!content) return {}
|
||||||
|
|
||||||
|
// 提取 appmsg 中的 type
|
||||||
|
const xmlType = this.extractXmlValue(content, 'type')
|
||||||
|
if (!xmlType) return {}
|
||||||
|
|
||||||
|
const result: any = { xmlType }
|
||||||
|
|
||||||
|
// 提取通用字段
|
||||||
|
const title = this.extractXmlValue(content, 'title')
|
||||||
|
const url = this.extractXmlValue(content, 'url')
|
||||||
|
|
||||||
|
switch (xmlType) {
|
||||||
|
case '6': {
|
||||||
|
// 文件消息
|
||||||
|
result.fileName = title || this.extractXmlValue(content, 'filename')
|
||||||
|
result.linkTitle = result.fileName
|
||||||
|
|
||||||
|
// 提取文件大小
|
||||||
|
const fileSizeStr = this.extractXmlValue(content, 'totallen') ||
|
||||||
|
this.extractXmlValue(content, 'filesize')
|
||||||
|
if (fileSizeStr) {
|
||||||
|
const size = parseInt(fileSizeStr, 10)
|
||||||
|
if (!isNaN(size)) {
|
||||||
|
result.fileSize = size
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提取文件扩展名
|
||||||
|
const fileExt = this.extractXmlValue(content, 'fileext')
|
||||||
|
if (fileExt) {
|
||||||
|
result.fileExt = fileExt
|
||||||
|
} else if (result.fileName) {
|
||||||
|
// 从文件名提取扩展名
|
||||||
|
const match = /\.([^.]+)$/.exec(result.fileName)
|
||||||
|
if (match) {
|
||||||
|
result.fileExt = match[1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
case '19': {
|
||||||
|
// 聊天记录
|
||||||
|
result.chatRecordTitle = title || '聊天记录'
|
||||||
|
|
||||||
|
// 解析聊天记录列表
|
||||||
|
const recordList: Array<{
|
||||||
|
datatype: number
|
||||||
|
sourcename: string
|
||||||
|
sourcetime: string
|
||||||
|
datadesc: string
|
||||||
|
datatitle?: string
|
||||||
|
}> = []
|
||||||
|
|
||||||
|
// 查找所有 <recorditem> 标签
|
||||||
|
const recordItemRegex = /<recorditem>([\s\S]*?)<\/recorditem>/gi
|
||||||
|
let match: RegExpExecArray | null
|
||||||
|
|
||||||
|
while ((match = recordItemRegex.exec(content)) !== null) {
|
||||||
|
const itemXml = match[1]
|
||||||
|
|
||||||
|
const datatypeStr = this.extractXmlValue(itemXml, 'datatype')
|
||||||
|
const sourcename = this.extractXmlValue(itemXml, 'sourcename')
|
||||||
|
const sourcetime = this.extractXmlValue(itemXml, 'sourcetime')
|
||||||
|
const datadesc = this.extractXmlValue(itemXml, 'datadesc')
|
||||||
|
const datatitle = this.extractXmlValue(itemXml, 'datatitle')
|
||||||
|
|
||||||
|
if (sourcename && datadesc) {
|
||||||
|
recordList.push({
|
||||||
|
datatype: datatypeStr ? parseInt(datatypeStr, 10) : 0,
|
||||||
|
sourcename,
|
||||||
|
sourcetime: sourcetime || '',
|
||||||
|
datadesc,
|
||||||
|
datatitle: datatitle || undefined
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (recordList.length > 0) {
|
||||||
|
result.chatRecordList = recordList
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
case '33':
|
||||||
|
case '36': {
|
||||||
|
// 小程序
|
||||||
|
result.linkTitle = title
|
||||||
|
result.linkUrl = url
|
||||||
|
|
||||||
|
// 提取缩略图
|
||||||
|
const thumbUrl = this.extractXmlValue(content, 'thumburl') ||
|
||||||
|
this.extractXmlValue(content, 'cdnthumburl')
|
||||||
|
if (thumbUrl) {
|
||||||
|
result.linkThumb = thumbUrl
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
case '2000': {
|
||||||
|
// 转账
|
||||||
|
result.linkTitle = title || '[转账]'
|
||||||
|
|
||||||
|
// 可以提取转账金额等信息
|
||||||
|
const payMemo = this.extractXmlValue(content, 'pay_memo')
|
||||||
|
const feedesc = this.extractXmlValue(content, 'feedesc')
|
||||||
|
|
||||||
|
if (payMemo) {
|
||||||
|
result.linkTitle = payMemo
|
||||||
|
} else if (feedesc) {
|
||||||
|
result.linkTitle = feedesc
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
default: {
|
||||||
|
// 其他类型,提取通用字段
|
||||||
|
result.linkTitle = title
|
||||||
|
result.linkUrl = url
|
||||||
|
|
||||||
|
const thumbUrl = this.extractXmlValue(content, 'thumburl') ||
|
||||||
|
this.extractXmlValue(content, 'cdnthumburl')
|
||||||
|
if (thumbUrl) {
|
||||||
|
result.linkThumb = thumbUrl
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[ChatService] Type 49 消息解析失败:', e)
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//手动查找 media_*.db 文件(当 WCDB DLL 不支持 listMediaDbs 时的 fallback)
|
//手动查找 media_*.db 文件(当 WCDB DLL 不支持 listMediaDbs 时的 fallback)
|
||||||
private async findMediaDbsManually(): Promise<string[]> {
|
private async findMediaDbsManually(): Promise<string[]> {
|
||||||
try {
|
try {
|
||||||
@@ -1659,6 +2083,37 @@ class ChatService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 清理拍一拍消息
|
||||||
|
* 格式示例: 我拍了拍 "梨绒" ງ໐໐໓ ຖiງht620000wxid_...
|
||||||
|
*/
|
||||||
|
private cleanPatMessage(content: string): string {
|
||||||
|
if (!content) return '[拍一拍]'
|
||||||
|
|
||||||
|
// 1. 尝试匹配标准的 "A拍了拍B" 格式
|
||||||
|
// 这里的正则比较宽泛,为了兼容不同的语言环境
|
||||||
|
const match = /^(.+?拍了拍.+?)(?:[\r\n]|$|ງ|wxid_)/.exec(content)
|
||||||
|
if (match) {
|
||||||
|
return `[拍一拍] ${match[1].trim()}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 如果匹配失败,尝试清理掉疑似的 garbage (wxid, 乱码)
|
||||||
|
let cleaned = content.replace(/wxid_[a-zA-Z0-9_-]+/g, '') // 移除 wxid
|
||||||
|
cleaned = cleaned.replace(/[ງ໐໓ຖiht]+/g, ' ') // 移除已知的乱码字符
|
||||||
|
cleaned = cleaned.replace(/\d{6,}/g, '') // 移除长数字
|
||||||
|
cleaned = cleaned.replace(/\s+/g, ' ').trim() // 清理空格
|
||||||
|
|
||||||
|
// 移除不可见字符
|
||||||
|
cleaned = this.cleanUtf16(cleaned)
|
||||||
|
|
||||||
|
// 如果清理后还有内容,返回
|
||||||
|
if (cleaned && cleaned.length > 1 && !cleaned.includes('xml')) {
|
||||||
|
return `[拍一拍] ${cleaned}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return '[拍一拍]'
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 解码消息内容(处理 BLOB 和压缩数据)
|
* 解码消息内容(处理 BLOB 和压缩数据)
|
||||||
*/
|
*/
|
||||||
@@ -2323,7 +2778,7 @@ class ChatService {
|
|||||||
/**
|
/**
|
||||||
* getVoiceData (绕过WCDB的buggy getVoiceData,直接用execQuery读取)
|
* getVoiceData (绕过WCDB的buggy getVoiceData,直接用execQuery读取)
|
||||||
*/
|
*/
|
||||||
async getVoiceData(sessionId: string, msgId: string, createTime?: number, serverId?: string | number): Promise<{ success: boolean; data?: string; error?: string }> {
|
async getVoiceData(sessionId: string, msgId: string, createTime?: number, serverId?: string | number, senderWxidOpt?: string): Promise<{ success: boolean; data?: string; error?: string }> {
|
||||||
const startTime = Date.now()
|
const startTime = Date.now()
|
||||||
try {
|
try {
|
||||||
const localId = parseInt(msgId, 10)
|
const localId = parseInt(msgId, 10)
|
||||||
@@ -2332,7 +2787,7 @@ class ChatService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let msgCreateTime = createTime
|
let msgCreateTime = createTime
|
||||||
let senderWxid: string | null = null
|
let senderWxid: string | null = senderWxidOpt || null
|
||||||
|
|
||||||
// 如果前端没传 createTime,才需要查询消息(这个很慢)
|
// 如果前端没传 createTime,才需要查询消息(这个很慢)
|
||||||
if (!msgCreateTime) {
|
if (!msgCreateTime) {
|
||||||
@@ -2403,7 +2858,7 @@ class ChatService {
|
|||||||
console.log(`[Voice] getVoiceDataFromMediaDb: ${t4 - t3}ms`)
|
console.log(`[Voice] getVoiceDataFromMediaDb: ${t4 - t3}ms`)
|
||||||
|
|
||||||
if (!silkData) {
|
if (!silkData) {
|
||||||
return { success: false, error: '未找到语音数据' }
|
return { success: false, error: '未找到语音数据 (请确保已在微信中播放过该语音)' }
|
||||||
}
|
}
|
||||||
|
|
||||||
const t5 = Date.now()
|
const t5 = Date.now()
|
||||||
@@ -2471,11 +2926,20 @@ class ChatService {
|
|||||||
const t2 = Date.now()
|
const t2 = Date.now()
|
||||||
console.log(`[Voice] listMediaDbs: ${t2 - t1}ms`)
|
console.log(`[Voice] listMediaDbs: ${t2 - t1}ms`)
|
||||||
|
|
||||||
if (!mediaDbsResult.success || !mediaDbsResult.data || mediaDbsResult.data.length === 0) {
|
let files = mediaDbsResult.success && mediaDbsResult.data ? (mediaDbsResult.data as string[]) : []
|
||||||
|
|
||||||
|
// Fallback: 如果 WCDB DLL 没找到,手动查找
|
||||||
|
if (files.length === 0) {
|
||||||
|
console.warn('[Voice] listMediaDbs returned empty, trying manual search')
|
||||||
|
files = await this.findMediaDbsManually()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (files.length === 0) {
|
||||||
|
console.error('[Voice] No media DBs found')
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
mediaDbFiles = mediaDbsResult.data as string[]
|
mediaDbFiles = files
|
||||||
this.mediaDbsCache = mediaDbFiles // 永久缓存
|
this.mediaDbsCache = mediaDbFiles // 永久缓存
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2854,7 +3318,8 @@ class ChatService {
|
|||||||
sessionId: string,
|
sessionId: string,
|
||||||
msgId: string,
|
msgId: string,
|
||||||
createTime?: number,
|
createTime?: number,
|
||||||
onPartial?: (text: string) => void
|
onPartial?: (text: string) => void,
|
||||||
|
senderWxid?: string
|
||||||
): Promise<{ success: boolean; transcript?: string; error?: string }> {
|
): Promise<{ success: boolean; transcript?: string; error?: string }> {
|
||||||
const startTime = Date.now()
|
const startTime = Date.now()
|
||||||
console.log(`[Transcribe] 开始转写: sessionId=${sessionId}, msgId=${msgId}, createTime=${createTime}`)
|
console.log(`[Transcribe] 开始转写: sessionId=${sessionId}, msgId=${msgId}, createTime=${createTime}`)
|
||||||
@@ -2926,7 +3391,7 @@ class ChatService {
|
|||||||
console.log(`[Transcribe] WAV缓存未命中,调用 getVoiceData`)
|
console.log(`[Transcribe] WAV缓存未命中,调用 getVoiceData`)
|
||||||
const t3 = Date.now()
|
const t3 = Date.now()
|
||||||
// 调用 getVoiceData 获取并解码
|
// 调用 getVoiceData 获取并解码
|
||||||
const voiceResult = await this.getVoiceData(sessionId, msgId, msgCreateTime, serverId)
|
const voiceResult = await this.getVoiceData(sessionId, msgId, msgCreateTime, serverId, senderWxid)
|
||||||
const t4 = Date.now()
|
const t4 = Date.now()
|
||||||
console.log(`[Transcribe] getVoiceData: ${t4 - t3}ms, success=${voiceResult.success}`)
|
console.log(`[Transcribe] getVoiceData: ${t4 - t3}ms, success=${voiceResult.success}`)
|
||||||
|
|
||||||
@@ -3001,19 +3466,35 @@ class ChatService {
|
|||||||
|
|
||||||
async getMessageById(sessionId: string, localId: number): Promise<{ success: boolean; message?: Message; error?: string }> {
|
async getMessageById(sessionId: string, localId: number): Promise<{ success: boolean; message?: Message; error?: string }> {
|
||||||
try {
|
try {
|
||||||
// 1. 获取该会话所在的消息表
|
// 1. 尝试从缓存获取会话表信息
|
||||||
// 注意:这里使用 getMessageTableStats 而不是 getMessageTables,因为前者包含 db_path
|
let tables = this.sessionTablesCache.get(sessionId)
|
||||||
|
|
||||||
|
if (!tables) {
|
||||||
|
// 缓存未命中,查询数据库
|
||||||
const tableStats = await wcdbService.getMessageTableStats(sessionId)
|
const tableStats = await wcdbService.getMessageTableStats(sessionId)
|
||||||
if (!tableStats.success || !tableStats.tables || tableStats.tables.length === 0) {
|
if (!tableStats.success || !tableStats.tables || tableStats.tables.length === 0) {
|
||||||
return { success: false, error: '未找到会话消息表' }
|
return { success: false, error: '未找到会话消息表' }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. 遍历表查找消息 (通常只有一个主表,但可能有归档)
|
// 提取表信息并缓存
|
||||||
for (const tableInfo of tableStats.tables) {
|
tables = tableStats.tables
|
||||||
const tableName = tableInfo.table_name || tableInfo.name
|
.map(t => ({
|
||||||
const dbPath = tableInfo.db_path
|
tableName: t.table_name || t.name,
|
||||||
if (!tableName || !dbPath) continue
|
dbPath: t.db_path
|
||||||
|
}))
|
||||||
|
.filter(t => t.tableName && t.dbPath) as Array<{ tableName: string; dbPath: string }>
|
||||||
|
|
||||||
|
if (tables.length > 0) {
|
||||||
|
this.sessionTablesCache.set(sessionId, tables)
|
||||||
|
// 设置过期清理
|
||||||
|
setTimeout(() => {
|
||||||
|
this.sessionTablesCache.delete(sessionId)
|
||||||
|
}, this.sessionTablesCacheTtl)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 遍历表查找消息 (通常只有一个主表,但可能有归档)
|
||||||
|
for (const { tableName, dbPath } of tables) {
|
||||||
// 构造查询
|
// 构造查询
|
||||||
const sql = `SELECT * FROM ${tableName} WHERE local_id = ${localId} LIMIT 1`
|
const sql = `SELECT * FROM ${tableName} WHERE local_id = ${localId} LIMIT 1`
|
||||||
const result = await wcdbService.execQuery('message', dbPath, sql)
|
const result = await wcdbService.execQuery('message', dbPath, sql)
|
||||||
|
|||||||
@@ -26,6 +26,12 @@ interface ConfigSchema {
|
|||||||
whisperDownloadSource: string
|
whisperDownloadSource: string
|
||||||
autoTranscribeVoice: boolean
|
autoTranscribeVoice: boolean
|
||||||
transcribeLanguages: string[]
|
transcribeLanguages: string[]
|
||||||
|
exportDefaultConcurrency: number
|
||||||
|
|
||||||
|
// 安全相关
|
||||||
|
authEnabled: boolean
|
||||||
|
authPassword: string // SHA-256 hash
|
||||||
|
authUseHello: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export class ConfigService {
|
export class ConfigService {
|
||||||
@@ -54,7 +60,12 @@ export class ConfigService {
|
|||||||
whisperModelDir: '',
|
whisperModelDir: '',
|
||||||
whisperDownloadSource: 'tsinghua',
|
whisperDownloadSource: 'tsinghua',
|
||||||
autoTranscribeVoice: false,
|
autoTranscribeVoice: false,
|
||||||
transcribeLanguages: ['zh']
|
transcribeLanguages: ['zh'],
|
||||||
|
exportDefaultConcurrency: 2,
|
||||||
|
|
||||||
|
authEnabled: false,
|
||||||
|
authPassword: '',
|
||||||
|
authUseHello: false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
159
electron/services/contactExportService.ts
Normal file
159
electron/services/contactExportService.ts
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
import * as fs from 'fs'
|
||||||
|
import * as path from 'path'
|
||||||
|
import { chatService } from './chatService'
|
||||||
|
|
||||||
|
interface ContactExportOptions {
|
||||||
|
format: 'json' | 'csv' | 'vcf'
|
||||||
|
exportAvatars: boolean
|
||||||
|
contactTypes: {
|
||||||
|
friends: boolean
|
||||||
|
groups: boolean
|
||||||
|
officials: boolean
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 联系人导出服务
|
||||||
|
*/
|
||||||
|
class ContactExportService {
|
||||||
|
/**
|
||||||
|
* 导出联系人
|
||||||
|
*/
|
||||||
|
async exportContacts(
|
||||||
|
outputDir: string,
|
||||||
|
options: ContactExportOptions
|
||||||
|
): Promise<{ success: boolean; successCount?: number; error?: string }> {
|
||||||
|
try {
|
||||||
|
// 获取所有联系人
|
||||||
|
const contactsResult = await chatService.getContacts()
|
||||||
|
if (!contactsResult.success || !contactsResult.contacts) {
|
||||||
|
return { success: false, error: contactsResult.error || '获取联系人失败' }
|
||||||
|
}
|
||||||
|
|
||||||
|
let contacts = contactsResult.contacts
|
||||||
|
|
||||||
|
// 根据类型过滤
|
||||||
|
contacts = contacts.filter(c => {
|
||||||
|
if (c.type === 'friend' && !options.contactTypes.friends) return false
|
||||||
|
if (c.type === 'group' && !options.contactTypes.groups) return false
|
||||||
|
if (c.type === 'official' && !options.contactTypes.officials) return false
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
|
if (contacts.length === 0) {
|
||||||
|
return { success: false, error: '没有符合条件的联系人' }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保输出目录存在
|
||||||
|
if (!fs.existsSync(outputDir)) {
|
||||||
|
fs.mkdirSync(outputDir, { recursive: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5)
|
||||||
|
let outputPath: string
|
||||||
|
|
||||||
|
switch (options.format) {
|
||||||
|
case 'json':
|
||||||
|
outputPath = path.join(outputDir, `contacts_${timestamp}.json`)
|
||||||
|
await this.exportToJSON(contacts, outputPath)
|
||||||
|
break
|
||||||
|
case 'csv':
|
||||||
|
outputPath = path.join(outputDir, `contacts_${timestamp}.csv`)
|
||||||
|
await this.exportToCSV(contacts, outputPath)
|
||||||
|
break
|
||||||
|
case 'vcf':
|
||||||
|
outputPath = path.join(outputDir, `contacts_${timestamp}.vcf`)
|
||||||
|
await this.exportToVCF(contacts, outputPath)
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
return { success: false, error: '不支持的导出格式' }
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: true, successCount: contacts.length }
|
||||||
|
} catch (e) {
|
||||||
|
return { success: false, error: String(e) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导出为JSON格式
|
||||||
|
*/
|
||||||
|
private async exportToJSON(contacts: any[], outputPath: string): Promise<void> {
|
||||||
|
const data = {
|
||||||
|
exportedAt: new Date().toISOString(),
|
||||||
|
count: contacts.length,
|
||||||
|
contacts: contacts.map(c => ({
|
||||||
|
username: c.username,
|
||||||
|
displayName: c.displayName,
|
||||||
|
remark: c.remark,
|
||||||
|
nickname: c.nickname,
|
||||||
|
type: c.type
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
fs.writeFileSync(outputPath, JSON.stringify(data, null, 2), 'utf-8')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导出为CSV格式
|
||||||
|
*/
|
||||||
|
private async exportToCSV(contacts: any[], outputPath: string): Promise<void> {
|
||||||
|
const headers = ['用户名', '显示名称', '备注', '昵称', '类型']
|
||||||
|
const rows = contacts.map(c => [
|
||||||
|
c.username || '',
|
||||||
|
c.displayName || '',
|
||||||
|
c.remark || '',
|
||||||
|
c.nickname || '',
|
||||||
|
this.getTypeLabel(c.type)
|
||||||
|
])
|
||||||
|
|
||||||
|
const csvContent = [
|
||||||
|
headers.join(','),
|
||||||
|
...rows.map(row => row.map(cell => `"${cell}"`).join(','))
|
||||||
|
].join('\n')
|
||||||
|
|
||||||
|
fs.writeFileSync(outputPath, '\uFEFF' + csvContent, 'utf-8') // 添加BOM以支持Excel
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导出为VCF格式(vCard)
|
||||||
|
*/
|
||||||
|
private async exportToVCF(contacts: any[], outputPath: string): Promise<void> {
|
||||||
|
const vcards = contacts
|
||||||
|
.filter(c => c.type === 'friend') // VCF通常只用于个人联系人
|
||||||
|
.map(c => {
|
||||||
|
const lines = ['BEGIN:VCARD', 'VERSION:3.0']
|
||||||
|
|
||||||
|
// 全名
|
||||||
|
lines.push(`FN:${c.displayName || c.username}`)
|
||||||
|
|
||||||
|
// 昵称
|
||||||
|
if (c.nickname) {
|
||||||
|
lines.push(`NICKNAME:${c.nickname}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 备注
|
||||||
|
if (c.remark) {
|
||||||
|
lines.push(`NOTE:${c.remark}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 微信ID
|
||||||
|
lines.push(`X-WECHAT-ID:${c.username}`)
|
||||||
|
|
||||||
|
lines.push('END:VCARD')
|
||||||
|
return lines.join('\r\n')
|
||||||
|
})
|
||||||
|
|
||||||
|
fs.writeFileSync(outputPath, vcards.join('\r\n\r\n'), 'utf-8')
|
||||||
|
}
|
||||||
|
|
||||||
|
private getTypeLabel(type: string): string {
|
||||||
|
switch (type) {
|
||||||
|
case 'friend': return '好友'
|
||||||
|
case 'group': return '群聊'
|
||||||
|
case 'official': return '公众号'
|
||||||
|
default: return '其他'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const contactExportService = new ContactExportService()
|
||||||
@@ -18,8 +18,7 @@ export class DbPathService {
|
|||||||
|
|
||||||
// 微信4.x 数据目录
|
// 微信4.x 数据目录
|
||||||
possiblePaths.push(join(home, 'Documents', 'xwechat_files'))
|
possiblePaths.push(join(home, 'Documents', 'xwechat_files'))
|
||||||
// 旧版微信数据目录
|
|
||||||
possiblePaths.push(join(home, 'Documents', 'WeChat Files'))
|
|
||||||
|
|
||||||
for (const path of possiblePaths) {
|
for (const path of possiblePaths) {
|
||||||
if (existsSync(path)) {
|
if (existsSync(path)) {
|
||||||
@@ -69,7 +68,7 @@ export class DbPathService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch {}
|
} catch { }
|
||||||
|
|
||||||
return accounts
|
return accounts
|
||||||
}
|
}
|
||||||
@@ -139,7 +138,7 @@ export class DbPathService {
|
|||||||
const modifiedTime = this.getAccountModifiedTime(fullPath)
|
const modifiedTime = this.getAccountModifiedTime(fullPath)
|
||||||
wxids.push({ wxid: account, modifiedTime })
|
wxids.push({ wxid: account, modifiedTime })
|
||||||
}
|
}
|
||||||
} catch {}
|
} catch { }
|
||||||
|
|
||||||
return wxids.sort((a, b) => {
|
return wxids.sort((a, b) => {
|
||||||
if (b.modifiedTime !== a.modifiedTime) return b.modifiedTime - a.modifiedTime
|
if (b.modifiedTime !== a.modifiedTime) return b.modifiedTime - a.modifiedTime
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ import { wcdbService } from './wcdbService'
|
|||||||
import { imageDecryptService } from './imageDecryptService'
|
import { imageDecryptService } from './imageDecryptService'
|
||||||
import { chatService } from './chatService'
|
import { chatService } from './chatService'
|
||||||
import { videoService } from './videoService'
|
import { videoService } from './videoService'
|
||||||
|
import { voiceTranscribeService } from './voiceTranscribeService'
|
||||||
import { EXPORT_HTML_STYLES } from './exportHtmlStyles'
|
import { EXPORT_HTML_STYLES } from './exportHtmlStyles'
|
||||||
|
|
||||||
// ChatLab 格式类型定义
|
// ChatLab 格式类型定义
|
||||||
@@ -78,6 +79,7 @@ export interface ExportOptions {
|
|||||||
txtColumns?: string[]
|
txtColumns?: string[]
|
||||||
sessionLayout?: 'shared' | 'per-session'
|
sessionLayout?: 'shared' | 'per-session'
|
||||||
displayNamePreference?: 'group-nickname' | 'remark' | 'nickname'
|
displayNamePreference?: 'group-nickname' | 'remark' | 'nickname'
|
||||||
|
exportConcurrency?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
const TXT_COLUMN_DEFINITIONS: Array<{ id: string; label: string }> = [
|
const TXT_COLUMN_DEFINITIONS: Array<{ id: string; label: string }> = [
|
||||||
@@ -290,7 +292,7 @@ class ExportService {
|
|||||||
extBuffer = Buffer.from(extBuffer, 'base64')
|
extBuffer = Buffer.from(extBuffer, 'base64')
|
||||||
} else {
|
} else {
|
||||||
// 默认尝试hex
|
// 默认尝试hex
|
||||||
console.log('⚠️ 无法判断编码格式,默认尝试hex')
|
console.log(' 无法判断编码格式,默认尝试hex')
|
||||||
try {
|
try {
|
||||||
extBuffer = Buffer.from(extBuffer, 'hex')
|
extBuffer = Buffer.from(extBuffer, 'hex')
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -1032,15 +1034,15 @@ class ExportService {
|
|||||||
/**
|
/**
|
||||||
* 转写语音为文字
|
* 转写语音为文字
|
||||||
*/
|
*/
|
||||||
private async transcribeVoice(sessionId: string, msgId: string): Promise<string> {
|
private async transcribeVoice(sessionId: string, msgId: string, createTime: number, senderWxid: string | null): Promise<string> {
|
||||||
try {
|
try {
|
||||||
const transcript = await chatService.getVoiceTranscript(sessionId, msgId)
|
const transcript = await chatService.getVoiceTranscript(sessionId, msgId, createTime, undefined, senderWxid || undefined)
|
||||||
if (transcript.success && transcript.transcript) {
|
if (transcript.success && transcript.transcript) {
|
||||||
return `[语音转文字] ${transcript.transcript}`
|
return `[语音转文字] ${transcript.transcript}`
|
||||||
}
|
}
|
||||||
return '[语音消息 - 转文字失败]'
|
return `[语音消息 - 转文字失败: ${transcript.error || '未知错误'}]`
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
return '[语音消息 - 转文字失败]'
|
return `[语音消息 - 转文字失败: ${String(e)}]`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1288,6 +1290,7 @@ class ExportService {
|
|||||||
): Promise<{ rows: any[]; memberSet: Map<string, { member: ChatLabMember; avatarUrl?: string }>; firstTime: number | null; lastTime: number | null }> {
|
): Promise<{ rows: any[]; memberSet: Map<string, { member: ChatLabMember; avatarUrl?: string }>; firstTime: number | null; lastTime: number | null }> {
|
||||||
const rows: any[] = []
|
const rows: any[] = []
|
||||||
const memberSet = new Map<string, { member: ChatLabMember; avatarUrl?: string }>()
|
const memberSet = new Map<string, { member: ChatLabMember; avatarUrl?: string }>()
|
||||||
|
const senderSet = new Set<string>()
|
||||||
let firstTime: number | null = null
|
let firstTime: number | null = null
|
||||||
let lastTime: number | null = null
|
let lastTime: number | null = null
|
||||||
|
|
||||||
@@ -1321,16 +1324,7 @@ class ExportService {
|
|||||||
const localId = parseInt(row.local_id || row.localId || '0', 10)
|
const localId = parseInt(row.local_id || row.localId || '0', 10)
|
||||||
|
|
||||||
const actualSender = isSend ? cleanedMyWxid : (senderUsername || sessionId)
|
const actualSender = isSend ? cleanedMyWxid : (senderUsername || sessionId)
|
||||||
const memberInfo = await this.getContactInfo(actualSender)
|
senderSet.add(actualSender)
|
||||||
if (!memberSet.has(actualSender)) {
|
|
||||||
memberSet.set(actualSender, {
|
|
||||||
member: {
|
|
||||||
platformId: actualSender,
|
|
||||||
accountName: memberInfo.displayName
|
|
||||||
},
|
|
||||||
avatarUrl: memberInfo.avatarUrl
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 提取媒体相关字段
|
// 提取媒体相关字段
|
||||||
let imageMd5: string | undefined
|
let imageMd5: string | undefined
|
||||||
@@ -1375,6 +1369,30 @@ class ExportService {
|
|||||||
await wcdbService.closeMessageCursor(cursor.cursor)
|
await wcdbService.closeMessageCursor(cursor.cursor)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (senderSet.size > 0) {
|
||||||
|
const usernames = Array.from(senderSet)
|
||||||
|
const [nameResult, avatarResult] = await Promise.all([
|
||||||
|
wcdbService.getDisplayNames(usernames),
|
||||||
|
wcdbService.getAvatarUrls(usernames)
|
||||||
|
])
|
||||||
|
|
||||||
|
const nameMap = nameResult.success && nameResult.map ? nameResult.map : {}
|
||||||
|
const avatarMap = avatarResult.success && avatarResult.map ? avatarResult.map : {}
|
||||||
|
|
||||||
|
for (const username of usernames) {
|
||||||
|
const displayName = nameMap[username] || username
|
||||||
|
const avatarUrl = avatarMap[username]
|
||||||
|
memberSet.set(username, {
|
||||||
|
member: {
|
||||||
|
platformId: username,
|
||||||
|
accountName: displayName
|
||||||
|
},
|
||||||
|
avatarUrl
|
||||||
|
})
|
||||||
|
this.contactCache.set(username, { displayName, avatarUrl })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return { rows, memberSet, firstTime, lastTime }
|
return { rows, memberSet, firstTime, lastTime }
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1605,6 +1623,14 @@ class ExportService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private getWeflowHeader(): { version: string; exportedAt: number; generator: string } {
|
||||||
|
return {
|
||||||
|
version: '1.0.3',
|
||||||
|
exportedAt: Math.floor(Date.now() / 1000),
|
||||||
|
generator: 'WeFlow'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 生成通用的导出元数据 (参考 ChatLab 格式)
|
* 生成通用的导出元数据 (参考 ChatLab 格式)
|
||||||
*/
|
*/
|
||||||
@@ -1655,8 +1681,18 @@ class ExportService {
|
|||||||
phase: 'preparing'
|
phase: 'preparing'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (options.exportVoiceAsText) {
|
||||||
|
await this.ensureVoiceModel(onProgress)
|
||||||
|
}
|
||||||
|
|
||||||
const collected = await this.collectMessages(sessionId, cleanedMyWxid, options.dateRange)
|
const collected = await this.collectMessages(sessionId, cleanedMyWxid, options.dateRange)
|
||||||
const allMessages = collected.rows
|
const allMessages = collected.rows
|
||||||
|
|
||||||
|
// 如果没有消息,不创建文件
|
||||||
|
if (allMessages.length === 0) {
|
||||||
|
return { success: false, error: '该会话在指定时间范围内没有消息' }
|
||||||
|
}
|
||||||
|
|
||||||
if (isGroup) {
|
if (isGroup) {
|
||||||
await this.mergeGroupMembers(sessionId, collected.memberSet, options.exportAvatars === true)
|
await this.mergeGroupMembers(sessionId, collected.memberSet, options.exportAvatars === true)
|
||||||
}
|
}
|
||||||
@@ -1719,7 +1755,7 @@ class ExportService {
|
|||||||
// 并行转写语音,限制 4 个并发(转写比较耗资源)
|
// 并行转写语音,限制 4 个并发(转写比较耗资源)
|
||||||
const VOICE_CONCURRENCY = 4
|
const VOICE_CONCURRENCY = 4
|
||||||
await parallelLimit(voiceMessages, VOICE_CONCURRENCY, async (msg) => {
|
await parallelLimit(voiceMessages, VOICE_CONCURRENCY, async (msg) => {
|
||||||
const transcript = await this.transcribeVoice(sessionId, String(msg.localId))
|
const transcript = await this.transcribeVoice(sessionId, String(msg.localId), msg.createTime, msg.senderUsername)
|
||||||
voiceTranscriptMap.set(msg.localId, transcript)
|
voiceTranscriptMap.set(msg.localId, transcript)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -1842,6 +1878,16 @@ class ExportService {
|
|||||||
const sessionInfo = await this.getContactInfo(sessionId)
|
const sessionInfo = await this.getContactInfo(sessionId)
|
||||||
const myInfo = await this.getContactInfo(cleanedMyWxid)
|
const myInfo = await this.getContactInfo(cleanedMyWxid)
|
||||||
|
|
||||||
|
const contactCache = new Map<string, { success: boolean; contact?: any; error?: string }>()
|
||||||
|
const getContactCached = async (username: string) => {
|
||||||
|
if (contactCache.has(username)) {
|
||||||
|
return contactCache.get(username)!
|
||||||
|
}
|
||||||
|
const result = await wcdbService.getContact(username)
|
||||||
|
contactCache.set(username, result)
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
onProgress?.({
|
onProgress?.({
|
||||||
current: 0,
|
current: 0,
|
||||||
total: 100,
|
total: 100,
|
||||||
@@ -1849,7 +1895,17 @@ class ExportService {
|
|||||||
phase: 'preparing'
|
phase: 'preparing'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (options.exportVoiceAsText) {
|
||||||
|
await this.ensureVoiceModel(onProgress)
|
||||||
|
}
|
||||||
|
|
||||||
const collected = await this.collectMessages(sessionId, cleanedMyWxid, options.dateRange)
|
const collected = await this.collectMessages(sessionId, cleanedMyWxid, options.dateRange)
|
||||||
|
|
||||||
|
// 如果没有消息,不创建文件
|
||||||
|
if (collected.rows.length === 0) {
|
||||||
|
return { success: false, error: '该会话在指定时间范围内没有消息' }
|
||||||
|
}
|
||||||
|
|
||||||
const { exportMediaEnabled, mediaRootDir, mediaRelativePrefix } = this.getMediaLayout(outputPath, options)
|
const { exportMediaEnabled, mediaRootDir, mediaRelativePrefix } = this.getMediaLayout(outputPath, options)
|
||||||
|
|
||||||
// ========== 阶段1:并行导出媒体文件 ==========
|
// ========== 阶段1:并行导出媒体文件 ==========
|
||||||
@@ -1904,7 +1960,7 @@ class ExportService {
|
|||||||
|
|
||||||
const VOICE_CONCURRENCY = 4
|
const VOICE_CONCURRENCY = 4
|
||||||
await parallelLimit(voiceMessages, VOICE_CONCURRENCY, async (msg) => {
|
await parallelLimit(voiceMessages, VOICE_CONCURRENCY, async (msg) => {
|
||||||
const transcript = await this.transcribeVoice(sessionId, String(msg.localId))
|
const transcript = await this.transcribeVoice(sessionId, String(msg.localId), msg.createTime, msg.senderUsername)
|
||||||
voiceTranscriptMap.set(msg.localId, transcript)
|
voiceTranscriptMap.set(msg.localId, transcript)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -1942,7 +1998,7 @@ class ExportService {
|
|||||||
|
|
||||||
// 获取发送者信息用于名称显示
|
// 获取发送者信息用于名称显示
|
||||||
const senderWxid = msg.senderUsername
|
const senderWxid = msg.senderUsername
|
||||||
const contact = await wcdbService.getContact(senderWxid)
|
const contact = await getContactCached(senderWxid)
|
||||||
const senderNickname = contact.success && contact.contact?.nickName
|
const senderNickname = contact.success && contact.contact?.nickName
|
||||||
? contact.contact.nickName
|
? contact.contact.nickName
|
||||||
: (senderInfo.displayName || senderWxid)
|
: (senderInfo.displayName || senderWxid)
|
||||||
@@ -1985,7 +2041,7 @@ class ExportService {
|
|||||||
const { chatlab, meta } = this.getExportMeta(sessionId, sessionInfo, isGroup)
|
const { chatlab, meta } = this.getExportMeta(sessionId, sessionInfo, isGroup)
|
||||||
|
|
||||||
// 获取会话的昵称和备注信息
|
// 获取会话的昵称和备注信息
|
||||||
const sessionContact = await wcdbService.getContact(sessionId)
|
const sessionContact = await getContactCached(sessionId)
|
||||||
const sessionNickname = sessionContact.success && sessionContact.contact?.nickName
|
const sessionNickname = sessionContact.success && sessionContact.contact?.nickName
|
||||||
? sessionContact.contact.nickName
|
? sessionContact.contact.nickName
|
||||||
: sessionInfo.displayName
|
: sessionInfo.displayName
|
||||||
@@ -2005,7 +2061,9 @@ class ExportService {
|
|||||||
options.displayNamePreference || 'remark'
|
options.displayNamePreference || 'remark'
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const weflow = this.getWeflowHeader()
|
||||||
const detailedExport: any = {
|
const detailedExport: any = {
|
||||||
|
weflow,
|
||||||
session: {
|
session: {
|
||||||
wxid: sessionId,
|
wxid: sessionId,
|
||||||
nickname: sessionNickname,
|
nickname: sessionNickname,
|
||||||
@@ -2076,8 +2134,18 @@ class ExportService {
|
|||||||
const sessionInfo = await this.getContactInfo(sessionId)
|
const sessionInfo = await this.getContactInfo(sessionId)
|
||||||
const myInfo = await this.getContactInfo(cleanedMyWxid)
|
const myInfo = await this.getContactInfo(cleanedMyWxid)
|
||||||
|
|
||||||
|
const contactCache = new Map<string, { success: boolean; contact?: any; error?: string }>()
|
||||||
|
const getContactCached = async (username: string) => {
|
||||||
|
if (contactCache.has(username)) {
|
||||||
|
return contactCache.get(username)!
|
||||||
|
}
|
||||||
|
const result = await wcdbService.getContact(username)
|
||||||
|
contactCache.set(username, result)
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
// 获取会话的备注信息
|
// 获取会话的备注信息
|
||||||
const sessionContact = await wcdbService.getContact(sessionId)
|
const sessionContact = await getContactCached(sessionId)
|
||||||
const sessionRemark = sessionContact.success && sessionContact.contact?.remark ? sessionContact.contact.remark : ''
|
const sessionRemark = sessionContact.success && sessionContact.contact?.remark ? sessionContact.contact.remark : ''
|
||||||
const sessionNickname = sessionContact.success && sessionContact.contact?.nickName ? sessionContact.contact.nickName : sessionId
|
const sessionNickname = sessionContact.success && sessionContact.contact?.nickName ? sessionContact.contact.nickName : sessionId
|
||||||
|
|
||||||
@@ -2088,8 +2156,16 @@ class ExportService {
|
|||||||
phase: 'preparing'
|
phase: 'preparing'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (options.exportVoiceAsText) {
|
||||||
|
await this.ensureVoiceModel(onProgress)
|
||||||
|
}
|
||||||
|
|
||||||
const collected = await this.collectMessages(sessionId, cleanedMyWxid, options.dateRange)
|
const collected = await this.collectMessages(sessionId, cleanedMyWxid, options.dateRange)
|
||||||
|
|
||||||
|
// 如果没有消息,不创建文件
|
||||||
|
if (collected.rows.length === 0) {
|
||||||
|
return { success: false, error: '该会话在指定时间范围内没有消息' }
|
||||||
|
}
|
||||||
|
|
||||||
onProgress?.({
|
onProgress?.({
|
||||||
current: 30,
|
current: 30,
|
||||||
@@ -2202,11 +2278,11 @@ class ExportService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 预加载群昵称 (仅群聊且完整列模式)
|
// 预加载群昵称 (仅群聊且完整列模式)
|
||||||
console.log('🔍 预加载群昵称检查: isGroup=', isGroup, 'useCompactColumns=', useCompactColumns, 'sessionId=', sessionId)
|
console.log('预加载群昵称检查: isGroup=', isGroup, 'useCompactColumns=', useCompactColumns, 'sessionId=', sessionId)
|
||||||
const groupNicknamesMap = (isGroup && !useCompactColumns)
|
const groupNicknamesMap = (isGroup && !useCompactColumns)
|
||||||
? await this.getGroupNicknamesForRoom(sessionId)
|
? await this.getGroupNicknamesForRoom(sessionId)
|
||||||
: new Map<string, string>()
|
: new Map<string, string>()
|
||||||
console.log('🔍 群昵称Map大小:', groupNicknamesMap.size)
|
console.log('群昵称Map大小:', groupNicknamesMap.size)
|
||||||
|
|
||||||
|
|
||||||
// 填充数据
|
// 填充数据
|
||||||
@@ -2267,7 +2343,7 @@ class ExportService {
|
|||||||
|
|
||||||
const VOICE_CONCURRENCY = 4
|
const VOICE_CONCURRENCY = 4
|
||||||
await parallelLimit(voiceMessages, VOICE_CONCURRENCY, async (msg) => {
|
await parallelLimit(voiceMessages, VOICE_CONCURRENCY, async (msg) => {
|
||||||
const transcript = await this.transcribeVoice(sessionId, String(msg.localId))
|
const transcript = await this.transcribeVoice(sessionId, String(msg.localId), msg.createTime, msg.senderUsername)
|
||||||
voiceTranscriptMap.set(msg.localId, transcript)
|
voiceTranscriptMap.set(msg.localId, transcript)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -2302,7 +2378,7 @@ class ExportService {
|
|||||||
senderWxid = msg.senderUsername
|
senderWxid = msg.senderUsername
|
||||||
|
|
||||||
// 用 getContact 获取联系人详情,分别取昵称和备注
|
// 用 getContact 获取联系人详情,分别取昵称和备注
|
||||||
const contactDetail = await wcdbService.getContact(msg.senderUsername)
|
const contactDetail = await getContactCached(msg.senderUsername)
|
||||||
if (contactDetail.success && contactDetail.contact) {
|
if (contactDetail.success && contactDetail.contact) {
|
||||||
// nickName 才是真正的昵称
|
// nickName 才是真正的昵称
|
||||||
senderNickname = contactDetail.contact.nickName || msg.senderUsername
|
senderNickname = contactDetail.contact.nickName || msg.senderUsername
|
||||||
@@ -2317,7 +2393,7 @@ class ExportService {
|
|||||||
} else {
|
} else {
|
||||||
// 单聊对方消息 - 用 getContact 获取联系人详情
|
// 单聊对方消息 - 用 getContact 获取联系人详情
|
||||||
senderWxid = sessionId
|
senderWxid = sessionId
|
||||||
const contactDetail = await wcdbService.getContact(sessionId)
|
const contactDetail = await getContactCached(sessionId)
|
||||||
if (contactDetail.success && contactDetail.contact) {
|
if (contactDetail.success && contactDetail.contact) {
|
||||||
senderNickname = contactDetail.contact.nickName || sessionId
|
senderNickname = contactDetail.contact.nickName || sessionId
|
||||||
senderRemark = contactDetail.contact.remark || ''
|
senderRemark = contactDetail.contact.remark || ''
|
||||||
@@ -2338,7 +2414,10 @@ class ExportService {
|
|||||||
const row = worksheet.getRow(currentRow)
|
const row = worksheet.getRow(currentRow)
|
||||||
row.height = 24
|
row.height = 24
|
||||||
|
|
||||||
const contentValue = this.formatPlainExportContent(
|
const mediaKey = `${msg.localType}_${msg.localId}`
|
||||||
|
const mediaItem = mediaCache.get(mediaKey)
|
||||||
|
const contentValue = mediaItem?.relativePath
|
||||||
|
|| this.formatPlainExportContent(
|
||||||
msg.content,
|
msg.content,
|
||||||
msg.localType,
|
msg.localType,
|
||||||
options,
|
options,
|
||||||
@@ -2417,6 +2496,41 @@ class ExportService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 确保语音转写模型已下载
|
||||||
|
*/
|
||||||
|
private async ensureVoiceModel(onProgress?: (progress: ExportProgress) => void): Promise<boolean> {
|
||||||
|
try {
|
||||||
|
const status = await voiceTranscribeService.getModelStatus()
|
||||||
|
if (status.success && status.exists) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
onProgress?.({
|
||||||
|
current: 0,
|
||||||
|
total: 100,
|
||||||
|
currentSession: '正在下载 AI 模型',
|
||||||
|
phase: 'preparing'
|
||||||
|
})
|
||||||
|
|
||||||
|
const downloadResult = await voiceTranscribeService.downloadModel((progress: any) => {
|
||||||
|
if (progress.percent !== undefined) {
|
||||||
|
onProgress?.({
|
||||||
|
current: progress.percent,
|
||||||
|
total: 100,
|
||||||
|
currentSession: `正在下载 AI 模型 (${progress.percent.toFixed(0)}%)`,
|
||||||
|
phase: 'preparing'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return downloadResult.success
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Auto download model failed:', e)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 导出单个会话为 TXT 格式(默认与 Excel 精简列一致)
|
* 导出单个会话为 TXT 格式(默认与 Excel 精简列一致)
|
||||||
*/
|
*/
|
||||||
@@ -2442,7 +2556,17 @@ class ExportService {
|
|||||||
phase: 'preparing'
|
phase: 'preparing'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (options.exportVoiceAsText) {
|
||||||
|
await this.ensureVoiceModel(onProgress)
|
||||||
|
}
|
||||||
|
|
||||||
const collected = await this.collectMessages(sessionId, cleanedMyWxid, options.dateRange)
|
const collected = await this.collectMessages(sessionId, cleanedMyWxid, options.dateRange)
|
||||||
|
|
||||||
|
// 如果没有消息,不创建文件
|
||||||
|
if (collected.rows.length === 0) {
|
||||||
|
return { success: false, error: '该会话在指定时间范围内没有消息' }
|
||||||
|
}
|
||||||
|
|
||||||
const sortedMessages = collected.rows.sort((a, b) => a.createTime - b.createTime)
|
const sortedMessages = collected.rows.sort((a, b) => a.createTime - b.createTime)
|
||||||
|
|
||||||
const { exportMediaEnabled, mediaRootDir, mediaRelativePrefix } = this.getMediaLayout(outputPath, options)
|
const { exportMediaEnabled, mediaRootDir, mediaRelativePrefix } = this.getMediaLayout(outputPath, options)
|
||||||
@@ -2495,7 +2619,7 @@ class ExportService {
|
|||||||
|
|
||||||
const VOICE_CONCURRENCY = 4
|
const VOICE_CONCURRENCY = 4
|
||||||
await parallelLimit(voiceMessages, VOICE_CONCURRENCY, async (msg) => {
|
await parallelLimit(voiceMessages, VOICE_CONCURRENCY, async (msg) => {
|
||||||
const transcript = await this.transcribeVoice(sessionId, String(msg.localId))
|
const transcript = await this.transcribeVoice(sessionId, String(msg.localId), msg.createTime, msg.senderUsername)
|
||||||
voiceTranscriptMap.set(msg.localId, transcript)
|
voiceTranscriptMap.set(msg.localId, transcript)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -2511,7 +2635,10 @@ class ExportService {
|
|||||||
|
|
||||||
for (let i = 0; i < sortedMessages.length; i++) {
|
for (let i = 0; i < sortedMessages.length; i++) {
|
||||||
const msg = sortedMessages[i]
|
const msg = sortedMessages[i]
|
||||||
const contentValue = this.formatPlainExportContent(
|
const mediaKey = `${msg.localType}_${msg.localId}`
|
||||||
|
const mediaItem = mediaCache.get(mediaKey)
|
||||||
|
const contentValue = mediaItem?.relativePath
|
||||||
|
|| this.formatPlainExportContent(
|
||||||
msg.content,
|
msg.content,
|
||||||
msg.localType,
|
msg.localType,
|
||||||
options,
|
options,
|
||||||
@@ -2529,7 +2656,7 @@ class ExportService {
|
|||||||
senderNickname = myInfo.displayName || cleanedMyWxid
|
senderNickname = myInfo.displayName || cleanedMyWxid
|
||||||
} else if (isGroup && msg.senderUsername) {
|
} else if (isGroup && msg.senderUsername) {
|
||||||
senderWxid = msg.senderUsername
|
senderWxid = msg.senderUsername
|
||||||
const contactDetail = await wcdbService.getContact(msg.senderUsername)
|
const contactDetail = await getContactCached(msg.senderUsername)
|
||||||
if (contactDetail.success && contactDetail.contact) {
|
if (contactDetail.success && contactDetail.contact) {
|
||||||
senderNickname = contactDetail.contact.nickName || msg.senderUsername
|
senderNickname = contactDetail.contact.nickName || msg.senderUsername
|
||||||
senderRemark = contactDetail.contact.remark || ''
|
senderRemark = contactDetail.contact.remark || ''
|
||||||
@@ -2540,7 +2667,7 @@ class ExportService {
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
senderWxid = sessionId
|
senderWxid = sessionId
|
||||||
const contactDetail = await wcdbService.getContact(sessionId)
|
const contactDetail = await getContactCached(sessionId)
|
||||||
if (contactDetail.success && contactDetail.contact) {
|
if (contactDetail.success && contactDetail.contact) {
|
||||||
senderNickname = contactDetail.contact.nickName || sessionId
|
senderNickname = contactDetail.contact.nickName || sessionId
|
||||||
senderRemark = contactDetail.contact.remark || ''
|
senderRemark = contactDetail.contact.remark || ''
|
||||||
@@ -2613,7 +2740,17 @@ class ExportService {
|
|||||||
phase: 'preparing'
|
phase: 'preparing'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (options.exportVoiceAsText) {
|
||||||
|
await this.ensureVoiceModel(onProgress)
|
||||||
|
}
|
||||||
|
|
||||||
const collected = await this.collectMessages(sessionId, cleanedMyWxid, options.dateRange)
|
const collected = await this.collectMessages(sessionId, cleanedMyWxid, options.dateRange)
|
||||||
|
|
||||||
|
// 如果没有消息,不创建文件
|
||||||
|
if (collected.rows.length === 0) {
|
||||||
|
return { success: false, error: '该会话在指定时间范围内没有消息' }
|
||||||
|
}
|
||||||
|
|
||||||
if (isGroup) {
|
if (isGroup) {
|
||||||
await this.mergeGroupMembers(sessionId, collected.memberSet, options.exportAvatars === true)
|
await this.mergeGroupMembers(sessionId, collected.memberSet, options.exportAvatars === true)
|
||||||
}
|
}
|
||||||
@@ -2673,7 +2810,7 @@ class ExportService {
|
|||||||
|
|
||||||
const VOICE_CONCURRENCY = 4
|
const VOICE_CONCURRENCY = 4
|
||||||
await parallelLimit(voiceMessages, VOICE_CONCURRENCY, async (msg) => {
|
await parallelLimit(voiceMessages, VOICE_CONCURRENCY, async (msg) => {
|
||||||
const transcript = await this.transcribeVoice(sessionId, String(msg.localId))
|
const transcript = await this.transcribeVoice(sessionId, String(msg.localId), msg.createTime, msg.senderUsername)
|
||||||
voiceTranscriptMap.set(msg.localId, transcript)
|
voiceTranscriptMap.set(msg.localId, transcript)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -2961,13 +3098,20 @@ class ExportService {
|
|||||||
const sessionLayout = exportMediaEnabled
|
const sessionLayout = exportMediaEnabled
|
||||||
? (options.sessionLayout ?? 'per-session')
|
? (options.sessionLayout ?? 'per-session')
|
||||||
: 'shared'
|
: 'shared'
|
||||||
|
let completedCount = 0
|
||||||
|
const rawConcurrency = typeof options.exportConcurrency === 'number'
|
||||||
|
? Math.floor(options.exportConcurrency)
|
||||||
|
: 2
|
||||||
|
const clampedConcurrency = Math.max(1, Math.min(rawConcurrency, 6))
|
||||||
|
const sessionConcurrency = (exportMediaEnabled && sessionLayout === 'shared')
|
||||||
|
? 1
|
||||||
|
: clampedConcurrency
|
||||||
|
|
||||||
for (let i = 0; i < sessionIds.length; i++) {
|
await parallelLimit(sessionIds, sessionConcurrency, async (sessionId) => {
|
||||||
const sessionId = sessionIds[i]
|
|
||||||
const sessionInfo = await this.getContactInfo(sessionId)
|
const sessionInfo = await this.getContactInfo(sessionId)
|
||||||
|
|
||||||
onProgress?.({
|
onProgress?.({
|
||||||
current: i + 1,
|
current: completedCount,
|
||||||
total: sessionIds.length,
|
total: sessionIds.length,
|
||||||
currentSession: sessionInfo.displayName,
|
currentSession: sessionInfo.displayName,
|
||||||
phase: 'exporting'
|
phase: 'exporting'
|
||||||
@@ -3009,7 +3153,15 @@ class ExportService {
|
|||||||
failCount++
|
failCount++
|
||||||
console.error(`导出 ${sessionId} 失败:`, result.error)
|
console.error(`导出 ${sessionId} 失败:`, result.error)
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
completedCount++
|
||||||
|
onProgress?.({
|
||||||
|
current: completedCount,
|
||||||
|
total: sessionIds.length,
|
||||||
|
currentSession: sessionInfo.displayName,
|
||||||
|
phase: 'exporting'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
onProgress?.({
|
onProgress?.({
|
||||||
current: sessionIds.length,
|
current: sessionIds.length,
|
||||||
|
|||||||
@@ -899,35 +899,63 @@ export class ImageDecryptService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private findCachedOutput(cacheKey: string, preferHd: boolean = false, sessionId?: string): string | null {
|
private findCachedOutput(cacheKey: string, preferHd: boolean = false, sessionId?: string): string | null {
|
||||||
const root = this.getCacheRoot()
|
const allRoots = this.getAllCacheRoots()
|
||||||
const normalizedKey = this.normalizeDatBase(cacheKey.toLowerCase())
|
const normalizedKey = this.normalizeDatBase(cacheKey.toLowerCase())
|
||||||
const extensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp']
|
const extensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp']
|
||||||
|
|
||||||
|
// 遍历所有可能的缓存根路径
|
||||||
|
for (const root of allRoots) {
|
||||||
|
// 策略1: 新目录结构 Images/{sessionId}/{YYYY-MM}/{file}_hd.jpg
|
||||||
if (sessionId) {
|
if (sessionId) {
|
||||||
const sessionDir = join(root, this.sanitizeDirName(sessionId))
|
const sessionDir = join(root, this.sanitizeDirName(sessionId))
|
||||||
if (existsSync(sessionDir)) {
|
if (existsSync(sessionDir)) {
|
||||||
try {
|
try {
|
||||||
const sessionEntries = readdirSync(sessionDir)
|
const dateDirs = readdirSync(sessionDir, { withFileTypes: true })
|
||||||
for (const entry of sessionEntries) {
|
.filter(d => d.isDirectory() && /^\d{4}-\d{2}$/.test(d.name))
|
||||||
const timeDir = join(sessionDir, entry)
|
.map(d => d.name)
|
||||||
if (!this.isDirectory(timeDir)) continue
|
.sort()
|
||||||
const hit = this.findCachedOutputInDir(timeDir, normalizedKey, extensions, preferHd)
|
.reverse() // 最新的日期优先
|
||||||
if (hit) return hit
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 新目录结构: Images/{normalizedKey}/{normalizedKey}_thumb.jpg 或 _hd.jpg
|
for (const dateDir of dateDirs) {
|
||||||
const imageDir = join(root, normalizedKey)
|
const imageDir = join(sessionDir, dateDir)
|
||||||
if (existsSync(imageDir)) {
|
|
||||||
const hit = this.findCachedOutputInDir(imageDir, normalizedKey, extensions, preferHd)
|
const hit = this.findCachedOutputInDir(imageDir, normalizedKey, extensions, preferHd)
|
||||||
if (hit) return hit
|
if (hit) return hit
|
||||||
}
|
}
|
||||||
|
} catch { }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 兼容旧的平铺结构
|
// 策略2: 遍历所有 sessionId 目录查找(如果没有指定 sessionId)
|
||||||
|
try {
|
||||||
|
const sessionDirs = readdirSync(root, { withFileTypes: true })
|
||||||
|
.filter(d => d.isDirectory())
|
||||||
|
.map(d => d.name)
|
||||||
|
|
||||||
|
for (const session of sessionDirs) {
|
||||||
|
const sessionDir = join(root, session)
|
||||||
|
// 检查是否是日期目录结构
|
||||||
|
try {
|
||||||
|
const subDirs = readdirSync(sessionDir, { withFileTypes: true })
|
||||||
|
.filter(d => d.isDirectory() && /^\d{4}-\d{2}$/.test(d.name))
|
||||||
|
.map(d => d.name)
|
||||||
|
|
||||||
|
for (const dateDir of subDirs) {
|
||||||
|
const imageDir = join(sessionDir, dateDir)
|
||||||
|
const hit = this.findCachedOutputInDir(imageDir, normalizedKey, extensions, preferHd)
|
||||||
|
if (hit) return hit
|
||||||
|
}
|
||||||
|
} catch { }
|
||||||
|
}
|
||||||
|
} catch { }
|
||||||
|
|
||||||
|
// 策略3: 旧目录结构 Images/{normalizedKey}/{normalizedKey}_thumb.jpg
|
||||||
|
const oldImageDir = join(root, normalizedKey)
|
||||||
|
if (existsSync(oldImageDir)) {
|
||||||
|
const hit = this.findCachedOutputInDir(oldImageDir, normalizedKey, extensions, preferHd)
|
||||||
|
if (hit) return hit
|
||||||
|
}
|
||||||
|
|
||||||
|
// 策略4: 最旧的平铺结构 Images/{file}.jpg
|
||||||
for (const ext of extensions) {
|
for (const ext of extensions) {
|
||||||
const candidate = join(root, `${cacheKey}${ext}`)
|
const candidate = join(root, `${cacheKey}${ext}`)
|
||||||
if (existsSync(candidate)) return candidate
|
if (existsSync(candidate)) return candidate
|
||||||
@@ -936,6 +964,7 @@ export class ImageDecryptService {
|
|||||||
const candidate = join(root, `${cacheKey}_t${ext}`)
|
const candidate = join(root, `${cacheKey}_t${ext}`)
|
||||||
if (existsSync(candidate)) return candidate
|
if (existsSync(candidate)) return candidate
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
@@ -1104,15 +1133,19 @@ export class ImageDecryptService {
|
|||||||
if (this.cacheIndexed) return
|
if (this.cacheIndexed) return
|
||||||
if (this.cacheIndexing) return this.cacheIndexing
|
if (this.cacheIndexing) return this.cacheIndexing
|
||||||
this.cacheIndexing = new Promise((resolve) => {
|
this.cacheIndexing = new Promise((resolve) => {
|
||||||
const root = this.getCacheRoot()
|
// 扫描所有可能的缓存根目录
|
||||||
|
const allRoots = this.getAllCacheRoots()
|
||||||
|
this.logInfo('开始索引缓存', { roots: allRoots.length })
|
||||||
|
|
||||||
|
for (const root of allRoots) {
|
||||||
try {
|
try {
|
||||||
this.indexCacheDir(root, 2, 0)
|
this.indexCacheDir(root, 3, 0) // 增加深度到3,支持 sessionId/YYYY-MM 结构
|
||||||
} catch {
|
} catch (e) {
|
||||||
this.cacheIndexed = true
|
this.logError('索引目录失败', e, { root })
|
||||||
this.cacheIndexing = null
|
|
||||||
resolve()
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.logInfo('缓存索引完成', { entries: this.resolvedCache.size })
|
||||||
this.cacheIndexed = true
|
this.cacheIndexed = true
|
||||||
this.cacheIndexing = null
|
this.cacheIndexing = null
|
||||||
resolve()
|
resolve()
|
||||||
@@ -1120,6 +1153,39 @@ export class ImageDecryptService {
|
|||||||
return this.cacheIndexing
|
return this.cacheIndexing
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取所有可能的缓存根路径(用于查找已缓存的图片)
|
||||||
|
* 包含当前路径、配置路径、旧版本路径
|
||||||
|
*/
|
||||||
|
private getAllCacheRoots(): string[] {
|
||||||
|
const roots: string[] = []
|
||||||
|
const configured = this.configService.get('cachePath')
|
||||||
|
const documentsPath = app.getPath('documents')
|
||||||
|
|
||||||
|
// 主要路径(当前使用的)
|
||||||
|
const mainRoot = this.getCacheRoot()
|
||||||
|
roots.push(mainRoot)
|
||||||
|
|
||||||
|
// 如果配置了自定义路径,也检查其下的 Images
|
||||||
|
if (configured) {
|
||||||
|
roots.push(join(configured, 'Images'))
|
||||||
|
roots.push(join(configured, 'images'))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 默认路径
|
||||||
|
roots.push(join(documentsPath, 'WeFlow', 'Images'))
|
||||||
|
roots.push(join(documentsPath, 'WeFlow', 'images'))
|
||||||
|
|
||||||
|
// 兼容旧路径(如果有的话)
|
||||||
|
roots.push(join(documentsPath, 'WeFlowData', 'Images'))
|
||||||
|
|
||||||
|
// 去重并过滤存在的路径
|
||||||
|
const uniqueRoots = Array.from(new Set(roots))
|
||||||
|
const existingRoots = uniqueRoots.filter(r => existsSync(r))
|
||||||
|
|
||||||
|
return existingRoots
|
||||||
|
}
|
||||||
|
|
||||||
private indexCacheDir(root: string, maxDepth: number, depth: number): void {
|
private indexCacheDir(root: string, maxDepth: number, depth: number): void {
|
||||||
let entries: string[]
|
let entries: string[]
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -2,6 +2,25 @@ import { wcdbService } from './wcdbService'
|
|||||||
import { ConfigService } from './config'
|
import { ConfigService } from './config'
|
||||||
import { ContactCacheService } from './contactCacheService'
|
import { ContactCacheService } from './contactCacheService'
|
||||||
|
|
||||||
|
export interface SnsLivePhoto {
|
||||||
|
url: string
|
||||||
|
thumb: string
|
||||||
|
md5?: string
|
||||||
|
token?: string
|
||||||
|
key?: string
|
||||||
|
encIdx?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SnsMedia {
|
||||||
|
url: string
|
||||||
|
thumb: string
|
||||||
|
md5?: string
|
||||||
|
token?: string
|
||||||
|
key?: string
|
||||||
|
encIdx?: string
|
||||||
|
livePhoto?: SnsLivePhoto
|
||||||
|
}
|
||||||
|
|
||||||
export interface SnsPost {
|
export interface SnsPost {
|
||||||
id: string
|
id: string
|
||||||
username: string
|
username: string
|
||||||
@@ -10,11 +29,25 @@ export interface SnsPost {
|
|||||||
createTime: number
|
createTime: number
|
||||||
contentDesc: string
|
contentDesc: string
|
||||||
type?: number
|
type?: number
|
||||||
media: { url: string; thumb: string }[]
|
media: SnsMedia[]
|
||||||
likes: string[]
|
likes: string[]
|
||||||
comments: { id: string; nickname: string; content: string; refCommentId: string; refNickname?: string }[]
|
comments: { id: string; nickname: string; content: string; refCommentId: string; refNickname?: string }[]
|
||||||
|
rawXml?: string // 原始 XML 数据
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const fixSnsUrl = (url: string, token?: string) => {
|
||||||
|
if (!url) return url;
|
||||||
|
|
||||||
|
// 1. 统一使用 https
|
||||||
|
// 2. 将 /150 (缩略图) 强制改为 /0 (原图)
|
||||||
|
let fixedUrl = url.replace('http://', 'https://').replace(/\/150($|\?)/, '/0$1');
|
||||||
|
|
||||||
|
if (!token || fixedUrl.includes('token=')) return fixedUrl;
|
||||||
|
|
||||||
|
const connector = fixedUrl.includes('?') ? '&' : '?';
|
||||||
|
return `${fixedUrl}${connector}token=${token}&idx=1`;
|
||||||
|
};
|
||||||
|
|
||||||
class SnsService {
|
class SnsService {
|
||||||
private contactCache: ContactCacheService
|
private contactCache: ContactCacheService
|
||||||
|
|
||||||
@@ -35,14 +68,50 @@ class SnsService {
|
|||||||
})
|
})
|
||||||
|
|
||||||
if (result.success && result.timeline) {
|
if (result.success && result.timeline) {
|
||||||
const enrichedTimeline = result.timeline.map((post: any) => {
|
const enrichedTimeline = result.timeline.map((post: any, index: number) => {
|
||||||
const contact = this.contactCache.get(post.username)
|
const contact = this.contactCache.get(post.username)
|
||||||
|
|
||||||
// 修复媒体 URL,如果是 http 则尝试用 https (虽然 qpic 可能不支持强制 https,但通常支持)
|
// 修复媒体 URL
|
||||||
const fixedMedia = post.media.map((m: any) => ({
|
const fixedMedia = post.media.map((m: any, mIdx: number) => {
|
||||||
url: m.url.replace('http://', 'https://'),
|
const base = {
|
||||||
thumb: m.thumb.replace('http://', 'https://')
|
url: fixSnsUrl(m.url, m.token),
|
||||||
}))
|
thumb: fixSnsUrl(m.thumb, m.token),
|
||||||
|
md5: m.md5,
|
||||||
|
token: m.token,
|
||||||
|
key: m.key,
|
||||||
|
encIdx: m.encIdx || m.enc_idx, // 兼容不同命名
|
||||||
|
livePhoto: m.livePhoto ? {
|
||||||
|
...m.livePhoto,
|
||||||
|
url: fixSnsUrl(m.livePhoto.url, m.livePhoto.token),
|
||||||
|
thumb: fixSnsUrl(m.livePhoto.thumb, m.livePhoto.token),
|
||||||
|
token: m.livePhoto.token,
|
||||||
|
key: m.livePhoto.key
|
||||||
|
} : undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
// [MOCK] 模拟数据:如果后端没返回 key (说明 DLL 未更新),注入一些 Mock 数据以便前端开发
|
||||||
|
if (!base.key) {
|
||||||
|
base.key = 'mock_key_for_dev'
|
||||||
|
if (!base.token) {
|
||||||
|
base.token = 'mock_token_for_dev'
|
||||||
|
base.url = fixSnsUrl(base.url, base.token)
|
||||||
|
base.thumb = fixSnsUrl(base.thumb, base.token)
|
||||||
|
}
|
||||||
|
base.encIdx = '1'
|
||||||
|
|
||||||
|
// 强制给第一个帖子的第一张图加 LivePhoto 模拟
|
||||||
|
if (index === 0 && mIdx === 0 && !base.livePhoto) {
|
||||||
|
base.livePhoto = {
|
||||||
|
url: fixSnsUrl('https://tm.sh/d4cb0.mp4', 'mock_live_token'),
|
||||||
|
thumb: base.thumb,
|
||||||
|
token: 'mock_live_token',
|
||||||
|
key: 'mock_live_key'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return base
|
||||||
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...post,
|
...post,
|
||||||
@@ -59,6 +128,128 @@ class SnsService {
|
|||||||
console.log('[SnsService] Returning result:', result)
|
console.log('[SnsService] Returning result:', result)
|
||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
|
async debugResource(url: string): Promise<{ success: boolean; status?: number; headers?: any; error?: string }> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
try {
|
||||||
|
const { app, net } = require('electron')
|
||||||
|
// Remove mocking 'require' if it causes issues, but here we need 'net' or 'https'
|
||||||
|
// implementing with 'https' for reliability if 'net' is main-process only special
|
||||||
|
const https = require('https')
|
||||||
|
const urlObj = new URL(url)
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
hostname: urlObj.hostname,
|
||||||
|
path: urlObj.pathname + urlObj.search,
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 MicroMessenger/7.0.20.1781(0x6700143B) WindowsWechat(0x63090719) XWEB/8351",
|
||||||
|
"Accept": "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8",
|
||||||
|
"Accept-Encoding": "gzip, deflate, br",
|
||||||
|
"Accept-Language": "zh-CN,zh;q=0.9",
|
||||||
|
"Referer": "https://servicewechat.com/",
|
||||||
|
"Connection": "keep-alive",
|
||||||
|
"Range": "bytes=0-10" // Keep our range check
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const req = https.request(options, (res: any) => {
|
||||||
|
resolve({
|
||||||
|
success: true,
|
||||||
|
status: res.statusCode,
|
||||||
|
headers: {
|
||||||
|
'x-enc': res.headers['x-enc'],
|
||||||
|
'content-length': res.headers['content-length'],
|
||||||
|
'content-type': res.headers['content-type']
|
||||||
|
}
|
||||||
|
})
|
||||||
|
req.destroy() // We only need headers
|
||||||
|
})
|
||||||
|
|
||||||
|
req.on('error', (e: any) => {
|
||||||
|
resolve({ success: false, error: e.message })
|
||||||
|
})
|
||||||
|
|
||||||
|
req.end()
|
||||||
|
} catch (e: any) {
|
||||||
|
resolve({ success: false, error: e.message })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private imageCache = new Map<string, string>()
|
||||||
|
|
||||||
|
async proxyImage(url: string): Promise<{ success: boolean; dataUrl?: string; error?: string }> {
|
||||||
|
// Check cache
|
||||||
|
if (this.imageCache.has(url)) {
|
||||||
|
return { success: true, dataUrl: this.imageCache.get(url) }
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
try {
|
||||||
|
const https = require('https')
|
||||||
|
const zlib = require('zlib')
|
||||||
|
const urlObj = new URL(url)
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
hostname: urlObj.hostname,
|
||||||
|
path: urlObj.pathname + urlObj.search,
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 MicroMessenger/7.0.20.1781(0x6700143B) WindowsWechat(0x63090719) XWEB/8351",
|
||||||
|
"Accept": "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8",
|
||||||
|
"Accept-Encoding": "gzip, deflate, br",
|
||||||
|
"Accept-Language": "zh-CN,zh;q=0.9",
|
||||||
|
"Referer": "https://servicewechat.com/",
|
||||||
|
"Connection": "keep-alive"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const req = https.request(options, (res: any) => {
|
||||||
|
if (res.statusCode !== 200) {
|
||||||
|
resolve({ success: false, error: `HTTP ${res.statusCode}` })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const chunks: Buffer[] = []
|
||||||
|
let stream = res
|
||||||
|
|
||||||
|
// Handle gzip compression
|
||||||
|
const encoding = res.headers['content-encoding']
|
||||||
|
if (encoding === 'gzip') {
|
||||||
|
stream = res.pipe(zlib.createGunzip())
|
||||||
|
} else if (encoding === 'deflate') {
|
||||||
|
stream = res.pipe(zlib.createInflate())
|
||||||
|
} else if (encoding === 'br') {
|
||||||
|
stream = res.pipe(zlib.createBrotliDecompress())
|
||||||
|
}
|
||||||
|
|
||||||
|
stream.on('data', (chunk: Buffer) => chunks.push(chunk))
|
||||||
|
stream.on('end', () => {
|
||||||
|
const buffer = Buffer.concat(chunks)
|
||||||
|
const contentType = res.headers['content-type'] || 'image/jpeg'
|
||||||
|
const base64 = buffer.toString('base64')
|
||||||
|
const dataUrl = `data:${contentType};base64,${base64}`
|
||||||
|
|
||||||
|
// Cache
|
||||||
|
this.imageCache.set(url, dataUrl)
|
||||||
|
|
||||||
|
resolve({ success: true, dataUrl })
|
||||||
|
})
|
||||||
|
stream.on('error', (e: any) => {
|
||||||
|
resolve({ success: false, error: e.message })
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
req.on('error', (e: any) => {
|
||||||
|
resolve({ success: false, error: e.message })
|
||||||
|
})
|
||||||
|
|
||||||
|
req.end()
|
||||||
|
} catch (e: any) {
|
||||||
|
resolve({ success: false, error: e.message })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const snsService = new SnsService()
|
export const snsService = new SnsService()
|
||||||
|
|||||||
@@ -247,10 +247,33 @@ export class WcdbCore {
|
|||||||
// InitProtection (Added for security)
|
// InitProtection (Added for security)
|
||||||
try {
|
try {
|
||||||
this.wcdbInitProtection = this.lib.func('bool InitProtection(const char* resourcePath)')
|
this.wcdbInitProtection = this.lib.func('bool InitProtection(const char* resourcePath)')
|
||||||
const protectionOk = this.wcdbInitProtection(dllDir)
|
|
||||||
|
// 尝试多个可能的资源路径
|
||||||
|
const resourcePaths = [
|
||||||
|
dllDir, // DLL 所在目录
|
||||||
|
dirname(dllDir), // 上级目录
|
||||||
|
this.resourcesPath, // 配置的资源路径
|
||||||
|
join(process.cwd(), 'resources') // 开发环境
|
||||||
|
].filter(Boolean)
|
||||||
|
|
||||||
|
let protectionOk = false
|
||||||
|
for (const resPath of resourcePaths) {
|
||||||
|
try {
|
||||||
|
console.log(`[WCDB] 尝试 InitProtection: ${resPath}`)
|
||||||
|
protectionOk = this.wcdbInitProtection(resPath)
|
||||||
|
if (protectionOk) {
|
||||||
|
console.log(`[WCDB] InitProtection 成功: ${resPath}`)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(`[WCDB] InitProtection 失败 (${resPath}):`, e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (!protectionOk) {
|
if (!protectionOk) {
|
||||||
console.error('Core security check failed')
|
console.warn('[WCDB] Core security check failed - 继续运行但可能不稳定')
|
||||||
return false
|
this.writeLog('InitProtection 失败,继续运行')
|
||||||
|
// 不返回 false,允许继续运行
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn('InitProtection symbol not found:', e)
|
console.warn('InitProtection symbol not found:', e)
|
||||||
|
|||||||
@@ -47,11 +47,11 @@ ManifestDPIAware true
|
|||||||
DetailPrint "Visual C++ Redistributable 安装成功"
|
DetailPrint "Visual C++ Redistributable 安装成功"
|
||||||
MessageBox MB_OK|MB_ICONINFORMATION "Visual C++ 运行库安装成功!"
|
MessageBox MB_OK|MB_ICONINFORMATION "Visual C++ 运行库安装成功!"
|
||||||
${Else}
|
${Else}
|
||||||
MessageBox MB_OK|MB_ICONEXCLAMATION "Visual C++ 运行库安装失败,您可能需要手动安装。"
|
MessageBox MB_OK|MB_ICONEXCLAMATION "Visual C++ 运行库安装失败,你可能需要手动安装。"
|
||||||
${EndIf}
|
${EndIf}
|
||||||
Delete "$TEMP\vc_redist.x64.exe"
|
Delete "$TEMP\vc_redist.x64.exe"
|
||||||
${Else}
|
${Else}
|
||||||
MessageBox MB_OK|MB_ICONEXCLAMATION "下载失败:$0$\n$\n您可以稍后手动下载安装 Visual C++ Redistributable。"
|
MessageBox MB_OK|MB_ICONEXCLAMATION "下载失败:$0$\n$\n你可以稍后手动下载安装 Visual C++ Redistributable。"
|
||||||
${EndIf}
|
${EndIf}
|
||||||
Goto doneVC
|
Goto doneVC
|
||||||
|
|
||||||
|
|||||||
BIN
mdassets/us.png
Normal file
BIN
mdassets/us.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "weflow",
|
"name": "weflow",
|
||||||
"version": "1.4.0",
|
"version": "1.4.1",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "weflow",
|
"name": "weflow",
|
||||||
"version": "1.4.0",
|
"version": "1.4.1",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"better-sqlite3": "^12.5.0",
|
"better-sqlite3": "^12.5.0",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "weflow",
|
"name": "weflow",
|
||||||
"version": "1.4.0",
|
"version": "1.4.1",
|
||||||
"description": "WeFlow",
|
"description": "WeFlow",
|
||||||
"main": "dist-electron/main.js",
|
"main": "dist-electron/main.js",
|
||||||
"author": "cc",
|
"author": "cc",
|
||||||
|
|||||||
Binary file not shown.
134
src/App.tsx
134
src/App.tsx
@@ -17,6 +17,8 @@ import SettingsPage from './pages/SettingsPage'
|
|||||||
import ExportPage from './pages/ExportPage'
|
import ExportPage from './pages/ExportPage'
|
||||||
import VideoWindow from './pages/VideoWindow'
|
import VideoWindow from './pages/VideoWindow'
|
||||||
import SnsPage from './pages/SnsPage'
|
import SnsPage from './pages/SnsPage'
|
||||||
|
import ContactsPage from './pages/ContactsPage'
|
||||||
|
import ChatHistoryPage from './pages/ChatHistoryPage'
|
||||||
|
|
||||||
import { useAppStore } from './stores/appStore'
|
import { useAppStore } from './stores/appStore'
|
||||||
import { themes, useThemeStore, type ThemeId } from './stores/themeStore'
|
import { themes, useThemeStore, type ThemeId } from './stores/themeStore'
|
||||||
@@ -24,26 +26,43 @@ import * as configService from './services/config'
|
|||||||
import { Download, X, Shield } from 'lucide-react'
|
import { Download, X, Shield } from 'lucide-react'
|
||||||
import './App.scss'
|
import './App.scss'
|
||||||
|
|
||||||
|
import UpdateDialog from './components/UpdateDialog'
|
||||||
|
import UpdateProgressCapsule from './components/UpdateProgressCapsule'
|
||||||
|
import LockScreen from './components/LockScreen'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
const { setDbConnected } = useAppStore()
|
const {
|
||||||
|
setDbConnected,
|
||||||
|
updateInfo,
|
||||||
|
setUpdateInfo,
|
||||||
|
isDownloading,
|
||||||
|
setIsDownloading,
|
||||||
|
downloadProgress,
|
||||||
|
setDownloadProgress,
|
||||||
|
showUpdateDialog,
|
||||||
|
setShowUpdateDialog,
|
||||||
|
setUpdateError
|
||||||
|
} = useAppStore()
|
||||||
|
|
||||||
const { currentTheme, themeMode, setTheme, setThemeMode } = useThemeStore()
|
const { currentTheme, themeMode, setTheme, setThemeMode } = useThemeStore()
|
||||||
const isAgreementWindow = location.pathname === '/agreement-window'
|
const isAgreementWindow = location.pathname === '/agreement-window'
|
||||||
const isOnboardingWindow = location.pathname === '/onboarding-window'
|
const isOnboardingWindow = location.pathname === '/onboarding-window'
|
||||||
const isVideoPlayerWindow = location.pathname === '/video-player-window'
|
const isVideoPlayerWindow = location.pathname === '/video-player-window'
|
||||||
|
const isChatHistoryWindow = location.pathname.startsWith('/chat-history/')
|
||||||
const [themeHydrated, setThemeHydrated] = useState(false)
|
const [themeHydrated, setThemeHydrated] = useState(false)
|
||||||
|
|
||||||
|
// 锁定状态
|
||||||
|
const [isLocked, setIsLocked] = useState(false)
|
||||||
|
const [lockAvatar, setLockAvatar] = useState<string | undefined>(undefined)
|
||||||
|
const [lockUseHello, setLockUseHello] = useState(false)
|
||||||
|
|
||||||
// 协议同意状态
|
// 协议同意状态
|
||||||
const [showAgreement, setShowAgreement] = useState(false)
|
const [showAgreement, setShowAgreement] = useState(false)
|
||||||
const [agreementChecked, setAgreementChecked] = useState(false)
|
const [agreementChecked, setAgreementChecked] = useState(false)
|
||||||
const [agreementLoading, setAgreementLoading] = useState(true)
|
const [agreementLoading, setAgreementLoading] = useState(true)
|
||||||
|
|
||||||
// 更新提示状态
|
|
||||||
const [updateInfo, setUpdateInfo] = useState<{ version: string; releaseNotes: string } | null>(null)
|
|
||||||
const [isDownloading, setIsDownloading] = useState(false)
|
|
||||||
const [downloadProgress, setDownloadProgress] = useState(0)
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const root = document.documentElement
|
const root = document.documentElement
|
||||||
const body = document.body
|
const body = document.body
|
||||||
@@ -148,8 +167,12 @@ function App() {
|
|||||||
|
|
||||||
// 监听启动时的更新通知
|
// 监听启动时的更新通知
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const removeUpdateListener = window.electronAPI.app.onUpdateAvailable?.((info) => {
|
const removeUpdateListener = window.electronAPI.app.onUpdateAvailable?.((info: any) => {
|
||||||
setUpdateInfo(info)
|
// 发现新版本时自动打开更新弹窗
|
||||||
|
if (info) {
|
||||||
|
setUpdateInfo({ ...info, hasUpdate: true })
|
||||||
|
setShowUpdateDialog(true)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
const removeProgressListener = window.electronAPI.app.onDownloadProgress?.((progress) => {
|
const removeProgressListener = window.electronAPI.app.onDownloadProgress?.((progress) => {
|
||||||
setDownloadProgress(progress)
|
setDownloadProgress(progress)
|
||||||
@@ -158,16 +181,20 @@ function App() {
|
|||||||
removeUpdateListener?.()
|
removeUpdateListener?.()
|
||||||
removeProgressListener?.()
|
removeProgressListener?.()
|
||||||
}
|
}
|
||||||
}, [])
|
}, [setUpdateInfo, setDownloadProgress, setShowUpdateDialog])
|
||||||
|
|
||||||
const handleUpdateNow = async () => {
|
const handleUpdateNow = async () => {
|
||||||
|
setShowUpdateDialog(false)
|
||||||
setIsDownloading(true)
|
setIsDownloading(true)
|
||||||
setDownloadProgress(0)
|
setDownloadProgress({ percent: 0 })
|
||||||
try {
|
try {
|
||||||
await window.electronAPI.app.downloadAndInstall()
|
await window.electronAPI.app.downloadAndInstall()
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
console.error('更新失败:', e)
|
console.error('更新失败:', e)
|
||||||
setIsDownloading(false)
|
setIsDownloading(false)
|
||||||
|
// Extract clean error message if possible
|
||||||
|
const errorMsg = e.message || String(e)
|
||||||
|
setUpdateError(errorMsg.includes('暂时禁用') ? '自动更新已暂时禁用' : errorMsg)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -231,6 +258,34 @@ function App() {
|
|||||||
autoConnect()
|
autoConnect()
|
||||||
}, [isAgreementWindow, isOnboardingWindow, navigate, setDbConnected])
|
}, [isAgreementWindow, isOnboardingWindow, navigate, setDbConnected])
|
||||||
|
|
||||||
|
// 检查应用锁
|
||||||
|
useEffect(() => {
|
||||||
|
if (isAgreementWindow || isOnboardingWindow || isVideoPlayerWindow) return
|
||||||
|
|
||||||
|
const checkLock = async () => {
|
||||||
|
// 并行获取配置,减少等待
|
||||||
|
const [enabled, useHello] = await Promise.all([
|
||||||
|
configService.getAuthEnabled(),
|
||||||
|
configService.getAuthUseHello()
|
||||||
|
])
|
||||||
|
|
||||||
|
if (enabled) {
|
||||||
|
setLockUseHello(useHello)
|
||||||
|
setIsLocked(true)
|
||||||
|
// 尝试获取头像
|
||||||
|
try {
|
||||||
|
const result = await window.electronAPI.chat.getMyAvatarUrl()
|
||||||
|
if (result && result.success && result.avatarUrl) {
|
||||||
|
setLockAvatar(result.avatarUrl)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('获取锁屏头像失败', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
checkLock()
|
||||||
|
}, [isAgreementWindow, isOnboardingWindow, isVideoPlayerWindow])
|
||||||
|
|
||||||
// 独立协议窗口
|
// 独立协议窗口
|
||||||
if (isAgreementWindow) {
|
if (isAgreementWindow) {
|
||||||
return <AgreementPage />
|
return <AgreementPage />
|
||||||
@@ -245,11 +300,26 @@ function App() {
|
|||||||
return <VideoWindow />
|
return <VideoWindow />
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 独立聊天记录窗口
|
||||||
|
if (isChatHistoryWindow) {
|
||||||
|
return <ChatHistoryPage />
|
||||||
|
}
|
||||||
|
|
||||||
// 主窗口 - 完整布局
|
// 主窗口 - 完整布局
|
||||||
return (
|
return (
|
||||||
<div className="app-container">
|
<div className="app-container">
|
||||||
|
{isLocked && (
|
||||||
|
<LockScreen
|
||||||
|
onUnlock={() => setIsLocked(false)}
|
||||||
|
avatar={lockAvatar}
|
||||||
|
useHello={lockUseHello}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<TitleBar />
|
<TitleBar />
|
||||||
|
|
||||||
|
{/* 全局悬浮进度胶囊 (处理:新版本提示、下载进度、错误提示) */}
|
||||||
|
<UpdateProgressCapsule />
|
||||||
|
|
||||||
{/* 用户协议弹窗 */}
|
{/* 用户协议弹窗 */}
|
||||||
{showAgreement && !agreementLoading && (
|
{showAgreement && !agreementLoading && (
|
||||||
<div className="agreement-overlay">
|
<div className="agreement-overlay">
|
||||||
@@ -271,13 +341,13 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="agreement-text">
|
<div className="agreement-text">
|
||||||
<h4>1. 数据安全</h4>
|
<h4>1. 数据安全</h4>
|
||||||
<p>本软件所有数据处理均在本地完成,不会上传任何聊天记录、个人信息到服务器。您的数据完全由您自己掌控。</p>
|
<p>本软件所有数据处理均在本地完成,不会上传任何聊天记录、个人信息到服务器。你的数据完全由你自己掌控。</p>
|
||||||
|
|
||||||
<h4>2. 使用须知</h4>
|
<h4>2. 使用须知</h4>
|
||||||
<p>本软件仅供个人学习研究使用,请勿用于任何非法用途。使用本软件解密、查看、分析的数据应为您本人所有或已获得授权。</p>
|
<p>本软件仅供个人学习研究使用,请勿用于任何非法用途。使用本软件解密、查看、分析的数据应为你本人所有或已获得授权。</p>
|
||||||
|
|
||||||
<h4>3. 免责声明</h4>
|
<h4>3. 免责声明</h4>
|
||||||
<p>因使用本软件产生的任何直接或间接损失,开发者不承担任何责任。请确保您的使用行为符合当地法律法规。</p>
|
<p>因使用本软件产生的任何直接或间接损失,开发者不承担任何责任。请确保你的使用行为符合当地法律法规。</p>
|
||||||
|
|
||||||
<h4>4. 隐私保护</h4>
|
<h4>4. 隐私保护</h4>
|
||||||
<p>本软件不收集任何用户数据。软件更新检测仅获取版本信息,不涉及任何个人隐私。</p>
|
<p>本软件不收集任何用户数据。软件更新检测仅获取版本信息,不涉及任何个人隐私。</p>
|
||||||
@@ -301,31 +371,15 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 更新提示条 */}
|
{/* 更新提示对话框 */}
|
||||||
{updateInfo && (
|
<UpdateDialog
|
||||||
<div className="update-banner">
|
open={showUpdateDialog}
|
||||||
<span className="update-text">
|
updateInfo={updateInfo}
|
||||||
发现新版本 <strong>v{updateInfo.version}</strong>
|
onClose={() => setShowUpdateDialog(false)}
|
||||||
</span>
|
onUpdate={handleUpdateNow}
|
||||||
{isDownloading ? (
|
isDownloading={isDownloading}
|
||||||
<div className="update-progress">
|
progress={downloadProgress}
|
||||||
<div className="progress-bar">
|
/>
|
||||||
<div className="progress-fill" style={{ width: `${downloadProgress}%` }} />
|
|
||||||
</div>
|
|
||||||
<span>{downloadProgress.toFixed(0)}%</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<button className="update-btn" onClick={handleUpdateNow}>
|
|
||||||
<Download size={14} /> 立即更新
|
|
||||||
</button>
|
|
||||||
<button className="dismiss-btn" onClick={dismissUpdate}>
|
|
||||||
<X size={14} />
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="main-layout">
|
<div className="main-layout">
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
@@ -344,6 +398,8 @@ function App() {
|
|||||||
<Route path="/settings" element={<SettingsPage />} />
|
<Route path="/settings" element={<SettingsPage />} />
|
||||||
<Route path="/export" element={<ExportPage />} />
|
<Route path="/export" element={<ExportPage />} />
|
||||||
<Route path="/sns" element={<SnsPage />} />
|
<Route path="/sns" element={<SnsPage />} />
|
||||||
|
<Route path="/contacts" element={<ContactsPage />} />
|
||||||
|
<Route path="/chat-history/:sessionId/:messageId" element={<ChatHistoryPage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</RouteGuard>
|
</RouteGuard>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
29
src/components/LivePhotoIcon.tsx
Normal file
29
src/components/LivePhotoIcon.tsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface LivePhotoIconProps {
|
||||||
|
size?: number | string;
|
||||||
|
className?: string;
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LivePhotoIcon: React.FC<LivePhotoIconProps> = ({ size = 24, className = '', style = {} }) => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width={size}
|
||||||
|
height={size}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className={className}
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
|
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<g stroke="currentColor" strokeWidth="2">
|
||||||
|
<circle fill="currentColor" stroke="none" cx="12" cy="12" r="2.5"></circle>
|
||||||
|
<circle cx="12" cy="12" r="5.5"></circle>
|
||||||
|
<circle cx="12" cy="12" r="9" strokeDasharray="1 3.7"></circle>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
185
src/components/LockScreen.scss
Normal file
185
src/components/LockScreen.scss
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
.lock-screen {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-app-region: drag;
|
||||||
|
transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
backdrop-filter: blur(25px) saturate(180%);
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
// 让背景带一点透明度以增强毛玻璃效果
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
&.unlocked {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
backdrop-filter: blur(0) saturate(100%);
|
||||||
|
transform: scale(1.02);
|
||||||
|
|
||||||
|
.lock-content {
|
||||||
|
transform: translateY(-20px) scale(0.95);
|
||||||
|
filter: blur(10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 320px;
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
|
||||||
|
.lock-avatar {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 4px solid var(--bg-total);
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-form {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
padding: 0 16px;
|
||||||
|
padding-right: 48px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
background-color: var(--bg-input);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 16px;
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
box-shadow: 0 0 0 2px var(--primary-color-alpha);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
top: 8px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: none;
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hello-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--bg-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.loading {
|
||||||
|
opacity: 0.7;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-error {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-size: 14px;
|
||||||
|
animation: shake 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
10%,
|
||||||
|
30%,
|
||||||
|
50%,
|
||||||
|
70%,
|
||||||
|
90% {
|
||||||
|
transform: translateX(-4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
20%,
|
||||||
|
40%,
|
||||||
|
60%,
|
||||||
|
80% {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
212
src/components/LockScreen.tsx
Normal file
212
src/components/LockScreen.tsx
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
import { useState, useEffect, useRef } from 'react'
|
||||||
|
import * as configService from '../services/config'
|
||||||
|
import { ArrowRight, Fingerprint, Lock, ShieldCheck } from 'lucide-react'
|
||||||
|
import './LockScreen.scss'
|
||||||
|
|
||||||
|
interface LockScreenProps {
|
||||||
|
onUnlock: () => void
|
||||||
|
avatar?: string
|
||||||
|
useHello?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
async function sha256(message: string) {
|
||||||
|
const msgBuffer = new TextEncoder().encode(message)
|
||||||
|
const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer)
|
||||||
|
const hashArray = Array.from(new Uint8Array(hashBuffer))
|
||||||
|
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
|
||||||
|
return hashHex
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LockScreen({ onUnlock, avatar, useHello = false }: LockScreenProps) {
|
||||||
|
const [password, setPassword] = useState('')
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
const [isVerifying, setIsVerifying] = useState(false)
|
||||||
|
const [isUnlocked, setIsUnlocked] = useState(false)
|
||||||
|
const [showHello, setShowHello] = useState(false)
|
||||||
|
const [helloAvailable, setHelloAvailable] = useState(false)
|
||||||
|
|
||||||
|
// 用于取消 WebAuthn 请求
|
||||||
|
const abortControllerRef = useRef<AbortController | null>(null)
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// 快速检查配置并启动
|
||||||
|
quickStartHello()
|
||||||
|
inputRef.current?.focus()
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
// 组件卸载时取消请求
|
||||||
|
abortControllerRef.current?.abort()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleUnlock = () => {
|
||||||
|
setIsUnlocked(true)
|
||||||
|
setTimeout(() => {
|
||||||
|
onUnlock()
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
|
||||||
|
const quickStartHello = async () => {
|
||||||
|
try {
|
||||||
|
// 如果父组件已经告诉我们要用 Hello,直接开始,不等待 IPC
|
||||||
|
let shouldUseHello = useHello
|
||||||
|
|
||||||
|
// 为了稳健,如果 prop 没传(虽然现在都传了),再 check 一次 config
|
||||||
|
if (!shouldUseHello) {
|
||||||
|
shouldUseHello = await configService.getAuthUseHello()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shouldUseHello) {
|
||||||
|
// 标记为可用,显示按钮
|
||||||
|
setHelloAvailable(true)
|
||||||
|
setShowHello(true)
|
||||||
|
// 立即执行验证 (0延迟)
|
||||||
|
verifyHello()
|
||||||
|
|
||||||
|
// 后台再次确认可用性,如果其实不可用,再隐藏?
|
||||||
|
// 或者信任用户的配置。为了速度,我们优先信任配置。
|
||||||
|
if (window.PublicKeyCredential) {
|
||||||
|
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
|
||||||
|
.then(available => {
|
||||||
|
if (!available) {
|
||||||
|
// 如果系统报告不支持,但配置开了,我们可能需要提示?
|
||||||
|
// 暂时保持开启状态,反正 verifyHello 会报错
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Quick start hello failed', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const verifyHello = async () => {
|
||||||
|
if (isVerifying || isUnlocked) return
|
||||||
|
|
||||||
|
// 取消之前的请求(如果有)
|
||||||
|
if (abortControllerRef.current) {
|
||||||
|
abortControllerRef.current.abort()
|
||||||
|
}
|
||||||
|
|
||||||
|
const abortController = new AbortController()
|
||||||
|
abortControllerRef.current = abortController
|
||||||
|
|
||||||
|
setIsVerifying(true)
|
||||||
|
setError('')
|
||||||
|
try {
|
||||||
|
const challenge = new Uint8Array(32)
|
||||||
|
window.crypto.getRandomValues(challenge)
|
||||||
|
|
||||||
|
const rpId = 'localhost'
|
||||||
|
const credential = await navigator.credentials.get({
|
||||||
|
publicKey: {
|
||||||
|
challenge,
|
||||||
|
rpId,
|
||||||
|
userVerification: 'required',
|
||||||
|
},
|
||||||
|
signal: abortController.signal
|
||||||
|
})
|
||||||
|
|
||||||
|
if (credential) {
|
||||||
|
handleUnlock()
|
||||||
|
}
|
||||||
|
} catch (e: any) {
|
||||||
|
if (e.name === 'AbortError') {
|
||||||
|
console.log('Hello verification aborted')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (e.name === 'NotAllowedError') {
|
||||||
|
console.log('User cancelled Hello verification')
|
||||||
|
} else {
|
||||||
|
console.error('Hello verification error:', e)
|
||||||
|
// 仅在非手动取消时显示错误
|
||||||
|
if (e.name !== 'AbortError') {
|
||||||
|
setError(`验证失败: ${e.message || e.name}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!abortController.signal.aborted) {
|
||||||
|
setIsVerifying(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlePasswordSubmit = async (e?: React.FormEvent) => {
|
||||||
|
e?.preventDefault()
|
||||||
|
if (!password || isUnlocked) return
|
||||||
|
|
||||||
|
// 如果正在进行 Hello 验证,取消它
|
||||||
|
if (abortControllerRef.current) {
|
||||||
|
abortControllerRef.current.abort()
|
||||||
|
abortControllerRef.current = null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 不再检查 isVerifying,因为我们允许打断 Hello
|
||||||
|
setIsVerifying(true)
|
||||||
|
setError('')
|
||||||
|
|
||||||
|
try {
|
||||||
|
const storedHash = await configService.getAuthPassword()
|
||||||
|
const inputHash = await sha256(password)
|
||||||
|
|
||||||
|
if (inputHash === storedHash) {
|
||||||
|
handleUnlock()
|
||||||
|
} else {
|
||||||
|
setError('密码错误')
|
||||||
|
setPassword('')
|
||||||
|
setIsVerifying(false)
|
||||||
|
// 如果密码错误,是否重新触发 Hello?
|
||||||
|
// 用户可能想重试密码,暂时不自动触发
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setError('验证失败')
|
||||||
|
setIsVerifying(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`lock-screen ${isUnlocked ? 'unlocked' : ''}`}>
|
||||||
|
<div className="lock-content">
|
||||||
|
<div className="lock-avatar">
|
||||||
|
{avatar ? (
|
||||||
|
<img src={avatar} alt="User" style={{ width: '100%', height: '100%', borderRadius: '50%' }} />
|
||||||
|
) : (
|
||||||
|
<Lock size={40} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="lock-title">WeFlow 已锁定</h2>
|
||||||
|
|
||||||
|
<form className="lock-form" onSubmit={handlePasswordSubmit}>
|
||||||
|
<div className="input-group">
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
type="password"
|
||||||
|
placeholder="输入应用密码"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
// 移除 disabled,允许用户随时输入
|
||||||
|
/>
|
||||||
|
<button type="submit" className="submit-btn" disabled={!password}>
|
||||||
|
<ArrowRight size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showHello && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`hello-btn ${isVerifying ? 'loading' : ''}`}
|
||||||
|
onClick={verifyHello}
|
||||||
|
>
|
||||||
|
<Fingerprint size={20} />
|
||||||
|
{isVerifying ? '验证中...' : '使用 Windows Hello 解锁'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{error && <div className="lock-error">{error}</div>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { NavLink, useLocation } from 'react-router-dom'
|
import { NavLink, useLocation } from 'react-router-dom'
|
||||||
import { Home, MessageSquare, BarChart3, Users, FileText, Database, Settings, ChevronLeft, ChevronRight, Download, Bot, Aperture } from 'lucide-react'
|
import { Home, MessageSquare, BarChart3, Users, FileText, Database, Settings, ChevronLeft, ChevronRight, Download, Bot, Aperture, UserCircle } from 'lucide-react'
|
||||||
import './Sidebar.scss'
|
import './Sidebar.scss'
|
||||||
|
|
||||||
function Sidebar() {
|
function Sidebar() {
|
||||||
@@ -44,7 +44,15 @@ function Sidebar() {
|
|||||||
<span className="nav-label">朋友圈</span>
|
<span className="nav-label">朋友圈</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|
||||||
|
{/* 通讯录 */}
|
||||||
|
<NavLink
|
||||||
|
to="/contacts"
|
||||||
|
className={`nav-item ${isActive('/contacts') ? 'active' : ''}`}
|
||||||
|
title={collapsed ? '通讯录' : undefined}
|
||||||
|
>
|
||||||
|
<span className="nav-icon"><UserCircle size={20} /></span>
|
||||||
|
<span className="nav-label">通讯录</span>
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
{/* 私聊分析 */}
|
{/* 私聊分析 */}
|
||||||
<NavLink
|
<NavLink
|
||||||
|
|||||||
@@ -1,10 +1,14 @@
|
|||||||
import './TitleBar.scss'
|
import './TitleBar.scss'
|
||||||
|
|
||||||
function TitleBar() {
|
interface TitleBarProps {
|
||||||
|
title?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
function TitleBar({ title }: TitleBarProps = {}) {
|
||||||
return (
|
return (
|
||||||
<div className="title-bar">
|
<div className="title-bar">
|
||||||
<img src="./logo.png" alt="WeFlow" className="title-logo" />
|
<img src="./logo.png" alt="WeFlow" className="title-logo" />
|
||||||
<span className="titles">WeFlow</span>
|
<span className="titles">{title || 'WeFlow'}</span>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
251
src/components/UpdateDialog.scss
Normal file
251
src/components/UpdateDialog.scss
Normal file
@@ -0,0 +1,251 @@
|
|||||||
|
.update-dialog-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 9999;
|
||||||
|
animation: fadeIn 0.3s ease-out;
|
||||||
|
|
||||||
|
.update-dialog {
|
||||||
|
width: 680px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 24px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
animation: slideUp 0.3s ease-out;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
/* Top Section (White/Gradient) */
|
||||||
|
.dialog-header {
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 40px 20px 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
/* Subtle radial gradient effect in top left as seen in image */
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50px;
|
||||||
|
left: -50px;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: radial-gradient(circle, rgba(255, 235, 220, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
|
||||||
|
opacity: 0.8;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-tag {
|
||||||
|
background: #f0eee9;
|
||||||
|
color: #8c7b6e;
|
||||||
|
padding: 4px 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #333333;
|
||||||
|
margin: 0 0 12px;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #999999;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content Section (Light Gray) */
|
||||||
|
.dialog-content {
|
||||||
|
background: #f2f2f2;
|
||||||
|
padding: 24px 40px 40px;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.update-notes-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 20px 0;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
.icon-box {
|
||||||
|
background: #fbfbfb; // Beige-ish white
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 20px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #8c7b6e;
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-box {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #333333;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 8px 0 0 18px;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-section {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
.progress-info-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #888;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-bg {
|
||||||
|
height: 6px;
|
||||||
|
background: #e0e0e0;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: #000000;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.btn-update {
|
||||||
|
background: #000000;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
padding: 16px 48px;
|
||||||
|
border-radius: 20px; // Pill shape
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.7;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
border: none;
|
||||||
|
color: #999;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
color: #333;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
transform: translateY(20px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
132
src/components/UpdateDialog.tsx
Normal file
132
src/components/UpdateDialog.tsx
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
import React, { useEffect, useState } from 'react'
|
||||||
|
import { Quote, X } from 'lucide-react'
|
||||||
|
import './UpdateDialog.scss'
|
||||||
|
|
||||||
|
interface UpdateInfo {
|
||||||
|
version?: string
|
||||||
|
releaseNotes?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UpdateDialogProps {
|
||||||
|
open: boolean
|
||||||
|
updateInfo: UpdateInfo | null
|
||||||
|
onClose: () => void
|
||||||
|
onUpdate: () => void
|
||||||
|
isDownloading: boolean
|
||||||
|
progress: number | {
|
||||||
|
percent: number
|
||||||
|
bytesPerSecond?: number
|
||||||
|
transferred?: number
|
||||||
|
total?: number
|
||||||
|
remaining?: number // seconds
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const UpdateDialog: React.FC<UpdateDialogProps> = ({
|
||||||
|
open,
|
||||||
|
updateInfo,
|
||||||
|
onClose,
|
||||||
|
onUpdate,
|
||||||
|
isDownloading,
|
||||||
|
progress
|
||||||
|
}) => {
|
||||||
|
if (!open || !updateInfo) return null
|
||||||
|
|
||||||
|
// Safe normalize progress
|
||||||
|
const safeProgress = typeof progress === 'number' ? { percent: progress } : (progress || { percent: 0 })
|
||||||
|
const percent = safeProgress.percent || 0
|
||||||
|
const bytesPerSecond = safeProgress.bytesPerSecond
|
||||||
|
const total = safeProgress.total
|
||||||
|
const transferred = safeProgress.transferred
|
||||||
|
const remaining = safeProgress.remaining
|
||||||
|
|
||||||
|
// Format bytes
|
||||||
|
const formatBytes = (bytes: number) => {
|
||||||
|
if (!Number.isFinite(bytes) || bytes === 0) return '0 B'
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
const unitIndex = Math.max(0, Math.min(i, sizes.length - 1))
|
||||||
|
return parseFloat((bytes / Math.pow(k, unitIndex)).toFixed(1)) + ' ' + sizes[unitIndex]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format speed
|
||||||
|
const formatSpeed = (bytesPerSecond: number) => {
|
||||||
|
return `${formatBytes(bytesPerSecond)}/s`
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format time
|
||||||
|
const formatTime = (seconds: number) => {
|
||||||
|
if (!Number.isFinite(seconds)) return '计算中...'
|
||||||
|
if (seconds < 60) return `${Math.ceil(seconds)} 秒`
|
||||||
|
const minutes = Math.floor(seconds / 60)
|
||||||
|
const remainingSeconds = Math.ceil(seconds % 60)
|
||||||
|
return `${minutes} 分 ${remainingSeconds} 秒`
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="update-dialog-overlay">
|
||||||
|
<div className="update-dialog">
|
||||||
|
{!isDownloading && (
|
||||||
|
<button className="close-btn" onClick={onClose}>
|
||||||
|
<X size={20} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="dialog-header">
|
||||||
|
<div className="version-tag">
|
||||||
|
新版本 {updateInfo.version}
|
||||||
|
</div>
|
||||||
|
<h2>欢迎体验全新的 WeFlow</h2>
|
||||||
|
<div className="subtitle">我们带来了一些改进</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="dialog-content">
|
||||||
|
<div className="update-notes-container">
|
||||||
|
<div className="icon-box">
|
||||||
|
<Quote size={20} />
|
||||||
|
</div>
|
||||||
|
<div className="text-box">
|
||||||
|
<h3>优化</h3>
|
||||||
|
{updateInfo.releaseNotes ? (
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: updateInfo.releaseNotes }} />
|
||||||
|
) : (
|
||||||
|
<p>修复了一些已知问题,提升了稳定性。</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isDownloading ? (
|
||||||
|
<div className="progress-section">
|
||||||
|
<div className="progress-info-row">
|
||||||
|
<span>{bytesPerSecond ? formatSpeed(bytesPerSecond) : '下载中...'}</span>
|
||||||
|
<span>{total ? `${formatBytes(transferred || 0)} / ${formatBytes(total)}` : `${percent.toFixed(1)}%`}</span>
|
||||||
|
{remaining !== undefined && <span>剩余 {formatTime(remaining)}</span>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="progress-bar-bg">
|
||||||
|
<div
|
||||||
|
className="progress-bar-fill"
|
||||||
|
style={{ width: `${percent}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fallback status text if detailed info is missing */}
|
||||||
|
{(!bytesPerSecond && !total) && (
|
||||||
|
<div className="status-text">{percent.toFixed(0)}% 已下载</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="actions">
|
||||||
|
<button className="btn-update" onClick={onUpdate}>
|
||||||
|
开启新旅程
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UpdateDialog
|
||||||
192
src/components/UpdateProgressCapsule.scss
Normal file
192
src/components/UpdateProgressCapsule.scss
Normal file
@@ -0,0 +1,192 @@
|
|||||||
|
.update-progress-capsule {
|
||||||
|
position: fixed;
|
||||||
|
top: 38px; // Just below title bar
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 9998;
|
||||||
|
cursor: pointer;
|
||||||
|
animation: capsuleSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.capsule-content {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.capsule-content {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
padding: 8px 18px;
|
||||||
|
border-radius: 24px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
height: 40px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
.download-icon {
|
||||||
|
animation: capsulePulse 2s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 10px;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.percent-text {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speed-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-weight: 500;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-text {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.available-text {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bg {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 3px;
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--primary);
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.capsule-close {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 4px;
|
||||||
|
margin-left: -4px;
|
||||||
|
margin-right: -8px;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// State Modifiers
|
||||||
|
&.state-available {
|
||||||
|
.capsule-content {
|
||||||
|
background: var(--primary);
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-wrapper {
|
||||||
|
.available-text {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.capsule-close {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.state-downloading {
|
||||||
|
.capsule-content {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.state-error {
|
||||||
|
.capsule-content {
|
||||||
|
background: #fff1f0;
|
||||||
|
border-color: #ffa39e;
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-wrapper .error-text {
|
||||||
|
color: #cf1322;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capsule-close {
|
||||||
|
color: #cf1322;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes capsuleSlideDown {
|
||||||
|
from {
|
||||||
|
transform: translate(-50%, -40px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes capsulePulse {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateY(2px);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
118
src/components/UpdateProgressCapsule.tsx
Normal file
118
src/components/UpdateProgressCapsule.tsx
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { useAppStore } from '../stores/appStore'
|
||||||
|
import { Download, X, AlertCircle, Info } from 'lucide-react'
|
||||||
|
import './UpdateProgressCapsule.scss'
|
||||||
|
|
||||||
|
const UpdateProgressCapsule: React.FC = () => {
|
||||||
|
const {
|
||||||
|
isDownloading,
|
||||||
|
downloadProgress,
|
||||||
|
showUpdateDialog,
|
||||||
|
setShowUpdateDialog,
|
||||||
|
updateInfo,
|
||||||
|
setUpdateInfo,
|
||||||
|
updateError,
|
||||||
|
setUpdateError
|
||||||
|
} = useAppStore()
|
||||||
|
|
||||||
|
// Control visibility
|
||||||
|
// If dialog is open, we usually hide the capsule UNLESS we want it as a mini-indicator
|
||||||
|
// For now, let's hide it if the dialog is open
|
||||||
|
if (showUpdateDialog) return null
|
||||||
|
|
||||||
|
// State mapping
|
||||||
|
const hasError = !!updateError
|
||||||
|
const hasUpdate = !!updateInfo && updateInfo.hasUpdate
|
||||||
|
|
||||||
|
if (!hasError && !isDownloading && !hasUpdate) return null
|
||||||
|
|
||||||
|
// Safe normalize progress
|
||||||
|
const safeProgress = typeof downloadProgress === 'number' ? { percent: downloadProgress } : (downloadProgress || { percent: 0 })
|
||||||
|
const percent = safeProgress.percent || 0
|
||||||
|
const bytesPerSecond = safeProgress.bytesPerSecond
|
||||||
|
|
||||||
|
const formatBytes = (bytes: number) => {
|
||||||
|
if (!Number.isFinite(bytes) || bytes === 0) return '0 B'
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
const unitIndex = Math.max(0, Math.min(i, sizes.length - 1))
|
||||||
|
return parseFloat((bytes / Math.pow(k, unitIndex)).toFixed(1)) + ' ' + sizes[unitIndex]
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatSpeed = (bps: number) => {
|
||||||
|
return `${formatBytes(bps)}/s`
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClose = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
if (hasError) {
|
||||||
|
setUpdateError(null)
|
||||||
|
} else if (hasUpdate && !isDownloading) {
|
||||||
|
setUpdateInfo(null)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Determine appearance class and content
|
||||||
|
let capsuleClass = 'update-progress-capsule'
|
||||||
|
let content = null
|
||||||
|
|
||||||
|
if (hasError) {
|
||||||
|
capsuleClass += ' state-error'
|
||||||
|
content = (
|
||||||
|
<>
|
||||||
|
<div className="icon-wrapper">
|
||||||
|
<AlertCircle size={14} />
|
||||||
|
</div>
|
||||||
|
<div className="info-wrapper">
|
||||||
|
<span className="error-text">更新失败: {updateError}</span>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
} else if (isDownloading) {
|
||||||
|
capsuleClass += ' state-downloading'
|
||||||
|
content = (
|
||||||
|
<>
|
||||||
|
<div className="icon-wrapper">
|
||||||
|
<Download size={14} className="download-icon" />
|
||||||
|
</div>
|
||||||
|
<div className="info-wrapper">
|
||||||
|
<span className="percent-text">{percent.toFixed(0)}%</span>
|
||||||
|
{bytesPerSecond > 0 && (
|
||||||
|
<span className="speed-text">{formatSpeed(bytesPerSecond)}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="progress-bg">
|
||||||
|
<div className="progress-fill" style={{ width: `${percent}%` }} />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
} else if (hasUpdate) {
|
||||||
|
capsuleClass += ' state-available'
|
||||||
|
content = (
|
||||||
|
<>
|
||||||
|
<div className="icon-wrapper">
|
||||||
|
<Info size={14} />
|
||||||
|
</div>
|
||||||
|
<div className="info-wrapper">
|
||||||
|
<span className="available-text">发现新版本 v{updateInfo?.version}</span>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={capsuleClass} onClick={() => setShowUpdateDialog(true)}>
|
||||||
|
<div className="capsule-content">
|
||||||
|
{content}
|
||||||
|
{!isDownloading && (
|
||||||
|
<button className="capsule-close" onClick={handleClose}>
|
||||||
|
<X size={12} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UpdateProgressCapsule
|
||||||
@@ -11,7 +11,7 @@ function AgreementPage() {
|
|||||||
<h2>用户协议</h2>
|
<h2>用户协议</h2>
|
||||||
|
|
||||||
<h3>一、总则</h3>
|
<h3>一、总则</h3>
|
||||||
<p>欢迎使用WeFlow(WeFlow)软件。请在使用本软件前仔细阅读本协议。一旦您开始使用本软件,即表示您已充分理解并同意本协议的全部内容。</p>
|
<p>欢迎使用WeFlow(WeFlow)软件。请在使用本软件前仔细阅读本协议。一旦你开始使用本软件,即表示你已充分理解并同意本协议的全部内容。</p>
|
||||||
|
|
||||||
<h3>二、软件说明</h3>
|
<h3>二、软件说明</h3>
|
||||||
<p>WeFlow是一款本地化的微信聊天记录查看与分析工具,所有数据处理均在用户本地设备上完成。</p>
|
<p>WeFlow是一款本地化的微信聊天记录查看与分析工具,所有数据处理均在用户本地设备上完成。</p>
|
||||||
@@ -35,7 +35,7 @@ function AgreementPage() {
|
|||||||
<p>本软件不收集、不上传、不存储任何用户个人信息或聊天数据。所有数据处理均在本地完成。</p>
|
<p>本软件不收集、不上传、不存储任何用户个人信息或聊天数据。所有数据处理均在本地完成。</p>
|
||||||
|
|
||||||
<h3>二、数据安全</h3>
|
<h3>二、数据安全</h3>
|
||||||
<p>您的聊天记录和个人数据完全存储在您的本地设备上,本软件不会将任何数据传输至外部服务器。</p>
|
<p>你的聊天记录和个人数据完全存储在你的本地设备上,本软件不会将任何数据传输至外部服务器。</p>
|
||||||
|
|
||||||
<h3>三、网络请求</h3>
|
<h3>三、网络请求</h3>
|
||||||
<p>本软件仅在检查更新时会访问更新服务器获取版本信息,不涉及任何用户数据的传输。</p>
|
<p>本软件仅在检查更新时会访问更新服务器获取版本信息,不涉及任何用户数据的传输。</p>
|
||||||
|
|||||||
@@ -34,8 +34,8 @@ function AnalyticsWelcomePage() {
|
|||||||
</div>
|
</div>
|
||||||
<h1>私聊数据分析</h1>
|
<h1>私聊数据分析</h1>
|
||||||
<p>
|
<p>
|
||||||
WeFlow 可以分析您的聊天记录,生成详细的统计报表。<br />
|
WeFlow 可以分析你的聊天记录,生成详细的统计报表。<br />
|
||||||
您可以选择加载上次的分析结果(速度快),或者开始新的分析(数据最新)。
|
你可以选择加载上次的分析结果(速度快),或者开始新的分析(数据最新)。
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="action-cards">
|
<div className="action-cards">
|
||||||
|
|||||||
132
src/pages/ChatHistoryPage.scss
Normal file
132
src/pages/ChatHistoryPage.scss
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
.chat-history-page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
|
||||||
|
.history-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.status-msg {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.empty {
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
|
||||||
|
.sender {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-radius: 18px 18px 18px 4px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
max-width: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&.image-bubble {
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-content {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-primary);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-content {
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 300px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-tip {
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-placeholder {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
250
src/pages/ChatHistoryPage.tsx
Normal file
250
src/pages/ChatHistoryPage.tsx
Normal file
@@ -0,0 +1,250 @@
|
|||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { useParams, useLocation } from 'react-router-dom'
|
||||||
|
import { ChatRecordItem } from '../types/models'
|
||||||
|
import TitleBar from '../components/TitleBar'
|
||||||
|
import './ChatHistoryPage.scss'
|
||||||
|
|
||||||
|
export default function ChatHistoryPage() {
|
||||||
|
const params = useParams<{ sessionId: string; messageId: string }>()
|
||||||
|
const location = useLocation()
|
||||||
|
const [recordList, setRecordList] = useState<ChatRecordItem[]>([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [title, setTitle] = useState('聊天记录')
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
|
||||||
|
// 简单的 XML 标签内容提取
|
||||||
|
const extractXmlValue = (xml: string, tag: string): string => {
|
||||||
|
const match = new RegExp(`<${tag}>([\\s\\S]*?)<\\/${tag}>`).exec(xml)
|
||||||
|
return match ? match[1] : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// 简单的 HTML 实体解码
|
||||||
|
const decodeHtmlEntities = (text?: string): string | undefined => {
|
||||||
|
if (!text) return text
|
||||||
|
return text
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, "'")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 前端兜底解析合并转发聊天记录
|
||||||
|
const parseChatHistory = (content: string): ChatRecordItem[] | undefined => {
|
||||||
|
try {
|
||||||
|
const type = extractXmlValue(content, 'type')
|
||||||
|
if (type !== '19') return undefined
|
||||||
|
|
||||||
|
const match = /<recorditem>[\s\S]*?<!\[CDATA\[([\s\S]*?)\]\]>[\s\S]*?<\/recorditem>/.exec(content)
|
||||||
|
if (!match) return undefined
|
||||||
|
|
||||||
|
const innerXml = match[1]
|
||||||
|
const items: ChatRecordItem[] = []
|
||||||
|
const itemRegex = /<dataitem\s+(.*?)>([\s\S]*?)<\/dataitem>/g
|
||||||
|
let itemMatch: RegExpExecArray | null
|
||||||
|
|
||||||
|
while ((itemMatch = itemRegex.exec(innerXml)) !== null) {
|
||||||
|
const attrs = itemMatch[1]
|
||||||
|
const body = itemMatch[2]
|
||||||
|
|
||||||
|
const datatypeMatch = /datatype="(\d+)"/.exec(attrs)
|
||||||
|
const datatype = datatypeMatch ? parseInt(datatypeMatch[1]) : 0
|
||||||
|
|
||||||
|
const sourcename = extractXmlValue(body, 'sourcename')
|
||||||
|
const sourcetime = extractXmlValue(body, 'sourcetime')
|
||||||
|
const sourceheadurl = extractXmlValue(body, 'sourceheadurl')
|
||||||
|
const datadesc = extractXmlValue(body, 'datadesc')
|
||||||
|
const datatitle = extractXmlValue(body, 'datatitle')
|
||||||
|
const fileext = extractXmlValue(body, 'fileext')
|
||||||
|
const datasize = parseInt(extractXmlValue(body, 'datasize') || '0')
|
||||||
|
const messageuuid = extractXmlValue(body, 'messageuuid')
|
||||||
|
|
||||||
|
const dataurl = extractXmlValue(body, 'dataurl')
|
||||||
|
const datathumburl = extractXmlValue(body, 'datathumburl') || extractXmlValue(body, 'thumburl')
|
||||||
|
const datacdnurl = extractXmlValue(body, 'datacdnurl') || extractXmlValue(body, 'cdnurl')
|
||||||
|
const aeskey = extractXmlValue(body, 'aeskey') || extractXmlValue(body, 'qaeskey')
|
||||||
|
const md5 = extractXmlValue(body, 'md5') || extractXmlValue(body, 'datamd5')
|
||||||
|
const imgheight = parseInt(extractXmlValue(body, 'imgheight') || '0')
|
||||||
|
const imgwidth = parseInt(extractXmlValue(body, 'imgwidth') || '0')
|
||||||
|
const duration = parseInt(extractXmlValue(body, 'duration') || '0')
|
||||||
|
|
||||||
|
items.push({
|
||||||
|
datatype,
|
||||||
|
sourcename,
|
||||||
|
sourcetime,
|
||||||
|
sourceheadurl,
|
||||||
|
datadesc: decodeHtmlEntities(datadesc),
|
||||||
|
datatitle: decodeHtmlEntities(datatitle),
|
||||||
|
fileext,
|
||||||
|
datasize,
|
||||||
|
messageuuid,
|
||||||
|
dataurl: decodeHtmlEntities(dataurl),
|
||||||
|
datathumburl: decodeHtmlEntities(datathumburl),
|
||||||
|
datacdnurl: decodeHtmlEntities(datacdnurl),
|
||||||
|
aeskey: decodeHtmlEntities(aeskey),
|
||||||
|
md5,
|
||||||
|
imgheight,
|
||||||
|
imgwidth,
|
||||||
|
duration
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return items.length > 0 ? items : undefined
|
||||||
|
} catch (e) {
|
||||||
|
console.error('前端解析聊天记录失败:', e)
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 统一从路由参数或 pathname 中解析 sessionId / messageId
|
||||||
|
const getIds = () => {
|
||||||
|
const sessionId = params.sessionId || ''
|
||||||
|
const messageId = params.messageId || ''
|
||||||
|
|
||||||
|
if (sessionId && messageId) {
|
||||||
|
return { sid: sessionId, mid: messageId }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 独立窗口场景下没有 Route 包裹,用 pathname 手动解析
|
||||||
|
const match = /^\/chat-history\/([^/]+)\/([^/]+)/.exec(location.pathname)
|
||||||
|
if (match) {
|
||||||
|
return { sid: match[1], mid: match[2] }
|
||||||
|
}
|
||||||
|
|
||||||
|
return { sid: '', mid: '' }
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
const { sid, mid } = getIds()
|
||||||
|
if (!sid || !mid) {
|
||||||
|
setError('无效的聊天记录链接')
|
||||||
|
setLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const result = await window.electronAPI.chat.getMessage(sid, parseInt(mid, 10))
|
||||||
|
if (result.success && result.message) {
|
||||||
|
const msg = result.message
|
||||||
|
// 优先使用后端解析好的列表
|
||||||
|
let records: ChatRecordItem[] | undefined = msg.chatRecordList
|
||||||
|
|
||||||
|
// 如果后端没有解析到,则在前端兜底解析一次
|
||||||
|
if ((!records || records.length === 0) && msg.content) {
|
||||||
|
records = parseChatHistory(msg.content) || []
|
||||||
|
}
|
||||||
|
|
||||||
|
if (records && records.length > 0) {
|
||||||
|
setRecordList(records)
|
||||||
|
const match = /<title>(.*?)<\/title>/.exec(msg.content || '')
|
||||||
|
if (match) setTitle(match[1])
|
||||||
|
} else {
|
||||||
|
setError('暂时无法解析这条聊天记录')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setError(result.error || '获取消息失败')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
setError('加载详情失败')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
loadData()
|
||||||
|
}, [params.sessionId, params.messageId, location.pathname])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="chat-history-page">
|
||||||
|
<TitleBar title={title} />
|
||||||
|
<div className="history-list">
|
||||||
|
{loading ? (
|
||||||
|
<div className="status-msg">加载中...</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="status-msg error">{error}</div>
|
||||||
|
) : recordList.length === 0 ? (
|
||||||
|
<div className="status-msg empty">暂无可显示的聊天记录</div>
|
||||||
|
) : (
|
||||||
|
recordList.map((item, i) => (
|
||||||
|
<HistoryItem key={i} item={item} />
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function HistoryItem({ item }: { item: ChatRecordItem }) {
|
||||||
|
// sourcetime 在合并转发里有两种格式:
|
||||||
|
// 1) 时间戳(秒) 2) 已格式化的字符串 "2026-01-21 09:56:46"
|
||||||
|
let time = ''
|
||||||
|
if (item.sourcetime) {
|
||||||
|
if (/^\d+$/.test(item.sourcetime)) {
|
||||||
|
time = new Date(parseInt(item.sourcetime, 10) * 1000).toLocaleString()
|
||||||
|
} else {
|
||||||
|
time = item.sourcetime
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderContent = () => {
|
||||||
|
if (item.datatype === 1) {
|
||||||
|
// 文本消息
|
||||||
|
return <div className="text-content">{item.datadesc || ''}</div>
|
||||||
|
}
|
||||||
|
if (item.datatype === 3) {
|
||||||
|
// 图片
|
||||||
|
const src = item.datathumburl || item.datacdnurl
|
||||||
|
if (src) {
|
||||||
|
return (
|
||||||
|
<div className="media-content">
|
||||||
|
<img
|
||||||
|
src={src}
|
||||||
|
alt="图片"
|
||||||
|
referrerPolicy="no-referrer"
|
||||||
|
onError={(e) => {
|
||||||
|
const target = e.target as HTMLImageElement
|
||||||
|
target.style.display = 'none'
|
||||||
|
const placeholder = document.createElement('div')
|
||||||
|
placeholder.className = 'media-tip'
|
||||||
|
placeholder.textContent = '图片无法加载'
|
||||||
|
target.parentElement?.appendChild(placeholder)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return <div className="media-placeholder">[图片]</div>
|
||||||
|
}
|
||||||
|
if (item.datatype === 43) {
|
||||||
|
return <div className="media-placeholder">[视频] {item.datatitle}</div>
|
||||||
|
}
|
||||||
|
if (item.datatype === 34) {
|
||||||
|
return <div className="media-placeholder">[语音] {item.duration ? (item.duration / 1000).toFixed(0) + '"' : ''}</div>
|
||||||
|
}
|
||||||
|
// Fallback
|
||||||
|
return <div className="text-content">{item.datadesc || item.datatitle || '[不支持的消息类型]'}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="history-item">
|
||||||
|
<div className="avatar">
|
||||||
|
{item.sourceheadurl ? (
|
||||||
|
<img src={item.sourceheadurl} alt="" referrerPolicy="no-referrer" />
|
||||||
|
) : (
|
||||||
|
<div className="avatar-placeholder">
|
||||||
|
{item.sourcename?.slice(0, 1)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="content-wrapper">
|
||||||
|
<div className="header">
|
||||||
|
<span className="sender">{item.sourcename || '未知发送者'}</span>
|
||||||
|
<span className="time">{time}</span>
|
||||||
|
</div>
|
||||||
|
<div className={`bubble ${item.datatype === 3 ? 'image-bubble' : ''}`}>
|
||||||
|
{renderContent()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -834,92 +834,93 @@
|
|||||||
|
|
||||||
// 链接卡片消息样式
|
// 链接卡片消息样式
|
||||||
.link-message {
|
.link-message {
|
||||||
cursor: pointer;
|
width: 280px;
|
||||||
background: var(--card-bg);
|
background: var(--card-bg);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid var(--border-color);
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
max-width: 300px;
|
border: 1px solid var(--border-color);
|
||||||
margin-top: 4px;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--bg-hover);
|
background: var(--bg-hover);
|
||||||
transform: translateY(-1px);
|
border-color: var(--primary);
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-header {
|
.link-header {
|
||||||
|
padding: 10px 12px 6px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
gap: 8px;
|
||||||
padding: 12px;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-content {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-title {
|
.link-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
margin-bottom: 4px;
|
line-height: 1.4;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
line-clamp: 2;
|
line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
line-height: 1.4;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-body {
|
||||||
|
padding: 6px 12px 10px;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
.link-desc {
|
.link-desc {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.4;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 3;
|
||||||
line-clamp: 2;
|
line-clamp: 3;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
line-height: 1.4;
|
flex: 1;
|
||||||
opacity: 0.8;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-icon {
|
.link-thumb {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 4px;
|
||||||
|
object-fit: cover;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background: var(--bg-tertiary);
|
background: var(--bg-tertiary);
|
||||||
border-radius: 6px;
|
}
|
||||||
|
|
||||||
|
.link-thumb-placeholder {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: var(--text-secondary);
|
flex-shrink: 0;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
opacity: 0.8;
|
opacity: 0.5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 适配发送出去的消息中的链接卡片
|
// 适配发送出去的消息中的链接卡片
|
||||||
.message-bubble.sent .link-message {
|
.message-bubble.sent .link-message {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: var(--card-bg);
|
||||||
border-color: rgba(255, 255, 255, 0.2);
|
border: 1px solid var(--border-color);
|
||||||
|
|
||||||
|
.link-title {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
.link-title,
|
|
||||||
.link-desc {
|
.link-desc {
|
||||||
color: #fff;
|
color: var(--text-secondary);
|
||||||
}
|
|
||||||
|
|
||||||
.link-icon {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2171,3 +2172,303 @@
|
|||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 名片消息
|
||||||
|
.card-message {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 8px;
|
||||||
|
min-width: 200px;
|
||||||
|
|
||||||
|
.card-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通话消息
|
||||||
|
.call-message {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文件消息
|
||||||
|
// 文件消息
|
||||||
|
.file-message {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 8px;
|
||||||
|
min-width: 220px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-meta {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 发送的文件消息样式
|
||||||
|
.message-bubble.sent .file-message {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-meta {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 聊天记录消息 - 复用 link-message 基础样式
|
||||||
|
.chat-record-message {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.link-header {
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-record-preview {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-record-meta-line {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-record-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
max-height: 70px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-record-item {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-name {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-record-more {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-record-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-record-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--primary-gradient);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 小程序消息
|
||||||
|
.miniapp-message {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 8px;
|
||||||
|
min-width: 200px;
|
||||||
|
|
||||||
|
.miniapp-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.miniapp-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.miniapp-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.miniapp-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 转账消息卡片
|
||||||
|
.transfer-message {
|
||||||
|
width: 240px;
|
||||||
|
background: linear-gradient(135deg, #f59e42 0%, #f5a742 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
|
&.received {
|
||||||
|
background: linear-gradient(135deg, #b8b8b8 0%, #a8a8a8 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.transfer-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.transfer-info {
|
||||||
|
flex: 1;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
.transfer-amount {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.transfer-memo {
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transfer-label {
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 发送消息中的特殊消息类型适配(除了文件和转账)
|
||||||
|
.message-bubble.sent {
|
||||||
|
.card-message,
|
||||||
|
.chat-record-message,
|
||||||
|
.miniapp-message {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
|
||||||
|
.card-name,
|
||||||
|
.miniapp-title,
|
||||||
|
.source-name {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-label,
|
||||||
|
.miniapp-label,
|
||||||
|
.chat-record-item,
|
||||||
|
.chat-record-meta-line,
|
||||||
|
.chat-record-desc {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon,
|
||||||
|
.miniapp-icon,
|
||||||
|
.chat-record-icon {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-record-more {
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-message {
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -22,6 +22,15 @@ function isSystemMessage(localType: number): boolean {
|
|||||||
return SYSTEM_MESSAGE_TYPES.includes(localType)
|
return SYSTEM_MESSAGE_TYPES.includes(localType)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 格式化文件大小
|
||||||
|
function formatFileSize(bytes: number): string {
|
||||||
|
if (bytes === 0) return '0 B'
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
|
||||||
|
}
|
||||||
|
|
||||||
interface ChatPageProps {
|
interface ChatPageProps {
|
||||||
// 保留接口以备将来扩展
|
// 保留接口以备将来扩展
|
||||||
}
|
}
|
||||||
@@ -1476,6 +1485,9 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
|
|||||||
const isImage = message.localType === 3
|
const isImage = message.localType === 3
|
||||||
const isVideo = message.localType === 43
|
const isVideo = message.localType === 43
|
||||||
const isVoice = message.localType === 34
|
const isVoice = message.localType === 34
|
||||||
|
const isCard = message.localType === 42
|
||||||
|
const isCall = message.localType === 50
|
||||||
|
const isType49 = message.localType === 49
|
||||||
const isSent = message.isSend === 1
|
const isSent = message.isSend === 1
|
||||||
const [senderAvatarUrl, setSenderAvatarUrl] = useState<string | undefined>(undefined)
|
const [senderAvatarUrl, setSenderAvatarUrl] = useState<string | undefined>(undefined)
|
||||||
const [senderName, setSenderName] = useState<string | undefined>(undefined)
|
const [senderName, setSenderName] = useState<string | undefined>(undefined)
|
||||||
@@ -2438,6 +2450,268 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 名片消息
|
||||||
|
if (isCard) {
|
||||||
|
const cardName = message.cardNickname || message.cardUsername || '未知联系人'
|
||||||
|
return (
|
||||||
|
<div className="card-message">
|
||||||
|
<div className="card-icon">
|
||||||
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||||
|
<circle cx="12" cy="7" r="4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="card-info">
|
||||||
|
<div className="card-name">{cardName}</div>
|
||||||
|
<div className="card-label">个人名片</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通话消息
|
||||||
|
if (isCall) {
|
||||||
|
return (
|
||||||
|
<div className="call-message">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
|
||||||
|
</svg>
|
||||||
|
<span>{message.parsedContent || '[通话]'}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 链接消息 (AppMessage)
|
||||||
|
const isAppMsg = message.rawContent?.includes('<appmsg') || (message.parsedContent && message.parsedContent.includes('<appmsg'))
|
||||||
|
|
||||||
|
if (isAppMsg) {
|
||||||
|
let title = '链接'
|
||||||
|
let desc = ''
|
||||||
|
let url = ''
|
||||||
|
let appMsgType = ''
|
||||||
|
|
||||||
|
try {
|
||||||
|
const content = message.rawContent || message.parsedContent || ''
|
||||||
|
// 简单清理 XML 前缀(如 wxid:)
|
||||||
|
const xmlContent = content.substring(content.indexOf('<msg>'))
|
||||||
|
|
||||||
|
const parser = new DOMParser()
|
||||||
|
const doc = parser.parseFromString(xmlContent, 'text/xml')
|
||||||
|
|
||||||
|
title = doc.querySelector('title')?.textContent || '链接'
|
||||||
|
desc = doc.querySelector('des')?.textContent || ''
|
||||||
|
url = doc.querySelector('url')?.textContent || ''
|
||||||
|
appMsgType = doc.querySelector('appmsg > type')?.textContent || doc.querySelector('type')?.textContent || ''
|
||||||
|
} catch (e) {
|
||||||
|
console.error('解析 AppMsg 失败:', e)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 聊天记录 (type=19)
|
||||||
|
if (appMsgType === '19') {
|
||||||
|
const recordList = message.chatRecordList || []
|
||||||
|
const displayTitle = title || '群聊的聊天记录'
|
||||||
|
const metaText =
|
||||||
|
recordList.length > 0
|
||||||
|
? `共 ${recordList.length} 条聊天记录`
|
||||||
|
: desc || '聊天记录'
|
||||||
|
|
||||||
|
const previewItems = recordList.slice(0, 4)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="link-message chat-record-message"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
// 打开聊天记录窗口
|
||||||
|
window.electronAPI.window.openChatHistoryWindow(session.username, message.localId)
|
||||||
|
}}
|
||||||
|
title="点击查看详细聊天记录"
|
||||||
|
>
|
||||||
|
<div className="link-header">
|
||||||
|
<div className="link-title" title={displayTitle}>
|
||||||
|
{displayTitle}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="link-body">
|
||||||
|
<div className="chat-record-preview">
|
||||||
|
{previewItems.length > 0 ? (
|
||||||
|
<>
|
||||||
|
<div className="chat-record-meta-line" title={metaText}>
|
||||||
|
{metaText}
|
||||||
|
</div>
|
||||||
|
<div className="chat-record-list">
|
||||||
|
{previewItems.map((item, i) => (
|
||||||
|
<div key={i} className="chat-record-item">
|
||||||
|
<span className="source-name">
|
||||||
|
{item.sourcename ? `${item.sourcename}: ` : ''}
|
||||||
|
</span>
|
||||||
|
{item.datadesc || item.datatitle || '[媒体消息]'}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{recordList.length > previewItems.length && (
|
||||||
|
<div className="chat-record-more">还有 {recordList.length - previewItems.length} 条…</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="chat-record-desc">
|
||||||
|
{desc || '点击打开查看完整聊天记录'}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="chat-record-icon">
|
||||||
|
<MessageSquare size={18} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文件消息 (type=6)
|
||||||
|
if (appMsgType === '6') {
|
||||||
|
const fileName = message.fileName || title || '文件'
|
||||||
|
const fileSize = message.fileSize
|
||||||
|
const fileExt = message.fileExt || fileName.split('.').pop()?.toLowerCase() || ''
|
||||||
|
|
||||||
|
// 根据扩展名选择图标
|
||||||
|
const getFileIcon = () => {
|
||||||
|
const archiveExts = ['zip', 'rar', '7z', 'tar', 'gz', 'bz2']
|
||||||
|
if (archiveExts.includes(fileExt)) {
|
||||||
|
return (
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||||
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||||||
|
<polyline points="7 10 12 15 17 10" />
|
||||||
|
<line x1="12" y1="15" x2="12" y2="3" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||||
|
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
|
||||||
|
<polyline points="13 2 13 9 20 9" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="file-message">
|
||||||
|
<div className="file-icon">
|
||||||
|
{getFileIcon()}
|
||||||
|
</div>
|
||||||
|
<div className="file-info">
|
||||||
|
<div className="file-name" title={fileName}>{fileName}</div>
|
||||||
|
<div className="file-meta">
|
||||||
|
{fileSize ? formatFileSize(fileSize) : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 转账消息 (type=2000)
|
||||||
|
if (appMsgType === '2000') {
|
||||||
|
try {
|
||||||
|
const content = message.rawContent || message.content || message.parsedContent || ''
|
||||||
|
|
||||||
|
// 添加调试日志
|
||||||
|
console.log('[Transfer Debug] Raw content:', content.substring(0, 500))
|
||||||
|
|
||||||
|
const parser = new DOMParser()
|
||||||
|
const doc = parser.parseFromString(content, 'text/xml')
|
||||||
|
|
||||||
|
const feedesc = doc.querySelector('feedesc')?.textContent || ''
|
||||||
|
const payMemo = doc.querySelector('pay_memo')?.textContent || ''
|
||||||
|
const paysubtype = doc.querySelector('paysubtype')?.textContent || '1'
|
||||||
|
|
||||||
|
console.log('[Transfer Debug] Parsed:', { feedesc, payMemo, paysubtype, title })
|
||||||
|
|
||||||
|
// paysubtype: 1=待收款, 3=已收款
|
||||||
|
const isReceived = paysubtype === '3'
|
||||||
|
|
||||||
|
// 如果 feedesc 为空,使用 title 作为降级
|
||||||
|
const displayAmount = feedesc || title || '微信转账'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`transfer-message ${isReceived ? 'received' : ''}`}>
|
||||||
|
<div className="transfer-icon">
|
||||||
|
<svg width="32" height="32" viewBox="0 0 40 40" fill="none">
|
||||||
|
<circle cx="20" cy="20" r="18" stroke="white" strokeWidth="2" />
|
||||||
|
<path d="M12 20h16M20 12l8 8-8 8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="transfer-info">
|
||||||
|
<div className="transfer-amount">{displayAmount}</div>
|
||||||
|
{payMemo && <div className="transfer-memo">{payMemo}</div>}
|
||||||
|
<div className="transfer-label">{isReceived ? '已收款' : '微信转账'}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[Transfer Debug] Parse error:', e)
|
||||||
|
// 解析失败时的降级处理
|
||||||
|
const feedesc = title || '微信转账'
|
||||||
|
return (
|
||||||
|
<div className="transfer-message">
|
||||||
|
<div className="transfer-icon">
|
||||||
|
<svg width="32" height="32" viewBox="0 0 40 40" fill="none">
|
||||||
|
<circle cx="20" cy="20" r="18" stroke="white" strokeWidth="2" />
|
||||||
|
<path d="M12 20h16M20 12l8 8-8 8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="transfer-info">
|
||||||
|
<div className="transfer-amount">{feedesc}</div>
|
||||||
|
<div className="transfer-label">微信转账</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 小程序 (type=33/36)
|
||||||
|
if (appMsgType === '33' || appMsgType === '36') {
|
||||||
|
return (
|
||||||
|
<div className="miniapp-message">
|
||||||
|
<div className="miniapp-icon">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="miniapp-info">
|
||||||
|
<div className="miniapp-title">{title}</div>
|
||||||
|
<div className="miniapp-label">小程序</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 有 URL 的链接消息
|
||||||
|
if (url) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="link-message"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
if (window.electronAPI?.shell?.openExternal) {
|
||||||
|
window.electronAPI.shell.openExternal(url)
|
||||||
|
} else {
|
||||||
|
window.open(url, '_blank')
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="link-header">
|
||||||
|
<div className="link-title" title={title}>{title}</div>
|
||||||
|
</div>
|
||||||
|
<div className="link-body">
|
||||||
|
<div className="link-desc" title={desc}>{desc}</div>
|
||||||
|
<div className="link-thumb-placeholder">
|
||||||
|
<Link size={24} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 表情包消息
|
// 表情包消息
|
||||||
if (isEmoji) {
|
if (isEmoji) {
|
||||||
// ... (keep existing emoji logic)
|
// ... (keep existing emoji logic)
|
||||||
@@ -2492,67 +2766,6 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 解析引用消息(Links / App Messages)
|
|
||||||
// localType: 21474836529 corresponds to AppMessage which often contains links
|
|
||||||
if (isLinkMessage) {
|
|
||||||
try {
|
|
||||||
// 清理内容:移除可能的 wxid 前缀,找到 XML 起始位置
|
|
||||||
let contentToParse = message.rawContent || message.parsedContent || '';
|
|
||||||
const xmlStartIndex = contentToParse.indexOf('<');
|
|
||||||
if (xmlStartIndex >= 0) {
|
|
||||||
contentToParse = contentToParse.substring(xmlStartIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理 HTML 转义字符
|
|
||||||
if (contentToParse.includes('<')) {
|
|
||||||
contentToParse = contentToParse
|
|
||||||
.replace(/</g, '<')
|
|
||||||
.replace(/>/g, '>')
|
|
||||||
.replace(/&/g, '&')
|
|
||||||
.replace(/"/g, '"')
|
|
||||||
.replace(/'/g, "'");
|
|
||||||
}
|
|
||||||
|
|
||||||
const parser = new DOMParser();
|
|
||||||
const doc = parser.parseFromString(contentToParse, "text/xml");
|
|
||||||
const appMsg = doc.querySelector('appmsg');
|
|
||||||
|
|
||||||
if (appMsg) {
|
|
||||||
const title = doc.querySelector('title')?.textContent || '未命名链接';
|
|
||||||
const des = doc.querySelector('des')?.textContent || '无描述';
|
|
||||||
const url = doc.querySelector('url')?.textContent || '';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="link-message"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
if (url) {
|
|
||||||
// 优先使用 electron 接口打开外部浏览器
|
|
||||||
if (window.electronAPI?.shell?.openExternal) {
|
|
||||||
window.electronAPI.shell.openExternal(url);
|
|
||||||
} else {
|
|
||||||
window.open(url, '_blank');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="link-header">
|
|
||||||
<div className="link-content">
|
|
||||||
<div className="link-title" title={title}>{title}</div>
|
|
||||||
<div className="link-desc" title={des}>{des}</div>
|
|
||||||
</div>
|
|
||||||
<div className="link-icon">
|
|
||||||
<Link size={24} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Failed to parse app message', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 普通消息
|
// 普通消息
|
||||||
return <div className="bubble-content">{renderTextWithEmoji(cleanMessageContent(message.parsedContent))}</div>
|
return <div className="bubble-content">{renderTextWithEmoji(cleanMessageContent(message.parsedContent))}</div>
|
||||||
}
|
}
|
||||||
|
|||||||
551
src/pages/ContactsPage.scss
Normal file
551
src/pages/ContactsPage.scss
Normal file
@@ -0,0 +1,551 @@
|
|||||||
|
.contacts-page {
|
||||||
|
display: flex;
|
||||||
|
height: calc(100% + 48px);
|
||||||
|
margin: -24px;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// 左侧联系人面板
|
||||||
|
.contacts-panel {
|
||||||
|
width: 380px;
|
||||||
|
min-width: 380px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-right: 1px solid var(--border-color);
|
||||||
|
background: var(--card-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 24px;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border: none;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin {
|
||||||
|
animation: contactsSpin 1s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin: 16px 20px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
flex: 1;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
outline: none;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-filters {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 0 20px 16px;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow-x: auto;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-chip {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
opacity: 0.7;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
border-color: var(--text-tertiary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: var(--primary-light);
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
opacity: 1;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts-count {
|
||||||
|
padding: 0 20px 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-state,
|
||||||
|
.empty-state {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.spin {
|
||||||
|
animation: contactsSpin 1s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0 12px 12px;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--text-tertiary);
|
||||||
|
border-radius: 3px;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-avatar {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-remark {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-type {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&.friend {
|
||||||
|
background: rgba(var(--primary-rgb), 0.1);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.group {
|
||||||
|
background: rgba(52, 211, 153, 0.1);
|
||||||
|
color: rgb(52, 211, 153);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.official {
|
||||||
|
background: rgba(251, 191, 36, 0.1);
|
||||||
|
color: rgb(251, 191, 36);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右侧设置面板
|
||||||
|
.settings-panel {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px 24px;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--text-tertiary);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-section {
|
||||||
|
margin-bottom: 28px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin: 0 0 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.format-select {
|
||||||
|
position: relative;
|
||||||
|
/* margin-bottom 移到 .setting-section */
|
||||||
|
|
||||||
|
.select-trigger {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 9999px;
|
||||||
|
/* Rounded pill shape */
|
||||||
|
font-size: 14px;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.open {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-value {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
text-align: left;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 6px);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: color-mix(in srgb, var(--bg-primary) 85%, var(--bg-secondary));
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 6px;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
z-index: 20;
|
||||||
|
max-height: 260px;
|
||||||
|
overflow-y: auto;
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
-webkit-backdrop-filter: blur(14px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-option {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
||||||
|
color: var(--primary);
|
||||||
|
|
||||||
|
.option-desc {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-label {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
accent-color: var(--primary);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-path-display {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: var(--primary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
flex: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-folder-btn {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-action {
|
||||||
|
padding: 20px 24px;
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-btn {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 14px 24px;
|
||||||
|
background: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: var(--primary-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin {
|
||||||
|
animation: contactsSpin 1s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes contactsSpin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
384
src/pages/ContactsPage.tsx
Normal file
384
src/pages/ContactsPage.tsx
Normal file
@@ -0,0 +1,384 @@
|
|||||||
|
import { useState, useEffect, useCallback, useRef } from 'react'
|
||||||
|
import { Search, RefreshCw, X, User, Users, MessageSquare, Loader2, FolderOpen, Download, ChevronDown } from 'lucide-react'
|
||||||
|
import './ContactsPage.scss'
|
||||||
|
|
||||||
|
interface ContactInfo {
|
||||||
|
username: string
|
||||||
|
displayName: string
|
||||||
|
remark?: string
|
||||||
|
nickname?: string
|
||||||
|
avatarUrl?: string
|
||||||
|
type: 'friend' | 'group' | 'official' | 'other'
|
||||||
|
}
|
||||||
|
|
||||||
|
function ContactsPage() {
|
||||||
|
const [contacts, setContacts] = useState<ContactInfo[]>([])
|
||||||
|
const [filteredContacts, setFilteredContacts] = useState<ContactInfo[]>([])
|
||||||
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
|
const [searchKeyword, setSearchKeyword] = useState('')
|
||||||
|
const [contactTypes, setContactTypes] = useState({
|
||||||
|
friends: true,
|
||||||
|
groups: true,
|
||||||
|
officials: true
|
||||||
|
})
|
||||||
|
|
||||||
|
// 导出相关状态
|
||||||
|
const [exportFormat, setExportFormat] = useState<'json' | 'csv' | 'vcf'>('json')
|
||||||
|
const [exportAvatars, setExportAvatars] = useState(true)
|
||||||
|
const [exportFolder, setExportFolder] = useState('')
|
||||||
|
const [isExporting, setIsExporting] = useState(false)
|
||||||
|
const [showFormatSelect, setShowFormatSelect] = useState(false)
|
||||||
|
const formatDropdownRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
// 加载通讯录
|
||||||
|
const loadContacts = useCallback(async () => {
|
||||||
|
setIsLoading(true)
|
||||||
|
try {
|
||||||
|
const result = await window.electronAPI.chat.connect()
|
||||||
|
if (!result.success) {
|
||||||
|
console.error('连接失败:', result.error)
|
||||||
|
setIsLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const contactsResult = await window.electronAPI.chat.getContacts()
|
||||||
|
console.log('📞 getContacts结果:', contactsResult)
|
||||||
|
if (contactsResult.success && contactsResult.contacts) {
|
||||||
|
console.log('📊 总联系人数:', contactsResult.contacts.length)
|
||||||
|
console.log('📊 按类型统计:', {
|
||||||
|
friends: contactsResult.contacts.filter(c => c.type === 'friend').length,
|
||||||
|
groups: contactsResult.contacts.filter(c => c.type === 'group').length,
|
||||||
|
officials: contactsResult.contacts.filter(c => c.type === 'official').length,
|
||||||
|
other: contactsResult.contacts.filter(c => c.type === 'other').length
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取头像URL
|
||||||
|
const usernames = contactsResult.contacts.map(c => c.username)
|
||||||
|
if (usernames.length > 0) {
|
||||||
|
const avatarResult = await window.electronAPI.chat.enrichSessionsContactInfo(usernames)
|
||||||
|
if (avatarResult.success && avatarResult.contacts) {
|
||||||
|
contactsResult.contacts.forEach(contact => {
|
||||||
|
const enriched = avatarResult.contacts?.[contact.username]
|
||||||
|
if (enriched?.avatarUrl) {
|
||||||
|
contact.avatarUrl = enriched.avatarUrl
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setContacts(contactsResult.contacts)
|
||||||
|
setFilteredContacts(contactsResult.contacts)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载通讯录失败:', e)
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadContacts()
|
||||||
|
}, [loadContacts])
|
||||||
|
|
||||||
|
// 搜索和类型过滤
|
||||||
|
useEffect(() => {
|
||||||
|
let filtered = contacts
|
||||||
|
|
||||||
|
// 类型过滤
|
||||||
|
filtered = filtered.filter(c => {
|
||||||
|
if (c.type === 'friend' && !contactTypes.friends) return false
|
||||||
|
if (c.type === 'group' && !contactTypes.groups) return false
|
||||||
|
if (c.type === 'official' && !contactTypes.officials) return false
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
|
// 关键词过滤
|
||||||
|
if (searchKeyword.trim()) {
|
||||||
|
const lower = searchKeyword.toLowerCase()
|
||||||
|
filtered = filtered.filter(c =>
|
||||||
|
c.displayName?.toLowerCase().includes(lower) ||
|
||||||
|
c.remark?.toLowerCase().includes(lower) ||
|
||||||
|
c.username.toLowerCase().includes(lower)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilteredContacts(filtered)
|
||||||
|
}, [searchKeyword, contacts, contactTypes])
|
||||||
|
|
||||||
|
// 点击外部关闭下拉菜单
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
const target = event.target as Node
|
||||||
|
if (showFormatSelect && formatDropdownRef.current && !formatDropdownRef.current.contains(target)) {
|
||||||
|
setShowFormatSelect(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('mousedown', handleClickOutside)
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside)
|
||||||
|
}, [showFormatSelect])
|
||||||
|
|
||||||
|
const getAvatarLetter = (name: string) => {
|
||||||
|
if (!name) return '?'
|
||||||
|
return [...name][0] || '?'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getContactTypeIcon = (type: string) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'friend': return <User size={14} />
|
||||||
|
case 'group': return <Users size={14} />
|
||||||
|
case 'official': return <MessageSquare size={14} />
|
||||||
|
default: return <User size={14} />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getContactTypeName = (type: string) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'friend': return '好友'
|
||||||
|
case 'group': return '群聊'
|
||||||
|
case 'official': return '公众号'
|
||||||
|
default: return '其他'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择导出文件夹
|
||||||
|
const selectExportFolder = async () => {
|
||||||
|
try {
|
||||||
|
const result = await window.electronAPI.dialog.openDirectory({
|
||||||
|
title: '选择导出位置'
|
||||||
|
})
|
||||||
|
if (result && !result.canceled && result.filePaths && result.filePaths.length > 0) {
|
||||||
|
setExportFolder(result.filePaths[0])
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('选择文件夹失败:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开始导出
|
||||||
|
const startExport = async () => {
|
||||||
|
if (!exportFolder) {
|
||||||
|
alert('请先选择导出位置')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsExporting(true)
|
||||||
|
try {
|
||||||
|
const exportOptions = {
|
||||||
|
format: exportFormat,
|
||||||
|
exportAvatars,
|
||||||
|
contactTypes: {
|
||||||
|
friends: contactTypes.friends,
|
||||||
|
groups: contactTypes.groups,
|
||||||
|
officials: contactTypes.officials
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await window.electronAPI.export.exportContacts(exportFolder, exportOptions)
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
alert(`导出成功!共导出 ${result.successCount} 个联系人`)
|
||||||
|
} else {
|
||||||
|
alert(`导出失败:${result.error}`)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('导出失败:', e)
|
||||||
|
alert(`导出失败:${String(e)}`)
|
||||||
|
} finally {
|
||||||
|
setIsExporting(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const exportFormatOptions = [
|
||||||
|
{ value: 'json', label: 'JSON', desc: '详细格式,包含完整联系人信息' },
|
||||||
|
{ value: 'csv', label: 'CSV (Excel)', desc: '电子表格格式,适合Excel查看' },
|
||||||
|
{ value: 'vcf', label: 'VCF (vCard)', desc: '标准名片格式,支持导入手机' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const getOptionLabel = (value: string) => {
|
||||||
|
return exportFormatOptions.find(opt => opt.value === value)?.label || value
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="contacts-page">
|
||||||
|
{/* 左侧:联系人列表 */}
|
||||||
|
<div className="contacts-panel">
|
||||||
|
<div className="panel-header">
|
||||||
|
<h2>通讯录</h2>
|
||||||
|
<button className="icon-btn" onClick={loadContacts} disabled={isLoading}>
|
||||||
|
<RefreshCw size={18} className={isLoading ? 'spin' : ''} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="search-bar">
|
||||||
|
<Search size={16} />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="搜索联系人..."
|
||||||
|
value={searchKeyword}
|
||||||
|
onChange={e => setSearchKeyword(e.target.value)}
|
||||||
|
/>
|
||||||
|
{searchKeyword && (
|
||||||
|
<button className="clear-btn" onClick={() => setSearchKeyword('')}>
|
||||||
|
<X size={14} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="type-filters">
|
||||||
|
<label className={`filter-chip ${contactTypes.friends ? 'active' : ''}`}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={contactTypes.friends}
|
||||||
|
onChange={e => setContactTypes({ ...contactTypes, friends: e.target.checked })}
|
||||||
|
/>
|
||||||
|
<User size={16} />
|
||||||
|
<span>好友</span>
|
||||||
|
</label>
|
||||||
|
<label className={`filter-chip ${contactTypes.groups ? 'active' : ''}`}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={contactTypes.groups}
|
||||||
|
onChange={e => setContactTypes({ ...contactTypes, groups: e.target.checked })}
|
||||||
|
/>
|
||||||
|
<Users size={16} />
|
||||||
|
<span>群聊</span>
|
||||||
|
</label>
|
||||||
|
<label className={`filter-chip ${contactTypes.officials ? 'active' : ''}`}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={contactTypes.officials}
|
||||||
|
onChange={e => setContactTypes({ ...contactTypes, officials: e.target.checked })}
|
||||||
|
/>
|
||||||
|
<MessageSquare size={16} />
|
||||||
|
<span>公众号</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="contacts-count">
|
||||||
|
共 {filteredContacts.length} 个联系人
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="loading-state">
|
||||||
|
<Loader2 size={32} className="spin" />
|
||||||
|
<span>加载中...</span>
|
||||||
|
</div>
|
||||||
|
) : filteredContacts.length === 0 ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
<span>暂无联系人</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="contacts-list">
|
||||||
|
{filteredContacts.map(contact => (
|
||||||
|
<div key={contact.username} className="contact-item">
|
||||||
|
<div className="contact-avatar">
|
||||||
|
{contact.avatarUrl ? (
|
||||||
|
<img src={contact.avatarUrl} alt="" />
|
||||||
|
) : (
|
||||||
|
<span>{getAvatarLetter(contact.displayName)}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="contact-info">
|
||||||
|
<div className="contact-name">{contact.displayName}</div>
|
||||||
|
{contact.remark && contact.remark !== contact.displayName && (
|
||||||
|
<div className="contact-remark">备注: {contact.remark}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={`contact-type ${contact.type}`}>
|
||||||
|
{getContactTypeIcon(contact.type)}
|
||||||
|
<span>{getContactTypeName(contact.type)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧:导出设置 */}
|
||||||
|
<div className="settings-panel">
|
||||||
|
<div className="panel-header">
|
||||||
|
<h2>导出设置</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="settings-content">
|
||||||
|
<div className="setting-section">
|
||||||
|
<h3>导出格式</h3>
|
||||||
|
<div className="format-select" ref={formatDropdownRef}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`select-trigger ${showFormatSelect ? 'open' : ''}`}
|
||||||
|
onClick={() => setShowFormatSelect(!showFormatSelect)}
|
||||||
|
>
|
||||||
|
<span className="select-value">{getOptionLabel(exportFormat)}</span>
|
||||||
|
<ChevronDown size={16} />
|
||||||
|
</button>
|
||||||
|
{showFormatSelect && (
|
||||||
|
<div className="select-dropdown">
|
||||||
|
{exportFormatOptions.map(option => (
|
||||||
|
<button
|
||||||
|
key={option.value}
|
||||||
|
type="button"
|
||||||
|
className={`select-option ${exportFormat === option.value ? 'active' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setExportFormat(option.value as 'json' | 'csv' | 'vcf')
|
||||||
|
setShowFormatSelect(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="option-label">{option.label}</span>
|
||||||
|
<span className="option-desc">{option.desc}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="setting-section">
|
||||||
|
<h3>导出选项</h3>
|
||||||
|
<label className="checkbox-item">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={exportAvatars}
|
||||||
|
onChange={e => setExportAvatars(e.target.checked)}
|
||||||
|
/>
|
||||||
|
<span>导出头像</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="setting-section">
|
||||||
|
<h3>导出位置</h3>
|
||||||
|
<div className="export-path-display">
|
||||||
|
<FolderOpen size={16} />
|
||||||
|
<span>{exportFolder || '未设置'}</span>
|
||||||
|
</div>
|
||||||
|
<button className="select-folder-btn" onClick={selectExportFolder}>
|
||||||
|
<FolderOpen size={16} />
|
||||||
|
<span>选择导出目录</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="export-action">
|
||||||
|
<button
|
||||||
|
className="export-btn"
|
||||||
|
onClick={startExport}
|
||||||
|
disabled={!exportFolder || isExporting}
|
||||||
|
>
|
||||||
|
{isExporting ? (
|
||||||
|
<>
|
||||||
|
<Loader2 size={18} className="spin" />
|
||||||
|
<span>导出中...</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Download size={18} />
|
||||||
|
<span>开始导出</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ContactsPage
|
||||||
@@ -338,61 +338,33 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-options {
|
.time-range-picker-item {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
justify-content: space-between;
|
||||||
|
padding: 14px 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
transition: background 0.2s;
|
||||||
color: var(--text-primary);
|
background: transparent;
|
||||||
|
|
||||||
input[type="checkbox"] {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
accent-color: var(--primary);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.main-toggle {
|
|
||||||
padding: 12px 16px;
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-range {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--bg-hover);
|
background: var(--bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.time-picker-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
color: var(--text-tertiary);
|
color: var(--primary);
|
||||||
flex-shrink: 0;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
svg {
|
||||||
flex: 1;
|
color: var(--text-tertiary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1184,50 +1156,4 @@
|
|||||||
color: var(--text-tertiary);
|
color: var(--text-tertiary);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Switch 开关样式
|
// 全局样式已在 main.scss 中定义
|
||||||
.switch {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 44px;
|
|
||||||
height: 24px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
input {
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: var(--bg-tertiary);
|
|
||||||
transition: 0.3s;
|
|
||||||
border-radius: 24px;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
left: 3px;
|
|
||||||
bottom: 3px;
|
|
||||||
background-color: white;
|
|
||||||
transition: 0.3s;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked+.slider {
|
|
||||||
background-color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked+.slider::before {
|
|
||||||
transform: translateX(20px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -24,6 +24,7 @@ interface ExportOptions {
|
|||||||
excelCompactColumns: boolean
|
excelCompactColumns: boolean
|
||||||
txtColumns: string[]
|
txtColumns: string[]
|
||||||
displayNamePreference: 'group-nickname' | 'remark' | 'nickname'
|
displayNamePreference: 'group-nickname' | 'remark' | 'nickname'
|
||||||
|
exportConcurrency: number
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ExportResult {
|
interface ExportResult {
|
||||||
@@ -68,7 +69,8 @@ function ExportPage() {
|
|||||||
exportVoiceAsText: true,
|
exportVoiceAsText: true,
|
||||||
excelCompactColumns: true,
|
excelCompactColumns: true,
|
||||||
txtColumns: defaultTxtColumns,
|
txtColumns: defaultTxtColumns,
|
||||||
displayNamePreference: 'remark'
|
displayNamePreference: 'remark',
|
||||||
|
exportConcurrency: 2
|
||||||
})
|
})
|
||||||
|
|
||||||
const buildDateRangeFromPreset = (preset: string) => {
|
const buildDateRangeFromPreset = (preset: string) => {
|
||||||
@@ -133,14 +135,16 @@ function ExportPage() {
|
|||||||
savedMedia,
|
savedMedia,
|
||||||
savedVoiceAsText,
|
savedVoiceAsText,
|
||||||
savedExcelCompactColumns,
|
savedExcelCompactColumns,
|
||||||
savedTxtColumns
|
savedTxtColumns,
|
||||||
|
savedConcurrency
|
||||||
] = await Promise.all([
|
] = await Promise.all([
|
||||||
configService.getExportDefaultFormat(),
|
configService.getExportDefaultFormat(),
|
||||||
configService.getExportDefaultDateRange(),
|
configService.getExportDefaultDateRange(),
|
||||||
configService.getExportDefaultMedia(),
|
configService.getExportDefaultMedia(),
|
||||||
configService.getExportDefaultVoiceAsText(),
|
configService.getExportDefaultVoiceAsText(),
|
||||||
configService.getExportDefaultExcelCompactColumns(),
|
configService.getExportDefaultExcelCompactColumns(),
|
||||||
configService.getExportDefaultTxtColumns()
|
configService.getExportDefaultTxtColumns(),
|
||||||
|
configService.getExportDefaultConcurrency()
|
||||||
])
|
])
|
||||||
|
|
||||||
const preset = savedRange || 'today'
|
const preset = savedRange || 'today'
|
||||||
@@ -155,7 +159,8 @@ function ExportPage() {
|
|||||||
exportMedia: savedMedia ?? false,
|
exportMedia: savedMedia ?? false,
|
||||||
exportVoiceAsText: savedVoiceAsText ?? true,
|
exportVoiceAsText: savedVoiceAsText ?? true,
|
||||||
excelCompactColumns: savedExcelCompactColumns ?? true,
|
excelCompactColumns: savedExcelCompactColumns ?? true,
|
||||||
txtColumns
|
txtColumns,
|
||||||
|
exportConcurrency: savedConcurrency ?? 2
|
||||||
}))
|
}))
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('加载导出默认设置失败:', e)
|
console.error('加载导出默认设置失败:', e)
|
||||||
@@ -286,6 +291,7 @@ function ExportPage() {
|
|||||||
excelCompactColumns: options.excelCompactColumns,
|
excelCompactColumns: options.excelCompactColumns,
|
||||||
txtColumns: options.txtColumns,
|
txtColumns: options.txtColumns,
|
||||||
displayNamePreference: options.displayNamePreference,
|
displayNamePreference: options.displayNamePreference,
|
||||||
|
exportConcurrency: options.exportConcurrency,
|
||||||
sessionLayout,
|
sessionLayout,
|
||||||
dateRange: options.useAllTime ? null : options.dateRange ? {
|
dateRange: options.useAllTime ? null : options.dateRange ? {
|
||||||
start: Math.floor(options.dateRange.start.getTime() / 1000),
|
start: Math.floor(options.dateRange.start.getTime() / 1000),
|
||||||
@@ -531,21 +537,34 @@ function ExportPage() {
|
|||||||
|
|
||||||
<div className="setting-section">
|
<div className="setting-section">
|
||||||
<h3>时间范围</h3>
|
<h3>时间范围</h3>
|
||||||
<div className="time-options">
|
<p className="setting-subtitle">选择要导出的消息时间区间</p>
|
||||||
<label className="checkbox-item">
|
<div className="media-options-card">
|
||||||
|
<div className="media-switch-row">
|
||||||
|
<div className="media-switch-info">
|
||||||
|
<span className="media-switch-title">导出全部时间</span>
|
||||||
|
<span className="media-switch-desc">关闭此项以选择特定的起止日期</span>
|
||||||
|
</div>
|
||||||
|
<label className="switch">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={options.useAllTime}
|
checked={options.useAllTime}
|
||||||
onChange={e => setOptions({ ...options, useAllTime: e.target.checked })}
|
onChange={e => setOptions({ ...options, useAllTime: e.target.checked })}
|
||||||
/>
|
/>
|
||||||
<span>导出全部时间</span>
|
<span className="switch-slider"></span>
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
{!options.useAllTime && options.dateRange && (
|
{!options.useAllTime && options.dateRange && (
|
||||||
<div className="date-range" onClick={() => setShowDatePicker(true)}>
|
<>
|
||||||
|
<div className="media-option-divider"></div>
|
||||||
|
<div className="time-range-picker-item" onClick={() => setShowDatePicker(true)}>
|
||||||
|
<div className="time-picker-info">
|
||||||
<Calendar size={16} />
|
<Calendar size={16} />
|
||||||
<span>{formatDate(options.dateRange.start)} - {formatDate(options.dateRange.end)}</span>
|
<span>{formatDate(options.dateRange.start)} - {formatDate(options.dateRange.end)}</span>
|
||||||
|
</div>
|
||||||
<ChevronDown size={14} />
|
<ChevronDown size={14} />
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -603,7 +622,7 @@ function ExportPage() {
|
|||||||
checked={options.exportMedia}
|
checked={options.exportMedia}
|
||||||
onChange={e => setOptions({ ...options, exportMedia: e.target.checked })}
|
onChange={e => setOptions({ ...options, exportMedia: e.target.checked })}
|
||||||
/>
|
/>
|
||||||
<span className="slider"></span>
|
<span className="switch-slider"></span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -683,7 +702,7 @@ function ExportPage() {
|
|||||||
checked={options.exportAvatars}
|
checked={options.exportAvatars}
|
||||||
onChange={e => setOptions({ ...options, exportAvatars: e.target.checked })}
|
onChange={e => setOptions({ ...options, exportAvatars: e.target.checked })}
|
||||||
/>
|
/>
|
||||||
<span className="slider"></span>
|
<span className="switch-slider"></span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ function GroupAnalyticsPage() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadGroups()
|
loadGroups()
|
||||||
}, [loadGroups])
|
}, [])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (searchQuery) {
|
if (searchQuery) {
|
||||||
|
|||||||
@@ -603,54 +603,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch {
|
// 全局样式已在 main.scss 中定义
|
||||||
position: relative;
|
|
||||||
width: 46px;
|
|
||||||
height: 24px;
|
|
||||||
display: inline-block;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch-input {
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch-slider {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 999px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch-slider::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
left: 3px;
|
|
||||||
top: 2px;
|
|
||||||
background: var(--text-tertiary);
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch-input:checked+.switch-slider {
|
|
||||||
background: var(--primary);
|
|
||||||
border-color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch-input:checked+.switch-slider::before {
|
|
||||||
transform: translateX(22px);
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-actions {
|
.log-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -7,12 +7,13 @@ import { dialog } from '../services/ipc'
|
|||||||
import * as configService from '../services/config'
|
import * as configService from '../services/config'
|
||||||
import {
|
import {
|
||||||
Eye, EyeOff, FolderSearch, FolderOpen, Search, Copy,
|
Eye, EyeOff, FolderSearch, FolderOpen, Search, Copy,
|
||||||
RotateCcw, Trash2, Save, Plug, Check, Sun, Moon,
|
RotateCcw, Trash2, Plug, Check, Sun, Moon,
|
||||||
Palette, Database, Download, HardDrive, Info, RefreshCw, ChevronDown, Mic
|
Palette, Database, Download, HardDrive, Info, RefreshCw, ChevronDown, Mic,
|
||||||
|
ShieldCheck, Fingerprint, Lock, KeyRound
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import './SettingsPage.scss'
|
import './SettingsPage.scss'
|
||||||
|
|
||||||
type SettingsTab = 'appearance' | 'database' | 'whisper' | 'export' | 'cache' | 'about'
|
type SettingsTab = 'appearance' | 'database' | 'whisper' | 'export' | 'cache' | 'security' | 'about'
|
||||||
|
|
||||||
const tabs: { id: SettingsTab; label: string; icon: React.ElementType }[] = [
|
const tabs: { id: SettingsTab; label: string; icon: React.ElementType }[] = [
|
||||||
{ id: 'appearance', label: '外观', icon: Palette },
|
{ id: 'appearance', label: '外观', icon: Palette },
|
||||||
@@ -20,6 +21,7 @@ const tabs: { id: SettingsTab; label: string; icon: React.ElementType }[] = [
|
|||||||
{ id: 'whisper', label: '语音识别模型', icon: Mic },
|
{ id: 'whisper', label: '语音识别模型', icon: Mic },
|
||||||
{ id: 'export', label: '导出', icon: Download },
|
{ id: 'export', label: '导出', icon: Download },
|
||||||
{ id: 'cache', label: '缓存', icon: HardDrive },
|
{ id: 'cache', label: '缓存', icon: HardDrive },
|
||||||
|
{ id: 'security', label: '安全', icon: ShieldCheck },
|
||||||
{ id: 'about', label: '关于', icon: Info }
|
{ id: 'about', label: '关于', icon: Info }
|
||||||
]
|
]
|
||||||
|
|
||||||
@@ -29,7 +31,22 @@ interface WxidOption {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function SettingsPage() {
|
function SettingsPage() {
|
||||||
const { isDbConnected, setDbConnected, setLoading, reset } = useAppStore()
|
const {
|
||||||
|
isDbConnected,
|
||||||
|
setDbConnected,
|
||||||
|
setLoading,
|
||||||
|
reset,
|
||||||
|
updateInfo,
|
||||||
|
setUpdateInfo,
|
||||||
|
isDownloading,
|
||||||
|
setIsDownloading,
|
||||||
|
downloadProgress,
|
||||||
|
setDownloadProgress,
|
||||||
|
showUpdateDialog,
|
||||||
|
setShowUpdateDialog,
|
||||||
|
setUpdateError
|
||||||
|
} = useAppStore()
|
||||||
|
|
||||||
const resetChatStore = useChatStore((state) => state.reset)
|
const resetChatStore = useChatStore((state) => state.reset)
|
||||||
const { currentTheme, themeMode, setTheme, setThemeMode } = useThemeStore()
|
const { currentTheme, themeMode, setTheme, setThemeMode } = useThemeStore()
|
||||||
const clearAnalyticsStoreCache = useAnalyticsStore((state) => state.clearCache)
|
const clearAnalyticsStoreCache = useAnalyticsStore((state) => state.clearCache)
|
||||||
@@ -62,6 +79,7 @@ function SettingsPage() {
|
|||||||
const [exportDefaultMedia, setExportDefaultMedia] = useState(false)
|
const [exportDefaultMedia, setExportDefaultMedia] = useState(false)
|
||||||
const [exportDefaultVoiceAsText, setExportDefaultVoiceAsText] = useState(true)
|
const [exportDefaultVoiceAsText, setExportDefaultVoiceAsText] = useState(true)
|
||||||
const [exportDefaultExcelCompactColumns, setExportDefaultExcelCompactColumns] = useState(true)
|
const [exportDefaultExcelCompactColumns, setExportDefaultExcelCompactColumns] = useState(true)
|
||||||
|
const [exportDefaultConcurrency, setExportDefaultConcurrency] = useState(2)
|
||||||
|
|
||||||
const [isLoading, setIsLoadingState] = useState(false)
|
const [isLoading, setIsLoadingState] = useState(false)
|
||||||
const [isTesting, setIsTesting] = useState(false)
|
const [isTesting, setIsTesting] = useState(false)
|
||||||
@@ -69,10 +87,7 @@ function SettingsPage() {
|
|||||||
const [isFetchingDbKey, setIsFetchingDbKey] = useState(false)
|
const [isFetchingDbKey, setIsFetchingDbKey] = useState(false)
|
||||||
const [isFetchingImageKey, setIsFetchingImageKey] = useState(false)
|
const [isFetchingImageKey, setIsFetchingImageKey] = useState(false)
|
||||||
const [isCheckingUpdate, setIsCheckingUpdate] = useState(false)
|
const [isCheckingUpdate, setIsCheckingUpdate] = useState(false)
|
||||||
const [isDownloading, setIsDownloading] = useState(false)
|
|
||||||
const [downloadProgress, setDownloadProgress] = useState(0)
|
|
||||||
const [appVersion, setAppVersion] = useState('')
|
const [appVersion, setAppVersion] = useState('')
|
||||||
const [updateInfo, setUpdateInfo] = useState<{ hasUpdate: boolean; version?: string; releaseNotes?: string } | null>(null)
|
|
||||||
const [message, setMessage] = useState<{ text: string; success: boolean } | null>(null)
|
const [message, setMessage] = useState<{ text: string; success: boolean } | null>(null)
|
||||||
const [showDecryptKey, setShowDecryptKey] = useState(false)
|
const [showDecryptKey, setShowDecryptKey] = useState(false)
|
||||||
const [dbKeyStatus, setDbKeyStatus] = useState('')
|
const [dbKeyStatus, setDbKeyStatus] = useState('')
|
||||||
@@ -82,8 +97,31 @@ function SettingsPage() {
|
|||||||
const [isClearingImageCache, setIsClearingImageCache] = useState(false)
|
const [isClearingImageCache, setIsClearingImageCache] = useState(false)
|
||||||
const [isClearingAllCache, setIsClearingAllCache] = useState(false)
|
const [isClearingAllCache, setIsClearingAllCache] = useState(false)
|
||||||
|
|
||||||
|
// 安全设置 state
|
||||||
|
const [authEnabled, setAuthEnabled] = useState(false)
|
||||||
|
const [authUseHello, setAuthUseHello] = useState(false)
|
||||||
|
const [helloAvailable, setHelloAvailable] = useState(false)
|
||||||
|
const [newPassword, setNewPassword] = useState('')
|
||||||
|
const [confirmPassword, setConfirmPassword] = useState('')
|
||||||
|
const [isSettingHello, setIsSettingHello] = useState(false)
|
||||||
|
|
||||||
const isClearingCache = isClearingAnalyticsCache || isClearingImageCache || isClearingAllCache
|
const isClearingCache = isClearingAnalyticsCache || isClearingImageCache || isClearingAllCache
|
||||||
|
|
||||||
|
// 检查 Hello 可用性
|
||||||
|
useEffect(() => {
|
||||||
|
if (window.PublicKeyCredential) {
|
||||||
|
void PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable().then(setHelloAvailable)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
async function sha256(message: string) {
|
||||||
|
const msgBuffer = new TextEncoder().encode(message)
|
||||||
|
const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer)
|
||||||
|
const hashArray = Array.from(new Uint8Array(hashBuffer))
|
||||||
|
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
|
||||||
|
return hashHex
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadConfig()
|
loadConfig()
|
||||||
loadAppVersion()
|
loadAppVersion()
|
||||||
@@ -139,6 +177,12 @@ function SettingsPage() {
|
|||||||
const savedExportDefaultMedia = await configService.getExportDefaultMedia()
|
const savedExportDefaultMedia = await configService.getExportDefaultMedia()
|
||||||
const savedExportDefaultVoiceAsText = await configService.getExportDefaultVoiceAsText()
|
const savedExportDefaultVoiceAsText = await configService.getExportDefaultVoiceAsText()
|
||||||
const savedExportDefaultExcelCompactColumns = await configService.getExportDefaultExcelCompactColumns()
|
const savedExportDefaultExcelCompactColumns = await configService.getExportDefaultExcelCompactColumns()
|
||||||
|
const savedExportDefaultConcurrency = await configService.getExportDefaultConcurrency()
|
||||||
|
|
||||||
|
const savedAuthEnabled = await configService.getAuthEnabled()
|
||||||
|
const savedAuthUseHello = await configService.getAuthUseHello()
|
||||||
|
setAuthEnabled(savedAuthEnabled)
|
||||||
|
setAuthUseHello(savedAuthUseHello)
|
||||||
|
|
||||||
if (savedPath) setDbPath(savedPath)
|
if (savedPath) setDbPath(savedPath)
|
||||||
if (savedWxid) setWxid(savedWxid)
|
if (savedWxid) setWxid(savedWxid)
|
||||||
@@ -166,6 +210,7 @@ function SettingsPage() {
|
|||||||
setExportDefaultMedia(savedExportDefaultMedia ?? false)
|
setExportDefaultMedia(savedExportDefaultMedia ?? false)
|
||||||
setExportDefaultVoiceAsText(savedExportDefaultVoiceAsText ?? true)
|
setExportDefaultVoiceAsText(savedExportDefaultVoiceAsText ?? true)
|
||||||
setExportDefaultExcelCompactColumns(savedExportDefaultExcelCompactColumns ?? true)
|
setExportDefaultExcelCompactColumns(savedExportDefaultExcelCompactColumns ?? true)
|
||||||
|
setExportDefaultConcurrency(savedExportDefaultConcurrency ?? 2)
|
||||||
|
|
||||||
// 如果语言列表为空,保存默认值
|
// 如果语言列表为空,保存默认值
|
||||||
if (!savedTranscribeLanguages || savedTranscribeLanguages.length === 0) {
|
if (!savedTranscribeLanguages || savedTranscribeLanguages.length === 0) {
|
||||||
@@ -176,7 +221,7 @@ function SettingsPage() {
|
|||||||
|
|
||||||
|
|
||||||
if (savedWhisperModelDir) setWhisperModelDir(savedWhisperModelDir)
|
if (savedWhisperModelDir) setWhisperModelDir(savedWhisperModelDir)
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
console.error('加载配置失败:', e)
|
console.error('加载配置失败:', e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -202,14 +247,14 @@ function SettingsPage() {
|
|||||||
try {
|
try {
|
||||||
const version = await window.electronAPI.app.getVersion()
|
const version = await window.electronAPI.app.getVersion()
|
||||||
setAppVersion(version)
|
setAppVersion(version)
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
console.error('获取版本号失败:', e)
|
console.error('获取版本号失败:', e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听下载进度
|
// 监听下载进度
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const removeListener = window.electronAPI.app.onDownloadProgress?.((progress: number) => {
|
const removeListener = window.electronAPI.app.onDownloadProgress?.((progress: any) => {
|
||||||
setDownloadProgress(progress)
|
setDownloadProgress(progress)
|
||||||
})
|
})
|
||||||
return () => removeListener?.()
|
return () => removeListener?.()
|
||||||
@@ -229,17 +274,19 @@ function SettingsPage() {
|
|||||||
}, [whisperModelDir])
|
}, [whisperModelDir])
|
||||||
|
|
||||||
const handleCheckUpdate = async () => {
|
const handleCheckUpdate = async () => {
|
||||||
|
if (isCheckingUpdate) return
|
||||||
setIsCheckingUpdate(true)
|
setIsCheckingUpdate(true)
|
||||||
setUpdateInfo(null)
|
setUpdateInfo(null)
|
||||||
try {
|
try {
|
||||||
const result = await window.electronAPI.app.checkForUpdates()
|
const result = await window.electronAPI.app.checkForUpdates()
|
||||||
if (result.hasUpdate) {
|
if (result.hasUpdate) {
|
||||||
setUpdateInfo(result)
|
setUpdateInfo(result)
|
||||||
|
setShowUpdateDialog(true)
|
||||||
showMessage(`发现新版:${result.version}`, true)
|
showMessage(`发现新版:${result.version}`, true)
|
||||||
} else {
|
} else {
|
||||||
showMessage('当前已是最新版', true)
|
showMessage('当前已是最新版', true)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`检查更新失败: ${e}`, false)
|
showMessage(`检查更新失败: ${e}`, false)
|
||||||
} finally {
|
} finally {
|
||||||
setIsCheckingUpdate(false)
|
setIsCheckingUpdate(false)
|
||||||
@@ -247,17 +294,21 @@ function SettingsPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleUpdateNow = async () => {
|
const handleUpdateNow = async () => {
|
||||||
|
setShowUpdateDialog(false)
|
||||||
|
|
||||||
setIsDownloading(true)
|
setIsDownloading(true)
|
||||||
setDownloadProgress(0)
|
setDownloadProgress({ percent: 0 })
|
||||||
try {
|
try {
|
||||||
showMessage('正在下载更新...', true)
|
showMessage('正在下载更新...', true)
|
||||||
await window.electronAPI.app.downloadAndInstall()
|
await window.electronAPI.app.downloadAndInstall()
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`更新失败: ${e}`, false)
|
showMessage(`更新失败: ${e}`, false)
|
||||||
setIsDownloading(false)
|
setIsDownloading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const showMessage = (text: string, success: boolean) => {
|
const showMessage = (text: string, success: boolean) => {
|
||||||
setMessage({ text, success })
|
setMessage({ text, success })
|
||||||
setTimeout(() => setMessage(null), 3000)
|
setTimeout(() => setMessage(null), 3000)
|
||||||
@@ -345,7 +396,7 @@ function SettingsPage() {
|
|||||||
if (!result.success && result.error) {
|
if (!result.success && result.error) {
|
||||||
showMessage(result.error, false)
|
showMessage(result.error, false)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`切换账号后重新连接失败: ${e}`, false)
|
showMessage(`切换账号后重新连接失败: ${e}`, false)
|
||||||
setDbConnected(false)
|
setDbConnected(false)
|
||||||
}
|
}
|
||||||
@@ -382,7 +433,7 @@ function SettingsPage() {
|
|||||||
} else {
|
} else {
|
||||||
showMessage(result.error || '未能自动检测到数据库目录', false)
|
showMessage(result.error || '未能自动检测到数据库目录', false)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`自动检测失败: ${e}`, false)
|
showMessage(`自动检测失败: ${e}`, false)
|
||||||
} finally {
|
} finally {
|
||||||
setIsDetectingPath(false)
|
setIsDetectingPath(false)
|
||||||
@@ -396,7 +447,7 @@ function SettingsPage() {
|
|||||||
setDbPath(result.filePaths[0])
|
setDbPath(result.filePaths[0])
|
||||||
showMessage('已选择数据库目录', true)
|
showMessage('已选择数据库目录', true)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage('选择目录失败', false)
|
showMessage('选择目录失败', false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -424,7 +475,7 @@ function SettingsPage() {
|
|||||||
} else {
|
} else {
|
||||||
if (!silent) showMessage('未检测到账号目录,请检查路径', false)
|
if (!silent) showMessage('未检测到账号目录,请检查路径', false)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
if (!silent) showMessage(`扫描失败: ${e}`, false)
|
if (!silent) showMessage(`扫描失败: ${e}`, false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -440,7 +491,7 @@ function SettingsPage() {
|
|||||||
setCachePath(result.filePaths[0])
|
setCachePath(result.filePaths[0])
|
||||||
showMessage('已选择缓存目录', true)
|
showMessage('已选择缓存目录', true)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage('选择目录失败', false)
|
showMessage('选择目录失败', false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -456,7 +507,7 @@ function SettingsPage() {
|
|||||||
await configService.setWhisperModelDir(dir)
|
await configService.setWhisperModelDir(dir)
|
||||||
showMessage('已选择 Whisper 模型目录', true)
|
showMessage('已选择 Whisper 模型目录', true)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage('选择目录失败', false)
|
showMessage('选择目录失败', false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -480,7 +531,7 @@ function SettingsPage() {
|
|||||||
} else {
|
} else {
|
||||||
showMessage(result.error || '模型下载失败', false)
|
showMessage(result.error || '模型下载失败', false)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`模型下载失败: ${e}`, false)
|
showMessage(`模型下载失败: ${e}`, false)
|
||||||
} finally {
|
} finally {
|
||||||
setIsWhisperDownloading(false)
|
setIsWhisperDownloading(false)
|
||||||
@@ -512,7 +563,7 @@ function SettingsPage() {
|
|||||||
showMessage(result.error || '自动获取密钥失败', false)
|
showMessage(result.error || '自动获取密钥失败', false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`自动获取密钥失败: ${e}`, false)
|
showMessage(`自动获取密钥失败: ${e}`, false)
|
||||||
} finally {
|
} finally {
|
||||||
setIsFetchingDbKey(false)
|
setIsFetchingDbKey(false)
|
||||||
@@ -524,6 +575,19 @@ function SettingsPage() {
|
|||||||
handleAutoGetDbKey()
|
handleAutoGetDbKey()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Helper to sync current keys to wxid config
|
||||||
|
const syncCurrentKeys = async () => {
|
||||||
|
const keys = buildKeysFromState()
|
||||||
|
await syncKeysToConfig(keys)
|
||||||
|
if (wxid) {
|
||||||
|
await configService.setWxidConfig(wxid, {
|
||||||
|
decryptKey: keys.decryptKey,
|
||||||
|
imageXorKey: typeof keys.imageXorKey === 'number' ? keys.imageXorKey : 0,
|
||||||
|
imageAesKey: keys.imageAesKey
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const handleAutoGetImageKey = async () => {
|
const handleAutoGetImageKey = async () => {
|
||||||
if (isFetchingImageKey) return
|
if (isFetchingImageKey) return
|
||||||
if (!dbPath) {
|
if (!dbPath) {
|
||||||
@@ -542,10 +606,27 @@ function SettingsPage() {
|
|||||||
setImageAesKey(result.aesKey)
|
setImageAesKey(result.aesKey)
|
||||||
setImageKeyStatus('已获取图片密钥')
|
setImageKeyStatus('已获取图片密钥')
|
||||||
showMessage('已自动获取图片密钥', true)
|
showMessage('已自动获取图片密钥', true)
|
||||||
|
|
||||||
|
// Auto-save after fetching keys
|
||||||
|
// We need to use the values directly because state updates are async
|
||||||
|
const newXorKey = typeof result.xorKey === 'number' ? result.xorKey : 0
|
||||||
|
const newAesKey = result.aesKey
|
||||||
|
|
||||||
|
await configService.setImageXorKey(newXorKey)
|
||||||
|
await configService.setImageAesKey(newAesKey)
|
||||||
|
|
||||||
|
if (wxid) {
|
||||||
|
await configService.setWxidConfig(wxid, {
|
||||||
|
decryptKey: decryptKey, // use current state as it hasn't changed here
|
||||||
|
imageXorKey: newXorKey,
|
||||||
|
imageAesKey: newAesKey
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
showMessage(result.error || '自动获取图片密钥失败', false)
|
showMessage(result.error || '自动获取图片密钥失败', false)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`自动获取图片密钥失败: ${e}`, false)
|
showMessage(`自动获取图片密钥失败: ${e}`, false)
|
||||||
} finally {
|
} finally {
|
||||||
setIsFetchingImageKey(false)
|
setIsFetchingImageKey(false)
|
||||||
@@ -568,49 +649,15 @@ function SettingsPage() {
|
|||||||
} else {
|
} else {
|
||||||
showMessage(result.error || '连接测试失败', false)
|
showMessage(result.error || '连接测试失败', false)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`连接测试失败: ${e}`, false)
|
showMessage(`连接测试失败: ${e}`, false)
|
||||||
} finally {
|
} finally {
|
||||||
setIsTesting(false)
|
setIsTesting(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleSaveConfig = async () => {
|
// Removed manual save config function
|
||||||
if (!decryptKey) { showMessage('请输入解密密钥', false); return }
|
|
||||||
if (decryptKey.length !== 64) { showMessage('密钥长度必须为64个字符', false); return }
|
|
||||||
if (!dbPath) { showMessage('请选择数据库目录', false); return }
|
|
||||||
if (!wxid) { showMessage('请输入 wxid', false); return }
|
|
||||||
|
|
||||||
setIsLoadingState(true)
|
|
||||||
setLoading(true, '正在保存配置...')
|
|
||||||
|
|
||||||
try {
|
|
||||||
await configService.setDecryptKey(decryptKey)
|
|
||||||
await configService.setDbPath(dbPath)
|
|
||||||
await configService.setMyWxid(wxid)
|
|
||||||
await configService.setCachePath(cachePath)
|
|
||||||
const parsedXorKey = parseImageXorKey(imageXorKey)
|
|
||||||
await configService.setImageXorKey(typeof parsedXorKey === 'number' ? parsedXorKey : 0)
|
|
||||||
await configService.setImageAesKey(imageAesKey || '')
|
|
||||||
await configService.setWxidConfig(wxid, {
|
|
||||||
decryptKey,
|
|
||||||
imageXorKey: typeof parsedXorKey === 'number' ? parsedXorKey : 0,
|
|
||||||
imageAesKey
|
|
||||||
})
|
|
||||||
await configService.setWhisperModelDir(whisperModelDir)
|
|
||||||
await configService.setAutoTranscribeVoice(autoTranscribeVoice)
|
|
||||||
await configService.setTranscribeLanguages(transcribeLanguages)
|
|
||||||
await configService.setOnboardingDone(true)
|
|
||||||
|
|
||||||
// 保存按钮只负责持久化配置,不做连接测试/重连,避免影响聊天页的活动连接
|
|
||||||
showMessage('配置保存成功', true)
|
|
||||||
} catch (e) {
|
|
||||||
showMessage(`保存配置失败: ${e}`, false)
|
|
||||||
} finally {
|
|
||||||
setIsLoadingState(false)
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleClearConfig = async () => {
|
const handleClearConfig = async () => {
|
||||||
const confirmed = window.confirm('确定要清除当前配置吗?清除后需要重新完成首次配置?')
|
const confirmed = window.confirm('确定要清除当前配置吗?清除后需要重新完成首次配置?')
|
||||||
@@ -636,7 +683,7 @@ function SettingsPage() {
|
|||||||
setIsWhisperDownloading(false)
|
setIsWhisperDownloading(false)
|
||||||
setDbConnected(false)
|
setDbConnected(false)
|
||||||
await window.electronAPI.window.openOnboardingWindow()
|
await window.electronAPI.window.openOnboardingWindow()
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`清除配置失败: ${e}`, false)
|
showMessage(`清除配置失败: ${e}`, false)
|
||||||
} finally {
|
} finally {
|
||||||
setIsLoadingState(false)
|
setIsLoadingState(false)
|
||||||
@@ -648,7 +695,7 @@ function SettingsPage() {
|
|||||||
try {
|
try {
|
||||||
const logPath = await window.electronAPI.log.getPath()
|
const logPath = await window.electronAPI.log.getPath()
|
||||||
await window.electronAPI.shell.openPath(logPath)
|
await window.electronAPI.shell.openPath(logPath)
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`打开日志失败: ${e}`, false)
|
showMessage(`打开日志失败: ${e}`, false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -662,7 +709,7 @@ function SettingsPage() {
|
|||||||
}
|
}
|
||||||
await navigator.clipboard.writeText(result.content || '')
|
await navigator.clipboard.writeText(result.content || '')
|
||||||
showMessage('日志已复制到剪贴板', true)
|
showMessage('日志已复制到剪贴板', true)
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`复制日志失败: ${e}`, false)
|
showMessage(`复制日志失败: ${e}`, false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -678,7 +725,7 @@ function SettingsPage() {
|
|||||||
} else {
|
} else {
|
||||||
showMessage(`清除分析缓存失败: ${result.error || '未知错误'}`, false)
|
showMessage(`清除分析缓存失败: ${result.error || '未知错误'}`, false)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`清除分析缓存失败: ${e}`, false)
|
showMessage(`清除分析缓存失败: ${e}`, false)
|
||||||
} finally {
|
} finally {
|
||||||
setIsClearingAnalyticsCache(false)
|
setIsClearingAnalyticsCache(false)
|
||||||
@@ -695,7 +742,7 @@ function SettingsPage() {
|
|||||||
} else {
|
} else {
|
||||||
showMessage(`清除图片缓存失败: ${result.error || '未知错误'}`, false)
|
showMessage(`清除图片缓存失败: ${result.error || '未知错误'}`, false)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`清除图片缓存失败: ${e}`, false)
|
showMessage(`清除图片缓存失败: ${e}`, false)
|
||||||
} finally {
|
} finally {
|
||||||
setIsClearingImageCache(false)
|
setIsClearingImageCache(false)
|
||||||
@@ -713,7 +760,7 @@ function SettingsPage() {
|
|||||||
} else {
|
} else {
|
||||||
showMessage(`清除所有缓存失败: ${result.error || '未知错误'}`, false)
|
showMessage(`清除所有缓存失败: ${result.error || '未知错误'}`, false)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e: any) {
|
||||||
showMessage(`清除所有缓存失败: ${e}`, false)
|
showMessage(`清除所有缓存失败: ${e}`, false)
|
||||||
} finally {
|
} finally {
|
||||||
setIsClearingAllCache(false)
|
setIsClearingAllCache(false)
|
||||||
@@ -753,7 +800,18 @@ function SettingsPage() {
|
|||||||
<label>解密密钥</label>
|
<label>解密密钥</label>
|
||||||
<span className="form-hint">64位十六进制密钥</span>
|
<span className="form-hint">64位十六进制密钥</span>
|
||||||
<div className="input-with-toggle">
|
<div className="input-with-toggle">
|
||||||
<input type={showDecryptKey ? 'text' : 'password'} placeholder="例如: a1b2c3d4e5f6..." value={decryptKey} onChange={(e) => setDecryptKey(e.target.value)} />
|
<input
|
||||||
|
type={showDecryptKey ? 'text' : 'password'}
|
||||||
|
placeholder="例如: a1b2c3d4e5f6..."
|
||||||
|
value={decryptKey}
|
||||||
|
onChange={(e) => setDecryptKey(e.target.value)}
|
||||||
|
onBlur={async () => {
|
||||||
|
if (decryptKey && decryptKey.length === 64) {
|
||||||
|
await syncCurrentKeys()
|
||||||
|
// showMessage('解密密钥已保存', true)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<button type="button" className="toggle-visibility" onClick={() => setShowDecryptKey(!showDecryptKey)}>
|
<button type="button" className="toggle-visibility" onClick={() => setShowDecryptKey(!showDecryptKey)}>
|
||||||
{showDecryptKey ? <EyeOff size={14} /> : <Eye size={14} />}
|
{showDecryptKey ? <EyeOff size={14} /> : <Eye size={14} />}
|
||||||
</button>
|
</button>
|
||||||
@@ -776,8 +834,18 @@ function SettingsPage() {
|
|||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>数据库根目录</label>
|
<label>数据库根目录</label>
|
||||||
<span className="form-hint">xwechat_files 目录</span>
|
<span className="form-hint">xwechat_files 目录</span>
|
||||||
<span className="form-hint" style={{ color: '#ff6b6b' }}>⚠️ 目录路径不可包含中文,如有中文请去微信-设置-存储位置点击更改,迁移至全英文目录</span>
|
<span className="form-hint" style={{ color: '#ff6b6b' }}> 目录路径不可包含中文,如有中文请去微信-设置-存储位置点击更改,迁移至全英文目录</span>
|
||||||
<input type="text" placeholder="例如: C:\Users\xxx\Documents\xwechat_files" value={dbPath} onChange={(e) => setDbPath(e.target.value)} />
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="例如: C:\Users\xxx\Documents\xwechat_files"
|
||||||
|
value={dbPath}
|
||||||
|
onChange={(e) => setDbPath(e.target.value)}
|
||||||
|
onBlur={async () => {
|
||||||
|
if (dbPath) {
|
||||||
|
await configService.setDbPath(dbPath)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<div className="btn-row">
|
<div className="btn-row">
|
||||||
<button className="btn btn-primary" onClick={handleAutoDetectPath} disabled={isDetectingPath}>
|
<button className="btn btn-primary" onClick={handleAutoDetectPath} disabled={isDetectingPath}>
|
||||||
<FolderSearch size={16} /> {isDetectingPath ? '检测中...' : '自动检测'}
|
<FolderSearch size={16} /> {isDetectingPath ? '检测中...' : '自动检测'}
|
||||||
@@ -795,6 +863,12 @@ function SettingsPage() {
|
|||||||
placeholder="例如: wxid_xxxxxx"
|
placeholder="例如: wxid_xxxxxx"
|
||||||
value={wxid}
|
value={wxid}
|
||||||
onChange={(e) => setWxid(e.target.value)}
|
onChange={(e) => setWxid(e.target.value)}
|
||||||
|
onBlur={async () => {
|
||||||
|
if (wxid) {
|
||||||
|
await configService.setMyWxid(wxid)
|
||||||
|
await syncCurrentKeys() // Sync keys to the new wxid entry
|
||||||
|
}
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button className="btn btn-secondary btn-sm" onClick={() => handleScanWxid()}><Search size={14} /> 扫描 wxid</button>
|
<button className="btn btn-secondary btn-sm" onClick={() => handleScanWxid()}><Search size={14} /> 扫描 wxid</button>
|
||||||
@@ -803,13 +877,25 @@ function SettingsPage() {
|
|||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>图片 XOR 密钥 <span className="optional">(可选)</span></label>
|
<label>图片 XOR 密钥 <span className="optional">(可选)</span></label>
|
||||||
<span className="form-hint">用于解密图片缓存</span>
|
<span className="form-hint">用于解密图片缓存</span>
|
||||||
<input type="text" placeholder="例如: 0xA4" value={imageXorKey} onChange={(e) => setImageXorKey(e.target.value)} />
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="例如: 0xA4"
|
||||||
|
value={imageXorKey}
|
||||||
|
onChange={(e) => setImageXorKey(e.target.value)}
|
||||||
|
onBlur={syncCurrentKeys}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>图片 AES 密钥 <span className="optional">(可选)</span></label>
|
<label>图片 AES 密钥 <span className="optional">(可选)</span></label>
|
||||||
<span className="form-hint">16 位密钥</span>
|
<span className="form-hint">16 位密钥</span>
|
||||||
<input type="text" placeholder="16 位 AES 密钥" value={imageAesKey} onChange={(e) => setImageAesKey(e.target.value)} />
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="16 位 AES 密钥"
|
||||||
|
value={imageAesKey}
|
||||||
|
onChange={(e) => setImageAesKey(e.target.value)}
|
||||||
|
onBlur={syncCurrentKeys}
|
||||||
|
/>
|
||||||
<button className="btn btn-secondary btn-sm" onClick={handleAutoGetImageKey} disabled={isFetchingImageKey}>
|
<button className="btn btn-secondary btn-sm" onClick={handleAutoGetImageKey} disabled={isFetchingImageKey}>
|
||||||
<Plug size={14} /> {isFetchingImageKey ? '获取中...' : '自动获取图片密钥'}
|
<Plug size={14} /> {isFetchingImageKey ? '获取中...' : '自动获取图片密钥'}
|
||||||
</button>
|
</button>
|
||||||
@@ -1162,7 +1248,15 @@ function SettingsPage() {
|
|||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>缓存目录 <span className="optional">(可选)</span></label>
|
<label>缓存目录 <span className="optional">(可选)</span></label>
|
||||||
<span className="form-hint">留空使用默认目录</span>
|
<span className="form-hint">留空使用默认目录</span>
|
||||||
<input type="text" placeholder="留空使用默认目录" value={cachePath} onChange={(e) => setCachePath(e.target.value)} />
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="留空使用默认目录"
|
||||||
|
value={cachePath}
|
||||||
|
onChange={(e) => setCachePath(e.target.value)}
|
||||||
|
onBlur={async () => {
|
||||||
|
await configService.setCachePath(cachePath)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<div className="btn-row">
|
<div className="btn-row">
|
||||||
<button className="btn btn-secondary" onClick={handleSelectCachePath}><FolderOpen size={16} /> 浏览选择</button>
|
<button className="btn btn-secondary" onClick={handleSelectCachePath}><FolderOpen size={16} /> 浏览选择</button>
|
||||||
<button className="btn btn-secondary" onClick={() => setCachePath('')}><RotateCcw size={16} /> 恢复默认</button>
|
<button className="btn btn-secondary" onClick={() => setCachePath('')}><RotateCcw size={16} /> 恢复默认</button>
|
||||||
@@ -1189,6 +1283,137 @@ function SettingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const handleSetupHello = async () => {
|
||||||
|
setIsSettingHello(true)
|
||||||
|
try {
|
||||||
|
const challenge = new Uint8Array(32)
|
||||||
|
window.crypto.getRandomValues(challenge)
|
||||||
|
|
||||||
|
const credential = await navigator.credentials.create({
|
||||||
|
publicKey: {
|
||||||
|
challenge,
|
||||||
|
rp: { name: 'WeFlow', id: 'localhost' },
|
||||||
|
user: { id: new Uint8Array([1]), name: 'user', displayName: 'User' },
|
||||||
|
pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
|
||||||
|
authenticatorSelection: { userVerification: 'required' },
|
||||||
|
timeout: 60000
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (credential) {
|
||||||
|
setAuthUseHello(true)
|
||||||
|
await configService.setAuthUseHello(true)
|
||||||
|
showMessage('Windows Hello 设置成功', true)
|
||||||
|
}
|
||||||
|
} catch (e: any) {
|
||||||
|
if (e.name !== 'NotAllowedError') {
|
||||||
|
showMessage(`Windows Hello 设置失败: ${e.message}`, false)
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setIsSettingHello(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleUpdatePassword = async () => {
|
||||||
|
if (!newPassword || newPassword !== confirmPassword) {
|
||||||
|
showMessage('两次密码不一致', false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 简单的保存逻辑,实际上应该先验证旧密码,但为了简化流程,这里直接允许覆盖
|
||||||
|
// 因为能进入设置页面说明已经解锁了
|
||||||
|
try {
|
||||||
|
const hash = await sha256(newPassword)
|
||||||
|
await configService.setAuthPassword(hash)
|
||||||
|
await configService.setAuthEnabled(true)
|
||||||
|
setAuthEnabled(true)
|
||||||
|
setNewPassword('')
|
||||||
|
setConfirmPassword('')
|
||||||
|
showMessage('密码已更新', true)
|
||||||
|
} catch (e: any) {
|
||||||
|
showMessage('密码更新失败', false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderSecurityTab = () => (
|
||||||
|
<div className="tab-content">
|
||||||
|
<div className="form-group">
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<div>
|
||||||
|
<label>启用应用锁</label>
|
||||||
|
<span className="form-hint">每次启动应用时需要验证密码</span>
|
||||||
|
</div>
|
||||||
|
<label className="switch">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={authEnabled}
|
||||||
|
onChange={async (e) => {
|
||||||
|
const enabled = e.target.checked
|
||||||
|
setAuthEnabled(enabled)
|
||||||
|
await configService.setAuthEnabled(enabled)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span className="switch-slider" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="divider" />
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label>重置密码</label>
|
||||||
|
<span className="form-hint">设置新的启动密码</span>
|
||||||
|
|
||||||
|
<div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
className="field-input"
|
||||||
|
placeholder="新密码"
|
||||||
|
value={newPassword}
|
||||||
|
onChange={e => setNewPassword(e.target.value)}
|
||||||
|
/>
|
||||||
|
<div style={{ display: 'flex', gap: 10 }}>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
className="field-input"
|
||||||
|
placeholder="确认新密码"
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={e => setConfirmPassword(e.target.value)}
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
/>
|
||||||
|
<button className="btn btn-primary" onClick={handleUpdatePassword} disabled={!newPassword}>更新</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="divider" />
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<div>
|
||||||
|
<label>Windows Hello</label>
|
||||||
|
<span className="form-hint">使用面容、指纹快速解锁</span>
|
||||||
|
{!helloAvailable && <div className="form-hint warning" style={{ color: '#ff4d4f' }}> 当前设备不支持 Windows Hello</div>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{authUseHello ? (
|
||||||
|
<button className="btn btn-secondary btn-sm" onClick={() => setAuthUseHello(false)}>关闭</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
className="btn btn-secondary btn-sm"
|
||||||
|
onClick={handleSetupHello}
|
||||||
|
disabled={!helloAvailable || isSettingHello}
|
||||||
|
>
|
||||||
|
{isSettingHello ? '设置中...' : '开启与设置'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
const renderAboutTab = () => (
|
const renderAboutTab = () => (
|
||||||
<div className="tab-content about-tab">
|
<div className="tab-content about-tab">
|
||||||
<div className="about-card">
|
<div className="about-card">
|
||||||
@@ -1204,23 +1429,26 @@ function SettingsPage() {
|
|||||||
<>
|
<>
|
||||||
<p className="update-hint">新版 v{updateInfo.version} 可用</p>
|
<p className="update-hint">新版 v{updateInfo.version} 可用</p>
|
||||||
{isDownloading ? (
|
{isDownloading ? (
|
||||||
<div className="download-progress">
|
<div className="update-progress">
|
||||||
<div className="progress-bar">
|
<div className="progress-bar">
|
||||||
<div className="progress-fill" style={{ width: `${downloadProgress}%` }} />
|
<div className="progress-inner" style={{ width: `${(downloadProgress?.percent || 0)}%` }} />
|
||||||
</div>
|
</div>
|
||||||
<span>{downloadProgress.toFixed(0)}%</span>
|
<span>{(downloadProgress?.percent || 0).toFixed(0)}%</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<button className="btn btn-primary" onClick={handleUpdateNow}>
|
<button className="btn btn-primary" onClick={() => setShowUpdateDialog(true)}>
|
||||||
<Download size={16} /> 立即更新
|
<Download size={16} /> 立即更新
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
|
||||||
<button className="btn btn-secondary" onClick={handleCheckUpdate} disabled={isCheckingUpdate}>
|
<button className="btn btn-secondary" onClick={handleCheckUpdate} disabled={isCheckingUpdate}>
|
||||||
<RefreshCw size={16} className={isCheckingUpdate ? 'spin' : ''} />
|
<RefreshCw size={16} className={isCheckingUpdate ? 'spin' : ''} />
|
||||||
{isCheckingUpdate ? '检查中...' : '检查更新'}
|
{isCheckingUpdate ? '检查中...' : '检查更新'}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1276,9 +1504,6 @@ function SettingsPage() {
|
|||||||
<button className="btn btn-secondary" onClick={handleTestConnection} disabled={isLoading || isTesting}>
|
<button className="btn btn-secondary" onClick={handleTestConnection} disabled={isLoading || isTesting}>
|
||||||
<Plug size={16} /> {isTesting ? '测试中...' : '测试连接'}
|
<Plug size={16} /> {isTesting ? '测试中...' : '测试连接'}
|
||||||
</button>
|
</button>
|
||||||
<button className="btn btn-primary" onClick={handleSaveConfig} disabled={isLoading}>
|
|
||||||
<Save size={16} /> {isLoading ? '保存中...' : '保存配置'}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -1297,8 +1522,10 @@ function SettingsPage() {
|
|||||||
{activeTab === 'whisper' && renderWhisperTab()}
|
{activeTab === 'whisper' && renderWhisperTab()}
|
||||||
{activeTab === 'export' && renderExportTab()}
|
{activeTab === 'export' && renderExportTab()}
|
||||||
{activeTab === 'cache' && renderCacheTab()}
|
{activeTab === 'cache' && renderCacheTab()}
|
||||||
|
{activeTab === 'security' && renderSecurityTab()}
|
||||||
{activeTab === 'about' && renderAboutTab()}
|
{activeTab === 'about' && renderAboutTab()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,70 +10,47 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sns-sidebar {
|
.sns-sidebar {
|
||||||
width: 300px;
|
width: 320px;
|
||||||
background: var(--bg-secondary);
|
background: var(--bg-secondary);
|
||||||
border-right: 1px solid var(--border-color);
|
border-left: 1px solid var(--border-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
&.closed {
|
&.closed {
|
||||||
width: 0;
|
width: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateX(-100%);
|
transform: translateX(100%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
border-left: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-header {
|
.sidebar-header {
|
||||||
padding: 18px 20px;
|
padding: 0 24px;
|
||||||
|
height: 64px;
|
||||||
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
/* justify-content: space-between; -- No longer needed as it's just h3 */
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
background: var(--bg-secondary);
|
||||||
.title-wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
|
|
||||||
.title-icon {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 15px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
letter-spacing: 0.5px;
|
color: var(--text-primary);
|
||||||
}
|
letter-spacing: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 5px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--hover-bg);
|
|
||||||
color: var(--accent-color);
|
|
||||||
border-color: var(--accent-color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-content {
|
.filter-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: hidden;
|
||||||
|
/* Changed from auto to hidden to allow inner scrolling of contact list */
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -86,6 +63,7 @@
|
|||||||
padding: 14px;
|
padding: 14px;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
|
||||||
@@ -172,7 +150,7 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 0; // 改为 0 以支持 flex 压缩
|
min-height: 200px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -181,7 +159,7 @@
|
|||||||
|
|
||||||
|
|
||||||
.filter-section {
|
.filter-section {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 0px;
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -258,12 +236,16 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.section-header {
|
.section-header {
|
||||||
padding: 16px 16px 1px 16px;
|
padding: 16px 16px 1px 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
/* Increased spacing */
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
.header-actions {
|
.header-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -306,6 +288,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -354,6 +337,7 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
margin: 0 4px 8px 4px;
|
margin: 0 4px 8px 4px;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
.contact-item {
|
.contact-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -524,6 +508,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.icon-btn {
|
.icon-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -553,6 +543,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.sns-content-wrapper {
|
.sns-content-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -739,6 +730,61 @@
|
|||||||
cursor: zoom-in;
|
cursor: zoom-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.live-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
left: 8px;
|
||||||
|
right: 8px;
|
||||||
|
left: auto;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
color: white;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn-overlay {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 6px;
|
||||||
|
right: 6px;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
transform: scale(1.1);
|
||||||
|
border-color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.download-btn-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.media-error-placeholder {
|
.media-error-placeholder {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@@ -938,3 +984,196 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Debug Dialog Styles
|
||||||
|
.debug-btn {
|
||||||
|
margin-left: auto;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
padding: 6px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 10000;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-dialog {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 800px;
|
||||||
|
max-height: 85vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
.debug-dialog-header {
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-dialog-body {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.debug-section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin: 0 0 12px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent-color);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 8px 0;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.debug-key {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
min-width: 140px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: 'Consolas', 'Microsoft YaHei', 'SimHei', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug-value {
|
||||||
|
flex: 1;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 13px;
|
||||||
|
word-break: break-all;
|
||||||
|
font-family: 'Consolas', 'Microsoft YaHei', 'SimHei', monospace;
|
||||||
|
user-select: text;
|
||||||
|
cursor: text;
|
||||||
|
padding: 2px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-debug-item {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.media-debug-header {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-photo-debug {
|
||||||
|
margin-top: 12px;
|
||||||
|
padding-top: 12px;
|
||||||
|
border-top: 1px dashed var(--border-color);
|
||||||
|
|
||||||
|
.live-photo-label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--accent-color);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.json-code {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
overflow-x: auto;
|
||||||
|
font-family: 'Consolas', 'Monaco', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
user-select: all;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-json-btn {
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--accent-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(var(--accent-color-rgb), 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,8 +1,9 @@
|
|||||||
import { useEffect, useState, useRef, useCallback, useMemo } from 'react'
|
import { useEffect, useState, useRef, useCallback, useMemo } from 'react'
|
||||||
import { RefreshCw, Heart, Search, Calendar, User, X, Filter, Play, ImageIcon } from 'lucide-react'
|
import { RefreshCw, Heart, Search, Calendar, User, X, Filter, Play, ImageIcon, Zap, Download, ChevronRight } from 'lucide-react'
|
||||||
import { Avatar } from '../components/Avatar'
|
import { Avatar } from '../components/Avatar'
|
||||||
import { ImagePreview } from '../components/ImagePreview'
|
import { ImagePreview } from '../components/ImagePreview'
|
||||||
import JumpToDateDialog from '../components/JumpToDateDialog'
|
import JumpToDateDialog from '../components/JumpToDateDialog'
|
||||||
|
import { LivePhotoIcon } from '../components/LivePhotoIcon'
|
||||||
import './SnsPage.scss'
|
import './SnsPage.scss'
|
||||||
|
|
||||||
interface SnsPost {
|
interface SnsPost {
|
||||||
@@ -13,29 +14,64 @@ interface SnsPost {
|
|||||||
createTime: number
|
createTime: number
|
||||||
contentDesc: string
|
contentDesc: string
|
||||||
type?: number
|
type?: number
|
||||||
media: { url: string; thumb: string }[]
|
media: {
|
||||||
|
url: string
|
||||||
|
thumb: string
|
||||||
|
md5?: string
|
||||||
|
token?: string
|
||||||
|
key?: string
|
||||||
|
encIdx?: string
|
||||||
|
livePhoto?: {
|
||||||
|
url: string
|
||||||
|
thumb: string
|
||||||
|
token?: string
|
||||||
|
key?: string
|
||||||
|
encIdx?: string
|
||||||
|
}
|
||||||
|
}[]
|
||||||
likes: string[]
|
likes: string[]
|
||||||
comments: { id: string; nickname: string; content: string; refCommentId: string; refNickname?: string }[]
|
comments: { id: string; nickname: string; content: string; refCommentId: string; refNickname?: string }[]
|
||||||
|
rawXml?: string // 原始 XML 数据
|
||||||
}
|
}
|
||||||
|
|
||||||
const MediaItem = ({ url, thumb, onPreview }: { url: string, thumb: string, onPreview: () => void }) => {
|
const MediaItem = ({ media, onPreview }: { media: any, onPreview: () => void }) => {
|
||||||
const [error, setError] = useState(false);
|
const [error, setError] = useState(false);
|
||||||
|
const { url, thumb, livePhoto } = media;
|
||||||
|
const isLive = !!livePhoto;
|
||||||
|
const targetUrl = thumb || url;
|
||||||
|
|
||||||
|
const handleDownload = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
let downloadUrl = url;
|
||||||
|
let downloadKey = media.key || '';
|
||||||
|
|
||||||
|
if (isLive && media.livePhoto) {
|
||||||
|
downloadUrl = media.livePhoto.url;
|
||||||
|
downloadKey = media.livePhoto.key || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: 调用后端下载服务
|
||||||
|
// window.electronAPI.sns.download(downloadUrl, downloadKey);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`media-item ${error ? 'error' : ''}`}>
|
<div className={`media-item ${error ? 'error' : ''}`} onClick={onPreview}>
|
||||||
{!error ? (
|
|
||||||
<img
|
<img
|
||||||
src={thumb || url}
|
src={targetUrl}
|
||||||
alt=""
|
alt=""
|
||||||
|
referrerPolicy="no-referrer"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
onClick={onPreview}
|
|
||||||
onError={() => setError(true)}
|
onError={() => setError(true)}
|
||||||
/>
|
/>
|
||||||
) : (
|
{isLive && (
|
||||||
<div className="media-error-placeholder" onClick={onPreview}>
|
<div className="live-badge">
|
||||||
<ImageIcon size={24} style={{ opacity: 0.3 }} />
|
<LivePhotoIcon size={16} className="live-icon" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<button className="download-btn-overlay" onClick={handleDownload} title="下载原图">
|
||||||
|
<Download size={14} />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -65,6 +101,7 @@ export default function SnsPage() {
|
|||||||
const [showJumpDialog, setShowJumpDialog] = useState(false)
|
const [showJumpDialog, setShowJumpDialog] = useState(false)
|
||||||
const [jumpTargetDate, setJumpTargetDate] = useState<Date | undefined>(undefined)
|
const [jumpTargetDate, setJumpTargetDate] = useState<Date | undefined>(undefined)
|
||||||
const [previewImage, setPreviewImage] = useState<string | null>(null)
|
const [previewImage, setPreviewImage] = useState<string | null>(null)
|
||||||
|
const [debugPost, setDebugPost] = useState<SnsPost | null>(null)
|
||||||
|
|
||||||
const postsContainerRef = useRef<HTMLDivElement>(null)
|
const postsContainerRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
@@ -347,16 +384,157 @@ export default function SnsPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="sns-page">
|
<div className="sns-page">
|
||||||
<div className="sns-container">
|
<div className="sns-container">
|
||||||
{/* 侧边栏:过滤与搜索 */}
|
<main className="sns-main">
|
||||||
|
<div className="sns-header">
|
||||||
|
<div className="header-left">
|
||||||
|
<h2>社交动态</h2>
|
||||||
|
</div>
|
||||||
|
<div className="header-right">
|
||||||
|
<button
|
||||||
|
className={`icon-btn sidebar-trigger ${isSidebarOpen ? 'active' : ''}`}
|
||||||
|
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
||||||
|
title={isSidebarOpen ? "收起筛选" : "打开筛选"}
|
||||||
|
>
|
||||||
|
<Filter size={18} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (jumpTargetDate) setJumpTargetDate(undefined);
|
||||||
|
loadPosts({ reset: true });
|
||||||
|
}}
|
||||||
|
disabled={loading || loadingNewer}
|
||||||
|
className="icon-btn refresh-btn"
|
||||||
|
title="刷新"
|
||||||
|
>
|
||||||
|
<RefreshCw size={18} className={(loading || loadingNewer) ? 'spinning' : ''} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sns-content-wrapper">
|
||||||
|
<div className="sns-content custom-scrollbar" onScroll={handleScroll} onWheel={handleWheel} ref={postsContainerRef}>
|
||||||
|
<div className="posts-list">
|
||||||
|
{loadingNewer && (
|
||||||
|
<div className="status-indicator loading-newer">
|
||||||
|
<RefreshCw size={16} className="spinning" />
|
||||||
|
<span>正在检查更新的动态...</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!loadingNewer && hasNewer && (
|
||||||
|
<div className="status-indicator newer-hint" onClick={() => loadPosts({ direction: 'newer' })}>
|
||||||
|
查看更新的动态
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{posts.map((post, index) => {
|
||||||
|
return (
|
||||||
|
<div key={post.id} className="sns-post-row">
|
||||||
|
<div className="sns-post-wrapper">
|
||||||
|
<div className="sns-post">
|
||||||
|
<div className="post-header">
|
||||||
|
<Avatar
|
||||||
|
src={post.avatarUrl}
|
||||||
|
name={post.nickname}
|
||||||
|
size={44}
|
||||||
|
shape="rounded"
|
||||||
|
/>
|
||||||
|
<div className="post-info">
|
||||||
|
<div className="nickname">{post.nickname}</div>
|
||||||
|
<div className="time">{formatTime(post.createTime)}</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="debug-btn"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setDebugPost(post);
|
||||||
|
}}
|
||||||
|
title="查看原始数据"
|
||||||
|
>
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<polyline points="16 18 22 12 16 6"></polyline>
|
||||||
|
<polyline points="8 6 2 12 8 18"></polyline>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="post-body">
|
||||||
|
{post.contentDesc && <div className="post-text">{post.contentDesc}</div>}
|
||||||
|
|
||||||
|
{post.type === 15 ? (
|
||||||
|
<div className="post-video-placeholder">
|
||||||
|
<Play size={20} />
|
||||||
|
<span>视频动态</span>
|
||||||
|
</div>
|
||||||
|
) : post.media.length > 0 && (
|
||||||
|
<div className={`post-media-grid media-count-${Math.min(post.media.length, 9)}`}>
|
||||||
|
{post.media.map((m, idx) => (
|
||||||
|
<MediaItem key={idx} media={m} onPreview={() => setPreviewImage(m.url)} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(post.likes.length > 0 || post.comments.length > 0) && (
|
||||||
|
<div className="post-footer">
|
||||||
|
{post.likes.length > 0 && (
|
||||||
|
<div className="likes-section">
|
||||||
|
<Heart size={14} className="icon" />
|
||||||
|
<span className="likes-list">
|
||||||
|
{post.likes.join('、')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{post.comments.length > 0 && (
|
||||||
|
<div className="comments-section">
|
||||||
|
{post.comments.map((c, idx) => (
|
||||||
|
<div key={idx} className="comment-item">
|
||||||
|
<span className="comment-user">{c.nickname}</span>
|
||||||
|
{c.refNickname && (
|
||||||
|
<>
|
||||||
|
<span className="reply-text">回复</span>
|
||||||
|
<span className="comment-user">{c.refNickname}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<span className="comment-separator">: </span>
|
||||||
|
<span className="comment-content">{c.content}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading && <div className="status-indicator loading-more">
|
||||||
|
<RefreshCw size={16} className="spinning" />
|
||||||
|
<span>正在加载更多...</span>
|
||||||
|
</div>}
|
||||||
|
{!hasMore && posts.length > 0 && <div className="status-indicator no-more">已经到底啦</div>}
|
||||||
|
{!loading && posts.length === 0 && (
|
||||||
|
<div className="no-results">
|
||||||
|
<div className="no-results-icon"><Search size={48} /></div>
|
||||||
|
<p>未找到相关动态</p>
|
||||||
|
{(selectedUsernames.length > 0 || searchKeyword) && (
|
||||||
|
<button onClick={clearFilters} className="reset-inline">
|
||||||
|
重置搜索条件
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* 侧边栏:过滤与搜索 (moved to right) */}
|
||||||
<aside className={`sns-sidebar ${isSidebarOpen ? 'open' : 'closed'}`}>
|
<aside className={`sns-sidebar ${isSidebarOpen ? 'open' : 'closed'}`}>
|
||||||
<div className="sidebar-header">
|
<div className="sidebar-header">
|
||||||
<div className="title-wrapper">
|
|
||||||
<Filter size={18} className="title-icon" />
|
|
||||||
<h3>筛选条件</h3>
|
<h3>筛选条件</h3>
|
||||||
</div>
|
|
||||||
<button className="toggle-btn" onClick={() => setIsSidebarOpen(false)}>
|
|
||||||
<X size={18} />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="filter-content custom-scrollbar">
|
<div className="filter-content custom-scrollbar">
|
||||||
@@ -460,136 +638,6 @@ export default function SnsPage() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<main className="sns-main">
|
|
||||||
<div className="sns-header">
|
|
||||||
<div className="header-left">
|
|
||||||
{!isSidebarOpen && (
|
|
||||||
<button className="icon-btn sidebar-trigger" onClick={() => setIsSidebarOpen(true)}>
|
|
||||||
<Filter size={20} />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<h2>社交动态</h2>
|
|
||||||
</div>
|
|
||||||
<div className="header-right">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
if (jumpTargetDate) setJumpTargetDate(undefined);
|
|
||||||
loadPosts({ reset: true });
|
|
||||||
}}
|
|
||||||
disabled={loading || loadingNewer}
|
|
||||||
className="icon-btn refresh-btn"
|
|
||||||
>
|
|
||||||
<RefreshCw size={18} className={(loading || loadingNewer) ? 'spinning' : ''} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="sns-content-wrapper">
|
|
||||||
<div className="sns-content custom-scrollbar" onScroll={handleScroll} onWheel={handleWheel} ref={postsContainerRef}>
|
|
||||||
<div className="posts-list">
|
|
||||||
{loadingNewer && (
|
|
||||||
<div className="status-indicator loading-newer">
|
|
||||||
<RefreshCw size={16} className="spinning" />
|
|
||||||
<span>正在检查更新的动态...</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!loadingNewer && hasNewer && (
|
|
||||||
<div className="status-indicator newer-hint" onClick={() => loadPosts({ direction: 'newer' })}>
|
|
||||||
查看更新的动态
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{posts.map((post, index) => {
|
|
||||||
return (
|
|
||||||
<div key={post.id} className="sns-post-row">
|
|
||||||
<div className="sns-post-wrapper">
|
|
||||||
<div className="sns-post">
|
|
||||||
<div className="post-header">
|
|
||||||
<Avatar
|
|
||||||
src={post.avatarUrl}
|
|
||||||
name={post.nickname}
|
|
||||||
size={44}
|
|
||||||
shape="rounded"
|
|
||||||
/>
|
|
||||||
<div className="post-info">
|
|
||||||
<div className="nickname">{post.nickname}</div>
|
|
||||||
<div className="time">{formatTime(post.createTime)}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="post-body">
|
|
||||||
{post.contentDesc && <div className="post-text">{post.contentDesc}</div>}
|
|
||||||
|
|
||||||
{post.type === 15 ? (
|
|
||||||
<div className="post-video-placeholder">
|
|
||||||
<Play size={20} />
|
|
||||||
<span>视频动态</span>
|
|
||||||
</div>
|
|
||||||
) : post.media.length > 0 && (
|
|
||||||
<div className={`post-media-grid media-count-${Math.min(post.media.length, 9)}`}>
|
|
||||||
{post.media.map((m, idx) => (
|
|
||||||
<MediaItem key={idx} url={m.url} thumb={m.thumb} onPreview={() => setPreviewImage(m.url)} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{(post.likes.length > 0 || post.comments.length > 0) && (
|
|
||||||
<div className="post-footer">
|
|
||||||
{post.likes.length > 0 && (
|
|
||||||
<div className="likes-section">
|
|
||||||
<Heart size={14} className="icon" />
|
|
||||||
<span className="likes-list">
|
|
||||||
{post.likes.join('、')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{post.comments.length > 0 && (
|
|
||||||
<div className="comments-section">
|
|
||||||
{post.comments.map((c, idx) => (
|
|
||||||
<div key={idx} className="comment-item">
|
|
||||||
<span className="comment-user">{c.nickname}</span>
|
|
||||||
{c.refNickname && (
|
|
||||||
<>
|
|
||||||
<span className="reply-text">回复</span>
|
|
||||||
<span className="comment-user">{c.refNickname}</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<span className="comment-separator">: </span>
|
|
||||||
<span className="comment-content">{c.content}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading && <div className="status-indicator loading-more">
|
|
||||||
<RefreshCw size={16} className="spinning" />
|
|
||||||
<span>正在加载更多...</span>
|
|
||||||
</div>}
|
|
||||||
{!hasMore && posts.length > 0 && <div className="status-indicator no-more">已经到底啦</div>}
|
|
||||||
{!loading && posts.length === 0 && (
|
|
||||||
<div className="no-results">
|
|
||||||
<div className="no-results-icon"><Search size={48} /></div>
|
|
||||||
<p>未找到相关动态</p>
|
|
||||||
{(selectedUsernames.length > 0 || searchKeyword) && (
|
|
||||||
<button onClick={clearFilters} className="reset-inline">
|
|
||||||
重置搜索条件
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
{previewImage && (
|
{previewImage && (
|
||||||
<ImagePreview src={previewImage} onClose={() => setPreviewImage(null)} />
|
<ImagePreview src={previewImage} onClose={() => setPreviewImage(null)} />
|
||||||
@@ -605,6 +653,154 @@ export default function SnsPage() {
|
|||||||
}}
|
}}
|
||||||
currentDate={jumpTargetDate || new Date()}
|
currentDate={jumpTargetDate || new Date()}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Debug Info Dialog */}
|
||||||
|
{debugPost && (
|
||||||
|
<div className="modal-overlay" onClick={() => setDebugPost(null)}>
|
||||||
|
<div className="debug-dialog" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<div className="debug-dialog-header">
|
||||||
|
<h3>原始数据 - {debugPost.nickname}</h3>
|
||||||
|
<button className="close-btn" onClick={() => setDebugPost(null)}>
|
||||||
|
<X size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="debug-dialog-body">
|
||||||
|
|
||||||
|
<div className="debug-section">
|
||||||
|
<h4>ℹ 基本信息</h4>
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">ID:</span>
|
||||||
|
<span className="debug-value">{debugPost.id}</span>
|
||||||
|
</div>
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">用户名:</span>
|
||||||
|
<span className="debug-value">{debugPost.username}</span>
|
||||||
|
</div>
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">昵称:</span>
|
||||||
|
<span className="debug-value">{debugPost.nickname}</span>
|
||||||
|
</div>
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">时间:</span>
|
||||||
|
<span className="debug-value">{new Date(debugPost.createTime * 1000).toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">类型:</span>
|
||||||
|
<span className="debug-value">{debugPost.type}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="debug-section">
|
||||||
|
<h4> 媒体信息 ({debugPost.media.length} 项)</h4>
|
||||||
|
{debugPost.media.map((media, idx) => (
|
||||||
|
<div key={idx} className="media-debug-item">
|
||||||
|
<div className="media-debug-header">媒体 {idx + 1}</div>
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">URL:</span>
|
||||||
|
<span className="debug-value">{media.url}</span>
|
||||||
|
</div>
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">缩略图:</span>
|
||||||
|
<span className="debug-value">{media.thumb}</span>
|
||||||
|
</div>
|
||||||
|
{media.md5 && (
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">MD5:</span>
|
||||||
|
<span className="debug-value">{media.md5}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{media.token && (
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">Token:</span>
|
||||||
|
<span className="debug-value">{media.token}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{media.key && (
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">Key (解密密钥):</span>
|
||||||
|
<span className="debug-value">{media.key}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{media.encIdx && (
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">Enc Index:</span>
|
||||||
|
<span className="debug-value">{media.encIdx}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{media.livePhoto && (
|
||||||
|
<div className="live-photo-debug">
|
||||||
|
<div className="live-photo-label"> Live Photo 视频部分:</div>
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">视频 URL:</span>
|
||||||
|
<span className="debug-value">{media.livePhoto.url}</span>
|
||||||
|
</div>
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">视频缩略图:</span>
|
||||||
|
<span className="debug-value">{media.livePhoto.thumb}</span>
|
||||||
|
</div>
|
||||||
|
{media.livePhoto.token && (
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">视频 Token:</span>
|
||||||
|
<span className="debug-value">{media.livePhoto.token}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{media.livePhoto.key && (
|
||||||
|
<div className="debug-item">
|
||||||
|
<span className="debug-key">视频 Key:</span>
|
||||||
|
<span className="debug-value">{media.livePhoto.key}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 原始 XML */}
|
||||||
|
{debugPost.rawXml && (
|
||||||
|
<div className="debug-section">
|
||||||
|
<h4> 原始 XML 数据</h4>
|
||||||
|
<pre className="json-code">{(() => {
|
||||||
|
// XML 缩进格式化
|
||||||
|
let formatted = '';
|
||||||
|
let indent = 0;
|
||||||
|
const tab = ' ';
|
||||||
|
const parts = debugPost.rawXml.split(/(<[^>]+>)/g).filter(p => p.trim());
|
||||||
|
|
||||||
|
for (const part of parts) {
|
||||||
|
if (!part.startsWith('<')) {
|
||||||
|
if (part.trim()) formatted += part;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (part.startsWith('</')) {
|
||||||
|
indent = Math.max(0, indent - 1);
|
||||||
|
formatted += '\n' + tab.repeat(indent) + part;
|
||||||
|
} else if (part.endsWith('/>')) {
|
||||||
|
formatted += '\n' + tab.repeat(indent) + part;
|
||||||
|
} else {
|
||||||
|
formatted += '\n' + tab.repeat(indent) + part;
|
||||||
|
indent++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return formatted.trim();
|
||||||
|
})()}</pre>
|
||||||
|
<button
|
||||||
|
className="copy-json-btn"
|
||||||
|
onClick={() => {
|
||||||
|
navigator.clipboard.writeText(debugPost.rawXml || '');
|
||||||
|
alert('已复制 XML 到剪贴板');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
复制 XML
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -112,7 +112,6 @@
|
|||||||
-webkit-app-region: drag;
|
-webkit-app-region: drag;
|
||||||
|
|
||||||
[data-mode="dark"] & {
|
[data-mode="dark"] & {
|
||||||
background: #18181b;
|
|
||||||
border-right-color: rgba(255, 255, 255, 0.08);
|
border-right-color: rgba(255, 255, 255, 0.08);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -152,7 +151,7 @@
|
|||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
|
|
||||||
[data-mode="dark"] .welcome-sidebar & {
|
[data-mode="dark"] .welcome-sidebar & {
|
||||||
color: rgba(255, 255, 255, 0.45);
|
color: rgba(255, 255, 255, 0.6); // 稍微调亮一点
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -188,7 +187,7 @@
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
|
||||||
[data-mode="dark"] .welcome-sidebar & {
|
[data-mode="dark"] .welcome-sidebar & {
|
||||||
opacity: 0.7;
|
opacity: 0.75; // 整体调亮一点,原来是0.7
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active,
|
&.active,
|
||||||
@@ -236,8 +235,8 @@
|
|||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
[data-mode="dark"] .welcome-sidebar & {
|
[data-mode="dark"] .welcome-sidebar & {
|
||||||
border-color: rgba(255, 255, 255, 0.1);
|
border-color: rgba(255, 255, 255, 0.2); // 稍微调亮边框
|
||||||
background: rgba(255, 255, 255, 0.03);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item.active & {
|
.nav-item.active & {
|
||||||
@@ -281,7 +280,7 @@
|
|||||||
color: #1a1a1a;
|
color: #1a1a1a;
|
||||||
|
|
||||||
[data-mode="dark"] .welcome-sidebar & {
|
[data-mode="dark"] .welcome-sidebar & {
|
||||||
color: #ffffff;
|
color: rgba(255, 255, 255, 0.9); // 提高非活动标题亮度
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item.active & {
|
.nav-item.active & {
|
||||||
@@ -299,7 +298,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-item.active & {
|
.nav-item.active & {
|
||||||
color: rgba(255, 255, 255, 0.85);
|
color: #ffffff; // 活动描述使用纯白
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -315,7 +315,7 @@
|
|||||||
border-top: 1px dashed var(--border-color);
|
border-top: 1px dashed var(--border-color);
|
||||||
|
|
||||||
[data-mode="dark"] .welcome-sidebar & {
|
[data-mode="dark"] .welcome-sidebar & {
|
||||||
color: rgba(255, 255, 255, 0.5);
|
color: rgba(255, 255, 255, 0.65); // 提高底部文字亮度
|
||||||
border-top-color: rgba(255, 255, 255, 0.1);
|
border-top-color: rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -15,7 +15,8 @@ const steps = [
|
|||||||
{ id: 'db', title: '数据库目录', desc: '定位 xwechat_files 目录' },
|
{ id: 'db', title: '数据库目录', desc: '定位 xwechat_files 目录' },
|
||||||
{ id: 'cache', title: '缓存目录', desc: '设置本地缓存存储位置(可选)' },
|
{ id: 'cache', title: '缓存目录', desc: '设置本地缓存存储位置(可选)' },
|
||||||
{ id: 'key', title: '解密密钥', desc: '获取密钥与自动识别账号' },
|
{ id: 'key', title: '解密密钥', desc: '获取密钥与自动识别账号' },
|
||||||
{ id: 'image', title: '图片密钥', desc: '获取 XOR 与 AES 密钥' }
|
{ id: 'image', title: '图片密钥', desc: '获取 XOR 与 AES 密钥' },
|
||||||
|
{ id: 'security', title: '安全防护', desc: '保护你的数据' }
|
||||||
]
|
]
|
||||||
|
|
||||||
interface WelcomePageProps {
|
interface WelcomePageProps {
|
||||||
@@ -46,6 +47,64 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
const [imageKeyStatus, setImageKeyStatus] = useState('')
|
const [imageKeyStatus, setImageKeyStatus] = useState('')
|
||||||
const [isManualStartPrompt, setIsManualStartPrompt] = useState(false)
|
const [isManualStartPrompt, setIsManualStartPrompt] = useState(false)
|
||||||
|
|
||||||
|
// 安全相关 state
|
||||||
|
const [enableAuth, setEnableAuth] = useState(false)
|
||||||
|
const [authPassword, setAuthPassword] = useState('')
|
||||||
|
const [authConfirmPassword, setAuthConfirmPassword] = useState('')
|
||||||
|
const [enableHello, setEnableHello] = useState(false)
|
||||||
|
const [helloAvailable, setHelloAvailable] = useState(false)
|
||||||
|
const [isSettingHello, setIsSettingHello] = useState(false)
|
||||||
|
|
||||||
|
// 检查 Hello 可用性
|
||||||
|
useEffect(() => {
|
||||||
|
if (window.PublicKeyCredential) {
|
||||||
|
void PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable().then(setHelloAvailable)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
async function sha256(message: string) {
|
||||||
|
const msgBuffer = new TextEncoder().encode(message)
|
||||||
|
const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer)
|
||||||
|
const hashArray = Array.from(new Uint8Array(hashBuffer))
|
||||||
|
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
|
||||||
|
return hashHex
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSetupHello = async () => {
|
||||||
|
setIsSettingHello(true)
|
||||||
|
try {
|
||||||
|
// 注册凭证 (WebAuthn)
|
||||||
|
const challenge = new Uint8Array(32)
|
||||||
|
window.crypto.getRandomValues(challenge)
|
||||||
|
|
||||||
|
const credential = await navigator.credentials.create({
|
||||||
|
publicKey: {
|
||||||
|
challenge,
|
||||||
|
rp: { name: 'WeFlow', id: 'localhost' },
|
||||||
|
user: {
|
||||||
|
id: new Uint8Array([1]),
|
||||||
|
name: 'user',
|
||||||
|
displayName: 'User'
|
||||||
|
},
|
||||||
|
pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
|
||||||
|
authenticatorSelection: { userVerification: 'required' },
|
||||||
|
timeout: 60000
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (credential) {
|
||||||
|
setEnableHello(true)
|
||||||
|
// 成功提示?
|
||||||
|
}
|
||||||
|
} catch (e: any) {
|
||||||
|
if (e.name !== 'NotAllowedError') {
|
||||||
|
setError('Windows Hello 设置失败: ' + e.message)
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setIsSettingHello(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const removeDb = window.electronAPI.key.onDbKeyStatus((payload) => {
|
const removeDb = window.electronAPI.key.onDbKeyStatus((payload) => {
|
||||||
setDbKeyStatus(payload.message)
|
setDbKeyStatus(payload.message)
|
||||||
@@ -227,6 +286,12 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
if (currentStep.id === 'cache') return true
|
if (currentStep.id === 'cache') return true
|
||||||
if (currentStep.id === 'key') return decryptKey.length === 64 && Boolean(wxid)
|
if (currentStep.id === 'key') return decryptKey.length === 64 && Boolean(wxid)
|
||||||
if (currentStep.id === 'image') return true
|
if (currentStep.id === 'image') return true
|
||||||
|
if (currentStep.id === 'security') {
|
||||||
|
if (enableAuth) {
|
||||||
|
return authPassword.length > 0 && authPassword === authConfirmPassword
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -277,6 +342,15 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
imageXorKey: typeof parsedXorKey === 'number' && !Number.isNaN(parsedXorKey) ? parsedXorKey : 0,
|
imageXorKey: typeof parsedXorKey === 'number' && !Number.isNaN(parsedXorKey) ? parsedXorKey : 0,
|
||||||
imageAesKey
|
imageAesKey
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 保存安全配置
|
||||||
|
if (enableAuth && authPassword) {
|
||||||
|
const hash = await sha256(authPassword)
|
||||||
|
await configService.setAuthEnabled(true)
|
||||||
|
await configService.setAuthPassword(hash)
|
||||||
|
await configService.setAuthUseHello(enableHello)
|
||||||
|
}
|
||||||
|
|
||||||
await configService.setOnboardingDone(true)
|
await configService.setOnboardingDone(true)
|
||||||
|
|
||||||
setDbConnected(true, dbPath)
|
setDbConnected(true, dbPath)
|
||||||
@@ -450,7 +524,7 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
|
|
||||||
<div className="field-hint">请选择微信-设置-存储位置对应的目录</div>
|
<div className="field-hint">请选择微信-设置-存储位置对应的目录</div>
|
||||||
<div className="field-hint warning">
|
<div className="field-hint warning">
|
||||||
⚠️ 目录路径不可包含中文,如有中文请先在微信中迁移至全英文目录
|
目录路径不可包含中文,如有中文请先在微信中迁移至全英文目录
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -525,6 +599,74 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{currentStep.id === 'security' && (
|
||||||
|
<div className="form-group">
|
||||||
|
<div className="security-toggle-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
||||||
|
<div className="toggle-info">
|
||||||
|
<label className="field-label" style={{ marginBottom: 0 }}>启用应用锁</label>
|
||||||
|
<div className="field-hint">每次启动应用时需要验证密码</div>
|
||||||
|
</div>
|
||||||
|
<label className="switch">
|
||||||
|
<input type="checkbox" checked={enableAuth} onChange={e => setEnableAuth(e.target.checked)} />
|
||||||
|
<span className="switch-slider" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{enableAuth && (
|
||||||
|
<div className="security-settings" style={{ marginTop: 20, padding: 16, backgroundColor: 'var(--bg-secondary)', borderRadius: 8 }}>
|
||||||
|
<div className="form-group">
|
||||||
|
<label className="field-label">应用密码</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
className="field-input"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
value={authPassword}
|
||||||
|
onChange={e => setAuthPassword(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="form-group">
|
||||||
|
<label className="field-label">确认密码</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
className="field-input"
|
||||||
|
placeholder="请再次输入密码"
|
||||||
|
value={authConfirmPassword}
|
||||||
|
onChange={e => setAuthConfirmPassword(e.target.value)}
|
||||||
|
/>
|
||||||
|
{authPassword && authConfirmPassword && authPassword !== authConfirmPassword && (
|
||||||
|
<div className="error-text" style={{ color: '#ff4d4f', fontSize: 12, marginTop: 4 }}>两次密码不一致</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="divider" style={{ margin: '20px 0', borderTop: '1px solid var(--border-color)' }}></div>
|
||||||
|
|
||||||
|
<div className="security-toggle-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<div className="toggle-info">
|
||||||
|
<label className="field-label" style={{ marginBottom: 0 }}>Windows Hello</label>
|
||||||
|
<div className="field-hint">使用面容、指纹或 PIN 码快速解锁</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{enableHello ? (
|
||||||
|
<div style={{ color: '#52c41a', display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||||
|
<CheckCircle2 size={16} /> 已开启
|
||||||
|
<button className="btn btn-ghost btn-sm" onClick={() => setEnableHello(false)} style={{ padding: '2px 8px', height: 24, fontSize: 12 }}>关闭</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
className="btn btn-secondary btn-sm"
|
||||||
|
disabled={!helloAvailable || isSettingHello}
|
||||||
|
onClick={handleSetupHello}
|
||||||
|
>
|
||||||
|
{isSettingHello ? '设置中...' : (helloAvailable ? '点击开启' : '不可用')}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{!helloAvailable && <div className="field-hint warning"> 当前设备不支持 Windows Hello 或未设置 PIN 码</div>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{currentStep.id === 'image' && (
|
{currentStep.id === 'image' && (
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<div className="grid-2">
|
<div className="grid-2">
|
||||||
@@ -564,8 +706,8 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
|
|
||||||
{currentStep.id === 'intro' && (
|
{currentStep.id === 'intro' && (
|
||||||
<div className="intro-footer">
|
<div className="intro-footer">
|
||||||
<p>接下来的几个步骤将引导您连接本地微信数据库。</p>
|
<p>接下来的几个步骤将引导你连接本地微信数据库。</p>
|
||||||
<p>WeFlow 需要访问您的本地数据文件以提供分析与导出功能。</p>
|
<p>WeFlow 需要访问你的本地数据文件以提供分析与导出功能。</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -29,7 +29,13 @@ export const CONFIG_KEYS = {
|
|||||||
EXPORT_DEFAULT_MEDIA: 'exportDefaultMedia',
|
EXPORT_DEFAULT_MEDIA: 'exportDefaultMedia',
|
||||||
EXPORT_DEFAULT_VOICE_AS_TEXT: 'exportDefaultVoiceAsText',
|
EXPORT_DEFAULT_VOICE_AS_TEXT: 'exportDefaultVoiceAsText',
|
||||||
EXPORT_DEFAULT_EXCEL_COMPACT_COLUMNS: 'exportDefaultExcelCompactColumns',
|
EXPORT_DEFAULT_EXCEL_COMPACT_COLUMNS: 'exportDefaultExcelCompactColumns',
|
||||||
EXPORT_DEFAULT_TXT_COLUMNS: 'exportDefaultTxtColumns'
|
EXPORT_DEFAULT_TXT_COLUMNS: 'exportDefaultTxtColumns',
|
||||||
|
EXPORT_DEFAULT_CONCURRENCY: 'exportDefaultConcurrency',
|
||||||
|
|
||||||
|
// 安全
|
||||||
|
AUTH_ENABLED: 'authEnabled',
|
||||||
|
AUTH_PASSWORD: 'authPassword',
|
||||||
|
AUTH_USE_HELLO: 'authUseHello'
|
||||||
} as const
|
} as const
|
||||||
|
|
||||||
export interface WxidConfig {
|
export interface WxidConfig {
|
||||||
@@ -352,3 +358,44 @@ export async function getExportDefaultTxtColumns(): Promise<string[] | null> {
|
|||||||
export async function setExportDefaultTxtColumns(columns: string[]): Promise<void> {
|
export async function setExportDefaultTxtColumns(columns: string[]): Promise<void> {
|
||||||
await config.set(CONFIG_KEYS.EXPORT_DEFAULT_TXT_COLUMNS, columns)
|
await config.set(CONFIG_KEYS.EXPORT_DEFAULT_TXT_COLUMNS, columns)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取导出默认并发数
|
||||||
|
export async function getExportDefaultConcurrency(): Promise<number | null> {
|
||||||
|
const value = await config.get(CONFIG_KEYS.EXPORT_DEFAULT_CONCURRENCY)
|
||||||
|
if (typeof value === 'number' && Number.isFinite(value)) return value
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置导出默认并发数
|
||||||
|
export async function setExportDefaultConcurrency(concurrency: number): Promise<void> {
|
||||||
|
await config.set(CONFIG_KEYS.EXPORT_DEFAULT_CONCURRENCY, concurrency)
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 安全相关 ===
|
||||||
|
|
||||||
|
export async function getAuthEnabled(): Promise<boolean> {
|
||||||
|
const value = await config.get(CONFIG_KEYS.AUTH_ENABLED)
|
||||||
|
return value === true
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function setAuthEnabled(enabled: boolean): Promise<void> {
|
||||||
|
await config.set(CONFIG_KEYS.AUTH_ENABLED, enabled)
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getAuthPassword(): Promise<string> {
|
||||||
|
const value = await config.get(CONFIG_KEYS.AUTH_PASSWORD)
|
||||||
|
return (value as string) || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function setAuthPassword(passwordHash: string): Promise<void> {
|
||||||
|
await config.set(CONFIG_KEYS.AUTH_PASSWORD, passwordHash)
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getAuthUseHello(): Promise<boolean> {
|
||||||
|
const value = await config.get(CONFIG_KEYS.AUTH_USE_HELLO)
|
||||||
|
return value === true
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function setAuthUseHello(useHello: boolean): Promise<void> {
|
||||||
|
await config.set(CONFIG_KEYS.AUTH_USE_HELLO, useHello)
|
||||||
|
}
|
||||||
|
|||||||
@@ -10,10 +10,29 @@ export interface AppState {
|
|||||||
isLoading: boolean
|
isLoading: boolean
|
||||||
loadingText: string
|
loadingText: string
|
||||||
|
|
||||||
|
// 更新状态
|
||||||
|
updateInfo: {
|
||||||
|
hasUpdate: boolean
|
||||||
|
version?: string
|
||||||
|
releaseNotes?: string
|
||||||
|
} | null
|
||||||
|
isDownloading: boolean
|
||||||
|
downloadProgress: any
|
||||||
|
showUpdateDialog: boolean
|
||||||
|
updateError: string | null
|
||||||
|
|
||||||
// 操作
|
// 操作
|
||||||
setDbConnected: (connected: boolean, path?: string) => void
|
setDbConnected: (connected: boolean, path?: string) => void
|
||||||
setMyWxid: (wxid: string) => void
|
setMyWxid: (wxid: string) => void
|
||||||
setLoading: (loading: boolean, text?: string) => void
|
setLoading: (loading: boolean, text?: string) => void
|
||||||
|
|
||||||
|
// 更新操作
|
||||||
|
setUpdateInfo: (info: any) => void
|
||||||
|
setIsDownloading: (isDownloading: boolean) => void
|
||||||
|
setDownloadProgress: (progress: any) => void
|
||||||
|
setShowUpdateDialog: (show: boolean) => void
|
||||||
|
setUpdateError: (error: string | null) => void
|
||||||
|
|
||||||
reset: () => void
|
reset: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -24,6 +43,13 @@ export const useAppStore = create<AppState>((set) => ({
|
|||||||
isLoading: false,
|
isLoading: false,
|
||||||
loadingText: '',
|
loadingText: '',
|
||||||
|
|
||||||
|
// 更新状态初始化
|
||||||
|
updateInfo: null,
|
||||||
|
isDownloading: false,
|
||||||
|
downloadProgress: { percent: 0 },
|
||||||
|
showUpdateDialog: false,
|
||||||
|
updateError: null,
|
||||||
|
|
||||||
setDbConnected: (connected, path) => set({
|
setDbConnected: (connected, path) => set({
|
||||||
isDbConnected: connected,
|
isDbConnected: connected,
|
||||||
dbPath: path ?? null
|
dbPath: path ?? null
|
||||||
@@ -36,11 +62,22 @@ export const useAppStore = create<AppState>((set) => ({
|
|||||||
loadingText: text ?? ''
|
loadingText: text ?? ''
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
setUpdateInfo: (info) => set({ updateInfo: info, updateError: null }),
|
||||||
|
setIsDownloading: (isDownloading) => set({ isDownloading: isDownloading }),
|
||||||
|
setDownloadProgress: (progress) => set({ downloadProgress: progress }),
|
||||||
|
setShowUpdateDialog: (show) => set({ showUpdateDialog: show }),
|
||||||
|
setUpdateError: (error) => set({ updateError: error }),
|
||||||
|
|
||||||
reset: () => set({
|
reset: () => set({
|
||||||
isDbConnected: false,
|
isDbConnected: false,
|
||||||
dbPath: null,
|
dbPath: null,
|
||||||
myWxid: null,
|
myWxid: null,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
loadingText: ''
|
loadingText: '',
|
||||||
|
updateInfo: null,
|
||||||
|
isDownloading: false,
|
||||||
|
downloadProgress: { percent: 0 },
|
||||||
|
showUpdateDialog: false,
|
||||||
|
updateError: null
|
||||||
})
|
})
|
||||||
}))
|
}))
|
||||||
|
|||||||
@@ -235,7 +235,8 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html,
|
||||||
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: 'HarmonyOS Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
font-family: 'HarmonyOS Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -307,3 +308,60 @@ html, body {
|
|||||||
box-shadow: var(--shadow-sm);
|
box-shadow: var(--shadow-sm);
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 全局 Switch 开关样式
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 44px;
|
||||||
|
height: 24px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
transition: 0.3s;
|
||||||
|
border-radius: 24px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
left: 2px;
|
||||||
|
bottom: 2px;
|
||||||
|
background-color: var(--text-tertiary);
|
||||||
|
transition: 0.3s;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked+.switch-slider {
|
||||||
|
background-color: var(--primary);
|
||||||
|
border-color: var(--primary);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: translateX(20px);
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 禁用状态
|
||||||
|
input:disabled+.switch-slider {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -41,11 +41,12 @@ export const MESSAGE_TYPE_LABELS: Record<number, string> = {
|
|||||||
244813135921: '文本',
|
244813135921: '文本',
|
||||||
3: '图片',
|
3: '图片',
|
||||||
34: '语音',
|
34: '语音',
|
||||||
|
42: '名片',
|
||||||
43: '视频',
|
43: '视频',
|
||||||
47: '表情',
|
47: '表情',
|
||||||
48: '位置',
|
48: '位置',
|
||||||
49: '链接/文件',
|
49: '链接/文件',
|
||||||
42: '名片',
|
50: '通话',
|
||||||
10000: '系统消息',
|
10000: '系统消息',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
35
src/types/electron.d.ts
vendored
35
src/types/electron.d.ts
vendored
@@ -1,4 +1,4 @@
|
|||||||
import type { ChatSession, Message, Contact } from './models'
|
import type { ChatSession, Message, Contact, ContactInfo } from './models'
|
||||||
|
|
||||||
export interface ElectronAPI {
|
export interface ElectronAPI {
|
||||||
window: {
|
window: {
|
||||||
@@ -11,6 +11,7 @@ export interface ElectronAPI {
|
|||||||
setTitleBarOverlay: (options: { symbolColor: string }) => void
|
setTitleBarOverlay: (options: { symbolColor: string }) => void
|
||||||
openVideoPlayerWindow: (videoPath: string, videoWidth?: number, videoHeight?: number) => Promise<void>
|
openVideoPlayerWindow: (videoPath: string, videoWidth?: number, videoHeight?: number) => Promise<void>
|
||||||
resizeToFitVideo: (videoWidth: number, videoHeight: number) => Promise<void>
|
resizeToFitVideo: (videoWidth: number, videoHeight: number) => Promise<void>
|
||||||
|
openChatHistoryWindow: (sessionId: string, messageId: number) => Promise<boolean>
|
||||||
}
|
}
|
||||||
config: {
|
config: {
|
||||||
get: (key: string) => Promise<unknown>
|
get: (key: string) => Promise<unknown>
|
||||||
@@ -76,6 +77,11 @@ export interface ElectronAPI {
|
|||||||
}>
|
}>
|
||||||
getContact: (username: string) => Promise<Contact | null>
|
getContact: (username: string) => Promise<Contact | null>
|
||||||
getContactAvatar: (username: string) => Promise<{ avatarUrl?: string; displayName?: string } | null>
|
getContactAvatar: (username: string) => Promise<{ avatarUrl?: string; displayName?: string } | null>
|
||||||
|
getContacts: () => Promise<{
|
||||||
|
success: boolean
|
||||||
|
contacts?: ContactInfo[]
|
||||||
|
error?: string
|
||||||
|
}>
|
||||||
getMyAvatarUrl: () => Promise<{ success: boolean; avatarUrl?: string; error?: string }>
|
getMyAvatarUrl: () => Promise<{ success: boolean; avatarUrl?: string; error?: string }>
|
||||||
downloadEmoji: (cdnUrl: string, md5?: string) => Promise<{ success: boolean; localPath?: string; error?: string }>
|
downloadEmoji: (cdnUrl: string, md5?: string) => Promise<{ success: boolean; localPath?: string; error?: string }>
|
||||||
close: () => Promise<boolean>
|
close: () => Promise<boolean>
|
||||||
@@ -101,6 +107,7 @@ export interface ElectronAPI {
|
|||||||
getVoiceTranscript: (sessionId: string, msgId: string, createTime?: number) => Promise<{ success: boolean; transcript?: string; error?: string }>
|
getVoiceTranscript: (sessionId: string, msgId: string, createTime?: number) => Promise<{ success: boolean; transcript?: string; error?: string }>
|
||||||
onVoiceTranscriptPartial: (callback: (payload: { msgId: string; text: string }) => void) => () => void
|
onVoiceTranscriptPartial: (callback: (payload: { msgId: string; text: string }) => void) => () => void
|
||||||
execQuery: (kind: string, path: string | null, sql: string) => Promise<{ success: boolean; rows?: any[]; error?: string }>
|
execQuery: (kind: string, path: string | null, sql: string) => Promise<{ success: boolean; rows?: any[]; error?: string }>
|
||||||
|
getMessage: (sessionId: string, localId: number) => Promise<{ success: boolean; message?: Message; error?: string }>
|
||||||
}
|
}
|
||||||
|
|
||||||
image: {
|
image: {
|
||||||
@@ -315,6 +322,11 @@ export interface ElectronAPI {
|
|||||||
success: boolean
|
success: boolean
|
||||||
error?: string
|
error?: string
|
||||||
}>
|
}>
|
||||||
|
exportContacts: (outputDir: string, options: { format: 'json' | 'csv' | 'vcf'; exportAvatars: boolean; contactTypes: { friends: boolean; groups: boolean; officials: boolean } }) => Promise<{
|
||||||
|
success: boolean
|
||||||
|
successCount?: number
|
||||||
|
error?: string
|
||||||
|
}>
|
||||||
onProgress: (callback: (payload: ExportProgress) => void) => () => void
|
onProgress: (callback: (payload: ExportProgress) => void) => () => void
|
||||||
}
|
}
|
||||||
whisper: {
|
whisper: {
|
||||||
@@ -333,12 +345,30 @@ export interface ElectronAPI {
|
|||||||
createTime: number
|
createTime: number
|
||||||
contentDesc: string
|
contentDesc: string
|
||||||
type?: number
|
type?: number
|
||||||
media: Array<{ url: string; thumb: string }>
|
media: Array<{
|
||||||
|
url: string
|
||||||
|
thumb: string
|
||||||
|
md5?: string
|
||||||
|
token?: string
|
||||||
|
key?: string
|
||||||
|
encIdx?: string
|
||||||
|
livePhoto?: {
|
||||||
|
url: string
|
||||||
|
thumb: string
|
||||||
|
md5?: string
|
||||||
|
token?: string
|
||||||
|
key?: string
|
||||||
|
encIdx?: string
|
||||||
|
}
|
||||||
|
}>
|
||||||
likes: Array<string>
|
likes: Array<string>
|
||||||
comments: Array<{ id: string; nickname: string; content: string; refCommentId: string; refNickname?: string }>
|
comments: Array<{ id: string; nickname: string; content: string; refCommentId: string; refNickname?: string }>
|
||||||
|
rawXml?: string
|
||||||
}>
|
}>
|
||||||
error?: string
|
error?: string
|
||||||
}>
|
}>
|
||||||
|
debugResource: (url: string) => Promise<{ success: boolean; status?: number; headers?: any; error?: string }>
|
||||||
|
proxyImage: (url: string) => Promise<{ success: boolean; dataUrl?: string; error?: string }>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -355,6 +385,7 @@ export interface ExportOptions {
|
|||||||
txtColumns?: string[]
|
txtColumns?: string[]
|
||||||
sessionLayout?: 'shared' | 'per-session'
|
sessionLayout?: 'shared' | 'per-session'
|
||||||
displayNamePreference?: 'group-nickname' | 'remark' | 'nickname'
|
displayNamePreference?: 'group-nickname' | 'remark' | 'nickname'
|
||||||
|
exportConcurrency?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ExportProgress {
|
export interface ExportProgress {
|
||||||
|
|||||||
@@ -23,6 +23,15 @@ export interface Contact {
|
|||||||
smallHeadUrl: string
|
smallHeadUrl: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface ContactInfo {
|
||||||
|
username: string
|
||||||
|
displayName: string
|
||||||
|
remark?: string
|
||||||
|
nickname?: string
|
||||||
|
avatarUrl?: string
|
||||||
|
type: 'friend' | 'group' | 'official' | 'other'
|
||||||
|
}
|
||||||
|
|
||||||
// 消息
|
// 消息
|
||||||
export interface Message {
|
export interface Message {
|
||||||
localId: number
|
localId: number
|
||||||
@@ -44,8 +53,44 @@ export interface Message {
|
|||||||
// 引用消息
|
// 引用消息
|
||||||
quotedContent?: string
|
quotedContent?: string
|
||||||
quotedSender?: string
|
quotedSender?: string
|
||||||
|
// Type 49 细分字段
|
||||||
|
linkTitle?: string // 链接/文件标题
|
||||||
|
linkUrl?: string // 链接 URL
|
||||||
|
linkThumb?: string // 链接缩略图
|
||||||
|
fileName?: string // 文件名
|
||||||
|
fileSize?: number // 文件大小
|
||||||
|
fileExt?: string // 文件扩展名
|
||||||
|
xmlType?: string // XML 中的 type 字段
|
||||||
|
// 名片消息
|
||||||
|
cardUsername?: string // 名片的微信ID
|
||||||
|
cardNickname?: string // 名片的昵称
|
||||||
|
// 聊天记录
|
||||||
|
chatRecordTitle?: string // 聊天记录标题
|
||||||
|
chatRecordList?: ChatRecordItem[] // 聊天记录列表
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 聊天记录项
|
||||||
|
export interface ChatRecordItem {
|
||||||
|
datatype: number // 消息类型
|
||||||
|
sourcename: string // 发送者
|
||||||
|
sourcetime: string // 时间
|
||||||
|
sourceheadurl?: string // 发送者头像
|
||||||
|
datadesc?: string // 内容描述
|
||||||
|
datatitle?: string // 标题
|
||||||
|
fileext?: string // 文件扩展名
|
||||||
|
datasize?: number // 文件大小
|
||||||
|
messageuuid?: string // 消息UUID
|
||||||
|
dataurl?: string // 数据URL
|
||||||
|
datathumburl?: string // 缩略图URL
|
||||||
|
datacdnurl?: string // CDN URL
|
||||||
|
aeskey?: string // AES密钥
|
||||||
|
md5?: string // MD5
|
||||||
|
imgheight?: number // 图片高度
|
||||||
|
imgwidth?: number // 图片宽度
|
||||||
|
duration?: number // 时长(毫秒)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// 分析数据
|
// 分析数据
|
||||||
export interface AnalyticsData {
|
export interface AnalyticsData {
|
||||||
totalMessages: number
|
totalMessages: number
|
||||||
|
|||||||
Reference in New Issue
Block a user