优化编排卡片拖拽逻辑和效果

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"
   >
     <q-card class="command-item">
       <q-card-section
@@ -133,7 +129,6 @@ export default defineComponent({
     return {
       showKeyRecorder: false,
       isCollapsed: false,
-      isClickingControl: false,
     };
   },
   watch: {
@@ -313,19 +308,6 @@ export default defineComponent({
         this.isCollapsed = !this.isCollapsed;
       }
     },
-    handleMouseDown(event) {
-      // 检查点击的元素是否是控制元素（按钮、输入框等）
-      const isControlElement = event.target.closest(
-        ".q-btn, .q-field, .q-icon, button, input, .border-label"
-      );
-      this.isClickingControl = !!isControlElement;
-    },
-    handleMouseUp() {
-      // 延迟重置状态，以确保动画不会立即触发
-      setTimeout(() => {
-        this.isClickingControl = false;
-      }, 100);
-    },
   },
 });
 </script>
@@ -341,42 +323,14 @@ export default defineComponent({
   position: relative;
 }
 
-.composer-card.no-animation,
+.composer-card,
-.composer-card.no-animation::before,
+.composer-card::before,
-.composer-card.no-animation .command-item {
+.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);
 }

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;
+}
 </style>

src/components/composer/card/CommandHead.vue

@@ -20,7 +20,7 @@
     </div>
 
     <!-- 标题 -->
-    <div v-if="!isControlFlow" class="text-subtitle2 command-label">
+    <div class="text-subtitle2 command-label q-px-sm drag-handle">
       {{ command.label }}
     </div>
 
@@ -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;
 }
 </style>

src/components/composer/control/ConditionalJudgment.vue

@@ -3,11 +3,9 @@
     <div class="row items-end no-wrap">
       <!-- 类型标签 -->
       <div class="control-type-label">
-        <template v-if="type === 'if'">如果满足</template>
+        <template v-if="type === 'if'">如果</template>
-        <template v-else-if="type === 'else'">
+        <template v-else-if="type === 'else'"> 否则 </template>
-          {{ showCondition ? "否则满足" : "否则" }}
+        <template v-else>结束</template>
-        </template>
-        <template v-else>结束条件判断</template>
       </div>
 
       <!-- if类型显示添加按钮 -->
@@ -159,7 +157,7 @@ export default defineComponent({
 
 <style scoped>
 .control-type-label {
-  font-size: 14px;
+  font-size: 13px;
   white-space: nowrap;
   opacity: 0.9;
   user-select: none;

src/components/composer/control/LoopControl.vue

@@ -3,10 +3,10 @@
     <div class="loop-control row">
       <!-- 类型标签和按钮区域 -->
       <div class="control-type-label">
-        <template v-if="type === 'loop'">循环</template>
+        <template v-if="type === 'loop'">开始</template>
-        <template v-else-if="type === 'continue'">继续循环</template>
+        <template v-else-if="type === 'continue'">继续</template>
-        <template v-else-if="type === 'break'">终止循环</template>
+        <template v-else-if="type === 'break'">终止</template>
-        <template v-else>结束循环</template>
+        <template v-else>结束</template>
       </div>
 
       <!-- 只在循环开始时显示添加按钮 -->
@@ -193,7 +193,7 @@ export default defineComponent({
 }
 
 .control-type-label {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   white-space: nowrap;
   opacity: 0.9;