feat(workspace): enhance status cards and terminal groups

add memory and disk monitoring cards with richer server metrics
and localized labels in the workspace status panel

group ssh terminal tabs by server with per-group add actions to
make multi-terminal relationships clearer

sync helloagents archive and module documentation for the
completed workspace updates
This commit is contained in:
yinjianm
2026-03-25 22:58:27 +08:00
parent d730d06c5e
commit 7af8812e26
23 changed files with 1644 additions and 839 deletions
@@ -0,0 +1 @@
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"已完成 terminal-tab-group-visual 并通过前端构建验证","updated_at":"2026-03-25 22:36:00"}
@@ -0,0 +1,70 @@
# 变更提案: 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` 的结构和样式,以及少量终端标签栏文案。
@@ -0,0 +1,49 @@
# 任务清单: terminal-tab-group-visual
```yaml
@feature: terminal-tab-group-visual
@created: 2026-03-25
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 4 | 0 | 0 | 4 |
---
## 任务列表
### 1. 方案与视觉方向确认
- [√] 1.1 创建顶部终端组视觉方案包并锁定“分组头 + 子标签”方向 | depends_on: []
### 2. 终端标签栏改造
- [√] 2.1 在 `TerminalTabBar.vue` 中实现组首/组尾判定与分组头渲染 | depends_on: [1.1]
- [√] 2.2 调整子标签与组尾新增终端按钮样式,并保留全局服务器入口 | depends_on: [2.1]
### 3. 验证与同步
- [√] 3.1 运行前端构建验证并同步 `.helloagents` 文档与归档记录 | depends_on: [2.2]
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-03-25 22:29 | 1.1 | 完成 | 创建 implementation 方案包,并锁定“分组头 + 子标签”方向 |
| 2026-03-25 22:33 | 2.1 / 2.2 | 完成 | 在 TerminalTabBar.vue 中加入组首组尾判定、服务器组头、子标签和组尾新增终端按钮 |
| 2026-03-25 22:36 | 3.1 | 完成 | `npm --prefix packages/frontend run build` 通过,并同步知识库文档 |
---
## 执行备注
- 本轮是标签栏视觉升级,不改底层 session / WebSocket 协议。
- 分组关系只存在于顶部标签栏展示层,底层仍按独立 `sessionId` 工作。
- 若实现中发现拖拽和分组样式冲突,优先保证组视觉和终端可操作性。