解剖Paperless Desktop架构Electron双进程分工如何支撑一个文档管理应用【免费下载链接】paperless-desktop macOS app that uses the paperless API to manage your document scans.项目地址: https://gitcode.com/gh_mirrors/pa/paperless-desktopPaperless Desktop 是一款基于 Electron 构建的 macOS 文档管理应用它通过 paperless API 连接自托管的 paperless 服务器帮助用户查看、打标和归档扫描件。这个看似简单的界面背后是一套教科书式的 Electron 双进程架构主进程负责窗口、菜单与系统级能力渲染进程承载全部 React 页面两者靠 IPC 消息桥通信。下面用通俗的方式带你拆解这套架构。一、30秒看懂双进程全景图┌────────────── 主进程main.js──────────────┐ │ 窗口生命周期 · 系统菜单 · 认证头注入 │ │ 文件下载 · 模态窗口 · 本地设置持久化 │ └────────────────────┬────────────────────────┘ ↕ ipcMain / ipcRenderer ┌────────────── 渲染进程js/src/────────────┐ │ React 页面 · react-router 路由 │ │ Alt.js 单向数据流Actions → Stores │ └────────────────────┬────────────────────────┘ ↓ HTTPSBasic 认证 paperless 自托管文档服务器一句话概括分工主进程是管家管操作系统相关的事渲染进程是门面管用户看到的一切IPC 是两者之间的对讲机。二、主进程窗口、菜单与本地存储的幕后管家主进程入口是项目根目录的 main.js它做了四件关键的事1. 创建窗口并记住窗口大小应用就绪后调用createWindow()创建一个BrowserWindow并加载 index.html。窗口每次resize时尺寸会被写入本地文件下次启动时自动恢复上次的窗口大小。2. 本地设置持久化store.js 实现了一个极简的 Store 类把设置如windowBounds序列化到系统 userData 目录下的user-preferences.json。读不到文件就用默认值——首次运行的用户不会报错这正是它简洁的地方。3. 构建 macOS 原生菜单通过Menu.buildFromTemplate生成标准菜单应用菜单About / Quit、File 菜单Close Tab、Edit 菜单Copy / Paste / Select All让应用像个 Mac 应用。4. 处理系统级任务文件下载走electron-dl模态弹窗新建标签/往来单位/提醒由主进程创建独立的BrowserWindow并以modal: true挂载到主窗口上。三、渲染进程React 页面与单向数据流渲染进程是一个纯前端 React 应用代码集中在js/src/目录入口 js/src/main.js 把路由挂载到#app节点js/src/routes.js 定义了全部页面路由登录/login、文档列表/documents、文档详情/document/:id、日志、标签、往来单位、设置、提醒以及独立的弹窗路由/modal/tags/add等js/src/containers/下的每个容器组件与路由一一对应js/src/components/则是可复用的小组件如TagsInput.js、DocumentItem.js。状态管理采用 Alt.jsFlux 流派实例在 js/src/alt.js 中全局创建。数据流向是严格单向的用户操作 → Actions 派发 → Stores 更新状态 → 组件重新渲染以文档列表为例js/src/actions/DocumentsActions.js 发起请求js/src/stores/DocumentsStore.js 接收结果并追加到this.documents数组如果服务器返回 403认证失效Store 会触发goBackToLogin事件自动把用户送回登录页——状态与 UI 完全解耦。四、IPC 消息桥双进程如何对话两个进程不能互相直接调用函数只能传消息。js/src/stores/DocumentsStore.js等文件里可以看到渲染进程通过ipcRenderer发消息、主进程ipcMain.on(...)监听的完整链路。核心消息一览消息名方向作用login渲染 → 主登录后把凭证交给主进程保管setSize渲染 → 主调整主窗口尺寸登录/登录后尺寸不同modal/closeModal渲染 → 主打开 / 隐藏模态弹窗tagAdd/reminderAdd/correspondentAdd双向弹窗表单提交后把新数据回传主窗口刷新列表openDocument双向通知打开指定文档download渲染 → 主触发系统级文件下载一个小细节渲染进程通过window.require(electron)拿到ipcRenderer并利用electron.remote直接调用fs、dialog。这是 Electron 1.x 时代本项目锁定 1.8.8nodeIntegration 全开的典型写法——渲染进程拥有完整 Node 能力双进程边界相对宽松这也是阅读旧 Electron 项目时的重要背景。五、安全设计认证头为什么由主进程注入这是整个架构最值得称道的点。登录后渲染进程通过login消息把用户名密码发给主进程主进程存入私有变量auth主进程监听onBeforeSendHeaders为每一个出站的 paperless API 请求自动附加Authorization: Basic ...请求头同时主动删除 Cookie渲染进程仅在 localStorage 缓存账号用于下次自动登录退出登录时两端同步清除。效果页面 JS 永远不直接接触 API 凭证认证逻辑集中在一处。对新手来说这是一份很好的凭证应该放在安全边界内的范例。六、从源码到 macOS 安装包构建流程速览本地运行只需两步npm install npm startnpm start会先执行 gulp 任务见 gulpfile.js打包渲染进程代码再启动 Electron。打包 macOS 可执行文件则运行npm run package:mac内部调用 electron-packager 生成带原生图标icon.icns的应用包。项目根目录的 auto_updater.json 则预留给自动更新配置。七、架构速查表路径所属进程职责main.js主进程应用入口窗口、菜单、IPC、认证注入store.js主进程本地设置读写JSON 文件index.html渲染进程页面容器js/src/routes.js渲染进程全部前端路由定义js/src/alt.js渲染进程全局 Flux 实例js/src/actions/渲染进程动作用户意图定义js/src/stores/渲染进程状态存储与 API 对接js/src/containers/渲染进程页面级容器组件js/src/components/渲染进程可复用 UI 组件写在最后Paperless Desktop 体量不大却完整呈现了 Electron 应用的三大骨架主进程的系统能力、渲染进程的 UI 职责、IPC 的双向通信。想读懂 Electron 项目从一个这种麻雀虽小五脏俱全的文档管理应用开始是最快的路径。【免费下载链接】paperless-desktop macOS app that uses the paperless API to manage your document scans.项目地址: https://gitcode.com/gh_mirrors/pa/paperless-desktop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
解剖Paperless Desktop架构：Electron双进程分工如何支撑一个文档管理应用
解剖Paperless Desktop架构Electron双进程分工如何支撑一个文档管理应用【免费下载链接】paperless-desktop macOS app that uses the paperless API to manage your document scans.项目地址: https://gitcode.com/gh_mirrors/pa/paperless-desktopPaperless Desktop 是一款基于 Electron 构建的 macOS 文档管理应用它通过 paperless API 连接自托管的 paperless 服务器帮助用户查看、打标和归档扫描件。这个看似简单的界面背后是一套教科书式的 Electron 双进程架构主进程负责窗口、菜单与系统级能力渲染进程承载全部 React 页面两者靠 IPC 消息桥通信。下面用通俗的方式带你拆解这套架构。一、30秒看懂双进程全景图┌────────────── 主进程main.js──────────────┐ │ 窗口生命周期 · 系统菜单 · 认证头注入 │ │ 文件下载 · 模态窗口 · 本地设置持久化 │ └────────────────────┬────────────────────────┘ ↕ ipcMain / ipcRenderer ┌────────────── 渲染进程js/src/────────────┐ │ React 页面 · react-router 路由 │ │ Alt.js 单向数据流Actions → Stores │ └────────────────────┬────────────────────────┘ ↓ HTTPSBasic 认证 paperless 自托管文档服务器一句话概括分工主进程是管家管操作系统相关的事渲染进程是门面管用户看到的一切IPC 是两者之间的对讲机。二、主进程窗口、菜单与本地存储的幕后管家主进程入口是项目根目录的 main.js它做了四件关键的事1. 创建窗口并记住窗口大小应用就绪后调用createWindow()创建一个BrowserWindow并加载 index.html。窗口每次resize时尺寸会被写入本地文件下次启动时自动恢复上次的窗口大小。2. 本地设置持久化store.js 实现了一个极简的 Store 类把设置如windowBounds序列化到系统 userData 目录下的user-preferences.json。读不到文件就用默认值——首次运行的用户不会报错这正是它简洁的地方。3. 构建 macOS 原生菜单通过Menu.buildFromTemplate生成标准菜单应用菜单About / Quit、File 菜单Close Tab、Edit 菜单Copy / Paste / Select All让应用像个 Mac 应用。4. 处理系统级任务文件下载走electron-dl模态弹窗新建标签/往来单位/提醒由主进程创建独立的BrowserWindow并以modal: true挂载到主窗口上。三、渲染进程React 页面与单向数据流渲染进程是一个纯前端 React 应用代码集中在js/src/目录入口 js/src/main.js 把路由挂载到#app节点js/src/routes.js 定义了全部页面路由登录/login、文档列表/documents、文档详情/document/:id、日志、标签、往来单位、设置、提醒以及独立的弹窗路由/modal/tags/add等js/src/containers/下的每个容器组件与路由一一对应js/src/components/则是可复用的小组件如TagsInput.js、DocumentItem.js。状态管理采用 Alt.jsFlux 流派实例在 js/src/alt.js 中全局创建。数据流向是严格单向的用户操作 → Actions 派发 → Stores 更新状态 → 组件重新渲染以文档列表为例js/src/actions/DocumentsActions.js 发起请求js/src/stores/DocumentsStore.js 接收结果并追加到this.documents数组如果服务器返回 403认证失效Store 会触发goBackToLogin事件自动把用户送回登录页——状态与 UI 完全解耦。四、IPC 消息桥双进程如何对话两个进程不能互相直接调用函数只能传消息。js/src/stores/DocumentsStore.js等文件里可以看到渲染进程通过ipcRenderer发消息、主进程ipcMain.on(...)监听的完整链路。核心消息一览消息名方向作用login渲染 → 主登录后把凭证交给主进程保管setSize渲染 → 主调整主窗口尺寸登录/登录后尺寸不同modal/closeModal渲染 → 主打开 / 隐藏模态弹窗tagAdd/reminderAdd/correspondentAdd双向弹窗表单提交后把新数据回传主窗口刷新列表openDocument双向通知打开指定文档download渲染 → 主触发系统级文件下载一个小细节渲染进程通过window.require(electron)拿到ipcRenderer并利用electron.remote直接调用fs、dialog。这是 Electron 1.x 时代本项目锁定 1.8.8nodeIntegration 全开的典型写法——渲染进程拥有完整 Node 能力双进程边界相对宽松这也是阅读旧 Electron 项目时的重要背景。五、安全设计认证头为什么由主进程注入这是整个架构最值得称道的点。登录后渲染进程通过login消息把用户名密码发给主进程主进程存入私有变量auth主进程监听onBeforeSendHeaders为每一个出站的 paperless API 请求自动附加Authorization: Basic ...请求头同时主动删除 Cookie渲染进程仅在 localStorage 缓存账号用于下次自动登录退出登录时两端同步清除。效果页面 JS 永远不直接接触 API 凭证认证逻辑集中在一处。对新手来说这是一份很好的凭证应该放在安全边界内的范例。六、从源码到 macOS 安装包构建流程速览本地运行只需两步npm install npm startnpm start会先执行 gulp 任务见 gulpfile.js打包渲染进程代码再启动 Electron。打包 macOS 可执行文件则运行npm run package:mac内部调用 electron-packager 生成带原生图标icon.icns的应用包。项目根目录的 auto_updater.json 则预留给自动更新配置。七、架构速查表路径所属进程职责main.js主进程应用入口窗口、菜单、IPC、认证注入store.js主进程本地设置读写JSON 文件index.html渲染进程页面容器js/src/routes.js渲染进程全部前端路由定义js/src/alt.js渲染进程全局 Flux 实例js/src/actions/渲染进程动作用户意图定义js/src/stores/渲染进程状态存储与 API 对接js/src/containers/渲染进程页面级容器组件js/src/components/渲染进程可复用 UI 组件写在最后Paperless Desktop 体量不大却完整呈现了 Electron 应用的三大骨架主进程的系统能力、渲染进程的 UI 职责、IPC 的双向通信。想读懂 Electron 项目从一个这种麻雀虽小五脏俱全的文档管理应用开始是最快的路径。【免费下载链接】paperless-desktop macOS app that uses the paperless API to manage your document scans.项目地址: https://gitcode.com/gh_mirrors/pa/paperless-desktop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考