From 37ebebc5acf299f20a1b62da97d6bdc2326c8658 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Wed, 1 Jan 2025 23:07:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=9D=A1=E4=BB=B6=E5=88=A4?=
 =?UTF-8?q?=E6=96=AD=E7=9A=84=E5=88=A0=E9=99=A4=E6=B7=BB=E5=8A=A0=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=BC=96=E6=8E=92=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=8A=98=E5=8F=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/composer/ComposerCard.vue      | 217 ++++++++--
 src/components/composer/ComposerFlow.vue      | 206 +++++++++-
 .../composer/card/CommandButtons.vue          |  81 ++--
 src/components/composer/card/CommandHead.vue  |  83 ++--
 .../composer/control/ConditionalJudgment.vue  |  32 +-
 src/components/composer/flow/ChainStyles.vue  | 379 +++++++++---------
 .../composer/{ => flow}/ComposerButtons.vue   |  87 ++--
 7 files changed, 727 insertions(+), 358 deletions(-)
 rename src/components/composer/{ => flow}/ComposerButtons.vue (64%)

diff --git a/src/components/composer/ComposerCard.vue b/src/components/composer/ComposerCard.vue
index f19a3a5..c80c350 100644
--- a/src/components/composer/ComposerCard.vue
+++ b/src/components/composer/ComposerCard.vue
@@ -1,12 +1,26 @@
 <template>
-  <div class="composer-card" :class="{ 'can-drop': canDrop }" v-bind="$attrs">
+  <div
+    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 class="q-pa-sm">
+      <q-card-section
+        class="card-section"
+        :class="{ collapsed: isCollapsed || command.isControlFlow }"
+      >
         <CommandHead
           :command="command"
-          :is-control-flow="command.isControlFlow"
+          :is-collapsed="isCollapsed"
           @update:outputVariable="handleOutputVariableUpdate"
           @toggle-output="handleToggleOutput"
+          @toggle-collapse="handleToggleCollapse"
           @run="runCommand"
           @remove="$emit('remove')"
         >
@@ -29,21 +43,27 @@
         </CommandHead>
 
         <!-- 非控制流程组件的参数输入 -->
-        <div v-if="!command.isControlFlow" class="row items-center q-mt-sm">
-          <component
-            v-if="!!command.component"
-            :is="command.component"
-            v-model="argvLocal"
-            :command="command"
-            class="col"
-            v-bind="command.componentProps || {}"
-          />
-          <MultiParamInput
-            v-else
-            v-model="argvLocal"
-            :command="command"
-            class="col"
-          />
+        <div
+          v-if="!command.isControlFlow"
+          class="command-content-wrapper"
+          :class="{ collapsed: isCollapsed }"
+        >
+          <div class="command-content">
+            <component
+              v-if="!!command.component"
+              :is="command.component"
+              v-model="argvLocal"
+              :command="command"
+              class="col"
+              v-bind="command.componentProps || {}"
+            />
+            <MultiParamInput
+              v-else
+              v-model="argvLocal"
+              :command="command"
+              class="col"
+            />
+          </div>
         </div>
       </q-card-section>
     </q-card>
