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

## 元信息
```yaml
类型: 功能增强
方案类型: implementation
优先级: P1
状态: 已完成
状态说明: 已完成左侧树搜索、节点计数高亮和资源管理器风格头部布局，并通过前端构建验证
创建: 2026-03-25
```

---

## 1. 需求

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

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

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

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

---

## 2. 方案

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

### 影响范围
```yaml
涉及模块:
  - frontend: ConnectionsView.vue
预计变更文件: 1
```

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

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