Files

T

yinjianm 9e49fcea61 feat(frontend): 增强连接树悬停操作与拖拽占位反馈

为连接管理页左侧标签树增加悬停工具按钮，
补充分隔标题行与节点拖拽目标高亮提示。

同时同步多语言文案与 helloagents 归档记录，
为后续真实重排交互预留可见反馈入口

2026-03-25 23:37:33 +08:00

2.3 KiB

Raw Blame History

变更提案: connections-tree-hover-drag-polish

元信息

类型: 功能增强
方案类型: implementation
优先级: P1
状态: 进行中
状态说明: 已确认继续补树节点 hover 工具操作、分隔标题行和拖拽重排占位交互
创建: 2026-03-25

1. 需求

背景

连接管理页左侧树已经具备搜索、命中链路展开、工具栏和资源管理器式头部，但和参考图相比仍少一层“可操作的树节点”体验：节点 hover 时没有工具按钮，分区层次还不够像资源管理器，拖拽重排也没有任何视觉占位。

目标

为树节点增加 hover 工具操作。
补出更像资源管理器的分隔标题行。
增加拖拽重排的交互占位与视觉反馈，为后续真实排序逻辑预留入口。

约束条件

范围约束: 优先限制在 ConnectionsView.vue，不改后端接口和标签数据结构
交互约束: 拖拽仅提供占位和视觉反馈，不在本轮持久化真实顺序
兼容约束: 保持现有树搜索、展开状态和范围切换逻辑不回退
视觉约束: 延续当前黑绿主题与资源管理器式左侧结构

验收标准

树节点 hover 时显示工具按钮
左侧树分区标题行更接近资源管理器风格
拖拽节点时出现明确的拖拽目标和占位反馈
前端构建通过

2. 方案

技术方案

在 ConnectionsView.vue 中增加树节点 hover 状态、拖拽状态与占位提示状态；节点 hover 时显示“定位/展开收起/拖拽手柄”等工具按钮，分区标题改为带分隔线和计数的资源管理器式标题条；拖拽使用前端本地状态记录源节点和目标节点，仅绘制放置线、目标高亮与提示条，不真正修改树顺序。

影响范围

涉及模块:
  - frontend: ConnectionsView.vue
预计变更文件: 1

风险评估

风险	等级	应对
hover 工具按钮与节点点击行为冲突	中	所有工具按钮显式 `stopPropagation`，只执行自身动作
拖拽占位状态与现有树搜索/展开状态叠加混乱	中	搜索态与拖拽态共用同一可见树结果，但视觉反馈独立渲染
资源管理器式标题过度装饰影响信息密度	低	仅增强标题条、分隔线与计数，不引入额外卡片层级

2.3 KiB Raw Blame History