Electron 39 React 19 Vite密语CipherTalk整体架构与源码结构导读【免费下载链接】CipherTalk查无此人项目地址: https://gitcode.com/gh_mirrors/ci/CipherTalk密语 CipherTalk是一款现代化的微信聊天记录查看与分析工具基于Electron 39 React 19 Vite技术栈构建。本文带你快速读懂它的整体架构与源码结构三层进程如何分工、30 个 IPC 处理器如何注册、目录里每个文件夹管什么以及三步跑起来项目的方法。适合刚接触 Electron 桌面端开发的新手阅读。一、技术栈速览这套组合解决了什么问题密语 CipherTalk 的核心挑战是既要本地读取并解密微信数据库又要有流畅美观的界面还要支持 AI 与插件扩展。它的技术选型正好对应这三点技术版本在项目中承担的职责Electron39桌面容器多窗口、托盘、本地文件与原生模块React TypeScript19 / 5.6渲染层 UI页面、组件、状态管理Vite6开发热重载 打包主进程/预加载/Worker 等 8 个入口Tailwind CSS 4 SCSS4.3原子化样式 局部定制better-sqlite3 / WCDB12 / 原生本地数据库读取、微信消息解密electron-builder25打包 Windows / macOS 安装包完整依赖清单见 package.json其中electron、react、vite的版本一目了然。二、三层架构主进程、预加载脚本、渲染进程Electron 项目的经典结构是“三层分工”密语 CipherTalk 是教科书式的实现2.1 主进程electron/入口是 electron/main.ts负责窗口管理创建主窗口、聊天摘要窗、朋友圈窗、宠物窗等多个窗口见 electron/main/windows/windowManager.ts启动诊断启动每个阶段都有里程碑打点出问题能定位到哪一步自定义协议注册local-video、local-image、ct-plugin等特权协议让聊天里的本地视频、图片、插件资源能安全地在页面里播放IPC 总注册所有主进程能力都通过模块化处理器暴露2.2 预加载脚本electron/preload.tselectron/preload.ts 通过contextBridge把安全的electronAPI暴露给页面。渲染进程不直接碰ipcRenderer而是调用封装好的方法——这是 Electron 安全编程的关键一步。2.3 渲染进程src/入口 src/main.tsx 只有十几行React 19 的createRoot挂载HashRouter管理路由。真正的页面在src/pages/下按功能分块chat/聊天记录主界面会话列表、消息流、多媒体渲染export/导出中心HTML / Excel / 图片等格式agent/AI 智能体对话与画布SettingsPage、ChatHistoryPage、MomentsWindow等独立窗口页面状态管理用zustandsrc/stores/数据访问层在 src/services/IPC 封装、WCDB 连接封装等。2.4 IPC 是骨架30 个模块化处理器主进程的能力通过 IPC 暴露注册全部集中在 electron/main/ipc/register.ts一个文件引入 30 个register*Handlerschat、export、ai、mcp、plugin、media……每个处理器单独成文件放在electron/main/ipc/下。读源码时这份文件就是主进程能力的“目录页”。三、源码结构导读顶层目录逐个讲目录一句话职责electron/主进程全部逻辑窗口、IPC、服务AI/Agent/MCP/记忆/检索/语音转写等src/React 渲染进程页面、组件、store、样式CipherTalk-CLI/独立 CLI 子项目提供miyu命令行有自己的构建与发布流程plugin-sdk/插件 SDK供第三方插件开发examples/plugins/插件示例收藏、UI 画廊、HeroUI 模板skills/内置 AI 技能包MCP Copilot 等scripts/构建、发版、MCP 运行器等工程脚本public/图标、表情包、宠物素材、背景图等静态资源其中electron/services/是最值得逛的目录每个子目录对应一个大功能electron/services/chat/消息解析、会话列表、表情、红包等查询electron/services/agent/AI 智能体引擎、工具集、提示词、记忆管理electron/services/mcp/MCP 服务器把聊天记录查询能力开放给外部 AI 工具electron/services/memory/记忆数据库与夜间记忆整理electron/services/retrieval/ 与 electron/services/search/全文检索、向量检索与 RRF 融合Vite 如何编排 8 个构建入口看 vite.config.ts 会发现vite-plugin-electron一次性编译了 8 个入口主进程main.ts、预加载preload.ts、语音转写 Worker、图片解密 Worker、WCDB 工具进程、AI 导出/Agent 工具进程以及 MCP 进程。重活全部被拆到 Worker 和独立进程中主界面因此保持流畅——这是本项目最值得学习的一点。四、三步跑起来克隆、安装、启动环境要求Node.js ≥ 22.12Windows 10/11或 macOS。# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/ci/CipherTalk cd CipherTalk # 2. 安装依赖postinstall 会自动 electron-rebuild 原生模块 npm install # 3. 启动开发模式热重载 npm run dev生产构建则用npm run build安装包输出到release/目录配置见 package.json 的build字段。想体验 CLI 版本可以单独执行npm run cli:install npm run cli -- status。五、总结从源码结构看架构思路一句话概括密语 CipherTalk 的架构主进程管数据与重活预加载脚本守安全边界React 19 渲染层管体验Vite 统一编排 8 个进程入口。目录即功能图——想读懂某个功能先定位electron/services/对应子目录再顺着 electron/main/ipc/register.ts 找到 IPC 通道最后到src/pages/看界面如何消费数据。按这条线索读即使面对千行级的大项目也能像逛地图一样轻松上手。【免费下载链接】CipherTalk查无此人项目地址: https://gitcode.com/gh_mirrors/ci/CipherTalk创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
