diff --git a/frontend/src/layout/components/Main/TaskTemplate/TaskProcess/components/PlanTask.vue b/frontend/src/layout/components/Main/TaskTemplate/TaskProcess/components/PlanTask.vue index dc960c7..d60cf43 100644 --- a/frontend/src/layout/components/Main/TaskTemplate/TaskProcess/components/PlanTask.vue +++ b/frontend/src/layout/components/Main/TaskTemplate/TaskProcess/components/PlanTask.vue @@ -1732,6 +1732,7 @@ defineExpose({ transition: all 0.2s ease; z-index: 10; box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2); + opacity: 0; &:active { transform: translateX(-50%) scale(0.95); @@ -1744,6 +1745,12 @@ defineExpose({ } } +// hover 时显示添加按钮 +.task-node-wrapper:hover .external-add-btn, +.root-task-node-wrapper:hover .external-add-btn { + opacity: 1; +} + .agent-node-wrapper { position: relative; display: flex; @@ -1904,8 +1911,9 @@ defineExpose({ align-items: center; justify-content: center; cursor: pointer; - transition: background-color 0.2s ease; + transition: background-color 0.2s ease, opacity 0.2s ease; z-index: 100; + opacity: 0; // 左侧位置 &.left { @@ -1930,8 +1938,9 @@ defineExpose({ align-items: center; justify-content: center; cursor: pointer; - transition: background-color 0.2s ease; + transition: background-color 0.2s ease, opacity 0.2s ease; z-index: 100; + opacity: 0; top: -12px; right: -12px; @@ -1940,6 +1949,13 @@ defineExpose({ } } +// hover 时显示删除按钮 +.task-node-wrapper:hover .node-delete-btn, +.task-node-wrapper:hover .node-delete-btn-single, +.root-task-node-wrapper:hover .node-delete-btn { + opacity: 1; +} + // 边样式 - 与PlanModification.vue保持一致 ::deep(.vue-flow__edge.selected .vue-flow__edge-path) { stroke: #409eff; diff --git a/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/Branch/components/TaskNode.vue b/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/Branch/components/TaskNode.vue index 25c1d22..1dbbc4d 100644 --- a/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/Branch/components/TaskNode.vue +++ b/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/Branch/components/TaskNode.vue @@ -356,11 +356,17 @@ const isDeletable = computed(() => props.isDeletable || false) transition: all 0.2s ease; z-index: 10; box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2); + opacity: 0; &:active { transform: translateX(-50%) scale(0.95); } + // hover 时显示 + .node-wrapper:hover & { + opacity: 1; + } + // 取消按钮样式 &.cancel-btn { border-color: #f56c6c; @@ -390,8 +396,9 @@ const isDeletable = computed(() => props.isDeletable || false) align-items: center; justify-content: center; cursor: pointer; - transition: background-color 0.2s ease; + transition: background-color 0.2s ease, opacity 0.2s ease; z-index: 100; + opacity: 0; // 左侧位置 &.left { @@ -410,6 +417,11 @@ const isDeletable = computed(() => props.isDeletable || false) background-color: #0c0c0c; } } + +// 节点容器 hover 时显示删除按钮 +.node-wrapper:hover .node-delete-btn { + opacity: 1; +}