feat:删除按钮悬浮出现

This commit is contained in:
liailing1026
2026-03-13 17:14:53 +08:00
parent 05f6a07d26
commit 344a0d1439
3 changed files with 35 additions and 7 deletions

View File

@@ -1732,6 +1732,7 @@ defineExpose({
transition: all 0.2s ease; transition: all 0.2s ease;
z-index: 10; z-index: 10;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2); box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
opacity: 0;
&:active { &:active {
transform: translateX(-50%) scale(0.95); 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 { .agent-node-wrapper {
position: relative; position: relative;
display: flex; display: flex;
@@ -1904,8 +1911,9 @@ defineExpose({
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease, opacity 0.2s ease;
z-index: 100; z-index: 100;
opacity: 0;
// 左侧位置 // 左侧位置
&.left { &.left {
@@ -1930,8 +1938,9 @@ defineExpose({
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease, opacity 0.2s ease;
z-index: 100; z-index: 100;
opacity: 0;
top: -12px; top: -12px;
right: -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保持一致 // 边样式 - 与PlanModification.vue保持一致
::deep(.vue-flow__edge.selected .vue-flow__edge-path) { ::deep(.vue-flow__edge.selected .vue-flow__edge-path) {
stroke: #409eff; stroke: #409eff;

View File

@@ -356,11 +356,17 @@ const isDeletable = computed(() => props.isDeletable || false)
transition: all 0.2s ease; transition: all 0.2s ease;
z-index: 10; z-index: 10;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2); box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
opacity: 0;
&:active { &:active {
transform: translateX(-50%) scale(0.95); transform: translateX(-50%) scale(0.95);
} }
// hover 时显示
.node-wrapper:hover & {
opacity: 1;
}
// 取消按钮样式 // 取消按钮样式
&.cancel-btn { &.cancel-btn {
border-color: #f56c6c; border-color: #f56c6c;
@@ -390,8 +396,9 @@ const isDeletable = computed(() => props.isDeletable || false)
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease, opacity 0.2s ease;
z-index: 100; z-index: 100;
opacity: 0;
// 左侧位置 // 左侧位置
&.left { &.left {
@@ -410,6 +417,11 @@ const isDeletable = computed(() => props.isDeletable || false)
background-color: #0c0c0c; background-color: #0c0c0c;
} }
} }
// 节点容器 hover 时显示删除按钮
.node-wrapper:hover .node-delete-btn {
opacity: 1;
}
</style> </style>
<style> <style>

View File

@@ -50,10 +50,10 @@ export default defineConfig({
// target: 'http://82.157.183.212:21092', // target: 'http://82.157.183.212:21092',
// target: 'http://82.157.183.212:21097', // target: 'http://82.157.183.212:21097',
target: 'http://localhost:8000', target: 'http://localhost:8000',
// rewrite: (path: string) => path.replace(/^\/api/, ''), rewrite: (path: string) => path.replace(/^\/api/, ''),
// configure: (proxy, options) => { configure: (proxy, options) => {
// console.log('Proxy configured:', options) console.log('Proxy configured:', options)
// }, },
}, },
}, },
}, },