From f3a01a1ba951082a95d176a3cc09a235b47d2e1c Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Wed, 1 Jan 2025 14:04:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E5=88=A4=E6=96=AD=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=BD=9C=E7=94=A8=E8=8C=83=E5=9B=B4=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=8F=8A=E6=8B=96=E6=8B=BD=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   7 +
 src/components/composer/ComposerCard.vue      |  11 +-
 src/components/composer/ComposerFlow.vue      | 292 +++++++++---------
 src/components/composer/ComposerList.vue      |   5 +
 .../composer/control/ConditionalJudgment.vue  |  30 +-
 src/components/composer/flow/ChainStyles.vue  | 216 +++++++++++++
 src/components/composer/flow/DropArea.vue     |  32 ++
 src/components/composer/flow/EmptyFlow.vue    |  44 +++
 .../composer/ubrowser/UBrowserOperations.vue  |   2 +-
 src/js/composer/commands/controlCommands.js   |   1 +
 10 files changed, 474 insertions(+), 166 deletions(-)
 create mode 100644 src/components/composer/flow/ChainStyles.vue
 create mode 100644 src/components/composer/flow/DropArea.vue
 create mode 100644 src/components/composer/flow/EmptyFlow.vue

diff --git a/src/App.vue b/src/App.vue
index c397ae8..e02457b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -251,6 +251,13 @@ export default defineComponent({
           .padStart(2, "0")
       );
     },
+    getUniqueId() {
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16) | 0;
+        const v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      });
+    },
   },
   watch: {
     // 监听 glassEffect 值变化
diff --git a/src/components/composer/ComposerCard.vue b/src/components/composer/ComposerCard.vue
index db84674..f19a3a5 100644
--- a/src/components/composer/ComposerCard.vue
+++ b/src/components/composer/ComposerCard.vue
@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="composer-card q-pa-xs"
-    :class="{ 'can-drop': canDrop }"
-    v-bind="$attrs"
-  >
+  <div class="composer-card" :class="{ 'can-drop': canDrop }" v-bind="$attrs">
     <q-card class="command-item">
       <q-card-section class="q-pa-sm">
         <CommandHead
@@ -21,8 +17,8 @@
               v-model="argvLocal"
               :command="command"
               v-bind="command.componentProps || {}"
-              :type="command.controlFlowType"
-              @addBranch="$emit('addBranch')"
+              :type="command.commandType"
+              @addBranch="(chainInfo) => $emit('addBranch', chainInfo)"
             />
           </template>
 
@@ -273,6 +269,7 @@ 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);
 }
 
diff --git a/src/components/composer/ComposerFlow.vue b/src/components/composer/ComposerFlow.vue
index 335bc90..81716ba 100644
--- a/src/components/composer/ComposerFlow.vue
+++ b/src/components/composer/ComposerFlow.vue
@@ -1,5 +1,6 @@
 <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>
@@ -18,7 +19,7 @@
         @dragleave.prevent="onDragLeave"
       >
         <draggable
-          v-model="commands"
+          :list="commands"
           group="commands"
           item-key="id"
           class="flow-list"
@@ -26,6 +27,7 @@
           :animation="200"
           @start="onDragStart"
           @end="onDragEnd"
+          @change="onDragChange"
         >
           <template #item="{ element, index }">
             <transition name="slide-fade" mode="out-in" appear>
@@ -37,6 +39,7 @@
                   'insert-after':
                     dragIndex === commands.length &&
                     index === commands.length - 1,
+                  ...getChainGroupClass(index),
                 }"
               >
                 <ComposerCard
@@ -47,21 +50,14 @@
                   @update:argv="(val) => handleArgvChange(index, val)"
                   @update:command="(val) => updateCommand(index, val)"
                   @run="handleRunCommand"
-                  @add-branch="() => addBranch(index)"
+                  @add-branch="(chainInfo) => addBranch(index, chainInfo)"
                 />
               </div>
             </transition>
           </template>
         </draggable>
-        <div v-if="commands.length === 0" class="empty-flow">
-          <div class="text-center text-grey-6">
-            <q-icon name="drag_indicator" size="32px" />
-            <div class="text-body2 q-mt-sm">从左侧拖拽命令到这里开始编排</div>
-          </div>
-        </div>
-        <div v-else class="drop-area">
-          <q-icon name="add" size="32px" />
-        </div>
+        <EmptyFlow v-if="commands.length === 0" />
+        <DropArea v-else />
       </div>
     </q-scroll-area>
   </div>