@@ -101,7 +121,7 @@ export default defineComponent({
       type: String,
       default: "",
     },
-    canDrop: {
+    isDragging: {
       type: Boolean,
       default: false,
     },
@@ -109,8 +129,20 @@ export default defineComponent({
   data() {
     return {
       showKeyRecorder: false,
+      isCollapsed: false,
+      isClickingControl: false,
     };
   },
+  watch: {
+    "command.isCollapsed": {
+      immediate: true,
+      handler(val) {
+        if (val !== undefined) {
+          this.isCollapsed = val;
+        }
+      },
+    },
+  },
   emits: [
     "remove",
     "toggle-output",
@@ -118,6 +150,7 @@ export default defineComponent({
     "update:command",
     "run",
     "addBranch",
+    "toggle-collapse",
   ],
   computed: {
     saveOutputLocal: {
@@ -166,6 +199,12 @@ export default defineComponent({
     showOutputBtn() {
       return !this.command.isControlFlow;
     },
+    isLastCommandInChain() {
+      if (!this.command.commandChain) return false;
+      return (
+        this.command.commandType === this.command.commandChain?.slice(-1)[0]
+      );
+    },
   },
   setup() {
     const addVariable = inject("addVariable");
@@ -259,6 +298,31 @@ export default defineComponent({
       };
       this.$emit("run", tempCommand);
     },
+    handleToggleCollapse() {
+      if (this.command.isControlFlow) {
+        // 控制命令的折叠，直接传递给父组件处理
+        this.$emit("toggle-collapse", {
+          isCollapsed: this.isCollapsed,
+          chainId: this.command.chainId,
+        });
+      } else {
+        // 非控制命令的折叠，更新自身状态
+        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>
@@ -269,28 +333,68 @@ export default defineComponent({
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   transform-origin: center;
   opacity: 1;
-  padding: 2px 2px 2px 0;
   transform: translateY(0) scale(1);
+  border-radius: inherit;
+  position: relative;
+}
+
+.composer-card.no-animation,
+.composer-card.no-animation::before,
+.composer-card.no-animation .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);
   border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: inherit;
+  user-select: none;
+  transform: translateZ(0);
+  will-change: transform;
 }
 
-.command-item:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+.drag-handle .command-item {
+  transition: transform 0.2s ease, box-shadow 0.3s ease;
 }
 
-/* 拖拽和放置样式 */
-.can-drop {
-  transform: scale(1.02);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+.drag-handle:hover .command-item {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
-.can-drop .command-item {
-  border: 2px dashed var(--q-primary);
+.drag-handle:active .command-item {
+  transform: translateY(0) scale(0.98);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }
 
 /* 暗色模式适配 */
@@ -298,12 +402,61 @@ export default defineComponent({
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.body--dark .command-item:hover {
-  box-shadow: 0 4px 8px rgba(58, 58, 58, 0.3);
+.body--dark .drag-handle:hover .command-item {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
-.body--dark .can-drop {
-  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);
+}
+
+.body--dark .composer-card.drag-handle:active::before {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* 收起状态样式 */
+.composer-card.collapsed {
+  transform-origin: top;
+}
+
+.composer-card.collapsed .command-item {
+  min-height: 20px;
+}
+
+/* 卡片内容区域动画 */
+.card-section {
+  transition: padding 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 8px;
+}
+
+.card-section.collapsed {
+  padding: 2px 8px;
+}
+
+/* 命令内容动画 */
+.command-content-wrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  margin-top: 8px;
+}
+
+.command-content {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.command-content-wrapper.collapsed {
+  grid-template-rows: 0fr;
+  margin-top: 0;
+}
+
+.command-content-wrapper.collapsed .command-content {
+  opacity: 0;
 }
 
 /* 调整控制流程组件的样式 */
diff --git a/src/components/composer/ComposerFlow.vue b/src/components/composer/ComposerFlow.vue
index 81716ba..3e306df 100644
--- a/src/components/composer/ComposerFlow.vue
+++ b/src/components/composer/ComposerFlow.vue
@@ -1,13 +1,16 @@
 <template>
   <div class="composer-flow">
     <ChainStyles ref="chainStyles" :commands="commands" />
-    <div class="section-header">
-      <q-icon name="timeline" size="20px" class="q-mx-sm text-primary" />
-      <span class="text-subtitle1">命令流程</span>
-      <q-space />
+    <div class="section-header flow-header">
+      <div class="flow-title">
+        <q-icon name="timeline" size="20px" class="q-mx-sm text-primary" />
+        <span class="text-subtitle1">命令流程</span>
+      </div>
       <ComposerButtons
         :generate-code="generateCode"
-        @action="$emit('action', $event)"
+        :is-all-collapsed="isAllCollapsed"
+        @action="handleAction"
+        class="flex-grow"
       />
     </div>
 
@@ -23,8 +26,8 @@
           group="commands"
           item-key="id"
           class="flow-list"
-          handle=".drag-handle"
           :animation="200"
+          handle=".drag-handle"
           @start="onDragStart"
           @end="onDragEnd"
           @change="onDragChange"
@@ -39,6 +42,7 @@
                   'insert-after':
                     dragIndex === commands.length &&
                     index === commands.length - 1,
+                  ...getCollapsedChainClass(index),
                   ...getChainGroupClass(index),
                 }"
               >
@@ -51,6 +55,7 @@
                   @update:command="(val) => updateCommand(index, val)"
                   @run="handleRunCommand"
                   @add-branch="(chainInfo) => addBranch(index, chainInfo)"
+                  @toggle-collapse="(event) => handleControlFlowCollapse(event)"
                 />
               </div>
             </transition>
@@ -67,7 +72,7 @@
 import { defineComponent, inject } from "vue";
 import draggable from "vuedraggable";
 import ComposerCard from "./ComposerCard.vue";
-import ComposerButtons from "./ComposerButtons.vue";
+import ComposerButtons from "./flow/ComposerButtons.vue";
 import ChainStyles from "./flow/ChainStyles.vue";
 import EmptyFlow from "./flow/EmptyFlow.vue";
 import DropArea from "./flow/DropArea.vue";
@@ -102,6 +107,8 @@ export default defineComponent({
       dragIndex: -1,
       isDragging: false,
       draggedCommand: null,
+      collapsedRanges: [],
+      isAllCollapsed: false,
     };
   },
   computed: {
@@ -284,15 +291,53 @@ export default defineComponent({
     getUniqueId() {
       return this.$root.getUniqueId();
     },
+    isFirstCommandInChain(command) {
+      if (!command.commandChain) return false;
+      return command.commandType === command.commandChain?.[0];
+    },
+    removeRangeCommand(startIndex, endIndex, chainId) {
+      if (!endIndex) endIndex = startIndex;
+      const newCommands = [...this.commands];
+      // 从后往前删除，避免索引变化
+      for (let i = endIndex; i >= startIndex; i--) {
+        const cmd = newCommands[i];
+        // 如果chainId不为空，则只删除指定chainId的命令
+        if (chainId && cmd.chainId !== chainId) continue;
+        if (cmd.outputVariable) {
+          this.removeVariable(cmd.outputVariable);
+        }
+        newCommands.splice(i, 1);
+      }
+      this.$emit("update:modelValue", newCommands);
+    },
     removeCommand(index) {
       const command = this.commands[index];
-      // 如果命令有输出变量，需要先清理
-      if (command.outputVariable) {
-        this.removeVariable(command.outputVariable);
+
+      // 如果是控制流程的起始命令
+      if (this.isFirstCommandInChain(command)) {
+        // 显示确认对话框
+        quickcommand
+          .showButtonBox(["全部删除", "保留内部命令", "手抖👋🏻"])
+          .then(({ id }) => {
+            if (id !== 0 && id !== 1) return;
+            const newCommands = [...this.commands];
+            const chainId = command.chainId;
+            const lastIndex = newCommands.findLastIndex(
+              (cmd) => cmd.chainId === chainId
+            );
+            const startIndex = newCommands.findIndex(
+              (cmd) => cmd.chainId === chainId
+            );
+            this.removeRangeCommand(
+              startIndex,
+              lastIndex,
+              id === 0 ? null : chainId
+            );
+          });
+      } else {
+        // 如果不是控制流程的起始命令，直接删除
+        this.removeRangeCommand(index);
       }
-      const newCommands = [...this.commands];
-      newCommands.splice(index, 1);
-      this.$emit("update:modelValue", newCommands);
     },
     toggleSaveOutput(index) {
       const newCommands = [...this.commands];
@@ -358,6 +403,87 @@ export default defineComponent({
         this.$emit("update:modelValue", newCommands);
       }
     },
+    handleControlFlowCollapse(event) {
+      const chainId = event.chainId;
+      const isCollapsed = !event.isCollapsed; // 取反，因为我们要切换状态
+      if (!chainId) return;
+
+      // 遍历commands找到相同chainId的第一个和最后一个命令的index
+      const startIndex = this.commands.findIndex(
+        (cmd) => cmd.chainId === chainId
+      );
+      const endIndex = this.commands.findLastIndex(
+        (cmd) => cmd.chainId === chainId
+      );
+
+      if (startIndex === -1 || endIndex === -1) return;
+
+      // 更新命令的折叠状态
+      const newCommands = [...this.commands];
+      newCommands[startIndex] = {
+        ...newCommands[startIndex],
+        isCollapsed,
+      };
+
+      this.$emit("update:modelValue", newCommands);
+
+      if (isCollapsed) {
+        // 折叠命令：添加新的折叠区间
+        this.collapsedRanges.push({
+          chainId,
+          start: startIndex,
+          end: endIndex,
+        });
+      } else {
+        // 展开命令：移除对应的折叠区间
+        const existingRangeIndex = this.collapsedRanges.findIndex(
+          (range) => range.chainId === chainId
+        );
+        if (existingRangeIndex !== -1) {
+          this.collapsedRanges.splice(existingRangeIndex, 1);
+        }
+      }
+    },
+    getCollapsedChainClass(index) {
+      // 找出所有包含当前index的折叠区间
+      const matchingRanges = this.collapsedRanges.filter(
+        (range) => index >= range.start && index <= range.end
+      );
+      if (!matchingRanges.length) return {};
+      // 检查是否是任意区间的中间或结束位置
+      const isAnyMiddleEnd = matchingRanges.some(
+        (range) => index > range.start && index <= range.end
+      );
+      // 只要在任何区间内部，无论是否是开始位置，都返回hidden样式，解决嵌套问题
+      return isAnyMiddleEnd
+        ? { "collapsed-chain-hidden": true }
+        : { "collapsed-chain-start": true };
+    },
+    handleAction(action, payload) {
+      if (action === "collapseAll") {
+        this.collapseAll();
+      } else if (action === "expandAll") {
+        this.expandAll();
+      } else {
+        this.$emit("action", action, payload);
+      }
+    },
+    collapseAll() {
+      const newCommands = this.commands.map((cmd) => ({
+        ...cmd,
+        isCollapsed: true,
+      }));
+      this.$emit("update:modelValue", newCommands);
+      this.isAllCollapsed = true;
+    },
+    expandAll() {
+      const newCommands = this.commands.map((cmd) => ({
+        ...cmd,
+        isCollapsed: false,
+      }));
+      this.$emit("update:modelValue", newCommands);
+      this.isAllCollapsed = false;
+    },
   },
 });
 </script>
@@ -377,6 +503,17 @@ export default defineComponent({
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   display: flex;
   align-items: center;
+  gap: 8px;
+}
+
+.flow-title {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.flex-grow {
+  flex-grow: 1;
 }
 
 .command-scroll {
@@ -461,10 +598,49 @@ export default defineComponent({
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.03), 0 0 4px rgba(0, 0, 0, 0.05);
 }
 
-/* 拖拽时的卡片效果 */
+/* 流程卡片 */
 .flow-item {
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
+  margin: 3px 0;
+  border-radius: 5px;
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+/* 隐藏的链式命令 */
+.collapsed-chain-hidden {
+  grid-template-rows: 0fr !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  overflow: hidden !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.collapsed-chain-hidden > * {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.flow-item.chain-start {
+  border-radius: 5px 5px 0 0;
+  margin: 0;
+}
+
+.flow-item.chain-start.collapsed-chain-start {
+  border-radius: 5px;
+}
+
+.flow-item.chain-middle {
+  border-radius: 0;
+  margin: 0;
+}
+
+.flow-item.chain-end {
+  border-radius: 0 0 5px 5px;
+  margin: 0;
 }
 
 .flow-item.insert-before {
diff --git a/src/components/composer/card/CommandButtons.vue b/src/components/composer/card/CommandButtons.vue
index cbe48ca..a2e0bb1 100644
--- a/src/components/composer/card/CommandButtons.vue
+++ b/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 {
diff --git a/src/components/composer/card/CommandHead.vue b/src/components/composer/card/CommandHead.vue
index ba01a26..7472eba 100644
--- a/src/components/composer/card/CommandHead.vue
+++ b/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>
diff --git a/src/components/composer/control/ConditionalJudgment.vue b/src/components/composer/control/ConditionalJudgment.vue
index 410e892..6917ada 100644
--- a/src/components/composer/control/ConditionalJudgment.vue
+++ b/src/components/composer/control/ConditionalJudgment.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="conditional-judgment">
-    <div class="row items-center no-wrap">
+    <div class="row items-end no-wrap">
       <!-- 类型标签 -->
       <div class="text-subtitle2 type-label">
         <template v-if="type === 'if'">如果满足</template>
@@ -14,7 +14,6 @@
       <q-btn
         v-if="type === 'if'"
         flat
-        round
         dense
         size="sm"
         icon="add"
@@ -33,10 +32,9 @@
       <q-btn
         v-if="type === 'else'"
         flat
-        round
         dense
         size="sm"
-        :icon="showCondition ? 'unfold_less' : 'unfold_more'"
+        :icon="showCondition ? 'remove' : 'add'"
         class="control-btn q-mx-xs"
         @click="toggleCondition"
       >
@@ -49,7 +47,6 @@
         v-model="conditionLocal"
         dense
         borderless
-        :bg-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
         placeholder="输入条件表达式"
         class="condition-input"
       />
@@ -161,10 +158,6 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.conditional-judgment {
-  padding: 4px 0;
-}
-
 .type-label {
   font-size: 14px;
   color: var(--q-primary);
@@ -178,17 +171,19 @@ export default defineComponent({
   transition: all 0.3s ease;
 }
 
-.condition-input :deep(.q-field__control) {
-  padding: 0 16px;
-  height: 24px !important;
-  min-height: 24px;
+.condition-input :deep(.q-field__control),
+.condition-input :deep(.q-field__native) {
+  padding: 1px;
+  height: 21px !important;
+  min-height: 21px;
   border-radius: 4px;
+  font-size: 13px;
 }
 
 .control-btn {
-  width: 24px;
-  height: 24px;
-  min-height: 24px;
+  width: 21px;
+  height: 21px;
+  min-height: 21px;
   opacity: 0.7;
   transition: all 0.2s ease;
 }
@@ -198,11 +193,6 @@ export default defineComponent({
   transform: scale(1.1);
 }
 
-/* 暗色模式适配 */
-.body--dark .condition-input {
-  background: rgba(255, 255, 255, 0.05) !important;
-}
-
 .body--dark .type-label {
   color: var(--q-primary);
   opacity: 0.8;
diff --git a/src/components/composer/flow/ChainStyles.vue b/src/components/composer/flow/ChainStyles.vue
index 63db38f..1439029 100644
--- a/src/components/composer/flow/ChainStyles.vue
+++ b/src/components/composer/flow/ChainStyles.vue
@@ -1,9 +1,83 @@
 <template>
-  <component :is="'style'" v-if="chainStyles">{{ chainStyles }}</component>
+  <component :is="'style'" v-if="styles">{{ styles }}</component>
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, ref, watchEffect, computed } from "vue";
+
+// 样式常量
+const STYLE_CONSTANTS = {
+  goldenRatio: 0.618033988749895,
+  hueStep: 360 * 0.618033988749895,
+  indent: 5,
+  lightSl: "60%, 60%",
+  darkSl: "60%, 40%",
+};
+
+// 工具函数
+const generateStyleString = (selector, rules) => {
+  return `${selector} {
+${Object.entries(rules)
+  .map(
+    ([prop, value]) =>
+      `  ${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value} !important;`
+  )
+  .join("\n")}
+}`;
+};
+
+const generateShadows = (
+  parentChainIds,
+  hue,
+  indent,
+  lightSl,
+  darkSl,
+  uniqueChainIds
+) => {
+  return parentChainIds.reduce(
+    (acc, parentChainId, i) => {
+      const parentIndex = uniqueChainIds.indexOf(parentChainId);
+      const parentHue = (parentIndex * STYLE_CONSTANTS.hueStep) % 360;
+      const start = -((i + 2) * indent);
+      acc.light.push(`${start}px 0 0 0 hsl(${parentHue}, ${lightSl})`);
+      acc.dark.push(`${start}px 0 0 0 hsl(${parentHue}, ${darkSl})`);
+      return acc;
+    },
+    {
+      light: [`-${indent}px 0 0 0 hsl(${hue}, ${lightSl})`],
+      dark: [`-${indent}px 0 0 0 hsl(${hue}, ${darkSl})`],
+    }
+  );
+};
+
+// 获取链组
+const getChainGroups = (commands) => {
+  const groups = [];
+  const activeGroups = new Map();
+
+  for (let i = 0; i < commands.length; i++) {
+    const cmd = commands[i];
+    if (!cmd.chainId) continue;
+
+    if (cmd.commandType === cmd.commandChain?.[0]) {
+      activeGroups.set(cmd.chainId, {
+        chainId: cmd.chainId,
+        startIndex: i,
+      });
+    } else if (
+      cmd.commandType === cmd.commandChain?.[cmd.commandChain.length - 1]
+    ) {
+      const group = activeGroups.get(cmd.chainId);
+      if (group) {
+        group.endIndex = i;
+        groups.push({ ...group });
+        activeGroups.delete(cmd.chainId);
+      }
+    }
+  }
+
+  return groups;
+};
 
 export default defineComponent({
   name: "ChainStyles",
@@ -13,204 +87,119 @@ export default defineComponent({
       required: true,
     },
   },
-  computed: {
-    uniqueChainIds() {
-      return this.commands
-        .filter(
-          (cmd) => cmd.chainId && cmd.commandType === cmd.commandChain?.[0]
-        )
-        .map((cmd) => cmd.chainId)
-        .filter((chainId, index, self) => self.indexOf(chainId) === index);
-    },
-    chainGroups() {
-      const groups = [];
-      const activeGroups = new Map(); // 用于跟踪活动的组
+  setup(props) {
+    const styles = ref("");
+    const chainGroups = computed(() => getChainGroups(props.commands));
 
-      this.commands.forEach((cmd, index) => {
-        if (cmd.chainId) {
-          if (cmd.commandType === cmd.commandChain?.[0]) {
-            // 开始一个新的组
-            activeGroups.set(cmd.chainId, {
-              chainId: cmd.chainId,
-              startIndex: index,
-            });
-          } else if (
-            cmd.commandType === cmd.commandChain?.[cmd.commandChain.length - 1]
-          ) {
-            // 结束一个组
-            const group = activeGroups.get(cmd.chainId);
-            if (group) {
-              group.endIndex = index;
-              groups.push({ ...group });
-              activeGroups.delete(cmd.chainId);
+    // 使用 watchEffect 监听 commands 变化并重新计算样式
+    watchEffect(() => {
+      // 如果 commands 为空，不生成样式
+      if (!props.commands?.length) {
+        styles.value = "";
+        return;
+      }
+
+      try {
+        // 1. 获取唯一的链ID
+        const uniqueChainIds = [
+          ...new Set(
+            props.commands
+              .filter(
+                (cmd) =>
+                  cmd.chainId && cmd.commandType === cmd.commandChain?.[0]
+              )
+              .map((cmd) => cmd.chainId)
+          ),
+        ];
+
+        // 2. 使用计算好的链组
+        const groups = chainGroups.value;
+
+        // 3. 生成样式
+        const styleRules = {};
+        const { hueStep, indent, lightSl, darkSl } = STYLE_CONSTANTS;
+
+        uniqueChainIds.forEach((chainId, index) => {
+          const hue = (index * hueStep) % 360;
+          const className = "chain-group-" + chainId;
+
+          // 计算深度
+          const currentGroup = groups.find((g) => g.chainId === chainId);
+          if (!currentGroup) return;
+
+          let depth = 1;
+          const parents = [];
+
+          for (const group of groups) {
+            if (
+              group.startIndex < currentGroup.startIndex &&
+              group.endIndex > currentGroup.endIndex
+            ) {
+              depth++;
+              parents.push(group.chainId);
+            }
+          }
+
+          const shadows = generateShadows(
+            parents,
+            hue,
+            indent,
+            lightSl,
+            darkSl,
+            uniqueChainIds
+          );
+
+          const commonStyle = {
+            marginLeft: `calc(${indent}px * ${depth - 1})`,
+          };
+
+          styleRules["." + className] = {
+            ...commonStyle,
+            boxShadow: shadows.light.join(", "),
+          };
+
+          styleRules[".body--dark ." + className] = {
+            ...commonStyle,
+            boxShadow: shadows.dark.join(", "),
+          };
+        });
+
+        // 4. 生成最终的样式字符串
+        styles.value = Object.entries(styleRules)
+          .map(([selector, rules]) => generateStyleString(selector, rules))
+          .join("\n\n");
+      } catch (error) {
+        console.error("Error generating chain styles:", error);
+        styles.value = "";
+      }
+    });
+
+    return {
+      styles,
+      getChainGroupClass(index) {
+        const classes = {};
+
+        // 使用计算好的链组
+        for (const group of chainGroups.value) {
+          if (index >= group.startIndex && index <= group.endIndex) {
+            classes[`chain-group-${group.chainId}`] = true;
+
+            if (index === group.startIndex) {
+              classes["chain-start"] = true;
+            } else if (index === group.endIndex) {
+              classes["chain-end"] = true;
+            } else {
+              classes["chain-middle"] = true;
+              //清除嵌套控制流程的冲突样式
+              classes["chain-start"] = false;
+              classes["chain-end"] = false;
             }
           }
         }
-      });
 
-      return groups;
-    },
-    styleConstants() {
-      return {
-        goldenRatio: 0.618033988749895,
-        hueStep: 360 * 0.618033988749895,
-        indent: 5,
-        lightSl: "60%, 60%",
-        darkSl: "60%, 40%",
-      };
-    },
-    chainStylesMap() {
-      const styles = {};
-      const { hueStep, indent, lightSl, darkSl } = this.styleConstants;
-
-      // 先添加圆角样式规则
-      styles[".chain-start"] = { borderRadius: "4px 4px 0 0" };
-      styles[".chain-end"] = { borderRadius: "0 4px 0 4px" };
-      styles[".chain-middle"] = { borderRadius: "0 4px 0 0" };
-
-      this.uniqueChainIds.forEach((chainId, index) => {
-        const hue = (index * hueStep) % 360;
-        const className = "chain-group-" + chainId;
-        const depth = this.getChainDepth(chainId);
-        const parentChainIds = this.getParentChainIds(chainId);
-
-        // 生成阴影
-        const shadows = parentChainIds.reduce(
-          (acc, parentChainId, i) => {
-            const parentIndex = this.uniqueChainIds.indexOf(parentChainId);
-            const parentHue = (parentIndex * hueStep) % 360;
-            const start = -((i + 2) * indent);
-            acc.light.push(
-              start + "px 0 0 0 hsl(" + parentHue + ", " + lightSl + ")"
-            );
-            acc.dark.push(
-              start + "px 0 0 0 hsl(" + parentHue + ", " + darkSl + ")"
-            );
-            return acc;
-          },
-          {
-            light: [-indent + "px 0 0 0 hsl(" + hue + ", " + lightSl + ")"],
-            dark: [-indent + "px 0 0 0 hsl(" + hue + ", " + darkSl + ")"],
-          }
-        );
-
-        // 基础样式
-        const commonStyle = {
-          marginLeft: "calc(" + indent + "px * " + (depth - 1) + ")",
-        };
-
-        // 生成样式规则
-        styles["." + className] = {
-          ...commonStyle,
-          background: "hsla(" + hue + ", " + lightSl + ", 0.15)",
-          boxShadow: shadows.light.join(", "),
-        };
-
-        // 暗色模式样式
-        styles[".body--dark ." + className] = {
-          ...commonStyle,
-          background: "hsla(" + hue + ", " + darkSl + ", 0.2)",
-          boxShadow: shadows.dark.join(", "),
-        };
-      });
-
-      return styles;
-    },
-    chainStyles() {
-      return Object.entries(this.chainStylesMap)
-        .map(
-          ([selector, rules]) =>
-            selector +
-            " {\n" +
-            Object.entries(rules)
-              .map(
-                ([prop, value]) =>
-                  "  " +
-                  prop.replace(/([A-Z])/g, "-$1").toLowerCase() +
-                  ": " +
-                  value +
-                  " !important;"
-              )
-              .join("\n") +
-            "\n}"
-        )
-        .join("\n\n");
-    },
-  },
-  methods: {
-    getChainDepth(chainId) {
-      let depth = 1;
-      let currentIndex = this.commands.findIndex(
-        (cmd) =>
-          cmd.chainId === chainId && cmd.commandType === cmd.commandChain?.[0]
-      );
-
-      if (currentIndex === -1) return depth;
-
-      for (let i = 0; i < currentIndex; i++) {
-        const cmd = this.commands[i];
-        if (cmd.chainId && cmd.commandType === cmd.commandChain?.[0]) {
-          const endIndex = this.commands.findIndex(
-            (c, idx) =>
-              idx > i &&
-              c.chainId === cmd.chainId &&
-              c.commandType === cmd.commandChain?.[cmd.commandChain.length - 1]
-          );
-          if (endIndex > currentIndex) {
-            depth++;
-          }
-        }
-      }
-      return depth;
-    },
-    getParentChainIds(chainId) {
-      const parents = [];
-      let currentIndex = this.commands.findIndex(
-        (cmd) =>
-          cmd.chainId === chainId && cmd.commandType === cmd.commandChain?.[0]
-      );
-
-      if (currentIndex === -1) return parents;
-
-      for (let i = currentIndex - 1; i >= 0; i--) {
-        const cmd = this.commands[i];
-        if (cmd.chainId && cmd.commandType === cmd.commandChain?.[0]) {
-          const endIndex = this.commands.findIndex(
-            (c, idx) =>
-              idx > i &&
-              c.chainId === cmd.chainId &&
-              c.commandType === cmd.commandChain?.[cmd.commandChain.length - 1]
-          );
-          if (endIndex > currentIndex) {
-            parents.push(cmd.chainId);
-          }
-        }
-      }
-
-      return parents;
-    },
-    getChainGroupClass(index) {
-      // 找出所有包含当前索引的组
-      const matchingGroups = this.chainGroups.filter(
-        (g) => index >= g.startIndex && index <= g.endIndex
-      );
-
-      // 返回所有匹配组的类名
-      const classes = {};
-      matchingGroups.forEach((group) => {
-        classes["chain-group-" + group.chainId] = true;
-        if (index === group.startIndex) {
-          classes["chain-start"] = true;
-        }
-        if (index === group.endIndex) {
-          classes["chain-end"] = true;
-        }
-        if (index > group.startIndex && index < group.endIndex) {
-          classes["chain-middle"] = true;
-        }
-      });
-      return classes;
-    },
+        return classes;
+      },
+    };
   },
 });
 </script>
diff --git a/src/components/composer/ComposerButtons.vue b/src/components/composer/flow/ComposerButtons.vue
similarity index 64%
rename from src/components/composer/ComposerButtons.vue
rename to src/components/composer/flow/ComposerButtons.vue
index 378fef6..3a21672 100644
--- a/src/components/composer/ComposerButtons.vue
+++ b/src/components/composer/flow/ComposerButtons.vue
@@ -1,33 +1,46 @@
 <template>
   <div class="composer-buttons">
-    <q-btn
-      @click="$q.dark.toggle()"
-      :icon="$q.dark.isActive ? 'dark_mode' : 'light_mode'"
-      flat
-      dense
-      v-if="isDev"
-    >
-    </q-btn>
-    <q-btn icon="logout" dense flat v-close-popup>
-      <q-tooltip>退出可视化编排</q-tooltip>
-    </q-btn>
-    <q-btn dense icon="publish" flat @click="$emit('action', 'insert')">
-      <q-tooltip>插入到编辑器光标处</q-tooltip>
-    </q-btn>
-    <q-btn dense flat icon="done_all" @click="$emit('action', 'apply')">
-      <q-tooltip>清空编辑器内容并插入</q-tooltip>
-    </q-btn>
-    <q-btn
-      flat
-      dense
-      icon="preview"
-      @mouseenter="handleMouseEnter"
-      @mouseleave="handleMouseLeave"
-    >
-    </q-btn>
-    <q-btn dense flat icon="play_circle" @click="$emit('action', 'run')">
-      <q-tooltip>运行</q-tooltip>
-    </q-btn>
+    <div class="left-buttons">
+      <q-btn
+        :icon="isAllCollapsed ? 'unfold_more' : 'unfold_less'"
+        dense
+        flat
+        @click="$emit('action', isAllCollapsed ? 'expandAll' : 'collapseAll')"
+      >
+        <q-tooltip>{{ isAllCollapsed ? "展开所有" : "折叠所有" }}</q-tooltip>
+      </q-btn>
+    </div>
+
+    <div class="right-buttons">
+      <q-btn
+        @click="$q.dark.toggle()"
+        :icon="$q.dark.isActive ? 'dark_mode' : 'light_mode'"
+        flat
+        dense
+        v-if="isDev"
+      >
+      </q-btn>
+      <q-btn icon="logout" dense flat v-close-popup>
+        <q-tooltip>退出可视化编排</q-tooltip>
+      </q-btn>
+      <q-btn dense icon="publish" flat @click="$emit('action', 'insert')">
+        <q-tooltip>插入到编辑器光标处</q-tooltip>
+      </q-btn>
+      <q-btn dense flat icon="done_all" @click="$emit('action', 'apply')">
+        <q-tooltip>清空编辑器内容并插入</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        dense
+        icon="preview"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+      >
+      </q-btn>
+      <q-btn dense flat icon="play_circle" @click="$emit('action', 'run')">
+        <q-tooltip>运行</q-tooltip>
+      </q-btn>
+    </div>
 
     <transition name="preview-fade">
       <div v-if="isVisible" class="preview-popup">
@@ -52,6 +65,10 @@ export default defineComponent({
       type: Function,
       required: true,
     },
+    isAllCollapsed: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: ["action"],
@@ -88,15 +105,25 @@ export default defineComponent({
 <style scoped>
 .composer-buttons {
   position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 }
 
-.composer-buttons > .q-btn {
+.left-buttons,
+.right-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.composer-buttons > div > .q-btn {
   opacity: 0.6;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   font-size: 12px;
 }
 
-.composer-buttons > .q-btn:hover {
+.composer-buttons > div > .q-btn:hover {
   opacity: 1;
   transform: translateY(-1px);
   color: var(--q-primary);