# 变更提案: connections-view-tree-search-redesign

## 元信息
```yaml
类型: 功能增强
方案类型: implementation
优先级: P1
状态: 已完成
状态说明: 已完成连接管理页整体交互改造，并通过前端构建验证
创建: 2026-03-25
```

---

## 1. 需求

### 背景
当前连接管理页仍是“搜索框 + 标签下拉 + 单列表”的传统结构，分标签搜索体验过于原始，和用户提供的参考图相比，缺少左侧分组树、范围切换和结果面板之间的联动。

### 目标
- 将连接管理页改成更接近参考图的“两栏工作台”交互。
- 左侧提供标签/分组树，支持全部、未标记和标签范围切换。
- 顶部提供更完整的搜索工具条和类型筛选。
- 右侧结果列表在保留现有连接操作能力的同时，提升信息密度和可浏览性。

### 约束条件
```yaml
范围约束: 优先限制在 ConnectionsView.vue，尽量不改动后端接口和 store 数据结构
兼容约束: 保留现有连接、编辑、测试、批量编辑、批量删除等操作能力
数据约束: 基于现有 tags 与 connections 数据构造树和筛选，不新增后端字段
视觉约束: 延续项目当前黑绿主题，不引入与现有风格冲突的第三方组件
```

### 验收标准
- [ ] 连接管理页出现左侧标签/分组树、顶部搜索工具条、右侧结果列表三部分结构
- [ ] 左侧树能切换全部、未标记和具体标签范围，并同步更新结果数
- [ ] 顶部搜索与类型筛选能联动右侧结果列表
- [ ] 现有连接、编辑、测试、批量编辑和批量删除能力可继续使用
- [ ] 前端构建通过

---

## 2. 方案

### 技术方案
在 `ConnectionsView.vue` 内部重组状态模型：把当前“标签下拉筛选”升级为显式的侧边栏树节点选择，把“搜索框 + 排序”升级为顶部工具条，并将原本的连接卡片列表改造成接近管理面板风格的信息行列表。树结构基于现有标签数据和连接数量即时构造，不新增后端 schema；为兼容现有能力，批量编辑、批量删除、测试、连接和编辑动作仍复用现有 store action。

### 影响范围
```yaml
涉及模块:
  - frontend: ConnectionsView.vue 主体交互与布局
预计变更文件: 1
```

### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 在单文件内叠加过多状态导致可维护性下降 | 中 | 按“筛选状态 / 树数据 / 列表数据 / 行为动作”分段整理 script 结构 |
| 批量编辑模式与新列表布局交互冲突 | 低 | 保留原有选择集逻辑，只调整呈现方式 |
| 标签树与搜索结果计数不一致 | 低 | 统一由单一过滤管线生成树计数和结果列表 |

### 实施结果
- `ConnectionsView.vue` 已从“搜索框 + 标签下拉 + 单列表”改造成“左侧范围树 + 顶部工具条 + 右侧结果列表”的两栏工作台布局。
- 左侧新增全部、未标记和标签树节点，节点计数会跟随当前类型筛选和搜索结果联动更新。
- 顶部工具条新增类型切换、搜索、排序、批量模式开关，并保留新增连接、测试全部和连接全部能力。
- 右侧结果区改为信息密度更高的管理列表，同时兼容连接、编辑、测试、批量编辑和批量删除。
- `npm run build --workspace @nexus-terminal/frontend` 通过。