feat: 重构README 新增引导功能

This commit is contained in:
Wxw-Gu
2026-07-31 11:26:23 +08:00
parent 77adc744e0
commit f0601cdc85
16 changed files with 1156 additions and 164 deletions
+337 -83
View File
@@ -1,145 +1,310 @@
# WechatExplorer # WechatExplorer
macOS / Windows 微信聊天记录查看与 AI 分析工具。 <p align="center">
是一个基于 Electron + React + TypeScript 开发的本地微信聊天记录查看与分析工具。它支持查看解密后的微信数据库内容,提供 AI 智能检索、群聊总结和多格式聊天记录导出功能。 <img src="./build/icon.png" width="120" alt="WechatExplorer Logo" />
</p>
## 项目说明 <h2 align="center">让 AI 读懂你的微信</h2>
本项目的目标,是在自己的电脑上实现“本地查看微信聊天记录 + 一键生成群聊总结”的实用能力。 <p align="center">
本地优先的 AI 微信助手<br />
聊天记录查看 · AI 问问微信 · 群聊日报 · Agent · 本地 API
</p>
在微信 4.0 数据库解析、解密思路上,项目参考了 [WeFlow](https://github.com/hicccc77/WeFlow) 等开源项目的实现方式;此项目围绕我自己的使用场景做的定制化工具,重点放在本地聊天记录查看、群聊总结和个人工作流集成上。 <p align="center">
<img src="https://img.shields.io/github/stars/Wxw-Gu/WechatExplorer?style=for-the-badge" alt="GitHub stars" />
<img src="https://img.shields.io/github/downloads/Wxw-Gu/WechatExplorer/total?style=for-the-badge" alt="GitHub downloads" />
<img src="https://img.shields.io/github/v/release/Wxw-Gu/WechatExplorer?style=for-the-badge" alt="Latest release" />
</p>
> macOS 支持相对稳定;Windows 已初步支持 但因聊天记录大/机械硬盘等问题 会有所卡顿,仍在持续兼容不同微信版本与本地目录结构。 <p align="center">
<a href="https://github.com/Wxw-Gu/WechatExplorer/releases"><b>📦 下载最新版</b></a>
·
<a href="./docs/user-guide/getting-started.md"><b>🚀 第一次使用</b></a>
·
<a href="./docs/user-guide/getting-started.md#遇到问题"><b>📖 使用说明</b></a>
</p>
## ✨ 功能特性 > ⭐ 如果这个项目帮助到了你,欢迎点一个 Star,支持项目持续更新。
- **聊天记录查看**: 浏览微信好友和群聊的聊天记录,支持头像显示。 <p align="center">
- **AI 智能检索**: 支持全局搜索、指定会话搜索和自然语言提问,帮助快速定位聊天主题与相关证据。 <img src="./public/software-1.png" alt="WechatExplorer AI 微信助手界面" />
- **消息防撤回**: 可在设置中开启,归档并高亮查看对方已撤回消息。 </p>
- **AI 智能总结**: 支持多模型服务配置(DeepSeek/GPT-4o/Claude/Moonshot),一键总结群聊精华内容,生成话题报告。
- **群聊日报生成**: 支持围绕群聊内容生成日报,通常会覆盖以下模块中的部分或全部内容:
- **今日讨论热点**: 梳理群内主要话题,支持热度标签。
- **一句话速览**: 首屏突出今日核心结论与待跟进事项。
- **实用信息与资源**: 提取分享的链接、资源等信息。
- **重要消息汇总**: 标记并展示重要消息,带发送者头像。
- **有趣对话或金句**: 收录群内的精彩对话。
- **问题与解答**: 整理群内的问答内容。
- **尚未解决 / 今日剧情线**: 更适合工作群和项目群的回顾与跟进。
- **今日群相册 / 语音时长榜 / 临时群友称号**: 让图片、语音和氛围型内容也能参与日报。
- **群内数据可视化**: 消息热度条形图、话唠榜 TOP5、活跃时间线。
- **词云/关键词**: 可视化展示群聊关键词。
- **图片生成**: 将 AI 总结的内容生成精美图片,方便分享。
- **数据导出**: 支持将聊天记录导出为 HTML、CSV、JSON 和 Markdown,支持按时间范围导出并打开文件所在文件夹。
- **诊断日志**: 可在设置的高级选项中控制诊断日志,方便排查运行异常。
- **安全隐私**: 所有数据仅在本地处理,AI 功能需自行配置 API Key。
## 📸 预览 > 像问 ChatGPT 一样,直接询问你的微信聊天记录。
### 日报模板 WechatExplorer 是一个基于 Electron + React + TypeScript 开发的本地优先 AI 微信助手。它不只是查看聊天记录,而是把聊天内容变成可以搜索、总结、分析和交给 Agent 使用的信息。
**支持:**
微信聊天记录查看、AI 微信助手、AI 群聊日报、MCP、Agent、本地 API
## ✨ 为什么选择 WechatExplorer
-**像 ChatGPT 一样搜索整个微信**:用自然语言提问,快速找到聊天上下文。
-**AI 自动生成群聊日报**:自动整理热点、资源、问答和待跟进事项。
-**Agent 可直接读取微信聊天**:支持 Codex、Claude Code、MCP 等 AI 工作流。
-**本地数据库优先**:聊天数据默认保存在本机,不会自动上传。
-**支持微信 3.x / 4.x**:不同微信版本提供对应版本支持。
-**多格式导出**:支持 HTML、Markdown、CSV 和 JSON。
## 🚀 第一次使用
软件已经内置完整的新手引导,通常按下面三步即可开始:
```text
下载软件
连接微信
开始问你的微信
```
首次启动会自动进入「第一次使用」页面。连接成功后,软件会显示「开始探索你的微信」;进入主界面后,还可以随时点击左下角「新手引导」重新查看。
## 📸 功能预览
### AI 群聊日报
<details> <details>
<summary>点击查看完整日报模板</summary> <summary>点击查看完整日报模板</summary>
<br /> <br />
<img src="./public/report-template-1.png" alt="完整日报模板" /> <img src="./public/report-template-1.png" alt="完整群聊日报模板" />
</details> </details>
### AI 群聊日报界面 ### AI 问问微信
<img src="./public/software-1.png" alt="AI 群聊日报页面" /> <img src="./public/ai-search.png" alt="AI 问问微信页面" />
### 检索界面 ### 本地 API 与 Agent
<img src="./public/ai-search.png" alt="检索页面" /> <img src="./public/software-2.png" alt="本地 API 与 Agent 页面" />
### 本地 API 与 Reader Skill ## 🎯 它能帮你做什么
<img src="./public/software-2.png" alt="本地 API 与 Reader Skill 页面" /> ### 🤖 AI 问问微信
## [点击这里下载](https://github.com/Wxw-Gu/WechatExplorer/releases) 直接向自己的微信提问:
## 📖 使用方法 > “去年我和老板聊过哪些关于涨薪的事情?”
>
> “技术群这周讨论了哪些问题?”
>
> “帮我找到张三发过的项目地址。”
安装、获取数据库密钥、连接微信数据及常见问题,请查看: ### 📰 AI 群聊日报
### [👉 WechatExplorer 完整使用教程](./docs/user-guide/getting-started.md) 选择一个群聊和时间范围,自动生成:
教程包含 macOS 与 Windows 的分步截图,以及数据目录、SIP、图片解密密钥和自动获取失败的排查方法。 - ✅ 今日热点
- ✅ 一句话总结
- ✅ 资源汇总
- ✅ 问答整理
- ✅ 活跃榜
- ✅ 词云与关键词
> 微信 4.0+ 在 macOS / Windows 上已支持部分能力,目前仍在持续适配。如需其他成熟方案,也可参考 [WeFlow](https://github.com/hicccc77/WeFlow) 和 [Chatlog](https://github.com/sjzar/chatlog)。 <details>
<summary>展开查看日报的完整模块</summary>
## 🛠️ 开发配置(可选) - **今日讨论热点**:梳理群内主要话题,支持热度标签。
- **一句话速览**:首屏突出今日核心结论与待跟进事项。
- **实用信息与资源**:提取分享的链接、资源等信息。
- **重要消息汇总**:标记并展示重要消息,带发送者头像。
- **有趣对话或金句**:收录群内的精彩对话。
- **问题与解答**:整理群内的问答内容。
- **尚未解决 / 今日剧情线**:适合工作群和项目群的回顾与跟进。
- **今日群相册 / 语音时长榜 / 临时群友称号**:让图片、语音和氛围型内容也能参与日报。
- **群内数据可视化**:消息热度条形图、话唠榜 TOP5、活跃时间线。
- **词云 / 关键词**:可视化展示群聊关键词。
</details>
本地开发需要 Node.js(推荐 v16+)和 pnpm 7 支持导出 HTML 与 PNG,也支持图片理解和图片生成
### 环境变量 ### 📂 查看聊天
可选配置项,可在 `.env` 文件中设置;本地开发时运行 `pnpm dev` 会在 `.env` 不存在时自动从 `.env.example` 复制一份。成品用户也可以直接在软件“设置”里填写或自动获取图片解密密钥。 浏览微信好友和群聊的聊天记录,支持查看:
| 变量名 | 说明 | 示例 | - 文本
| ----------------------- | --------------------------- | --------------------------- | - 图片
| `VITE_DB_KEY` | 微信数据库密钥 (32字节hex) | `YOUR_DB_KEY_HERE` | - 视频
| `VITE_IMAGE_XOR_KEY` | 图片解密 XOR 密钥 (hex格式) | `0x40` | - 语音
| `VITE_IMAGE_AES_KEY` | 图片解密 AES 密钥 (16字符) | `YOUR_AES_KEY_HERE` | - 文件
| `VITE_DEEPSEEK_API_KEY` | DeepSeek API Key | `sk-xxx` |
| `VITE_AI_BASE_URL` | AI API 地址 | `https://api.deepseek.com` |
| `VITE_AI_MODEL` | AI 模型 | `deepseek-chat` |
| `VITE_FILTER_MSG_TYPES` | 过滤的消息类型 | `分享消息,图片,表情包,视频` |
## 🤖 AI 集成(本地 HTTP API 同时支持头像显示、全局搜索、指定会话搜索、消息防撤回和上下文定位。
WechatExplorer 内置了一个本地 HTTP API 服务,默认监听 `127.0.0.1:6131`(纯本地,无鉴权),让你能够从 **Claude Desktop / Claude Code / Codex / curl / 任何脚本** 读取已经解锁的微信聊天记录。 ### 📤 导出聊天
支持按会话和时间范围导出聊天记录为 HTML、CSV、JSON 或 Markdown,并可以打开文件所在文件夹。
### 🤖 Agent
通过本地 HTTP API 和内置 Reader Skill,让 Codex、Claude Code 等 Agent 在本机服务运行并获得授权后读取、总结聊天数据。
## 🚀 规划与未来(Roadmap
WechatExplorer 仍在持续演进,未来会围绕 **AI 大模型 + 微信 + Agent** 持续完善能力。
下面是正在设计或计划中的部分功能(不代表发布时间)。
<details>
<summary>点击展开未来规划</summary>
### 🚧 人物镜像(Persona
根据长期聊天记录生成每个人的沟通画像:
- 兴趣标签
- 常聊话题
- 表达风格
- 个性化沟通参考
### 🚧 AI 长期记忆
让 AI 持续理解你的聊天历史,在不同时间跨度内建立上下文,支持长期事项追踪和连续对话。
### 🚧 微信卡片分享
将 AI 日报生成可点击的微信卡片消息,而不仅仅是图片,方便在群聊中传播与查看。
<p align="center">
<img src="./public/微信卡片分享.png" alt="微信卡片分享示例" width="520" />
</p>
### 🚧 退群自动监控
自动记录群聊成员变动:
- 谁加入群聊
- 谁退出群聊
- 变动发生的时间
- 群成员变动记录
<p align="center">
<img src="./public/退群监控.png" alt="退群自动监控示例" width="720" />
</p>
### 💡 更多 AI 能力
包括会议纪要、聊天知识库、长期事项追踪、个人成长分析等更多探索。
WechatExplorer 希望不仅仅是一个聊天记录查看工具,更希望成为一个能够理解、整理和协助管理微信信息的 AI 工作平台。
如果你有好的想法,欢迎提交 Issue 或 Pull Request,一起把它做得更好。
</details>
## ⚙️ 快速开始
### 下载并安装
从 [GitHub Releases](https://github.com/Wxw-Gu/WechatExplorer/releases) 下载对应系统的安装包:
- Windows:下载 `-setup.exe` 并按安装向导完成安装。
- macOS:下载 `.dmg`,将 WechatExplorer 拖入“应用程序”。首次打开若被系统拦截,请在“系统设置 → 隐私与安全性”中允许打开。
### 连接微信
按照软件内置的「第一次使用」引导完成连接:
1. 确认微信数据目录。
2. 让微信停在登录页面。
3. 点击“开始获取”,按提示完成连接。
Windows 已完整支持,不需要关闭 SIP。macOS 首次自动获取数据库密钥前,需要关闭 SIP 并完成系统授权。
### 配置 AI
进入「设置 → AI 模型」,添加模型服务商并填写 API Key,保存并测试成功后即可使用「问问微信」和「日报」。支持:
- OpenAI
- DeepSeek
- Claude
- Moonshot
- OpenAI 兼容接口
### 下一步
| 你想做什么 | 从哪里开始 |
| ----------------- | ---------------------------------------------------------------- |
| 重新查看连接步骤 | 点击左下角「新手引导」 |
| 直接向微信提问 | 打开「问问微信」 |
| 生成群聊日报 | 打开「日报」 |
| 浏览聊天记录 | 打开「档案」 |
| 导出聊天记录 | 打开「导出」 |
| 让 Agent 读取微信 | [Reader Skill 文档](./docs/skill/wechatexplorer-reader/SKILL.md) |
## 🖥️ 支持平台与微信版本
- **Windows**:已完整支持 Windows x64,不需要关闭 SIP。
- **macOS**:支持 Intel 和 Apple Silicon;首次自动获取数据库密钥前,需要关闭 SIP 并完成系统授权。
- **微信 3.0**:请使用 [v1.1.0 版本](https://github.com/Wxw-Gu/WechatExplorer/releases/tag/v1.1.0)。
- **微信 4.0**:使用当前 Releases 中的最新版。
不同微信版本、账号和数据目录可能存在差异,遇到连接问题时请优先参考 [使用说明](./docs/user-guide/getting-started.md)。
## 🔒 隐私与权限
- WechatExplorer 只读取你有权访问的本机微信数据。
- 不使用 AI 时,应用不会因为读取聊天记录而自动上传聊天内容。
- 使用 AI 问问微信、日报或图片理解时,相关内容会发送到你配置的模型服务。
- 本地 API 默认监听 `127.0.0.1`,无鉴权;请按可信网络范围配置。
- 消息防撤回、图片解密和数据库密钥等能力都应只用于你有权访问的数据。
## 🔌 高级能力:本地 HTTP API 与 Agent
<details>
<summary>展开本地 HTTP API、Reader Skill 和 Agent 说明</summary>
WechatExplorer 内置一个本地 HTTP API 服务,默认监听 `127.0.0.1:6131`,纯本地、无鉴权。完成数据库连接后,API 会自动启用。
### 启用本地 API ### 启用本地 API
API 服务在 WechatExplorer 启动时自动启用,**不需要任何配置**。只需要: 1. 安装并启动 WechatExplorer
2. 完成首次密钥配置,解锁 WCDB 数据库。
1. 安装并启动 WechatExplorer 3.`http://127.0.0.1:6131` 使用本地 API。
2. 完成首次密钥配置(主窗口第一步),解锁 WCDB 数据库
3. API 即在 `http://127.0.0.1:6131` 可用
### 7×24 提供 API(菜单栏常驻模式) ### 7×24 提供 API(菜单栏常驻模式)
默认情况下,关闭主窗口时 macOS 会让 app 继续运行,但 Windows / Linux 会退出。如果希望主窗口关闭后 API 服务仍可用,启用菜单栏模式: 默认情况下,关闭主窗口时 macOS 会让 app 继续运行,但 Windows / Linux 会退出。如果希望主窗口关闭后 API 服务仍可用,可以启用菜单栏模式:
```bash ```bash
# 任选一种方式
WXE_TRAY=1 open /Applications/WechatExplorer.app WXE_TRAY=1 open /Applications/WechatExplorer.app
/Applications/WechatExplorer.app/Contents/MacOS/WechatExplorer --tray /Applications/WechatExplorer.app/Contents/MacOS/WechatExplorer --tray
``` ```
启用后: 启用后:
- macOS dock 图标自动隐藏 - macOS Dock 图标自动隐藏
- 菜单栏出现 WechatExplorer 图标(可点击重新打开主窗口、查看 API 状态 - 菜单栏出现 WechatExplorer 图标,可重新打开主窗口、查看 API 状态
- 主窗口关闭后 API 服务继续运行 - 主窗口关闭后 API 服务继续运行
### API 端点一览 ### API 端点一览
| 端点 | 说明 | | 端点 | 说明 |
| ------------------------------------------------ | --------------------------------------- | | ------------------------------------------------ | --------------------------------------- |
| `GET /api/v1/health` | 健康检查 | | `GET /api/v1/health` | 健康检查 |
| `GET /api/v1/current_time` | 获取当前本地时间用于"今天/昨天"换算 | | `GET /api/v1/current_time` | 获取当前本地时间用于今天 / 昨天换算 |
| `GET /api/v1/contact?filter=xxx` | 联系人 / 群聊列表 | | `GET /api/v1/contact?filter=xxx` | 联系人 / 群聊列表 |
| `GET /api/v1/chatroom?keyword=xxx` | 搜索群聊 | | `GET /api/v1/chatroom?keyword=xxx` | 搜索群聊 |
| `GET /api/v1/chatlog?talker=xxx&time=2026-07-03` | 聊天记录 | | `GET /api/v1/chatlog?talker=xxx&time=2026-07-03` | 聊天记录 |
| `GET /api/v1/group_snapshot?md5=xxx` | 群成员快照 | | `GET /api/v1/group_snapshot?md5=xxx` | 群成员快照 |
| `GET /api/v1/resolve?q=群昵称` | 把昵称/wxid/md5 解析成 md5 | | `GET /api/v1/resolve?q=群昵称` | 把昵称wxidmd5 解析成 md5 |
详细参数、返回结构时间格式见 [`docs/skill/wechatexplorer-reader/SKILL.md`](./docs/skill/wechatexplorer-reader/SKILL.md)。 详细参数、返回结构时间格式见 [Reader Skill 文档](./docs/skill/wechatexplorer-reader/SKILL.md)。
### 安装 Reader Skill,让 Agent 读取和总结群聊 ### 安装 Reader Skill,让 Agent 读取和总结群聊
WechatExplorer 已内置 **Reader Skill**,无需手动复制仓库中的 `SKILL.md` WechatExplorer 已内置 Reader Skill,无需手动复制仓库中的 `SKILL.md`
1. 启动 WechatExplorer,并确认数据库已连接、本地 API 已运行。 1. 启动 WechatExplorer,并确认数据库已连接、本地 API 已运行。
2. 打开应用内的 **API** 页面。 2. 打开应用内的「API」页面。
3. 在“快速接入”中选择 **Codex****Claude Code** 3. 在“快速接入”中选择 CodexClaude Code。
4. 点击复制安装指令,将指令粘贴给对应 Agent 执行。 4. 点击复制安装指令,将指令粘贴给对应 Agent 执行。
5. 安装完成后,可以直接向 Agent 提问: 5. 安装完成后,可以直接向 Agent 提问:
> “今天技术交流群聊了什么?” > “今天技术交流群聊了什么?”
Reader Skill 会自动获取本机时间、定位目标群聊、读取所需聊天记录,并结合上下文生成总结。详细接口说明仍可查看 [`docs/skill/wechatexplorer-reader/SKILL.md`](./docs/skill/wechatexplorer-reader/SKILL.md)。 Reader Skill 会自动获取本机时间、定位目标群聊、读取所需聊天记录,并结合上下文生成总结。
### curl 调试示例(可选) ### curl 调试示例(可选)
@@ -149,7 +314,7 @@ Reader Skill 会自动获取本机时间、定位目标群聊、读取所需聊
# 健康检查 # 健康检查
curl http://127.0.0.1:6131/api/v1/health curl http://127.0.0.1:6131/api/v1/health
# 今天 摸鱼交流群 的聊天记录 # 今天摸鱼交流群的聊天记录
curl -G "http://127.0.0.1:6131/api/v1/chatlog" \ curl -G "http://127.0.0.1:6131/api/v1/chatlog" \
--data-urlencode "talker=摸鱼交流群" \ --data-urlencode "talker=摸鱼交流群" \
--data-urlencode "time=$(date +%Y-%m-%d)" --data-urlencode "time=$(date +%Y-%m-%d)"
@@ -159,11 +324,73 @@ curl -G "http://127.0.0.1:6131/api/v1/resolve" \
--data-urlencode "q=摸鱼交流群" --data-urlencode "q=摸鱼交流群"
``` ```
</details>
## 🛠️ 开发配置(可选)
<details>
<summary>展开开发配置、环境变量和构建命令</summary>
本地开发需要 Node.js(建议当前 LTS)和 pnpm 7+
```bash
pnpm install
pnpm dev
```
本地开发时运行 `pnpm dev` 会在 `.env` 不存在时自动从 `.env.example` 复制一份。成品用户不需要配置 `.env`,也可以直接在软件“设置”里填写 AI 和图片解密配置。
### 环境变量
| 变量名 | 说明 | 示例 |
| ----------------------- | ----------------------------- | --------------------------- |
| `VITE_DB_KEY` | 微信数据库密钥(32 字节 hex) | `YOUR_DB_KEY_HERE` |
| `VITE_IMAGE_XOR_KEY` | 图片解密 XOR 密钥(hex 格式) | `0x40` |
| `VITE_IMAGE_AES_KEY` | 图片解密 AES 密钥(16 字符) | `YOUR_AES_KEY_HERE` |
| `VITE_DEEPSEEK_API_KEY` | DeepSeek API Key | `sk-xxx` |
| `VITE_AI_BASE_URL` | AI API 地址 | `https://api.deepseek.com` |
| `VITE_AI_MODEL` | AI 模型 | `deepseek-chat` |
| `VITE_FILTER_MSG_TYPES` | 过滤的消息类型 | `分享消息,图片,表情包,视频` |
常用命令:
```bash
pnpm typecheck # 类型检查
pnpm lint # ESLint 检查
pnpm build # 构建
pnpm build:win # 构建 Windows x64 安装包
```
</details>
## ❓ FAQ
<details>
<summary>展开常见问题</summary>
### 我已经连接成功,怎么重新查看教程?
点击左下角「新手引导」。首次连接流程、AI 配置入口、群聊日报、问问微信和完整教程都会再次展示。
### 微信 3.0 应该下载哪个版本?
请使用 [v1.1.0 版本](https://github.com/Wxw-Gu/WechatExplorer/releases/tag/v1.1.0)。微信 4.0 用户使用当前 Releases 中的最新版。
### AI 问问微信或群聊日报不可用怎么办?
进入「设置 → AI 模型」,添加模型服务商并填写 API Key,确认 Base URL 和模型名称正确,然后保存并测试连接。
### 连接失败怎么办?
请先查看 [使用说明](./docs/user-guide/getting-started.md) 的“遇到问题”部分,重点确认微信数据目录、微信登录状态、微信版本和 macOS SIP 设置。
</details>
## ⚠️ 免责声明 ## ⚠️ 免责声明
本项目仅供学习和研究使用。请勿用于非法用途。开发者不对使用本项目造成的任何后果负责。请遵守相关法律法规和微信使用协议。 本项目仅供学习和研究使用。请勿用于非法用途。开发者不对使用本项目造成的任何后果负责。请遵守相关法律法规和微信使用协议,并仅处理你有权访问的数据
## Star History ## Star History
<a href="https://www.star-history.com/?repos=Wxw-Gu%2FWechatExplorer&type=date&legend=top-left"> <a href="https://www.star-history.com/?repos=Wxw-Gu%2FWechatExplorer&type=date&legend=top-left">
<picture> <picture>
@@ -173,14 +400,41 @@ curl -G "http://127.0.0.1:6131/api/v1/resolve" \
</picture> </picture>
</a> </a>
## 🔗 参考致谢 ## 致谢
- [WechatMessageExplorer](https://github.com/svcvit/WechatMessageExplorer) <details>
- [WeFlow](https://github.com/hicccc77/WeFlow) <summary>展开致谢与参考项目</summary>
- [chatlog](https://github.com/sjzar/chatlog)
## 📱 交流与反馈 WechatExplorer 在开发过程中参考了多个优秀的开源项目,感谢这些项目作者的工作与分享。
特别感谢:
- **[WechatMessageExplorer](https://github.com/svcvit/WechatMessageExplorer)**
- 提供了微信数据库解析相关思路。
- **[WeFlow](https://github.com/hicccc77/WeFlow)**
- 参考了数据库密钥获取、图片解密等实现思路。
- **[chatlog](https://github.com/sjzar/chatlog)**
- 提供了聊天记录导出与数据处理方面的参考。
在此基础上,WechatExplorer 进行了重新设计与实现,包括:
- AI 问问微信
- AI 群聊日报
- 本地 HTTP API
- Reader Skill
- Agent Hub
- 新手引导
- Electron + React 全新界面
- 本地优先 AI 工作流
感谢所有开源作者。
</details>
## 💬 交流与反馈
请先完成 [第一次使用与问题排查](./docs/user-guide/getting-started.md),再查看问题排查和 FAQ。只有自助排查仍无法解决时,再扫码进入交流群。
<p align="center"> <p align="center">
<img src="./public/二维码.jpg" alt="WechatExplorer 交流二维码" width="280" /> <img src="./public/二维码.jpg" alt="WechatExplorer 交流与售后群二维码" width="280" />
</p> </p>
+191 -64
View File
@@ -1,121 +1,248 @@
# WechatExplorer 使用教程 # WechatExplorer:第一次使用与问题排查
本文介绍如何安装 WechatExplorer、自动获取微信数据库密钥,并完成首次连接 这份说明解决三件事:第一次连接微信、连接成功后如何开始使用,以及遇到问题时如何自助排查
## 1. 使用前准备 如果你已经进入软件,忘记了连接步骤,可以直接点击左下角「新手引导」,重新查看首次连接流程、AI 配置入口和群聊日报入口。
### 支持的版本 ## 你现在要做什么
| 系统 | 已测试的微信版本 | 说明 | - [我第一次使用,想连接微信](#第一次连接微信)
- [我已经连接成功,下一步做什么](#连接成功后做什么)
- [我想重新查看引导](#重新查看新手引导)
- [我想配置 AI](#配置-ai)
- [我遇到问题](#遇到问题)
- [我想让 Agent 读取微信](#接入-api-reader-skill-或-agent)
## 开始前确认
| 系统 | 已测试的微信版本 | 需要注意 |
| --- | --- | --- | | --- | --- | --- |
| macOS | `4.1.8.100` | 支持相对稳定;自动获取密钥前需要关闭 SIP | | macOS | `4.1.8.100` | 自动获取数据库密钥前需要关闭 SIP 并完成授权 |
| Windows | `4.1.9.57` | 已初步支持;不同安装路径和数据目录可能仍需手动调整 | | Windows | `4.1.9.57` | 已完整支持;首次使用时请确认微信数据目录 |
- macOS 微信下载:[wechat-versions v4.1.8.100](https://github.com/zsbai/wechat-versions/releases/tag/4.1.8.100) - WechatExplorer 当前面向微信 4.0 数据结构。
- Windows 微信下载:[wechat-win-archive v4.1.9.57](https://github.com/iibob/wechat-win-archive/releases#release-v4.1.9.57) - Windows 不需要关闭 SIP。
- WechatExplorer 下载:[GitHub Releases](https://github.com/Wxw-Gu/WechatExplorer/releases) - macOS 首次自动获取数据库密钥需要按页面提示完成系统授权。
- WechatExplorer 必须取得当前微信账号对应的数据库密钥才能读取聊天记录。
- 请只处理你有权访问的微信数据。
> [!IMPORTANT] 下载入口:[GitHub Releases](https://github.com/Wxw-Gu/WechatExplorer/releases)
> WechatExplorer 必须取得本机微信数据库密钥才能读取聊天记录。请仅处理你有权访问的数据。
### macOS:关闭 SIP ## 第一次连接微信
macOS 自动获取密钥前需要关闭 SIP,具体操作见 [macOS 关闭 SIP 教程](../mac-disable-sip.md)。 ### 1. 安装 WechatExplorer
关闭 SIP 会降低系统安全性。建议了解风险后再操作,并在不再需要自动获取密钥时重新开启。 #### Windows
## 2. 安装 WechatExplorer 1. 从 Releases 下载 Windows `-setup.exe` 安装包。
2. 双击安装包,按向导完成安装。
3. 启动 WechatExplorer。
### macOS #### macOS
1. 从 Releases 下载 `.dmg` 文件。 1. 从 Releases 下载 `.dmg` 文件。
2. 打开 DMG,将 WechatExplorer 拖入“应用程序”文件夹。 2. 打开 DMG,将 WechatExplorer 拖入“应用程序”文件夹。
3. 如果系统提示“无法打开,因为开发者无法验证”,前往“系统设置 → 隐私与安全性”,点击“仍要打开”。 3. 如果系统提示“无法打开,因为开发者无法验证”,前往“系统设置 → 隐私与安全性”,点击“仍要打开”。
4. 如果系统提示应用已损坏,在终端执行: 4. 如果系统提示应用已损坏,在终端执行:
```bash ```bash
xattr -cr "/Applications/WechatExplorer.app" xattr -cr "/Applications/WechatExplorer.app"
``` ```
### Windows 5. 如果这是第一次在 macOS 上自动获取数据库密钥,先完成 [关闭 SIP 教程](../mac-disable-sip.md)。关闭 SIP 会降低系统安全性,完成密钥配置后建议重新开启。
1. 从 Releases 下载 `-setup.exe` 安装包。 ### 2. 按软件内引导连接微信
2. 双击安装,并按安装向导完成操作。
## 3. 自动获取密钥 首次启动会自动进入「第一次使用」页面。页面会根据当前系统显示连接方式和注意事项:
### 第一步:确认微信数据目录 <p align="center">
<img src="../../public/setup-page.png" alt="第一次使用连接页面" width="820" />
</p>
启动 WechatExplorer 后,先检查页面中的“存储路径”是否正确。 通常按下面三步操作即可:
![确认微信数据目录](./images/initial-setup.png) 1. **确认微信数据目录**:自动识别不准确时,在页面中修改存储路径。
2. **让微信停在登录页面**:如果微信已经登录,先退出微信登录,不只是关闭窗口。
3. **点击开始获取**:软件会尝试获取数据库密钥。按提示可以登录后,再回到微信完成登录。
Windows 当前不会扫描二级目录。如果没有正确识别微信数据,请进入“设置”,手动选择微信数据所在目录 Windows 已完整支持,不需要关闭 SIP。macOS 首次获取密钥前,需要按页面提示完成授权并关闭 SIP
![Windows 自定义数据目录](./images/windows-data-path.png) ### 3. 连接成功
### 第二步:让微信停留在登录页面 连接成功后,软件会进入聊天档案,并显示「开始探索你的微信」引导:
如果微信已经登录,请先退出登录;然后重新打开微信,让它停留在未登录页面,暂时不要点击登录。 <p align="center">
<img src="../../public/first-use-welcome.png" alt="连接成功后的新手引导" width="760" />
</p>
![微信未登录页面](./images/wechat-login-window.png) 这里推荐先体验「AI 群聊日报」,也可以直接查看聊天、问问微信或配置 AI 模型。
### 第三步:开始获取密钥 ## 连接成功后做什么
返回 WechatExplorer,点击“自动获取密钥”。 ### AI 问问微信
- **Windows**:看到“Hook 注入成功”后,返回微信完成登录。 打开「问问微信」,用自然语言向自己的微信提问,例如:
- **macOS**:系统会弹出授权提示,请输入当前 macOS 用户密码并完成授权,然后返回微信完成登录。
![macOS 授权页面](./images/macos-authorization.png) - “技术群这周讨论了哪些问题?”
- “帮我找到张三发过的项目地址。”
- “去年我和老板聊过哪些关于涨薪的事情?”
> 点击“自动获取密钥”前,微信必须停留在登录页面。WechatExplorer 提示可以登录后,再回到微信完成登录 如果还没有配置 AI,点击「设置 → AI 模型」添加模型服务商并测试连接
### 第四步:完成连接 ### AI 群聊日报
如果系统环境和微信版本符合要求,WechatExplorer 会自动填写数据库密钥并连接数据库。连接成功后即可查看、搜索和导出聊天记录,也可以配置 AI 服务生成群聊总结 1. 打开「日报」
2. 选择一个群聊和时间范围。
3. 按需要选择日报内容和模板。
4. 开始生成,完成后查看或导出 HTML 与 PNG。
![密钥获取完成](./images/setup-complete.png) 日报会整理讨论摘要、关键主题、重要消息、资源、问题和待跟进事项,并保留证据来源。
## 4. 图片解密密钥 ### 查看聊天
微信 4.0 及以上版本的图片通常以 `.dat` 文件存储,显示图片还需要: 1. 打开「档案」。
2. 选择好友或群聊。
3. 浏览历史消息,也可以按关键词定位会话。
### 导出聊天
打开「导出」,选择联系人或群聊、时间范围和格式。支持 HTML、CSV、JSON 和 Markdown。
## 重新查看新手引导
连接成功后,首次弹窗关闭不会影响功能使用。需要重新查看时,点击主界面左下角的「新手引导」:
<p align="center">
<img src="../../public/guide-entry.png" alt="主界面左下角新手引导入口" width="760" />
</p>
新手引导会再次展示:
- AI 群聊日报入口。
- 查看聊天记录入口。
- 问问微信入口。
- AI 模型配置入口。
- 完整使用教程入口。
## 配置 AI
WechatExplorer 支持 OpenAI 兼容接口,也提供 DeepSeek、OpenAI、Claude、Moonshot 等常用配置方式。
1. 进入「设置 → AI 模型」。
2. 添加模型服务商并填写 API Key。
3. 确认 Base URL 和模型名称正确。
4. 保存并测试连接。
5. 返回「问问微信」或「日报」重试。
AI 功能使用你配置的模型服务。相关聊天内容会按请求发送给该服务;是否启用以及使用哪一个服务由你决定。
## 遇到问题
先判断你遇到的现象,再按对应路径处理。
| 现象 | 优先检查 |
| --- | --- |
| 软件打不开 | macOS 安全提示或应用损坏处理;Windows 重新运行安装包 |
| 找不到微信数据 | 在首次连接页面或设置中确认数据目录,Windows 检查目录层级 |
| 获取不到数据库密钥 | 微信是否停留在登录页面、微信和应用是否同时运行 |
| 数据库连接失败 | 当前账号是否匹配、微信版本是否兼容、数据库目录是否正确 |
| 已连接但图片不显示 | 配置图片 XOR Key 和 AES Key |
| AI 问问微信或日报不可用 | 在「设置 → AI 模型」配置并测试模型服务 |
| API、Reader Skill 或 Agent 不可用 | 先连接数据库,再确认 API 服务状态和对应配置 |
### 软件打不开
#### macOS
- 出现“无法打开,因为开发者无法验证”:前往“系统设置 → 隐私与安全性”,点击“仍要打开”。
- 出现“应用已损坏”:确认应用位于“应用程序”目录,再执行:
```bash
xattr -cr "/Applications/WechatExplorer.app"
```
#### Windows
确认下载的是 Releases 中的 `-setup.exe` 安装包,并按安装向导完成安装。Windows 不需要关闭 SIP。
### 找不到微信数据
在首次连接页面确认“存储路径”。如果没有自动识别:
1. 打开「设置」。
2. 手动选择微信数据所在目录。
3. 返回连接页面,重新测试连接。
Windows 当前不会扫描二级目录,请确认目录没有多选或少选一层目录。
### 获取不到数据库密钥
按顺序检查:
1. 微信版本是否与上方已测试版本一致。
2. 点击“开始获取”时,微信是否停留在未登录页面。
3. 微信和 WechatExplorer 是否都保持运行。
4. 微信数据目录是否准确。
5. macOS 是否已关闭 SIP 并完成系统授权。
仍然失败时,可以在连接页面切换为“高级用户:已有数据库密钥?手动连接”,粘贴从其他兼容工具中取得的数据库密钥。手动输入的密钥必须与当前微信账号匹配。
### 数据库连接失败或账号不匹配
数据库密钥与微信账号绑定。请确认:
- 当前微信登录的是获取密钥时对应的账号。
- WechatExplorer 选择的是该账号的数据目录。
- 没有把其他账号或旧数据目录的密钥粘贴进来。
### 已连接但图片无法显示
微信 4.0 的图片通常以 `.dat` 文件存储。显示图片还需要:
- **XOR Key**:单字节十六进制值,例如 `0x40`。 - **XOR Key**:单字节十六进制值,例如 `0x40`。
- **AES Key**:用于 AES-128-ECB 解密的 16 字符字符串。 - **AES Key**:用于 AES-128-ECB 解密的 16 字符字符串。
可以通过以下方式配置: 进入「设置 → 图片解密密钥」,选择自动获取或手动填写。也可以从 WeFlow 或 Chatlog 的设置中导出后填写。文字聊天记录不受图片密钥影响。
1. 使用首次连接页面的“自动获取密钥”。 ### 我已经连接成功,怎么重新查看教程?
2. 在“设置 → 图片解密密钥”中自动获取或手动填写。
3. 从 WeFlow 或 Chatlog 的设置中导出后手动填写。
数据库连接成功但图片无法显示时,请优先检查这两项密钥 点击左下角「新手引导」
## 5. 常见问题 首次连接流程、AI 配置入口、群聊日报、问问微信和完整教程都会再次展示。
### 自动获取密钥失败 ## 接入 API、Reader Skill 或 Agent
请依次确认: 这是高级使用路径,请先完成数据库连接并熟悉「问问微信、日报、档案、导出」的基础流程。
1. 微信版本是否与上方已测试版本一致。 ### Reader Skill
2. 点击“自动获取密钥”时,微信是否停留在未登录页面。
3. 微信数据目录是否正确;Windows 用户尤其需要检查是否多选或少选了一层目录。
4. macOS 是否已按教程关闭 SIP,并完成系统授权。
5. 微信和 WechatExplorer 是否都保持运行。
仍然失败时,可以切换到“手动输入”,粘贴从其他兼容工具中取得的数据库密钥 1. 打开应用的「API」页面
2. 确认本地 API 已运行;如果已停止,点击“启动服务”。
3. 在“快速接入”中选择 Codex 或 Claude Code。
4. 复制安装指令,粘贴给对应 Agent 执行。
5. 安装完成后,让 Agent 读取和总结本地聊天。
### Windows 使用时卡顿 本地 API 默认地址为 `http://127.0.0.1:6131`,默认仅监听本机且无鉴权。详细端点和参数见 [Reader Skill 文档](../skill/wechatexplorer-reader/SKILL.md)。
Windows 支持仍处于初步阶段,不同微信版本、安装路径、数据目录和权限环境可能存在差异。建议优先使用上方已测试的微信版本。 ### Agent Hub
### 数据会上传吗? 应用内的「Agent」页面用于管理 WechatExplorer 的 Agent 连接与运行状态,属于高级功能。
聊天数据库在本机读取和处理。只有使用 AI 总结功能时,相关聊天内容才会按你配置的模型服务发送;是否启用以及使用哪个服务由你决定。 ## 数据与隐私
## 6. 下一步 - WechatExplorer 只读取你有权访问的本机微信数据。
- 不使用 AI 时,应用不会因为读取聊天记录而自动上传聊天内容。
- 使用 AI 问问微信、日报或图片理解时,相关内容会发送到你配置的模型服务。
- 本地 API 默认监听 `127.0.0.1`,且无鉴权。不要将它暴露在不可信的局域网环境中。
- 在应用“设置”中填写兼容 OpenAI API 的模型服务和 API Key,使用 AI 总结功能。 ## 仍然无法解决?
- 在应用的 **API** 页面安装 Reader Skill,让 Codex 或 Claude Code 读取和总结本地群聊。
- 本地 API 的端点和调试方法见项目 [README](../../README.md#ai-集成本地-http-api)。 请先完成上面的自助排查,再进入交流/售后群。提问时一次性提供:
1. 操作系统和版本。
2. 微信版本。
3. WechatExplorer 版本。
4. 当前处于哪一步,以及完整错误信息。
5. 必要截图;请遮挡账号、数据库密钥、API Key 和其他敏感信息。
交流二维码位于项目 [README](../../README.md) 文末。
Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 158 KiB

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

+53 -1
View File
@@ -20,6 +20,7 @@ import { AiModelConfig, useGroupReportGeneration } from './hooks/useGroupReportG
import { SummaryDateRange, SummaryMessageType } from './utils/group-report' import { SummaryDateRange, SummaryMessageType } from './utils/group-report'
import { Contact, Message } from '../../shared/types' import { Contact, Message } from '../../shared/types'
import { DatabaseConnectionMode, DatabaseConnectionPage } from './components/DatabaseConnectionPage' import { DatabaseConnectionMode, DatabaseConnectionPage } from './components/DatabaseConnectionPage'
import { FirstUseWelcome } from './components/FirstUseWelcome'
import { ExportWorkspace } from './components/export/ExportWorkspace' import { ExportWorkspace } from './components/export/ExportWorkspace'
import { AISearchWorkspace } from './components/search/AISearchWorkspace' import { AISearchWorkspace } from './components/search/AISearchWorkspace'
import type { ExportJobProgress, ExportRequest, ExportTaskRecord } from '../../shared/export' import type { ExportJobProgress, ExportRequest, ExportTaskRecord } from '../../shared/export'
@@ -39,7 +40,8 @@ interface SelfInfo {
accountRoot: string accountRoot: string
} }
const MAC_KEY_FAQ_URL = 'https://github.com/hicccc77/WeFlow/blob/main/docs/MAC-KEY-FAQ.md' const MAC_KEY_FAQ_URL = 'https://github.com/Wxw-Gu/WechatExplorer/blob/main/docs/mac-disable-sip.md'
const FIRST_USE_WELCOME_SEEN_KEY = 'wxe_first_use_welcome_seen'
const MESSAGE_MONITOR_DEBOUNCE_MS = 8000 const MESSAGE_MONITOR_DEBOUNCE_MS = 8000
const INITIAL_MESSAGE_COUNT = 20 const INITIAL_MESSAGE_COUNT = 20
const MESSAGE_PAGE_SIZE = 100 const MESSAGE_PAGE_SIZE = 100
@@ -256,6 +258,7 @@ function App(): React.ReactElement {
const [bootState, setBootState] = useState<'loading' | 'connecting' | 'login'>('loading') const [bootState, setBootState] = useState<'loading' | 'connecting' | 'login'>('loading')
const [autoConnectSource, setAutoConnectSource] = useState<'env' | 'saved' | null>(null) const [autoConnectSource, setAutoConnectSource] = useState<'env' | 'saved' | null>(null)
const [startupProgress, setStartupProgress] = useState<StartupProgress | null>(null) const [startupProgress, setStartupProgress] = useState<StartupProgress | null>(null)
const [showFirstUseWelcome, setShowFirstUseWelcome] = useState(false)
const [appearanceSettings, setAppearanceSettings] = React.useState<{ const [appearanceSettings, setAppearanceSettings] = React.useState<{
theme: 'system' | 'light' | 'dark' theme: 'system' | 'light' | 'dark'
compactMode: boolean compactMode: boolean
@@ -728,6 +731,7 @@ function App(): React.ReactElement {
}) })
setIsDatabaseConnected(true) setIsDatabaseConnected(true)
setBootState('login') setBootState('login')
maybeShowFirstUseWelcome()
window.setTimeout(() => { window.setTimeout(() => {
setStartupProgress(null) setStartupProgress(null)
}, 500) }, 500)
@@ -1222,6 +1226,45 @@ function App(): React.ReactElement {
setActivePage('settings') setActivePage('settings')
} }
const dismissFirstUseWelcome = (): void => {
try {
localStorage.setItem(FIRST_USE_WELCOME_SEEN_KEY, '1')
} catch {
// The welcome prompt is optional and should not interrupt normal use.
}
setShowFirstUseWelcome(false)
}
const maybeShowFirstUseWelcome = (): void => {
try {
if (localStorage.getItem(FIRST_USE_WELCOME_SEEN_KEY) === '1') return
} catch {
// If localStorage is unavailable, still show the one-time prompt for this session.
}
setShowFirstUseWelcome(true)
}
const openFirstUseSearch = (): void => {
dismissFirstUseWelcome()
setActivePage('search')
}
const openFirstUseReport = (): void => {
dismissFirstUseWelcome()
setReportWorkspaceView('configure')
setSelectedReportId(null)
setActivePage('report')
}
const openFirstUseAISettings = (): void => {
dismissFirstUseWelcome()
openModelSettings()
}
const openFirstUseGuide = (): void => {
setShowFirstUseWelcome(true)
}
const openReport = (reportId: string): void => { const openReport = (reportId: string): void => {
setSelectedReportId(reportId) setSelectedReportId(reportId)
setReportWorkspaceView('result') setReportWorkspaceView('result')
@@ -1651,10 +1694,19 @@ function App(): React.ReactElement {
dbReady={isDatabaseConnected} dbReady={isDatabaseConnected}
onPageChange={handlePageChange} onPageChange={handlePageChange}
onOpenSettings={openSettings} onOpenSettings={openSettings}
onOpenGuide={openFirstUseGuide}
appearanceTheme={appearanceSettings.theme} appearanceTheme={appearanceSettings.theme}
compactMode={appearanceSettings.compactMode} compactMode={appearanceSettings.compactMode}
> >
{reportNotice && <div className="app-toast">{reportNotice}</div>} {reportNotice && <div className="app-toast">{reportNotice}</div>}
{showFirstUseWelcome && (
<FirstUseWelcome
onDismiss={dismissFirstUseWelcome}
onOpenSearch={openFirstUseSearch}
onOpenReport={openFirstUseReport}
onOpenAISettings={openFirstUseAISettings}
/>
)}
{renderCurrentWorkspace()} {renderCurrentWorkspace()}
</AppShell> </AppShell>
) )
@@ -1,5 +1,8 @@
import React from 'react' import React from 'react'
const GUIDE_URL =
'https://github.com/Wxw-Gu/WechatExplorer/blob/main/docs/user-guide/getting-started.md'
export type DatabaseConnectionMode = 'automatic' | 'manual' export type DatabaseConnectionMode = 'automatic' | 'manual'
export type DatabaseConnectionStatusKind = 'normal' | 'success' | 'error' export type DatabaseConnectionStatusKind = 'normal' | 'success' | 'error'
@@ -116,9 +119,9 @@ export function DatabaseConnectionPage({
<LineIcon name="database" /> <LineIcon name="database" />
</div> </div>
<h1>WechatExplorer</h1> <h1>WechatExplorer</h1>
<p className="database-login-tagline"></p> <p className="database-login-tagline"> AI </p>
<p className="database-login-description"> <p className="database-login-description">
使 AI
</p> </p>
<div className="database-login-promises"> <div className="database-login-promises">
<div> <div>
@@ -131,7 +134,7 @@ export function DatabaseConnectionPage({
</div> </div>
<div> <div>
<LineIcon name="cloud" /> <LineIcon name="cloud" />
<span></span> <span>AI </span>
</div> </div>
</div> </div>
</div> </div>
@@ -140,6 +143,42 @@ export function DatabaseConnectionPage({
<section className="database-login-workspace" aria-label="数据库连接"> <section className="database-login-workspace" aria-label="数据库连接">
<div className="database-login-panel"> <div className="database-login-panel">
<div className="database-login-start">
<p className="database-login-eyebrow">使</p>
<h2></h2>
<p> 3 </p>
<ol>
<li>
<span>1</span>
<div>
<strong></strong>
<small></small>
</div>
</li>
<li>
<span>2</span>
<div>
<strong></strong>
<small></small>
</div>
</li>
<li>
<span>3</span>
<div>
<strong></strong>
<small></small>
</div>
</li>
</ol>
<a
className="database-login-guide-link"
href={GUIDE_URL}
target="_blank"
rel="noreferrer"
>
5
</a>
</div>
<div className="database-login-tabs" role="tablist" aria-label="连接方式"> <div className="database-login-tabs" role="tablist" aria-label="连接方式">
<button <button
type="button" type="button"
@@ -148,16 +187,16 @@ export function DatabaseConnectionPage({
className={mode === 'automatic' ? 'active' : ''} className={mode === 'automatic' ? 'active' : ''}
onClick={() => onModeChange('automatic')} onClick={() => onModeChange('automatic')}
> >
</button> </button>
<button <button
type="button" type="button"
role="tab" role="tab"
aria-selected={mode === 'manual'} aria-selected={mode === 'manual'}
className={mode === 'manual' ? 'active' : ''} className={`database-login-manual-tab ${mode === 'manual' ? 'active' : ''}`}
onClick={() => onModeChange('manual')} onClick={() => onModeChange('manual')}
> >
</button> </button>
</div> </div>
@@ -219,20 +258,31 @@ export function DatabaseConnectionPage({
onClick={onAutoGetKey} onClick={onAutoGetKey}
disabled={isFetching} disabled={isFetching}
> >
{isFetching {isFetching ? '正在获取密钥…' : statusKind === 'error' ? '重新检测' : '开始获取'}
? '正在获取密钥…'
: statusKind === 'error'
? '重新检测'
: '自动获取密钥'}
</button> </button>
{showMacKeyFaq && ( <p className="database-login-platform-note">
{isMac ? (
<>
macOS SIP{' '}
<a href={macKeyFaqUrl} target="_blank" rel="noreferrer">
</a>
</>
) : (
'Windows 已完整支持,不需要关闭 SIP。'
)}
</p>
{showMacKeyFaq && isMac && (
<a href={macKeyFaqUrl} target="_blank" rel="noreferrer"> <a href={macKeyFaqUrl} target="_blank" rel="noreferrer">
·
</a> </a>
)} )}
</div> </div>
) : ( ) : (
<div className="database-login-manual" role="tabpanel"> <div className="database-login-manual" role="tabpanel">
<p className="database-login-manual-note">
使
</p>
<div className="database-login-field"> <div className="database-login-field">
<label htmlFor="database-login-key"></label> <label htmlFor="database-login-key"></label>
<div className="database-login-key-input"> <div className="database-login-key-input">
@@ -0,0 +1,78 @@
import React from 'react'
interface FirstUseWelcomeProps {
onDismiss: () => void
onOpenSearch: () => void
onOpenReport: () => void
onOpenAISettings: () => void
}
const GUIDE_URL =
'https://github.com/Wxw-Gu/WechatExplorer/blob/main/docs/user-guide/getting-started.md'
export function FirstUseWelcome({
onDismiss,
onOpenSearch,
onOpenReport,
onOpenAISettings
}: FirstUseWelcomeProps): React.ReactElement {
return (
<div className="first-use-welcome-overlay" role="presentation">
<section
className="first-use-welcome"
role="dialog"
aria-modal="true"
aria-labelledby="first-use-welcome-title"
>
<button
type="button"
className="first-use-welcome-close"
onClick={onDismiss}
aria-label="关闭欢迎提示"
>
×
</button>
<div className="first-use-welcome-mark" aria-hidden="true">
</div>
<p className="first-use-welcome-eyebrow"></p>
<h2 id="first-use-welcome-title"></h2>
<p className="first-use-welcome-lead">
AI
</p>
<button type="button" className="first-use-welcome-feature" onClick={onOpenReport}>
<span className="first-use-welcome-feature-icon" aria-hidden="true">
</span>
<span className="first-use-welcome-feature-copy">
<strong> AI </strong>
<small></small>
</span>
<span className="first-use-welcome-feature-arrow" aria-hidden="true">
</span>
</button>
<div className="first-use-welcome-secondary-actions">
<button type="button" onClick={onDismiss}>
</button>
<button type="button" onClick={onOpenSearch}>
</button>
</div>
<div className="first-use-welcome-footer">
<span> AI</span>
<button type="button" onClick={onOpenAISettings}>
AI
</button>
<a href={GUIDE_URL} target="_blank" rel="noreferrer">
使
</a>
</div>
</section>
</div>
)
}
@@ -17,6 +17,7 @@ interface AppShellProps {
dbReady: boolean dbReady: boolean
onPageChange: (page: AppPage) => void onPageChange: (page: AppPage) => void
onOpenSettings: () => void onOpenSettings: () => void
onOpenGuide: () => void
appearanceTheme?: 'system' | 'light' | 'dark' appearanceTheme?: 'system' | 'light' | 'dark'
compactMode?: boolean compactMode?: boolean
children: React.ReactNode children: React.ReactNode
@@ -36,6 +37,7 @@ export function AppShell({
dbReady, dbReady,
onPageChange, onPageChange,
onOpenSettings, onOpenSettings,
onOpenGuide,
appearanceTheme = 'system', appearanceTheme = 'system',
compactMode = false, compactMode = false,
children children
@@ -47,6 +49,19 @@ export function AppShell({
<aside className="app-primary-rail"> <aside className="app-primary-rail">
<BrandLogo /> <BrandLogo />
<PrimaryNavigation activePage={activePage} onPageChange={onPageChange} /> <PrimaryNavigation activePage={activePage} onPageChange={onPageChange} />
<button
type="button"
className="app-guide-launcher"
onClick={onOpenGuide}
title="重新打开新手引导"
>
<span className="app-guide-launcher-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" focusable="false">
<path d="M12 3 14.2 9.8 21 12l-6.8 2.2L12 21l-2.2-6.8L3 12l6.8-2.2L12 3Z" />
</svg>
</span>
<span className="app-guide-launcher-label"></span>
</button>
<div className="app-rail-account"> <div className="app-rail-account">
<AccountSummary selfInfo={selfInfo} dbReady={dbReady} compact onClick={onOpenSettings} /> <AccountSummary selfInfo={selfInfo} dbReady={dbReady} compact onClick={onOpenSettings} />
</div> </div>
@@ -7,7 +7,7 @@ export interface NavigationItem {
export const PRIMARY_NAV_ITEMS: NavigationItem[] = [ export const PRIMARY_NAV_ITEMS: NavigationItem[] = [
{ id: 'archive', label: '档案' }, { id: 'archive', label: '档案' },
{ id: 'search', label: '检索' }, { id: 'search', label: '问问微信' },
{ id: 'report', label: '日报' }, { id: 'report', label: '日报' },
{ id: 'agent-hub', label: 'Agent' }, { id: 'agent-hub', label: 'Agent' },
{ id: 'export', label: '导出' }, { id: 'export', label: '导出' },
@@ -641,7 +641,7 @@ export function AISearchWorkspace({
<header className="ai-search-header"> <header className="ai-search-header">
<div> <div>
<span className="ai-search-kicker">WechatExplorer · LOCAL INTELLIGENCE</span> <span className="ai-search-kicker">WechatExplorer · LOCAL INTELLIGENCE</span>
<h1>AI </h1> <h1></h1>
<p></p> <p></p>
</div> </div>
<div className="ai-search-header-actions"> <div className="ai-search-header-actions">
+129 -1
View File
@@ -1178,15 +1178,106 @@
} }
.database-login-workspace { .database-login-workspace {
box-sizing: border-box;
display: grid; display: grid;
place-items: center; align-items: start;
justify-items: center;
min-width: 0; min-width: 0;
min-height: 0;
overflow-y: auto;
padding: 48px clamp(40px, 7vw, 96px); padding: 48px clamp(40px, 7vw, 96px);
background: #fff; background: #fff;
} }
.database-login-panel { .database-login-panel {
width: min(520px, 100%); width: min(520px, 100%);
margin: auto 0;
}
.database-login-start {
margin-bottom: 22px;
h2 {
margin: 0;
color: var(--login-text);
font-size: 22px;
line-height: 29px;
letter-spacing: -0.02em;
}
> p:not(.database-login-eyebrow) {
margin: 7px 0 18px;
color: var(--login-muted);
font-size: 12px;
line-height: 18px;
}
ol {
display: grid;
gap: 9px;
margin: 0;
padding: 0;
list-style: none;
}
li {
display: flex;
align-items: flex-start;
gap: 10px;
color: #35423d;
> span {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--login-primary-dark);
background: #e2f0eb;
font-size: 11px;
font-weight: 700;
}
strong,
small {
display: block;
}
strong {
font-size: 12px;
line-height: 17px;
}
small {
margin-top: 1px;
color: var(--login-muted);
font-size: 11px;
line-height: 16px;
}
}
}
.database-login-eyebrow {
margin: 0 0 5px;
color: var(--login-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.database-login-guide-link {
display: inline-block;
margin-top: 15px;
color: var(--login-primary);
font-size: 11px;
line-height: 17px;
text-decoration: none;
}
.database-login-guide-link:hover {
text-decoration: underline;
} }
.database-login-tabs { .database-login-tabs {
@@ -1217,6 +1308,16 @@
box-shadow: 0 1px 3px rgba(24, 28, 27, 0.08); box-shadow: 0 1px 3px rgba(24, 28, 27, 0.08);
} }
.database-login-tabs .database-login-manual-tab {
color: #7a8580;
font-size: 11px;
font-weight: 500;
}
.database-login-tabs .database-login-manual-tab.active {
color: #58645f;
}
.database-login-state-card { .database-login-state-card {
padding: 18px; padding: 18px;
border: 1px solid var(--login-border); border: 1px solid var(--login-border);
@@ -1396,6 +1497,33 @@
text-decoration: none; text-decoration: none;
} }
.database-login-platform-note {
margin: 12px 0 0;
color: #77817d;
font-size: 11px;
line-height: 17px;
text-align: center;
}
.database-login-platform-note a {
color: var(--login-primary);
text-decoration: none;
}
.database-login-platform-note a:hover {
text-decoration: underline;
}
.database-login-manual-note {
margin: 0 0 20px;
padding: 10px 12px;
border-radius: 7px;
color: #65706b;
background: var(--login-surface-low);
font-size: 11px;
line-height: 17px;
}
.database-login-manual { .database-login-manual {
padding-top: 2px; padding-top: 2px;
} }
+50
View File
@@ -144,6 +144,56 @@ body {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.app-guide-launcher {
box-sizing: border-box;
width: 100%;
min-height: 52px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
margin: 0 0 8px;
padding: 5px 0;
border: 0;
border-radius: var(--wxex-radius-md);
color: var(--wxex-text-secondary);
background: transparent;
cursor: pointer;
font-family: var(--wxex-font);
-webkit-app-region: no-drag;
&:hover {
color: var(--wxex-brand);
background: var(--wxex-brand-soft);
}
}
.app-guide-launcher-icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
}
.app-guide-launcher-label {
font-size: 11px;
line-height: 15px;
font-weight: 600;
white-space: nowrap;
}
.account-summary { .account-summary {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
+238
View File
@@ -137,6 +137,244 @@
transition: width 0.18s ease-out; transition: width 0.18s ease-out;
} }
/* 首次连接成功后的下一步引导 */
.first-use-welcome-overlay {
position: fixed;
inset: 0;
z-index: 1200;
display: grid;
place-items: center;
padding: 24px;
background: rgba(16, 27, 23, 0.42);
backdrop-filter: blur(4px);
animation: settings-fade-in 0.16s ease-out;
}
.first-use-welcome {
position: relative;
width: min(520px, 100%);
padding: 34px;
border: 1px solid rgba(203, 222, 214, 0.9);
border-radius: 18px;
background: #fff;
box-shadow: 0 24px 70px rgba(16, 35, 28, 0.24);
animation: settings-pop-in 0.18s ease-out;
}
.first-use-welcome-close {
position: absolute;
top: 14px;
right: 16px;
width: 30px;
height: 30px;
border: 0;
border-radius: 50%;
color: #7c8882;
background: transparent;
cursor: pointer;
font-size: 23px;
line-height: 1;
}
.first-use-welcome-close:hover {
color: #26342d;
background: #f0f4f1;
}
.first-use-welcome-mark {
width: 42px;
height: 42px;
display: grid;
place-items: center;
margin-bottom: 18px;
border-radius: 13px;
color: #fff;
background: linear-gradient(135deg, #176b57, #42a27f);
box-shadow: 0 7px 16px rgba(23, 107, 87, 0.22);
font-size: 22px;
}
.first-use-welcome-eyebrow {
margin: 0 0 5px;
color: #247a63;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
}
.first-use-welcome h2 {
margin: 0;
color: #1f2c26;
font-size: 25px;
line-height: 34px;
letter-spacing: -0.025em;
}
.first-use-welcome-lead {
margin: 8px 0 24px;
color: #66756d;
font-size: 13px;
line-height: 21px;
}
.first-use-welcome-actions {
display: grid;
gap: 9px;
}
.first-use-welcome-feature {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
padding: 17px 16px;
border: 1px solid #247a63;
border-radius: 12px;
color: #fff;
background: linear-gradient(135deg, #247a63, #176b57);
cursor: pointer;
text-align: left;
transition:
border-color 0.15s ease,
background 0.15s ease,
transform 0.15s ease;
&:hover {
border-color: #00604c;
background: linear-gradient(135deg, #176b57, #00604c);
transform: translateY(-1px);
}
}
.first-use-welcome-feature-icon {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: grid;
place-items: center;
border-radius: 10px;
color: #176b57;
background: #fff;
font-size: 18px;
}
.first-use-welcome-feature-copy {
min-width: 0;
flex: 1;
}
.first-use-welcome-feature-arrow {
flex: 0 0 auto;
font-size: 11px;
font-weight: 650;
white-space: nowrap;
}
.first-use-welcome-feature-copy strong,
.first-use-welcome-feature-copy small {
display: block;
}
.first-use-welcome-feature-copy strong {
font-size: 14px;
line-height: 20px;
}
.first-use-welcome-feature-copy small {
margin-top: 2px;
color: rgba(255, 255, 255, 0.76);
font-size: 11px;
line-height: 16px;
}
.first-use-welcome-secondary-actions {
display: flex;
gap: 22px;
margin: 16px 0 22px;
}
.first-use-welcome-secondary-actions button {
padding: 0;
border: 0;
color: #53645b;
background: transparent;
cursor: pointer;
font-size: 12px;
}
.first-use-welcome-secondary-actions button:hover {
color: #247a63;
text-decoration: underline;
}
.first-use-welcome-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 23px;
padding-top: 16px;
border-top: 1px solid #edf1ef;
span,
button,
a {
color: #68766f;
background: transparent;
font-size: 11px;
text-decoration: none;
}
button {
padding: 0;
border: 0;
cursor: pointer;
}
button:hover,
a:hover {
color: #247a63;
text-decoration: underline;
}
}
@media (max-width: 640px), (max-height: 560px) {
.first-use-welcome-overlay {
display: block;
overflow: auto;
padding: 18px;
}
.first-use-welcome {
width: auto;
margin: 0 auto;
padding: 26px 22px 22px;
}
.first-use-welcome h2 {
font-size: 22px;
line-height: 29px;
}
.first-use-welcome-feature {
align-items: flex-start;
flex-wrap: wrap;
gap: 10px;
}
.first-use-welcome-feature-arrow {
width: 100%;
margin-left: 44px;
}
.first-use-welcome-footer {
align-items: flex-start;
flex-direction: column;
gap: 9px;
}
}
/* 设置面板 */ /* 设置面板 */
.settings-overlay { .settings-overlay {
position: fixed; position: fixed;