完善条件判断的删除添加逻辑，添加编排卡片折叠功能

src/components/composer/card/CommandButtons.vue

@@ -4,14 +4,13 @@
       <!-- 输出变量设置和按钮 -->
       <div
         class="output-section row items-center no-wrap"
-        v-if="!showDeleteOnly"
+        v-if="!isControlFlow"
       >
         <!-- 变量输入框 -->
         <q-input
           v-if="command.saveOutput"
           :model-value="command.outputVariable"
           @update:model-value="$emit('update:outputVariable', $event)"
-          dense
           outlined
           placeholder="变量名"
           class="variable-input"
@@ -19,13 +18,9 @@
         >
         </q-input>
         <!-- 保存变量按钮 -->
-        <q-btn
-          :icon="command.saveOutput ? 'data_object' : 'output'"
-          :label="command.saveOutput ? '保存到变量' : '获取输出'"
-          flat
-          dense
+        <q-icon
+          :name="command.saveOutput ? 'data_object' : 'output'"
           class="output-btn"
-          size="sm"
           @click="$emit('toggle-output')"
         >
           <q-tooltip>
@@ -44,35 +39,28 @@
               }}
             </div>
           </q-tooltip>
-        </q-btn>
+        </q-icon>
       </div>
 
       <!-- 操作按钮组 -->
       <div class="action-buttons row items-center no-wrap">
-        <q-btn
-          flat
-          dense
-          v-if="!showDeleteOnly"
-          round
-          icon="play_arrow"
-          class="run-btn q-mr-xs"
-          size="sm"
+        <q-icon
+          v-if="!isControlFlow"
+          name="play_arrow"
+          class="run-btn"
           @click="$emit('run')"
         >
           <q-tooltip>单独运行此命令并打印输出</q-tooltip>
-        </q-btn>
+        </q-icon>
 
-        <q-btn
-          flat
-          round
-          dense
-          icon="close"
+        <q-icon
+          name="close"
           @click="$emit('remove')"
-          size="sm"
           class="remove-btn"
+          v-if="!isLastCommandInChain"
         >
           <q-tooltip>移除此命令</q-tooltip>
-        </q-btn>
+        </q-icon>
       </div>
     </div>
   </div>
@@ -86,12 +74,30 @@ export default {
       type: Object,
       required: true,
     },
-    showDeleteOnly: {
+    isCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    isControlFlow: {
+      type: Boolean,
+      default: false,
+    },
+    isFirstCommandInChain: {
+      type: Boolean,
+      default: false,
+    },
+    isLastCommandInChain: {
       type: Boolean,
       default: false,
     },
   },
-  emits: ["update:outputVariable", "toggle-output", "run", "remove"],
+  emits: [
+    "update:outputVariable",
+    "toggle-output",
+    "run",
+    "remove",
+    "toggle-collapse",
+  ],
 };
 </script>
 
