用户界面

1. UI 架构概述

Tabby 的用户界面是使用 Angular 构建的，采用基于组件的架构。该 UI 系统设计灵活，支持不同的标签页布局、分屏视图以及丰富的自定义选项。

来源：tabby-core/src/components/appRoot.component.ts tabby-core/src/components/tabHeader.component.ts

2. AppRoot 组件

AppRootComponent 是构建 Tabby UI 的顶级组件。它包含窗口标题栏、标签页栏、工具栏按钮以及显示终端标签页的主内容区域。

关键属性和方法

标签页管理：维护标签页列表，处理标签页的选择、创建和关闭
布局灵活性：支持不同的标签页位置（顶部、底部、左侧、右侧）
快捷键支持：处理各种标签页操作的键盘快捷键
窗口控制：处理最大化/恢复等窗口操作

来源：tabby-core/src/components/appRoot.component.ts64-258 tabby-core/src/components/appRoot.component.pug1-110

3. UI 布局结构

用户界面布局由配置设置决定，可以进行广泛自定义。主要布局组件包括

3.1 窗口结构

窗口结构由以下因素决定

框架类型：可设置为“thin”（原生窗口控件）或“full”（自定义控件）
标签页位置：可位于顶部、底部、左侧或右侧
全屏模式：控制全屏时 UI 元素的可见性

来源：tabby-core/src/components/appRoot.component.pug1-110 tabby-core/src/components/appRoot.component.scss1-226

3.2 标签页栏

标签页栏显示所有打开标签页的标题，并提供标签页操作的控制。其位置和外观可以自定义

标签页栏功能

拖放：标签页可以通过拖放重新排序
上下文菜单：右键单击标签页标题可显示标签页操作
标签页指示器：显示标签页活动、进度和状态
可自定义按钮：用于各种操作的工具栏按钮

来源：tabby-core/src/components/appRoot.component.pug15-94 tabby-core/src/components/tabHeader.component.ts1-118

3.3 内容区域

内容区域显示活动标签页的内容，可以是终端、设置面板或任何其他标签页类型。它支持

单标签页视图：一次显示一个标签页
分屏标签页视图：允许在一个标签页中包含多个带可调窗格的终端
起始页：在没有打开标签页时显示

内容区域实现为一个容器，用于显示活动标签页组件并隐藏其他标签页

来源：tabby-core/src/components/appRoot.component.pug99-108 tabby-core/src/components/appRoot.component.scss173-191

4. 标签页系统

Tabby 的标签页系统是 UI 的核心部分，允许用户管理多个终端会话。

4.1 标签页类型和组件

标签页系统特点

灵活的标签页类型：支持各种标签页类型（终端、设置等）
标签页恢复：应用程序重启后可恢复会话
标签页自定义：标签页可自定义标题、图标和颜色
标签页生命周期管理：创建、销毁、焦点处理

来源：tabby-core/src/api/tabRecovery.ts1-42 tabby-core/src/services/tabRecovery.service.ts1-84 tabby-core/src/profiles.ts1-59

4.2 分屏标签页系统

分屏标签页系统允许将单个标签页划分为多个窗格，每个窗格包含独立的终端会话

分屏标签页功能

动态分屏：用户可以水平或垂直分割终端
嵌套分屏：支持带嵌套分屏的复杂布局
布局持久化：分屏布局可以保存和恢复
拖放：标签页可以在分屏之间拖动

来源：tabby-core/src/components/appRoot.component.ts130-137 tabby-core/src/profiles.ts8-58

5. 外观自定义

Tabby 为终端外观提供了广泛的自定义选项

5.1 主题系统

主题系统包括

配色方案：用于终端外观的预定义配色方案
UI 主题：影响 UI 组件的整体应用程序主题
背景选项：终端背景样式控制
自定义 CSS：支持用户定义的 CSS 自定义

来源：tabby-terminal/src/components/appearanceSettingsTab.component.pug1-182 tabby-terminal/src/components/colorSchemePreview.component.pug1-67

5.2 终端外观选项

Tabby 为自定义终端外观提供了广泛的选项

设置类别	选项
字体	字体族、大小、粗细、连字
配色方案	背景、前景、光标、ANSI 颜色
光标	形状（块、光束、下划线）、闪烁设置
终端背景	来自主题或配色方案
行间距	行内边距、字符间距
字体渲染	对比度、备用字体

这些设置通过“外观设置”标签页进行管理

来源：tabby-terminal/src/components/appearanceSettingsTab.component.pug1-182 tabby-terminal/src/components/appearanceSettingsTab.component.scss1-15

5.3 XTerm 集成和样式

终端前端使用 XTerm.js，并为视口、滚动条和光标提供了额外的样式

XTerm.js 通过以下插件进行扩展

Canvas 渲染器：用于提高渲染性能
WebGL 渲染器：用于硬件加速渲染
Fit 插件：用于终端尺寸适配
连字插件：用于字体连字支持
Unicode 插件：用于改进 Unicode 字符处理

来源：tabby-terminal/src/frontends/xterm.css1-20 tabby-terminal/yarn.lock5-47

6. UI 交互

6.1 键盘快捷键

Tabby 提供了大量键盘快捷键，以实现高效的 UI 导航和标签页管理

AppRootComponent 订阅快捷键流并执行相应的操作

来源：tabby-core/src/components/appRoot.component.ts97-143

6.2 拖放

Tabby 使用 Angular 的 CDK 实现标签页的拖放功能

标签页重新排序：在标签页栏内拖动标签页以重新排序
标签页提取：从分屏视图中拖动标签页以创建新的独立标签页
标签页组合：在分屏视图之间拖动标签页

来源：tabby-core/src/components/appRoot.component.ts217-227 tabby-core/src/components/appRoot.component.pug24-29

6.3 上下文菜单

标签页标题支持包含各种标签页操作的上下文菜单

上下文菜单提供

标签页操作：关闭、重命名、复制
分屏操作：水平分割、垂直分割
标签页特有操作：由标签页实现提供

来源：tabby-core/src/components/tabHeader.component.ts58-79 tabby-core/src/components/tabHeader.component.ts113-116

7. UI 状态恢复

Tabby 包含一个复杂的状体恢复系统，可在应用程序重启后恢复标签页。

7.1 标签页恢复系统

恢复系统通过以下方式工作

在标签页创建或关闭时将标签页状态保存到 localStorage
创建封装每个标签页状态的恢复令牌
在应用程序启动时使用恢复提供程序从其令牌恢复标签页

来源：tabby-core/src/services/tabRecovery.service.ts22-31 tabby-core/src/api/tabRecovery.ts1-42

7.2 分屏布局恢复

分屏布局也可以恢复并保存为配置文件

这允许用户

保存复杂布局：保存特定的终端排列
恢复布局：快速恢复已保存的布局
共享布局：在不同安装之间导出和导入布局

来源：tabby-core/src/profiles.ts45-58

8. 总结

Tabby 的用户界面系统为终端操作提供了一个灵活、可自定义的环境。关键方面包括

基于组件的架构：UI 组件清晰分离
灵活的布局：支持不同的标签页位置和分屏视图
广泛的自定义：主题、颜色、字体及其他外观选项
标签页管理：对标签页操作和持久化的丰富支持
高效交互：键盘快捷键、拖放和上下文菜单
状态恢复：应用程序重启后可靠的标签页和布局恢复

UI 的设计兼具美观性和高度功能性，并注重性能、可用性和灵活性。