Files

T

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

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

同步优化树头部为资源管理器式布局，并强化节点计数高亮；
补充中英日文案，同时归档并更新 helloagents 记录。

2026-03-25 23:27:00 +08:00

2.9 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，搜索态强制展开命中链路
左侧树搜索与右侧全局搜索语义混淆	低	明确区分占位文案和头部层级，让树搜索只作用于标签浏览范围
高亮过强破坏现有主题一致性	低	只增强计数徽标与命中行，不重写整套主题变量

实施结果

ConnectionsView.vue 已新增独立的左侧树搜索输入，不影响右侧连接列表的全局搜索。
搜索时会递归保留命中节点及其祖先路径，并自动展开命中链路；未命中时显示树内空状态。
节点计数徽标已按选中态、命中态和普通有结果态区分视觉层级。
左侧头部已调整为资源管理器风格的“图标标题区 + 搜索条 + 工具栏”结构。
npm run build --workspace @nexus-terminal/frontend 通过。

2.9 KiB Raw Blame History