feat(frontend): redesign connections management view

Upgrade the connections page to a two-pane management console with a scope tree, search toolbar, type filters, and a denser results list while keeping existing connect, edit, test, and batch actions available. Also archive the completed ANSI terminal effects follow-up and sync frontend/backend knowledge base records for the new default terminal text effect behavior.
2026-03-25 21:50:26 +08:00
parent 7e430cb983
commit 6553739c08
14 changed files with 1021 additions and 578 deletions
@@ -0,0 +1 @@
+{"status":"completed","completed":5,"failed":0,"pending":0,"total":5,"done":5,"percent":100,"current":"已完成连接管理页双栏重构与前端构建验证，等待归档","updated_at":"2026-03-25 06:45:00"}
@@ -0,0 +1,67 @@
+# 变更提案: 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` 通过。
@@ -0,0 +1,50 @@
+# 任务清单: connections-view-tree-search-redesign
+
+```yaml
+@feature: connections-view-tree-search-redesign
+@created: 2026-03-25
+@status: completed
+@mode: R2
+```
+
+## 进度概览
+
+| 完成 | 失败 | 跳过 | 总数 |
+|------|------|------|------|
+| 5 | 0 | 0 | 5 |
+
+---
+
+## 任务列表
+
+### 1. 方案与范围确认
+
+- [√] 1.1 创建连接管理页整体交互改造方案包并锁定为前端单页重构 | depends_on: []
+
+### 2. 页面结构重构
+
+- [√] 2.1 重构 `ConnectionsView.vue` 的状态模型，建立标签树、类型筛选和统一过滤管线 | depends_on: [1.1]
+- [√] 2.2 将页面改成左侧标签树 + 顶部搜索工具条 + 右侧结果列表布局 | depends_on: [2.1]
+
+### 3. 交互兼容与验证
+
+- [√] 3.1 将现有连接、编辑、测试、批量编辑和批量删除动作接回新布局 | depends_on: [2.2]
+- [√] 3.2 运行前端构建验证并同步 `.helloagents` 文档与变更记录 | depends_on: [3.1]
+
+---
+
+## 执行日志
+
+| 时间 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 2026-03-25 06:36 | 1.1 | 完成 | 创建 implementation 方案包，范围锁定为 ConnectionsView.vue 的整体交互改造 |
+| 2026-03-25 06:40 | 2.1 / 2.2 | 完成 | 在 ConnectionsView.vue 中建立标签树、类型筛选和统一过滤管线，并完成双栏管理台布局 |
+| 2026-03-25 06:43 | 3.1 | 完成 | 将连接、编辑、测试、批量编辑和批量删除动作接回新布局 |
+| 2026-03-25 06:45 | 3.2 | 完成 | `npm run build --workspace @nexus-terminal/frontend` 通过，并同步知识库记录 |
+
+---
+
+## 执行备注
+
+- 当前优先目标是把“分标签搜索”从下拉筛选升级成显式的左侧树 + 结果面板联动。
+- 若单文件重构完成度足够，则不额外拆新组件，先保证交互升级闭环。
				`@@ -0,0 +1 @@`
				`{"status":"completed","completed":5,"failed":0,"pending":0,"total":5,"done":5,"percent":100,"current":"已完成连接管理页双栏重构与前端构建验证，等待归档","updated_at":"2026-03-25 06:45:00"}`