@@ -99,11 +105,12 @@ export default {
 .command-buttons {
   display: flex;
   align-items: center;
+  height: 20px;
 }
 
 /* 输出部分样式 */
 .output-section {
-  margin-right: 8px;
+  /* margin-right: 8px; */
   gap: 8px;
 }
 
@@ -116,13 +123,13 @@ export default {
 }
 
 .output-section :deep(.q-field__control) {
-  height: 28px;
-  min-height: 28px;
+  height: 20px;
+  min-height: 20px;
   padding: 0 4px;
 }
 
 .output-section :deep(.q-field__marginal) {
-  height: 28px;
+  height: 20px;
   width: 24px;
   min-width: 24px;
 }
@@ -130,7 +137,7 @@ export default {
 .output-section :deep(.q-field__native) {
   padding: 0;
   font-size: 12px;
-  min-height: 28px;
+  min-height: 20px;
   text-align: center;
 }
 
@@ -138,18 +145,20 @@ export default {
 .output-btn,
 .run-btn,
 .remove-btn {
-  font-size: 12px;
-  border-radius: 4px;
-  min-height: 28px;
+  font-size: 18px;
+  min-height: 25px;
+  cursor: pointer;
   opacity: 0.6;
   transition: all 0.3s ease;
+  padding: 0 4px;
 }
 
 .output-btn:hover,
 .run-btn:hover,
 .remove-btn:hover {
   opacity: 1;
-  transform: scale(1.05);
+  transform: scale(1.1) translateY(-1px);
+  transition: all 0.3s ease;
 }
 
 .run-btn:hover {

src/components/composer/card/CommandHead.vue

@@ -1,13 +1,19 @@
 <template>
-  <div
-    class="row items-center"
-    :class="{
-      'q-pb-sm': !isControlFlow,
-    }"
-  >
-    <!-- 拖拽手柄 -->
-    <div class="drag-handle q-mr-sm" draggable="true">
-      <q-icon name="drag_indicator" size="18px" class="text-grey-6" />
+  <div class="row items-center">
+    <!-- 折叠按钮 -->
+    <div class="collapse-btn" v-if="!isLastCommandInChain">
+      <q-btn
+        :icon="isCollapsed ? 'expand_more' : 'expand_less'"
+        dense
+        flat
+        size="sm"
+        @click="$emit('toggle-collapse')"
+      >
+        <q-tooltip>折叠/展开此{{ isControlFlow ? "流程" : "命令" }}</q-tooltip>
+      </q-btn>
+    </div>
+    <div v-else class="end-icon">
+      <q-icon name="last_page" size="xs" />
     </div>
 
     <!-- 标题 -->
@@ -23,8 +29,11 @@
     <!-- 按钮组 -->
     <CommandButtons
       :command="command"
-      :show-delete-only="isControlFlow"
       v-bind="$attrs"
+      :isCollapsed="isCollapsed"
+      :isControlFlow="isControlFlow"
+      :isFirstCommandInChain="isFirstCommandInChain"
+      :isLastCommandInChain="isLastCommandInChain"
       @update:outputVariable="$emit('update:outputVariable', $event)"
       @toggle-output="$emit('toggle-output')"
       @run="$emit('run')"
@@ -46,50 +55,66 @@ export default {
       type: Object,
       required: true,
     },
-    isControlFlow: {
+    isCollapsed: {
       type: Boolean,
       default: false,
     },
   },
-  emits: ["update:outputVariable", "toggle-output", "run", "remove"],
+  emits: [
+    "update:outputVariable",
+    "toggle-output",
+    "run",
+    "remove",
+    "toggle-collapse",
+  ],
   computed: {
     contentClass() {
       return {
         col: true,
-        "q-ml-md": !this.isControlFlow,
+        "q-ml-md": !this.command.isControlFlow,
       };
     },
+    isControlFlow() {
+      return this.command.isControlFlow;
+    },
+    isFirstCommandInChain() {
+      if (!this.command.commandChain) return false;
+      return this.command.commandType === this.command.commandChain?.[0];
+    },
+    isLastCommandInChain() {
+      if (!this.command.commandChain) return false;
+      return (
+        this.command.commandType === this.command.commandChain?.slice(-1)[0]
+      );
+    },
   },
 };
 </script>
 
 <style scoped>
-.drag-handle {
+.collapse-btn,
+.end-icon {
   display: flex;
   align-items: center;
-  padding: 0 4px;
-  cursor: grab;
+  padding-right: 4px;
+  transition: all 0.2s ease;
+}
+
+.collapse-btn :deep(.q-btn),
+.end-icon {
   opacity: 0.6;
-  transition: all 0.2s ease;
+  min-height: 20px;
+  padding: 0 4px;
 }
 
-.row:hover .drag-handle {
-  opacity: 0.8;
-}
-
-.drag-handle:hover {
+.collapse-btn :deep(.q-btn:hover) {
   opacity: 1;
+  transform: scale(1.1) translateY(-1px);
   color: var(--q-primary);
-  transform: scale(1.2);
-  transition: all 0.2s ease;
-}
-
-.drag-handle:active {
-  cursor: grabbing;
-  transform: scale(0.95);
 }
 
 .command-label {
   user-select: none;
+  pointer-events: none;
 }
 </style>