分屏标签页系统

相关源文件

• .gitignore
• app/src/global.scss
• tabby-core/src/api/tabRecovery.ts
• tabby-core/src/components/appRoot.component.pug
• tabby-core/src/components/appRoot.component.scss
• tabby-core/src/components/appRoot.component.ts
• tabby-core/src/components/baseTab.component.ts
• tabby-core/src/components/selfPositioning.component.ts
• tabby-core/src/components/splitTab.component.ts
• tabby-core/src/components/splitTabDropZone.component.scss
• tabby-core/src/components/splitTabDropZone.component.ts
• tabby-core/src/components/splitTabPaneLabel.component.scss
• tabby-core/src/components/splitTabPaneLabel.component.ts
• tabby-core/src/components/splitTabSpanner.component.ts
• tabby-core/src/components/tabHeader.component.ts
• tabby-core/src/profiles.ts
• tabby-core/src/services/tabRecovery.service.ts
• tabby-core/src/services/tabs.service.ts
• tabby-local/src/recoveryProvider.ts

本文档描述了 Tabby 的分屏标签页系统，该系统允许用户将一个标签页划分为多个窗格，每个窗格都包含自己的终端会话。分屏标签页系统使用户可以在单个标签页内同时查看和操作多个终端会话，从而提高生产力并优化屏幕空间利用率。有关整体标签页管理系统的信息，请参阅标签页管理与恢复。

概述

分屏标签页系统主要通过SplitTabComponent实现，该组件充当多个子标签页的容器。它允许以垂直和水平分割的层级结构组织标签页，管理窗格之间的焦点，处理拖放操作以重新排列标签页，并提供标签页恢复的序列化功能。

核心概念

来源: tabby-core/src/components/splitTab.component.ts161-780

SplitTabComponent

SplitTabComponent是实现分屏标签页功能的主要类。它继承自BaseTabComponent，并充当其他标签页的容器。

主要特性

• 包含以SplitContainer对象排列的标签页层级结构
• 处理用户进行分屏、聚焦和调整标签页大小的交互
• 使用基于百分比的定位管理子标签页的布局
• 提供标签页状态恢复的序列化功能
• 响应键盘快捷键进行窗格之间的导航

来源: tabby-core/src/components/splitTab.component.ts161-780 tabby-core/src/components/baseTab.component.ts22-239

SplitContainer

SplitContainer类是分屏标签页系统的基本组成部分，用于管理标签页和嵌套容器的层级结构。

关键概念：

• 方向：可以是水平（'h'）或垂直（'v'），决定子元素的排列方式
• 子元素：可以是BaseTabComponent实例或嵌套的SplitContainer实例
• 比例：决定每个子元素的相对大小，值为0到1之间，总和为1

来源: tabby-core/src/components/splitTab.component.ts16-125

分屏类型和方向

分屏标签页系统使用多种类型定义来管理分屏操作

这些类型决定了新窗格的创建和排列方式

• 当向'r'（右）或'l'（左）方向分屏时，使用水平容器
• 当向't'（上）或'b'（下）方向分屏时，使用垂直容器

来源: tabby-core/src/components/splitTab.component.ts9-11

标签页分屏的工作原理

当用户分屏一个标签页时

1. 系统会创建源标签页的一个副本
2. 新标签页被添加到分屏容器中源标签页的旁边
3. 容器的方向根据分屏方向进行调整
4. 容器的比例会重新计算以适应新标签页
5. 布局得到更新，新标签页获得焦点

来源: tabby-core/src/components/splitTab.component.ts707-713 tabby-core/src/components/splitTab.component.ts447-528

布局管理

分屏标签页系统使用基于百分比的布局系统来定位容器内的标签页。这使得可以灵活地调整大小，并确保所有标签页始终可见。

布局系统的关键方面

• 每个标签页的位置由其容器的x、y、宽度和高度值决定
• 这些值表示为父容器的百分比
• layout()方法递归计算并应用这些值
• 子标签页使用带有百分比单位的绝对CSS定位

来源: tabby-core/src/components/splitTab.component.ts781-1028

大小调整处理

分屏标签页系统允许用户通过拖动窗格之间的边界来调整其大小。这通过SplitTabSpannerComponent实现。

1. 分隔器放置在同一容器中相邻标签页之间
2. 当用户拖动分隔器时，受影响标签页的比例会进行调整
3. 布局会重新计算以反映新的大小

此外，用户还可以使用键盘快捷键调整焦点窗格的大小

• resizePane()方法根据方向和数量调整比例
• 系统会阻止窗格被调整到最小阈值以下

来源: tabby-core/src/components/splitTab.component.ts572-636 tabby-core/src/components/splitTabSpanner.component.ts1-98

焦点管理

分屏标签页系统管理不同窗格之间的焦点

主要焦点机制

