多网页视图系统

相关源文件

• src-tauri/capabilities/desktop.json
• src-tauri/src/core/cmd.rs
• src-tauri/src/core/constant.rs
• src-tauri/src/core/mod.rs
• src-tauri/src/core/setup.rs
• src-tauri/src/core/window.rs
• src/hooks/useTheme.tsx
• src/view/Ask.tsx
• src/view/Titlebar.tsx

目的与范围

本文档描述了 ChatGPT 桌面应用程序中使用的多 WebView 架构。与使用单个 WebView 的传统桌面 Web 包装器不同，此应用程序在单个窗口内使用多个专用 WebView，以创建统一的用户界面，同时保持关注点分离。本文档解释了这些 WebView 的创建、定位以及它们如何相互通信。

有关整体系统架构的详细信息，请参阅 系统架构。有关支持 WebView 之间通信的命令系统的信息，请参阅 命令系统。

WebView 组件概述

该应用程序在单个窗口内使用三个不同的 WebView

来源： src-tauri/src/core/setup.rs56-104 src-tauri/src/core/constant.rs1-2

主 WebView

主 WebView 是显示 ChatGPT 界面的主要内容区域。它直接从“https://chatgpt.com”加载 ChatGPT 网页应用程序。

主要特性

• 标签： "main"
• 包含实际的 ChatGPT 网页界面
• 使用包括消息处理功能在内的特殊脚本进行初始化
• 占据窗口的最大部分

来源： src-tauri/src/core/setup.rs56-94 src-tauri/src/core/constant.rs6-45

标题栏 WebView

标题栏 WebView 提供了一个自定义导航界面，其中包含后退/前进导航、重新加载、设置和主题切换等控件。

主要特性

• 标签： "titlebar"
• 包含用于导航和控件的自定义 React UI
• 由 TITLEBAR_HEIGHT (28.0 像素) 定义的固定高度
• 位置因平台而异 (macOS 顶部，其他平台底部)

来源： src-tauri/src/core/setup.rs96-100 src/view/Titlebar.tsx20-178 src-tauri/src/core/constant.rs1

提问 WebView

提问 WebView 提供了一个消息输入界面，允许用户向 ChatGPT 发送消息。

主要特性

• 标签： "ask"
• 包含用于消息输入的文本区域
• 可以通过 UI 开/关
• 启用时由 ASK_HEIGHT (120.0 像素) 定义的固定高度
• 位置因平台而异 (所有平台均在底部，但相对于标题栏的位置不同)

来源： src-tauri/src/core/setup.rs102-104 src/view/Ask.tsx8-70 src-tauri/src/core/constant.rs2

WebView 创建和初始化

WebView 在应用程序初始化期间在 setup.rs 文件中创建

来源： src-tauri/src/core/setup.rs20-258

特定于平台的 WebView 布局

该应用程序为 macOS 和其他平台（Windows、Linux）使用不同的布局。这些差异是为了适应特定平台的 UI 约定。

macOS 布局

Windows/Linux 布局

来源： src-tauri/src/core/setup.rs111-167 src-tauri/src/core/setup.rs198-251

WebView 定位计算

WebView 的确切定位是使用以下组合计算的：

• 窗口大小 (宽度和高度)
• 比例因子 (用于高 DPI 显示器)
• 常量 (TITLEBAR_HEIGHT, ASK_HEIGHT)
• 提问模式状态 (启用或禁用)

例如，在 macOS 上

• 标题栏：位于 (0, 0)，宽度为窗口宽度，高度为 TITLEBAR_HEIGHT
• 主 WebView：位于 (0, TITLEBAR_HEIGHT)，宽度为窗口宽度，高度为 (窗口高度 - 标题栏高度 - 提问高度)
• 提问 WebView：位于 (0, 窗口高度 - ASK_HEIGHT)，宽度为窗口宽度，高度为 ASK_HEIGHT

来源： src-tauri/src/core/setup.rs107-167 src-tauri/src/core/cmd.rs105-191

WebView 缩放

当窗口调整大小时，每个 WebView 的位置和大小都会重新计算

来源： src-tauri/src/core/setup.rs180-251

WebView 间通信

WebView 通过以下几种机制进行通信：

基于事件的通信

主 WebView 发出 URL 更改事件，标题栏 WebView 会监听这些事件。

来源： src-tauri/src/core/constant.rs6-45 src/view/Titlebar.tsx52-64

基于命令的通信

标题栏和提问 WebView 中的 React 组件调用 Tauri 命令来操作主 WebView

来源： src/view/Ask.tsx25-49 src-tauri/src/core/cmd.rs72-87 src-tauri/src/core/cmd.rs62-70

提问模式切换

提问 WebView 可以通过提问模式功能进行开/关切换

来源： src/view/Titlebar.tsx89-92 src-tauri/src/core/cmd.rs105-191

初始化脚本

主 WebView 使用特殊脚本进行初始化，这些脚本启用了以下功能：

• URL 更改监控
• 链接点击处理 (在默认浏览器中打开外部链接)
• 与其他 WebView 的通信

在 INIT_SCRIPT 中定义的初始化脚本会监控 URL 更改，并在 URL 更改时通知标题栏 WebView，从而使标题栏能够更新其导航状态。

来源： src-tauri/src/core/constant.rs6-45 src-tauri/src/core/setup.rs93-94

功能和权限

多webview系统需要依赖几个Tauri功能才能正常运行

• webview:allow-create-webview: 用于创建多个webview
• webview:allow-set-webview-focus: 用于聚焦特定的webview
• event:allow-emit, event:allow-listen: 用于webview之间的通信
• window:allow-start-dragging: 用于自定义标题栏功能

这些功能定义在 desktop.json 功能文件中。

来源： src-tauri/capabilities/desktop.json1-45

总结

ChatGPT桌面应用程序中的多webview系统提供了一个灵活的架构，该架构

1. 通过使用专用的webview处理不同的UI组件来分离关注点
2. 在保留原始ChatGPT界面的同时，支持自定义UI元素
3. 提供符合UI惯例的平台特定布局
4. 促进应用程序不同部分之间的通信
5. 允许切换功能，例如提问界面

与简单的浏览器包装器相比，这种方法创建了更集成、更原生的桌面体验，同时保持对ChatGPT Web应用程序功能的全部访问。