系统架构

相关源文件

• README.md
• package.json
• pnpm-lock.yaml
• src-tauri/src/main.rs
• src-tauri/tauri.conf.json

本文档提供了 ChatGPT 桌面应用程序架构的高层概述，详细说明了不同组件如何交互以创建 ChatGPT 的跨平台桌面体验。它解释了系统的分层架构、通信模式和核心组件。

有关特定子系统的详细信息，请参阅

• 后端架构，了解 Rust/Tauri 后端实现
• 前端架构，了解 React 前端结构
• 多 WebView 系统，了解多个 WebView 如何协同工作

高层架构

ChatGPT 桌面应用程序使用 Tauri 框架创建了一个包装 ChatGPT 网页服务的原生桌面应用程序。这种方法将 Web 技术（React）用于 UI 与 Rust 用于原生功能相结合。

架构层图

来源: src-tauri/src/main.rs8-27 package.json12-21

该架构包含三个主要层

1. 用户界面层：使用 React 和 Vite 构建，提供视觉组件和用户交互
2. Tauri 框架层：作为 Web UI 和原生功能之间的桥梁
3. 原生集成层：通过 Tauri 插件提供对操作系统级功能的访问

核心组件

该应用程序围绕几个关键组件构建，这些组件协同工作以提供功能。

后端结构图

来源: src-tauri/src/main.rs4-5 src-tauri/src/main.rs12-24

Rust 后端具有清晰的关注点分离

• main.rs: 入口点，负责配置 Tauri 和注册命令处理程序
• cmd.rs: 实现所有可以从前端调用的命令处理程序
• setup.rs: 处理应用程序初始化，包括窗口设置
• window.rs: 管理窗口创建和配置
• constant.rs: 定义应用程序常量

命令通信流程

应用程序使用基于命令的通信模式来连接前端和后端

来源: src-tauri/src/main.rs12-24 src-tauri/src/core/cmd.rs

多网页视图系统

该应用程序的独特功能之一是在单个窗口中使用多个 WebView。

多 WebView 架构图

来源: src-tauri/src/core/setup.rs src-tauri/src/core/window.rs src-tauri/src/core/constant.rs

这种多 WebView 方法提供了几个优势

• 每个 WebView 都专门用于其特定功能
• 组件之间相互隔离，提高了稳定性
• 使 UI 的不同部分能够独立运行

命令系统

该应用程序公开了一组命令，前端可以调用这些命令来执行各种操作

命令	目的	实现
view_reload	重新加载当前 WebView	cmd::view_reload
view_url	获取当前 URL	cmd::view_url
view_go_forward	向前导航	cmd::view_go_forward
view_go_back	向后导航	cmd::view_go_back
set_view_ask	切换 Ask 视图	cmd::set_view_ask
get_app_conf	获取应用程序配置	cmd::get_app_conf
window_pin	将窗口置顶	cmd::window_pin
ask_sync	同步 Ask 状态	cmd::ask_sync
ask_send	发送问题	cmd::ask_send
set_theme	更改应用程序主题	cmd::set_theme
open_settings	打开设置窗口	window::open_settings

来源: src-tauri/src/main.rs12-24 src-tauri/src/core/cmd.rs

这些命令构成了前端用于与后端和原生功能交互的 API 表面。

构建和配置系统

应用程序构建过程使用 Tauri 的工具将 React 前端与 Rust 后端集成。

构建流程图

来源: src-tauri/tauri.conf.json1-29 package.json6-10

构建系统通过几个关键文件进行配置

• tauri.conf.json: 配置 Tauri 应用程序，包括构建设置
• package.json: 定义前端依赖和构建脚本
• Cargo.toml: 指定后端 Rust 依赖

插件系统

该应用程序利用 Tauri 插件访问原生功能

插件集成图

来源: src-tauri/src/main.rs8-11 package.json12-16

该应用程序使用三个主要插件

• tauri_plugin_os: 提供对操作系统信息的访问
• tauri_plugin_shell: 允许执行 shell 命令
• tauri_plugin_dialog: 允许使用原生对话框

总结

ChatGPT 桌面应用程序采用了现代架构，具有几个关键特征

1. 分层设计：将 UI、框架和原生集成关注点分开
2. 基于命令的通信：为前端-后端交互提供清晰的 API
3. 多 WebView 方法：为不同的 UI 组件使用专用 WebView
4. 基于插件的原生集成：利用 Tauri 插件实现操作系统级功能
5. 跨平台兼容性：适用于 Windows、macOS 和 Linux

该架构支持一款感觉上像原生应用程序的桌面应用程序，同时保持跨平台兼容性并为 ChatGPT 服务提供简化的界面。