• focus(tab)：将一个标签页设置为焦点标签页并相应地更新UI
• navigate(direction)：沿指定方向（左、右、上、下）移动焦点
• navigateLinear(delta)：在线性顺序中向前或向后移动焦点
• navigateSpecific(target)：通过索引聚焦特定标签页
• focusAnyIn(container)：聚焦容器中的第一个可用标签页

来源: tabby-core/src/components/splitTab.component.ts412-706

标签页操作

分屏标签页系统提供了多种操作标签页的方法

方法	描述
addTab(tab, relative, side)	在指定方向上相对于另一个标签页添加一个标签页
removeTab(tab)	从容器中移除一个标签页
replaceTab(tab, newTab)	用另一个标签页替换当前标签页
splitTab(tab, direction)	创建一个标签页的副本并将其添加到指定方向
maximize(tab)	最大化一个标签页以填充容器
equalize()	使所有标签页大小相同

来源: tabby-core/src/components/splitTab.component.ts447-528 tabby-core/src/components/splitTab.component.ts529-551 tabby-core/src/components/splitTab.component.ts553-567 tabby-core/src/components/splitTab.component.ts707-713 tabby-core/src/components/splitTab.component.ts428-431

拖放系统

分屏标签页系统实现了拖放功能以重新排列标签页

1. 在标签页周围和之间创建SplitTabDropZoneComponent实例
2. 这些拖放区域定义了可以放置标签页的区域
3. 当一个标签页被拖到某个拖放区域上方时，该区域会被高亮显示
4. 当标签页被放下时，它会添加到容器的指定位置

来源: tabby-core/src/components/splitTabDropZone.component.ts1-64 tabby-core/src/components/splitTabPaneLabel.component.ts1-80 tabby-core/src/components/splitTab.component.ts761-772

与标签页恢复的集成

分屏标签页系统与 Tabby 的标签页恢复系统集成，以保存和恢复分屏布局

1. SplitContainer.serialize()方法将容器层级结构转换为恢复令牌
2. recoverContainer()方法从恢复令牌重建容器层级结构
3. SplitTabRecoveryProvider类处理分屏标签页的恢复

这使得在应用程序重启时可以保存和恢复复杂的分屏布局。

来源: tabby-core/src/components/splitTab.component.ts109-124 tabby-core/src/components/splitTab.component.ts1030-1059 tabby-core/src/components/splitTab.component.ts1062-1075

键盘导航

分屏标签页系统响应各种键盘快捷键，以实现高效导航和操作

键盘快捷键	操作	方法
split-right	向右分屏标签页	splitTab(tab, 'r')
split-bottom	向下分屏标签页	splitTab(tab, 'b')
split-top	向上分屏标签页	splitTab(tab, 't')
split-left	向左分屏标签页	splitTab(tab, 'l')
pane-nav-left	导航到左侧窗格	navigate('l')
pane-nav-right	导航到右侧窗格	navigate('r')
pane-nav-up	导航到上方窗格	navigate('t')
pane-nav-down	导航到下方窗格	navigate('b')
pane-nav-previous	导航到上一个窗格	navigateLinear(-1)
pane-nav-next	导航到下一个窗格	navigateLinear(1)
pane-nav-1 到 pane-nav-9	通过索引导航到特定窗格	navigateSpecific(index)
pane-maximize	切换当前窗格的最大化状态	maximize(tab)
close-pane	关闭当前窗格	tab.destroy()
pane-increase-vertical等	调整窗格大小	resizePane(direction)

来源: tabby-core/src/components/splitTab.component.ts283-368

与应用程序组件的交互

分屏标签页系统与 Tabby 应用程序中的其他几个组件进行交互

关键集成点

1. AppRootComponent将SplitTabComponent渲染为内容标签页
2. BaseTabComponent既可以作为SplitTabComponent的父级，也可以作为其子级
3. TabsService用于创建和复制标签页
4. TabRecoveryService用于保存和恢复标签页状态
5. HotkeysService提供键盘快捷键处理

来源: tabby-core/src/components/appRoot.component.ts1-258 tabby-core/src/components/appRoot.component.pug102-108

SplitTabComponent 生命周期

SplitTabComponent 的生命周期包括几个关键阶段

1. 创建：组件被创建，并初始化根SplitContainer
2. 初始化：组件初始化事件监听器并订阅各种事件
3. 恢复：如果从保存的状态恢复，则重建容器层级结构
4. 布局：组件计算并应用所有子标签页的布局
5. 操作：组件响应用户交互并更新布局
6. 销毁：组件清理资源并销毁子标签页

来源: tabby-core/src/components/splitTab.component.ts258-397 tabby-core/src/components/splitTab.component.ts772-780

结论

分屏标签页系统是 Tabby 中一项强大的功能，它允许用户在单个标签页中处理多个终端会话。它提供了一个灵活且直观的界面，用于安排、调整大小和在窗格之间导航。该系统基于组件的架构和分层容器结构能够实现复杂的布局，同时保持性能和可用性。