admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(workspace): 增强连接管理与终端状态展示

Browse Source 
- 为连接管理页补充多级标签树、列头排序和行级更多菜单
- 支持同一 SSH 连接打开多个终端并显示终端序号
- 补充状态监控的内存与磁盘详情字段

---
✨ feat(workspace): enhance connection management and terminal status visibility

- add multi-level tag tree, sortable columns, and row-level more menu
- support multiple terminals per SSH connection with terminal indices
- extend status monitor with memory and disk detail fields
This commit is contained in:
yinjianm
2026-03-25 22:25:37 +08:00
parent 6553739c08
commit d730d06c5e
16 changed files with 798 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.helloagents/CHANGELOG.md
+4
View File
@@ -22,3 +22,7 @@
- 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/)
- **[frontend]**: 将连接管理页升级为左侧标签树、顶部搜索工具条和右侧结果列表的双栏管理台 — by yinjianm
- 方案: [202603250636_connections-view-tree-search-redesign](archive/2026-03/202603250636_connections-view-tree-search-redesign/)
- **[frontend]**: 为连接管理页补充多级标签树、列头排序和行级更多菜单，并支持分组范围与展开状态持久化 — by yinjianm
- 方案: [202603252152_connections-tree-sort-more-menu](archive/2026-03/202603252152_connections-tree-sort-more-menu/)
- **[frontend]**: 为同一 SSH 服务器连接补充多终端入口与终端序号标识，默认首次仍只打开一个终端 — by yinjianm
- 方案: [202603252207_ssh-connection-multi-terminal](archive/2026-03/202603252207_ssh-connection-multi-terminal/)
.helloagents/INDEX.md
+2 -2
View File
@@ -31,9 +31,9 @@
```yaml
kb_version: 2.3.7
最后更新: 2026-03-25 06:46
最后更新: 2026-03-25 22:19
模块数量: 4
待执行方案: 0
待执行方案: 2
```
## 读取指引
.helloagents/archive/2026-03/202603252152_connections-tree-sort-more-menu/.status.json
+1
View File
@@ -0,0 +1 @@
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"已完成连接管理页多级标签树、列头排序和更多菜单增强，并通过前端构建验证","updated_at":"2026-03-25 22:13:10"}
.helloagents/archive/2026-03/202603252152_connections-tree-sort-more-menu/proposal.md
+65
View File
@@ -0,0 +1,65 @@
# 变更提案: connections-tree-sort-more-menu
## 元信息
```yaml
类型: 功能增强
方案类型: implementation
优先级: P1
状态: 已完成
状态说明: 已完成连接管理页多级标签树、列头排序和更多菜单增强，并通过前端构建验证
创建: 2026-03-25
```
---
## 1. 需求
### 背景
连接管理页上一轮已经升级为左侧范围树、顶部工具条和右侧结果列表，但离参考图仍有明显差距：标签仍是单层列表，右侧列头无法直接排序，单行操作也缺少“更多”菜单承载克隆/删除等次级动作。
### 目标
- 将左侧标签区升级为支持层级展开的多级标签树。
- 将右侧结果列表升级为可点击列头排序。
- 为每一行补上“更多”菜单，承载克隆、删除等次级操作。
### 约束条件
```yaml
范围约束: 优先限制在 ConnectionsView.vue，不改后端接口和标签表结构
兼容约束: 保留现有连接、编辑、测试、批量编辑和批量删除能力
数据约束: 多级树基于现有标签名称推导，不新增 hierarchy 字段
视觉约束: 延续当前黑绿主题和现有双栏结构，不新增仓库入口
```
### 验收标准
- [ ] 左侧标签区支持按层级展开/折叠浏览
- [ ] 右侧列表列头可点击切换排序字段和方向
- [ ] 每一行提供“更多”菜单，并可执行至少克隆和删除动作
- [ ] 前端构建通过
---
## 2. 方案
### 技术方案
在 `ConnectionsView.vue` 中把标签列表改成树形数据结构，按标签名称中的层级分隔符推导父子节点；右侧结果列表增加列配置和点击式排序入口，统一映射到已有 `localSortBy` / `localSortOrder` 状态；每一行补充受控下拉菜单，集中放置克隆和删除等次级操作，避免主按钮区继续膨胀。
### 影响范围
```yaml
涉及模块:
- frontend: ConnectionsView.vue
预计变更文件: 1
```
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 现有标签名没有统一层级分隔符，树结构收益不稳定 | 中 | 同时兼容 `/`、`>`、`\\` 三类分隔符，无分隔符时退回单层节点 |
| 列头排序和顶部排序控件共存可能造成状态混乱 | 低 | 统一复用同一组排序状态，并在交互上以列头为主、顶部为辅助 |
| 行内更多菜单与批量模式选择冲突 | 低 | 菜单按钮在批量模式下保持可见但不触发行点击选择，事件显式 stopPropagation |
### 实施结果
- `ConnectionsView.vue` 已基于现有标签名推导出多级树结构，支持 `/`、`>`、`\\` 分隔的层级路径，并持久化展开状态。
- 左侧树节点现在支持分组范围选择，`group:*` scope 会在刷新后继续恢复，不再退回“全部”。
- 右侧结果列表新增名称、地址、上次连接三列的点击式排序，并继续复用顶部排序状态。
- 每一行新增“更多”菜单，已接入克隆和删除动作，且通过 `stopPropagation` 避免与批量选择冲突。
- `npm run build --workspace @nexus-terminal/frontend` 通过。
.helloagents/archive/2026-03/202603252152_connections-tree-sort-more-menu/tasks.md
+48
View File
@@ -0,0 +1,48 @@
# 任务清单: connections-tree-sort-more-menu
```yaml
@feature: connections-tree-sort-more-menu
@created: 2026-03-25
@status: completed
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 4 | 0 | 0 | 4 |
---
## 任务列表
### 1. 方案与范围确认
- [√] 1.1 创建连接管理页增强方案包并锁定为多级标签树、列头排序和更多菜单 | depends_on: []
### 2. 交互增强实现
- [√] 2.1 在 `ConnectionsView.vue` 中实现多级标签树和展开状态管理 | depends_on: [1.1]
- [√] 2.2 为右侧结果列表接入列头排序与行级更多菜单 | depends_on: [2.1]
### 3. 验证与同步
- [√] 3.1 运行前端构建验证并同步 `.helloagents` 文档与变更记录 | depends_on: [2.2]
---
## 执行日志
| 时间 | 任务 | 状态 | 备注 |
|------|------|------|------|
| 2026-03-25 21:52 | 1.1 | 完成 | 创建 implementation 方案包，范围锁定为 ConnectionsView.vue 的树形筛选与列表增强 |
| 2026-03-25 22:05 | 2.1 / 2.2 | 完成 | 实现多级标签树、展开状态持久化、列头排序与行级更多菜单，并补齐 group scope 刷新恢复 |
| 2026-03-25 22:13 | 3.1 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 通过，并同步知识库与归档记录 |
---
## 执行备注
- 本轮是 `connections-view-tree-search-redesign` 的后续增强，目标是继续向参考图靠拢，但仍限制在单页增量改造。
- 标签层级仍由现有标签名即时推导，不新增后端 hierarchy 字段，也不引入新的仓库视图入口。
.helloagents/archive/_index.md
+4
View File
@@ -13,6 +13,8 @@
| 202603250603 | dark-green-night-theme | implementation | frontend, backend | - | ✅完成 |
| 202603250614 | terminal-ansi-color-effects | implementation | frontend, backend | - | ✅完成 |
| 202603250636 | connections-view-tree-search-redesign | implementation | frontend | - | ✅完成 |
| 202603252152 | connections-tree-sort-more-menu | implementation | frontend | - | ✅完成 |
| 202603252207 | ssh-connection-multi-terminal | implementation | frontend | ssh-connection-multi-terminal#D001 | ✅完成 |
| 202603251200 | workspace-workbench-monitor | implementation | frontend, backend | workspace-workbench-monitor#D001 | ✅完成 |
## 按月归档
@@ -24,6 +26,8 @@
- [202603250603_dark-green-night-theme](./2026-03/202603250603_dark-green-night-theme/) - 将黑暗模式预设与终端默认主题统一调整为黑绿夜间风格
- [202603250614_terminal-ansi-color-effects](./2026-03/202603250614_terminal-ansi-color-effects/) - 修复终端文字效果覆盖 ANSI 彩色输出的问题，并将文字效果默认开关改为开启
- [202603250636_connections-view-tree-search-redesign](./2026-03/202603250636_connections-view-tree-search-redesign/) - 将连接管理页升级为左侧标签树、顶部搜索工具条和右侧结果列表的双栏管理台
- [202603252152_connections-tree-sort-more-menu](./2026-03/202603252152_connections-tree-sort-more-menu/) - 为连接管理页补充多级标签树、列头排序和行级更多菜单
- [202603252207_ssh-connection-multi-terminal](./2026-03/202603252207_ssh-connection-multi-terminal/) - 为同一 SSH 服务器连接补充多终端入口与终端序号标识
- [202603251200_workspace-workbench-monitor](./2026-03/202603251200_workspace-workbench-monitor/) - `/workspace` 改为三栏 Workbench 布局，并新增开机累计流量监控
## 结果状态说明
.helloagents/modules/frontend.md
+2 -2
View File
@@ -36,8 +36,8 @@
### 工作区交互
**条件**: 用户进入 `/workspace` 或相关管理页面。
**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控；当前 `/workspace` 默认主布局为“左侧 Workbench、中央终端、右侧状态监控”，其中 Workbench 以 tab 容器整合快捷指令、命令历史、文件管理和编辑器，默认激活快捷指令。`QuickCommandsView.vue` 内的新增按钮、空状态按钮和列表操作按钮统一复用 `bg-button`、`text-button-text`、`hover:bg-button-hover`、`hover:bg-border` 等主题变量类，避免写死黑白 hover 色值；`Terminal.vue` 会跟踪 xterm 的视口行号与贴底状态，在终端标签切换、重新激活和 `fit()` 后按原滚动意图恢复，并在渲染层为带 `xterm-fg-*` class 或内联 `style.color` 的显式前景色字符打标记，让终端文字描边/阴影仅作用于默认前景文本，不覆盖 ANSI 彩色输出；`ConnectionsView.vue` 已升级为“左侧范围树 + 顶部搜索工具条 + 右侧结果列表”的双栏管理台，左侧支持全部/未标记/标签树切换，右侧列表与类型筛选、搜索、排序、批量编辑和批量删除共用同一过滤管线；样式编辑器中的终端文字描边/阴影默认开关也已与新的黑绿终端风格保持默认开启。
**结果**: 页面逻辑分散在 `views/`、`components/`、`stores/` 与 `composables/`，其中布局与交互微调优先落在 `layout.store.ts`、`LayoutRenderer.vue`、`WorkspaceWorkbench.vue`、`QuickCommandsView.vue`、`ConnectionsView.vue`、`Terminal.vue`、`StyleCustomizerUiTab.vue`、`StyleCustomizerTerminalTab.vue` 和 `features/appearance/config/default-themes.ts`。
**行为**: 通过组件、Pinia 与 composable 协同管理终端、文件管理、命令历史、布局配置、主题和状态监控；当前 `/workspace` 默认主布局为“左侧 Workbench、中央终端、右侧状态监控”，其中 Workbench 以 tab 容器整合快捷指令、命令历史、文件管理和编辑器，默认激活快捷指令。`QuickCommandsView.vue` 内的新增按钮、空状态按钮和列表操作按钮统一复用 `bg-button`、`text-button-text`、`hover:bg-button-hover`、`hover:bg-border` 等主题变量类，避免写死黑白 hover 色值；`Terminal.vue` 会跟踪 xterm 的视口行号与贴底状态，在终端标签切换、重新激活和 `fit()` 后按原滚动意图恢复，并在渲染层为带 `xterm-fg-*` class 或内联 `style.color` 的显式前景色字符打标记，让终端文字描边/阴影仅作用于默认前景文本，不覆盖 ANSI 彩色输出；`session.store` 当前会为同一 SSH 连接下的新终端分配递增的 `terminalIndex`，`TerminalTabBar.vue` 则把当前连接“继续新增终端”和“改连其他服务器”拆成独立入口，并在标签上显示终端序号，从而实现“单连接默认 1 个终端、可继续追加多个终端”的交互；`ConnectionsView.vue` 已升级为“左侧范围树 + 顶部搜索工具条 + 右侧结果列表”的双栏管理台，当前左侧进一步支持基于标签名路径分隔符推导的多级标签树、树节点展开状态持久化和分组 scope 恢复，右侧结果列表则同时支持顶部排序控件、列头点击排序和行级“更多”菜单（克隆/删除）；样式编辑器中的终端文字描边/阴影默认开关也已与新的黑绿终端风格保持默认开启。
**结果**: 页面逻辑分散在 `views/`、`components/`、`stores/` 与 `composables/`，其中工作区终端行为和标签交互优先落在 `session.store.ts`、`session/actions/sessionActions.ts`、`session/getters.ts`、`TerminalTabBar.vue`、`WorkspaceView.vue`、`Terminal.vue` 与相关 locale 文件。
## 依赖关系