yinjianm
d3e8d598b8
将 SSH 顶部标签改为服务器级切换入口，并把同服务器下的 多终端切换、新增与关闭下沉到终端面板内部，修正服务器与 终端的视觉层级 同时将 Workbench 导航改为左侧图标栏，并为终端标签右键菜单 补充“关闭全部”动作，完善相关多语言文案与工作区事件处理
99 lines
5.7 KiB
Markdown
99 lines
5.7 KiB
Markdown
# 变更提案: terminal-server-internal-tabs
|
|
|
|
## 元信息
|
|
```yaml
|
|
类型: 优化
|
|
方案类型: implementation
|
|
优先级: P1
|
|
状态: 进行中
|
|
创建: 2026-03-29
|
|
```
|
|
|
|
---
|
|
|
|
## 1. 需求
|
|
|
|
### 背景
|
|
当前工作区顶部的 `TerminalTabBar` 同时承担“服务器切换”和“同服务器多终端切换”两类职责，导致展示层把一个服务器组整体渲染成顶栏胶囊。实际交互上，同一 SSH 服务器已经支持打开多个终端，但视觉层级仍然是“全局会话标签”，与用户参考图中“先切到某台服务器，再在该服务器页面内部切换多个终端”的模型不一致。
|
|
|
|
### 目标
|
|
- 顶部标签栏降级为服务器级切换入口，不再直接承载该服务器下的终端子标签。
|
|
- 当前激活服务器的终端切换、关闭和新增入口下沉到终端内容区内部。
|
|
- 保持现有 `sessionId`、WebSocket、SSH session 的一对一模型不变，仅调整展示和切换逻辑。
|
|
- 维持现有工作区布局、RDP/VNC 行为以及其他面板对 `activeSessionId` 的兼容。
|
|
|
|
### 约束条件
|
|
```yaml
|
|
范围约束: 仅修改 frontend 展示层与少量会话派生逻辑，不改 backend 协议
|
|
兼容性约束: RDP/VNC 会话继续沿用现有顶部会话切换方式
|
|
实现约束: 复用已有 session store、terminalIndex 与 activeSessionId，不引入新的全局状态库
|
|
布局约束: 桌面端和移动端都需保持可用，避免破坏现有 LayoutRenderer 结构
|
|
```
|
|
|
|
### 验收标准
|
|
- [ ] 顶部标签栏对 SSH 连接只展示服务器级入口，不再展示“服务器头 + 终端 1/终端 2”的组合胶囊。
|
|
- [ ] 在某个 SSH 服务器对应的终端面板内部可以查看、切换、新增并关闭该服务器下的多个终端。
|
|
- [ ] 当前活动服务器切换后，终端面板内部标签同步切换到该服务器的活动终端。
|
|
- [ ] `packages/frontend` 可完成至少一次构建或类型级验证，且没有新增的模板/属性错误。
|
|
|
|
---
|
|
|
|
## 2. 方案
|
|
|
|
### 技术方案
|
|
保留现有基于 `activeSessionId` 的主工作区数据流，不重构 session store。将 `TerminalTabBar.vue` 的 SSH 展示重心调整为“按连接聚合的服务器标签”，点击服务器时激活该连接当前活动终端或最后一个终端；同时在终端面板区域新增一个轻量的内部终端切换条，只展示当前活动服务器对应的 SSH 子终端，并在该区域提供新增/关闭能力。`LayoutRenderer.vue` 继续负责所有终端实例的 `keep-alive` 渲染，但在终端背景层上方新增当前服务器内部导航。
|
|
|
|
### 影响范围
|
|
```yaml
|
|
涉及模块:
|
|
- frontend: TerminalTabBar 顶部服务器切换逻辑调整
|
|
- frontend: LayoutRenderer 终端面板内部导航与当前服务器终端切换
|
|
- frontend: i18n 文案补充
|
|
预计变更文件: 3-5
|
|
```
|
|
|
|
### 风险评估
|
|
| 风险 | 等级 | 应对 |
|
|
|------|------|------|
|
|
| 顶部栏从会话级改成服务器级后，现有拖拽排序语义可能变弱 | 中 | SSH 仅保留服务器级聚合展示；非 SSH 仍沿用原会话级逻辑 |
|
|
| 终端内容区内切换条如果直接耦合 Terminal 实例，可能影响现有 `keep-alive` 行为 | 中 | 保持实例渲染仍在 `LayoutRenderer`，内部切换条只驱动 `activeSessionId` |
|
|
| 其他依赖 `activeSessionId` 的面板可能在服务器切换时出现会话选择不一致 | 低 | 继续以活动终端作为全局活动会话，不新增第二套“活动服务器”状态 |
|
|
|
|
---
|
|
|
|
## 3. 技术决策
|
|
|
|
### terminal-server-internal-tabs#D001: 以“活动服务器 + 活动终端”双层视图重组展示，而不重构底层会话模型
|
|
**日期**: 2026-03-29
|
|
**状态**: 采纳
|
|
**背景**: 现有问题是 UI 归属错误，不是多终端能力缺失；底层已经支持同连接多会话。
|
|
**选项分析**:
|
|
| 选项 | 优点 | 缺点 |
|
|
|------|------|------|
|
|
| A: 仅继续美化顶部分组标签 | 改动最小 | 仍然违背“终端属于服务器页面内部”的交互模型 |
|
|
| B: 新增活动服务器层，顶部只切服务器，终端面板内部切换子终端 | 贴合目标，复用现有 session 模型，回滚边界清晰 | 需要同时改顶部栏和终端面板两处展示 |
|
|
| C: 重构为嵌套 session/group store | 结构概念更完整 | 改动过大，超出这次局部 UI 纠偏需求 |
|
|
**决策**: 选择方案 B。
|
|
**理由**: 用户要求的是展示逻辑回到“服务器页面内部开多个终端”，方案 B 可以在不碰后端和不重写 store 的前提下完成目标。
|
|
**影响**: 主要影响 `TerminalTabBar.vue`、`LayoutRenderer.vue` 以及相关文案。
|
|
|
|
---
|
|
|
|
## 4. 成果设计
|
|
|
|
### 设计方向
|
|
- **美学基调**: 延续当前深色运维工作台风格，把顶部服务器入口做得更克制，把终端面板内部导航做成更贴近“本机多标签终端”的工具感界面。
|
|
- **记忆点**: 服务器是外层入口，终端是内层工作标签，两层层级明确分离。
|
|
- **参考**: 用户提供的终端参考图，核心不是照搬皮肤，而是复用“服务器内多终端标签”的交互结构。
|
|
|
|
### 视觉要素
|
|
- **配色**: 保留当前暗色背景和绿色活跃态，但把高亮集中在当前服务器与当前终端两个层级，避免整条胶囊都发光。
|
|
- **字体**: 沿用项目现有字体体系，不做额外字体扩展。
|
|
- **布局**: 顶部横条显示服务器级入口；终端面板顶部增加内嵌次级标签条，紧贴终端区域。
|
|
- **动效**: 保持现有 hover/active 过渡即可，不新增重动画。
|
|
- **氛围**: 强化“终端工作台”而不是“胶囊式全局标签”的层次感。
|
|
|
|
### 技术约束
|
|
- **可访问性**: 内部标签与新增按钮保留 `title`/状态色提示。
|
|
- **响应式**: 移动端不强行塞入复杂双层标签，优先保持能切换和新增。
|