@@ -72,6 +68,9 @@ import { defineComponent, inject } from "vue";
 import draggable from "vuedraggable";
 import ComposerCard from "./ComposerCard.vue";
 import ComposerButtons from "./ComposerButtons.vue";
+import ChainStyles from "./flow/ChainStyles.vue";
+import EmptyFlow from "./flow/EmptyFlow.vue";
+import DropArea from "./flow/DropArea.vue";
 
 export default defineComponent({
   name: "ComposerFlow",
@@ -79,6 +78,9 @@ export default defineComponent({
     draggable,
     ComposerCard,
     ComposerButtons,
+    ChainStyles,
+    EmptyFlow,
+    DropArea,
   },
   props: {
     modelValue: {
@@ -91,6 +93,17 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue", "add-command", "action"],
+  setup() {
+    const removeVariable = inject("removeVariable");
+    return { removeVariable };
+  },
+  data() {
+    return {
+      dragIndex: -1,
+      isDragging: false,
+      draggedCommand: null,
+    };
+  },
   computed: {
     commands: {
       get() {
@@ -101,32 +114,46 @@ export default defineComponent({
       },
     },
   },
-  setup() {
-    const removeVariable = inject("removeVariable");
-
-    return {
-      removeVariable,
-    };
-  },
-  data() {
-    return {
-      dragIndex: -1,
-      isDragging: false,
-    };
-  },
   methods: {
-    onDragStart() {
-      this.isDragging = true;
+    getChainGroupClass(index) {
+      return this.$refs.chainStyles?.getChainGroupClass(index) || {};
+    },
+    getPlaceholder(element, index) {
+      return element.desc;
+    },
+    onDragStart(event) {
+      this.isDragging = true;
+      this.draggedCommand = this.commands[event.oldIndex];
     },
-
     onDragEnd() {
       this.isDragging = false;
       this.dragIndex = -1;
+      this.draggedCommand = null;
     },
+    onDragChange(event) {
+      let newCommands = [...this.commands];
 
+      if (event.moved || event.added) {
+        // 检查所有链式命令的顺序
+        const isValidOrder = this.checkAllChainOrders(newCommands);
+
+        if (!isValidOrder) {
+          // 如果顺序无效，恢复原始状态
+          if (event.moved) {
+            const { oldIndex, newIndex } = event.moved;
+            const [item] = newCommands.splice(newIndex, 1);
+            newCommands.splice(oldIndex, 0, item);
+          } else if (event.added) {
+            const { newIndex } = event.added;
+            newCommands.splice(newIndex, 1);
+          }
+        }
+      }
+
+      this.$emit("update:modelValue", newCommands);
+    },
     onDragOver(event) {
       if (!this.isDragging) {
-        const rect = event.currentTarget.getBoundingClientRect();
         const items = this.$el.querySelectorAll(".flow-item");
         const mouseY = event.clientY;
 
@@ -154,59 +181,86 @@ export default defineComponent({
         this.dragIndex = closestIndex;
       }
     },
-
     onDragLeave() {
       if (!this.isDragging) {
         this.dragIndex = -1;
       }
     },
+    checkAllChainOrders(commands) {
+      // 获取所有不同的 chainId
+      const chainIds = new Set(
+        commands.filter((cmd) => cmd.chainId).map((cmd) => cmd.chainId)
+      );
 
+      // 检查每个链的命令顺序
+      for (const chainId of chainIds) {
+        // 获取当前链的所有命令的索引
+        const indices = commands
+          .map((cmd, index) => ({ cmd, index }))
+          .filter((item) => item.cmd.chainId === chainId)
+          .map((item) => item.index);
+
+        // 获取 if、else、end 的位置
+        const ifIndex = indices.find(
+          (index) => commands[index].commandType === "if"
+        );
+        const endIndex = indices.find(
+          (index) => commands[index].commandType === "end"
+        );
+        const elseIndices = indices.filter(
+          (index) =>
+            commands[index].commandType !== "if" &&
+            commands[index].commandType !== "end"
+        );
+
+        // 验证顺序
+        // 1. 必须有 if 和 end
+        if (ifIndex === undefined || endIndex === undefined) return false;
+        // 2. if 必须在所有其他命令前面
+        if (indices.some((index) => index < ifIndex)) return false;
+        // 3. end 必须在所有其他命令后面
+        if (indices.some((index) => index > endIndex)) return false;
+        // 4. else 必须在 if 和 end 之间
+        if (elseIndices.some((index) => index < ifIndex || index > endIndex))
+          return false;
+      }
+
+      return true;
+    },
     onDrop(event) {
       try {
         const actionData = event.dataTransfer.getData("action");
         if (!actionData) return;
 
         const parsedAction = JSON.parse(actionData);
-        const isControlFlow = parsedAction.isControlFlow;
+        const commandChain = parsedAction.commandChain;
+        const newCommand = this.createNewCommand(parsedAction);
+        let newCommands = [...this.commands];
 
-        const newCommand = {
-          ...parsedAction,
-          id: Date.now(),
-          argv: "",
-          saveOutput: false,
-          useOutput: null,
-          outputVariable: null,
-          cmd: parsedAction.value || parsedAction.cmd,
-          value: parsedAction.value || parsedAction.cmd,
-        };
-
-        const newCommands = [...this.commands];
-
-        // 如果是控制流程命令，添加start和end两个卡片
-        if (isControlFlow) {
-          const startCommand = {
-            ...newCommand,
-            id: Date.now(),
-            controlFlowType: "start",
-          };
-
-          const endCommand = {
-            ...newCommand,
-            id: Date.now() + 1,
-            controlFlowType: "end",
-          };
-
-          if (this.dragIndex >= 0) {
-            newCommands.splice(this.dragIndex, 0, startCommand, endCommand);
-          } else {
-            newCommands.push(startCommand, endCommand);
-          }
-        } else {
+        if (!commandChain) {
+          // 处理单个命令
           if (this.dragIndex >= 0) {
             newCommands.splice(this.dragIndex, 0, newCommand);
           } else {
             newCommands.push(newCommand);
           }
+        } else {
+          // 处理链式命令
+          const chainId = this.getUniqueId();
+          let insertIndex =
+            this.dragIndex >= 0 ? this.dragIndex : newCommands.length;
+
+          // 按顺序插入命令
+          for (const commandType of commandChain) {
+            const commandItem = {
+              ...newCommand,
+              id: this.getUniqueId(),
+              commandType,
+              chainId,
+            };
+            newCommands.splice(insertIndex, 0, commandItem);
+            insertIndex++; // 更新插入位置，确保命令按顺序排列
+          }
         }
 
         this.$emit("update:modelValue", newCommands);
@@ -215,6 +269,21 @@ export default defineComponent({
         console.debug("Internal drag & drop reorder", error);
       }
     },
+    createNewCommand(parsedAction) {
+      return {
+        ...parsedAction,
+        id: this.getUniqueId(),
+        argv: "",
+        saveOutput: false,
+        useOutput: null,
+        outputVariable: null,
+        cmd: parsedAction.value || parsedAction.cmd,
+        value: parsedAction.value || parsedAction.cmd,
+      };
+    },
+    getUniqueId() {
+      return this.$root.getUniqueId();
+    },
     removeCommand(index) {
       const command = this.commands[index];
       // 如果命令有输出变量，需要先清理
@@ -225,9 +294,6 @@ export default defineComponent({
       newCommands.splice(index, 1);
       this.$emit("update:modelValue", newCommands);
     },
-    getPlaceholder(element, index) {
-      return element.desc;
-    },
     toggleSaveOutput(index) {
       const newCommands = [...this.commands];
       newCommands[index].saveOutput = !newCommands[index].saveOutput;
@@ -268,27 +334,27 @@ export default defineComponent({
       // 触发运行事件
       this.$emit("action", "run", tempFlow);
     },
-    addBranch(index) {
+    addBranch(index, chainInfo) {
       const newCommands = [...this.commands];
-      const midCommand = {
+      const branchCommand = {
         ...newCommands[index],
-        id: Date.now(),
-        controlFlowType: "mid",
+        id: this.getUniqueId(),
+        chainId: chainInfo.chainId,
+        commandType: chainInfo.commandType,
         argv: "",
       };
 
-      // 找到对应的end位置
-      let endIndex = index + 1;
-      let depth = 1;
-      while (endIndex < newCommands.length && depth > 0) {
-        if (newCommands[endIndex].controlFlowType === "start") depth++;
-        if (newCommands[endIndex].controlFlowType === "end") depth--;
-        endIndex++;
+      // 找到对应的 chainId 的最后一个命令位置
+      let lastIndex = -1;
+      for (let i = index + 1; i < newCommands.length; i++) {
+        if (newCommands[i].chainId === chainInfo.chainId) {
+          lastIndex = i;
+        }
       }
 
-      // 在end之前插入新的分支
-      if (endIndex > index + 1) {
-        newCommands.splice(endIndex - 1, 0, midCommand);
+      // 在最后一个命令之前插入新的分支命令
+      if (lastIndex !== -1) {
+        newCommands.splice(lastIndex, 0, branchCommand);
         this.$emit("update:modelValue", newCommands);
       }
     },
@@ -333,53 +399,6 @@ export default defineComponent({
   background-color: rgba(32, 32, 32, 0.8);
 }
 
-/* .flow-list {
-  min-height: 50px;
-} */
-
-.drop-area {
-  flex: 1;
-  min-height: 50px;
-  border-radius: 8px;
-  margin: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #9994;
-  border: 2px dashed #9994;
-}
-
-.body--dark .drop-area {
-  color: #6664;
-  border: 2px dashed #6664;
-}
-
-.empty-flow {
-  min-height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px dashed #e0e0e0;
-  border-radius: 4px;
-  margin: 8px 0;
-  transition: all 0.3s ease;
-  flex: 1;
-}
-
-.body--dark .empty-flow {
-  border: 2px dashed #676666;
-}
-
-.empty-flow:hover {
-  border-color: #bdbdbd;
-  background-color: #fafafa;
-}
-
-.body--dark .empty-flow:hover {
-  border-color: #676666;
-  background-color: #303132;
-}
-
 /* 滑动淡出动画 */
 .slide-fade-enter-active,
 .slide-fade-leave-active {
@@ -460,23 +479,4 @@ export default defineComponent({
 .flow-item.insert-before + .flow-item {
   transform: translateY(3px);
 }
-
-/* 暗色模式适配 */
-.body--dark .flow-item::before,
-.body--dark .flow-item::after {
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.08) 10%,
-    rgba(255, 255, 255, 0.15) 50%,
-    rgba(255, 255, 255, 0.08) 90%,
-    transparent
-  );
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.03),
-    0 0 4px rgba(255, 255, 255, 0.05);
-}
-
-.body--dark .section-header {
-  border-bottom-color: rgba(255, 255, 255, 0.1);
-}
 </style>
diff --git a/src/components/composer/ComposerList.vue b/src/components/composer/ComposerList.vue
index 21b1158..a035985 100644
--- a/src/components/composer/ComposerList.vue
+++ b/src/components/composer/ComposerList.vue
@@ -179,6 +179,7 @@ export default defineComponent({
   flex-direction: column;
   height: 100%;
   border-radius: 10px;
+  user-select: none;
 }
 
 .section-header {
@@ -218,6 +219,10 @@ export default defineComponent({
   border: none;
 }
 
+.composer-list :deep(.q-expansion-item .q-item) {
+  justify-content: space-between;
+}
+
 .body--dark .composer-list {
   background-color: rgba(32, 32, 32, 0.8);
 }
diff --git a/src/components/composer/control/ConditionalJudgment.vue b/src/components/composer/control/ConditionalJudgment.vue
index 062d5b8..410e892 100644
--- a/src/components/composer/control/ConditionalJudgment.vue
+++ b/src/components/composer/control/ConditionalJudgment.vue
@@ -3,30 +3,35 @@
     <div class="row items-center no-wrap">
       <!-- 类型标签 -->
       <div class="text-subtitle2 type-label">
-        <template v-if="type === 'start'">如果满足</template>
-        <template v-else-if="type === 'mid'">
+        <template v-if="type === 'if'">如果满足</template>
+        <template v-else-if="type === 'else'">
           {{ showCondition ? "否则满足" : "否则" }}
         </template>
         <template v-else>结束条件判断</template>
       </div>
 
-      <!-- start类型显示添加按钮 -->
+      <!-- if类型显示添加按钮 -->
       <q-btn
-        v-if="type === 'start'"
+        v-if="type === 'if'"
         flat
         round
         dense
         size="sm"
         icon="add"
         class="control-btn q-mx-xs"
-        @click="$emit('addBranch')"
+        @click="
+          $emit('addBranch', {
+            chainId: command.chainId,
+            commandType: 'else',
+          })
+        "
       >
         <q-tooltip>添加条件分支</q-tooltip>
       </q-btn>
 
       <!-- mid类型显示切换按钮 -->
       <q-btn
-        v-if="type === 'mid'"
+        v-if="type === 'else'"
         flat
         round
         dense
@@ -63,7 +68,7 @@ export default defineComponent({
     type: {
       type: String,
       required: true,
-      validator: (value) => ["start", "mid", "end"].includes(value),
+      validator: (value) => ["if", "else", "end"].includes(value),
     },
   },
   emits: ["update:modelValue", "addBranch"],
@@ -80,7 +85,7 @@ export default defineComponent({
   computed: {
     showCondition() {
       return (
-        this.type === "start" || (this.type === "mid" && this.showMidCondition)
+        this.type === "if" || (this.type === "else" && this.showMidCondition)
       );
     },
     conditionLocal: {
@@ -94,9 +99,9 @@ export default defineComponent({
     },
     generatedCode() {
       switch (this.type) {
-        case "start":
+        case "if":
           return `if(${this.condition || "true"}){`;
-        case "mid":
+        case "else":
           return this.showMidCondition && this.condition
             ? `}else if(${this.condition}){`
             : "}else{";
@@ -130,12 +135,12 @@ export default defineComponent({
     },
     parseCodeString(val) {
       try {
-        if (this.type === "start") {
+        if (this.type === "if") {
           const match = val.match(/^if\((.*)\){$/);
           if (match) {
             this.condition = match[1] === "true" ? "" : match[1];
           }
-        } else if (this.type === "mid") {
+        } else if (this.type === "else") {
           if (val === "}else{") {
             this.showMidCondition = false;
             this.condition = "";
@@ -165,6 +170,7 @@ export default defineComponent({
   color: var(--q-primary);
   white-space: nowrap;
   opacity: 0.9;
+  user-select: none;
 }
 
 .condition-input {
diff --git a/src/components/composer/flow/ChainStyles.vue b/src/components/composer/flow/ChainStyles.vue
new file mode 100644
index 0000000..63db38f
--- /dev/null
+++ b/src/components/composer/flow/ChainStyles.vue
@@ -0,0 +1,216 @@
+<template>
+  <component :is="'style'" v-if="chainStyles">{{ chainStyles }}</component>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "ChainStyles",
+  props: {
+    commands: {
+      type: Array,
+      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(); // 用于跟踪活动的组
+
+      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);
+            }
+          }
+        }
+      });
+
+      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;
+    },
+  },
+});
+</script>
diff --git a/src/components/composer/flow/DropArea.vue b/src/components/composer/flow/DropArea.vue
new file mode 100644
index 0000000..2c6ff9e
--- /dev/null
+++ b/src/components/composer/flow/DropArea.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="drop-area">
+    <q-icon name="add" size="32px" />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "DropArea",
+});
+</script>
+
+<style scoped>
+.drop-area {
+  flex: 1;
+  min-height: 50px;
+  border-radius: 8px;
+  margin: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #9994;
+  border: 2px dashed #9994;
+}
+
+.body--dark .drop-area {
+  color: #6664;
+  border: 2px dashed #6664;
+}
+</style>
diff --git a/src/components/composer/flow/EmptyFlow.vue b/src/components/composer/flow/EmptyFlow.vue
new file mode 100644
index 0000000..e3fb923
--- /dev/null
+++ b/src/components/composer/flow/EmptyFlow.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="empty-flow">
+    <div class="text-center text-grey-6">
+      <q-icon name="drag_indicator" size="32px" />
+      <div class="text-body2 q-mt-sm">从左侧拖拽命令到这里开始编排</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "EmptyFlow",
+});
+</script>
+
+<style scoped>
+.empty-flow {
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed #e0e0e0;
+  border-radius: 4px;
+  margin: 8px 0;
+  transition: all 0.3s ease;
+  flex: 1;
+}
+
+.body--dark .empty-flow {
+  border: 2px dashed #676666;
+}
+
+.empty-flow:hover {
+  border-color: #bdbdbd;
+  background-color: #fafafa;
+}
+
+.body--dark .empty-flow:hover {
+  border-color: #676666;
+  background-color: #303132;
+}
+</style>
diff --git a/src/components/composer/ubrowser/UBrowserOperations.vue b/src/components/composer/ubrowser/UBrowserOperations.vue
index 5926392..e3cd92e 100644
--- a/src/components/composer/ubrowser/UBrowserOperations.vue
+++ b/src/components/composer/ubrowser/UBrowserOperations.vue
@@ -133,7 +133,7 @@ export default defineComponent({
           ...this.selectedActions,
           {
             ...action,
-            id: Date.now(),
+            id: this.$root.getUniqueId(),
             argv: "",
             saveOutput: false,
             useOutput: null,
diff --git a/src/js/composer/commands/controlCommands.js b/src/js/composer/commands/controlCommands.js
index dea558a..027be26 100644
--- a/src/js/composer/commands/controlCommands.js
+++ b/src/js/composer/commands/controlCommands.js
@@ -7,6 +7,7 @@ export const controlCommands = {
       label: "条件判断",
       component: "ConditionalJudgment",
       isControlFlow: true,
+      commandChain: ["if", "end"],
     },
   ],
 };