Files

T

yinjianm 6553739c08 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

3.3 KiB

Raw Blame History

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

元信息

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

1. 需求

背景

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

目标

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

约束条件

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

验收标准

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

2. 方案

技术方案

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

影响范围

涉及模块:
  - frontend: ConnectionsView.vue 主体交互与布局
预计变更文件: 1

风险评估

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

实施结果

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

3.3 KiB Raw Blame History