用户界面组件

相关源文件

• src-tauri/capabilities/desktop.json
• src-tauri/src/core/cmd.rs
• src-tauri/src/core/setup.rs
• src/App.tsx
• src/main.tsx
• src/view/Ask.tsx
• src/view/Titlebar.tsx

本文档提供了 ChatGPT 桌面应用程序中用户界面组件的详细技术概述。它涵盖了多 Webview 架构、组件实现以及它们通过 Tauri 命令系统的交互。有关主题系统的更多信息，请参阅 主题。

UI 架构概览

ChatGPT 桌面应用程序在一个窗口内使用多 Webview 方法。与使用传统的单个 Webview 不同，该应用程序将其 UI 分割为用于不同功能的专用 Webview，从而提供对界面布局的更好控制并提高原生感。

Webview 结构

来源

• src-tauri/src/core/setup.rs56-104
• src/App.tsx7-16

主窗口包含三个独立的 Webview

1. 标题栏 Webview：包含导航控件、URL 显示和应用程序设置
2. 主 Webview：显示从 https://chatgpt.com 加载的实际 ChatGPT 内容
3. 提问 Webview：提供一个文本输入界面，用于向 ChatGPT 发送消息

平台特定的 Webview 布局

来源

• src-tauri/src/core/setup.rs111-167
• src-tauri/src/core/cmd.rs140-191

组件实现

React 组件结构

应用程序的 UI 由 React 组件组成，这些组件根据 Webview 标签进行条件渲染

来源

• src/App.tsx1-16
• src/main.tsx1-12

主要用户界面组件

标题栏组件

标题栏组件提供导航控件和应用程序设置。它在 src/view/Titlebar.tsx 中实现。

来源

• src/view/Titlebar.tsx20-178

主要功能

• URL 显示，包含主机名提取
• 导航控件（后退、前进、刷新）
• 窗口固定/取消固定功能
• 提问模式切换
• 主题切换（系统、浅色、深色）
• 设置访问

提问界面

提问界面提供了一个文本输入区域，用于向 ChatGPT 发送消息。它在 src/view/Ask.tsx 中实现。

来源

• src/view/Ask.tsx8-70

主要功能

• 带自动对焦的文本输入区域
• 发送按钮
• 键盘快捷键（macOS 上的 ⌘+Enter，Windows/Linux 上的 Ctrl+Enter）
• 通过防抖更新与主 Webview 实时消息同步

组件交互

UI 组件通过 src-tauri/src/core/cmd.rs 中定义的 Tauri 命令进行交互。

命令流序列

来源

• src-tauri/src/core/cmd.rs8-92
• src/view/Ask.tsx14-49
• src/view/Titlebar.tsx72-116

命令系统实现

来源

• src/view/Titlebar.tsx72-117
• src/view/Ask.tsx14-49
• src-tauri/src/core/cmd.rs8-98

Webview 布局管理

该应用程序根据窗口大小、平台和用户偏好动态地定位和调整 Webview 的大小。这种管理在初始设置和响应事件时都会实现。

Webview 定位系统

来源

• src-tauri/src/core/setup.rs110-254
• src-tauri/src/core/cmd.rs106-191

平台特定的 UI 差异

该应用程序为 macOS 与 Windows/Linux 平台提供了不同的 UI 布局

功能	macOS	Windows/Linux
标题栏位置	顶部	底部
窗口控件	原生 macOS 控件，带有覆盖层	标题栏中的自定义控件
主 Webview 位置	位于标题栏下方	位于窗口顶部
提问 Webview 位置	底部	位于标题栏上方
标题栏隐藏状态	支持鼠标悬停时隐藏和显示	始终可见

平台特定的布局是使用条件编译实现的，具体为 #[cfg(target_os = "macos")] 和 #[cfg(not(target_os = "macos"))]。

来源

• src-tauri/src/core/setup.rs111-167
• src-tauri/src/core/cmd.rs140-191
• src/view/Titlebar.tsx30-32