# 变更提案: terminal-tab-group-visual

## 元信息
```yaml
类型: 功能增强
方案类型: implementation
优先级: P1
状态: 已完成
状态说明: 已完成实现，前端构建验证通过
创建: 2026-03-25
```

---

## 1. 需求

### 背景
上一轮已经让同一 SSH 服务器支持多个终端，并补上了终端序号，但顶部标签栏仍然更像“连接名 + 终端编号”的单层标签，不够接近参考图里“同服务器终端属于一组”的视觉关系。

### 目标
- 将顶部终端标签栏改成更明显的“同服务器终端组”视觉。
- 采用“分组头 + 子标签”的表现方式。
- 保留现有单连接多终端能力，不回退为单终端模型。
- 继续保持当前黑绿主题和工作区整体风格。

### 约束条件
```yaml
范围约束: 优先限制在 TerminalTabBar.vue 和相关前端文案，不改后端协议
结构约束: 复用现有 session 排序与 terminalIndex 数据，不重写 session store 主模型
交互约束: 同服务器组内仍能快速新增终端，其他服务器入口继续保留
兼容约束: 不影响 RDP/VNC 既有入口和会话关闭逻辑
```

### 验收标准
- [ ] 连续同连接终端在标签栏中具备明确的“分组头 + 子标签”视觉关系
- [ ] 组头能清晰展示服务器身份，子标签主要表达终端实例
- [ ] 同组内仍能继续新增终端，且不影响现有关闭/切换逻辑
- [ ] 前端构建通过

---

## 2. 方案

### 技术方案
保留当前按 `sessionId` 排序的平铺会话数组，不引入新的嵌套 store 结构；在 `TerminalTabBar.vue` 内根据相邻会话的 `connectionId` 判定组起点与组终点，在连续同连接会话的首项前渲染组头，在末项后渲染组内新增终端按钮，子标签本身则弱化连接名、强化终端编号与激活态。这样能在不打破现有拖拽键和会话事件路由的前提下，得到更接近参考图的组视觉。

### 影响范围
```yaml
涉及模块:
  - frontend: TerminalTabBar.vue, locales
预计变更文件: 2-4
```

### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 分组头和子标签都在 draggable item 中渲染，样式边界容易错位 | 中 | 让分组逻辑完全依赖前后相邻项判定，避免额外 DOM 状态 |
| 子标签弱化连接名后识别度下降 | 低 | 组头保留服务器名，子标签保留终端编号与 tooltip |
| 组内新增终端按钮和现有全局按钮职责重叠 | 中 | 将全局按钮收口为“选择其他服务器”，组内新增由组尾按钮承担 |

---

## 3. 技术决策

### terminal-tab-group-visual#D001: 用相邻项判定的轻量分组视觉替代嵌套数据重构
**日期**: 2026-03-25  
**状态**: ✅采纳  
**决策**: 不新增“连接组” store 层，而是在 `TerminalTabBar.vue` 里通过相邻 `connectionId` 判断组首/组尾，渲染组头、子标签和组尾新增按钮。  
**理由**: 当前 session 数据和事件路由已经稳定，视觉分组是展示层问题，没必要为此重写状态结构。轻量分组实现可以最大限度复用现有逻辑，同时更容易回滚。  
**影响**: 主要影响 `TerminalTabBar.vue` 的结构和样式，以及少量终端标签栏文案。