Files

T

yinjianm 1662b2b9e8 feat(frontend): polish connection tree and terminal groups

Add explorer-style tree search in the connections view with
match-path expansion, clearer count highlighting, and a refined
sidebar header layout.

Improve terminal tab grouping by keeping new sessions appended
within their server group, highlighting the active group, and
deduplicating broadcast actions to send commands once per server.

2026-03-25 23:19:53 +08:00

2.4 KiB

Raw Blame History

变更提案: connections-tree-search-explorer-polish

元信息

类型: 功能增强
方案类型: implementation
优先级: P1
状态: 进行中
状态说明: 已确认补左侧树搜索、节点计数高亮和资源管理器风格头部布局
创建: 2026-03-25

1. 需求

背景

连接管理页左侧树已经具备层级浏览和工具栏控制，但仍缺少独立的树内搜索能力，节点计数也偏弱提示；顶部结构离资源管理器式的“标题 + 工具栏 + 搜索条”仍有差距。

目标

为左侧树增加独立搜索输入。
搜索时仅保留命中节点及其祖先路径，并自动展开命中链路。
强化节点计数的视觉提示。
把左侧树头部整理成更像资源管理器的结构。

约束条件

范围约束: 优先限制在 ConnectionsView.vue，不改后端接口和 store 结构
交互约束: 树搜索独立于右侧全局连接搜索，不改变右侧结果筛选逻辑
展示约束: 仅显示命中节点及祖先路径，不把整棵子树全部保留
视觉约束: 延续当前黑绿主题与现有双栏管理台风格

验收标准

左侧树提供独立搜索框
搜索时仅显示命中节点及祖先路径，并自动展开命中链路
节点计数高亮明显强于当前普通状态
左侧头部布局更接近资源管理器风格
前端构建通过

2. 方案

技术方案

在 ConnectionsView.vue 中增加独立的 treeSearchQuery 和递归树过滤逻辑，对标签树按“自身命中或后代命中”规则裁剪，并在搜索态下强制展开命中链路；同时根据选中态、搜索态和命中态为节点计数生成不同的徽标样式。左侧头部改为资源管理器风格的标题区、工具条与搜索条组合。

影响范围

涉及模块:
  - frontend: ConnectionsView.vue
预计变更文件: 1

风险评估

风险	等级	应对
递归筛选后节点引用变化影响现有展开逻辑	中	搜索态和常规态分开处理，常规态继续复用 expandedTreeNodes，搜索态强制展开命中链路
左侧树搜索与右侧全局搜索语义混淆	低	明确区分占位文案和头部层级，让树搜索只作用于标签浏览范围
高亮过强破坏现有主题一致性	低	只增强计数徽标与命中行，不重写整套主题变量

2.4 KiB Raw Blame History