diff --git a/src/components/composer/ComposerCard.vue b/src/components/composer/ComposerCard.vue index 61113a8..3f133c0 100644 --- a/src/components/composer/ComposerCard.vue +++ b/src/components/composer/ComposerCard.vue @@ -3,12 +3,8 @@ class="composer-card" :class="{ collapsed: isCollapsed && !command.isControlFlow, - 'drag-handle': !isLastCommandInChain, - 'no-animation': isClickingControl, }" v-bind="$attrs" - @mousedown="handleMouseDown" - @mouseup="handleMouseUp" > { - this.isClickingControl = false; - }, 100); - }, }, }); @@ -341,42 +323,14 @@ export default defineComponent({ position: relative; } -.composer-card.no-animation, -.composer-card.no-animation::before, -.composer-card.no-animation .command-item { +.composer-card, +.composer-card::before, +.composer-card .command-item { transition: none !important; transform: none !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; } -.composer-card.drag-handle { - cursor: grab; -} - -.composer-card.no-animation.drag-handle { - cursor: default; -} - -.composer-card.drag-handle:active { - cursor: grabbing; -} - -.composer-card.drag-handle:hover::before { - content: ""; - position: absolute; - inset: 0; - background: var(--q-primary); - opacity: 0.03; - border-radius: inherit; - transition: all 0.3s ease; - pointer-events: none; -} - -.composer-card.drag-handle:active::before { - opacity: 0.06; - transform: scale(0.99); -} - .command-item { transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); @@ -387,32 +341,11 @@ export default defineComponent({ will-change: transform; } -.drag-handle .command-item { - transition: transform 0.2s ease, box-shadow 0.3s ease; -} - -.drag-handle:hover .command-item { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); -} - -.drag-handle:active .command-item { - transform: translateY(0) scale(0.98); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); -} - /* 暗色模式适配 */ .body--dark .command-item { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } -.body--dark .drag-handle:hover .command-item { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); -} - -.body--dark .drag-handle:active .command-item { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); -} - .body--dark .composer-card.drag-handle:hover::before { background: rgba(255, 255, 255, 0.1); } diff --git a/src/components/composer/ComposerFlow.vue b/src/components/composer/ComposerFlow.vue index b6b665d..63fb592 100644 --- a/src/components/composer/ComposerFlow.vue +++ b/src/components/composer/ComposerFlow.vue @@ -642,4 +642,11 @@ export default defineComponent({ .flow-item.insert-before + .flow-item { transform: translateY(3px); } + +.flow-item.sortable-ghost { + opacity: 0.5; + transform: scale(0.99); + border: 1px solid var(--q-primary); + transition: all 0.3s ease; +} diff --git a/src/components/composer/card/CommandHead.vue b/src/components/composer/card/CommandHead.vue index 3622b6f..f9badde 100644 --- a/src/components/composer/card/CommandHead.vue +++ b/src/components/composer/card/CommandHead.vue @@ -20,7 +20,7 @@ -
+
{{ command.label }}
@@ -99,14 +99,9 @@ export default { .chain-icon { display: flex; align-items: center; - padding-right: 4px; transition: all 0.2s ease; } -.chain-icon { - margin-right: 4px; -} - .collapse-btn :deep(.q-btn), .chain-icon { opacity: 0.6; @@ -122,6 +117,13 @@ export default { .command-label { user-select: none; - pointer-events: none; + pointer-events: all; + cursor: grab; + transition: all 0.3s ease; +} + +.command-label:hover { + color: var(--q-primary); + transition: all 0.3s ease; } diff --git a/src/components/composer/control/ConditionalJudgment.vue b/src/components/composer/control/ConditionalJudgment.vue index 0c90767..828a6e1 100644 --- a/src/components/composer/control/ConditionalJudgment.vue +++ b/src/components/composer/control/ConditionalJudgment.vue @@ -3,11 +3,9 @@
- - - + + +
@@ -159,7 +157,7 @@ export default defineComponent({