feat(frontend): 增强连接树悬停操作与拖拽占位反馈
为连接管理页左侧标签树增加悬停工具按钮, 补充分隔标题行与节点拖拽目标高亮提示。 同时同步多语言文案与 helloagents 归档记录, 为后续真实重排交互预留可见反馈入口
This commit is contained in:
+1
@@ -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"}
|
||||
+58
@@ -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 工具与拖拽占位增强 |
|
||||
Reference in New Issue
Block a user