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

为连接管理页左侧标签树增加悬停工具按钮，补充分隔标题行与节点拖拽目标高亮提示。同时同步多语言文案与 helloagents 归档记录，为后续真实重排交互预留可见反馈入口
2026-03-25 23:37:33 +08:00
parent a6935a9c12
commit 9e49fcea61
10 changed files with 211 additions and 7 deletions
@@ -0,0 +1 @@
+{"status":"in_progress","completed":1,"failed":0,"pending":3,"total":4,"done":1,"percent":25,"current":"在 ConnectionsView 中补左侧树 hover 工具与拖拽占位反馈","updated_at":"2026-03-25 23:36:00"}
@@ -0,0 +1,58 @@
+# 变更提案: connections-tree-hover-drag-polish
+
+## 元信息
+```yaml
+类型: 功能增强
+方案类型: implementation
+优先级: P1
+状态: 进行中
+状态说明: 已确认继续补树节点 hover 工具操作、分隔标题行和拖拽重排占位交互
+创建: 2026-03-25
+```
+
+---
+
+## 1. 需求
+
+### 背景
+连接管理页左侧树已经具备搜索、命中链路展开、工具栏和资源管理器式头部，但和参考图相比仍少一层“可操作的树节点”体验：节点 hover 时没有工具按钮，分区层次还不够像资源管理器，拖拽重排也没有任何视觉占位。
+
+### 目标
+- 为树节点增加 hover 工具操作。
+- 补出更像资源管理器的分隔标题行。
+- 增加拖拽重排的交互占位与视觉反馈，为后续真实排序逻辑预留入口。
+
+### 约束条件
+```yaml
+范围约束: 优先限制在 ConnectionsView.vue，不改后端接口和标签数据结构
+交互约束: 拖拽仅提供占位和视觉反馈，不在本轮持久化真实顺序
+兼容约束: 保持现有树搜索、展开状态和范围切换逻辑不回退
+视觉约束: 延续当前黑绿主题与资源管理器式左侧结构
+```
+
+### 验收标准
+- [ ] 树节点 hover 时显示工具按钮
+- [ ] 左侧树分区标题行更接近资源管理器风格
+- [ ] 拖拽节点时出现明确的拖拽目标和占位反馈
+- [ ] 前端构建通过
+
+---
+
+## 2. 方案
+
+### 技术方案
+在 `ConnectionsView.vue` 中增加树节点 hover 状态、拖拽状态与占位提示状态；节点 hover 时显示“定位/展开收起/拖拽手柄”等工具按钮，分区标题改为带分隔线和计数的资源管理器式标题条；拖拽使用前端本地状态记录源节点和目标节点，仅绘制放置线、目标高亮与提示条，不真正修改树顺序。
+
+### 影响范围
+```yaml
+涉及模块:
+  - frontend: ConnectionsView.vue
+预计变更文件: 1
+```
+
+### 风险评估
+| 风险 | 等级 | 应对 |
+|------|------|------|
+| hover 工具按钮与节点点击行为冲突 | 中 | 所有工具按钮显式 `stopPropagation`，只执行自身动作 |
+| 拖拽占位状态与现有树搜索/展开状态叠加混乱 | 中 | 搜索态与拖拽态共用同一可见树结果，但视觉反馈独立渲染 |
+| 资源管理器式标题过度装饰影响信息密度 | 低 | 仅增强标题条、分隔线与计数，不引入额外卡片层级 |
@@ -0,0 +1,39 @@
+# 任务清单: connections-tree-hover-drag-polish
+
+```yaml
+@feature: connections-tree-hover-drag-polish
+@created: 2026-03-25
+@status: in_progress
+@mode: R2
+```
+
+## 进度概览
+
+| 完成 | 失败 | 跳过 | 总数 |
+|------|------|------|------|
+| 1 | 0 | 0 | 4 |
+
+---
+
+## 任务列表
+
+### 1. 方案与范围确认
+
+- [√] 1.1 创建左侧树 hover 工具与拖拽占位增强方案包 | depends_on: []
+
+### 2. 交互增强实现
+
+- [ ] 2.1 在 `ConnectionsView.vue` 中补树节点 hover 工具操作和资源管理器式分隔标题 | depends_on: [1.1]
+- [ ] 2.2 在左侧树中实现拖拽占位与目标视觉反馈 | depends_on: [2.1]
+
+### 3. 验证与同步
+
+- [ ] 3.1 运行前端构建验证并同步 `.helloagents` 文档与归档记录 | depends_on: [2.2]
+
+---
+
+## 执行日志
+
+| 时间 | 任务 | 状态 | 备注 |
+|------|------|------|------|
+| 2026-03-25 23:36 | 1.1 | 完成 | 创建 implementation 方案包，范围锁定为 ConnectionsView.vue 的左侧树 hover 工具与拖拽占位增强 |
@@ -18,6 +18,7 @@
 | 202603252207 | ssh-connection-multi-terminal | implementation | frontend | ssh-connection-multi-terminal#D001 | ✅完成 |
 | 202603252220 | connections-tree-toolbar-menu-polish | implementation | frontend | - | ✅完成 |
 | 202603252310 | connections-tree-search-explorer-polish | implementation | frontend | - | ✅完成 |
+| 202603252336 | connections-tree-hover-drag-polish | implementation | frontend | - | ✅完成 |
 | 202603252229 | terminal-tab-group-visual | implementation | frontend | terminal-tab-group-visual#D001 | ✅完成 |
 | 202603252256 | workspace-monitor-terminal-polish | implementation | workspace-root | workspace-monitor-terminal-polish#D001 | ✅完成 |
 | 202603251200 | workspace-workbench-monitor | implementation | frontend, backend | workspace-workbench-monitor#D001 | ✅完成 |
@@ -36,6 +37,7 @@
 - [202603252207_ssh-connection-multi-terminal](./2026-03/202603252207_ssh-connection-multi-terminal/) - 为同一 SSH 服务器连接补充多终端入口与终端序号标识
 - [202603252220_connections-tree-toolbar-menu-polish](./2026-03/202603252220_connections-tree-toolbar-menu-polish/) - 为连接管理页补树工具栏与展开/收起控制，并整理行内更多菜单
 - [202603252310_connections-tree-search-explorer-polish](./2026-03/202603252310_connections-tree-search-explorer-polish/) - 为连接管理页补左侧树搜索、命中链路过滤、节点计数高亮和资源管理器式头部布局
+- [202603252336_connections-tree-hover-drag-polish](./2026-03/202603252336_connections-tree-hover-drag-polish/) - 为连接管理页补树节点 hover 工具、分隔标题行和拖拽重排占位反馈
 - [202603252229_terminal-tab-group-visual](./2026-03/202603252229_terminal-tab-group-visual/) - 将顶部终端标签栏改成更明显的服务器组头与终端子标签
 - [202603252256_workspace-monitor-terminal-polish](./2026-03/202603252256_workspace-monitor-terminal-polish/) - 重新核对状态监控与终端标签剩余改动，并修正知识库归档索引与活跃方案状态
 - [202603251200_workspace-workbench-monitor](./2026-03/202603251200_workspace-workbench-monitor/) - `/workspace` 改为三栏 Workbench 布局，并新增开机累计流量监控
				`@@ -0,0 +1 @@`
				`{"status":"in_progress","completed":1,"failed":0,"pending":3,"total":4,"done":1,"percent":25,"current":"在 ConnectionsView 中补左侧树 hover 工具与拖拽占位反馈","updated_at":"2026-03-25 23:36:00"}`