mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-26 07:35:50 +00:00
Compare commits
172 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
26d4751e80 | ||
|
|
b8120a5119 | ||
|
|
68a13cefc3 | ||
|
|
cd4b8f3702 | ||
|
|
c5956ba203 | ||
|
|
f456357e01 | ||
|
|
4ef821f45f | ||
|
|
912c78e9e9 | ||
|
|
bfcd154a25 | ||
|
|
a1c8ba48b0 | ||
|
|
f93369489d | ||
|
|
014f57f152 | ||
|
|
3f1eb58af4 | ||
|
|
97f0077e95 | ||
|
|
3d9b1b0f8c | ||
|
|
cf292ca9e2 | ||
|
|
97f14030de | ||
|
|
2cfe0d8ee8 | ||
|
|
a760f45823 | ||
|
|
baa949a301 | ||
|
|
c29bbab25f | ||
|
|
29981e1232 | ||
|
|
2d043cd929 | ||
|
|
d6dca0e5f7 | ||
|
|
d47166e6f9 | ||
|
|
6e3bb9e361 | ||
|
|
b8dbc3caf1 | ||
|
|
c1145c8f89 | ||
|
|
0cba8e6d89 | ||
|
|
f6f468dff3 | ||
|
|
04fc5f9104 | ||
|
|
3c9ab6763c | ||
|
|
f360333ab4 | ||
|
|
834aa6eecb | ||
|
|
2400cc8b55 | ||
|
|
e4ed7faca9 | ||
|
|
8012aa49ee | ||
|
|
7225358b91 | ||
|
|
39688e8e0c | ||
|
|
592ca6128f | ||
|
|
7cd27d8905 | ||
|
|
bca387c54b | ||
|
|
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 | ||
|
|
3956989b67 | ||
|
|
33d7c243a7 | ||
|
|
a215886015 | ||
|
|
1d9e8aded0 | ||
|
|
b7e31c9cff | ||
|
|
4e9c81a93d | ||
|
|
9181ac5d34 | ||
|
|
3a10aeb23e | ||
|
|
178f9c4fdc | ||
|
|
4d647a9467 | ||
|
|
16cbc6adb1 | ||
|
|
7afb872bff | ||
|
|
7df6182e70 | ||
|
|
40efb04a36 | ||
|
|
1f03d35253 | ||
|
|
3efaed488a | ||
|
|
decdbf95f7 | ||
|
|
cccc712814 | ||
|
|
135f4819fb | ||
|
|
388923257b | ||
|
|
6918e359e8 | ||
|
|
d5b33c7e77 | ||
|
|
d37f53e120 | ||
|
|
26478217e7 | ||
|
|
a100f4ef97 | ||
|
|
91b746dc59 | ||
|
|
1817a847de | ||
|
|
7e99feae1e | ||
|
|
2977c45365 | ||
|
|
3b363a3efa | ||
|
|
e2b0bd44d9 | ||
|
|
cc26860504 | ||
|
|
54f3e0481f | ||
|
|
a61371c8ad | ||
|
|
fd6d5e4296 | ||
|
|
514a617c55 | ||
|
|
b47007ea0c | ||
|
|
6436c39c90 | ||
|
|
eb2f90e605 | ||
|
|
bdbb85175a | ||
|
|
a5e1bfe49a | ||
|
|
b3adb54651 | ||
|
|
07e7bce6a9 | ||
|
|
baa90242a6 | ||
|
|
787db0cec2 | ||
|
|
6359118132 | ||
|
|
49614bf6d8 | ||
|
|
0901e08c5c | ||
|
|
503a77c7cf | ||
|
|
0e3ab8e4d6 | ||
|
|
4452e4921c | ||
|
|
97c1aa582d | ||
|
|
076c008329 | ||
|
|
21d785dd3c | ||
|
|
348f6c81bf | ||
|
|
d5a2e2bb62 | ||
|
|
2b51e0659e | ||
|
|
3efca5e60c | ||
|
|
2f7b917f1c | ||
|
|
8623f86505 | ||
|
|
dc74641c19 | ||
|
|
db7817cc22 | ||
|
|
ada0f68182 | ||
|
|
fe806895f0 | ||
|
|
da137d0a8f | ||
|
|
93ebc3bce3 | ||
|
|
9f6e9eb9bc | ||
|
|
996b133a4f | ||
|
|
dd2602ea35 | ||
|
|
e5cf71b7c5 | ||
|
|
f2e4e21010 | ||
|
|
240514f1e5 | ||
|
|
d4c7e86e05 | ||
|
|
2876c7a539 |
70
.github/workflows/release.yml
vendored
70
.github/workflows/release.yml
vendored
@@ -21,7 +21,7 @@ jobs:
|
|||||||
- name: Install Node.js
|
- name: Install Node.js
|
||||||
uses: actions/setup-node@v4
|
uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: 20
|
node-version: 22.12
|
||||||
cache: 'npm'
|
cache: 'npm'
|
||||||
|
|
||||||
- name: Install Dependencies
|
- name: Install Dependencies
|
||||||
@@ -39,59 +39,23 @@ jobs:
|
|||||||
npx tsc
|
npx tsc
|
||||||
npx vite build
|
npx vite build
|
||||||
|
|
||||||
- name: Create Changelog Config
|
|
||||||
shell: bash
|
|
||||||
run: |
|
|
||||||
cat <<EOF > changelog_config.json
|
|
||||||
{
|
|
||||||
"template": "# ${{ github.ref_name }} 更新日志\n\n{{CHANGELOG}}\n\n---\n> 此更新由系统自动构建",
|
|
||||||
"categories": [
|
|
||||||
{
|
|
||||||
"title": "## 新功能",
|
|
||||||
"filter": { "pattern": "^feat", "flags": "i" }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "## 修复",
|
|
||||||
"filter": { "pattern": "^fix", "flags": "i" }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "## 性能与维护",
|
|
||||||
"filter": { "pattern": "^(chore|docs|perf|refactor|ci|style|test)", "flags": "i" }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "## 其他改动",
|
|
||||||
"filter": { "pattern": ".*", "flags": "i" }
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"ignore_labels": [],
|
|
||||||
"commitMode": true,
|
|
||||||
"empty_summary": "## 更新详情\n- 常规代码优化与维护"
|
|
||||||
}
|
|
||||||
EOF
|
|
||||||
|
|
||||||
- name: Build Changelog
|
|
||||||
id: build_changelog
|
|
||||||
uses: mikepenz/release-changelog-builder-action@v5
|
|
||||||
with:
|
|
||||||
configuration: "changelog_config.json"
|
|
||||||
outputFile: "release-notes.md"
|
|
||||||
env:
|
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
||||||
|
|
||||||
- name: Check Changelog Content
|
|
||||||
shell: bash
|
|
||||||
run: |
|
|
||||||
echo "=== RELEASE NOTES START ==="
|
|
||||||
cat release-notes.md
|
|
||||||
echo "=== RELEASE NOTES END ==="
|
|
||||||
|
|
||||||
- name: Inject Configuration
|
|
||||||
shell: bash
|
|
||||||
run: |
|
|
||||||
npm pkg set build.releaseInfo.releaseNotesFile=release-notes.md
|
|
||||||
|
|
||||||
- name: Package and Publish
|
- name: Package and Publish
|
||||||
env:
|
env:
|
||||||
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
run: |
|
run: |
|
||||||
npx electron-builder --publish always
|
npx electron-builder --publish always
|
||||||
|
|
||||||
|
- name: Update Release Notes
|
||||||
|
env:
|
||||||
|
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
shell: bash
|
||||||
|
run: |
|
||||||
|
cat <<EOF > release_notes.md
|
||||||
|
## 更新日志
|
||||||
|
修复了一些已知问题
|
||||||
|
|
||||||
|
## 加入我们的群
|
||||||
|
[点击加入 Telegram 群](https://t.me/+hn3QzNc4DbA0MzNl)
|
||||||
|
EOF
|
||||||
|
|
||||||
|
gh release edit "$GITHUB_REF_NAME" --notes-file release_notes.md
|
||||||
|
|||||||
51
README.md
51
README.md
@@ -25,16 +25,29 @@ WeFlow 是一个**完全本地**的微信**实时**聊天记录查看、分析
|
|||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
> [!TIP]
|
> [!TIP]
|
||||||
> 如果导出聊天记录后,想深入分析聊天内容可以试试 [ChatLab](https://chatlab.fun/)
|
> 如果导出聊天记录后,想深入分析聊天内容可以试试 [ChatLab](https://chatlab.fun/)
|
||||||
|
|
||||||
|
> [!NOTE]
|
||||||
|
> 仅支持微信 **4.0 及以上**版本,确保你的微信版本符合要求
|
||||||
|
|
||||||
|
|
||||||
|
# 加入微信交流群
|
||||||
|
|
||||||
|
> 🎉 扫码加入微信群,与其他 WeFlow 用户一起交流问题和使用心得。
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<img src="mdassets/us.png" alt="WeFlow 微信交流群二维码" width="220" style="margin-right: 16px;"
|
||||||
|
</p>
|
||||||
|
|
||||||
## 主要功能
|
## 主要功能
|
||||||
|
|
||||||
- 本地实时查看聊天记录
|
- 本地实时查看聊天记录
|
||||||
- 统计分析与群聊画像
|
- 统计分析与群聊画像
|
||||||
- 年度报告与可视化概览
|
- 年度报告与可视化概览
|
||||||
- 导出聊天记录为 HTML 等格式
|
- 导出聊天记录为 HTML 等格式
|
||||||
- 本地解密与数据库管理
|
|
||||||
|
|
||||||
## 快速开始
|
## 快速开始
|
||||||
|
|
||||||
@@ -61,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
|
||||||
|
|
||||||
@@ -111,6 +104,4 @@ WeFlow/
|
|||||||
|
|
||||||
**请负责任地使用本工具,遵守相关法律法规**
|
**请负责任地使用本工具,遵守相关法律法规**
|
||||||
|
|
||||||
我们总是在向前走,却很少有机会回头看看
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
400
electron/main.ts
400
electron/main.ts
@@ -1,6 +1,7 @@
|
|||||||
import { app, BrowserWindow, ipcMain, nativeTheme } from 'electron'
|
import './preload-env'
|
||||||
|
import { app, BrowserWindow, ipcMain, nativeTheme, session } from 'electron'
|
||||||
import { Worker } from 'worker_threads'
|
import { Worker } from 'worker_threads'
|
||||||
import { join } from 'path'
|
import { join, dirname } from 'path'
|
||||||
import { autoUpdater } from 'electron-updater'
|
import { autoUpdater } from 'electron-updater'
|
||||||
import { readFile, writeFile, mkdir } from 'fs/promises'
|
import { readFile, writeFile, mkdir } from 'fs/promises'
|
||||||
import { existsSync } from 'fs'
|
import { existsSync } from 'fs'
|
||||||
@@ -13,9 +14,13 @@ import { imagePreloadService } from './services/imagePreloadService'
|
|||||||
import { analyticsService } from './services/analyticsService'
|
import { analyticsService } from './services/analyticsService'
|
||||||
import { groupAnalyticsService } from './services/groupAnalyticsService'
|
import { groupAnalyticsService } from './services/groupAnalyticsService'
|
||||||
import { annualReportService } from './services/annualReportService'
|
import { annualReportService } from './services/annualReportService'
|
||||||
import { exportService, ExportOptions } from './services/exportService'
|
import { exportService, ExportOptions, ExportProgress } from './services/exportService'
|
||||||
import { KeyService } from './services/keyService'
|
import { KeyService } from './services/keyService'
|
||||||
import { voiceTranscribeService } from './services/voiceTranscribeService'
|
import { voiceTranscribeService } from './services/voiceTranscribeService'
|
||||||
|
import { videoService } from './services/videoService'
|
||||||
|
import { snsService } from './services/snsService'
|
||||||
|
import { contactExportService } from './services/contactExportService'
|
||||||
|
import { windowsHelloService } from './services/windowsHelloService'
|
||||||
|
|
||||||
|
|
||||||
// 配置自动更新
|
// 配置自动更新
|
||||||
@@ -27,6 +32,47 @@ const AUTO_UPDATE_ENABLED =
|
|||||||
process.env.AUTO_UPDATE_ENABLED === '1' ||
|
process.env.AUTO_UPDATE_ENABLED === '1' ||
|
||||||
(process.env.AUTO_UPDATE_ENABLED == null && !process.env.VITE_DEV_SERVER_URL)
|
(process.env.AUTO_UPDATE_ENABLED == null && !process.env.VITE_DEV_SERVER_URL)
|
||||||
|
|
||||||
|
// 使用白名单过滤 PATH,避免被第三方目录中的旧版 VC++ 运行库劫持。
|
||||||
|
// 仅保留系统目录(Windows/System32/SysWOW64)和应用自身目录(可执行目录、resources)。
|
||||||
|
function sanitizePathEnv() {
|
||||||
|
// 开发模式不做裁剪,避免影响本地工具链
|
||||||
|
if (process.env.VITE_DEV_SERVER_URL) return
|
||||||
|
|
||||||
|
const rawPath = process.env.PATH || process.env.Path
|
||||||
|
if (!rawPath) return
|
||||||
|
|
||||||
|
const sep = process.platform === 'win32' ? ';' : ':'
|
||||||
|
const parts = rawPath.split(sep).filter(Boolean)
|
||||||
|
|
||||||
|
const systemRoot = process.env.SystemRoot || process.env.WINDIR || ''
|
||||||
|
const safePrefixes = [
|
||||||
|
systemRoot,
|
||||||
|
systemRoot ? join(systemRoot, 'System32') : '',
|
||||||
|
systemRoot ? join(systemRoot, 'SysWOW64') : '',
|
||||||
|
dirname(process.execPath),
|
||||||
|
process.resourcesPath,
|
||||||
|
join(process.resourcesPath || '', 'resources')
|
||||||
|
].filter(Boolean)
|
||||||
|
|
||||||
|
const normalize = (p: string) => p.replace(/\\/g, '/').toLowerCase()
|
||||||
|
const isSafe = (p: string) => {
|
||||||
|
const np = normalize(p)
|
||||||
|
return safePrefixes.some((prefix) => np.startsWith(normalize(prefix)))
|
||||||
|
}
|
||||||
|
|
||||||
|
const filtered = parts.filter(isSafe)
|
||||||
|
if (filtered.length !== parts.length) {
|
||||||
|
const removed = parts.filter((p) => !isSafe(p))
|
||||||
|
console.warn('[WeFlow] 使用白名单裁剪 PATH,移除目录:', removed)
|
||||||
|
const nextPath = filtered.join(sep)
|
||||||
|
process.env.PATH = nextPath
|
||||||
|
process.env.Path = nextPath
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 启动时立即清理 PATH,后续创建的 worker 也能继承安全的环境
|
||||||
|
sanitizePathEnv()
|
||||||
|
|
||||||
// 单例服务
|
// 单例服务
|
||||||
let configService: ConfigService | null = null
|
let configService: ConfigService | null = null
|
||||||
|
|
||||||
@@ -93,6 +139,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
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -166,10 +234,11 @@ function createOnboardingWindow() {
|
|||||||
: join(process.resourcesPath, 'icon.ico')
|
: join(process.resourcesPath, 'icon.ico')
|
||||||
|
|
||||||
onboardingWindow = new BrowserWindow({
|
onboardingWindow = new BrowserWindow({
|
||||||
width: 1100,
|
width: 960,
|
||||||
height: 720,
|
height: 680,
|
||||||
minWidth: 900,
|
minWidth: 900,
|
||||||
minHeight: 600,
|
minHeight: 620,
|
||||||
|
resizable: false,
|
||||||
frame: false,
|
frame: false,
|
||||||
transparent: true,
|
transparent: true,
|
||||||
backgroundColor: '#00000000',
|
backgroundColor: '#00000000',
|
||||||
@@ -200,6 +269,167 @@ function createOnboardingWindow() {
|
|||||||
return onboardingWindow
|
return onboardingWindow
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建独立的视频播放窗口
|
||||||
|
* 窗口大小会根据视频比例自动调整
|
||||||
|
*/
|
||||||
|
function createVideoPlayerWindow(videoPath: string, videoWidth?: number, videoHeight?: number) {
|
||||||
|
const isDev = !!process.env.VITE_DEV_SERVER_URL
|
||||||
|
const iconPath = isDev
|
||||||
|
? join(__dirname, '../public/icon.ico')
|
||||||
|
: join(process.resourcesPath, 'icon.ico')
|
||||||
|
|
||||||
|
// 获取屏幕尺寸
|
||||||
|
const { screen } = require('electron')
|
||||||
|
const primaryDisplay = screen.getPrimaryDisplay()
|
||||||
|
const { width: screenWidth, height: screenHeight } = primaryDisplay.workAreaSize
|
||||||
|
|
||||||
|
// 计算窗口尺寸,只有标题栏 40px,控制栏悬浮
|
||||||
|
let winWidth = 854
|
||||||
|
let winHeight = 520
|
||||||
|
const titleBarHeight = 40
|
||||||
|
|
||||||
|
if (videoWidth && videoHeight && videoWidth > 0 && videoHeight > 0) {
|
||||||
|
const aspectRatio = videoWidth / videoHeight
|
||||||
|
|
||||||
|
const maxWidth = Math.floor(screenWidth * 0.85)
|
||||||
|
const maxHeight = Math.floor(screenHeight * 0.85)
|
||||||
|
|
||||||
|
if (aspectRatio >= 1) {
|
||||||
|
// 横向视频
|
||||||
|
winWidth = Math.min(videoWidth, maxWidth)
|
||||||
|
winHeight = Math.floor(winWidth / aspectRatio) + titleBarHeight
|
||||||
|
|
||||||
|
if (winHeight > maxHeight) {
|
||||||
|
winHeight = maxHeight
|
||||||
|
winWidth = Math.floor((winHeight - titleBarHeight) * aspectRatio)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 竖向视频
|
||||||
|
const videoDisplayHeight = Math.min(videoHeight, maxHeight - titleBarHeight)
|
||||||
|
winHeight = videoDisplayHeight + titleBarHeight
|
||||||
|
winWidth = Math.floor(videoDisplayHeight * aspectRatio)
|
||||||
|
|
||||||
|
if (winWidth < 300) {
|
||||||
|
winWidth = 300
|
||||||
|
winHeight = Math.floor(winWidth / aspectRatio) + titleBarHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
winWidth = Math.max(winWidth, 360)
|
||||||
|
winHeight = Math.max(winHeight, 280)
|
||||||
|
}
|
||||||
|
|
||||||
|
const win = new BrowserWindow({
|
||||||
|
width: winWidth,
|
||||||
|
height: winHeight,
|
||||||
|
minWidth: 360,
|
||||||
|
minHeight: 280,
|
||||||
|
icon: iconPath,
|
||||||
|
webPreferences: {
|
||||||
|
preload: join(__dirname, 'preload.js'),
|
||||||
|
contextIsolation: true,
|
||||||
|
nodeIntegration: false,
|
||||||
|
webSecurity: false
|
||||||
|
},
|
||||||
|
titleBarStyle: 'hidden',
|
||||||
|
titleBarOverlay: {
|
||||||
|
color: '#1a1a1a',
|
||||||
|
symbolColor: '#ffffff',
|
||||||
|
height: 40
|
||||||
|
},
|
||||||
|
show: false,
|
||||||
|
backgroundColor: '#000000',
|
||||||
|
autoHideMenuBar: true
|
||||||
|
})
|
||||||
|
|
||||||
|
win.once('ready-to-show', () => {
|
||||||
|
win.show()
|
||||||
|
})
|
||||||
|
|
||||||
|
const videoParam = `videoPath=${encodeURIComponent(videoPath)}`
|
||||||
|
if (process.env.VITE_DEV_SERVER_URL) {
|
||||||
|
win.loadURL(`${process.env.VITE_DEV_SERVER_URL}#/video-player-window?${videoParam}`)
|
||||||
|
|
||||||
|
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: `/video-player-window?${videoParam}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
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) {
|
||||||
@@ -306,7 +536,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)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 下载完成后自动安装
|
// 下载完成后自动安装
|
||||||
@@ -356,6 +586,85 @@ function registerIpcHandlers() {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 打开视频播放窗口
|
||||||
|
ipcMain.handle('window:openVideoPlayerWindow', (_, videoPath: string, videoWidth?: number, videoHeight?: number) => {
|
||||||
|
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) => {
|
||||||
|
const win = BrowserWindow.fromWebContents(event.sender)
|
||||||
|
if (!win || !videoWidth || !videoHeight) return
|
||||||
|
|
||||||
|
const { screen } = require('electron')
|
||||||
|
const primaryDisplay = screen.getPrimaryDisplay()
|
||||||
|
const { width: screenWidth, height: screenHeight } = primaryDisplay.workAreaSize
|
||||||
|
|
||||||
|
// 只有标题栏 40px,控制栏悬浮在视频上
|
||||||
|
const titleBarHeight = 40
|
||||||
|
const aspectRatio = videoWidth / videoHeight
|
||||||
|
|
||||||
|
const maxWidth = Math.floor(screenWidth * 0.85)
|
||||||
|
const maxHeight = Math.floor(screenHeight * 0.85)
|
||||||
|
|
||||||
|
let winWidth: number
|
||||||
|
let winHeight: number
|
||||||
|
|
||||||
|
if (aspectRatio >= 1) {
|
||||||
|
// 横向视频 - 以宽度为基准
|
||||||
|
winWidth = Math.min(videoWidth, maxWidth)
|
||||||
|
winHeight = Math.floor(winWidth / aspectRatio) + titleBarHeight
|
||||||
|
|
||||||
|
if (winHeight > maxHeight) {
|
||||||
|
winHeight = maxHeight
|
||||||
|
winWidth = Math.floor((winHeight - titleBarHeight) * aspectRatio)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 竖向视频 - 以高度为基准
|
||||||
|
const videoDisplayHeight = Math.min(videoHeight, maxHeight - titleBarHeight)
|
||||||
|
winHeight = videoDisplayHeight + titleBarHeight
|
||||||
|
winWidth = Math.floor(videoDisplayHeight * aspectRatio)
|
||||||
|
|
||||||
|
// 确保宽度不会太窄
|
||||||
|
if (winWidth < 300) {
|
||||||
|
winWidth = 300
|
||||||
|
winHeight = Math.floor(winWidth / aspectRatio) + titleBarHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
winWidth = Math.max(winWidth, 360)
|
||||||
|
winHeight = Math.max(winHeight, 280)
|
||||||
|
|
||||||
|
// 调整窗口大小并居中
|
||||||
|
win.setSize(winWidth, winHeight)
|
||||||
|
win.center()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 视频相关
|
||||||
|
ipcMain.handle('video:getVideoInfo', async (_, videoMd5: string) => {
|
||||||
|
try {
|
||||||
|
const result = await videoService.getVideoInfo(videoMd5)
|
||||||
|
return { success: true, ...result }
|
||||||
|
} catch (e) {
|
||||||
|
return { success: false, error: String(e), exists: false }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle('video:parseVideoMd5', async (_, content: string) => {
|
||||||
|
try {
|
||||||
|
const md5 = videoService.parseVideoMd5(content)
|
||||||
|
return { success: true, md5 }
|
||||||
|
} catch (e) {
|
||||||
|
return { success: false, error: String(e) }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
// 数据库路径相关
|
// 数据库路径相关
|
||||||
ipcMain.handle('dbpath:autoDetect', async () => {
|
ipcMain.handle('dbpath:autoDetect', async () => {
|
||||||
return dbPathService.autoDetect()
|
return dbPathService.autoDetect()
|
||||||
@@ -365,6 +674,10 @@ function registerIpcHandlers() {
|
|||||||
return dbPathService.scanWxids(rootPath)
|
return dbPathService.scanWxids(rootPath)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
ipcMain.handle('dbpath:scanWxidCandidates', async (_, rootPath: string) => {
|
||||||
|
return dbPathService.scanWxidCandidates(rootPath)
|
||||||
|
})
|
||||||
|
|
||||||
ipcMain.handle('dbpath:getDefault', async () => {
|
ipcMain.handle('dbpath:getDefault', async () => {
|
||||||
return dbPathService.getDefaultPath()
|
return dbPathService.getDefaultPath()
|
||||||
})
|
})
|
||||||
@@ -398,8 +711,8 @@ function registerIpcHandlers() {
|
|||||||
return chatService.enrichSessionsContactInfo(usernames)
|
return chatService.enrichSessionsContactInfo(usernames)
|
||||||
})
|
})
|
||||||
|
|
||||||
ipcMain.handle('chat:getMessages', async (_, sessionId: string, offset?: number, limit?: number) => {
|
ipcMain.handle('chat:getMessages', async (_, sessionId: string, offset?: number, limit?: number, startTime?: number, endTime?: number, ascending?: boolean) => {
|
||||||
return chatService.getMessages(sessionId, offset, limit)
|
return chatService.getMessages(sessionId, offset, limit, startTime, endTime, ascending)
|
||||||
})
|
})
|
||||||
|
|
||||||
ipcMain.handle('chat:getLatestMessages', async (_, sessionId: string, limit?: number) => {
|
ipcMain.handle('chat:getLatestMessages', async (_, sessionId: string, limit?: number) => {
|
||||||
@@ -407,11 +720,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) => {
|
||||||
@@ -446,16 +763,32 @@ function registerIpcHandlers() {
|
|||||||
return chatService.resolveVoiceCache(sessionId, msgId)
|
return chatService.resolveVoiceCache(sessionId, msgId)
|
||||||
})
|
})
|
||||||
|
|
||||||
ipcMain.handle('chat:getVoiceTranscript', async (event, sessionId: string, msgId: string) => {
|
ipcMain.handle('chat:getVoiceTranscript', async (event, sessionId: string, msgId: string, createTime?: number) => {
|
||||||
return chatService.getVoiceTranscript(sessionId, msgId, (text) => {
|
return chatService.getVoiceTranscript(sessionId, msgId, createTime, (text) => {
|
||||||
event.sender.send('chat:voiceTranscriptPartial', { msgId, text })
|
event.sender.send('chat:voiceTranscriptPartial', { msgId, text })
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
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)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
ipcMain.handle('chat:execQuery', async (_, kind: string, path: string | null, sql: string) => {
|
||||||
|
return chatService.execQuery(kind, path, sql)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle('sns:getTimeline', async (_, limit: number, offset: number, usernames?: string[], keyword?: string, startTime?: number, endTime?: number) => {
|
||||||
|
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)
|
||||||
|
})
|
||||||
|
|
||||||
// 私聊克隆
|
// 私聊克隆
|
||||||
|
|
||||||
|
|
||||||
@@ -470,15 +803,35 @@ function registerIpcHandlers() {
|
|||||||
return true
|
return true
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Windows Hello
|
||||||
|
ipcMain.handle('auth:hello', async (event, message?: string) => {
|
||||||
|
// 无论哪个窗口调用,都尝试强制附着到主窗口,确保体验一致
|
||||||
|
// 如果主窗口不存在(极其罕见),则回退到调用者窗口
|
||||||
|
const targetWin = (mainWindow && !mainWindow.isDestroyed())
|
||||||
|
? mainWindow
|
||||||
|
: (BrowserWindow.fromWebContents(event.sender) || undefined)
|
||||||
|
|
||||||
|
return windowsHelloService.verify(message, targetWin)
|
||||||
|
})
|
||||||
|
|
||||||
// 导出相关
|
// 导出相关
|
||||||
ipcMain.handle('export:exportSessions', async (_, sessionIds: string[], outputDir: string, options: ExportOptions) => {
|
ipcMain.handle('export:exportSessions', async (event, sessionIds: string[], outputDir: string, options: ExportOptions) => {
|
||||||
return exportService.exportSessions(sessionIds, outputDir, options)
|
const onProgress = (progress: ExportProgress) => {
|
||||||
|
if (!event.sender.isDestroyed()) {
|
||||||
|
event.sender.send('export:progress', progress)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return exportService.exportSessions(sessionIds, outputDir, options, onProgress)
|
||||||
})
|
})
|
||||||
|
|
||||||
ipcMain.handle('export:exportSession', async (_, sessionId: string, outputPath: string, options: ExportOptions) => {
|
ipcMain.handle('export:exportSession', async (_, sessionId: string, outputPath: string, options: ExportOptions) => {
|
||||||
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)
|
||||||
@@ -557,6 +910,10 @@ function registerIpcHandlers() {
|
|||||||
return groupAnalyticsService.getGroupMediaStats(chatroomId, startTime, endTime)
|
return groupAnalyticsService.getGroupMediaStats(chatroomId, startTime, endTime)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
ipcMain.handle('groupAnalytics:exportGroupMembers', async (_, chatroomId: string, outputPath: string) => {
|
||||||
|
return groupAnalyticsService.exportGroupMembers(chatroomId, outputPath)
|
||||||
|
})
|
||||||
|
|
||||||
// 打开协议窗口
|
// 打开协议窗口
|
||||||
ipcMain.handle('window:openAgreementWindow', async () => {
|
ipcMain.handle('window:openAgreementWindow', async () => {
|
||||||
createAgreementWindow()
|
createAgreementWindow()
|
||||||
@@ -756,6 +1113,17 @@ app.whenReady().then(() => {
|
|||||||
createOnboardingWindow()
|
createOnboardingWindow()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 解决朋友圈图片无法加载问题(添加 Referer)
|
||||||
|
session.defaultSession.webRequest.onBeforeSendHeaders(
|
||||||
|
{
|
||||||
|
urls: ['*://*.qpic.cn/*', '*://*.wx.qq.com/*']
|
||||||
|
},
|
||||||
|
(details, callback) => {
|
||||||
|
details.requestHeaders['Referer'] = 'https://wx.qq.com/'
|
||||||
|
callback({ requestHeaders: details.requestHeaders })
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
// 启动时检测更新
|
// 启动时检测更新
|
||||||
checkForUpdatesOnStartup()
|
checkForUpdatesOnStartup()
|
||||||
|
|
||||||
|
|||||||
24
electron/nodert.d.ts
vendored
Normal file
24
electron/nodert.d.ts
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
declare module '@nodert-win10-rs4/windows.security.credentials.ui' {
|
||||||
|
export enum UserConsentVerificationResult {
|
||||||
|
Verified = 0,
|
||||||
|
DeviceNotPresent = 1,
|
||||||
|
NotConfiguredForUser = 2,
|
||||||
|
DisabledByPolicy = 3,
|
||||||
|
DeviceBusy = 4,
|
||||||
|
RetriesExhausted = 5,
|
||||||
|
Canceled = 6
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum UserConsentVerifierAvailability {
|
||||||
|
Available = 0,
|
||||||
|
DeviceNotPresent = 1,
|
||||||
|
NotConfiguredForUser = 2,
|
||||||
|
DisabledByPolicy = 3,
|
||||||
|
DeviceBusy = 4
|
||||||
|
}
|
||||||
|
|
||||||
|
export class UserConsentVerifier {
|
||||||
|
static checkAvailabilityAsync(callback: (err: Error | null, availability: UserConsentVerifierAvailability) => void): void;
|
||||||
|
static requestVerificationAsync(message: string, callback: (err: Error | null, result: UserConsentVerificationResult) => void): void;
|
||||||
|
}
|
||||||
|
}
|
||||||
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)
|
||||||
|
}
|
||||||
@@ -9,6 +9,11 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
clear: () => ipcRenderer.invoke('config:clear')
|
clear: () => ipcRenderer.invoke('config:clear')
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 认证
|
||||||
|
auth: {
|
||||||
|
hello: (message?: string) => ipcRenderer.invoke('auth:hello', message)
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
// 对话框
|
// 对话框
|
||||||
dialog: {
|
dialog: {
|
||||||
@@ -29,7 +34,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')
|
||||||
},
|
},
|
||||||
@@ -53,13 +58,20 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
openAgreementWindow: () => ipcRenderer.invoke('window:openAgreementWindow'),
|
openAgreementWindow: () => ipcRenderer.invoke('window:openAgreementWindow'),
|
||||||
completeOnboarding: () => ipcRenderer.invoke('window:completeOnboarding'),
|
completeOnboarding: () => ipcRenderer.invoke('window:completeOnboarding'),
|
||||||
openOnboardingWindow: () => ipcRenderer.invoke('window:openOnboardingWindow'),
|
openOnboardingWindow: () => ipcRenderer.invoke('window:openOnboardingWindow'),
|
||||||
setTitleBarOverlay: (options: { symbolColor: string }) => ipcRenderer.send('window:setTitleBarOverlay', options)
|
setTitleBarOverlay: (options: { symbolColor: string }) => ipcRenderer.send('window:setTitleBarOverlay', options),
|
||||||
|
openVideoPlayerWindow: (videoPath: string, videoWidth?: number, videoHeight?: number) =>
|
||||||
|
ipcRenderer.invoke('window:openVideoPlayerWindow', videoPath, videoWidth, videoHeight),
|
||||||
|
resizeToFitVideo: (videoWidth: number, videoHeight: number) =>
|
||||||
|
ipcRenderer.invoke('window:resizeToFitVideo', videoWidth, videoHeight),
|
||||||
|
openChatHistoryWindow: (sessionId: string, messageId: number) =>
|
||||||
|
ipcRenderer.invoke('window:openChatHistoryWindow', sessionId, messageId)
|
||||||
},
|
},
|
||||||
|
|
||||||
// 数据库路径
|
// 数据库路径
|
||||||
dbPath: {
|
dbPath: {
|
||||||
autoDetect: () => ipcRenderer.invoke('dbpath:autoDetect'),
|
autoDetect: () => ipcRenderer.invoke('dbpath:autoDetect'),
|
||||||
scanWxids: (rootPath: string) => ipcRenderer.invoke('dbpath:scanWxids', rootPath),
|
scanWxids: (rootPath: string) => ipcRenderer.invoke('dbpath:scanWxids', rootPath),
|
||||||
|
scanWxidCandidates: (rootPath: string) => ipcRenderer.invoke('dbpath:scanWxidCandidates', rootPath),
|
||||||
getDefault: () => ipcRenderer.invoke('dbpath:getDefault')
|
getDefault: () => ipcRenderer.invoke('dbpath:getDefault')
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -94,8 +106,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
getSessions: () => ipcRenderer.invoke('chat:getSessions'),
|
getSessions: () => ipcRenderer.invoke('chat:getSessions'),
|
||||||
enrichSessionsContactInfo: (usernames: string[]) =>
|
enrichSessionsContactInfo: (usernames: string[]) =>
|
||||||
ipcRenderer.invoke('chat:enrichSessionsContactInfo', usernames),
|
ipcRenderer.invoke('chat:enrichSessionsContactInfo', usernames),
|
||||||
getMessages: (sessionId: string, offset?: number, limit?: number) =>
|
getMessages: (sessionId: string, offset?: number, limit?: number, startTime?: number, endTime?: number, ascending?: boolean) =>
|
||||||
ipcRenderer.invoke('chat:getMessages', sessionId, offset, limit),
|
ipcRenderer.invoke('chat:getMessages', sessionId, offset, limit, startTime, endTime, ascending),
|
||||||
getLatestMessages: (sessionId: string, limit?: number) =>
|
getLatestMessages: (sessionId: string, limit?: number) =>
|
||||||
ipcRenderer.invoke('chat:getLatestMessages', sessionId, limit),
|
ipcRenderer.invoke('chat:getLatestMessages', sessionId, limit),
|
||||||
getContact: (username: string) => ipcRenderer.invoke('chat:getContact', username),
|
getContact: (username: string) => ipcRenderer.invoke('chat:getContact', username),
|
||||||
@@ -109,12 +121,17 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
getVoiceData: (sessionId: string, msgId: string, createTime?: number, serverId?: string | number) =>
|
getVoiceData: (sessionId: string, msgId: string, createTime?: number, serverId?: string | number) =>
|
||||||
ipcRenderer.invoke('chat:getVoiceData', sessionId, msgId, createTime, serverId),
|
ipcRenderer.invoke('chat:getVoiceData', sessionId, msgId, createTime, serverId),
|
||||||
resolveVoiceCache: (sessionId: string, msgId: string) => ipcRenderer.invoke('chat:resolveVoiceCache', sessionId, msgId),
|
resolveVoiceCache: (sessionId: string, msgId: string) => ipcRenderer.invoke('chat:resolveVoiceCache', sessionId, msgId),
|
||||||
getVoiceTranscript: (sessionId: string, msgId: string) => ipcRenderer.invoke('chat:getVoiceTranscript', sessionId, msgId),
|
getVoiceTranscript: (sessionId: string, msgId: string, createTime?: number) => ipcRenderer.invoke('chat:getVoiceTranscript', sessionId, msgId, createTime),
|
||||||
onVoiceTranscriptPartial: (callback: (payload: { msgId: string; text: string }) => void) => {
|
onVoiceTranscriptPartial: (callback: (payload: { msgId: string; text: string }) => void) => {
|
||||||
const listener = (_: any, payload: { msgId: string; text: string }) => callback(payload)
|
const listener = (_: any, payload: { msgId: string; text: string }) => callback(payload)
|
||||||
ipcRenderer.on('chat:voiceTranscriptPartial', listener)
|
ipcRenderer.on('chat:voiceTranscriptPartial', listener)
|
||||||
return () => ipcRenderer.removeListener('chat:voiceTranscriptPartial', listener)
|
return () => ipcRenderer.removeListener('chat:voiceTranscriptPartial', listener)
|
||||||
}
|
},
|
||||||
|
execQuery: (kind: string, path: string | null, sql: string) =>
|
||||||
|
ipcRenderer.invoke('chat:execQuery', kind, path, sql),
|
||||||
|
getContacts: () => ipcRenderer.invoke('chat:getContacts'),
|
||||||
|
getMessage: (sessionId: string, localId: number) =>
|
||||||
|
ipcRenderer.invoke('chat:getMessage', sessionId, localId)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
@@ -137,6 +154,12 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 视频
|
||||||
|
video: {
|
||||||
|
getVideoInfo: (videoMd5: string) => ipcRenderer.invoke('video:getVideoInfo', videoMd5),
|
||||||
|
parseVideoMd5: (content: string) => ipcRenderer.invoke('video:parseVideoMd5', content)
|
||||||
|
},
|
||||||
|
|
||||||
// 数据分析
|
// 数据分析
|
||||||
analytics: {
|
analytics: {
|
||||||
getOverallStatistics: () => ipcRenderer.invoke('analytics:getOverallStatistics'),
|
getOverallStatistics: () => ipcRenderer.invoke('analytics:getOverallStatistics'),
|
||||||
@@ -161,7 +184,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
getGroupMembers: (chatroomId: string) => ipcRenderer.invoke('groupAnalytics:getGroupMembers', chatroomId),
|
getGroupMembers: (chatroomId: string) => ipcRenderer.invoke('groupAnalytics:getGroupMembers', chatroomId),
|
||||||
getGroupMessageRanking: (chatroomId: string, limit?: number, startTime?: number, endTime?: number) => ipcRenderer.invoke('groupAnalytics:getGroupMessageRanking', chatroomId, limit, startTime, endTime),
|
getGroupMessageRanking: (chatroomId: string, limit?: number, startTime?: number, endTime?: number) => ipcRenderer.invoke('groupAnalytics:getGroupMessageRanking', chatroomId, limit, startTime, endTime),
|
||||||
getGroupActiveHours: (chatroomId: string, startTime?: number, endTime?: number) => ipcRenderer.invoke('groupAnalytics:getGroupActiveHours', chatroomId, startTime, endTime),
|
getGroupActiveHours: (chatroomId: string, startTime?: number, endTime?: number) => ipcRenderer.invoke('groupAnalytics:getGroupActiveHours', chatroomId, startTime, endTime),
|
||||||
getGroupMediaStats: (chatroomId: string, startTime?: number, endTime?: number) => ipcRenderer.invoke('groupAnalytics:getGroupMediaStats', chatroomId, startTime, endTime)
|
getGroupMediaStats: (chatroomId: string, startTime?: number, endTime?: number) => ipcRenderer.invoke('groupAnalytics:getGroupMediaStats', chatroomId, startTime, endTime),
|
||||||
|
exportGroupMembers: (chatroomId: string, outputPath: string) => ipcRenderer.invoke('groupAnalytics:exportGroupMembers', chatroomId, outputPath)
|
||||||
},
|
},
|
||||||
|
|
||||||
// 年度报告
|
// 年度报告
|
||||||
@@ -181,7 +205,13 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
exportSessions: (sessionIds: string[], outputDir: string, options: any) =>
|
exportSessions: (sessionIds: string[], outputDir: string, options: any) =>
|
||||||
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) => {
|
||||||
|
ipcRenderer.on('export:progress', (_, payload) => callback(payload))
|
||||||
|
return () => ipcRenderer.removeAllListeners('export:progress')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
whisper: {
|
whisper: {
|
||||||
@@ -193,5 +223,13 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||||||
ipcRenderer.on('whisper:downloadProgress', (_, payload) => callback(payload))
|
ipcRenderer.on('whisper:downloadProgress', (_, payload) => callback(payload))
|
||||||
return () => ipcRenderer.removeAllListeners('whisper:downloadProgress')
|
return () => ipcRenderer.removeAllListeners('whisper:downloadProgress')
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 朋友圈
|
||||||
|
sns: {
|
||||||
|
getTimeline: (limit: number, offset: number, usernames?: string[], keyword?: string, startTime?: number, endTime?: number) =>
|
||||||
|
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)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -8,12 +8,13 @@ interface ConfigSchema {
|
|||||||
onboardingDone: boolean
|
onboardingDone: boolean
|
||||||
imageXorKey: number
|
imageXorKey: number
|
||||||
imageAesKey: string
|
imageAesKey: string
|
||||||
|
wxidConfigs: Record<string, { decryptKey?: string; imageXorKey?: number; imageAesKey?: string; updatedAt?: number }>
|
||||||
|
|
||||||
// 缓存相关
|
// 缓存相关
|
||||||
cachePath: string
|
cachePath: string
|
||||||
lastOpenedDb: string
|
lastOpenedDb: string
|
||||||
lastSession: string
|
lastSession: string
|
||||||
|
|
||||||
// 界面相关
|
// 界面相关
|
||||||
theme: 'light' | 'dark' | 'system'
|
theme: 'light' | 'dark' | 'system'
|
||||||
themeId: string
|
themeId: string
|
||||||
@@ -25,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 {
|
||||||
@@ -40,6 +47,7 @@ export class ConfigService {
|
|||||||
onboardingDone: false,
|
onboardingDone: false,
|
||||||
imageXorKey: 0,
|
imageXorKey: 0,
|
||||||
imageAesKey: '',
|
imageAesKey: '',
|
||||||
|
wxidConfigs: {},
|
||||||
cachePath: '',
|
cachePath: '',
|
||||||
lastOpenedDb: '',
|
lastOpenedDb: '',
|
||||||
lastSession: '',
|
lastSession: '',
|
||||||
@@ -52,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
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -34,6 +34,14 @@ export class ContactCacheService {
|
|||||||
const raw = readFileSync(this.cacheFilePath, 'utf8')
|
const raw = readFileSync(this.cacheFilePath, 'utf8')
|
||||||
const parsed = JSON.parse(raw)
|
const parsed = JSON.parse(raw)
|
||||||
if (parsed && typeof parsed === 'object') {
|
if (parsed && typeof parsed === 'object') {
|
||||||
|
// 清除无效的头像数据(hex 格式而非正确的 base64)
|
||||||
|
for (const key of Object.keys(parsed)) {
|
||||||
|
const entry = parsed[key]
|
||||||
|
if (entry?.avatarUrl && entry.avatarUrl.includes('base64,ffd8')) {
|
||||||
|
// 这是错误的 hex 格式,清除它
|
||||||
|
entry.avatarUrl = undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
this.cache = parsed
|
this.cache = parsed
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|||||||
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)) {
|
||||||
@@ -27,7 +26,7 @@ export class DbPathService {
|
|||||||
if (rootName !== 'xwechat_files' && rootName !== 'wechat files') {
|
if (rootName !== 'xwechat_files' && rootName !== 'wechat files') {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
|
||||||
// 检查是否有有效的账号目录
|
// 检查是否有有效的账号目录
|
||||||
const accounts = this.findAccountDirs(path)
|
const accounts = this.findAccountDirs(path)
|
||||||
if (accounts.length > 0) {
|
if (accounts.length > 0) {
|
||||||
@@ -47,10 +46,10 @@ export class DbPathService {
|
|||||||
*/
|
*/
|
||||||
findAccountDirs(rootPath: string): string[] {
|
findAccountDirs(rootPath: string): string[] {
|
||||||
const accounts: string[] = []
|
const accounts: string[] = []
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const entries = readdirSync(rootPath)
|
const entries = readdirSync(rootPath)
|
||||||
|
|
||||||
for (const entry of entries) {
|
for (const entry of entries) {
|
||||||
const entryPath = join(rootPath, entry)
|
const entryPath = join(rootPath, entry)
|
||||||
let stat: ReturnType<typeof statSync>
|
let stat: ReturnType<typeof statSync>
|
||||||
@@ -59,7 +58,7 @@ export class DbPathService {
|
|||||||
} catch {
|
} catch {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
|
||||||
if (stat.isDirectory()) {
|
if (stat.isDirectory()) {
|
||||||
if (!this.isPotentialAccountName(entry)) continue
|
if (!this.isPotentialAccountName(entry)) continue
|
||||||
|
|
||||||
@@ -69,8 +68,8 @@ export class DbPathService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch {}
|
} catch { }
|
||||||
|
|
||||||
return accounts
|
return accounts
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -119,12 +118,54 @@ export class DbPathService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 扫描目录名候选(仅包含下划线的文件夹,排除 all_users)
|
||||||
|
*/
|
||||||
|
scanWxidCandidates(rootPath: string): WxidInfo[] {
|
||||||
|
const wxids: WxidInfo[] = []
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (existsSync(rootPath)) {
|
||||||
|
const entries = readdirSync(rootPath)
|
||||||
|
for (const entry of entries) {
|
||||||
|
const entryPath = join(rootPath, entry)
|
||||||
|
let stat: ReturnType<typeof statSync>
|
||||||
|
try {
|
||||||
|
stat = statSync(entryPath)
|
||||||
|
} catch {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!stat.isDirectory()) continue
|
||||||
|
const lower = entry.toLowerCase()
|
||||||
|
if (lower === 'all_users') continue
|
||||||
|
if (!entry.includes('_')) continue
|
||||||
|
|
||||||
|
wxids.push({ wxid: entry, modifiedTime: stat.mtimeMs })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (wxids.length === 0) {
|
||||||
|
const rootName = basename(rootPath)
|
||||||
|
if (rootName.includes('_') && rootName.toLowerCase() !== 'all_users') {
|
||||||
|
const rootStat = statSync(rootPath)
|
||||||
|
wxids.push({ wxid: rootName, modifiedTime: rootStat.mtimeMs })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch { }
|
||||||
|
|
||||||
|
return wxids.sort((a, b) => {
|
||||||
|
if (b.modifiedTime !== a.modifiedTime) return b.modifiedTime - a.modifiedTime
|
||||||
|
return a.wxid.localeCompare(b.wxid)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 扫描 wxid 列表
|
* 扫描 wxid 列表
|
||||||
*/
|
*/
|
||||||
scanWxids(rootPath: string): WxidInfo[] {
|
scanWxids(rootPath: string): WxidInfo[] {
|
||||||
const wxids: WxidInfo[] = []
|
const wxids: WxidInfo[] = []
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (this.isAccountDir(rootPath)) {
|
if (this.isAccountDir(rootPath)) {
|
||||||
const wxid = basename(rootPath)
|
const wxid = basename(rootPath)
|
||||||
@@ -133,14 +174,14 @@ export class DbPathService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const accounts = this.findAccountDirs(rootPath)
|
const accounts = this.findAccountDirs(rootPath)
|
||||||
|
|
||||||
for (const account of accounts) {
|
for (const account of accounts) {
|
||||||
const fullPath = join(rootPath, account)
|
const fullPath = join(rootPath, account)
|
||||||
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
|
||||||
return a.wxid.localeCompare(b.wxid)
|
return a.wxid.localeCompare(b.wxid)
|
||||||
|
|||||||
301
electron/services/exportHtml.css
Normal file
301
electron/services/exportHtml.css
Normal file
@@ -0,0 +1,301 @@
|
|||||||
|
:root {
|
||||||
|
color-scheme: light;
|
||||||
|
--bg: #f6f7fb;
|
||||||
|
--card: #ffffff;
|
||||||
|
--text: #1f2a37;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--accent: #4f46e5;
|
||||||
|
--sent: #dbeafe;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
|
||||||
|
--radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
max-width: 1080px;
|
||||||
|
margin: 32px auto 60px;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control input,
|
||||||
|
.control select,
|
||||||
|
.control button {
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 10px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control button {
|
||||||
|
background: var(--accent);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control button:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.sent .message-row {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #eef2ff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #475569;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble {
|
||||||
|
max-width: min(70%, 720px);
|
||||||
|
background: var(--received);
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.sent .bubble {
|
||||||
|
background: var(--sent);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sender-name {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text {
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-emoji {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-media {
|
||||||
|
border-radius: 14px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.previewable {
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-media.image,
|
||||||
|
.message-media.emoji {
|
||||||
|
max-height: 260px;
|
||||||
|
object-fit: contain;
|
||||||
|
background: #f1f5f9;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-media.emoji {
|
||||||
|
max-height: 160px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-media.video {
|
||||||
|
max-height: 360px;
|
||||||
|
background: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-media.audio {
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(15, 23, 42, 0.7);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview.active {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview img {
|
||||||
|
max-width: min(90vw, 1200px);
|
||||||
|
max-height: 90vh;
|
||||||
|
border-radius: 18px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
|
||||||
|
background: #0f172a;
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
cursor: zoom-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="cloud-dancer"] {
|
||||||
|
--accent: #6b8cff;
|
||||||
|
--sent: #e0e7ff;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #d8e0f7;
|
||||||
|
--bg: #f6f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="corundum-blue"] {
|
||||||
|
--accent: #2563eb;
|
||||||
|
--sent: #dbeafe;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #c7d2fe;
|
||||||
|
--bg: #eef2ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="kiwi-green"] {
|
||||||
|
--accent: #16a34a;
|
||||||
|
--sent: #dcfce7;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #bbf7d0;
|
||||||
|
--bg: #f0fdf4;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="spicy-red"] {
|
||||||
|
--accent: #e11d48;
|
||||||
|
--sent: #ffe4e6;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #fecdd3;
|
||||||
|
--bg: #fff1f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="teal-water"] {
|
||||||
|
--accent: #0f766e;
|
||||||
|
--sent: #ccfbf1;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #99f6e4;
|
||||||
|
--bg: #f0fdfa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 4px;
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted);
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
302
electron/services/exportHtmlStyles.ts
Normal file
302
electron/services/exportHtmlStyles.ts
Normal file
@@ -0,0 +1,302 @@
|
|||||||
|
export const EXPORT_HTML_STYLES = `:root {
|
||||||
|
color-scheme: light;
|
||||||
|
--bg: #f6f7fb;
|
||||||
|
--card: #ffffff;
|
||||||
|
--text: #1f2a37;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--accent: #4f46e5;
|
||||||
|
--sent: #dbeafe;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
|
||||||
|
--radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
max-width: 1080px;
|
||||||
|
margin: 32px auto 60px;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control input,
|
||||||
|
.control select,
|
||||||
|
.control button {
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 10px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control button {
|
||||||
|
background: var(--accent);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control button:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.sent .message-row {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #eef2ff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: #475569;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble {
|
||||||
|
max-width: min(70%, 720px);
|
||||||
|
background: var(--received);
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.sent .bubble {
|
||||||
|
background: var(--sent);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sender-name {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text {
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-emoji {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-media {
|
||||||
|
border-radius: 14px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.previewable {
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-media.image,
|
||||||
|
.message-media.emoji {
|
||||||
|
max-height: 260px;
|
||||||
|
object-fit: contain;
|
||||||
|
background: #f1f5f9;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-media.emoji {
|
||||||
|
max-height: 160px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-media.video {
|
||||||
|
max-height: 360px;
|
||||||
|
background: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-media.audio {
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(15, 23, 42, 0.7);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview.active {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview img {
|
||||||
|
max-width: min(90vw, 1200px);
|
||||||
|
max-height: 90vh;
|
||||||
|
border-radius: 18px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
|
||||||
|
background: #0f172a;
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
cursor: zoom-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="cloud-dancer"] {
|
||||||
|
--accent: #6b8cff;
|
||||||
|
--sent: #e0e7ff;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #d8e0f7;
|
||||||
|
--bg: #f6f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="corundum-blue"] {
|
||||||
|
--accent: #2563eb;
|
||||||
|
--sent: #dbeafe;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #c7d2fe;
|
||||||
|
--bg: #eef2ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="kiwi-green"] {
|
||||||
|
--accent: #16a34a;
|
||||||
|
--sent: #dcfce7;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #bbf7d0;
|
||||||
|
--bg: #f0fdf4;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="spicy-red"] {
|
||||||
|
--accent: #e11d48;
|
||||||
|
--sent: #ffe4e6;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #fecdd3;
|
||||||
|
--bg: #fff1f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme="teal-water"] {
|
||||||
|
--accent: #0f766e;
|
||||||
|
--sent: #ccfbf1;
|
||||||
|
--received: #ffffff;
|
||||||
|
--border: #99f6e4;
|
||||||
|
--bg: #f0fdfa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 4px;
|
||||||
|
border-radius: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted);
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,9 @@
|
|||||||
|
import * as fs from 'fs'
|
||||||
|
import * as path from 'path'
|
||||||
|
import ExcelJS from 'exceljs'
|
||||||
import { ConfigService } from './config'
|
import { ConfigService } from './config'
|
||||||
import { wcdbService } from './wcdbService'
|
import { wcdbService } from './wcdbService'
|
||||||
|
import { chatService } from './chatService'
|
||||||
|
|
||||||
export interface GroupChatInfo {
|
export interface GroupChatInfo {
|
||||||
username: string
|
username: string
|
||||||
@@ -41,6 +45,30 @@ class GroupAnalyticsService {
|
|||||||
this.configService = new ConfigService()
|
this.configService = new ConfigService()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 并发控制:限制同时执行的 Promise 数量
|
||||||
|
private async parallelLimit<T, R>(
|
||||||
|
items: T[],
|
||||||
|
limit: number,
|
||||||
|
fn: (item: T, index: number) => Promise<R>
|
||||||
|
): Promise<R[]> {
|
||||||
|
const results: R[] = new Array(items.length)
|
||||||
|
let currentIndex = 0
|
||||||
|
|
||||||
|
async function runNext(): Promise<void> {
|
||||||
|
while (currentIndex < items.length) {
|
||||||
|
const index = currentIndex++
|
||||||
|
results[index] = await fn(items[index], index)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const workers = Array(Math.min(limit, items.length))
|
||||||
|
.fill(null)
|
||||||
|
.map(() => runNext())
|
||||||
|
|
||||||
|
await Promise.all(workers)
|
||||||
|
return results
|
||||||
|
}
|
||||||
|
|
||||||
private cleanAccountDirName(name: string): string {
|
private cleanAccountDirName(name: string): string {
|
||||||
const trimmed = name.trim()
|
const trimmed = name.trim()
|
||||||
if (!trimmed) return trimmed
|
if (!trimmed) return trimmed
|
||||||
@@ -65,6 +93,139 @@ class GroupAnalyticsService {
|
|||||||
return { success: true }
|
return { success: true }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private looksLikeHex(s: string): boolean {
|
||||||
|
if (s.length % 2 !== 0) return false
|
||||||
|
return /^[0-9a-fA-F]+$/.test(s)
|
||||||
|
}
|
||||||
|
|
||||||
|
private looksLikeBase64(s: string): boolean {
|
||||||
|
if (s.length % 4 !== 0) return false
|
||||||
|
return /^[A-Za-z0-9+/=]+$/.test(s)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析 ext_buffer 二进制数据,提取群成员的群昵称
|
||||||
|
*/
|
||||||
|
private parseGroupNicknamesFromExtBuffer(buffer: Buffer): Map<string, string> {
|
||||||
|
const nicknameMap = new Map<string, string>()
|
||||||
|
|
||||||
|
try {
|
||||||
|
const raw = buffer.toString('utf8')
|
||||||
|
const wxidPattern = /wxid_[a-z0-9_]+/gi
|
||||||
|
const wxids = raw.match(wxidPattern) || []
|
||||||
|
|
||||||
|
for (const wxid of wxids) {
|
||||||
|
const wxidLower = wxid.toLowerCase()
|
||||||
|
const wxidIndex = raw.toLowerCase().indexOf(wxidLower)
|
||||||
|
if (wxidIndex === -1) continue
|
||||||
|
|
||||||
|
const afterWxid = raw.slice(wxidIndex + wxid.length)
|
||||||
|
let nickname = ''
|
||||||
|
let foundStart = false
|
||||||
|
|
||||||
|
for (let i = 0; i < afterWxid.length && i < 100; i++) {
|
||||||
|
const char = afterWxid[i]
|
||||||
|
const code = char.charCodeAt(0)
|
||||||
|
const isPrintable = (
|
||||||
|
(code >= 0x4E00 && code <= 0x9FFF) ||
|
||||||
|
(code >= 0x3000 && code <= 0x303F) ||
|
||||||
|
(code >= 0xFF00 && code <= 0xFFEF) ||
|
||||||
|
(code >= 0x20 && code <= 0x7E)
|
||||||
|
)
|
||||||
|
|
||||||
|
if (isPrintable && code !== 0x01 && code !== 0x18) {
|
||||||
|
foundStart = true
|
||||||
|
nickname += char
|
||||||
|
} else if (foundStart) {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nickname = nickname.trim().replace(/[\x00-\x1F\x7F]/g, '')
|
||||||
|
if (nickname && nickname.length < 50) {
|
||||||
|
nicknameMap.set(wxidLower, nickname)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to parse ext_buffer:', e)
|
||||||
|
}
|
||||||
|
|
||||||
|
return nicknameMap
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 从 contact.db 的 chat_room 表获取群成员的群昵称
|
||||||
|
*/
|
||||||
|
private async getGroupNicknamesForRoom(chatroomId: string): Promise<Map<string, string>> {
|
||||||
|
try {
|
||||||
|
const sql = `SELECT ext_buffer FROM chat_room WHERE username = '${chatroomId.replace(/'/g, "''")}'`
|
||||||
|
const result = await wcdbService.execQuery('contact', null, sql)
|
||||||
|
|
||||||
|
if (!result.success || !result.rows || result.rows.length === 0) {
|
||||||
|
return new Map<string, string>()
|
||||||
|
}
|
||||||
|
|
||||||
|
let extBuffer = result.rows[0].ext_buffer
|
||||||
|
|
||||||
|
if (typeof extBuffer === 'string') {
|
||||||
|
if (this.looksLikeHex(extBuffer)) {
|
||||||
|
extBuffer = Buffer.from(extBuffer, 'hex')
|
||||||
|
} else if (this.looksLikeBase64(extBuffer)) {
|
||||||
|
extBuffer = Buffer.from(extBuffer, 'base64')
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
extBuffer = Buffer.from(extBuffer, 'hex')
|
||||||
|
} catch {
|
||||||
|
extBuffer = Buffer.from(extBuffer, 'base64')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!extBuffer || !Buffer.isBuffer(extBuffer)) {
|
||||||
|
return new Map<string, string>()
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.parseGroupNicknamesFromExtBuffer(extBuffer)
|
||||||
|
} catch (e) {
|
||||||
|
console.error('getGroupNicknamesForRoom error:', e)
|
||||||
|
return new Map<string, string>()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private escapeCsvValue(value: string): string {
|
||||||
|
if (value == null) return ''
|
||||||
|
const str = String(value)
|
||||||
|
if (/[",\n\r]/.test(str)) {
|
||||||
|
return `"${str.replace(/"/g, '""')}"`
|
||||||
|
}
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
|
||||||
|
private normalizeGroupNickname(value: string, wxid: string, fallback: string): string {
|
||||||
|
const trimmed = (value || '').trim()
|
||||||
|
if (!trimmed) return fallback
|
||||||
|
if (/^["'@]+$/.test(trimmed)) return fallback
|
||||||
|
if (trimmed.toLowerCase() === (wxid || '').toLowerCase()) return fallback
|
||||||
|
return trimmed
|
||||||
|
}
|
||||||
|
|
||||||
|
private sanitizeWorksheetName(name: string): string {
|
||||||
|
const cleaned = (name || '').replace(/[*?:\\/\\[\\]]/g, '_').trim()
|
||||||
|
const limited = cleaned.slice(0, 31)
|
||||||
|
return limited || 'Sheet1'
|
||||||
|
}
|
||||||
|
|
||||||
|
private formatDateTime(date: Date): string {
|
||||||
|
const pad = (value: number) => String(value).padStart(2, '0')
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = pad(date.getMonth() + 1)
|
||||||
|
const day = pad(date.getDate())
|
||||||
|
const hour = pad(date.getHours())
|
||||||
|
const minute = pad(date.getMinutes())
|
||||||
|
const second = pad(date.getSeconds())
|
||||||
|
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
|
||||||
|
}
|
||||||
|
|
||||||
async getGroupChats(): Promise<{ success: boolean; data?: GroupChatInfo[]; error?: string }> {
|
async getGroupChats(): Promise<{ success: boolean; data?: GroupChatInfo[]; error?: string }> {
|
||||||
try {
|
try {
|
||||||
const conn = await this.ensureConnected()
|
const conn = await this.ensureConnected()
|
||||||
@@ -80,23 +241,38 @@ class GroupAnalyticsService {
|
|||||||
.map((row) => row.username || row.user_name || row.userName || '')
|
.map((row) => row.username || row.user_name || row.userName || '')
|
||||||
.filter((username) => username.includes('@chatroom'))
|
.filter((username) => username.includes('@chatroom'))
|
||||||
|
|
||||||
const [displayNames, avatarUrls, memberCounts] = await Promise.all([
|
const [memberCounts, contactInfo] = await Promise.all([
|
||||||
wcdbService.getDisplayNames(groupIds),
|
wcdbService.getGroupMemberCounts(groupIds),
|
||||||
wcdbService.getAvatarUrls(groupIds),
|
chatService.enrichSessionsContactInfo(groupIds)
|
||||||
wcdbService.getGroupMemberCounts(groupIds)
|
|
||||||
])
|
])
|
||||||
|
|
||||||
|
let fallbackNames: { success: boolean; map?: Record<string, string> } | null = null
|
||||||
|
let fallbackAvatars: { success: boolean; map?: Record<string, string> } | null = null
|
||||||
|
if (!contactInfo.success || !contactInfo.contacts) {
|
||||||
|
const [displayNames, avatarUrls] = await Promise.all([
|
||||||
|
wcdbService.getDisplayNames(groupIds),
|
||||||
|
wcdbService.getAvatarUrls(groupIds)
|
||||||
|
])
|
||||||
|
fallbackNames = displayNames
|
||||||
|
fallbackAvatars = avatarUrls
|
||||||
|
}
|
||||||
|
|
||||||
const groups: GroupChatInfo[] = []
|
const groups: GroupChatInfo[] = []
|
||||||
for (const groupId of groupIds) {
|
for (const groupId of groupIds) {
|
||||||
|
const contact = contactInfo.success && contactInfo.contacts ? contactInfo.contacts[groupId] : undefined
|
||||||
|
const displayName = contact?.displayName ||
|
||||||
|
(fallbackNames && fallbackNames.success && fallbackNames.map ? (fallbackNames.map[groupId] || '') : '') ||
|
||||||
|
groupId
|
||||||
|
const avatarUrl = contact?.avatarUrl ||
|
||||||
|
(fallbackAvatars && fallbackAvatars.success && fallbackAvatars.map ? fallbackAvatars.map[groupId] : undefined)
|
||||||
|
|
||||||
groups.push({
|
groups.push({
|
||||||
username: groupId,
|
username: groupId,
|
||||||
displayName: displayNames.success && displayNames.map
|
displayName,
|
||||||
? (displayNames.map[groupId] || groupId)
|
|
||||||
: groupId,
|
|
||||||
memberCount: memberCounts.success && memberCounts.map && typeof memberCounts.map[groupId] === 'number'
|
memberCount: memberCounts.success && memberCounts.map && typeof memberCounts.map[groupId] === 'number'
|
||||||
? memberCounts.map[groupId]
|
? memberCounts.map[groupId]
|
||||||
: 0,
|
: 0,
|
||||||
avatarUrl: avatarUrls.success && avatarUrls.map ? avatarUrls.map[groupId] : undefined
|
avatarUrl
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -248,6 +424,187 @@ class GroupAnalyticsService {
|
|||||||
return { success: false, error: String(e) }
|
return { success: false, error: String(e) }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async exportGroupMembers(chatroomId: string, outputPath: string): Promise<{ success: boolean; count?: number; error?: string }> {
|
||||||
|
try {
|
||||||
|
const conn = await this.ensureConnected()
|
||||||
|
if (!conn.success) return { success: false, error: conn.error }
|
||||||
|
|
||||||
|
const exportDate = new Date()
|
||||||
|
const exportTime = this.formatDateTime(exportDate)
|
||||||
|
const exportVersion = '0.0.2'
|
||||||
|
const exportGenerator = 'WeFlow'
|
||||||
|
const exportPlatform = 'wechat'
|
||||||
|
|
||||||
|
const groupDisplay = await wcdbService.getDisplayNames([chatroomId])
|
||||||
|
const groupName = groupDisplay.success && groupDisplay.map
|
||||||
|
? (groupDisplay.map[chatroomId] || chatroomId)
|
||||||
|
: chatroomId
|
||||||
|
|
||||||
|
const groupContact = await wcdbService.getContact(chatroomId)
|
||||||
|
const sessionRemark = (groupContact.success && groupContact.contact)
|
||||||
|
? (groupContact.contact.remark || '')
|
||||||
|
: ''
|
||||||
|
|
||||||
|
const membersResult = await wcdbService.getGroupMembers(chatroomId)
|
||||||
|
if (!membersResult.success || !membersResult.members) {
|
||||||
|
return { success: false, error: membersResult.error || '获取群成员失败' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const members = membersResult.members as { username: string; avatarUrl?: string }[]
|
||||||
|
if (members.length === 0) {
|
||||||
|
return { success: false, error: '群成员为空' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const usernames = members.map((m) => m.username).filter(Boolean)
|
||||||
|
const [displayNames, groupNicknames] = await Promise.all([
|
||||||
|
wcdbService.getDisplayNames(usernames),
|
||||||
|
this.getGroupNicknamesForRoom(chatroomId)
|
||||||
|
])
|
||||||
|
|
||||||
|
const contactMap = new Map<string, { remark?: string; nickName?: string; alias?: string }>()
|
||||||
|
const concurrency = 6
|
||||||
|
await this.parallelLimit(usernames, concurrency, async (username) => {
|
||||||
|
const result = await wcdbService.getContact(username)
|
||||||
|
if (result.success && result.contact) {
|
||||||
|
const contact = result.contact as any
|
||||||
|
contactMap.set(username, {
|
||||||
|
remark: contact.remark || '',
|
||||||
|
nickName: contact.nickName || contact.nick_name || '',
|
||||||
|
alias: contact.alias || ''
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
contactMap.set(username, { remark: '', nickName: '', alias: '' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const infoTitleRow = ['会话信息']
|
||||||
|
const infoRow = ['微信ID', chatroomId, '', '昵称', groupName, '备注', sessionRemark || '', '']
|
||||||
|
const metaRow = ['导出工具', exportGenerator, '导出版本', exportVersion, '平台', exportPlatform, '导出时间', exportTime]
|
||||||
|
|
||||||
|
const header = ['微信昵称', '微信备注', '群昵称', 'wxid', '微信号']
|
||||||
|
const rows: string[][] = [infoTitleRow, infoRow, metaRow, header]
|
||||||
|
const myWxid = this.cleanAccountDirName(this.configService.get('myWxid') || '')
|
||||||
|
|
||||||
|
for (const member of members) {
|
||||||
|
const wxid = member.username
|
||||||
|
const normalizedWxid = this.cleanAccountDirName(wxid || '')
|
||||||
|
const contact = contactMap.get(wxid)
|
||||||
|
const fallbackName = displayNames.success && displayNames.map ? (displayNames.map[wxid] || '') : ''
|
||||||
|
const nickName = contact?.nickName || fallbackName || ''
|
||||||
|
const remark = contact?.remark || ''
|
||||||
|
const rawGroupNickname = groupNicknames.get(wxid.toLowerCase()) || ''
|
||||||
|
const alias = contact?.alias || ''
|
||||||
|
const groupNickname = this.normalizeGroupNickname(
|
||||||
|
rawGroupNickname,
|
||||||
|
normalizedWxid === myWxid ? myWxid : wxid,
|
||||||
|
''
|
||||||
|
)
|
||||||
|
|
||||||
|
rows.push([nickName, remark, groupNickname, wxid, alias])
|
||||||
|
}
|
||||||
|
|
||||||
|
const ext = path.extname(outputPath).toLowerCase()
|
||||||
|
if (ext === '.csv') {
|
||||||
|
const csvLines = rows.map((row) => row.map((cell) => this.escapeCsvValue(cell)).join(','))
|
||||||
|
const content = '\ufeff' + csvLines.join('\n')
|
||||||
|
fs.writeFileSync(outputPath, content, 'utf8')
|
||||||
|
} else {
|
||||||
|
const workbook = new ExcelJS.Workbook()
|
||||||
|
const sheet = workbook.addWorksheet(this.sanitizeWorksheetName('群成员列表'))
|
||||||
|
|
||||||
|
let currentRow = 1
|
||||||
|
const titleCell = sheet.getCell(currentRow, 1)
|
||||||
|
titleCell.value = '会话信息'
|
||||||
|
titleCell.font = { name: 'Calibri', bold: true, size: 11 }
|
||||||
|
titleCell.alignment = { vertical: 'middle', horizontal: 'left' }
|
||||||
|
sheet.getRow(currentRow).height = 25
|
||||||
|
currentRow++
|
||||||
|
|
||||||
|
sheet.getCell(currentRow, 1).value = '微信ID'
|
||||||
|
sheet.getCell(currentRow, 1).font = { name: 'Calibri', bold: true, size: 11 }
|
||||||
|
sheet.mergeCells(currentRow, 2, currentRow, 3)
|
||||||
|
sheet.getCell(currentRow, 2).value = chatroomId
|
||||||
|
sheet.getCell(currentRow, 2).font = { name: 'Calibri', size: 11 }
|
||||||
|
|
||||||
|
sheet.getCell(currentRow, 4).value = '昵称'
|
||||||
|
sheet.getCell(currentRow, 4).font = { name: 'Calibri', bold: true, size: 11 }
|
||||||
|
sheet.getCell(currentRow, 5).value = groupName
|
||||||
|
sheet.getCell(currentRow, 5).font = { name: 'Calibri', size: 11 }
|
||||||
|
|
||||||
|
sheet.getCell(currentRow, 6).value = '备注'
|
||||||
|
sheet.getCell(currentRow, 6).font = { name: 'Calibri', bold: true, size: 11 }
|
||||||
|
sheet.mergeCells(currentRow, 7, currentRow, 8)
|
||||||
|
sheet.getCell(currentRow, 7).value = sessionRemark
|
||||||
|
sheet.getCell(currentRow, 7).font = { name: 'Calibri', size: 11 }
|
||||||
|
|
||||||
|
sheet.getRow(currentRow).height = 20
|
||||||
|
currentRow++
|
||||||
|
|
||||||
|
sheet.getCell(currentRow, 1).value = '导出工具'
|
||||||
|
sheet.getCell(currentRow, 1).font = { name: 'Calibri', bold: true, size: 11 }
|
||||||
|
sheet.getCell(currentRow, 2).value = exportGenerator
|
||||||
|
sheet.getCell(currentRow, 2).font = { name: 'Calibri', size: 10 }
|
||||||
|
|
||||||
|
sheet.getCell(currentRow, 3).value = '导出版本'
|
||||||
|
sheet.getCell(currentRow, 3).font = { name: 'Calibri', bold: true, size: 11 }
|
||||||
|
sheet.getCell(currentRow, 4).value = exportVersion
|
||||||
|
sheet.getCell(currentRow, 4).font = { name: 'Calibri', size: 10 }
|
||||||
|
|
||||||
|
sheet.getCell(currentRow, 5).value = '平台'
|
||||||
|
sheet.getCell(currentRow, 5).font = { name: 'Calibri', bold: true, size: 11 }
|
||||||
|
sheet.getCell(currentRow, 6).value = exportPlatform
|
||||||
|
sheet.getCell(currentRow, 6).font = { name: 'Calibri', size: 10 }
|
||||||
|
|
||||||
|
sheet.getCell(currentRow, 7).value = '导出时间'
|
||||||
|
sheet.getCell(currentRow, 7).font = { name: 'Calibri', bold: true, size: 11 }
|
||||||
|
sheet.getCell(currentRow, 8).value = exportTime
|
||||||
|
sheet.getCell(currentRow, 8).font = { name: 'Calibri', size: 10 }
|
||||||
|
|
||||||
|
sheet.getRow(currentRow).height = 20
|
||||||
|
currentRow++
|
||||||
|
|
||||||
|
const headerRow = sheet.getRow(currentRow)
|
||||||
|
headerRow.height = 22
|
||||||
|
header.forEach((text, index) => {
|
||||||
|
const cell = headerRow.getCell(index + 1)
|
||||||
|
cell.value = text
|
||||||
|
cell.font = { name: 'Calibri', bold: true, size: 11 }
|
||||||
|
})
|
||||||
|
currentRow++
|
||||||
|
|
||||||
|
sheet.getColumn(1).width = 28
|
||||||
|
sheet.getColumn(2).width = 28
|
||||||
|
sheet.getColumn(3).width = 28
|
||||||
|
sheet.getColumn(4).width = 36
|
||||||
|
sheet.getColumn(5).width = 28
|
||||||
|
sheet.getColumn(6).width = 18
|
||||||
|
sheet.getColumn(7).width = 24
|
||||||
|
sheet.getColumn(8).width = 22
|
||||||
|
|
||||||
|
for (let i = 4; i < rows.length; i++) {
|
||||||
|
const [nickName, remark, groupNickname, wxid, alias] = rows[i]
|
||||||
|
const row = sheet.getRow(currentRow)
|
||||||
|
row.getCell(1).value = nickName
|
||||||
|
row.getCell(2).value = remark
|
||||||
|
row.getCell(3).value = groupNickname
|
||||||
|
row.getCell(4).value = wxid
|
||||||
|
row.getCell(5).value = alias
|
||||||
|
row.alignment = { vertical: 'top', wrapText: true }
|
||||||
|
currentRow++
|
||||||
|
}
|
||||||
|
|
||||||
|
await workbook.xlsx.writeFile(outputPath)
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: true, count: members.length }
|
||||||
|
} catch (e) {
|
||||||
|
return { success: false, error: String(e) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const groupAnalyticsService = new GroupAnalyticsService()
|
export const groupAnalyticsService = new GroupAnalyticsService()
|
||||||
|
|||||||
@@ -68,14 +68,7 @@ export class ImageDecryptService {
|
|||||||
const metaStr = meta ? ` ${JSON.stringify(meta)}` : ''
|
const metaStr = meta ? ` ${JSON.stringify(meta)}` : ''
|
||||||
const logLine = `[${timestamp}] [ImageDecrypt] ${message}${metaStr}\n`
|
const logLine = `[${timestamp}] [ImageDecrypt] ${message}${metaStr}\n`
|
||||||
|
|
||||||
// 同时输出到控制台
|
// 只写入文件,不输出到控制台
|
||||||
if (meta) {
|
|
||||||
console.info(message, meta)
|
|
||||||
} else {
|
|
||||||
console.info(message)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 写入日志文件
|
|
||||||
this.writeLog(logLine)
|
this.writeLog(logLine)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -906,42 +899,71 @@ 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']
|
||||||
|
|
||||||
if (sessionId) {
|
// 遍历所有可能的缓存根路径
|
||||||
const sessionDir = join(root, this.sanitizeDirName(sessionId))
|
for (const root of allRoots) {
|
||||||
if (existsSync(sessionDir)) {
|
// 策略1: 新目录结构 Images/{sessionId}/{YYYY-MM}/{file}_hd.jpg
|
||||||
try {
|
if (sessionId) {
|
||||||
const sessionEntries = readdirSync(sessionDir)
|
const sessionDir = join(root, this.sanitizeDirName(sessionId))
|
||||||
for (const entry of sessionEntries) {
|
if (existsSync(sessionDir)) {
|
||||||
const timeDir = join(sessionDir, entry)
|
try {
|
||||||
if (!this.isDirectory(timeDir)) continue
|
const dateDirs = readdirSync(sessionDir, { withFileTypes: true })
|
||||||
const hit = this.findCachedOutputInDir(timeDir, normalizedKey, extensions, preferHd)
|
.filter(d => d.isDirectory() && /^\d{4}-\d{2}$/.test(d.name))
|
||||||
if (hit) return hit
|
.map(d => d.name)
|
||||||
}
|
.sort()
|
||||||
} catch {
|
.reverse() // 最新的日期优先
|
||||||
// ignore
|
|
||||||
|
for (const dateDir of dateDirs) {
|
||||||
|
const imageDir = join(sessionDir, dateDir)
|
||||||
|
const hit = this.findCachedOutputInDir(imageDir, normalizedKey, extensions, preferHd)
|
||||||
|
if (hit) return hit
|
||||||
|
}
|
||||||
|
} catch { }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// 新目录结构: Images/{normalizedKey}/{normalizedKey}_thumb.jpg 或 _hd.jpg
|
// 策略2: 遍历所有 sessionId 目录查找(如果没有指定 sessionId)
|
||||||
const imageDir = join(root, normalizedKey)
|
try {
|
||||||
if (existsSync(imageDir)) {
|
const sessionDirs = readdirSync(root, { withFileTypes: true })
|
||||||
const hit = this.findCachedOutputInDir(imageDir, normalizedKey, extensions, preferHd)
|
.filter(d => d.isDirectory())
|
||||||
if (hit) return hit
|
.map(d => d.name)
|
||||||
}
|
|
||||||
|
|
||||||
// 兼容旧的平铺结构
|
for (const session of sessionDirs) {
|
||||||
for (const ext of extensions) {
|
const sessionDir = join(root, session)
|
||||||
const candidate = join(root, `${cacheKey}${ext}`)
|
// 检查是否是日期目录结构
|
||||||
if (existsSync(candidate)) return candidate
|
try {
|
||||||
}
|
const subDirs = readdirSync(sessionDir, { withFileTypes: true })
|
||||||
for (const ext of extensions) {
|
.filter(d => d.isDirectory() && /^\d{4}-\d{2}$/.test(d.name))
|
||||||
const candidate = join(root, `${cacheKey}_t${ext}`)
|
.map(d => d.name)
|
||||||
if (existsSync(candidate)) return candidate
|
|
||||||
|
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) {
|
||||||
|
const candidate = join(root, `${cacheKey}${ext}`)
|
||||||
|
if (existsSync(candidate)) return candidate
|
||||||
|
}
|
||||||
|
for (const ext of extensions) {
|
||||||
|
const candidate = join(root, `${cacheKey}_t${ext}`)
|
||||||
|
if (existsSync(candidate)) return candidate
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return null
|
return null
|
||||||
@@ -1111,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()
|
// 扫描所有可能的缓存根目录
|
||||||
try {
|
const allRoots = this.getAllCacheRoots()
|
||||||
this.indexCacheDir(root, 2, 0)
|
this.logInfo('开始索引缓存', { roots: allRoots.length })
|
||||||
} catch {
|
|
||||||
this.cacheIndexed = true
|
for (const root of allRoots) {
|
||||||
this.cacheIndexing = null
|
try {
|
||||||
resolve()
|
this.indexCacheDir(root, 3, 0) // 增加深度到3,支持 sessionId/YYYY-MM 结构
|
||||||
return
|
} catch (e) {
|
||||||
|
this.logError('索引目录失败', e, { root })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.logInfo('缓存索引完成', { entries: this.resolvedCache.size })
|
||||||
this.cacheIndexed = true
|
this.cacheIndexed = true
|
||||||
this.cacheIndexing = null
|
this.cacheIndexing = null
|
||||||
resolve()
|
resolve()
|
||||||
@@ -1127,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 {
|
||||||
|
|||||||
@@ -33,6 +33,7 @@ export class KeyService {
|
|||||||
private ReadProcessMemory: any = null
|
private ReadProcessMemory: any = null
|
||||||
private MEMORY_BASIC_INFORMATION: any = null
|
private MEMORY_BASIC_INFORMATION: any = null
|
||||||
private TerminateProcess: any = null
|
private TerminateProcess: any = null
|
||||||
|
private QueryFullProcessImageNameW: any = null
|
||||||
|
|
||||||
// User32
|
// User32
|
||||||
private EnumWindows: any = null
|
private EnumWindows: any = null
|
||||||
@@ -42,6 +43,7 @@ export class KeyService {
|
|||||||
private GetWindowThreadProcessId: any = null
|
private GetWindowThreadProcessId: any = null
|
||||||
private IsWindowVisible: any = null
|
private IsWindowVisible: any = null
|
||||||
private EnumChildWindows: any = null
|
private EnumChildWindows: any = null
|
||||||
|
private PostMessageW: any = null
|
||||||
private WNDENUMPROC_PTR: any = null
|
private WNDENUMPROC_PTR: any = null
|
||||||
|
|
||||||
// Advapi32
|
// Advapi32
|
||||||
@@ -56,6 +58,7 @@ export class KeyService {
|
|||||||
private readonly HKEY_LOCAL_MACHINE = 0x80000002
|
private readonly HKEY_LOCAL_MACHINE = 0x80000002
|
||||||
private readonly HKEY_CURRENT_USER = 0x80000001
|
private readonly HKEY_CURRENT_USER = 0x80000001
|
||||||
private readonly ERROR_SUCCESS = 0
|
private readonly ERROR_SUCCESS = 0
|
||||||
|
private readonly WM_CLOSE = 0x0010
|
||||||
|
|
||||||
private getDllPath(): string {
|
private getDllPath(): string {
|
||||||
const isPackaged = typeof app !== 'undefined' && app ? app.isPackaged : process.env.NODE_ENV === 'production'
|
const isPackaged = typeof app !== 'undefined' && app ? app.isPackaged : process.env.NODE_ENV === 'production'
|
||||||
@@ -194,6 +197,7 @@ export class KeyService {
|
|||||||
this.OpenProcess = this.kernel32.func('OpenProcess', 'HANDLE', ['uint32', 'bool', 'uint32'])
|
this.OpenProcess = this.kernel32.func('OpenProcess', 'HANDLE', ['uint32', 'bool', 'uint32'])
|
||||||
this.CloseHandle = this.kernel32.func('CloseHandle', 'bool', ['HANDLE'])
|
this.CloseHandle = this.kernel32.func('CloseHandle', 'bool', ['HANDLE'])
|
||||||
this.TerminateProcess = this.kernel32.func('TerminateProcess', 'bool', ['HANDLE', 'uint32'])
|
this.TerminateProcess = this.kernel32.func('TerminateProcess', 'bool', ['HANDLE', 'uint32'])
|
||||||
|
this.QueryFullProcessImageNameW = this.kernel32.func('QueryFullProcessImageNameW', 'bool', ['HANDLE', 'uint32', this.koffi.out('uint16*'), this.koffi.out('uint32*')])
|
||||||
this.VirtualQueryEx = this.kernel32.func('VirtualQueryEx', 'uint64', ['HANDLE', 'uint64', this.koffi.out(this.koffi.pointer(this.MEMORY_BASIC_INFORMATION)), 'uint64'])
|
this.VirtualQueryEx = this.kernel32.func('VirtualQueryEx', 'uint64', ['HANDLE', 'uint64', this.koffi.out(this.koffi.pointer(this.MEMORY_BASIC_INFORMATION)), 'uint64'])
|
||||||
this.ReadProcessMemory = this.kernel32.func('ReadProcessMemory', 'bool', ['HANDLE', 'uint64', 'void*', 'uint64', this.koffi.out(this.koffi.pointer('uint64'))])
|
this.ReadProcessMemory = this.kernel32.func('ReadProcessMemory', 'bool', ['HANDLE', 'uint64', 'void*', 'uint64', this.koffi.out(this.koffi.pointer('uint64'))])
|
||||||
|
|
||||||
@@ -222,6 +226,7 @@ export class KeyService {
|
|||||||
|
|
||||||
this.EnumWindows = this.user32.func('EnumWindows', 'bool', [this.WNDENUMPROC_PTR, 'intptr_t'])
|
this.EnumWindows = this.user32.func('EnumWindows', 'bool', [this.WNDENUMPROC_PTR, 'intptr_t'])
|
||||||
this.EnumChildWindows = this.user32.func('EnumChildWindows', 'bool', ['void*', this.WNDENUMPROC_PTR, 'intptr_t'])
|
this.EnumChildWindows = this.user32.func('EnumChildWindows', 'bool', ['void*', this.WNDENUMPROC_PTR, 'intptr_t'])
|
||||||
|
this.PostMessageW = this.user32.func('PostMessageW', 'bool', ['void*', 'uint32', 'uintptr_t', 'intptr_t'])
|
||||||
|
|
||||||
this.GetWindowTextW = this.user32.func('GetWindowTextW', 'int', ['void*', this.koffi.out('uint16*'), 'int'])
|
this.GetWindowTextW = this.user32.func('GetWindowTextW', 'int', ['void*', this.koffi.out('uint16*'), 'int'])
|
||||||
this.GetWindowTextLengthW = this.user32.func('GetWindowTextLengthW', 'int', ['void*'])
|
this.GetWindowTextLengthW = this.user32.func('GetWindowTextLengthW', 'int', ['void*'])
|
||||||
@@ -310,7 +315,46 @@ export class KeyService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private async getProcessExecutablePath(pid: number): Promise<string | null> {
|
||||||
|
if (!this.ensureKernel32()) return null
|
||||||
|
// 0x1000 = PROCESS_QUERY_LIMITED_INFORMATION
|
||||||
|
const hProcess = this.OpenProcess(0x1000, false, pid)
|
||||||
|
if (!hProcess) return null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const sizeBuf = Buffer.alloc(4)
|
||||||
|
sizeBuf.writeUInt32LE(1024, 0)
|
||||||
|
const pathBuf = Buffer.alloc(1024 * 2)
|
||||||
|
|
||||||
|
const ret = this.QueryFullProcessImageNameW(hProcess, 0, pathBuf, sizeBuf)
|
||||||
|
if (ret) {
|
||||||
|
const len = sizeBuf.readUInt32LE(0)
|
||||||
|
return pathBuf.toString('ucs2', 0, len * 2)
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
} catch (e) {
|
||||||
|
console.error('获取进程路径失败:', e)
|
||||||
|
return null
|
||||||
|
} finally {
|
||||||
|
this.CloseHandle(hProcess)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private async findWeChatInstallPath(): Promise<string | null> {
|
private async findWeChatInstallPath(): Promise<string | null> {
|
||||||
|
// 0. 优先尝试获取正在运行的微信进程路径
|
||||||
|
try {
|
||||||
|
const pid = await this.findWeChatPid()
|
||||||
|
if (pid) {
|
||||||
|
const runPath = await this.getProcessExecutablePath(pid)
|
||||||
|
if (runPath && existsSync(runPath)) {
|
||||||
|
console.log('发现正在运行的微信进程,使用路径:', runPath)
|
||||||
|
return runPath
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('尝试获取运行中微信路径失败:', e)
|
||||||
|
}
|
||||||
|
|
||||||
// 1. Registry - Uninstall Keys
|
// 1. Registry - Uninstall Keys
|
||||||
const uninstallKeys = [
|
const uninstallKeys = [
|
||||||
'SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Uninstall',
|
'SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Uninstall',
|
||||||
@@ -396,16 +440,60 @@ export class KeyService {
|
|||||||
return fallbackPid ?? null
|
return fallbackPid ?? null
|
||||||
}
|
}
|
||||||
|
|
||||||
private async killWeChatProcesses() {
|
private async waitForWeChatExit(timeoutMs = 8000): Promise<boolean> {
|
||||||
|
const start = Date.now()
|
||||||
|
while (Date.now() - start < timeoutMs) {
|
||||||
|
const weixinPid = await this.findPidByImageName('Weixin.exe')
|
||||||
|
const wechatPid = await this.findPidByImageName('WeChat.exe')
|
||||||
|
if (!weixinPid && !wechatPid) return true
|
||||||
|
await new Promise(r => setTimeout(r, 400))
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
private async closeWeChatWindows(): Promise<boolean> {
|
||||||
|
if (!this.ensureUser32()) return false
|
||||||
|
let requested = false
|
||||||
|
|
||||||
|
const enumWindowsCallback = this.koffi.register((hWnd: any, lParam: any) => {
|
||||||
|
if (!this.IsWindowVisible(hWnd)) return true
|
||||||
|
const title = this.getWindowTitle(hWnd)
|
||||||
|
const className = this.getClassName(hWnd)
|
||||||
|
const classLower = (className || '').toLowerCase()
|
||||||
|
const isWeChatWindow = this.isWeChatWindowTitle(title) || classLower.includes('wechat') || classLower.includes('weixin')
|
||||||
|
if (!isWeChatWindow) return true
|
||||||
|
|
||||||
|
requested = true
|
||||||
|
try {
|
||||||
|
this.PostMessageW?.(hWnd, this.WM_CLOSE, 0, 0)
|
||||||
|
} catch { }
|
||||||
|
return true
|
||||||
|
}, this.WNDENUMPROC_PTR)
|
||||||
|
|
||||||
|
this.EnumWindows(enumWindowsCallback, 0)
|
||||||
|
this.koffi.unregister(enumWindowsCallback)
|
||||||
|
|
||||||
|
return requested
|
||||||
|
}
|
||||||
|
|
||||||
|
private async killWeChatProcesses(): Promise<boolean> {
|
||||||
|
const requested = await this.closeWeChatWindows()
|
||||||
|
if (requested) {
|
||||||
|
const gracefulOk = await this.waitForWeChatExit(1500)
|
||||||
|
if (gracefulOk) return true
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await execFileAsync('taskkill', ['/F', '/IM', 'Weixin.exe'])
|
await execFileAsync('taskkill', ['/F', '/T', '/IM', 'Weixin.exe'])
|
||||||
await execFileAsync('taskkill', ['/F', '/IM', 'WeChat.exe'])
|
await execFileAsync('taskkill', ['/F', '/T', '/IM', 'WeChat.exe'])
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// Ignore if not found
|
// Ignore if not found
|
||||||
}
|
}
|
||||||
await new Promise(r => setTimeout(r, 1000))
|
|
||||||
|
return await this.waitForWeChatExit(5000)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// --- Window Detection ---
|
// --- Window Detection ---
|
||||||
|
|
||||||
private getWindowTitle(hWnd: any): string {
|
private getWindowTitle(hWnd: any): string {
|
||||||
@@ -564,15 +652,24 @@ export class KeyService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 2. Restart WeChat
|
// 2. Restart WeChat
|
||||||
onStatus?.('正在重启微信以进行获取...', 0)
|
onStatus?.('正在关闭微信以进行获取...', 0)
|
||||||
await this.killWeChatProcesses()
|
const closed = await this.killWeChatProcesses()
|
||||||
|
if (!closed) {
|
||||||
|
const err = '无法自动关闭微信,请手动退出后重试'
|
||||||
|
onStatus?.(err, 2)
|
||||||
|
return { success: false, error: err }
|
||||||
|
}
|
||||||
|
|
||||||
// 3. Launch
|
// 3. Launch
|
||||||
onStatus?.('正在启动微信...', 0)
|
onStatus?.('正在启动微信...', 0)
|
||||||
const sub = spawn(wechatPath, { detached: true, stdio: 'ignore' })
|
const sub = spawn(wechatPath, {
|
||||||
|
detached: true,
|
||||||
|
stdio: 'ignore',
|
||||||
|
cwd: dirname(wechatPath)
|
||||||
|
})
|
||||||
sub.unref()
|
sub.unref()
|
||||||
|
|
||||||
// 4. Wait for Window & Get PID (Crucial change: discover PID from window)
|
// 4. Wait for Window & Get PID (Crucial change: discover PID from window)
|
||||||
onStatus?.('等待微信界面就绪...', 0)
|
onStatus?.('等待微信界面就绪...', 0)
|
||||||
const pid = await this.waitForWeChatWindow()
|
const pid = await this.waitForWeChatWindow()
|
||||||
if (!pid) {
|
if (!pid) {
|
||||||
@@ -588,6 +685,11 @@ export class KeyService {
|
|||||||
if (!ok) {
|
if (!ok) {
|
||||||
const error = this.getLastErrorMsg ? this.decodeCString(this.getLastErrorMsg()) : ''
|
const error = this.getLastErrorMsg ? this.decodeCString(this.getLastErrorMsg()) : ''
|
||||||
if (error) {
|
if (error) {
|
||||||
|
// 检测权限不足错误 (NTSTATUS 0xC0000022 = STATUS_ACCESS_DENIED)
|
||||||
|
if (error.includes('0xC0000022') || error.includes('ACCESS_DENIED') || error.includes('打开目标进程失败')) {
|
||||||
|
const friendlyError = '权限不足:无法访问微信进程。\n\n解决方法:\n1. 右键 WeFlow 图标,选择"以管理员身份运行"\n2. 关闭可能拦截的安全软件(如360、火绒等)\n3. 确保微信没有以管理员权限运行'
|
||||||
|
return { success: false, error: friendlyError }
|
||||||
|
}
|
||||||
return { success: false, error }
|
return { success: false, error }
|
||||||
}
|
}
|
||||||
const statusBuffer = Buffer.alloc(256)
|
const statusBuffer = Buffer.alloc(256)
|
||||||
@@ -836,16 +938,17 @@ export class KeyService {
|
|||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
private isAlphaNumAscii(byte: number): boolean {
|
private isAlphaNumLower(byte: number): boolean {
|
||||||
return (byte >= 0x61 && byte <= 0x7a) || (byte >= 0x41 && byte <= 0x5a) || (byte >= 0x30 && byte <= 0x39)
|
// 只匹配小写字母 a-z 和数字 0-9(AES密钥格式)
|
||||||
|
return (byte >= 0x61 && byte <= 0x7a) || (byte >= 0x30 && byte <= 0x39)
|
||||||
}
|
}
|
||||||
|
|
||||||
private isUtf16AsciiKey(buf: Buffer, start: number): boolean {
|
private isUtf16LowerKey(buf: Buffer, start: number): boolean {
|
||||||
if (start + 64 > buf.length) return false
|
if (start + 64 > buf.length) return false
|
||||||
for (let j = 0; j < 32; j++) {
|
for (let j = 0; j < 32; j++) {
|
||||||
const charByte = buf[start + j * 2]
|
const charByte = buf[start + j * 2]
|
||||||
const nullByte = buf[start + j * 2 + 1]
|
const nullByte = buf[start + j * 2 + 1]
|
||||||
if (nullByte !== 0x00 || !this.isAlphaNumAscii(charByte)) {
|
if (nullByte !== 0x00 || !this.isAlphaNumLower(charByte)) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -878,8 +981,6 @@ export class KeyService {
|
|||||||
const regions: Array<[number, number]> = []
|
const regions: Array<[number, number]> = []
|
||||||
const MEM_COMMIT = 0x1000
|
const MEM_COMMIT = 0x1000
|
||||||
const MEM_PRIVATE = 0x20000
|
const MEM_PRIVATE = 0x20000
|
||||||
const MEM_MAPPED = 0x40000
|
|
||||||
const MEM_IMAGE = 0x1000000
|
|
||||||
const PAGE_NOACCESS = 0x01
|
const PAGE_NOACCESS = 0x01
|
||||||
const PAGE_GUARD = 0x100
|
const PAGE_GUARD = 0x100
|
||||||
|
|
||||||
@@ -894,10 +995,9 @@ export class KeyService {
|
|||||||
const protect = info.Protect
|
const protect = info.Protect
|
||||||
const type = info.Type
|
const type = info.Type
|
||||||
const regionSize = Number(info.RegionSize)
|
const regionSize = Number(info.RegionSize)
|
||||||
if (state === MEM_COMMIT && (protect & PAGE_NOACCESS) === 0 && (protect & PAGE_GUARD) === 0) {
|
// 只收集已提交的私有内存(大幅减少扫描区域)
|
||||||
if (type === MEM_PRIVATE || type === MEM_MAPPED || type === MEM_IMAGE) {
|
if (state === MEM_COMMIT && type === MEM_PRIVATE && (protect & PAGE_NOACCESS) === 0 && (protect & PAGE_GUARD) === 0) {
|
||||||
regions.push([Number(info.BaseAddress), regionSize])
|
regions.push([Number(info.BaseAddress), regionSize])
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const nextAddress = address + regionSize
|
const nextAddress = address + regionSize
|
||||||
@@ -926,86 +1026,51 @@ export class KeyService {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const allRegions = this.getMemoryRegions(hProcess)
|
const allRegions = this.getMemoryRegions(hProcess)
|
||||||
|
const totalRegions = allRegions.length
|
||||||
|
let scannedCount = 0
|
||||||
|
let skippedCount = 0
|
||||||
|
|
||||||
// 优化1: 只保留小内存区域(< 10MB)- 密钥通常在小区域,可大幅减少扫描时间
|
for (const [baseAddress, regionSize] of allRegions) {
|
||||||
const filteredRegions = allRegions.filter(([_, size]) => size <= 10 * 1024 * 1024)
|
// 跳过太大的内存区域(> 100MB)
|
||||||
|
if (regionSize > 100 * 1024 * 1024) {
|
||||||
|
skippedCount++
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
// 优化2: 优先级排序 - 按大小升序,先扫描小区域(密钥通常在较小区域)
|
scannedCount++
|
||||||
const sortedRegions = filteredRegions.sort((a, b) => a[1] - b[1])
|
if (scannedCount % 10 === 0) {
|
||||||
|
onProgress?.(scannedCount, totalRegions, `正在扫描微信内存... (${scannedCount}/${totalRegions})`)
|
||||||
|
await new Promise(resolve => setImmediate(resolve))
|
||||||
|
}
|
||||||
|
|
||||||
// 优化3: 计算总字节数用于精确进度报告
|
const memory = this.readProcessMemory(hProcess, baseAddress, regionSize)
|
||||||
const totalBytes = sortedRegions.reduce((sum, [_, size]) => sum + size, 0)
|
if (!memory) continue
|
||||||
let processedBytes = 0
|
|
||||||
|
|
||||||
// 优化4: 减小分块大小到 1MB(参考 wx_key 项目)
|
// 直接在原始字节中搜索32字节的小写字母数字序列
|
||||||
const chunkSize = 1 * 1024 * 1024
|
for (let i = 0; i < memory.length - 34; i++) {
|
||||||
const overlap = 65
|
// 检查前导字符(不是小写字母或数字)
|
||||||
let currentRegion = 0
|
if (this.isAlphaNumLower(memory[i])) continue
|
||||||
|
|
||||||
for (const [baseAddress, regionSize] of sortedRegions) {
|
// 检查接下来32个字节是否都是小写字母或数字
|
||||||
currentRegion++
|
let valid = true
|
||||||
const progress = totalBytes > 0 ? Math.floor((processedBytes / totalBytes) * 100) : 0
|
for (let j = 1; j <= 32; j++) {
|
||||||
onProgress?.(progress, 100, `扫描内存 ${progress}% (${currentRegion}/${sortedRegions.length})`)
|
if (!this.isAlphaNumLower(memory[i + j])) {
|
||||||
|
valid = false
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!valid) continue
|
||||||
|
|
||||||
// 每个区域都让出主线程,确保UI流畅
|
// 检查尾部字符(不是小写字母或数字)
|
||||||
await new Promise(resolve => setImmediate(resolve))
|
if (i + 33 < memory.length && this.isAlphaNumLower(memory[i + 33])) {
|
||||||
let offset = 0
|
|
||||||
let trailing: Buffer | null = null
|
|
||||||
while (offset < regionSize) {
|
|
||||||
const remaining = regionSize - offset
|
|
||||||
const currentChunkSize = remaining > chunkSize ? chunkSize : remaining
|
|
||||||
const chunk = this.readProcessMemory(hProcess, baseAddress + offset, currentChunkSize)
|
|
||||||
if (!chunk || !chunk.length) {
|
|
||||||
offset += currentChunkSize
|
|
||||||
trailing = null
|
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
|
||||||
let dataToScan: Buffer
|
const keyBytes = memory.subarray(i + 1, i + 33)
|
||||||
if (trailing && trailing.length) {
|
if (this.verifyKey(ciphertext, keyBytes)) {
|
||||||
dataToScan = Buffer.concat([trailing, chunk])
|
return keyBytes.toString('ascii')
|
||||||
} else {
|
|
||||||
dataToScan = chunk
|
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let i = 0; i < dataToScan.length - 34; i++) {
|
|
||||||
if (this.isAlphaNumAscii(dataToScan[i])) continue
|
|
||||||
let valid = true
|
|
||||||
for (let j = 1; j <= 32; j++) {
|
|
||||||
if (!this.isAlphaNumAscii(dataToScan[i + j])) {
|
|
||||||
valid = false
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (valid && this.isAlphaNumAscii(dataToScan[i + 33])) {
|
|
||||||
valid = false
|
|
||||||
}
|
|
||||||
if (valid) {
|
|
||||||
const keyBytes = dataToScan.subarray(i + 1, i + 33)
|
|
||||||
if (this.verifyKey(ciphertext, keyBytes)) {
|
|
||||||
return keyBytes.toString('ascii')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < dataToScan.length - 65; i++) {
|
|
||||||
if (!this.isUtf16AsciiKey(dataToScan, i)) continue
|
|
||||||
const keyBytes = Buffer.alloc(32)
|
|
||||||
for (let j = 0; j < 32; j++) {
|
|
||||||
keyBytes[j] = dataToScan[i + j * 2]
|
|
||||||
}
|
|
||||||
if (this.verifyKey(ciphertext, keyBytes)) {
|
|
||||||
return keyBytes.toString('ascii')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const start = dataToScan.length - overlap
|
|
||||||
trailing = dataToScan.subarray(start < 0 ? 0 : start)
|
|
||||||
offset += currentChunkSize
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新已处理字节数
|
|
||||||
processedBytes += regionSize
|
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
255
electron/services/snsService.ts
Normal file
255
electron/services/snsService.ts
Normal file
@@ -0,0 +1,255 @@
|
|||||||
|
import { wcdbService } from './wcdbService'
|
||||||
|
import { ConfigService } from './config'
|
||||||
|
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 {
|
||||||
|
id: string
|
||||||
|
username: string
|
||||||
|
nickname: string
|
||||||
|
avatarUrl?: string
|
||||||
|
createTime: number
|
||||||
|
contentDesc: string
|
||||||
|
type?: number
|
||||||
|
media: SnsMedia[]
|
||||||
|
likes: 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 {
|
||||||
|
private contactCache: ContactCacheService
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
const config = new ConfigService()
|
||||||
|
this.contactCache = new ContactCacheService(config.get('cachePath') as string)
|
||||||
|
}
|
||||||
|
|
||||||
|
async getTimeline(limit: number = 20, offset: number = 0, usernames?: string[], keyword?: string, startTime?: number, endTime?: number): Promise<{ success: boolean; timeline?: SnsPost[]; error?: string }> {
|
||||||
|
console.log('[SnsService] getTimeline called with:', { limit, offset, usernames, keyword, startTime, endTime })
|
||||||
|
|
||||||
|
const result = await wcdbService.getSnsTimeline(limit, offset, usernames, keyword, startTime, endTime)
|
||||||
|
|
||||||
|
console.log('[SnsService] getSnsTimeline result:', {
|
||||||
|
success: result.success,
|
||||||
|
timelineCount: result.timeline?.length,
|
||||||
|
error: result.error
|
||||||
|
})
|
||||||
|
|
||||||
|
if (result.success && result.timeline) {
|
||||||
|
const enrichedTimeline = result.timeline.map((post: any, index: number) => {
|
||||||
|
const contact = this.contactCache.get(post.username)
|
||||||
|
|
||||||
|
// 修复媒体 URL
|
||||||
|
const fixedMedia = post.media.map((m: any, mIdx: number) => {
|
||||||
|
const base = {
|
||||||
|
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 {
|
||||||
|
...post,
|
||||||
|
avatarUrl: contact?.avatarUrl,
|
||||||
|
nickname: post.nickname || contact?.displayName || post.username,
|
||||||
|
media: fixedMedia
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('[SnsService] Returning enriched timeline with', enrichedTimeline.length, 'posts')
|
||||||
|
return { ...result, timeline: enrichedTimeline }
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('[SnsService] Returning result:', 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()
|
||||||
256
electron/services/videoService.ts
Normal file
256
electron/services/videoService.ts
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
import { join } from 'path'
|
||||||
|
import { existsSync, readdirSync, statSync, readFileSync } from 'fs'
|
||||||
|
import { ConfigService } from './config'
|
||||||
|
import Database from 'better-sqlite3'
|
||||||
|
import { wcdbService } from './wcdbService'
|
||||||
|
|
||||||
|
export interface VideoInfo {
|
||||||
|
videoUrl?: string // 视频文件路径(用于 readFile)
|
||||||
|
coverUrl?: string // 封面 data URL
|
||||||
|
thumbUrl?: string // 缩略图 data URL
|
||||||
|
exists: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
class VideoService {
|
||||||
|
private configService: ConfigService
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.configService = new ConfigService()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取数据库根目录
|
||||||
|
*/
|
||||||
|
private getDbPath(): string {
|
||||||
|
return this.configService.get('dbPath') || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前用户的wxid
|
||||||
|
*/
|
||||||
|
private getMyWxid(): string {
|
||||||
|
return this.configService.get('myWxid') || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取缓存目录(解密后的数据库存放位置)
|
||||||
|
*/
|
||||||
|
private getCachePath(): string {
|
||||||
|
return this.configService.get('cachePath') || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 清理 wxid 目录名(去掉后缀)
|
||||||
|
*/
|
||||||
|
private cleanWxid(wxid: string): string {
|
||||||
|
const trimmed = wxid.trim()
|
||||||
|
if (!trimmed) return trimmed
|
||||||
|
|
||||||
|
if (trimmed.toLowerCase().startsWith('wxid_')) {
|
||||||
|
const match = trimmed.match(/^(wxid_[^_]+)/i)
|
||||||
|
if (match) return match[1]
|
||||||
|
return trimmed
|
||||||
|
}
|
||||||
|
|
||||||
|
const suffixMatch = trimmed.match(/^(.+)_([a-zA-Z0-9]{4})$/)
|
||||||
|
if (suffixMatch) return suffixMatch[1]
|
||||||
|
|
||||||
|
return trimmed
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 从 video_hardlink_info_v4 表查询视频文件名
|
||||||
|
* 优先使用 cachePath 中解密后的 hardlink.db(使用 better-sqlite3)
|
||||||
|
* 如果失败,则尝试使用 wcdbService.execQuery 查询加密的 hardlink.db
|
||||||
|
*/
|
||||||
|
private async queryVideoFileName(md5: string): Promise<string | undefined> {
|
||||||
|
const cachePath = this.getCachePath()
|
||||||
|
const dbPath = this.getDbPath()
|
||||||
|
const wxid = this.getMyWxid()
|
||||||
|
const cleanedWxid = this.cleanWxid(wxid)
|
||||||
|
|
||||||
|
if (!wxid) return undefined
|
||||||
|
|
||||||
|
// 方法1:优先在 cachePath 下查找解密后的 hardlink.db
|
||||||
|
if (cachePath) {
|
||||||
|
const cacheDbPaths = [
|
||||||
|
join(cachePath, cleanedWxid, 'hardlink.db'),
|
||||||
|
join(cachePath, wxid, 'hardlink.db'),
|
||||||
|
join(cachePath, 'hardlink.db'),
|
||||||
|
join(cachePath, 'databases', cleanedWxid, 'hardlink.db'),
|
||||||
|
join(cachePath, 'databases', wxid, 'hardlink.db')
|
||||||
|
]
|
||||||
|
|
||||||
|
for (const p of cacheDbPaths) {
|
||||||
|
if (existsSync(p)) {
|
||||||
|
try {
|
||||||
|
const db = new Database(p, { readonly: true })
|
||||||
|
const row = db.prepare(`
|
||||||
|
SELECT file_name, md5 FROM video_hardlink_info_v4
|
||||||
|
WHERE md5 = ?
|
||||||
|
LIMIT 1
|
||||||
|
`).get(md5) as { file_name: string; md5: string } | undefined
|
||||||
|
db.close()
|
||||||
|
|
||||||
|
if (row?.file_name) {
|
||||||
|
const realMd5 = row.file_name.replace(/\.[^.]+$/, '')
|
||||||
|
return realMd5
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// Silently fail
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 方法2:使用 wcdbService.execQuery 查询加密的 hardlink.db
|
||||||
|
if (dbPath) {
|
||||||
|
const encryptedDbPaths = [
|
||||||
|
join(dbPath, wxid, 'db_storage', 'hardlink', 'hardlink.db'),
|
||||||
|
join(dbPath, cleanedWxid, 'db_storage', 'hardlink', 'hardlink.db')
|
||||||
|
]
|
||||||
|
|
||||||
|
for (const p of encryptedDbPaths) {
|
||||||
|
if (existsSync(p)) {
|
||||||
|
try {
|
||||||
|
const escapedMd5 = md5.replace(/'/g, "''")
|
||||||
|
|
||||||
|
// 用 md5 字段查询,获取 file_name
|
||||||
|
const sql = `SELECT file_name FROM video_hardlink_info_v4 WHERE md5 = '${escapedMd5}' LIMIT 1`
|
||||||
|
|
||||||
|
const result = await wcdbService.execQuery('media', p, sql)
|
||||||
|
|
||||||
|
if (result.success && result.rows && result.rows.length > 0) {
|
||||||
|
const row = result.rows[0]
|
||||||
|
if (row?.file_name) {
|
||||||
|
// 提取不带扩展名的文件名作为实际视频 MD5
|
||||||
|
const realMd5 = String(row.file_name).replace(/\.[^.]+$/, '')
|
||||||
|
return realMd5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将文件转换为 data URL
|
||||||
|
*/
|
||||||
|
private fileToDataUrl(filePath: string, mimeType: string): string | undefined {
|
||||||
|
try {
|
||||||
|
if (!existsSync(filePath)) return undefined
|
||||||
|
const buffer = readFileSync(filePath)
|
||||||
|
return `data:${mimeType};base64,${buffer.toString('base64')}`
|
||||||
|
} catch {
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据视频MD5获取视频文件信息
|
||||||
|
* 视频存放在: {数据库根目录}/{用户wxid}/msg/video/{年月}/
|
||||||
|
* 文件命名: {md5}.mp4, {md5}.jpg, {md5}_thumb.jpg
|
||||||
|
*/
|
||||||
|
async getVideoInfo(videoMd5: string): Promise<VideoInfo> {
|
||||||
|
|
||||||
|
const dbPath = this.getDbPath()
|
||||||
|
const wxid = this.getMyWxid()
|
||||||
|
|
||||||
|
if (!dbPath || !wxid || !videoMd5) {
|
||||||
|
return { exists: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 先尝试从数据库查询真正的视频文件名
|
||||||
|
const realVideoMd5 = await this.queryVideoFileName(videoMd5) || videoMd5
|
||||||
|
|
||||||
|
const videoBaseDir = join(dbPath, wxid, 'msg', 'video')
|
||||||
|
|
||||||
|
if (!existsSync(videoBaseDir)) {
|
||||||
|
return { exists: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 遍历年月目录查找视频文件
|
||||||
|
try {
|
||||||
|
const allDirs = readdirSync(videoBaseDir)
|
||||||
|
|
||||||
|
// 支持多种目录格式: YYYY-MM, YYYYMM, 或其他
|
||||||
|
const yearMonthDirs = allDirs
|
||||||
|
.filter(dir => {
|
||||||
|
const dirPath = join(videoBaseDir, dir)
|
||||||
|
return statSync(dirPath).isDirectory()
|
||||||
|
})
|
||||||
|
.sort((a, b) => b.localeCompare(a)) // 从最新的目录开始查找
|
||||||
|
|
||||||
|
for (const yearMonth of yearMonthDirs) {
|
||||||
|
const dirPath = join(videoBaseDir, yearMonth)
|
||||||
|
|
||||||
|
const videoPath = join(dirPath, `${realVideoMd5}.mp4`)
|
||||||
|
const coverPath = join(dirPath, `${realVideoMd5}.jpg`)
|
||||||
|
const thumbPath = join(dirPath, `${realVideoMd5}_thumb.jpg`)
|
||||||
|
|
||||||
|
// 检查视频文件是否存在
|
||||||
|
if (existsSync(videoPath)) {
|
||||||
|
return {
|
||||||
|
videoUrl: videoPath, // 返回文件路径,前端通过 readFile 读取
|
||||||
|
coverUrl: this.fileToDataUrl(coverPath, 'image/jpeg'),
|
||||||
|
thumbUrl: this.fileToDataUrl(thumbPath, 'image/jpeg'),
|
||||||
|
exists: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[VideoService] Error searching for video:', e)
|
||||||
|
}
|
||||||
|
|
||||||
|
return { exists: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据消息内容解析视频MD5
|
||||||
|
*/
|
||||||
|
parseVideoMd5(content: string): string | undefined {
|
||||||
|
|
||||||
|
// 打印前500字符看看 XML 结构
|
||||||
|
|
||||||
|
if (!content) return undefined
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 提取所有可能的 md5 值进行日志
|
||||||
|
const allMd5s: string[] = []
|
||||||
|
const md5Regex = /(?:md5|rawmd5|newmd5|originsourcemd5)\s*=\s*['"]([a-fA-F0-9]+)['"]/gi
|
||||||
|
let match
|
||||||
|
while ((match = md5Regex.exec(content)) !== null) {
|
||||||
|
allMd5s.push(`${match[0]}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提取 md5(用于查询 hardlink.db)
|
||||||
|
// 注意:不是 rawmd5,rawmd5 是另一个值
|
||||||
|
// 格式: md5="xxx" 或 <md5>xxx</md5>
|
||||||
|
|
||||||
|
// 尝试从videomsg标签中提取md5
|
||||||
|
const videoMsgMatch = /<videomsg[^>]*\smd5\s*=\s*['"]([a-fA-F0-9]+)['"]/i.exec(content)
|
||||||
|
if (videoMsgMatch) {
|
||||||
|
return videoMsgMatch[1].toLowerCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
const attrMatch = /\smd5\s*=\s*['"]([a-fA-F0-9]+)['"]/i.exec(content)
|
||||||
|
if (attrMatch) {
|
||||||
|
return attrMatch[1].toLowerCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
const md5Match = /<md5>([a-fA-F0-9]+)<\/md5>/i.exec(content)
|
||||||
|
if (md5Match) {
|
||||||
|
return md5Match[1].toLowerCase()
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[VideoService] 解析视频MD5失败:', e)
|
||||||
|
}
|
||||||
|
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const videoService = new VideoService()
|
||||||
@@ -224,13 +224,16 @@ export class VoiceTranscribeService {
|
|||||||
let finalTranscript = ''
|
let finalTranscript = ''
|
||||||
|
|
||||||
worker.on('message', (msg: any) => {
|
worker.on('message', (msg: any) => {
|
||||||
|
console.log('[VoiceTranscribe] Worker 消息:', msg)
|
||||||
if (msg.type === 'partial') {
|
if (msg.type === 'partial') {
|
||||||
onPartial?.(msg.text)
|
onPartial?.(msg.text)
|
||||||
} else if (msg.type === 'final') {
|
} else if (msg.type === 'final') {
|
||||||
finalTranscript = msg.text
|
finalTranscript = msg.text
|
||||||
|
console.log('[VoiceTranscribe] 最终文本:', finalTranscript)
|
||||||
resolve({ success: true, transcript: finalTranscript })
|
resolve({ success: true, transcript: finalTranscript })
|
||||||
worker.terminate()
|
worker.terminate()
|
||||||
} else if (msg.type === 'error') {
|
} else if (msg.type === 'error') {
|
||||||
|
console.error('[VoiceTranscribe] Worker 错误:', msg.error)
|
||||||
resolve({ success: false, error: msg.error })
|
resolve({ success: false, error: msg.error })
|
||||||
worker.terminate()
|
worker.terminate()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,12 @@
|
|||||||
import { join, dirname, basename } from 'path'
|
import { join, dirname, basename } from 'path'
|
||||||
import { appendFileSync, existsSync, mkdirSync, readdirSync, statSync, readFileSync } from 'fs'
|
import { appendFileSync, existsSync, mkdirSync, readdirSync, statSync, readFileSync } from 'fs'
|
||||||
|
|
||||||
|
// DLL 初始化错误信息,用于帮助用户诊断问题
|
||||||
|
let lastDllInitError: string | null = null
|
||||||
|
export function getLastDllInitError(): string | null {
|
||||||
|
return lastDllInitError
|
||||||
|
}
|
||||||
|
|
||||||
export class WcdbCore {
|
export class WcdbCore {
|
||||||
private resourcesPath: string | null = null
|
private resourcesPath: string | null = null
|
||||||
private userDataPath: string | null = null
|
private userDataPath: string | null = null
|
||||||
@@ -14,6 +20,7 @@ export class WcdbCore {
|
|||||||
private currentWxid: string | null = null
|
private currentWxid: string | null = null
|
||||||
|
|
||||||
// 函数引用
|
// 函数引用
|
||||||
|
private wcdbInitProtection: any = null
|
||||||
private wcdbInit: any = null
|
private wcdbInit: any = null
|
||||||
private wcdbShutdown: any = null
|
private wcdbShutdown: any = null
|
||||||
private wcdbOpenAccount: any = null
|
private wcdbOpenAccount: any = null
|
||||||
@@ -49,6 +56,8 @@ export class WcdbCore {
|
|||||||
private wcdbGetEmoticonCdnUrl: any = null
|
private wcdbGetEmoticonCdnUrl: any = null
|
||||||
private wcdbGetDbStatus: any = null
|
private wcdbGetDbStatus: any = null
|
||||||
private wcdbGetVoiceData: any = null
|
private wcdbGetVoiceData: any = null
|
||||||
|
private wcdbGetSnsTimeline: any = null
|
||||||
|
private wcdbVerifyUser: any = null
|
||||||
private avatarUrlCache: Map<string, { url?: string; updatedAt: number }> = new Map()
|
private avatarUrlCache: Map<string, { url?: string; updatedAt: number }> = new Map()
|
||||||
private readonly avatarCacheTtlMs = 10 * 60 * 1000
|
private readonly avatarCacheTtlMs = 10 * 60 * 1000
|
||||||
private logTimer: NodeJS.Timeout | null = null
|
private logTimer: NodeJS.Timeout | null = null
|
||||||
@@ -110,7 +119,8 @@ export class WcdbCore {
|
|||||||
private writeLog(message: string, force = false): void {
|
private writeLog(message: string, force = false): void {
|
||||||
if (!force && !this.isLogEnabled()) return
|
if (!force && !this.isLogEnabled()) return
|
||||||
const line = `[${new Date().toISOString()}] ${message}`
|
const line = `[${new Date().toISOString()}] ${message}`
|
||||||
console.log(`[WCDB] ${line}`)
|
// 同时输出到控制台和文件
|
||||||
|
console.log('[WCDB]', message)
|
||||||
try {
|
try {
|
||||||
const base = this.userDataPath || process.env.WCDB_LOG_DIR || process.cwd()
|
const base = this.userDataPath || process.env.WCDB_LOG_DIR || process.cwd()
|
||||||
const dir = join(base, 'logs')
|
const dir = join(base, 'logs')
|
||||||
@@ -208,8 +218,68 @@ export class WcdbCore {
|
|||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 关键修复:显式预加载依赖库 WCDB.dll 和 SDL2.dll
|
||||||
|
// Windows 加载器默认不会查找子目录中的依赖,必须先将其加载到内存
|
||||||
|
// 这可以解决部分用户因为 VC++ 运行时或 DLL 依赖问题导致的闪退
|
||||||
|
const dllDir = dirname(dllPath)
|
||||||
|
const wcdbCorePath = join(dllDir, 'WCDB.dll')
|
||||||
|
if (existsSync(wcdbCorePath)) {
|
||||||
|
try {
|
||||||
|
this.koffi.load(wcdbCorePath)
|
||||||
|
this.writeLog('预加载 WCDB.dll 成功')
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('预加载 WCDB.dll 失败(可能不是致命的):', e)
|
||||||
|
this.writeLog(`预加载 WCDB.dll 失败: ${String(e)}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const sdl2Path = join(dllDir, 'SDL2.dll')
|
||||||
|
if (existsSync(sdl2Path)) {
|
||||||
|
try {
|
||||||
|
this.koffi.load(sdl2Path)
|
||||||
|
this.writeLog('预加载 SDL2.dll 成功')
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('预加载 SDL2.dll 失败(可能不是致命的):', e)
|
||||||
|
this.writeLog(`预加载 SDL2.dll 失败: ${String(e)}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
this.lib = this.koffi.load(dllPath)
|
this.lib = this.koffi.load(dllPath)
|
||||||
|
|
||||||
|
// InitProtection (Added for security)
|
||||||
|
try {
|
||||||
|
this.wcdbInitProtection = this.lib.func('bool InitProtection(const char* resourcePath)')
|
||||||
|
|
||||||
|
// 尝试多个可能的资源路径
|
||||||
|
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) {
|
||||||
|
// console.warn('[WCDB] Core security check failed - 继续运行但可能不稳定')
|
||||||
|
// this.writeLog('InitProtection 失败,继续运行')
|
||||||
|
// 不返回 false,允许继续运行
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// console.warn('InitProtection symbol not found:', e)
|
||||||
|
}
|
||||||
|
|
||||||
// 定义类型
|
// 定义类型
|
||||||
// wcdb_status wcdb_init()
|
// wcdb_status wcdb_init()
|
||||||
this.wcdbInit = this.lib.func('int32 wcdb_init()')
|
this.wcdbInit = this.lib.func('int32 wcdb_init()')
|
||||||
@@ -354,6 +424,20 @@ export class WcdbCore {
|
|||||||
this.wcdbGetVoiceData = null
|
this.wcdbGetVoiceData = null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// wcdb_status wcdb_get_sns_timeline(wcdb_handle handle, int32_t limit, int32_t offset, const char* username, const char* keyword, int32_t start_time, int32_t end_time, char** out_json)
|
||||||
|
try {
|
||||||
|
this.wcdbGetSnsTimeline = this.lib.func('int32 wcdb_get_sns_timeline(int64 handle, int32 limit, int32 offset, const char* username, const char* keyword, int32 startTime, int32 endTime, _Out_ void** outJson)')
|
||||||
|
} catch {
|
||||||
|
this.wcdbGetSnsTimeline = null
|
||||||
|
}
|
||||||
|
|
||||||
|
// void VerifyUser(int64_t hwnd_ptr, const char* message, char* out_result, int max_len)
|
||||||
|
try {
|
||||||
|
this.wcdbVerifyUser = this.lib.func('void VerifyUser(int64 hwnd, const char* message, _Out_ char* outResult, int maxLen)')
|
||||||
|
} catch {
|
||||||
|
this.wcdbVerifyUser = null
|
||||||
|
}
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
const initResult = this.wcdbInit()
|
const initResult = this.wcdbInit()
|
||||||
if (initResult !== 0) {
|
if (initResult !== 0) {
|
||||||
@@ -362,9 +446,20 @@ export class WcdbCore {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.initialized = true
|
this.initialized = true
|
||||||
|
lastDllInitError = null
|
||||||
return true
|
return true
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('WCDB 初始化异常:', e)
|
const errorMsg = e instanceof Error ? e.message : String(e)
|
||||||
|
console.error('WCDB 初始化异常:', errorMsg)
|
||||||
|
this.writeLog(`WCDB 初始化异常: ${errorMsg}`, true)
|
||||||
|
lastDllInitError = errorMsg
|
||||||
|
// 检查是否是常见的 VC++ 运行时缺失错误
|
||||||
|
if (errorMsg.includes('126') || errorMsg.includes('找不到指定的模块') ||
|
||||||
|
errorMsg.includes('The specified module could not be found')) {
|
||||||
|
lastDllInitError = '可能缺少 Visual C++ 运行时库。请安装 Microsoft Visual C++ Redistributable (x64)。'
|
||||||
|
} else if (errorMsg.includes('193') || errorMsg.includes('不是有效的 Win32 应用程序')) {
|
||||||
|
lastDllInitError = 'DLL 架构不匹配。请确保使用 64 位版本的应用程序。'
|
||||||
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -382,10 +477,18 @@ export class WcdbCore {
|
|||||||
return { success: true, sessionCount: 0 }
|
return { success: true, sessionCount: 0 }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 记录当前活动连接,用于在测试结束后恢复(避免影响聊天页等正在使用的连接)
|
||||||
|
const hadActiveConnection = this.handle !== null
|
||||||
|
const prevPath = this.currentPath
|
||||||
|
const prevKey = this.currentKey
|
||||||
|
const prevWxid = this.currentWxid
|
||||||
|
|
||||||
if (!this.initialized) {
|
if (!this.initialized) {
|
||||||
const initOk = await this.initialize()
|
const initOk = await this.initialize()
|
||||||
if (!initOk) {
|
if (!initOk) {
|
||||||
return { success: false, error: 'WCDB 初始化失败' }
|
// 返回更详细的错误信息,帮助用户诊断问题
|
||||||
|
const detailedError = lastDllInitError || 'WCDB 初始化失败'
|
||||||
|
return { success: false, error: detailedError }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -424,8 +527,8 @@ export class WcdbCore {
|
|||||||
return { success: false, error: '无效的数据库句柄' }
|
return { success: false, error: '无效的数据库句柄' }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 测试成功,使用 shutdown 清理所有资源(包括测试句柄)
|
// 测试成功:使用 shutdown 清理资源(包括测试句柄)
|
||||||
// 这会中断当前活动连接,但 testConnection 本应该是独立测试
|
// 注意:shutdown 会断开当前活动连接,因此需要在测试后尝试恢复之前的连接
|
||||||
try {
|
try {
|
||||||
this.wcdbShutdown()
|
this.wcdbShutdown()
|
||||||
this.handle = null
|
this.handle = null
|
||||||
@@ -437,6 +540,15 @@ export class WcdbCore {
|
|||||||
console.error('关闭测试数据库时出错:', closeErr)
|
console.error('关闭测试数据库时出错:', closeErr)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 恢复测试前的连接(如果之前有活动连接)
|
||||||
|
if (hadActiveConnection && prevPath && prevKey && prevWxid) {
|
||||||
|
try {
|
||||||
|
await this.open(prevPath, prevKey, prevWxid)
|
||||||
|
} catch {
|
||||||
|
// 恢复失败则保持断开,由调用方处理
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return { success: true, sessionCount: 0 }
|
return { success: true, sessionCount: 0 }
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('测试连接异常:', e)
|
console.error('测试连接异常:', e)
|
||||||
@@ -620,7 +732,7 @@ export class WcdbCore {
|
|||||||
try {
|
try {
|
||||||
this.wcdbSetMyWxid(this.handle, wxid)
|
this.wcdbSetMyWxid(this.handle, wxid)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn('设置 wxid 失败:', e)
|
// 静默失败
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.isLogEnabled()) {
|
if (this.isLogEnabled()) {
|
||||||
@@ -799,7 +911,6 @@ export class WcdbCore {
|
|||||||
await new Promise(resolve => setImmediate(resolve))
|
await new Promise(resolve => setImmediate(resolve))
|
||||||
|
|
||||||
if (result !== 0 || !outPtr[0]) {
|
if (result !== 0 || !outPtr[0]) {
|
||||||
console.warn(`[wcdbCore] getAvatarUrls DLL调用失败: result=${result}, usernames=${toFetch.length}`)
|
|
||||||
if (Object.keys(resultMap).length > 0) {
|
if (Object.keys(resultMap).length > 0) {
|
||||||
return { success: true, map: resultMap, error: `获取头像失败: ${result}` }
|
return { success: true, map: resultMap, error: `获取头像失败: ${result}` }
|
||||||
}
|
}
|
||||||
@@ -807,25 +918,18 @@ export class WcdbCore {
|
|||||||
}
|
}
|
||||||
const jsonStr = this.decodeJsonPtr(outPtr[0])
|
const jsonStr = this.decodeJsonPtr(outPtr[0])
|
||||||
if (!jsonStr) {
|
if (!jsonStr) {
|
||||||
console.error('[wcdbCore] getAvatarUrls 解析JSON失败')
|
|
||||||
return { success: false, error: '解析头像失败' }
|
return { success: false, error: '解析头像失败' }
|
||||||
}
|
}
|
||||||
const map = JSON.parse(jsonStr) as Record<string, string>
|
const map = JSON.parse(jsonStr) as Record<string, string>
|
||||||
let successCount = 0
|
|
||||||
let emptyCount = 0
|
|
||||||
for (const username of toFetch) {
|
for (const username of toFetch) {
|
||||||
const url = map[username]
|
const url = map[username]
|
||||||
if (url && url.trim()) {
|
if (url && url.trim()) {
|
||||||
resultMap[username] = url
|
resultMap[username] = url
|
||||||
// 只缓存有效的URL
|
// 只缓存有效的URL
|
||||||
this.avatarUrlCache.set(username, { url, updatedAt: now })
|
this.avatarUrlCache.set(username, { url, updatedAt: now })
|
||||||
successCount++
|
|
||||||
} else {
|
|
||||||
emptyCount++
|
|
||||||
// 不缓存空URL,下次可以重新尝试
|
|
||||||
}
|
}
|
||||||
|
// 不缓存空URL,下次可以重新尝试
|
||||||
}
|
}
|
||||||
console.log(`[wcdbCore] getAvatarUrls 成功: ${successCount}个, 空结果: ${emptyCount}个, 总请求: ${toFetch.length}`)
|
|
||||||
return { success: true, map: resultMap }
|
return { success: true, map: resultMap }
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('[wcdbCore] getAvatarUrls 异常:', e)
|
console.error('[wcdbCore] getAvatarUrls 异常:', e)
|
||||||
@@ -1337,4 +1441,65 @@ export class WcdbCore {
|
|||||||
return { success: false, error: String(e) }
|
return { success: false, error: String(e) }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
/**
|
||||||
|
* 验证 Windows Hello
|
||||||
|
*/
|
||||||
|
async verifyUser(message: string, hwnd?: string): Promise<{ success: boolean; error?: string }> {
|
||||||
|
if (!this.initialized) {
|
||||||
|
const initOk = await this.initialize()
|
||||||
|
if (!initOk) return { success: false, error: 'WCDB 初始化失败' }
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.wcdbVerifyUser) {
|
||||||
|
return { success: false, error: 'Binding not found: VerifyUser' }
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
try {
|
||||||
|
// Allocate buffer for result JSON
|
||||||
|
const maxLen = 1024
|
||||||
|
const outBuf = Buffer.alloc(maxLen)
|
||||||
|
|
||||||
|
// Call native function
|
||||||
|
const hwndVal = hwnd ? BigInt(hwnd) : BigInt(0)
|
||||||
|
this.wcdbVerifyUser(hwndVal, message || '', outBuf, maxLen)
|
||||||
|
|
||||||
|
// Parse result
|
||||||
|
const jsonStr = this.koffi.decode(outBuf, 'char', -1)
|
||||||
|
const result = JSON.parse(jsonStr)
|
||||||
|
resolve(result)
|
||||||
|
} catch (e) {
|
||||||
|
resolve({ success: false, error: String(e) })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async getSnsTimeline(limit: number, offset: number, usernames?: string[], keyword?: string, startTime?: number, endTime?: number): Promise<{ success: boolean; timeline?: any[]; error?: string }> {
|
||||||
|
if (!this.ensureReady()) return { success: false, error: 'WCDB 未连接' }
|
||||||
|
if (!this.wcdbGetSnsTimeline) return { success: false, error: '当前 DLL 版本不支持获取朋友圈' }
|
||||||
|
try {
|
||||||
|
const outPtr = [null as any]
|
||||||
|
const usernamesJson = usernames && usernames.length > 0 ? JSON.stringify(usernames) : ''
|
||||||
|
const result = this.wcdbGetSnsTimeline(
|
||||||
|
this.handle,
|
||||||
|
limit,
|
||||||
|
offset,
|
||||||
|
usernamesJson,
|
||||||
|
keyword || '',
|
||||||
|
startTime || 0,
|
||||||
|
endTime || 0,
|
||||||
|
outPtr
|
||||||
|
)
|
||||||
|
if (result !== 0 || !outPtr[0]) {
|
||||||
|
return { success: false, error: `获取朋友圈失败: ${result}` }
|
||||||
|
}
|
||||||
|
const jsonStr = this.decodeJsonPtr(outPtr[0])
|
||||||
|
if (!jsonStr) return { success: false, error: '解析朋友圈数据失败' }
|
||||||
|
const timeline = JSON.parse(jsonStr)
|
||||||
|
return { success: true, timeline }
|
||||||
|
} catch (e) {
|
||||||
|
return { success: false, error: String(e) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -58,12 +58,24 @@ export class WcdbService {
|
|||||||
})
|
})
|
||||||
|
|
||||||
this.worker.on('error', (err) => {
|
this.worker.on('error', (err) => {
|
||||||
// Worker error
|
// Worker 发生错误,需要 reject 所有 pending promises
|
||||||
|
console.error('WCDB Worker 错误:', err)
|
||||||
|
const errorMsg = err instanceof Error ? err.message : String(err)
|
||||||
|
for (const [id, p] of this.pending) {
|
||||||
|
p.reject(new Error(`Worker 错误: ${errorMsg}`))
|
||||||
|
}
|
||||||
|
this.pending.clear()
|
||||||
})
|
})
|
||||||
|
|
||||||
this.worker.on('exit', (code) => {
|
this.worker.on('exit', (code) => {
|
||||||
|
// Worker 退出,需要 reject 所有 pending promises
|
||||||
if (code !== 0) {
|
if (code !== 0) {
|
||||||
// Worker exited with error
|
console.error('WCDB Worker 异常退出,退出码:', code)
|
||||||
|
const errorMsg = `Worker 异常退出 (退出码: ${code})。可能是 DLL 加载失败,请检查是否安装了 Visual C++ Redistributable。`
|
||||||
|
for (const [id, p] of this.pending) {
|
||||||
|
p.reject(new Error(errorMsg))
|
||||||
|
}
|
||||||
|
this.pending.clear()
|
||||||
}
|
}
|
||||||
this.worker = null
|
this.worker = null
|
||||||
})
|
})
|
||||||
@@ -350,6 +362,20 @@ export class WcdbService {
|
|||||||
return this.callWorker('getVoiceData', { sessionId, createTime, candidates, localId, svrId })
|
return this.callWorker('getVoiceData', { sessionId, createTime, candidates, localId, svrId })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取朋友圈
|
||||||
|
*/
|
||||||
|
async getSnsTimeline(limit: number, offset: number, usernames?: string[], keyword?: string, startTime?: number, endTime?: number): Promise<{ success: boolean; timeline?: any[]; error?: string }> {
|
||||||
|
return this.callWorker('getSnsTimeline', { limit, offset, usernames, keyword, startTime, endTime })
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 验证 Windows Hello
|
||||||
|
*/
|
||||||
|
async verifyUser(message: string, hwnd?: string): Promise<{ success: boolean; error?: string }> {
|
||||||
|
return this.callWorker('verifyUser', { message, hwnd })
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const wcdbService = new WcdbService()
|
export const wcdbService = new WcdbService()
|
||||||
|
|||||||
32
electron/services/windowsHelloService.ts
Normal file
32
electron/services/windowsHelloService.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import { wcdbService } from './wcdbService'
|
||||||
|
import { BrowserWindow } from 'electron'
|
||||||
|
|
||||||
|
export class WindowsHelloService {
|
||||||
|
private verificationPromise: Promise<{ success: boolean; error?: string }> | null = null
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 验证 Windows Hello
|
||||||
|
* @param message 提示信息
|
||||||
|
*/
|
||||||
|
async verify(message: string = '请验证您的身份以解锁 WeFlow', targetWindow?: BrowserWindow): Promise<{ success: boolean; error?: string }> {
|
||||||
|
// Prevent concurrent verification requests
|
||||||
|
if (this.verificationPromise) {
|
||||||
|
return this.verificationPromise
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取窗口句柄: 优先使用传入的窗口,否则尝试获取焦点窗口,最后兜底主窗口
|
||||||
|
const window = targetWindow || BrowserWindow.getFocusedWindow() || BrowserWindow.getAllWindows()[0]
|
||||||
|
const hwndBuffer = window?.getNativeWindowHandle()
|
||||||
|
// Convert buffer to int string for transport
|
||||||
|
const hwndStr = hwndBuffer ? BigInt('0x' + hwndBuffer.toString('hex')).toString() : undefined
|
||||||
|
|
||||||
|
this.verificationPromise = wcdbService.verifyUser(message, hwndStr)
|
||||||
|
.finally(() => {
|
||||||
|
this.verificationPromise = null
|
||||||
|
})
|
||||||
|
|
||||||
|
return this.verificationPromise
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const windowsHelloService = new WindowsHelloService()
|
||||||
@@ -116,6 +116,12 @@ if (parentPort) {
|
|||||||
console.error('[wcdbWorker] getVoiceData failed:', result.error)
|
console.error('[wcdbWorker] getVoiceData failed:', result.error)
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
|
case 'getSnsTimeline':
|
||||||
|
result = await core.getSnsTimeline(payload.limit, payload.offset, payload.usernames, payload.keyword, payload.startTime, payload.endTime)
|
||||||
|
break
|
||||||
|
case 'verifyUser':
|
||||||
|
result = await core.verifyUser(payload.message, payload.hwnd)
|
||||||
|
break
|
||||||
default:
|
default:
|
||||||
result = { success: false, error: `Unknown method: ${type}` }
|
result = { success: false, error: `Unknown method: ${type}` }
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 |
10
package-lock.json
generated
10
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "weflow",
|
"name": "weflow",
|
||||||
"version": "1.2.0",
|
"version": "1.4.4",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "weflow",
|
"name": "weflow",
|
||||||
"version": "1.2.0",
|
"version": "1.4.4",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"better-sqlite3": "^12.5.0",
|
"better-sqlite3": "^12.5.0",
|
||||||
@@ -7380,6 +7380,12 @@
|
|||||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/nan": {
|
||||||
|
"version": "2.25.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/nan/-/nan-2.25.0.tgz",
|
||||||
|
"integrity": "sha512-0M90Ag7Xn5KMLLZ7zliPWP3rT90P6PN+IzVFS0VqmnPktBk3700xUVv8Ikm9EUaUE5SDWdp/BIxdENzVznpm1g==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/nanoid": {
|
"node_modules/nanoid": {
|
||||||
"version": "3.3.11",
|
"version": "3.3.11",
|
||||||
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
|
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
|
||||||
|
|||||||
31
package.json
31
package.json
@@ -1,12 +1,17 @@
|
|||||||
{
|
{
|
||||||
"name": "weflow",
|
"name": "weflow",
|
||||||
"version": "1.2.0",
|
"version": "1.4.4",
|
||||||
"description": "WeFlow",
|
"description": "WeFlow",
|
||||||
"main": "dist-electron/main.js",
|
"main": "dist-electron/main.js",
|
||||||
"author": "cc",
|
"author": "cc",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/hicccc77/WeFlow"
|
||||||
|
},
|
||||||
|
"//": "二改不应改变此处的作者与应用信息",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"postinstall": "echo 'No native modules to rebuild'",
|
"postinstall": "echo 'No native modules to rebuild'",
|
||||||
"rebuild": "echo 'No native modules to rebuild'",
|
"rebuild": "electron-rebuild",
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc && vite build && electron-builder",
|
"build": "tsc && vite build && electron-builder",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
@@ -54,6 +59,8 @@
|
|||||||
"appId": "com.WeFlow.app",
|
"appId": "com.WeFlow.app",
|
||||||
"publish": {
|
"publish": {
|
||||||
"provider": "github",
|
"provider": "github",
|
||||||
|
"owner": "hicccc77",
|
||||||
|
"repo": "WeFlow",
|
||||||
"releaseType": "release"
|
"releaseType": "release"
|
||||||
},
|
},
|
||||||
"productName": "WeFlow",
|
"productName": "WeFlow",
|
||||||
@@ -105,6 +112,24 @@
|
|||||||
"asarUnpack": [
|
"asarUnpack": [
|
||||||
"node_modules/silk-wasm/**/*",
|
"node_modules/silk-wasm/**/*",
|
||||||
"node_modules/sherpa-onnx-node/**/*"
|
"node_modules/sherpa-onnx-node/**/*"
|
||||||
|
],
|
||||||
|
"extraFiles": [
|
||||||
|
{
|
||||||
|
"from": "resources/msvcp140.dll",
|
||||||
|
"to": "."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"from": "resources/msvcp140_1.dll",
|
||||||
|
"to": "."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"from": "resources/vcruntime140.dll",
|
||||||
|
"to": "."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"from": "resources/vcruntime140_1.dll",
|
||||||
|
"to": "."
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
resources/msvcp140.dll
Normal file
BIN
resources/msvcp140.dll
Normal file
Binary file not shown.
BIN
resources/msvcp140_1.dll
Normal file
BIN
resources/msvcp140_1.dll
Normal file
Binary file not shown.
Binary file not shown.
BIN
resources/vcruntime140.dll
Normal file
BIN
resources/vcruntime140.dll
Normal file
Binary file not shown.
BIN
resources/vcruntime140_1.dll
Normal file
BIN
resources/vcruntime140_1.dll
Normal file
Binary file not shown.
Binary file not shown.
173
src/App.tsx
173
src/App.tsx
@@ -12,9 +12,12 @@ import AnnualReportPage from './pages/AnnualReportPage'
|
|||||||
import AnnualReportWindow from './pages/AnnualReportWindow'
|
import AnnualReportWindow from './pages/AnnualReportWindow'
|
||||||
import AgreementPage from './pages/AgreementPage'
|
import AgreementPage from './pages/AgreementPage'
|
||||||
import GroupAnalyticsPage from './pages/GroupAnalyticsPage'
|
import GroupAnalyticsPage from './pages/GroupAnalyticsPage'
|
||||||
import DataManagementPage from './pages/DataManagementPage'
|
|
||||||
import SettingsPage from './pages/SettingsPage'
|
import SettingsPage from './pages/SettingsPage'
|
||||||
import ExportPage from './pages/ExportPage'
|
import ExportPage from './pages/ExportPage'
|
||||||
|
import VideoWindow from './pages/VideoWindow'
|
||||||
|
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'
|
||||||
@@ -22,25 +25,47 @@ 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,
|
||||||
|
isLocked,
|
||||||
|
setLocked
|
||||||
|
} = 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 isChatHistoryWindow = location.pathname.startsWith('/chat-history/')
|
||||||
const [themeHydrated, setThemeHydrated] = useState(false)
|
const [themeHydrated, setThemeHydrated] = useState(false)
|
||||||
|
|
||||||
|
// 锁定状态
|
||||||
|
// const [isLocked, setIsLocked] = useState(false) // Moved to store
|
||||||
|
const [lockAvatar, setLockAvatar] = useState<string | undefined>(
|
||||||
|
localStorage.getItem('app_lock_avatar') || 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
|
||||||
@@ -145,26 +170,34 @@ 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: any) => {
|
||||||
setDownloadProgress(progress)
|
setDownloadProgress(progress)
|
||||||
})
|
})
|
||||||
return () => {
|
return () => {
|
||||||
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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -182,9 +215,15 @@ function App() {
|
|||||||
const decryptKey = await configService.getDecryptKey()
|
const decryptKey = await configService.getDecryptKey()
|
||||||
const wxid = await configService.getMyWxid()
|
const wxid = await configService.getMyWxid()
|
||||||
const onboardingDone = await configService.getOnboardingDone()
|
const onboardingDone = await configService.getOnboardingDone()
|
||||||
|
const wxidConfig = wxid ? await configService.getWxidConfig(wxid) : null
|
||||||
|
const effectiveDecryptKey = wxidConfig?.decryptKey || decryptKey
|
||||||
|
|
||||||
|
if (wxidConfig?.decryptKey && wxidConfig.decryptKey !== decryptKey) {
|
||||||
|
await configService.setDecryptKey(wxidConfig.decryptKey)
|
||||||
|
}
|
||||||
|
|
||||||
// 如果配置完整,自动测试连接
|
// 如果配置完整,自动测试连接
|
||||||
if (dbPath && decryptKey && wxid) {
|
if (dbPath && effectiveDecryptKey && wxid) {
|
||||||
if (!onboardingDone) {
|
if (!onboardingDone) {
|
||||||
await configService.setOnboardingDone(true)
|
await configService.setOnboardingDone(true)
|
||||||
}
|
}
|
||||||
@@ -200,16 +239,57 @@ function App() {
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log('自动连接失败:', result.error)
|
console.log('自动连接失败:', result.error)
|
||||||
|
// 如果错误信息包含 VC++ 或 DLL 相关内容,不清除配置,只提示用户
|
||||||
|
// 其他错误可能需要重新配置
|
||||||
|
const errorMsg = result.error || ''
|
||||||
|
if (errorMsg.includes('Visual C++') ||
|
||||||
|
errorMsg.includes('DLL') ||
|
||||||
|
errorMsg.includes('Worker') ||
|
||||||
|
errorMsg.includes('126') ||
|
||||||
|
errorMsg.includes('模块')) {
|
||||||
|
console.warn('检测到可能的运行时依赖问题:', errorMsg)
|
||||||
|
// 不清除配置,让用户安装 VC++ 后重试
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('自动连接出错:', e)
|
console.error('自动连接出错:', e)
|
||||||
|
// 捕获异常但不清除配置,防止循环重新引导
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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)
|
||||||
|
setLocked(true)
|
||||||
|
// 尝试获取头像
|
||||||
|
try {
|
||||||
|
const result = await window.electronAPI.chat.getMyAvatarUrl()
|
||||||
|
if (result && result.success && result.avatarUrl) {
|
||||||
|
setLockAvatar(result.avatarUrl)
|
||||||
|
localStorage.setItem('app_lock_avatar', result.avatarUrl)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('获取锁屏头像失败', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
checkLock()
|
||||||
|
}, [isAgreementWindow, isOnboardingWindow, isVideoPlayerWindow])
|
||||||
|
|
||||||
// 独立协议窗口
|
// 独立协议窗口
|
||||||
if (isAgreementWindow) {
|
if (isAgreementWindow) {
|
||||||
return <AgreementPage />
|
return <AgreementPage />
|
||||||
@@ -219,11 +299,31 @@ function App() {
|
|||||||
return <WelcomePage standalone />
|
return <WelcomePage standalone />
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 独立视频播放窗口
|
||||||
|
if (isVideoPlayerWindow) {
|
||||||
|
return <VideoWindow />
|
||||||
|
}
|
||||||
|
|
||||||
|
// 独立聊天记录窗口
|
||||||
|
if (isChatHistoryWindow) {
|
||||||
|
return <ChatHistoryPage />
|
||||||
|
}
|
||||||
|
|
||||||
// 主窗口 - 完整布局
|
// 主窗口 - 完整布局
|
||||||
return (
|
return (
|
||||||
<div className="app-container">
|
<div className="app-container">
|
||||||
|
{isLocked && (
|
||||||
|
<LockScreen
|
||||||
|
onUnlock={() => setLocked(false)}
|
||||||
|
avatar={lockAvatar}
|
||||||
|
useHello={lockUseHello}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<TitleBar />
|
<TitleBar />
|
||||||
|
|
||||||
|
{/* 全局悬浮进度胶囊 (处理:新版本提示、下载进度、错误提示) */}
|
||||||
|
<UpdateProgressCapsule />
|
||||||
|
|
||||||
{/* 用户协议弹窗 */}
|
{/* 用户协议弹窗 */}
|
||||||
{showAgreement && !agreementLoading && (
|
{showAgreement && !agreementLoading && (
|
||||||
<div className="agreement-overlay">
|
<div className="agreement-overlay">
|
||||||
@@ -245,13 +345,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>
|
||||||
@@ -275,31 +375,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 />
|
||||||
@@ -314,9 +398,12 @@ function App() {
|
|||||||
<Route path="/group-analytics" element={<GroupAnalyticsPage />} />
|
<Route path="/group-analytics" element={<GroupAnalyticsPage />} />
|
||||||
<Route path="/annual-report" element={<AnnualReportPage />} />
|
<Route path="/annual-report" element={<AnnualReportPage />} />
|
||||||
<Route path="/annual-report/view" element={<AnnualReportWindow />} />
|
<Route path="/annual-report/view" element={<AnnualReportWindow />} />
|
||||||
<Route path="/data-management" element={<DataManagementPage />} />
|
|
||||||
<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="/contacts" element={<ContactsPage />} />
|
||||||
|
<Route path="/chat-history/:sessionId/:messageId" element={<ChatHistoryPage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</RouteGuard>
|
</RouteGuard>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
238
src/components/JumpToDateDialog.scss
Normal file
238
src/components/JumpToDateDialog.scss
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
.jump-date-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 2000;
|
||||||
|
animation: fadeIn 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-date-modal {
|
||||||
|
background: var(--card-bg);
|
||||||
|
width: 340px;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-date-header {
|
||||||
|
padding: 18px 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
|
||||||
|
.title-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-view {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.calendar-nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.current-month {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-grid {
|
||||||
|
.weekdays {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
.weekday {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.days {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
.day-cell {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&.empty {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.empty):hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.today:not(.selected) {
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 600;
|
||||||
|
background: var(--primary-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-options {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 0 20px 16px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--primary);
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-footer {
|
||||||
|
padding: 16px 20px;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
|
||||||
|
button {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
background: var(--primary);
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes modalSlideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
156
src/components/JumpToDateDialog.tsx
Normal file
156
src/components/JumpToDateDialog.tsx
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
import React, { useState } from 'react'
|
||||||
|
import { X, ChevronLeft, ChevronRight, Calendar as CalendarIcon } from 'lucide-react'
|
||||||
|
import './JumpToDateDialog.scss'
|
||||||
|
|
||||||
|
interface JumpToDateDialogProps {
|
||||||
|
isOpen: boolean
|
||||||
|
onClose: () => void
|
||||||
|
onSelect: (date: Date) => void
|
||||||
|
currentDate?: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
const JumpToDateDialog: React.FC<JumpToDateDialogProps> = ({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
onSelect,
|
||||||
|
currentDate = new Date()
|
||||||
|
}) => {
|
||||||
|
const [calendarDate, setCalendarDate] = useState(new Date(currentDate))
|
||||||
|
const [selectedDate, setSelectedDate] = useState(new Date(currentDate))
|
||||||
|
|
||||||
|
if (!isOpen) return null
|
||||||
|
|
||||||
|
const getDaysInMonth = (date: Date) => {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = date.getMonth()
|
||||||
|
return new Date(year, month + 1, 0).getDate()
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFirstDayOfMonth = (date: Date) => {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = date.getMonth()
|
||||||
|
return new Date(year, month, 1).getDay()
|
||||||
|
}
|
||||||
|
|
||||||
|
const generateCalendar = () => {
|
||||||
|
const daysInMonth = getDaysInMonth(calendarDate)
|
||||||
|
const firstDay = getFirstDayOfMonth(calendarDate)
|
||||||
|
const days: (number | null)[] = []
|
||||||
|
|
||||||
|
for (let i = 0; i < firstDay; i++) {
|
||||||
|
days.push(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 1; i <= daysInMonth; i++) {
|
||||||
|
days.push(i)
|
||||||
|
}
|
||||||
|
|
||||||
|
return days
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDateClick = (day: number) => {
|
||||||
|
const newDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth(), day)
|
||||||
|
setSelectedDate(newDate)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleConfirm = () => {
|
||||||
|
onSelect(selectedDate)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
const isToday = (day: number) => {
|
||||||
|
const today = new Date()
|
||||||
|
return day === today.getDate() &&
|
||||||
|
calendarDate.getMonth() === today.getMonth() &&
|
||||||
|
calendarDate.getFullYear() === today.getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
const isSelected = (day: number) => {
|
||||||
|
return day === selectedDate.getDate() &&
|
||||||
|
calendarDate.getMonth() === selectedDate.getMonth() &&
|
||||||
|
calendarDate.getFullYear() === selectedDate.getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
|
||||||
|
const days = generateCalendar()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="jump-date-overlay" onClick={onClose}>
|
||||||
|
<div className="jump-date-modal" onClick={e => e.stopPropagation()}>
|
||||||
|
<div className="jump-date-header">
|
||||||
|
<div className="title-area">
|
||||||
|
<CalendarIcon size={18} />
|
||||||
|
<h3>跳转到日期</h3>
|
||||||
|
</div>
|
||||||
|
<button className="close-btn" onClick={onClose}>
|
||||||
|
<X size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="calendar-view">
|
||||||
|
<div className="calendar-nav">
|
||||||
|
<button
|
||||||
|
className="nav-btn"
|
||||||
|
onClick={() => setCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1))}
|
||||||
|
>
|
||||||
|
<ChevronLeft size={18} />
|
||||||
|
</button>
|
||||||
|
<span className="current-month">
|
||||||
|
{calendarDate.getFullYear()}年{calendarDate.getMonth() + 1}月
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
className="nav-btn"
|
||||||
|
onClick={() => setCalendarDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1))}
|
||||||
|
>
|
||||||
|
<ChevronRight size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="calendar-grid">
|
||||||
|
<div className="weekdays">
|
||||||
|
{weekdays.map(d => <div key={d} className="weekday">{d}</div>)}
|
||||||
|
</div>
|
||||||
|
<div className="days">
|
||||||
|
{days.map((day, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`day-cell ${day === null ? 'empty' : ''} ${day !== null && isSelected(day) ? 'selected' : ''} ${day !== null && isToday(day) ? 'today' : ''}`}
|
||||||
|
onClick={() => day !== null && handleDateClick(day)}
|
||||||
|
>
|
||||||
|
{day}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="quick-options">
|
||||||
|
<button onClick={() => {
|
||||||
|
const d = new Date()
|
||||||
|
setSelectedDate(d)
|
||||||
|
setCalendarDate(new Date(d))
|
||||||
|
}}>今天</button>
|
||||||
|
<button onClick={() => {
|
||||||
|
const d = new Date()
|
||||||
|
d.setDate(d.getDate() - 7)
|
||||||
|
setSelectedDate(d)
|
||||||
|
setCalendarDate(new Date(d))
|
||||||
|
}}>一周前</button>
|
||||||
|
<button onClick={() => {
|
||||||
|
const d = new Date()
|
||||||
|
d.setMonth(d.getMonth() - 1)
|
||||||
|
setSelectedDate(d)
|
||||||
|
setCalendarDate(new Date(d))
|
||||||
|
}}>一月前</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="dialog-footer">
|
||||||
|
<button className="cancel-btn" onClick={onClose}>取消</button>
|
||||||
|
<button className="confirm-btn" onClick={handleConfirm}>跳转</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default JumpToDateDialog
|
||||||
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
169
src/components/LockScreen.tsx
Normal file
169
src/components/LockScreen.tsx
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
import { useState, useEffect, useRef } from 'react'
|
||||||
|
import * as configService from '../services/config'
|
||||||
|
import { ArrowRight, Fingerprint, Lock, ScanFace, 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()
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Quick start hello failed', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const verifyHello = async () => {
|
||||||
|
if (isVerifying || isUnlocked) return
|
||||||
|
|
||||||
|
setIsVerifying(true)
|
||||||
|
setError('')
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await window.electronAPI.auth.hello()
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
handleUnlock()
|
||||||
|
} else {
|
||||||
|
console.error('Hello verification failed:', result.error)
|
||||||
|
setError(result.error || '验证失败')
|
||||||
|
}
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error('Hello verification error:', e)
|
||||||
|
setError(`验证失败: ${e.message || String(e)}`)
|
||||||
|
} finally {
|
||||||
|
setIsVerifying(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlePasswordSubmit = async (e?: React.FormEvent) => {
|
||||||
|
e?.preventDefault()
|
||||||
|
if (!password || isUnlocked) return
|
||||||
|
|
||||||
|
// 如果正在进行 Hello 验证,它会自动失败或被取代,UI上不用特意取消
|
||||||
|
// 因为 native 调用是模态的或者独立的,我们只要让 JS 状态不对锁住即可
|
||||||
|
|
||||||
|
// 不再检查 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -6,8 +6,7 @@ interface RouteGuardProps {
|
|||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
// 不需要数据库连接的页面
|
const PUBLIC_ROUTES = ['/', '/home', '/settings']
|
||||||
const PUBLIC_ROUTES = ['/', '/home', '/settings', '/data-management']
|
|
||||||
|
|
||||||
function RouteGuard({ children }: RouteGuardProps) {
|
function RouteGuard({ children }: RouteGuardProps) {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
|
|||||||
@@ -1,24 +1,24 @@
|
|||||||
.sidebar {
|
.sidebar {
|
||||||
width: 200px;
|
width: 220px;
|
||||||
background: var(--bg-secondary);
|
background: var(--bg-secondary);
|
||||||
border-right: 1px solid var(--border-color);
|
border-right: 1px solid var(--border-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 16px 0;
|
padding: 16px 0;
|
||||||
transition: width 0.25s ease;
|
transition: width 0.25s ease;
|
||||||
|
|
||||||
&.collapsed {
|
&.collapsed {
|
||||||
width: 64px;
|
width: 64px;
|
||||||
|
|
||||||
.nav-menu,
|
.nav-menu,
|
||||||
.sidebar-footer {
|
.sidebar-footer {
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-label {
|
.nav-label {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@@ -32,14 +32,14 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding: 0 8px;
|
padding: 0 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 10px 16px;
|
padding: 10px 12px;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@@ -49,13 +49,12 @@
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--bg-tertiary);
|
background: var(--bg-tertiary);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
color: white;
|
color: white;
|
||||||
@@ -77,7 +76,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-footer {
|
.sidebar-footer {
|
||||||
padding: 0 8px;
|
padding: 0 12px;
|
||||||
border-top: 1px solid var(--border-color);
|
border-top: 1px solid var(--border-color);
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
@@ -99,9 +98,9 @@
|
|||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--bg-tertiary);
|
background: var(--bg-tertiary);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,11 +1,19 @@
|
|||||||
import { useState } from 'react'
|
import { useState, useEffect } 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 } from 'lucide-react'
|
import { Home, MessageSquare, BarChart3, Users, FileText, Database, Settings, ChevronLeft, ChevronRight, Download, Bot, Aperture, UserCircle, Lock } from 'lucide-react'
|
||||||
|
import { useAppStore } from '../stores/appStore'
|
||||||
|
import * as configService from '../services/config'
|
||||||
import './Sidebar.scss'
|
import './Sidebar.scss'
|
||||||
|
|
||||||
function Sidebar() {
|
function Sidebar() {
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
const [collapsed, setCollapsed] = useState(false)
|
const [collapsed, setCollapsed] = useState(false)
|
||||||
|
const [authEnabled, setAuthEnabled] = useState(false)
|
||||||
|
const setLocked = useAppStore(state => state.setLocked)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
configService.getAuthEnabled().then(setAuthEnabled)
|
||||||
|
}, [])
|
||||||
|
|
||||||
const isActive = (path: string) => {
|
const isActive = (path: string) => {
|
||||||
return location.pathname === path || location.pathname.startsWith(`${path}/`)
|
return location.pathname === path || location.pathname.startsWith(`${path}/`)
|
||||||
@@ -34,7 +42,25 @@ function Sidebar() {
|
|||||||
<span className="nav-label">聊天</span>
|
<span className="nav-label">聊天</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|
||||||
|
{/* 朋友圈 */}
|
||||||
|
<NavLink
|
||||||
|
to="/sns"
|
||||||
|
className={`nav-item ${isActive('/sns') ? 'active' : ''}`}
|
||||||
|
title={collapsed ? '朋友圈' : undefined}
|
||||||
|
>
|
||||||
|
<span className="nav-icon"><Aperture size={20} /></span>
|
||||||
|
<span className="nav-label">朋友圈</span>
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
{/* 通讯录 */}
|
||||||
|
<NavLink
|
||||||
|
to="/contacts"
|
||||||
|
className={`nav-item ${isActive('/contacts') ? 'active' : ''}`}
|
||||||
|
title={collapsed ? '通讯录' : undefined}
|
||||||
|
>
|
||||||
|
<span className="nav-icon"><UserCircle size={20} /></span>
|
||||||
|
<span className="nav-label">通讯录</span>
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
{/* 私聊分析 */}
|
{/* 私聊分析 */}
|
||||||
<NavLink
|
<NavLink
|
||||||
@@ -76,18 +102,21 @@ function Sidebar() {
|
|||||||
<span className="nav-label">导出</span>
|
<span className="nav-label">导出</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|
||||||
{/* 数据管理 */}
|
|
||||||
<NavLink
|
|
||||||
to="/data-management"
|
|
||||||
className={`nav-item ${isActive('/data-management') ? 'active' : ''}`}
|
|
||||||
title={collapsed ? '数据管理' : undefined}
|
|
||||||
>
|
|
||||||
<span className="nav-icon"><Database size={20} /></span>
|
|
||||||
<span className="nav-label">数据管理</span>
|
|
||||||
</NavLink>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div className="sidebar-footer">
|
<div className="sidebar-footer">
|
||||||
|
{authEnabled && (
|
||||||
|
<button
|
||||||
|
className="nav-item"
|
||||||
|
onClick={() => setLocked(true)}
|
||||||
|
title={collapsed ? '锁定' : undefined}
|
||||||
|
>
|
||||||
|
<span className="nav-icon"><Lock size={20} /></span>
|
||||||
|
<span className="nav-label">锁定</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
<NavLink
|
<NavLink
|
||||||
to="/settings"
|
to="/settings"
|
||||||
className={`nav-item ${isActive('/settings') ? 'active' : ''}`}
|
className={`nav-item ${isActive('/settings') ? 'active' : ''}`}
|
||||||
|
|||||||
@@ -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
|
||||||
@@ -23,7 +23,7 @@ export const VoiceTranscribeDialog: React.FC<VoiceTranscribeDialogProps> = ({
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const removeListener = window.electronAPI.whisper.onDownloadProgress((payload) => {
|
const removeListener = window.electronAPI.whisper.onDownloadProgress((payload: { modelName: string; downloadedBytes: number; totalBytes?: number; percent?: number }) => {
|
||||||
if (payload.percent !== undefined) {
|
if (payload.percent !== undefined) {
|
||||||
setDownloadProgress(payload.percent)
|
setDownloadProgress(payload.percent)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,40 +9,40 @@ function AgreementPage() {
|
|||||||
<div className="agreement-content">
|
<div className="agreement-content">
|
||||||
{/* 协议内容 - 请替换为完整的协议文本 */}
|
{/* 协议内容 - 请替换为完整的协议文本 */}
|
||||||
<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>
|
||||||
|
|
||||||
<h3>三、使用条款</h3>
|
<h3>三、使用条款</h3>
|
||||||
<p>1. 本软件仅供个人学习、研究使用,严禁用于任何商业用途或非法目的。</p>
|
<p>1. 本软件仅供个人学习、研究使用,严禁用于任何商业用途或非法目的。</p>
|
||||||
<p>2. 用户应确保所查看、分析的数据为本人所有或已获得合法授权。</p>
|
<p>2. 用户应确保所查看、分析的数据为本人所有或已获得合法授权。</p>
|
||||||
<p>3. 用户不得利用本软件侵犯他人隐私、窃取他人信息或从事其他违法活动。</p>
|
<p>3. 用户不得利用本软件侵犯他人隐私、窃取他人信息或从事其他违法活动。</p>
|
||||||
|
|
||||||
<h3>四、免责声明</h3>
|
<h3>四、免责声明</h3>
|
||||||
<p>1. 本软件按"现状"提供,开发者不对软件的适用性、可靠性、准确性作任何明示或暗示的保证。</p>
|
<p>1. 本软件按"现状"提供,开发者不对软件的适用性、可靠性、准确性作任何明示或暗示的保证。</p>
|
||||||
<p>2. 因使用或无法使用本软件而产生的任何直接、间接、偶然、特殊或后果性损害,开发者不承担任何责任。</p>
|
<p>2. 因使用或无法使用本软件而产生的任何直接、间接、偶然、特殊或后果性损害,开发者不承担任何责任。</p>
|
||||||
<p>3. 用户因违反本协议或相关法律法规而产生的一切后果由用户自行承担。</p>
|
<p>3. 用户因违反本协议或相关法律法规而产生的一切后果由用户自行承担。</p>
|
||||||
|
|
||||||
<h3>五、知识产权</h3>
|
<h3>五、知识产权</h3>
|
||||||
<p>本软件的所有权、知识产权及相关权益均归开发者所有。未经授权,不得复制、修改、传播本软件。</p>
|
<p>本软件的所有权、知识产权及相关权益均归开发者所有。未经授权,不得复制、修改、传播本软件。</p>
|
||||||
|
|
||||||
<h2>隐私政策</h2>
|
<h2>隐私政策</h2>
|
||||||
|
|
||||||
<h3>一、数据收集</h3>
|
<h3>一、数据收集</h3>
|
||||||
<p>本软件不收集、不上传、不存储任何用户个人信息或聊天数据。所有数据处理均在本地完成。</p>
|
<p>本软件不收集、不上传、不存储任何用户个人信息或聊天数据。所有数据处理均在本地完成。</p>
|
||||||
|
|
||||||
<h3>二、数据安全</h3>
|
<h3>二、数据安全</h3>
|
||||||
<p>您的聊天记录和个人数据完全存储在您的本地设备上,本软件不会将任何数据传输至外部服务器。</p>
|
<p>你的聊天记录和个人数据完全存储在你的本地设备上,本软件不会将任何数据传输至外部服务器。</p>
|
||||||
|
|
||||||
<h3>三、网络请求</h3>
|
<h3>三、网络请求</h3>
|
||||||
<p>本软件仅在检查更新时会访问更新服务器获取版本信息,不涉及任何用户数据的传输。</p>
|
<p>本软件仅在检查更新时会访问更新服务器获取版本信息,不涉及任何用户数据的传输。</p>
|
||||||
|
|
||||||
<h3>四、第三方服务</h3>
|
<h3>四、第三方服务</h3>
|
||||||
<p>本软件不集成任何第三方数据分析、广告或追踪服务。</p>
|
<p>本软件不集成任何第三方数据分析、广告或追踪服务。</p>
|
||||||
|
|
||||||
<p className="agreement-footer-text">最后更新日期:2025年1月</p>
|
<p className="agreement-footer-text">最后更新日期:2025年1月</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,11 +1,10 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect, useCallback } from 'react'
|
||||||
import { useLocation } from 'react-router-dom'
|
import { useLocation } from 'react-router-dom'
|
||||||
import { Users, Clock, MessageSquare, Send, Inbox, Calendar, Loader2, RefreshCw, User, Medal } from 'lucide-react'
|
import { Users, Clock, MessageSquare, Send, Inbox, Calendar, Loader2, RefreshCw, User, Medal } from 'lucide-react'
|
||||||
import ReactECharts from 'echarts-for-react'
|
import ReactECharts from 'echarts-for-react'
|
||||||
import { useAnalyticsStore } from '../stores/analyticsStore'
|
import { useAnalyticsStore } from '../stores/analyticsStore'
|
||||||
import { useThemeStore } from '../stores/themeStore'
|
import { useThemeStore } from '../stores/themeStore'
|
||||||
import './AnalyticsPage.scss'
|
import './AnalyticsPage.scss'
|
||||||
import './DataManagementPage.scss'
|
|
||||||
import { Avatar } from '../components/Avatar'
|
import { Avatar } from '../components/Avatar'
|
||||||
|
|
||||||
function AnalyticsPage() {
|
function AnalyticsPage() {
|
||||||
@@ -16,7 +15,7 @@ function AnalyticsPage() {
|
|||||||
|
|
||||||
const themeMode = useThemeStore((state) => state.themeMode)
|
const themeMode = useThemeStore((state) => state.themeMode)
|
||||||
const { statistics, rankings, timeDistribution, isLoaded, setStatistics, setRankings, setTimeDistribution, markLoaded } = useAnalyticsStore()
|
const { statistics, rankings, timeDistribution, isLoaded, setStatistics, setRankings, setTimeDistribution, markLoaded } = useAnalyticsStore()
|
||||||
const loadData = async (forceRefresh = false) => {
|
const loadData = useCallback(async (forceRefresh = false) => {
|
||||||
if (isLoaded && !forceRefresh) return
|
if (isLoaded && !forceRefresh) return
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
setError(null)
|
setError(null)
|
||||||
@@ -55,14 +54,22 @@ function AnalyticsPage() {
|
|||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
if (removeListener) removeListener()
|
if (removeListener) removeListener()
|
||||||
}
|
}
|
||||||
}
|
}, [isLoaded, markLoaded, setRankings, setStatistics, setTimeDistribution])
|
||||||
|
|
||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const force = location.state?.forceRefresh === true
|
const force = location.state?.forceRefresh === true
|
||||||
loadData(force)
|
loadData(force)
|
||||||
}, [location.state])
|
}, [location.state, loadData])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleChange = () => {
|
||||||
|
loadData(true)
|
||||||
|
}
|
||||||
|
window.addEventListener('wxid-changed', handleChange as EventListener)
|
||||||
|
return () => window.removeEventListener('wxid-changed', handleChange as EventListener)
|
||||||
|
}, [loadData])
|
||||||
|
|
||||||
const handleRefresh = () => loadData(true)
|
const handleRefresh = () => loadData(true)
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
.chat-page {
|
.chat-page {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
@@ -370,9 +370,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.message-bubble {
|
.message-bubble {
|
||||||
max-width: 65%;
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
max-width: 80%;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.bubble-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 0; // 允许收缩
|
||||||
|
width: fit-content; // 让气泡宽度由内容决定
|
||||||
|
}
|
||||||
|
|
||||||
&.sent {
|
&.sent {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
|
||||||
.bubble-content {
|
.bubble-content {
|
||||||
background: var(--primary-gradient);
|
background: var(--primary-gradient);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -382,6 +396,10 @@
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
box-shadow: 0 2px 10px var(--primary-light);
|
box-shadow: 0 2px 10px var(--primary-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bubble-body {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.received {
|
&.received {
|
||||||
@@ -395,6 +413,10 @@
|
|||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bubble-body {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.system {
|
&.system {
|
||||||
@@ -428,6 +450,11 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
// 防止名字撑开气泡宽度
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quoted-message {
|
.quoted-message {
|
||||||
@@ -462,8 +489,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.load-more-trigger {
|
.load-more-trigger {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 0;
|
||||||
color: var(--text-tertiary);
|
color: var(--text-tertiary);
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
|
|
||||||
|
&.later {
|
||||||
|
padding: 24px 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-chat {
|
.empty-chat {
|
||||||
@@ -790,6 +830,100 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 右侧消息区域
|
// 右侧消息区域
|
||||||
|
// ... (previous content) ...
|
||||||
|
|
||||||
|
// 链接卡片消息样式
|
||||||
|
.link-message {
|
||||||
|
width: 280px;
|
||||||
|
background: var(--card-bg);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-header {
|
||||||
|
padding: 10px 12px 6px;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.link-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.4;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-body {
|
||||||
|
padding: 6px 12px 10px;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.link-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.4;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-thumb {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 4px;
|
||||||
|
object-fit: cover;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-thumb-placeholder {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 适配发送出去的消息中的链接卡片
|
||||||
|
.message-bubble.sent .link-message {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
|
||||||
|
.link-title {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-desc {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.message-area {
|
.message-area {
|
||||||
flex: 1 1 70%;
|
flex: 1 1 70%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -943,8 +1077,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
background: rgba(10, 10, 10, 0.28);
|
background: var(--bg-tertiary);
|
||||||
backdrop-filter: blur(6px);
|
|
||||||
transition: opacity 200ms ease;
|
transition: opacity 200ms ease;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
@@ -1485,6 +1618,11 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--text-tertiary);
|
color: var(--text-tertiary);
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
// 防止名字撑开气泡宽度
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 引用消息样式
|
// 引用消息样式
|
||||||
@@ -1533,7 +1671,11 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
min-width: 0; // 允许收缩
|
||||||
-webkit-app-region: no-drag;
|
-webkit-app-region: no-drag;
|
||||||
|
|
||||||
|
// 让气泡宽度由内容决定,而不是被父容器撑开
|
||||||
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubble-content {
|
.bubble-content {
|
||||||
@@ -1948,4 +2090,385 @@
|
|||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 视频消息样式
|
||||||
|
.video-thumb-wrapper {
|
||||||
|
position: relative;
|
||||||
|
max-width: 300px;
|
||||||
|
min-width: 200px;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
transition: transform 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
|
||||||
|
.video-play-button {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, -50%) scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-thumb {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-thumb-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-play-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
opacity: 0.9;
|
||||||
|
transition: all 0.2s;
|
||||||
|
color: #fff;
|
||||||
|
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-placeholder,
|
||||||
|
.video-loading,
|
||||||
|
.video-unavailable {
|
||||||
|
min-width: 120px;
|
||||||
|
min-height: 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-loading {
|
||||||
|
.spin {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
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: ContactInfo) => c.type === 'friend').length,
|
||||||
|
groups: contactsResult.contacts.filter((c: ContactInfo) => c.type === 'group').length,
|
||||||
|
officials: contactsResult.contacts.filter((c: ContactInfo) => c.type === 'official').length,
|
||||||
|
other: contactsResult.contacts.filter((c: ContactInfo) => c.type === 'other').length
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取头像URL
|
||||||
|
const usernames = contactsResult.contacts.map((c: ContactInfo) => c.username)
|
||||||
|
if (usernames.length > 0) {
|
||||||
|
const avatarResult = await window.electronAPI.chat.enrichSessionsContactInfo(usernames)
|
||||||
|
if (avatarResult.success && avatarResult.contacts) {
|
||||||
|
contactsResult.contacts.forEach((contact: ContactInfo) => {
|
||||||
|
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
|
||||||
@@ -1,569 +0,0 @@
|
|||||||
.page-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-tabs {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.tab-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border: none;
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 9999px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--border-color);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: var(--primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-scroll {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-section {
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 20px 24px;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin: 0 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-desc {
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
.section-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 9999px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--primary);
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background: var(--primary-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background: var(--border-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-warning {
|
|
||||||
background: #f59e0b;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background: #d97706;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.database-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.database-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
background: var(--bg-primary);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-icon {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
&.decrypted {
|
|
||||||
background: var(--primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.needs-update {
|
|
||||||
background: #f59e0b;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pending {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.db-info {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
.db-name {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin-bottom: 2px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.db-meta {
|
|
||||||
display: flex;
|
|
||||||
gap: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.db-status {
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 9999px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
&.decrypted {
|
|
||||||
background: rgba(34, 197, 94, 0.15);
|
|
||||||
color: #16a34a;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.needs-update {
|
|
||||||
background: rgba(245, 158, 11, 0.15);
|
|
||||||
color: #b45309;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pending {
|
|
||||||
background: rgba(234, 179, 8, 0.15);
|
|
||||||
color: #b45309;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 48px 20px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
&.hint {
|
|
||||||
margin-top: 6px;
|
|
||||||
font-size: 13px;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.unavailable-state {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 64px 20px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 15px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
|
|
||||||
&.hint {
|
|
||||||
margin-top: 8px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-toast {
|
|
||||||
position: fixed;
|
|
||||||
top: 60px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
padding: 10px 24px;
|
|
||||||
border-radius: 9999px;
|
|
||||||
font-size: 14px;
|
|
||||||
z-index: 100;
|
|
||||||
animation: slideDown 0.3s ease;
|
|
||||||
|
|
||||||
&.success {
|
|
||||||
background: var(--primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
background: var(--danger);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideDown {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-50%) translateY(-10px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(-50%) translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.decrypt-progress-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1000;
|
|
||||||
|
|
||||||
.progress-card {
|
|
||||||
background: var(--bg-primary);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 32px 40px;
|
|
||||||
min-width: 400px;
|
|
||||||
text-align: center;
|
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 8px;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-file {
|
|
||||||
margin: 0 0 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
height: 8px;
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
border-radius: 9999px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
background: var(--primary);
|
|
||||||
border-radius: 9999px;
|
|
||||||
transition: width 0.2s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-text {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 图片列表样式
|
|
||||||
.current-dir {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 10px 14px;
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
.dir-label {
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dir-path {
|
|
||||||
color: var(--text-primary);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-list {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
||||||
gap: 8px;
|
|
||||||
max-height: 500px;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding-right: 4px;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--border-color);
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 10px 14px;
|
|
||||||
background: var(--bg-primary);
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
|
|
||||||
.decrypt-hint {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-icon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
&.decrypted {
|
|
||||||
background: var(--primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pending {
|
|
||||||
background: var(--bg-tertiary);
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-info {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.img-name {
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.version-tag {
|
|
||||||
font-size: 10px;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
&.v3 {
|
|
||||||
background: rgba(59, 130, 246, 0.15);
|
|
||||||
color: #3b82f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.v4 {
|
|
||||||
background: rgba(168, 85, 247, 0.15);
|
|
||||||
color: #a855f7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-size {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.decrypt-hint {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-hint {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
text-align: center;
|
|
||||||
padding: 16px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 账号选择器
|
|
||||||
.account-selector {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.account-btn {
|
|
||||||
padding: 6px 14px;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
background: var(--bg-primary);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 13px;
|
|
||||||
border-radius: 9999px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--primary);
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: var(--primary);
|
|
||||||
border-color: var(--primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react'
|
|
||||||
import * as configService from '../services/config'
|
|
||||||
import './DataManagementPage.scss'
|
|
||||||
|
|
||||||
function DataManagementPage() {
|
|
||||||
const [dbPath, setDbPath] = useState<string | null>(null)
|
|
||||||
const [wxid, setWxid] = useState<string | null>(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const loadConfig = async () => {
|
|
||||||
const [path, id] = await Promise.all([
|
|
||||||
configService.getDbPath(),
|
|
||||||
configService.getMyWxid()
|
|
||||||
])
|
|
||||||
setDbPath(path)
|
|
||||||
setWxid(id)
|
|
||||||
}
|
|
||||||
loadConfig()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="page-header">
|
|
||||||
<h1>数据管理</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="page-scroll">
|
|
||||||
<section className="page-section">
|
|
||||||
<div className="section-header">
|
|
||||||
<div>
|
|
||||||
<h2>WCDB 直连模式</h2>
|
|
||||||
<p className="section-desc">
|
|
||||||
当前版本通过 WCDB DLL 直接读取加密数据库,不再需要解密流程。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="database-list">
|
|
||||||
<div className="database-item decrypted">
|
|
||||||
<div className="db-info">
|
|
||||||
<div className="db-name">
|
|
||||||
数据库目录
|
|
||||||
</div>
|
|
||||||
<div className="db-path">{dbPath || '未配置'}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="database-item decrypted">
|
|
||||||
<div className="db-info">
|
|
||||||
<div className="db-name">
|
|
||||||
微信ID
|
|
||||||
</div>
|
|
||||||
<div className="db-path">{wxid || '未配置'}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DataManagementPage
|
|
||||||
@@ -338,64 +338,129 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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);
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
.time-picker-info {
|
||||||
color: var(--text-tertiary);
|
display: flex;
|
||||||
flex-shrink: 0;
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
svg {
|
||||||
flex: 1;
|
color: var(--text-tertiary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select-field {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-trigger {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 9999px;
|
||||||
|
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-label {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-option.active .option-desc {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
.media-options {
|
.media-options {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -602,6 +667,87 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.export-layout-modal {
|
||||||
|
background: var(--card-bg);
|
||||||
|
padding: 28px 32px;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
|
||||||
|
text-align: center;
|
||||||
|
width: min(520px, 90vw);
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin: 0 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-options {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-option-btn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 14px 18px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
background: rgba(var(--primary-rgb), 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
border-color: var(--primary);
|
||||||
|
background: rgba(var(--primary-rgb), 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-actions {
|
||||||
|
margin-top: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-cancel-btn {
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.export-result-modal {
|
.export-result-modal {
|
||||||
background: var(--card-bg);
|
background: var(--card-bg);
|
||||||
padding: 32px 40px;
|
padding: 32px 40px;
|
||||||
@@ -1010,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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react'
|
import { useState, useEffect, useCallback, useRef } from 'react'
|
||||||
import { Search, Download, FolderOpen, RefreshCw, Check, Calendar, FileJson, FileText, Table, Loader2, X, ChevronDown, ChevronLeft, ChevronRight, FileSpreadsheet, Database, FileCode, CheckCircle, XCircle, ExternalLink } from 'lucide-react'
|
import { Search, Download, FolderOpen, RefreshCw, Check, Calendar, FileJson, FileText, Table, Loader2, X, ChevronDown, ChevronLeft, ChevronRight, FileSpreadsheet, Database, FileCode, CheckCircle, XCircle, ExternalLink } from 'lucide-react'
|
||||||
import * as configService from '../services/config'
|
import * as configService from '../services/config'
|
||||||
import './ExportPage.scss'
|
import './ExportPage.scss'
|
||||||
@@ -19,8 +19,13 @@ interface ExportOptions {
|
|||||||
exportMedia: boolean
|
exportMedia: boolean
|
||||||
exportImages: boolean
|
exportImages: boolean
|
||||||
exportVoices: boolean
|
exportVoices: boolean
|
||||||
|
exportVideos: boolean
|
||||||
exportEmojis: boolean
|
exportEmojis: boolean
|
||||||
exportVoiceAsText: boolean
|
exportVoiceAsText: boolean
|
||||||
|
excelCompactColumns: boolean
|
||||||
|
txtColumns: string[]
|
||||||
|
displayNamePreference: 'group-nickname' | 'remark' | 'nickname'
|
||||||
|
exportConcurrency: number
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ExportResult {
|
interface ExportResult {
|
||||||
@@ -30,7 +35,10 @@ interface ExportResult {
|
|||||||
error?: string
|
error?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type SessionLayout = 'shared' | 'per-session'
|
||||||
|
|
||||||
function ExportPage() {
|
function ExportPage() {
|
||||||
|
const defaultTxtColumns = ['index', 'time', 'senderRole', 'messageType', 'content']
|
||||||
const [sessions, setSessions] = useState<ChatSession[]>([])
|
const [sessions, setSessions] = useState<ChatSession[]>([])
|
||||||
const [filteredSessions, setFilteredSessions] = useState<ChatSession[]>([])
|
const [filteredSessions, setFilteredSessions] = useState<ChatSession[]>([])
|
||||||
const [selectedSessions, setSelectedSessions] = useState<Set<string>>(new Set())
|
const [selectedSessions, setSelectedSessions] = useState<Set<string>>(new Set())
|
||||||
@@ -43,22 +51,49 @@ function ExportPage() {
|
|||||||
const [showDatePicker, setShowDatePicker] = useState(false)
|
const [showDatePicker, setShowDatePicker] = useState(false)
|
||||||
const [calendarDate, setCalendarDate] = useState(new Date())
|
const [calendarDate, setCalendarDate] = useState(new Date())
|
||||||
const [selectingStart, setSelectingStart] = useState(true)
|
const [selectingStart, setSelectingStart] = useState(true)
|
||||||
|
const [showMediaLayoutPrompt, setShowMediaLayoutPrompt] = useState(false)
|
||||||
|
const [showDisplayNameSelect, setShowDisplayNameSelect] = useState(false)
|
||||||
|
const displayNameDropdownRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
const [options, setOptions] = useState<ExportOptions>({
|
const [options, setOptions] = useState<ExportOptions>({
|
||||||
format: 'chatlab',
|
format: 'excel',
|
||||||
dateRange: {
|
dateRange: {
|
||||||
start: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
|
start: new Date(new Date().setHours(0, 0, 0, 0)),
|
||||||
end: new Date()
|
end: new Date()
|
||||||
},
|
},
|
||||||
useAllTime: true,
|
useAllTime: false,
|
||||||
exportAvatars: true,
|
exportAvatars: true,
|
||||||
exportMedia: false,
|
exportMedia: false,
|
||||||
exportImages: true,
|
exportImages: true,
|
||||||
exportVoices: true,
|
exportVoices: true,
|
||||||
|
exportVideos: true,
|
||||||
exportEmojis: true,
|
exportEmojis: true,
|
||||||
exportVoiceAsText: false
|
exportVoiceAsText: true,
|
||||||
|
excelCompactColumns: true,
|
||||||
|
txtColumns: defaultTxtColumns,
|
||||||
|
displayNamePreference: 'remark',
|
||||||
|
exportConcurrency: 2
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const buildDateRangeFromPreset = (preset: string) => {
|
||||||
|
const now = new Date()
|
||||||
|
if (preset === 'all') {
|
||||||
|
return { useAllTime: true, dateRange: { start: now, end: now } }
|
||||||
|
}
|
||||||
|
let rangeMs = 0
|
||||||
|
if (preset === '7d') rangeMs = 7 * 24 * 60 * 60 * 1000
|
||||||
|
if (preset === '30d') rangeMs = 30 * 24 * 60 * 60 * 1000
|
||||||
|
if (preset === '90d') rangeMs = 90 * 24 * 60 * 60 * 1000
|
||||||
|
if (preset === 'today' || rangeMs === 0) {
|
||||||
|
const start = new Date(now)
|
||||||
|
start.setHours(0, 0, 0, 0)
|
||||||
|
return { useAllTime: false, dateRange: { start, end: now } }
|
||||||
|
}
|
||||||
|
const start = new Date(now.getTime() - rangeMs)
|
||||||
|
start.setHours(0, 0, 0, 0)
|
||||||
|
return { useAllTime: false, dateRange: { start, end: now } }
|
||||||
|
}
|
||||||
|
|
||||||
const loadSessions = useCallback(async () => {
|
const loadSessions = useCallback(async () => {
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
try {
|
try {
|
||||||
@@ -94,10 +129,87 @@ function ExportPage() {
|
|||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
const loadExportDefaults = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const [
|
||||||
|
savedFormat,
|
||||||
|
savedRange,
|
||||||
|
savedMedia,
|
||||||
|
savedVoiceAsText,
|
||||||
|
savedExcelCompactColumns,
|
||||||
|
savedTxtColumns,
|
||||||
|
savedConcurrency
|
||||||
|
] = await Promise.all([
|
||||||
|
configService.getExportDefaultFormat(),
|
||||||
|
configService.getExportDefaultDateRange(),
|
||||||
|
configService.getExportDefaultMedia(),
|
||||||
|
configService.getExportDefaultVoiceAsText(),
|
||||||
|
configService.getExportDefaultExcelCompactColumns(),
|
||||||
|
configService.getExportDefaultTxtColumns(),
|
||||||
|
configService.getExportDefaultConcurrency()
|
||||||
|
])
|
||||||
|
|
||||||
|
const preset = savedRange || 'today'
|
||||||
|
const rangeDefaults = buildDateRangeFromPreset(preset)
|
||||||
|
const txtColumns = savedTxtColumns && savedTxtColumns.length > 0 ? savedTxtColumns : defaultTxtColumns
|
||||||
|
|
||||||
|
setOptions((prev) => ({
|
||||||
|
...prev,
|
||||||
|
format: (savedFormat as ExportOptions['format']) || 'excel',
|
||||||
|
useAllTime: rangeDefaults.useAllTime,
|
||||||
|
dateRange: rangeDefaults.dateRange,
|
||||||
|
exportMedia: savedMedia ?? false,
|
||||||
|
exportVoiceAsText: savedVoiceAsText ?? true,
|
||||||
|
excelCompactColumns: savedExcelCompactColumns ?? true,
|
||||||
|
txtColumns,
|
||||||
|
exportConcurrency: savedConcurrency ?? 2
|
||||||
|
}))
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载导出默认设置失败:', e)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadSessions()
|
loadSessions()
|
||||||
loadExportPath()
|
loadExportPath()
|
||||||
}, [loadSessions, loadExportPath])
|
loadExportDefaults()
|
||||||
|
}, [loadSessions, loadExportPath, loadExportDefaults])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleChange = () => {
|
||||||
|
setSelectedSessions(new Set())
|
||||||
|
setSearchKeyword('')
|
||||||
|
setExportResult(null)
|
||||||
|
setSessions([])
|
||||||
|
setFilteredSessions([])
|
||||||
|
loadSessions()
|
||||||
|
}
|
||||||
|
window.addEventListener('wxid-changed', handleChange as EventListener)
|
||||||
|
return () => window.removeEventListener('wxid-changed', handleChange as EventListener)
|
||||||
|
}, [loadSessions])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const removeListener = window.electronAPI.export.onProgress?.((payload: { current: number; total: number; currentSession: string; phase: string }) => {
|
||||||
|
setExportProgress({
|
||||||
|
current: payload.current,
|
||||||
|
total: payload.total,
|
||||||
|
currentName: payload.currentSession
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return () => {
|
||||||
|
removeListener?.()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
const target = event.target as Node
|
||||||
|
if (showDisplayNameSelect && displayNameDropdownRef.current && !displayNameDropdownRef.current.contains(target)) {
|
||||||
|
setShowDisplayNameSelect(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('mousedown', handleClickOutside)
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside)
|
||||||
|
}, [showDisplayNameSelect])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!searchKeyword.trim()) {
|
if (!searchKeyword.trim()) {
|
||||||
@@ -138,13 +250,31 @@ function ExportPage() {
|
|||||||
return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
|
return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleFormatChange = (format: ExportOptions['format']) => {
|
||||||
|
setOptions((prev) => {
|
||||||
|
const next = { ...prev, format }
|
||||||
|
if (format === 'html') {
|
||||||
|
return {
|
||||||
|
...next,
|
||||||
|
exportMedia: true,
|
||||||
|
exportImages: true,
|
||||||
|
exportVoices: true,
|
||||||
|
exportVideos: true,
|
||||||
|
exportEmojis: true,
|
||||||
|
exportVoiceAsText: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return next
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const openExportFolder = async () => {
|
const openExportFolder = async () => {
|
||||||
if (exportFolder) {
|
if (exportFolder) {
|
||||||
await window.electronAPI.shell.openPath(exportFolder)
|
await window.electronAPI.shell.openPath(exportFolder)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const startExport = async () => {
|
const runExport = async (sessionLayout: SessionLayout) => {
|
||||||
if (selectedSessions.size === 0 || !exportFolder) return
|
if (selectedSessions.size === 0 || !exportFolder) return
|
||||||
|
|
||||||
setIsExporting(true)
|
setIsExporting(true)
|
||||||
@@ -159,16 +289,22 @@ function ExportPage() {
|
|||||||
exportMedia: options.exportMedia,
|
exportMedia: options.exportMedia,
|
||||||
exportImages: options.exportMedia && options.exportImages,
|
exportImages: options.exportMedia && options.exportImages,
|
||||||
exportVoices: options.exportMedia && options.exportVoices,
|
exportVoices: options.exportMedia && options.exportVoices,
|
||||||
|
exportVideos: options.exportMedia && options.exportVideos,
|
||||||
exportEmojis: options.exportMedia && options.exportEmojis,
|
exportEmojis: options.exportMedia && options.exportEmojis,
|
||||||
exportVoiceAsText: options.exportVoiceAsText, // 独立于 exportMedia
|
exportVoiceAsText: options.exportVoiceAsText, // 即使不导出媒体,也可以导出语音转文字内容
|
||||||
|
excelCompactColumns: options.excelCompactColumns,
|
||||||
|
txtColumns: options.txtColumns,
|
||||||
|
displayNamePreference: options.displayNamePreference,
|
||||||
|
exportConcurrency: options.exportConcurrency,
|
||||||
|
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),
|
||||||
// 将结束日期设置为当天的 23:59:59,以包含当天的所有消息
|
// 将结束日期设置为当天的 23:59:59,确保包含当天的所有记录
|
||||||
end: Math.floor(new Date(options.dateRange.end.getFullYear(), options.dateRange.end.getMonth(), options.dateRange.end.getDate(), 23, 59, 59).getTime() / 1000)
|
end: Math.floor(new Date(options.dateRange.end.getFullYear(), options.dateRange.end.getMonth(), options.dateRange.end.getDate(), 23, 59, 59).getTime() / 1000)
|
||||||
} : null
|
} : null
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.format === 'chatlab' || options.format === 'chatlab-jsonl' || options.format === 'json' || options.format === 'excel') {
|
if (options.format === 'chatlab' || options.format === 'chatlab-jsonl' || options.format === 'json' || options.format === 'excel' || options.format === 'txt' || options.format === 'html') {
|
||||||
const result = await window.electronAPI.export.exportSessions(
|
const result = await window.electronAPI.export.exportSessions(
|
||||||
sessionList,
|
sessionList,
|
||||||
exportFolder,
|
exportFolder,
|
||||||
@@ -176,16 +312,28 @@ function ExportPage() {
|
|||||||
)
|
)
|
||||||
setExportResult(result)
|
setExportResult(result)
|
||||||
} else {
|
} else {
|
||||||
setExportResult({ success: false, error: `${options.format.toUpperCase()} 格式导出功能开发中...` })
|
setExportResult({ success: false, error: `${options.format.toUpperCase()} 格式目前暂未实现,请选择其他格式。` })
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('导出失败:', e)
|
console.error('导出过程中发生异常:', e)
|
||||||
setExportResult({ success: false, error: String(e) })
|
setExportResult({ success: false, error: String(e) })
|
||||||
} finally {
|
} finally {
|
||||||
setIsExporting(false)
|
setIsExporting(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const startExport = () => {
|
||||||
|
if (selectedSessions.size === 0 || !exportFolder) return
|
||||||
|
|
||||||
|
if (options.exportMedia && selectedSessions.size > 1) {
|
||||||
|
setShowMediaLayoutPrompt(true)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const layout: SessionLayout = options.exportMedia ? 'per-session' : 'shared'
|
||||||
|
runExport(layout)
|
||||||
|
}
|
||||||
|
|
||||||
const getDaysInMonth = (date: Date) => {
|
const getDaysInMonth = (date: Date) => {
|
||||||
const year = date.getFullYear()
|
const year = date.getFullYear()
|
||||||
const month = date.getMonth()
|
const month = date.getMonth()
|
||||||
@@ -279,6 +427,25 @@ function ExportPage() {
|
|||||||
{ value: 'excel', label: 'Excel', icon: FileSpreadsheet, desc: '电子表格,适合统计分析' },
|
{ value: 'excel', label: 'Excel', icon: FileSpreadsheet, desc: '电子表格,适合统计分析' },
|
||||||
{ value: 'sql', label: 'PostgreSQL', icon: Database, desc: '数据库脚本,便于导入到数据库' }
|
{ value: 'sql', label: 'PostgreSQL', icon: Database, desc: '数据库脚本,便于导入到数据库' }
|
||||||
]
|
]
|
||||||
|
const displayNameOptions = [
|
||||||
|
{
|
||||||
|
value: 'group-nickname',
|
||||||
|
label: '群昵称优先',
|
||||||
|
desc: '仅群聊有效,私聊显示备注/昵称'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'remark',
|
||||||
|
label: '备注优先',
|
||||||
|
desc: '有备注显示备注,否则显示昵称'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'nickname',
|
||||||
|
label: '微信昵称',
|
||||||
|
desc: '始终显示微信昵称'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const displayNameOption = displayNameOptions.find(option => option.value === options.displayNamePreference)
|
||||||
|
const displayNameLabel = displayNameOption?.label || '备注优先'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="export-page">
|
<div className="export-page">
|
||||||
@@ -362,7 +529,7 @@ function ExportPage() {
|
|||||||
<div
|
<div
|
||||||
key={fmt.value}
|
key={fmt.value}
|
||||||
className={`format-card ${options.format === fmt.value ? 'active' : ''}`}
|
className={`format-card ${options.format === fmt.value ? 'active' : ''}`}
|
||||||
onClick={() => setOptions({ ...options, format: fmt.value as any })}
|
onClick={() => handleFormatChange(fmt.value as ExportOptions['format'])}
|
||||||
>
|
>
|
||||||
<fmt.icon size={24} />
|
<fmt.icon size={24} />
|
||||||
<span className="format-label">{fmt.label}</span>
|
<span className="format-label">{fmt.label}</span>
|
||||||
@@ -374,28 +541,79 @@ 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">
|
||||||
<input
|
<div className="media-switch-row">
|
||||||
type="checkbox"
|
<div className="media-switch-info">
|
||||||
checked={options.useAllTime}
|
<span className="media-switch-title">导出全部时间</span>
|
||||||
onChange={e => setOptions({ ...options, useAllTime: e.target.checked })}
|
<span className="media-switch-desc">关闭此项以选择特定的起止日期</span>
|
||||||
/>
|
|
||||||
<span>导出全部时间</span>
|
|
||||||
</label>
|
|
||||||
{!options.useAllTime && options.dateRange && (
|
|
||||||
<div className="date-range" onClick={() => setShowDatePicker(true)}>
|
|
||||||
<Calendar size={16} />
|
|
||||||
<span>{formatDate(options.dateRange.start)} - {formatDate(options.dateRange.end)}</span>
|
|
||||||
<ChevronDown size={14} />
|
|
||||||
</div>
|
</div>
|
||||||
|
<label className="switch">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={options.useAllTime}
|
||||||
|
onChange={e => setOptions({ ...options, useAllTime: e.target.checked })}
|
||||||
|
/>
|
||||||
|
<span className="switch-slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!options.useAllTime && options.dateRange && (
|
||||||
|
<>
|
||||||
|
<div className="media-option-divider"></div>
|
||||||
|
<div className="time-range-picker-item" onClick={() => setShowDatePicker(true)}>
|
||||||
|
<div className="time-picker-info">
|
||||||
|
<Calendar size={16} />
|
||||||
|
<span>{formatDate(options.dateRange.start)} - {formatDate(options.dateRange.end)}</span>
|
||||||
|
</div>
|
||||||
|
<ChevronDown size={14} />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 发送者名称显示偏好 */}
|
||||||
|
{(options.format === 'html' || options.format === 'json' || options.format === 'txt') && (
|
||||||
|
<div className="setting-section">
|
||||||
|
<h3>发送者名称显示</h3>
|
||||||
|
<p className="setting-subtitle">选择导出时优先显示的名称</p>
|
||||||
|
<div className="select-field" ref={displayNameDropdownRef}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`select-trigger ${showDisplayNameSelect ? 'open' : ''}`}
|
||||||
|
onClick={() => setShowDisplayNameSelect(!showDisplayNameSelect)}
|
||||||
|
>
|
||||||
|
<span className="select-value">{displayNameLabel}</span>
|
||||||
|
<ChevronDown size={16} />
|
||||||
|
</button>
|
||||||
|
{showDisplayNameSelect && (
|
||||||
|
<div className="select-dropdown">
|
||||||
|
{displayNameOptions.map(option => (
|
||||||
|
<button
|
||||||
|
key={option.value}
|
||||||
|
type="button"
|
||||||
|
className={`select-option ${options.displayNamePreference === option.value ? 'active' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setOptions({
|
||||||
|
...options,
|
||||||
|
displayNamePreference: option.value as ExportOptions['displayNamePreference']
|
||||||
|
})
|
||||||
|
setShowDisplayNameSelect(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="option-label">{option.label}</span>
|
||||||
|
<span className="option-desc">{option.desc}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="setting-section">
|
<div className="setting-section">
|
||||||
<h3>媒体文件</h3>
|
<h3>媒体文件</h3>
|
||||||
<p className="setting-subtitle">导出图片/语音/表情并在记录内写入相对路径</p>
|
<p className="setting-subtitle">导出图片/语音/视频/表情并在记录内写入相对路径</p>
|
||||||
<div className="media-options-card">
|
<div className="media-options-card">
|
||||||
<div className="media-switch-row">
|
<div className="media-switch-row">
|
||||||
<div className="media-switch-info">
|
<div className="media-switch-info">
|
||||||
@@ -408,7 +626,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>
|
||||||
|
|
||||||
@@ -447,7 +665,7 @@ function ExportPage() {
|
|||||||
<label className="media-checkbox-row">
|
<label className="media-checkbox-row">
|
||||||
<div className="media-checkbox-info">
|
<div className="media-checkbox-info">
|
||||||
<span className="media-checkbox-title">语音转文字</span>
|
<span className="media-checkbox-title">语音转文字</span>
|
||||||
<span className="media-checkbox-desc">将语音消息转换为文字导出(不导出语音文件)</span>
|
<span className="media-checkbox-desc">将语音消息转换为文字导出</span>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@@ -458,6 +676,21 @@ function ExportPage() {
|
|||||||
|
|
||||||
<div className="media-option-divider"></div>
|
<div className="media-option-divider"></div>
|
||||||
|
|
||||||
|
<label className={`media-checkbox-row ${!options.exportMedia ? 'disabled' : ''}`}>
|
||||||
|
<div className="media-checkbox-info">
|
||||||
|
<span className="media-checkbox-title">视频</span>
|
||||||
|
<span className="media-checkbox-desc">直接复制视频文件到导出目录</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={options.exportVideos}
|
||||||
|
disabled={!options.exportMedia}
|
||||||
|
onChange={e => setOptions({ ...options, exportVideos: e.target.checked })}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="media-option-divider"></div>
|
||||||
|
|
||||||
<label className={`media-checkbox-row ${!options.exportMedia ? 'disabled' : ''}`}>
|
<label className={`media-checkbox-row ${!options.exportMedia ? 'disabled' : ''}`}>
|
||||||
<div className="media-checkbox-info">
|
<div className="media-checkbox-info">
|
||||||
<span className="media-checkbox-title">表情</span>
|
<span className="media-checkbox-title">表情</span>
|
||||||
@@ -488,7 +721,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>
|
||||||
@@ -544,6 +777,43 @@ function ExportPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* 媒体导出布局选择弹窗 */}
|
||||||
|
{showMediaLayoutPrompt && (
|
||||||
|
<div className="export-overlay" onClick={() => setShowMediaLayoutPrompt(false)}>
|
||||||
|
<div className="export-layout-modal" onClick={e => e.stopPropagation()}>
|
||||||
|
<h3>导出文件夹布局</h3>
|
||||||
|
<p className="layout-subtitle">检测到同时导出多个会话并包含媒体文件,请选择存放方式:</p>
|
||||||
|
<div className="layout-options">
|
||||||
|
<button
|
||||||
|
className="layout-option-btn primary"
|
||||||
|
onClick={() => {
|
||||||
|
setShowMediaLayoutPrompt(false)
|
||||||
|
runExport('shared')
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="layout-title">所有会话在同一文件夹</span>
|
||||||
|
<span className="layout-desc">媒体会按会话名归档到 media 子目录</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="layout-option-btn"
|
||||||
|
onClick={() => {
|
||||||
|
setShowMediaLayoutPrompt(false)
|
||||||
|
runExport('per-session')
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="layout-title">每个会话一个文件夹</span>
|
||||||
|
<span className="layout-desc">每个会话单独包含导出文件和媒体</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="layout-actions">
|
||||||
|
<button className="layout-cancel-btn" onClick={() => setShowMediaLayoutPrompt(false)}>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 导出进度弹窗 */}
|
{/* 导出进度弹窗 */}
|
||||||
{isExporting && (
|
{isExporting && (
|
||||||
<div className="export-overlay">
|
<div className="export-overlay">
|
||||||
|
|||||||
@@ -333,7 +333,7 @@
|
|||||||
.group-avatar {
|
.group-avatar {
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
border-radius: 50%;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
@@ -346,11 +346,11 @@
|
|||||||
.avatar-placeholder {
|
.avatar-placeholder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
background: var(--bg-tertiary);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #fff;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -390,7 +390,7 @@
|
|||||||
.skeleton-avatar {
|
.skeleton-avatar {
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
border-radius: 50%;
|
border-radius: 8px;
|
||||||
background: var(--bg-tertiary);
|
background: var(--bg-tertiary);
|
||||||
animation: pulse 1.5s infinite;
|
animation: pulse 1.5s infinite;
|
||||||
}
|
}
|
||||||
@@ -500,7 +500,7 @@
|
|||||||
.group-avatar.large {
|
.group-avatar.large {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 auto 16px;
|
margin: 0 auto 16px;
|
||||||
|
|
||||||
@@ -513,11 +513,11 @@
|
|||||||
.avatar-placeholder {
|
.avatar-placeholder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
background: var(--bg-tertiary);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #fff;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -656,6 +656,32 @@
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.export-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border: none;
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
font-size: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-body {
|
.content-body {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useState, useEffect, useRef } from 'react'
|
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||||
import { Users, BarChart3, Clock, Image, Loader2, RefreshCw, User, Medal, Search, X, ChevronLeft, Copy, Check } from 'lucide-react'
|
import { Users, BarChart3, Clock, Image, Loader2, RefreshCw, User, Medal, Search, X, ChevronLeft, Copy, Check, Download } from 'lucide-react'
|
||||||
import { Avatar } from '../components/Avatar'
|
import { Avatar } from '../components/Avatar'
|
||||||
import ReactECharts from 'echarts-for-react'
|
import ReactECharts from 'echarts-for-react'
|
||||||
import DateRangePicker from '../components/DateRangePicker'
|
import DateRangePicker from '../components/DateRangePicker'
|
||||||
@@ -39,6 +39,7 @@ function GroupAnalyticsPage() {
|
|||||||
const [activeHours, setActiveHours] = useState<Record<number, number>>({})
|
const [activeHours, setActiveHours] = useState<Record<number, number>>({})
|
||||||
const [mediaStats, setMediaStats] = useState<{ typeCounts: Array<{ type: number; name: string; count: number }>; total: number } | null>(null)
|
const [mediaStats, setMediaStats] = useState<{ typeCounts: Array<{ type: number; name: string; count: number }>; total: number } | null>(null)
|
||||||
const [functionLoading, setFunctionLoading] = useState(false)
|
const [functionLoading, setFunctionLoading] = useState(false)
|
||||||
|
const [isExportingMembers, setIsExportingMembers] = useState(false)
|
||||||
|
|
||||||
// 成员详情弹框
|
// 成员详情弹框
|
||||||
const [selectedMember, setSelectedMember] = useState<GroupMember | null>(null)
|
const [selectedMember, setSelectedMember] = useState<GroupMember | null>(null)
|
||||||
@@ -93,7 +94,7 @@ function GroupAnalyticsPage() {
|
|||||||
}
|
}
|
||||||
}, [dateRangeReady])
|
}, [dateRangeReady])
|
||||||
|
|
||||||
const loadGroups = async () => {
|
const loadGroups = useCallback(async () => {
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
try {
|
try {
|
||||||
const result = await window.electronAPI.groupAnalytics.getGroupChats()
|
const result = await window.electronAPI.groupAnalytics.getGroupChats()
|
||||||
@@ -106,7 +107,23 @@ function GroupAnalyticsPage() {
|
|||||||
} finally {
|
} finally {
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
}
|
}
|
||||||
}
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleChange = () => {
|
||||||
|
setGroups([])
|
||||||
|
setFilteredGroups([])
|
||||||
|
setSelectedGroup(null)
|
||||||
|
setSelectedFunction(null)
|
||||||
|
setMembers([])
|
||||||
|
setRankings([])
|
||||||
|
setActiveHours({})
|
||||||
|
setMediaStats(null)
|
||||||
|
void loadGroups()
|
||||||
|
}
|
||||||
|
window.addEventListener('wxid-changed', handleChange as EventListener)
|
||||||
|
return () => window.removeEventListener('wxid-changed', handleChange as EventListener)
|
||||||
|
}, [loadGroups])
|
||||||
|
|
||||||
const handleGroupSelect = (group: GroupChatInfo) => {
|
const handleGroupSelect = (group: GroupChatInfo) => {
|
||||||
if (selectedGroup?.username !== group.username) {
|
if (selectedGroup?.username !== group.username) {
|
||||||
@@ -165,6 +182,10 @@ function GroupAnalyticsPage() {
|
|||||||
return num.toLocaleString()
|
return num.toLocaleString()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const sanitizeFileName = (name: string) => {
|
||||||
|
return name.replace(/[<>:"/\\|?*]+/g, '_').trim()
|
||||||
|
}
|
||||||
|
|
||||||
const getHourlyOption = () => {
|
const getHourlyOption = () => {
|
||||||
const hours = Array.from({ length: 24 }, (_, i) => i)
|
const hours = Array.from({ length: 24 }, (_, i) => i)
|
||||||
const data = hours.map(h => activeHours[h] || 0)
|
const data = hours.map(h => activeHours[h] || 0)
|
||||||
@@ -236,6 +257,35 @@ function GroupAnalyticsPage() {
|
|||||||
setCopiedField(null)
|
setCopiedField(null)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleExportMembers = async () => {
|
||||||
|
if (!selectedGroup || isExportingMembers) return
|
||||||
|
setIsExportingMembers(true)
|
||||||
|
try {
|
||||||
|
const downloadsPath = await window.electronAPI.app.getDownloadsPath()
|
||||||
|
const baseName = sanitizeFileName(`${selectedGroup.displayName || selectedGroup.username}_群成员列表`)
|
||||||
|
const separator = downloadsPath && downloadsPath.includes('\\') ? '\\' : '/'
|
||||||
|
const defaultPath = downloadsPath ? `${downloadsPath}${separator}${baseName}.xlsx` : `${baseName}.xlsx`
|
||||||
|
const saveResult = await window.electronAPI.dialog.saveFile({
|
||||||
|
title: '导出群成员列表',
|
||||||
|
defaultPath,
|
||||||
|
filters: [{ name: 'Excel', extensions: ['xlsx'] }]
|
||||||
|
})
|
||||||
|
if (!saveResult || saveResult.canceled || !saveResult.filePath) return
|
||||||
|
|
||||||
|
const result = await window.electronAPI.groupAnalytics.exportGroupMembers(selectedGroup.username, saveResult.filePath)
|
||||||
|
if (result.success) {
|
||||||
|
alert(`导出成功,共 ${result.count ?? members.length} 人`)
|
||||||
|
} else {
|
||||||
|
alert(`导出失败:${result.error || '未知错误'}`)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('导出群成员失败:', e)
|
||||||
|
alert(`导出失败:${String(e)}`)
|
||||||
|
} finally {
|
||||||
|
setIsExportingMembers(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const handleCopy = async (text: string, field: string) => {
|
const handleCopy = async (text: string, field: string) => {
|
||||||
try {
|
try {
|
||||||
await navigator.clipboard.writeText(text)
|
await navigator.clipboard.writeText(text)
|
||||||
@@ -407,6 +457,12 @@ function GroupAnalyticsPage() {
|
|||||||
onRangeComplete={handleDateRangeComplete}
|
onRangeComplete={handleDateRangeComplete}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
{selectedFunction === 'members' && (
|
||||||
|
<button className="export-btn" onClick={handleExportMembers} disabled={functionLoading || isExportingMembers}>
|
||||||
|
{isExportingMembers ? <Loader2 size={16} className="spin" /> : <Download size={16} />}
|
||||||
|
<span>导出成员</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
<button className="refresh-btn" onClick={handleRefresh} disabled={functionLoading}>
|
<button className="refresh-btn" onClick={handleRefresh} disabled={functionLoading}>
|
||||||
<RefreshCw size={16} className={functionLoading ? 'spin' : ''} />
|
<RefreshCw size={16} className={functionLoading ? 'spin' : ''} />
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -221,6 +221,100 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select-field {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-trigger {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 9999px;
|
||||||
|
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: 320px;
|
||||||
|
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-label {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-option.active .option-desc {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
.input-with-toggle {
|
.input-with-toggle {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -509,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;
|
||||||
@@ -1062,7 +1109,6 @@
|
|||||||
|
|
||||||
input {
|
input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-right: 36px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1096,13 +1142,15 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
background: var(--bg-secondary);
|
background: color-mix(in srgb, var(--bg-primary) 85%, var(--bg-secondary));
|
||||||
border: 1px solid var(--border-primary);
|
border: 1px solid var(--border-primary);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
-webkit-backdrop-filter: blur(14px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wxid-option {
|
.wxid-option {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
1179
src/pages/SnsPage.scss
Normal file
1179
src/pages/SnsPage.scss
Normal file
File diff suppressed because it is too large
Load Diff
806
src/pages/SnsPage.tsx
Normal file
806
src/pages/SnsPage.tsx
Normal file
@@ -0,0 +1,806 @@
|
|||||||
|
import { useEffect, useState, useRef, useCallback, useMemo } from 'react'
|
||||||
|
import { RefreshCw, Heart, Search, Calendar, User, X, Filter, Play, ImageIcon, Zap, Download, ChevronRight } from 'lucide-react'
|
||||||
|
import { Avatar } from '../components/Avatar'
|
||||||
|
import { ImagePreview } from '../components/ImagePreview'
|
||||||
|
import JumpToDateDialog from '../components/JumpToDateDialog'
|
||||||
|
import { LivePhotoIcon } from '../components/LivePhotoIcon'
|
||||||
|
import './SnsPage.scss'
|
||||||
|
|
||||||
|
interface SnsPost {
|
||||||
|
id: string
|
||||||
|
username: string
|
||||||
|
nickname: string
|
||||||
|
avatarUrl?: string
|
||||||
|
createTime: number
|
||||||
|
contentDesc: string
|
||||||
|
type?: number
|
||||||
|
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[]
|
||||||
|
comments: { id: string; nickname: string; content: string; refCommentId: string; refNickname?: string }[]
|
||||||
|
rawXml?: string // 原始 XML 数据
|
||||||
|
}
|
||||||
|
|
||||||
|
const MediaItem = ({ media, onPreview }: { media: any, onPreview: () => void }) => {
|
||||||
|
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 (
|
||||||
|
<div className={`media-item ${error ? 'error' : ''}`} onClick={onPreview}>
|
||||||
|
<img
|
||||||
|
src={targetUrl}
|
||||||
|
alt=""
|
||||||
|
referrerPolicy="no-referrer"
|
||||||
|
loading="lazy"
|
||||||
|
onError={() => setError(true)}
|
||||||
|
/>
|
||||||
|
{isLive && (
|
||||||
|
<div className="live-badge">
|
||||||
|
<LivePhotoIcon size={16} className="live-icon" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<button className="download-btn-overlay" onClick={handleDownload} title="下载原图">
|
||||||
|
<Download size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface Contact {
|
||||||
|
username: string
|
||||||
|
displayName: string
|
||||||
|
avatarUrl?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SnsPage() {
|
||||||
|
const [posts, setPosts] = useState<SnsPost[]>([])
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [offset, setOffset] = useState(0)
|
||||||
|
const [hasMore, setHasMore] = useState(true)
|
||||||
|
const loadingRef = useRef(false)
|
||||||
|
|
||||||
|
// 筛选与搜索状态
|
||||||
|
const [searchKeyword, setSearchKeyword] = useState('')
|
||||||
|
const [selectedUsernames, setSelectedUsernames] = useState<string[]>([])
|
||||||
|
const [isSidebarOpen, setIsSidebarOpen] = useState(true)
|
||||||
|
|
||||||
|
// 联系人列表状态
|
||||||
|
const [contacts, setContacts] = useState<Contact[]>([])
|
||||||
|
const [contactSearch, setContactSearch] = useState('')
|
||||||
|
const [contactsLoading, setContactsLoading] = useState(false)
|
||||||
|
const [showJumpDialog, setShowJumpDialog] = useState(false)
|
||||||
|
const [jumpTargetDate, setJumpTargetDate] = useState<Date | undefined>(undefined)
|
||||||
|
const [previewImage, setPreviewImage] = useState<string | null>(null)
|
||||||
|
const [debugPost, setDebugPost] = useState<SnsPost | null>(null)
|
||||||
|
|
||||||
|
const postsContainerRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
const [hasNewer, setHasNewer] = useState(false)
|
||||||
|
const [loadingNewer, setLoadingNewer] = useState(false)
|
||||||
|
const postsRef = useRef<SnsPost[]>([])
|
||||||
|
const scrollAdjustmentRef = useRef<number>(0)
|
||||||
|
|
||||||
|
// 同步 posts 到 ref 供 loadPosts 使用
|
||||||
|
useEffect(() => {
|
||||||
|
postsRef.current = posts
|
||||||
|
}, [posts])
|
||||||
|
|
||||||
|
// 处理向上加载动态时的滚动位置保持
|
||||||
|
useEffect(() => {
|
||||||
|
if (scrollAdjustmentRef.current !== 0 && postsContainerRef.current) {
|
||||||
|
const container = postsContainerRef.current;
|
||||||
|
const newHeight = container.scrollHeight;
|
||||||
|
const diff = newHeight - scrollAdjustmentRef.current;
|
||||||
|
if (diff > 0) {
|
||||||
|
container.scrollTop += diff;
|
||||||
|
}
|
||||||
|
scrollAdjustmentRef.current = 0;
|
||||||
|
}
|
||||||
|
}, [posts])
|
||||||
|
|
||||||
|
const loadPosts = useCallback(async (options: { reset?: boolean, direction?: 'older' | 'newer' } = {}) => {
|
||||||
|
const { reset = false, direction = 'older' } = options
|
||||||
|
if (loadingRef.current) return
|
||||||
|
|
||||||
|
loadingRef.current = true
|
||||||
|
if (direction === 'newer') setLoadingNewer(true)
|
||||||
|
else setLoading(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const limit = 20
|
||||||
|
let startTs: number | undefined = undefined
|
||||||
|
let endTs: number | undefined = undefined
|
||||||
|
|
||||||
|
if (reset) {
|
||||||
|
if (jumpTargetDate) {
|
||||||
|
endTs = Math.floor(jumpTargetDate.getTime() / 1000) + 86399
|
||||||
|
}
|
||||||
|
} else if (direction === 'newer') {
|
||||||
|
const currentPosts = postsRef.current
|
||||||
|
if (currentPosts.length > 0) {
|
||||||
|
const topTs = currentPosts[0].createTime
|
||||||
|
console.log('[SnsPage] Fetching newer posts starts from:', topTs + 1);
|
||||||
|
|
||||||
|
const result = await window.electronAPI.sns.getTimeline(
|
||||||
|
limit,
|
||||||
|
0,
|
||||||
|
selectedUsernames,
|
||||||
|
searchKeyword,
|
||||||
|
topTs + 1,
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.success && result.timeline && result.timeline.length > 0) {
|
||||||
|
if (postsContainerRef.current) {
|
||||||
|
scrollAdjustmentRef.current = postsContainerRef.current.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
const existingIds = new Set(currentPosts.map((p: SnsPost) => p.id));
|
||||||
|
const uniqueNewer = result.timeline.filter((p: SnsPost) => !existingIds.has(p.id));
|
||||||
|
|
||||||
|
if (uniqueNewer.length > 0) {
|
||||||
|
setPosts(prev => [...uniqueNewer, ...prev]);
|
||||||
|
}
|
||||||
|
setHasNewer(result.timeline.length >= limit);
|
||||||
|
} else {
|
||||||
|
setHasNewer(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setLoadingNewer(false);
|
||||||
|
loadingRef.current = false;
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
const currentPosts = postsRef.current
|
||||||
|
if (currentPosts.length > 0) {
|
||||||
|
endTs = currentPosts[currentPosts.length - 1].createTime - 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await window.electronAPI.sns.getTimeline(
|
||||||
|
limit,
|
||||||
|
0,
|
||||||
|
selectedUsernames,
|
||||||
|
searchKeyword,
|
||||||
|
startTs,
|
||||||
|
endTs
|
||||||
|
)
|
||||||
|
|
||||||
|
if (result.success && result.timeline) {
|
||||||
|
if (reset) {
|
||||||
|
setPosts(result.timeline)
|
||||||
|
setHasMore(result.timeline.length >= limit)
|
||||||
|
|
||||||
|
// 探测上方是否还有新动态(利用 DLL 过滤,而非底层 SQL)
|
||||||
|
const topTs = result.timeline[0]?.createTime || 0;
|
||||||
|
if (topTs > 0) {
|
||||||
|
const checkResult = await window.electronAPI.sns.getTimeline(1, 0, selectedUsernames, searchKeyword, topTs + 1, undefined);
|
||||||
|
setHasNewer(!!(checkResult.success && checkResult.timeline && checkResult.timeline.length > 0));
|
||||||
|
} else {
|
||||||
|
setHasNewer(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (postsContainerRef.current) {
|
||||||
|
postsContainerRef.current.scrollTop = 0
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (result.timeline.length > 0) {
|
||||||
|
setPosts(prev => [...prev, ...result.timeline!])
|
||||||
|
}
|
||||||
|
if (result.timeline.length < limit) {
|
||||||
|
setHasMore(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load SNS timeline:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
setLoadingNewer(false)
|
||||||
|
loadingRef.current = false
|
||||||
|
}
|
||||||
|
}, [selectedUsernames, searchKeyword, jumpTargetDate])
|
||||||
|
|
||||||
|
// 获取联系人列表
|
||||||
|
const loadContacts = useCallback(async () => {
|
||||||
|
setContactsLoading(true)
|
||||||
|
try {
|
||||||
|
const result = await window.electronAPI.chat.getSessions()
|
||||||
|
if (result.success && result.sessions) {
|
||||||
|
const systemAccounts = ['filehelper', 'fmessage', 'newsapp', 'weixin', 'qqmail', 'tmessage', 'floatbottle', 'medianote', 'brandsessionholder'];
|
||||||
|
const initialContacts = result.sessions
|
||||||
|
.filter((s: any) => {
|
||||||
|
if (!s.username) return false;
|
||||||
|
const u = s.username.toLowerCase();
|
||||||
|
if (u.includes('@chatroom') || u.endsWith('@chatroom') || u.endsWith('@openim')) return false;
|
||||||
|
if (u.startsWith('gh_')) return false;
|
||||||
|
if (systemAccounts.includes(u) || u.includes('helper') || u.includes('sessionholder')) return false;
|
||||||
|
return true;
|
||||||
|
})
|
||||||
|
.map((s: any) => ({
|
||||||
|
username: s.username,
|
||||||
|
displayName: s.displayName || s.username,
|
||||||
|
avatarUrl: s.avatarUrl
|
||||||
|
}))
|
||||||
|
setContacts(initialContacts)
|
||||||
|
|
||||||
|
const usernames = initialContacts.map((c: { username: string }) => c.username)
|
||||||
|
const enriched = await window.electronAPI.chat.enrichSessionsContactInfo(usernames)
|
||||||
|
if (enriched.success && enriched.contacts) {
|
||||||
|
setContacts(prev => prev.map(c => {
|
||||||
|
const extra = enriched.contacts![c.username]
|
||||||
|
if (extra) {
|
||||||
|
return {
|
||||||
|
...c,
|
||||||
|
displayName: extra.displayName || c.displayName,
|
||||||
|
avatarUrl: extra.avatarUrl || c.avatarUrl
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return c
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load contacts:', error)
|
||||||
|
} finally {
|
||||||
|
setContactsLoading(false)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// 初始加载
|
||||||
|
useEffect(() => {
|
||||||
|
const checkSchema = async () => {
|
||||||
|
try {
|
||||||
|
const schema = await window.electronAPI.chat.execQuery('sns', null, "PRAGMA table_info(SnsTimeLine)");
|
||||||
|
console.log('[SnsPage] SnsTimeLine Schema:', schema);
|
||||||
|
if (schema.success && schema.rows) {
|
||||||
|
const columns = schema.rows.map((r: any) => r.name);
|
||||||
|
console.log('[SnsPage] Available columns:', columns);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('[SnsPage] Failed to check schema:', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
checkSchema();
|
||||||
|
loadContacts()
|
||||||
|
}, [loadContacts])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleChange = () => {
|
||||||
|
setPosts([])
|
||||||
|
setHasMore(true)
|
||||||
|
setHasNewer(false)
|
||||||
|
setSelectedUsernames([])
|
||||||
|
setSearchKeyword('')
|
||||||
|
setJumpTargetDate(undefined)
|
||||||
|
loadContacts()
|
||||||
|
loadPosts({ reset: true })
|
||||||
|
}
|
||||||
|
window.addEventListener('wxid-changed', handleChange as EventListener)
|
||||||
|
return () => window.removeEventListener('wxid-changed', handleChange as EventListener)
|
||||||
|
}, [loadContacts, loadPosts])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadPosts({ reset: true })
|
||||||
|
}, [selectedUsernames, searchKeyword, jumpTargetDate])
|
||||||
|
|
||||||
|
const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
|
||||||
|
const { scrollTop, clientHeight, scrollHeight } = e.currentTarget
|
||||||
|
|
||||||
|
// 加载更旧的动态(触底)
|
||||||
|
if (scrollHeight - scrollTop - clientHeight < 400 && hasMore && !loading && !loadingNewer) {
|
||||||
|
loadPosts({ direction: 'older' })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载更新的动态(触顶触发)
|
||||||
|
// 这里的阈值可以保留,但主要依赖下面的 handleWheel 捕获到顶后的上划
|
||||||
|
if (scrollTop < 10 && hasNewer && !loading && !loadingNewer) {
|
||||||
|
loadPosts({ direction: 'newer' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理到顶后的手动上滚意图
|
||||||
|
const handleWheel = (e: React.WheelEvent<HTMLDivElement>) => {
|
||||||
|
const container = postsContainerRef.current
|
||||||
|
if (!container) return
|
||||||
|
|
||||||
|
// deltaY < 0 表示向上滚,scrollTop === 0 表示已经在最顶端
|
||||||
|
if (e.deltaY < -20 && container.scrollTop <= 0 && hasNewer && !loading && !loadingNewer) {
|
||||||
|
console.log('[SnsPage] Wheel-up detected at top, loading newer posts...');
|
||||||
|
loadPosts({ direction: 'newer' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTime = (ts: number) => {
|
||||||
|
const date = new Date(ts * 1000)
|
||||||
|
const isCurrentYear = date.getFullYear() === new Date().getFullYear()
|
||||||
|
|
||||||
|
return date.toLocaleString('zh-CN', {
|
||||||
|
year: isCurrentYear ? undefined : 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleUserSelection = (username: string) => {
|
||||||
|
// 选择联系人时,如果当前有时间跳转,建议清除时间跳转以避免“跳到旧动态”的困惑
|
||||||
|
// 或者保持原样。根据用户反馈“乱跳”,我们在这里选择:
|
||||||
|
// 如果用户选择了新的一个人,而之前有时间跳转,我们重置时间跳转到最新。
|
||||||
|
setJumpTargetDate(undefined);
|
||||||
|
|
||||||
|
setSelectedUsernames(prev => {
|
||||||
|
if (prev.includes(username)) {
|
||||||
|
return prev.filter(u => u !== username)
|
||||||
|
} else {
|
||||||
|
return [...prev, username]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearFilters = () => {
|
||||||
|
setSearchKeyword('')
|
||||||
|
setSelectedUsernames([])
|
||||||
|
setJumpTargetDate(undefined)
|
||||||
|
}
|
||||||
|
|
||||||
|
const filteredContacts = contacts.filter(c =>
|
||||||
|
c.displayName.toLowerCase().includes(contactSearch.toLowerCase()) ||
|
||||||
|
c.username.toLowerCase().includes(contactSearch.toLowerCase())
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="sns-page">
|
||||||
|
<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'}`}>
|
||||||
|
<div className="sidebar-header">
|
||||||
|
<h3>筛选条件</h3>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="filter-content custom-scrollbar">
|
||||||
|
{/* 1. 搜索分组 (放到最顶上) */}
|
||||||
|
<div className="filter-card">
|
||||||
|
<div className="filter-section">
|
||||||
|
<label><Search size={14} /> 关键词搜索</label>
|
||||||
|
<div className="search-input-wrapper">
|
||||||
|
<Search size={14} className="input-icon" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="搜索动态内容..."
|
||||||
|
value={searchKeyword}
|
||||||
|
onChange={e => setSearchKeyword(e.target.value)}
|
||||||
|
/>
|
||||||
|
{searchKeyword && (
|
||||||
|
<button className="clear-input" onClick={() => setSearchKeyword('')}>
|
||||||
|
<X size={14} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 2. 日期跳转 (放搜索下面) */}
|
||||||
|
<div className="filter-card jump-date-card">
|
||||||
|
<div className="filter-section">
|
||||||
|
<label><Calendar size={14} /> 时间跳转</label>
|
||||||
|
<button className={`jump-date-btn ${jumpTargetDate ? 'active' : ''}`} onClick={() => setShowJumpDialog(true)}>
|
||||||
|
<span className="text">
|
||||||
|
{jumpTargetDate ? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }) : '选择跳转日期...'}
|
||||||
|
</span>
|
||||||
|
<Calendar size={14} className="icon" />
|
||||||
|
</button>
|
||||||
|
{jumpTargetDate && (
|
||||||
|
<button className="clear-jump-date-inline" onClick={() => setJumpTargetDate(undefined)}>
|
||||||
|
返回最新动态
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{/* 3. 联系人筛选 (放最下面,高度自适应) */}
|
||||||
|
<div className="filter-card contact-card">
|
||||||
|
<div className="contact-filter-section">
|
||||||
|
<div className="section-header">
|
||||||
|
<label><User size={14} /> 联系人</label>
|
||||||
|
<div className="header-actions">
|
||||||
|
{selectedUsernames.length > 0 && (
|
||||||
|
<button className="clear-selection-btn" onClick={() => setSelectedUsernames([])}>清除</button>
|
||||||
|
)}
|
||||||
|
{selectedUsernames.length > 0 && (
|
||||||
|
<span className="selected-count">{selectedUsernames.length}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="contact-search">
|
||||||
|
<Search size={12} className="search-icon" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="搜索好友..."
|
||||||
|
value={contactSearch}
|
||||||
|
onChange={e => setContactSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
{contactSearch && (
|
||||||
|
<X size={12} className="clear-search-icon" onClick={() => setContactSearch('')} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="contact-list custom-scrollbar">
|
||||||
|
{filteredContacts.map(contact => (
|
||||||
|
<div
|
||||||
|
key={contact.username}
|
||||||
|
className={`contact-item ${selectedUsernames.includes(contact.username) ? 'active' : ''}`}
|
||||||
|
onClick={() => toggleUserSelection(contact.username)}
|
||||||
|
>
|
||||||
|
<div className="avatar-wrapper">
|
||||||
|
<Avatar src={contact.avatarUrl} name={contact.displayName} size={32} shape="rounded" />
|
||||||
|
{selectedUsernames.includes(contact.username) && (
|
||||||
|
<div className="active-badge"></div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="contact-name">{contact.displayName}</span>
|
||||||
|
<div className="check-box">
|
||||||
|
{selectedUsernames.includes(contact.username) && <div className="inner-check"></div>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{filteredContacts.length === 0 && (
|
||||||
|
<div className="empty-contacts">无可显示联系人</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sidebar-footer">
|
||||||
|
<button className="clear-btn" onClick={clearFilters}>
|
||||||
|
<RefreshCw size={14} />
|
||||||
|
重置所有筛选
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
{previewImage && (
|
||||||
|
<ImagePreview src={previewImage} onClose={() => setPreviewImage(null)} />
|
||||||
|
)}
|
||||||
|
<JumpToDateDialog
|
||||||
|
isOpen={showJumpDialog}
|
||||||
|
onClose={() => {
|
||||||
|
setShowJumpDialog(false)
|
||||||
|
}}
|
||||||
|
onSelect={(date) => {
|
||||||
|
setJumpTargetDate(date)
|
||||||
|
setShowJumpDialog(false)
|
||||||
|
}}
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
216
src/pages/VideoWindow.scss
Normal file
216
src/pages/VideoWindow.scss
Normal file
@@ -0,0 +1,216 @@
|
|||||||
|
.video-window-container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
.title-bar {
|
||||||
|
height: 40px;
|
||||||
|
min-height: 40px;
|
||||||
|
display: flex;
|
||||||
|
background: #1a1a1a;
|
||||||
|
padding-right: 140px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
.window-drag-area {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-app-region: drag;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-viewport {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0; // 重要:让 flex 子元素可以收缩
|
||||||
|
|
||||||
|
video {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-loading-overlay,
|
||||||
|
.video-error-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-error-overlay {
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.2);
|
||||||
|
border-top-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
z-index: 4;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .play-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-controls {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4) 60%, transparent);
|
||||||
|
padding: 40px 16px 12px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.25s;
|
||||||
|
z-index: 6;
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
.progress-track {
|
||||||
|
flex: 1;
|
||||||
|
height: 3px;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height 0.15s;
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--primary, #4a9eff);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .progress-track {
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-left,
|
||||||
|
.controls-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-display {
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
font-size: 12px;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
.volume-slider {
|
||||||
|
width: 60px;
|
||||||
|
height: 3px;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 鼠标悬停时显示控制栏
|
||||||
|
&:hover .video-controls {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 播放时如果鼠标不动,隐藏控制栏
|
||||||
|
&.hide-controls .video-controls {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-window-empty {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
199
src/pages/VideoWindow.tsx
Normal file
199
src/pages/VideoWindow.tsx
Normal file
@@ -0,0 +1,199 @@
|
|||||||
|
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||||
|
import { useSearchParams } from 'react-router-dom'
|
||||||
|
import { Play, Pause, Volume2, VolumeX, RotateCcw } from 'lucide-react'
|
||||||
|
import './VideoWindow.scss'
|
||||||
|
|
||||||
|
export default function VideoWindow() {
|
||||||
|
const [searchParams] = useSearchParams()
|
||||||
|
const videoPath = searchParams.get('videoPath')
|
||||||
|
const [isPlaying, setIsPlaying] = useState(false)
|
||||||
|
const [isMuted, setIsMuted] = useState(false)
|
||||||
|
const [currentTime, setCurrentTime] = useState(0)
|
||||||
|
const [duration, setDuration] = useState(0)
|
||||||
|
const [volume, setVolume] = useState(1)
|
||||||
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
const videoRef = useRef<HTMLVideoElement>(null)
|
||||||
|
const progressRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
// 格式化时间
|
||||||
|
const formatTime = (seconds: number) => {
|
||||||
|
const mins = Math.floor(seconds / 60)
|
||||||
|
const secs = Math.floor(seconds % 60)
|
||||||
|
return `${mins}:${secs.toString().padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
//播放/暂停
|
||||||
|
const togglePlay = useCallback(() => {
|
||||||
|
if (!videoRef.current) return
|
||||||
|
if (isPlaying) {
|
||||||
|
videoRef.current.pause()
|
||||||
|
} else {
|
||||||
|
videoRef.current.play()
|
||||||
|
}
|
||||||
|
}, [isPlaying])
|
||||||
|
|
||||||
|
// 静音切换
|
||||||
|
const toggleMute = useCallback(() => {
|
||||||
|
if (!videoRef.current) return
|
||||||
|
videoRef.current.muted = !isMuted
|
||||||
|
setIsMuted(!isMuted)
|
||||||
|
}, [isMuted])
|
||||||
|
|
||||||
|
// 进度条点击
|
||||||
|
const handleProgressClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
if (!videoRef.current || !progressRef.current) return
|
||||||
|
e.stopPropagation()
|
||||||
|
const rect = progressRef.current.getBoundingClientRect()
|
||||||
|
const percent = (e.clientX - rect.left) / rect.width
|
||||||
|
videoRef.current.currentTime = percent * duration
|
||||||
|
}, [duration])
|
||||||
|
|
||||||
|
// 音量调节
|
||||||
|
const handleVolumeChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const newVolume = parseFloat(e.target.value)
|
||||||
|
setVolume(newVolume)
|
||||||
|
if (videoRef.current) {
|
||||||
|
videoRef.current.volume = newVolume
|
||||||
|
setIsMuted(newVolume === 0)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// 重新播放
|
||||||
|
const handleReplay = useCallback(() => {
|
||||||
|
if (!videoRef.current) return
|
||||||
|
videoRef.current.currentTime = 0
|
||||||
|
videoRef.current.play()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// 快捷键
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape') window.electronAPI.window.close()
|
||||||
|
if (e.key === ' ') {
|
||||||
|
e.preventDefault()
|
||||||
|
togglePlay()
|
||||||
|
}
|
||||||
|
if (e.key === 'm' || e.key === 'M') toggleMute()
|
||||||
|
if (e.key === 'ArrowLeft' && videoRef.current) {
|
||||||
|
videoRef.current.currentTime -= 5
|
||||||
|
}
|
||||||
|
if (e.key === 'ArrowRight' && videoRef.current) {
|
||||||
|
videoRef.current.currentTime += 5
|
||||||
|
}
|
||||||
|
if (e.key === 'ArrowUp' && videoRef.current) {
|
||||||
|
videoRef.current.volume = Math.min(1, videoRef.current.volume + 0.1)
|
||||||
|
setVolume(videoRef.current.volume)
|
||||||
|
}
|
||||||
|
if (e.key === 'ArrowDown' && videoRef.current) {
|
||||||
|
videoRef.current.volume = Math.max(0, videoRef.current.volume - 0.1)
|
||||||
|
setVolume(videoRef.current.volume)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener('keydown', handleKeyDown)
|
||||||
|
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||||
|
}, [togglePlay, toggleMute])
|
||||||
|
|
||||||
|
if (!videoPath) {
|
||||||
|
return (
|
||||||
|
<div className="video-window-empty">
|
||||||
|
<span>无效的视频路径</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const progress = duration > 0 ? (currentTime / duration) * 100 : 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="video-window-container">
|
||||||
|
<div className="title-bar">
|
||||||
|
<div className="window-drag-area"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="video-viewport" onClick={togglePlay}>
|
||||||
|
{isLoading && (
|
||||||
|
<div className="video-loading-overlay">
|
||||||
|
<div className="spinner"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<div className="video-error-overlay">
|
||||||
|
<span>{error}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<video
|
||||||
|
ref={videoRef}
|
||||||
|
src={videoPath}
|
||||||
|
onLoadedMetadata={(e) => {
|
||||||
|
const video = e.currentTarget
|
||||||
|
setDuration(video.duration)
|
||||||
|
setIsLoading(false)
|
||||||
|
// 根据视频尺寸调整窗口大小
|
||||||
|
if (video.videoWidth && video.videoHeight) {
|
||||||
|
window.electronAPI.window.resizeToFitVideo(video.videoWidth, video.videoHeight)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onTimeUpdate={(e) => setCurrentTime(e.currentTarget.currentTime)}
|
||||||
|
onPlay={() => setIsPlaying(true)}
|
||||||
|
onPause={() => setIsPlaying(false)}
|
||||||
|
onEnded={() => setIsPlaying(false)}
|
||||||
|
onError={() => {
|
||||||
|
setError('视频加载失败')
|
||||||
|
setIsLoading(false)
|
||||||
|
}}
|
||||||
|
onWaiting={() => setIsLoading(true)}
|
||||||
|
onCanPlay={() => setIsLoading(false)}
|
||||||
|
autoPlay
|
||||||
|
/>
|
||||||
|
{!isPlaying && !isLoading && !error && (
|
||||||
|
<div className="play-overlay">
|
||||||
|
<Play size={64} fill="white" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="video-controls" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<div
|
||||||
|
className="progress-bar"
|
||||||
|
ref={progressRef}
|
||||||
|
onClick={handleProgressClick}
|
||||||
|
>
|
||||||
|
<div className="progress-track">
|
||||||
|
<div className="progress-fill" style={{ width: `${progress}%` }}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="controls-row">
|
||||||
|
<div className="controls-left">
|
||||||
|
<button onClick={togglePlay} title={isPlaying ? '暂停 (空格)' : '播放 (空格)'}>
|
||||||
|
{isPlaying ? <Pause size={18} /> : <Play size={18} />}
|
||||||
|
</button>
|
||||||
|
<button onClick={handleReplay} title="重新播放">
|
||||||
|
<RotateCcw size={16} />
|
||||||
|
</button>
|
||||||
|
<span className="time-display">
|
||||||
|
{formatTime(currentTime)} / {formatTime(duration)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="controls-right">
|
||||||
|
<div className="volume-control">
|
||||||
|
<button onClick={toggleMute} title={isMuted ? '取消静音 (M)' : '静音 (M)'}>
|
||||||
|
{isMuted || volume === 0 ? <VolumeX size={16} /> : <Volume2 size={16} />}
|
||||||
|
</button>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="1"
|
||||||
|
step="0.1"
|
||||||
|
value={isMuted ? 0 : volume}
|
||||||
|
onChange={handleVolumeChange}
|
||||||
|
className="volume-slider"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect, useRef } from 'react'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { useAppStore } from '../stores/appStore'
|
import { useAppStore } from '../stores/appStore'
|
||||||
import { dialog } from '../services/ipc'
|
import { dialog } from '../services/ipc'
|
||||||
@@ -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 {
|
||||||
@@ -34,6 +35,8 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
const [cachePath, setCachePath] = useState('')
|
const [cachePath, setCachePath] = useState('')
|
||||||
const [wxid, setWxid] = useState('')
|
const [wxid, setWxid] = useState('')
|
||||||
const [wxidOptions, setWxidOptions] = useState<Array<{ wxid: string; modifiedTime: number }>>([])
|
const [wxidOptions, setWxidOptions] = useState<Array<{ wxid: string; modifiedTime: number }>>([])
|
||||||
|
const [showWxidSelect, setShowWxidSelect] = useState(false)
|
||||||
|
const wxidSelectRef = useRef<HTMLDivElement>(null)
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('')
|
||||||
const [isConnecting, setIsConnecting] = useState(false)
|
const [isConnecting, setIsConnecting] = useState(false)
|
||||||
const [isDetectingPath, setIsDetectingPath] = useState(false)
|
const [isDetectingPath, setIsDetectingPath] = useState(false)
|
||||||
@@ -46,11 +49,69 @@ 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(() => {
|
useEffect(() => {
|
||||||
const removeDb = window.electronAPI.key.onDbKeyStatus((payload) => {
|
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(() => {
|
||||||
|
const removeDb = window.electronAPI.key.onDbKeyStatus((payload: { message: string; level: number }) => {
|
||||||
setDbKeyStatus(payload.message)
|
setDbKeyStatus(payload.message)
|
||||||
})
|
})
|
||||||
const removeImage = window.electronAPI.key.onImageKeyStatus((payload) => {
|
const removeImage = window.electronAPI.key.onImageKeyStatus((payload: { message: string }) => {
|
||||||
setImageKeyStatus(payload.message)
|
setImageKeyStatus(payload.message)
|
||||||
})
|
})
|
||||||
return () => {
|
return () => {
|
||||||
@@ -68,8 +129,22 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setWxidOptions([])
|
setWxidOptions([])
|
||||||
setWxid('')
|
setWxid('')
|
||||||
|
setShowWxidSelect(false)
|
||||||
}, [dbPath])
|
}, [dbPath])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (!showWxidSelect) return
|
||||||
|
const target = event.target as Node
|
||||||
|
if (wxidSelectRef.current && !wxidSelectRef.current.contains(target)) {
|
||||||
|
setShowWxidSelect(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside)
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside)
|
||||||
|
}, [showWxidSelect])
|
||||||
|
|
||||||
const currentStep = steps[stepIndex]
|
const currentStep = steps[stepIndex]
|
||||||
const rootClassName = `welcome-page${isClosing ? ' is-closing' : ''}${standalone ? ' is-standalone' : ''}`
|
const rootClassName = `welcome-page${isClosing ? ' is-closing' : ''}${standalone ? ' is-standalone' : ''}`
|
||||||
const showWindowControls = standalone
|
const showWindowControls = standalone
|
||||||
@@ -158,6 +233,28 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleScanWxidCandidates = async () => {
|
||||||
|
if (!dbPath) {
|
||||||
|
setError('请先选择数据库目录')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (isScanningWxid) return
|
||||||
|
setIsScanningWxid(true)
|
||||||
|
setError('')
|
||||||
|
try {
|
||||||
|
const wxids = await window.electronAPI.dbPath.scanWxidCandidates(dbPath)
|
||||||
|
setWxidOptions(wxids)
|
||||||
|
setShowWxidSelect(true)
|
||||||
|
if (!wxids.length) {
|
||||||
|
setError('未检测到可用的账号目录,请检查路径')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setError(`扫描失败: ${e}`)
|
||||||
|
} finally {
|
||||||
|
setIsScanningWxid(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const handleAutoGetDbKey = async () => {
|
const handleAutoGetDbKey = async () => {
|
||||||
if (isFetchingDbKey) return
|
if (isFetchingDbKey) return
|
||||||
setIsFetchingDbKey(true)
|
setIsFetchingDbKey(true)
|
||||||
@@ -227,6 +324,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
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -269,15 +372,23 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
await configService.setDecryptKey(decryptKey)
|
await configService.setDecryptKey(decryptKey)
|
||||||
await configService.setMyWxid(wxid)
|
await configService.setMyWxid(wxid)
|
||||||
await configService.setCachePath(cachePath)
|
await configService.setCachePath(cachePath)
|
||||||
if (imageXorKey) {
|
const parsedXorKey = imageXorKey ? parseInt(imageXorKey.replace(/^0x/i, ''), 16) : null
|
||||||
const parsed = parseInt(imageXorKey.replace(/^0x/i, ''), 16)
|
await configService.setImageXorKey(typeof parsedXorKey === 'number' && !Number.isNaN(parsedXorKey) ? parsedXorKey : 0)
|
||||||
if (!Number.isNaN(parsed)) {
|
await configService.setImageAesKey(imageAesKey || '')
|
||||||
await configService.setImageXorKey(parsed)
|
await configService.setWxidConfig(wxid, {
|
||||||
}
|
decryptKey,
|
||||||
}
|
imageXorKey: typeof parsedXorKey === 'number' && !Number.isNaN(parsedXorKey) ? parsedXorKey : 0,
|
||||||
if (imageAesKey) {
|
imageAesKey
|
||||||
await configService.setImageAesKey(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)
|
||||||
@@ -313,6 +424,67 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
if (isDbConnected) {
|
if (isDbConnected) {
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
|
<div className="welcome-container">
|
||||||
|
{showWindowControls && (
|
||||||
|
<div className="window-controls">
|
||||||
|
<button type="button" className="window-btn" onClick={handleMinimize} aria-label="最小化">
|
||||||
|
<Minus size={14} />
|
||||||
|
</button>
|
||||||
|
<button type="button" className="window-btn is-close" onClick={handleCloseWindow} aria-label="关闭">
|
||||||
|
<X size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="welcome-sidebar">
|
||||||
|
<div className="sidebar-header">
|
||||||
|
<img src="./logo.png" alt="WeFlow" className="sidebar-logo" />
|
||||||
|
<div className="sidebar-brand">
|
||||||
|
<span className="brand-name">WeFlow</span>
|
||||||
|
<span className="brand-tag">Connected</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sidebar-spacer" style={{ flex: 1 }} />
|
||||||
|
|
||||||
|
<div className="sidebar-footer">
|
||||||
|
<ShieldCheck size={14} />
|
||||||
|
<span>本地安全存储</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="welcome-content success-content">
|
||||||
|
<div className="success-body">
|
||||||
|
<div className="success-icon">
|
||||||
|
<CheckCircle2 size={48} />
|
||||||
|
</div>
|
||||||
|
<h1 className="success-title">配置已完成</h1>
|
||||||
|
<p className="success-desc">数据库已连接,你可以直接进入首页使用全部功能。</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn btn-primary btn-large"
|
||||||
|
onClick={() => {
|
||||||
|
if (standalone) {
|
||||||
|
setIsClosing(true)
|
||||||
|
setTimeout(() => {
|
||||||
|
window.electronAPI.window.completeOnboarding()
|
||||||
|
}, 450)
|
||||||
|
} else {
|
||||||
|
navigate('/home')
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
进入首页 <ArrowRight size={18} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={rootClassName}>
|
||||||
|
<div className="welcome-container">
|
||||||
{showWindowControls && (
|
{showWindowControls && (
|
||||||
<div className="window-controls">
|
<div className="window-controls">
|
||||||
<button type="button" className="window-btn" onClick={handleMinimize} aria-label="最小化">
|
<button type="button" className="window-btn" onClick={handleMinimize} aria-label="最小化">
|
||||||
@@ -323,234 +495,293 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="welcome-shell">
|
<div className="welcome-sidebar">
|
||||||
<div className="welcome-panel">
|
<div className="sidebar-header">
|
||||||
<div className="panel-header">
|
<img src="./logo.png" alt="WeFlow" className="sidebar-logo" />
|
||||||
<img src="./logo.png" alt="WeFlow" className="panel-logo" />
|
<div className="sidebar-brand">
|
||||||
<div>
|
<span className="brand-name">WeFlow</span>
|
||||||
<p className="panel-kicker">WeFlow</p>
|
<span className="brand-tag">Setup</span>
|
||||||
<h1>已连接数据库</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="panel-note">
|
|
||||||
<CheckCircle2 size={16} />
|
|
||||||
<span>配置已完成,可直接进入首页</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="btn btn-primary btn-full"
|
|
||||||
onClick={() => {
|
|
||||||
if (standalone) {
|
|
||||||
setIsClosing(true)
|
|
||||||
setTimeout(() => {
|
|
||||||
window.electronAPI.window.completeOnboarding()
|
|
||||||
}, 450)
|
|
||||||
} else {
|
|
||||||
navigate('/home')
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
进入首页
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
<div className="sidebar-nav">
|
||||||
<div className={rootClassName}>
|
|
||||||
{showWindowControls && (
|
|
||||||
<div className="window-controls">
|
|
||||||
<button type="button" className="window-btn" onClick={handleMinimize} aria-label="最小化">
|
|
||||||
<Minus size={14} />
|
|
||||||
</button>
|
|
||||||
<button type="button" className="window-btn is-close" onClick={handleCloseWindow} aria-label="关闭">
|
|
||||||
<X size={14} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="welcome-shell">
|
|
||||||
<div className="welcome-panel">
|
|
||||||
<div className="panel-header">
|
|
||||||
<img src="./logo.png" alt="WeFlow" className="panel-logo" />
|
|
||||||
<div>
|
|
||||||
<p className="panel-kicker">首次配置</p>
|
|
||||||
<h1>WeFlow 初始引导</h1>
|
|
||||||
<p className="panel-subtitle">一步一步完成数据库与密钥设置</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="step-list">
|
|
||||||
{steps.map((step, index) => (
|
{steps.map((step, index) => (
|
||||||
<div key={step.id} className={`step-item ${index === stepIndex ? 'active' : ''} ${index < stepIndex ? 'done' : ''}`}>
|
<div key={step.id} className={`nav-item ${index === stepIndex ? 'active' : ''} ${index < stepIndex ? 'completed' : ''}`}>
|
||||||
<div className="step-index">{index < stepIndex ? <CheckCircle2 size={14} /> : index + 1}</div>
|
<div className="nav-indicator">
|
||||||
<div>
|
{index < stepIndex ? <CheckCircle2 size={14} /> : <div className="dot" />}
|
||||||
<div className="step-title">{step.title}</div>
|
</div>
|
||||||
<div className="step-desc">{step.desc}</div>
|
<div className="nav-info">
|
||||||
|
<div className="nav-title">{step.title}</div>
|
||||||
|
<div className="nav-desc">{step.desc}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="panel-foot">
|
|
||||||
<ShieldCheck size={16} />
|
<div className="sidebar-footer">
|
||||||
|
<ShieldCheck size={14} />
|
||||||
<span>数据仅在本地处理,不上传服务器</span>
|
<span>数据仅在本地处理,不上传服务器</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="setup-card">
|
<div className="welcome-content">
|
||||||
<div className="setup-header">
|
<div className="content-header">
|
||||||
<div className="setup-icon">
|
|
||||||
{currentStep.id === 'intro' && <Sparkles size={18} />}
|
|
||||||
{currentStep.id === 'db' && <Database size={18} />}
|
|
||||||
{currentStep.id === 'cache' && <HardDrive size={18} />}
|
|
||||||
{currentStep.id === 'key' && <KeyRound size={18} />}
|
|
||||||
{currentStep.id === 'image' && <ShieldCheck size={18} />}
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h2>{currentStep.title}</h2>
|
<h2>{currentStep.title}</h2>
|
||||||
<p>{currentStep.desc}</p>
|
<p className="header-desc">{currentStep.desc}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{currentStep.id === 'intro' && (
|
<div className="content-body">
|
||||||
<div className="setup-body">
|
{currentStep.id === 'intro' && (
|
||||||
<div className="intro-card">
|
<div className="intro-block">
|
||||||
<Wand2 size={18} />
|
{/* 内容移至底部 */}
|
||||||
<div>
|
</div>
|
||||||
<h3>准备好了吗?</h3>
|
)}
|
||||||
<p>接下来只需配置数据库目录和获取解密密钥。</p>
|
|
||||||
|
{currentStep.id === 'db' && (
|
||||||
|
<div className="form-group">
|
||||||
|
<label className="field-label">数据库根目录</label>
|
||||||
|
<div className="input-group">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="field-input"
|
||||||
|
placeholder="例如:C:\\Users\\xxx\\Documents\\xwechat_files"
|
||||||
|
value={dbPath}
|
||||||
|
onChange={(e) => setDbPath(e.target.value)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="action-row">
|
||||||
</div>
|
<button className="btn btn-secondary" onClick={handleAutoDetectPath} disabled={isDetectingPath}>
|
||||||
)}
|
<FolderSearch size={16} /> {isDetectingPath ? '检测中...' : '自动检测'}
|
||||||
|
</button>
|
||||||
{currentStep.id === 'db' && (
|
<button className="btn btn-secondary" onClick={handleSelectPath}>
|
||||||
<div className="setup-body">
|
<FolderOpen size={16} /> 浏览...
|
||||||
<label className="field-label">数据库根目录</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="field-input"
|
|
||||||
placeholder="例如:C:\\Users\\xxx\\Documents\\xwechat_files"
|
|
||||||
value={dbPath}
|
|
||||||
onChange={(e) => setDbPath(e.target.value)}
|
|
||||||
/>
|
|
||||||
<div className="button-row">
|
|
||||||
<button className="btn btn-secondary" onClick={handleAutoDetectPath} disabled={isDetectingPath}>
|
|
||||||
<FolderSearch size={16} /> {isDetectingPath ? '检测中...' : '自动检测'}
|
|
||||||
</button>
|
|
||||||
<button className="btn btn-primary" onClick={handleSelectPath}>
|
|
||||||
<FolderOpen size={16} /> 浏览选择
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="field-hint">建议选择包含 xwechat_files 的目录</div>
|
|
||||||
<div className="field-hint" style={{ color: '#ff6b6b', marginTop: '4px' }}>⚠️ 目录路径不可包含中文,如有中文请去微信-设置-存储位置点击更改,迁移至全英文目录</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentStep.id === 'cache' && (
|
|
||||||
<div className="setup-body">
|
|
||||||
<label className="field-label">缓存目录</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="field-input"
|
|
||||||
placeholder="留空使用默认目录"
|
|
||||||
value={cachePath}
|
|
||||||
onChange={(e) => setCachePath(e.target.value)}
|
|
||||||
/>
|
|
||||||
<div className="button-row">
|
|
||||||
<button className="btn btn-primary" onClick={handleSelectCachePath}>
|
|
||||||
<FolderOpen size={16} /> 浏览选择
|
|
||||||
</button>
|
|
||||||
<button className="btn btn-secondary" onClick={() => setCachePath('')}>
|
|
||||||
<RotateCcw size={16} /> 使用默认
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="field-hint">用于头像、表情与图片缓存,留空使用默认目录</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentStep.id === 'key' && (
|
|
||||||
<div className="setup-body">
|
|
||||||
<label className="field-label">微信账号 wxid</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="field-input"
|
|
||||||
placeholder="获取密钥后将自动填充"
|
|
||||||
value={wxid}
|
|
||||||
onChange={(e) => setWxid(e.target.value)}
|
|
||||||
/>
|
|
||||||
<label className="field-label">解密密钥</label>
|
|
||||||
<div className="field-with-toggle">
|
|
||||||
<input
|
|
||||||
type={showDecryptKey ? 'text' : 'password'}
|
|
||||||
className="field-input"
|
|
||||||
placeholder="64 位十六进制密钥"
|
|
||||||
value={decryptKey}
|
|
||||||
onChange={(e) => setDecryptKey(e.target.value.trim())}
|
|
||||||
/>
|
|
||||||
<button type="button" className="toggle-btn" onClick={() => setShowDecryptKey(!showDecryptKey)}>
|
|
||||||
{showDecryptKey ? <EyeOff size={14} /> : <Eye size={14} />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isManualStartPrompt ? (
|
|
||||||
<div className="manual-prompt">
|
|
||||||
<p className="prompt-text">未能自动启动微信,请手动启动并登录后点击下方确认</p>
|
|
||||||
<button className="btn btn-primary" onClick={handleManualConfirm}>
|
|
||||||
我已启动微信,继续检测
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
<button className="btn btn-secondary btn-inline" onClick={handleAutoGetDbKey} disabled={isFetchingDbKey}>
|
<div className="field-hint">请选择微信-设置-存储位置对应的目录</div>
|
||||||
{isFetchingDbKey ? '获取中...' : '自动获取密钥'}
|
<div className="field-hint warning">
|
||||||
|
目录路径不可包含中文,如有中文请先在微信中迁移至全英文目录
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentStep.id === 'cache' && (
|
||||||
|
<div className="form-group">
|
||||||
|
<label className="field-label">缓存目录</label>
|
||||||
|
<div className="input-group">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="field-input"
|
||||||
|
placeholder="留空即使用默认目录"
|
||||||
|
value={cachePath}
|
||||||
|
onChange={(e) => setCachePath(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="action-row">
|
||||||
|
<button className="btn btn-secondary" onClick={handleSelectCachePath}>
|
||||||
|
<FolderOpen size={16} /> 浏览
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-secondary" onClick={() => setCachePath('')}>
|
||||||
|
<RotateCcw size={16} /> 重置默认
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="field-hint">用于头像、表情与图片缓存</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentStep.id === 'key' && (
|
||||||
|
<div className="form-group">
|
||||||
|
<label className="field-label">微信账号 (Wxid)</label>
|
||||||
|
<div className="wxid-select" ref={wxidSelectRef}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="field-input"
|
||||||
|
placeholder="点击选择..."
|
||||||
|
value={wxid}
|
||||||
|
readOnly
|
||||||
|
onClick={handleScanWxidCandidates}
|
||||||
|
onChange={(e) => setWxid(e.target.value)}
|
||||||
|
/>
|
||||||
|
{showWxidSelect && wxidOptions.length > 0 && (
|
||||||
|
<div className="wxid-dropdown">
|
||||||
|
{wxidOptions.map((opt) => (
|
||||||
|
<button
|
||||||
|
key={opt.wxid}
|
||||||
|
type="button"
|
||||||
|
className={`wxid-option ${opt.wxid === wxid ? 'active' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setWxid(opt.wxid)
|
||||||
|
setShowWxidSelect(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="wxid-name">{opt.wxid}</span>
|
||||||
|
<span className="wxid-time">{formatModifiedTime(opt.modifiedTime)}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label className="field-label mt-4">解密密钥</label>
|
||||||
|
<div className="field-with-toggle">
|
||||||
|
<input
|
||||||
|
type={showDecryptKey ? 'text' : 'password'}
|
||||||
|
className="field-input"
|
||||||
|
placeholder="64 位十六进制密钥"
|
||||||
|
value={decryptKey}
|
||||||
|
onChange={(e) => setDecryptKey(e.target.value.trim())}
|
||||||
|
/>
|
||||||
|
<button type="button" className="toggle-btn" onClick={() => setShowDecryptKey(!showDecryptKey)}>
|
||||||
|
{showDecryptKey ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="key-actions">
|
||||||
|
{isManualStartPrompt ? (
|
||||||
|
<div className="manual-prompt">
|
||||||
|
<p>未能自动启动微信,请手动启动并登录</p>
|
||||||
|
<button className="btn btn-primary" onClick={handleManualConfirm}>
|
||||||
|
我已登录,继续
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<button className="btn btn-secondary btn-block" onClick={handleAutoGetDbKey} disabled={isFetchingDbKey}>
|
||||||
|
{isFetchingDbKey ? '正在获取...' : '自动获取密钥'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{dbKeyStatus && <div className="status-message">{dbKeyStatus}</div>}
|
||||||
|
<div className="field-hint">点击自动获取后微信将重启,请留意弹窗提示</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' && (
|
||||||
|
<div className="form-group">
|
||||||
|
<div className="grid-2">
|
||||||
|
<div>
|
||||||
|
<label className="field-label">图片 XOR 密钥</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="field-input"
|
||||||
|
placeholder="0x..."
|
||||||
|
value={imageXorKey}
|
||||||
|
onChange={(e) => setImageXorKey(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="field-label">图片 AES 密钥</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="field-input"
|
||||||
|
placeholder="16位密钥"
|
||||||
|
value={imageAesKey}
|
||||||
|
onChange={(e) => setImageAesKey(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="btn btn-secondary btn-block mt-4" onClick={handleAutoGetImageKey} disabled={isFetchingImageKey}>
|
||||||
|
{isFetchingImageKey ? '扫描中...' : '自动获取图片密钥'}
|
||||||
</button>
|
</button>
|
||||||
)}
|
|
||||||
|
|
||||||
{dbKeyStatus && <div className="field-hint status-text">{dbKeyStatus}</div>}
|
{imageKeyStatus && <div className="status-message">{imageKeyStatus}</div>}
|
||||||
<div className="field-hint">获取密钥会自动识别最近登录的账号</div>
|
<div className="field-hint">请在微信中打开几张图片后再点击获取</div>
|
||||||
<div className="field-hint">点击自动获取后微信将重新启动,当页面提示可以登录微信了再点击登录</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
{currentStep.id === 'image' && (
|
|
||||||
<div className="setup-body">
|
|
||||||
<label className="field-label">图片 XOR 密钥</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="field-input"
|
|
||||||
placeholder="例如:0xA4"
|
|
||||||
value={imageXorKey}
|
|
||||||
onChange={(e) => setImageXorKey(e.target.value)}
|
|
||||||
/>
|
|
||||||
<label className="field-label">图片 AES 密钥</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="field-input"
|
|
||||||
placeholder="16 位密钥"
|
|
||||||
value={imageAesKey}
|
|
||||||
onChange={(e) => setImageAesKey(e.target.value)}
|
|
||||||
/>
|
|
||||||
<button className="btn btn-secondary btn-inline" onClick={handleAutoGetImageKey} disabled={isFetchingImageKey}>
|
|
||||||
{isFetchingImageKey ? '获取中...' : '自动获取图片密钥'}
|
|
||||||
</button>
|
|
||||||
{imageKeyStatus && <div className="field-hint status-text">{imageKeyStatus}</div>}
|
|
||||||
<div className="field-hint">如获取失败,请先打开朋友圈图片再重试</div>
|
|
||||||
{isFetchingImageKey && <div className="field-hint status-text">正在扫描内存,请稍候...</div>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{error && <div className="error-message">{error}</div>}
|
{error && <div className="error-message">{error}</div>}
|
||||||
|
|
||||||
<div className="setup-actions">
|
{currentStep.id === 'intro' && (
|
||||||
<button className="btn btn-tertiary" onClick={handleBack} disabled={stepIndex === 0}>
|
<div className="intro-footer">
|
||||||
|
<p>接下来的几个步骤将引导你连接本地微信数据库。</p>
|
||||||
|
<p>WeFlow 需要访问你的本地数据文件以提供分析与导出功能。</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="content-actions">
|
||||||
|
<button className="btn btn-ghost" onClick={handleBack} disabled={stepIndex === 0}>
|
||||||
<ArrowLeft size={16} /> 上一步
|
<ArrowLeft size={16} /> 上一步
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{stepIndex < steps.length - 1 ? (
|
{stepIndex < steps.length - 1 ? (
|
||||||
<button className="btn btn-primary" onClick={handleNext} disabled={!canGoNext()}>
|
<button className="btn btn-primary" onClick={handleNext} disabled={!canGoNext()}>
|
||||||
下一步 <ArrowRight size={16} />
|
下一步 <ArrowRight size={16} />
|
||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<button className="btn btn-primary" onClick={handleConnect} disabled={isConnecting || !canGoNext()}>
|
<button className="btn btn-primary" onClick={handleConnect} disabled={isConnecting || !canGoNext()}>
|
||||||
{isConnecting ? '连接中...' : '测试并完成'}
|
{isConnecting ? '连接中...' : '完成配置'} <ArrowRight size={16} />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -561,4 +792,3 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default WelcomePage
|
export default WelcomePage
|
||||||
|
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ export const CONFIG_KEYS = {
|
|||||||
DECRYPT_KEY: 'decryptKey',
|
DECRYPT_KEY: 'decryptKey',
|
||||||
DB_PATH: 'dbPath',
|
DB_PATH: 'dbPath',
|
||||||
MY_WXID: 'myWxid',
|
MY_WXID: 'myWxid',
|
||||||
|
WXID_CONFIGS: 'wxidConfigs',
|
||||||
THEME: 'theme',
|
THEME: 'theme',
|
||||||
THEME_ID: 'themeId',
|
THEME_ID: 'themeId',
|
||||||
LAST_SESSION: 'lastSession',
|
LAST_SESSION: 'lastSession',
|
||||||
@@ -22,9 +23,28 @@ export const CONFIG_KEYS = {
|
|||||||
WHISPER_MODEL_DIR: 'whisperModelDir',
|
WHISPER_MODEL_DIR: 'whisperModelDir',
|
||||||
WHISPER_DOWNLOAD_SOURCE: 'whisperDownloadSource',
|
WHISPER_DOWNLOAD_SOURCE: 'whisperDownloadSource',
|
||||||
AUTO_TRANSCRIBE_VOICE: 'autoTranscribeVoice',
|
AUTO_TRANSCRIBE_VOICE: 'autoTranscribeVoice',
|
||||||
TRANSCRIBE_LANGUAGES: 'transcribeLanguages'
|
TRANSCRIBE_LANGUAGES: 'transcribeLanguages',
|
||||||
|
EXPORT_DEFAULT_FORMAT: 'exportDefaultFormat',
|
||||||
|
EXPORT_DEFAULT_DATE_RANGE: 'exportDefaultDateRange',
|
||||||
|
EXPORT_DEFAULT_MEDIA: 'exportDefaultMedia',
|
||||||
|
EXPORT_DEFAULT_VOICE_AS_TEXT: 'exportDefaultVoiceAsText',
|
||||||
|
EXPORT_DEFAULT_EXCEL_COMPACT_COLUMNS: 'exportDefaultExcelCompactColumns',
|
||||||
|
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 {
|
||||||
|
decryptKey?: string
|
||||||
|
imageXorKey?: number
|
||||||
|
imageAesKey?: string
|
||||||
|
updatedAt?: number
|
||||||
|
}
|
||||||
|
|
||||||
// 获取解密密钥
|
// 获取解密密钥
|
||||||
export async function getDecryptKey(): Promise<string | null> {
|
export async function getDecryptKey(): Promise<string | null> {
|
||||||
const value = await config.get(CONFIG_KEYS.DECRYPT_KEY)
|
const value = await config.get(CONFIG_KEYS.DECRYPT_KEY)
|
||||||
@@ -58,6 +78,32 @@ export async function setMyWxid(wxid: string): Promise<void> {
|
|||||||
await config.set(CONFIG_KEYS.MY_WXID, wxid)
|
await config.set(CONFIG_KEYS.MY_WXID, wxid)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function getWxidConfigs(): Promise<Record<string, WxidConfig>> {
|
||||||
|
const value = await config.get(CONFIG_KEYS.WXID_CONFIGS)
|
||||||
|
if (value && typeof value === 'object') {
|
||||||
|
return value as Record<string, WxidConfig>
|
||||||
|
}
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getWxidConfig(wxid: string): Promise<WxidConfig | null> {
|
||||||
|
if (!wxid) return null
|
||||||
|
const configs = await getWxidConfigs()
|
||||||
|
return configs[wxid] || null
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function setWxidConfig(wxid: string, configValue: WxidConfig): Promise<void> {
|
||||||
|
if (!wxid) return
|
||||||
|
const configs = await getWxidConfigs()
|
||||||
|
const previous = configs[wxid] || {}
|
||||||
|
configs[wxid] = {
|
||||||
|
...previous,
|
||||||
|
...configValue,
|
||||||
|
updatedAt: Date.now()
|
||||||
|
}
|
||||||
|
await config.set(CONFIG_KEYS.WXID_CONFIGS, configs)
|
||||||
|
}
|
||||||
|
|
||||||
// 获取主题
|
// 获取主题
|
||||||
export async function getTheme(): Promise<'light' | 'dark'> {
|
export async function getTheme(): Promise<'light' | 'dark'> {
|
||||||
const value = await config.get(CONFIG_KEYS.THEME)
|
const value = await config.get(CONFIG_KEYS.THEME)
|
||||||
@@ -243,3 +289,113 @@ export async function getTranscribeLanguages(): Promise<string[]> {
|
|||||||
export async function setTranscribeLanguages(languages: string[]): Promise<void> {
|
export async function setTranscribeLanguages(languages: string[]): Promise<void> {
|
||||||
await config.set(CONFIG_KEYS.TRANSCRIBE_LANGUAGES, languages)
|
await config.set(CONFIG_KEYS.TRANSCRIBE_LANGUAGES, languages)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取导出默认格式
|
||||||
|
export async function getExportDefaultFormat(): Promise<string | null> {
|
||||||
|
const value = await config.get(CONFIG_KEYS.EXPORT_DEFAULT_FORMAT)
|
||||||
|
return (value as string) || null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置导出默认格式
|
||||||
|
export async function setExportDefaultFormat(format: string): Promise<void> {
|
||||||
|
await config.set(CONFIG_KEYS.EXPORT_DEFAULT_FORMAT, format)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取导出默认时间范围
|
||||||
|
export async function getExportDefaultDateRange(): Promise<string | null> {
|
||||||
|
const value = await config.get(CONFIG_KEYS.EXPORT_DEFAULT_DATE_RANGE)
|
||||||
|
return (value as string) || null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置导出默认时间范围
|
||||||
|
export async function setExportDefaultDateRange(range: string): Promise<void> {
|
||||||
|
await config.set(CONFIG_KEYS.EXPORT_DEFAULT_DATE_RANGE, range)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取导出默认媒体设置
|
||||||
|
export async function getExportDefaultMedia(): Promise<boolean | null> {
|
||||||
|
const value = await config.get(CONFIG_KEYS.EXPORT_DEFAULT_MEDIA)
|
||||||
|
if (typeof value === 'boolean') return value
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置导出默认媒体设置
|
||||||
|
export async function setExportDefaultMedia(enabled: boolean): Promise<void> {
|
||||||
|
await config.set(CONFIG_KEYS.EXPORT_DEFAULT_MEDIA, enabled)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取导出默认语音转文字
|
||||||
|
export async function getExportDefaultVoiceAsText(): Promise<boolean | null> {
|
||||||
|
const value = await config.get(CONFIG_KEYS.EXPORT_DEFAULT_VOICE_AS_TEXT)
|
||||||
|
if (typeof value === 'boolean') return value
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置导出默认语音转文字
|
||||||
|
export async function setExportDefaultVoiceAsText(enabled: boolean): Promise<void> {
|
||||||
|
await config.set(CONFIG_KEYS.EXPORT_DEFAULT_VOICE_AS_TEXT, enabled)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取导出默认 Excel 列模式
|
||||||
|
export async function getExportDefaultExcelCompactColumns(): Promise<boolean | null> {
|
||||||
|
const value = await config.get(CONFIG_KEYS.EXPORT_DEFAULT_EXCEL_COMPACT_COLUMNS)
|
||||||
|
if (typeof value === 'boolean') return value
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置导出默认 Excel 列模式
|
||||||
|
export async function setExportDefaultExcelCompactColumns(enabled: boolean): Promise<void> {
|
||||||
|
await config.set(CONFIG_KEYS.EXPORT_DEFAULT_EXCEL_COMPACT_COLUMNS, enabled)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取导出默认 TXT 列配置
|
||||||
|
export async function getExportDefaultTxtColumns(): Promise<string[] | null> {
|
||||||
|
const value = await config.get(CONFIG_KEYS.EXPORT_DEFAULT_TXT_COLUMNS)
|
||||||
|
return Array.isArray(value) ? (value as string[]) : null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置导出默认 TXT 列配置
|
||||||
|
export async function setExportDefaultTxtColumns(columns: string[]): Promise<void> {
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,15 +5,38 @@ export interface AppState {
|
|||||||
isDbConnected: boolean
|
isDbConnected: boolean
|
||||||
dbPath: string | null
|
dbPath: string | null
|
||||||
myWxid: string | null
|
myWxid: string | null
|
||||||
|
|
||||||
// 加载状态
|
// 加载状态
|
||||||
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
|
||||||
|
|
||||||
|
// 锁定状态
|
||||||
|
isLocked: boolean
|
||||||
|
setLocked: (locked: boolean) => void
|
||||||
|
|
||||||
reset: () => void
|
reset: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -23,24 +46,46 @@ export const useAppStore = create<AppState>((set) => ({
|
|||||||
myWxid: null,
|
myWxid: null,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
loadingText: '',
|
loadingText: '',
|
||||||
|
isLocked: false,
|
||||||
|
|
||||||
setDbConnected: (connected, path) => set({
|
// 更新状态初始化
|
||||||
isDbConnected: connected,
|
updateInfo: null,
|
||||||
dbPath: path ?? null
|
isDownloading: false,
|
||||||
|
downloadProgress: { percent: 0 },
|
||||||
|
showUpdateDialog: false,
|
||||||
|
updateError: null,
|
||||||
|
|
||||||
|
setDbConnected: (connected, path) => set({
|
||||||
|
isDbConnected: connected,
|
||||||
|
dbPath: path ?? null
|
||||||
}),
|
}),
|
||||||
|
|
||||||
setMyWxid: (wxid) => set({ myWxid: wxid }),
|
setMyWxid: (wxid) => set({ myWxid: wxid }),
|
||||||
|
|
||||||
setLoading: (loading, text) => set({
|
setLoading: (loading, text) => set({
|
||||||
isLoading: loading,
|
isLoading: loading,
|
||||||
loadingText: text ?? ''
|
loadingText: text ?? ''
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
setLocked: (locked) => set({ isLocked: locked }),
|
||||||
|
|
||||||
|
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: '',
|
||||||
|
isLocked: false,
|
||||||
|
updateInfo: null,
|
||||||
|
isDownloading: false,
|
||||||
|
downloadProgress: { percent: 0 },
|
||||||
|
showUpdateDialog: false,
|
||||||
|
updateError: null
|
||||||
})
|
})
|
||||||
}))
|
}))
|
||||||
|
|||||||
@@ -6,25 +6,26 @@ export interface ChatState {
|
|||||||
isConnected: boolean
|
isConnected: boolean
|
||||||
isConnecting: boolean
|
isConnecting: boolean
|
||||||
connectionError: string | null
|
connectionError: string | null
|
||||||
|
|
||||||
// 会话列表
|
// 会话列表
|
||||||
sessions: ChatSession[]
|
sessions: ChatSession[]
|
||||||
filteredSessions: ChatSession[]
|
filteredSessions: ChatSession[]
|
||||||
currentSessionId: string | null
|
currentSessionId: string | null
|
||||||
isLoadingSessions: boolean
|
isLoadingSessions: boolean
|
||||||
|
|
||||||
// 消息
|
// 消息
|
||||||
messages: Message[]
|
messages: Message[]
|
||||||
isLoadingMessages: boolean
|
isLoadingMessages: boolean
|
||||||
isLoadingMore: boolean
|
isLoadingMore: boolean
|
||||||
hasMoreMessages: boolean
|
hasMoreMessages: boolean
|
||||||
|
hasMoreLater: boolean
|
||||||
|
|
||||||
// 联系人缓存
|
// 联系人缓存
|
||||||
contacts: Map<string, Contact>
|
contacts: Map<string, Contact>
|
||||||
|
|
||||||
// 搜索
|
// 搜索
|
||||||
searchKeyword: string
|
searchKeyword: string
|
||||||
|
|
||||||
// 操作
|
// 操作
|
||||||
setConnected: (connected: boolean) => void
|
setConnected: (connected: boolean) => void
|
||||||
setConnecting: (connecting: boolean) => void
|
setConnecting: (connecting: boolean) => void
|
||||||
@@ -38,6 +39,7 @@ export interface ChatState {
|
|||||||
setLoadingMessages: (loading: boolean) => void
|
setLoadingMessages: (loading: boolean) => void
|
||||||
setLoadingMore: (loading: boolean) => void
|
setLoadingMore: (loading: boolean) => void
|
||||||
setHasMoreMessages: (hasMore: boolean) => void
|
setHasMoreMessages: (hasMore: boolean) => void
|
||||||
|
setHasMoreLater: (hasMore: boolean) => void
|
||||||
setContacts: (contacts: Contact[]) => void
|
setContacts: (contacts: Contact[]) => void
|
||||||
addContact: (contact: Contact) => void
|
addContact: (contact: Contact) => void
|
||||||
setSearchKeyword: (keyword: string) => void
|
setSearchKeyword: (keyword: string) => void
|
||||||
@@ -56,48 +58,51 @@ export const useChatStore = create<ChatState>((set, get) => ({
|
|||||||
isLoadingMessages: false,
|
isLoadingMessages: false,
|
||||||
isLoadingMore: false,
|
isLoadingMore: false,
|
||||||
hasMoreMessages: true,
|
hasMoreMessages: true,
|
||||||
|
hasMoreLater: false,
|
||||||
contacts: new Map(),
|
contacts: new Map(),
|
||||||
searchKeyword: '',
|
searchKeyword: '',
|
||||||
|
|
||||||
setConnected: (connected) => set({ isConnected: connected }),
|
setConnected: (connected) => set({ isConnected: connected }),
|
||||||
setConnecting: (connecting) => set({ isConnecting: connecting }),
|
setConnecting: (connecting) => set({ isConnecting: connecting }),
|
||||||
setConnectionError: (error) => set({ connectionError: error }),
|
setConnectionError: (error) => set({ connectionError: error }),
|
||||||
|
|
||||||
setSessions: (sessions) => set({ sessions, filteredSessions: sessions }),
|
setSessions: (sessions) => set({ sessions, filteredSessions: sessions }),
|
||||||
setFilteredSessions: (sessions) => set({ filteredSessions: sessions }),
|
setFilteredSessions: (sessions) => set({ filteredSessions: sessions }),
|
||||||
|
|
||||||
setCurrentSession: (sessionId) => set({
|
setCurrentSession: (sessionId) => set({
|
||||||
currentSessionId: sessionId,
|
currentSessionId: sessionId,
|
||||||
messages: [],
|
messages: [],
|
||||||
hasMoreMessages: true
|
hasMoreMessages: true,
|
||||||
|
hasMoreLater: false
|
||||||
}),
|
}),
|
||||||
|
|
||||||
setLoadingSessions: (loading) => set({ isLoadingSessions: loading }),
|
setLoadingSessions: (loading) => set({ isLoadingSessions: loading }),
|
||||||
|
|
||||||
setMessages: (messages) => set({ messages }),
|
setMessages: (messages) => set({ messages }),
|
||||||
|
|
||||||
appendMessages: (newMessages, prepend = false) => set((state) => ({
|
appendMessages: (newMessages, prepend = false) => set((state) => ({
|
||||||
messages: prepend
|
messages: prepend
|
||||||
? [...newMessages, ...state.messages]
|
? [...newMessages, ...state.messages]
|
||||||
: [...state.messages, ...newMessages]
|
: [...state.messages, ...newMessages]
|
||||||
})),
|
})),
|
||||||
|
|
||||||
setLoadingMessages: (loading) => set({ isLoadingMessages: loading }),
|
setLoadingMessages: (loading) => set({ isLoadingMessages: loading }),
|
||||||
setLoadingMore: (loading) => set({ isLoadingMore: loading }),
|
setLoadingMore: (loading) => set({ isLoadingMore: loading }),
|
||||||
setHasMoreMessages: (hasMore) => set({ hasMoreMessages: hasMore }),
|
setHasMoreMessages: (hasMore) => set({ hasMoreMessages: hasMore }),
|
||||||
|
setHasMoreLater: (hasMore) => set({ hasMoreLater: hasMore }),
|
||||||
setContacts: (contacts) => set({
|
|
||||||
contacts: new Map(contacts.map(c => [c.username, c]))
|
setContacts: (contacts) => set({
|
||||||
|
contacts: new Map(contacts.map(c => [c.username, c]))
|
||||||
}),
|
}),
|
||||||
|
|
||||||
addContact: (contact) => set((state) => {
|
addContact: (contact) => set((state) => {
|
||||||
const newContacts = new Map(state.contacts)
|
const newContacts = new Map(state.contacts)
|
||||||
newContacts.set(contact.username, contact)
|
newContacts.set(contact.username, contact)
|
||||||
return { contacts: newContacts }
|
return { contacts: newContacts }
|
||||||
}),
|
}),
|
||||||
|
|
||||||
setSearchKeyword: (keyword) => set({ searchKeyword: keyword }),
|
setSearchKeyword: (keyword) => set({ searchKeyword: keyword }),
|
||||||
|
|
||||||
reset: () => set({
|
reset: () => set({
|
||||||
isConnected: false,
|
isConnected: false,
|
||||||
isConnecting: false,
|
isConnecting: false,
|
||||||
@@ -110,6 +115,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
|
|||||||
isLoadingMessages: false,
|
isLoadingMessages: false,
|
||||||
isLoadingMore: false,
|
isLoadingMore: false,
|
||||||
hasMoreMessages: true,
|
hasMoreMessages: true,
|
||||||
|
hasMoreLater: false,
|
||||||
contacts: new Map(),
|
contacts: new Map(),
|
||||||
searchKeyword: ''
|
searchKeyword: ''
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -8,33 +8,33 @@
|
|||||||
--primary-light: rgba(139, 115, 85, 0.1);
|
--primary-light: rgba(139, 115, 85, 0.1);
|
||||||
--danger: #dc3545;
|
--danger: #dc3545;
|
||||||
--warning: #ffc107;
|
--warning: #ffc107;
|
||||||
|
|
||||||
// 背景
|
// 背景
|
||||||
--bg-primary: #F0EEE9;
|
--bg-primary: #F0EEE9;
|
||||||
--bg-secondary: rgba(255, 255, 255, 0.7);
|
--bg-secondary: rgba(255, 255, 255, 0.7);
|
||||||
--bg-tertiary: rgba(0, 0, 0, 0.03);
|
--bg-tertiary: rgba(0, 0, 0, 0.03);
|
||||||
--bg-hover: rgba(0, 0, 0, 0.05);
|
--bg-hover: rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
// 文字
|
// 文字
|
||||||
--text-primary: #3d3d3d;
|
--text-primary: #3d3d3d;
|
||||||
--text-secondary: #666666;
|
--text-secondary: #666666;
|
||||||
--text-tertiary: #999999;
|
--text-tertiary: #999999;
|
||||||
|
|
||||||
// 边框
|
// 边框
|
||||||
--border-color: rgba(0, 0, 0, 0.08);
|
--border-color: rgba(0, 0, 0, 0.08);
|
||||||
--border-radius: 9999px;
|
--border-radius: 9999px;
|
||||||
|
|
||||||
// 阴影
|
// 阴影
|
||||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
// 侧边栏
|
// 侧边栏
|
||||||
--sidebar-width: 220px;
|
--sidebar-width: 220px;
|
||||||
|
|
||||||
// 主题渐变
|
// 主题渐变
|
||||||
--bg-gradient: linear-gradient(135deg, #F0EEE9 0%, #E8E6E1 100%);
|
--bg-gradient: linear-gradient(135deg, #F0EEE9 0%, #E8E6E1 100%);
|
||||||
--primary-gradient: linear-gradient(135deg, #8B7355 0%, #A68B5B 100%);
|
--primary-gradient: linear-gradient(135deg, #8B7355 0%, #A68B5B 100%);
|
||||||
|
|
||||||
// 卡片背景
|
// 卡片背景
|
||||||
--card-bg: rgba(255, 255, 255, 0.7);
|
--card-bg: rgba(255, 255, 255, 0.7);
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
@@ -263,7 +264,7 @@ html, body {
|
|||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: var(--text-tertiary);
|
background: var(--text-tertiary);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--text-secondary);
|
background: var(--text-secondary);
|
||||||
}
|
}
|
||||||
@@ -280,20 +281,20 @@ html, body {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
&-primary {
|
&-primary {
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--primary-hover);
|
background: var(--primary-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-secondary {
|
&-secondary {
|
||||||
background: var(--bg-tertiary);
|
background: var(--bg-tertiary);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--border-color);
|
background: var(--border-color);
|
||||||
}
|
}
|
||||||
@@ -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: '系统消息',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
95
src/types/electron.d.ts
vendored
95
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: {
|
||||||
@@ -9,6 +9,9 @@ export interface ElectronAPI {
|
|||||||
completeOnboarding: () => Promise<boolean>
|
completeOnboarding: () => Promise<boolean>
|
||||||
openOnboardingWindow: () => Promise<boolean>
|
openOnboardingWindow: () => Promise<boolean>
|
||||||
setTitleBarOverlay: (options: { symbolColor: string }) => void
|
setTitleBarOverlay: (options: { symbolColor: string }) => void
|
||||||
|
openVideoPlayerWindow: (videoPath: string, 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>
|
||||||
@@ -39,6 +42,7 @@ export interface ElectronAPI {
|
|||||||
dbPath: {
|
dbPath: {
|
||||||
autoDetect: () => Promise<{ success: boolean; path?: string; error?: string }>
|
autoDetect: () => Promise<{ success: boolean; path?: string; error?: string }>
|
||||||
scanWxids: (rootPath: string) => Promise<WxidInfo[]>
|
scanWxids: (rootPath: string) => Promise<WxidInfo[]>
|
||||||
|
scanWxidCandidates: (rootPath: string) => Promise<WxidInfo[]>
|
||||||
getDefault: () => Promise<string>
|
getDefault: () => Promise<string>
|
||||||
}
|
}
|
||||||
wcdb: {
|
wcdb: {
|
||||||
@@ -61,7 +65,7 @@ export interface ElectronAPI {
|
|||||||
contacts?: Record<string, { displayName?: string; avatarUrl?: string }>
|
contacts?: Record<string, { displayName?: string; avatarUrl?: string }>
|
||||||
error?: string
|
error?: string
|
||||||
}>
|
}>
|
||||||
getMessages: (sessionId: string, offset?: number, limit?: number) => Promise<{
|
getMessages: (sessionId: string, offset?: number, limit?: number, startTime?: number, endTime?: number, ascending?: boolean) => Promise<{
|
||||||
success: boolean;
|
success: boolean;
|
||||||
messages?: Message[];
|
messages?: Message[];
|
||||||
hasMore?: boolean;
|
hasMore?: boolean;
|
||||||
@@ -74,6 +78,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>
|
||||||
@@ -96,8 +105,10 @@ export interface ElectronAPI {
|
|||||||
getImageData: (sessionId: string, msgId: string) => Promise<{ success: boolean; data?: string; error?: string }>
|
getImageData: (sessionId: string, msgId: string) => Promise<{ success: boolean; data?: string; error?: string }>
|
||||||
getVoiceData: (sessionId: string, msgId: string, createTime?: number, serverId?: string | number) => Promise<{ success: boolean; data?: string; error?: string }>
|
getVoiceData: (sessionId: string, msgId: string, createTime?: number, serverId?: string | number) => Promise<{ success: boolean; data?: string; error?: string }>
|
||||||
resolveVoiceCache: (sessionId: string, msgId: string) => Promise<{ success: boolean; hasCache: boolean; data?: string }>
|
resolveVoiceCache: (sessionId: string, msgId: string) => Promise<{ success: boolean; hasCache: boolean; data?: string }>
|
||||||
getVoiceTranscript: (sessionId: string, msgId: string) => 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 }>
|
||||||
|
getMessage: (sessionId: string, localId: number) => Promise<{ success: boolean; message?: Message; error?: string }>
|
||||||
}
|
}
|
||||||
|
|
||||||
image: {
|
image: {
|
||||||
@@ -107,6 +118,21 @@ export interface ElectronAPI {
|
|||||||
onUpdateAvailable: (callback: (payload: { cacheKey: string; imageMd5?: string; imageDatName?: string }) => void) => () => void
|
onUpdateAvailable: (callback: (payload: { cacheKey: string; imageMd5?: string; imageDatName?: string }) => void) => () => void
|
||||||
onCacheResolved: (callback: (payload: { cacheKey: string; imageMd5?: string; imageDatName?: string; localPath: string }) => void) => () => void
|
onCacheResolved: (callback: (payload: { cacheKey: string; imageMd5?: string; imageDatName?: string; localPath: string }) => void) => () => void
|
||||||
}
|
}
|
||||||
|
video: {
|
||||||
|
getVideoInfo: (videoMd5: string) => Promise<{
|
||||||
|
success: boolean
|
||||||
|
exists: boolean
|
||||||
|
videoUrl?: string
|
||||||
|
coverUrl?: string
|
||||||
|
thumbUrl?: string
|
||||||
|
error?: string
|
||||||
|
}>
|
||||||
|
parseVideoMd5: (content: string) => Promise<{
|
||||||
|
success: boolean
|
||||||
|
md5?: string
|
||||||
|
error?: string
|
||||||
|
}>
|
||||||
|
}
|
||||||
analytics: {
|
analytics: {
|
||||||
getOverallStatistics: (force?: boolean) => Promise<{
|
getOverallStatistics: (force?: boolean) => Promise<{
|
||||||
success: boolean
|
success: boolean
|
||||||
@@ -207,6 +233,11 @@ export interface ElectronAPI {
|
|||||||
}
|
}
|
||||||
error?: string
|
error?: string
|
||||||
}>
|
}>
|
||||||
|
exportGroupMembers: (chatroomId: string, outputPath: string) => Promise<{
|
||||||
|
success: boolean
|
||||||
|
count?: number
|
||||||
|
error?: string
|
||||||
|
}>
|
||||||
}
|
}
|
||||||
annualReport: {
|
annualReport: {
|
||||||
getAvailableYears: () => Promise<{
|
getAvailableYears: () => Promise<{
|
||||||
@@ -297,12 +328,54 @@ 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
|
||||||
}
|
}
|
||||||
whisper: {
|
whisper: {
|
||||||
downloadModel: () => Promise<{ success: boolean; modelPath?: string; tokensPath?: string; error?: string }>
|
downloadModel: () => Promise<{ success: boolean; modelPath?: string; tokensPath?: string; error?: string }>
|
||||||
getModelStatus: () => Promise<{ success: boolean; exists?: boolean; modelPath?: string; tokensPath?: string; sizeBytes?: number; error?: string }>
|
getModelStatus: () => Promise<{ success: boolean; exists?: boolean; modelPath?: string; tokensPath?: string; sizeBytes?: number; error?: string }>
|
||||||
onDownloadProgress: (callback: (payload: { modelName: string; downloadedBytes: number; totalBytes?: number; percent?: number }) => void) => () => void
|
onDownloadProgress: (callback: (payload: { modelName: string; downloadedBytes: number; totalBytes?: number; percent?: number }) => void) => () => void
|
||||||
}
|
}
|
||||||
|
sns: {
|
||||||
|
getTimeline: (limit: number, offset: number, usernames?: string[], keyword?: string, startTime?: number, endTime?: number) => Promise<{
|
||||||
|
success: boolean
|
||||||
|
timeline?: Array<{
|
||||||
|
id: string
|
||||||
|
username: string
|
||||||
|
nickname: string
|
||||||
|
avatarUrl?: string
|
||||||
|
createTime: number
|
||||||
|
contentDesc: string
|
||||||
|
type?: number
|
||||||
|
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>
|
||||||
|
comments: Array<{ id: string; nickname: string; content: string; refCommentId: string; refNickname?: string }>
|
||||||
|
rawXml?: 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 }>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ExportOptions {
|
export interface ExportOptions {
|
||||||
@@ -310,6 +383,22 @@ export interface ExportOptions {
|
|||||||
dateRange?: { start: number; end: number } | null
|
dateRange?: { start: number; end: number } | null
|
||||||
exportMedia?: boolean
|
exportMedia?: boolean
|
||||||
exportAvatars?: boolean
|
exportAvatars?: boolean
|
||||||
|
exportImages?: boolean
|
||||||
|
exportVoices?: boolean
|
||||||
|
exportEmojis?: boolean
|
||||||
|
exportVoiceAsText?: boolean
|
||||||
|
excelCompactColumns?: boolean
|
||||||
|
txtColumns?: string[]
|
||||||
|
sessionLayout?: 'shared' | 'per-session'
|
||||||
|
displayNamePreference?: 'group-nickname' | 'remark' | 'nickname'
|
||||||
|
exportConcurrency?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ExportProgress {
|
||||||
|
current: number
|
||||||
|
total: number
|
||||||
|
currentSession: string
|
||||||
|
phase: 'preparing' | 'exporting' | 'writing' | 'complete'
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface WxidInfo {
|
export interface WxidInfo {
|
||||||
|
|||||||
@@ -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
|
||||||
@@ -33,16 +42,55 @@ export interface Message {
|
|||||||
isSend: number | null
|
isSend: number | null
|
||||||
senderUsername: string | null
|
senderUsername: string | null
|
||||||
parsedContent: string
|
parsedContent: string
|
||||||
|
rawContent?: string // 原始消息内容(保留用于兼容)
|
||||||
|
content?: string // 原始消息内容(XML)
|
||||||
imageMd5?: string
|
imageMd5?: string
|
||||||
imageDatName?: string
|
imageDatName?: string
|
||||||
emojiCdnUrl?: string
|
emojiCdnUrl?: string
|
||||||
emojiMd5?: string
|
emojiMd5?: string
|
||||||
voiceDurationSeconds?: number
|
voiceDurationSeconds?: number
|
||||||
|
videoMd5?: string
|
||||||
// 引用消息
|
// 引用消息
|
||||||
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
|
||||||
|
|||||||
13
src/vite-env.d.ts
vendored
13
src/vite-env.d.ts
vendored
@@ -1 +1,14 @@
|
|||||||
/// <reference types="vite/client" />
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
interface Window {
|
||||||
|
electronAPI: {
|
||||||
|
// ... other methods ...
|
||||||
|
auth: {
|
||||||
|
hello: (message?: string) => Promise<{ success: boolean; error?: string }>
|
||||||
|
}
|
||||||
|
// For brevity, using 'any' for other parts or properly importing types if available.
|
||||||
|
// In a real scenario, you'd likely want to keep the full interface definition consistent with preload.ts
|
||||||
|
// or import a shared type definition.
|
||||||
|
[key: string]: any
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user