feat(frontend): 增强连接树搜索与资源管理器布局

为连接管理页左侧标签树新增独立搜索能力,支持命中节点、
祖先链路过滤与自动展开,提升大规模连接下的检索效率。

同步优化树头部为资源管理器式布局,并强化节点计数高亮;
补充中英日文案,同时归档并更新 helloagents 记录。
This commit is contained in:
yinjianm
2026-03-25 23:27:00 +08:00
parent 1662b2b9e8
commit a6935a9c12
12 changed files with 94 additions and 46 deletions
+2
View File
@@ -32,6 +32,8 @@
- 方案: [202603252152_connections-tree-sort-more-menu](archive/2026-03/202603252152_connections-tree-sort-more-menu/)
- **[frontend]**: 为连接管理页补树工具栏与展开/收起控制,并将行内次级操作整理进更完整的更多菜单 — by yinjianm
- 方案: [202603252220_connections-tree-toolbar-menu-polish](archive/2026-03/202603252220_connections-tree-toolbar-menu-polish/)
- **[frontend]**: 为连接管理页补左侧树搜索、命中链路过滤、节点计数高亮和资源管理器式头部布局 — by yinjianm
- 方案: [202603252310_connections-tree-search-explorer-polish](archive/2026-03/202603252310_connections-tree-search-explorer-polish/)
- **[frontend]**: 为同一 SSH 服务器连接补充多终端入口与终端序号标识,默认首次仍只打开一个终端 — by yinjianm
- 方案: [202603252207_ssh-connection-multi-terminal](archive/2026-03/202603252207_ssh-connection-multi-terminal/)
- **[frontend]**: 将顶部终端标签栏升级为“服务器组头 + 终端子标签 + 组尾新增按钮”,让同服务器多终端关系更直观 — by yinjianm
@@ -0,0 +1 @@
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"done":4,"percent":100,"current":"已完成左侧树搜索与资源管理器式头部增强,并通过前端构建验证","updated_at":"2026-03-25 23:19:00"}
@@ -5,8 +5,8 @@
类型: 功能增强
方案类型: implementation
优先级: P1
状态: 进行中
状态说明: 已确认补左侧树搜索、节点计数高亮和资源管理器风格头部布局
状态: 已完成
状态说明: 已完成左侧树搜索、节点计数高亮和资源管理器风格头部布局,并通过前端构建验证
创建: 2026-03-25
```
@@ -58,3 +58,10 @@
| 递归筛选后节点引用变化影响现有展开逻辑 | 中 | 搜索态和常规态分开处理,常规态继续复用 expandedTreeNodes,搜索态强制展开命中链路 |
| 左侧树搜索与右侧全局搜索语义混淆 | 低 | 明确区分占位文案和头部层级,让树搜索只作用于标签浏览范围 |
| 高亮过强破坏现有主题一致性 | 低 | 只增强计数徽标与命中行,不重写整套主题变量 |
### 实施结果
- `ConnectionsView.vue` 已新增独立的左侧树搜索输入,不影响右侧连接列表的全局搜索。
- 搜索时会递归保留命中节点及其祖先路径,并自动展开命中链路;未命中时显示树内空状态。
- 节点计数徽标已按选中态、命中态和普通有结果态区分视觉层级。
- 左侧头部已调整为资源管理器风格的“图标标题区 + 搜索条 + 工具栏”结构。
- `npm run build --workspace @nexus-terminal/frontend` 通过。
@@ -0,0 +1,48 @@
# 任务清单: connections-tree-search-explorer-polish
```yaml
@feature: connections-tree-search-explorer-polish
@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 23:10 | 1.1 | 完成 | 创建 implementation 方案包,范围锁定为 ConnectionsView.vue 的左侧树搜索与资源管理器式头部增强 |
| 2026-03-25 23:16 | 2.1 / 2.2 | 完成 | 实现树搜索、命中链路过滤、节点计数高亮和资源管理器式头部布局 |
| 2026-03-25 23:19 | 3.1 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 通过,并同步知识库与归档记录 |
---
## 执行备注
- 本轮是在树工具栏和更多菜单整理之后,继续加强左侧树的浏览密度和检索能力。
- 搜索只作用于树结构本身,不改变右侧连接列表的全局搜索语义。
+2
View File
@@ -17,6 +17,7 @@
| 202603252200 | server-status-memory-disk-cards | implementation | frontend, backend | server-status-memory-disk-cards#D001, server-status-memory-disk-cards#D002 | ✅完成 |
| 202603252207 | ssh-connection-multi-terminal | implementation | frontend | ssh-connection-multi-terminal#D001 | ✅完成 |
| 202603252220 | connections-tree-toolbar-menu-polish | implementation | frontend | - | ✅完成 |
| 202603252310 | connections-tree-search-explorer-polish | implementation | frontend | - | ✅完成 |
| 202603252229 | terminal-tab-group-visual | implementation | frontend | terminal-tab-group-visual#D001 | ✅完成 |
| 202603252256 | workspace-monitor-terminal-polish | implementation | workspace-root | workspace-monitor-terminal-polish#D001 | ✅完成 |
| 202603251200 | workspace-workbench-monitor | implementation | frontend, backend | workspace-workbench-monitor#D001 | ✅完成 |
@@ -34,6 +35,7 @@
- [202603252200_server-status-memory-disk-cards](./2026-03/202603252200_server-status-memory-disk-cards/) - 为服务器状态补齐参考图风格的内存/磁盘卡片,并扩展后端监控字段与磁盘 I/O 速率
- [202603252207_ssh-connection-multi-terminal](./2026-03/202603252207_ssh-connection-multi-terminal/) - 为同一 SSH 服务器连接补充多终端入口与终端序号标识
- [202603252220_connections-tree-toolbar-menu-polish](./2026-03/202603252220_connections-tree-toolbar-menu-polish/) - 为连接管理页补树工具栏与展开/收起控制,并整理行内更多菜单
- [202603252310_connections-tree-search-explorer-polish](./2026-03/202603252310_connections-tree-search-explorer-polish/) - 为连接管理页补左侧树搜索、命中链路过滤、节点计数高亮和资源管理器式头部布局
- [202603252229_terminal-tab-group-visual](./2026-03/202603252229_terminal-tab-group-visual/) - 将顶部终端标签栏改成更明显的服务器组头与终端子标签
- [202603252256_workspace-monitor-terminal-polish](./2026-03/202603252256_workspace-monitor-terminal-polish/) - 重新核对状态监控与终端标签剩余改动,并修正知识库归档索引与活跃方案状态
- [202603251200_workspace-workbench-monitor](./2026-03/202603251200_workspace-workbench-monitor/) - `/workspace` 改为三栏 Workbench 布局,并新增开机累计流量监控
+1 -1
View File
@@ -36,7 +36,7 @@
### 工作区交互
**条件**: 用户进入 `/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 彩色输出;`session.store` 当前会为同一 SSH 连接下的新终端分配递增的 `terminalIndex``TerminalTabBar.vue` 则进一步把连续同连接会话渲染成“服务器组头 + 终端子标签 + 组尾新增按钮”,全局 `+` 只负责选择其他服务器,从而让“单连接默认 1 个终端、可继续追加多个终端”的关系在顶部标签栏里更接近参考图;`ConnectionsView.vue` 已升级为“左侧范围树 + 顶部搜索工具条 + 右侧结果列表”的双栏管理台,当前左侧进一步支持基于标签名路径分隔符推导的多级标签树、树节点展开状态持久化、分组 scope 恢复,以及树工具栏中的展开全部、收起全部和重置范围控制;右侧结果列表则同时支持顶部排序控件、列头点击排序,并将行内操作整理为“连接”主按钮加“更多”菜单(编辑/测试/克隆/删除);样式编辑器中的终端文字描边/阴影默认开关也已与新的黑绿终端风格保持默认开启。
**行为**: 通过组件、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 文件。
## 依赖关系
@@ -1 +0,0 @@
{"status":"in_progress","completed":1,"failed":0,"pending":3,"total":4,"done":1,"percent":25,"current":"在 ConnectionsView 中实现左侧树搜索和资源管理器式头部布局","updated_at":"2026-03-25 23:10:00"}
@@ -1,39 +0,0 @@
# 任务清单: connections-tree-search-explorer-polish
```yaml
@feature: connections-tree-search-explorer-polish
@created: 2026-03-25
@status: in_progress
@mode: R2
```
## 进度概览
| 完成 | 失败 | 跳过 | 总数 |
|------|------|------|------|
| 1 | 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 23:10 | 1.1 | 完成 | 创建 implementation 方案包,范围锁定为 ConnectionsView.vue 的左侧树搜索与资源管理器式头部增强 |
+8
View File
@@ -364,6 +364,11 @@
"status": {
"never": "Never"
},
"scopeExplorerTitle": "Tag Explorer",
"scopeHintCompact": "Tree nodes are grouped by tag path",
"scopeTreeSearch": "Search tag tree...",
"scopeSearchMode": "Matched paths are expanded",
"scopeTreeNoMatch": "No matching tree nodes",
"untaggedGroup": "Untagged",
"noUntaggedConnections": "No untagged connections found."
},
@@ -1097,6 +1102,9 @@
"height": "Height",
"reconnect": "Reconnect",
"retry": "Retry",
"reset": "Reset",
"expandAll": "Expand All",
"collapseAll": "Collapse All",
"sortAscending": "Ascending",
"sortDescending": "Descending",
"restore": "Restore",
+8
View File
@@ -100,6 +100,9 @@
"reconnect": "再接続",
"remove": "削除",
"retry": "再試行",
"reset": "リセット",
"expandAll": "すべて展開",
"collapseAll": "すべて折りたたむ",
"save": "保存",
"saving": "保存中...",
"saved": "保存済み",
@@ -265,6 +268,11 @@
"status": {
"never": "なし"
},
"scopeExplorerTitle": "タグエクスプローラー",
"scopeHintCompact": "ツリーノードはタグパスごとに整理されます",
"scopeTreeSearch": "タグツリーを検索...",
"scopeSearchMode": "一致したパスを自動展開中",
"scopeTreeNoMatch": "一致するツリーノードはありません",
"table": {
"actions": "アクション",
"authMethod": "認証方法",
+8
View File
@@ -364,6 +364,11 @@
"status": {
"never": "从未"
},
"scopeExplorerTitle": "标签资源管理器",
"scopeHintCompact": "树节点按标签路径自动分层",
"scopeTreeSearch": "搜索标签树...",
"scopeSearchMode": "命中路径已自动展开",
"scopeTreeNoMatch": "没有匹配的树节点",
"untaggedGroup": "未标记",
"noUntaggedConnections": "没有未标记的连接。"
},
@@ -1094,6 +1099,9 @@
"height": "高度",
"reconnect": "重新连接",
"retry": "重试",
"reset": "重置",
"expandAll": "展开全部",
"collapseAll": "收起全部",
"sortAscending": "升序",
"sortDescending": "降序",
"restore": "还原",
@@ -1079,13 +1079,17 @@ onBeforeUnmount(() => {
'w-full flex items-center justify-between gap-3 rounded-xl border px-3 py-2.5 text-left transition-all duration-150',
getScopeNodeClass(node.id)
]"
:class="getTreeCountClass(node)"
>
<span class="flex items-center gap-2 min-w-0">
<i :class="['fas', node.id === 'all' ? 'fa-layer-group' : 'fa-tag', 'w-4 text-center']"></i>
<span class="truncate">{{ node.label }}</span>
</span>
<span class="px-2 py-0.5 rounded-full text-xs border border-current/15 bg-black/10">
<span
:class="[
'px-2 py-0.5 rounded-full text-xs border transition-colors',
getTreeCountClass(node)
]"
>
{{ node.count }}
</span>
</button>
@@ -1094,7 +1098,7 @@ onBeforeUnmount(() => {
<section>
<div class="px-2 mb-2 flex items-center justify-between gap-3 text-xs font-semibold uppercase tracking-[0.18em] text-text-secondary/80">
<span>{{ t('connections.table.tags', '标签资源管理器') }}</span>
<span>{{ t('connections.scopeExplorerTitle', '标签资源管理器') }}</span>
<span class="text-[11px] tracking-normal normal-case text-text-secondary">{{ visibleTagTreeNodes.length }}</span>
</div>