diff --git a/src/components/composer/ComposerCard.vue b/src/components/composer/ComposerCard.vue
index b756bd1..db84674 100644
--- a/src/components/composer/ComposerCard.vue
+++ b/src/components/composer/ComposerCard.vue
@@ -6,108 +6,48 @@
   >
     <q-card class="command-item">
       <q-card-section class="q-pa-sm">
-        <div class="col">
-          <!-- 命令标题和描述 -->
-          <div class="row items-center q-mb-sm">
-            <!-- 拖拽手柄 -->
-            <div class="drag-handle cursor-move q-mr-sm">
-              <q-icon name="drag_indicator" size="18px" class="text-grey-6" />
-            </div>
-            <div class="text-subtitle2">{{ command.label }}</div>
-            <q-space />
-
-            <!-- 输出变量设置 -->
-            <div
-              class="output-section row items-center no-wrap"
-              v-if="command.saveOutput"
-            >
-              <q-input
-                :model-value="command.outputVariable"
-                @update:model-value="handleOutputVariableUpdate"
-                dense
-                outlined
-                placeholder="变量名"
-                class="variable-input"
-                style="width: 100px"
-                align="center"
-              >
-              </q-input>
-            </div>
-
-            <q-btn
-              :icon="saveOutputLocal ? 'data_object' : 'output'"
-              :label="saveOutputLocal ? '保存到变量' : '获取输出'"
-              flat
-              dense
-              class="output-btn q-px-sm q-mr-sm"
-              size="sm"
-              v-if="showOutputBtn"
-              @click="handleToggleOutput"
-            >
-              <q-tooltip>
-                <div class="text-body2">
-                  {{
-                    saveOutputLocal
-                      ? "当前命令的输出将保存到变量中"
-                      : "点击将此命令的输出保存为变量以供后续使用"
-                  }}
-                </div>
-                <div class="text-caption text-grey-5">
-                  {{
-                    saveOutputLocal
-                      ? "点击取消输出到变量"
-                      : "保存后可在其他命令中使用此变量"
-                  }}
-                </div>
-              </q-tooltip>
-            </q-btn>
-
-            <!-- 运行按钮 -->
-            <q-btn
-              flat
-              dense
-              round
-              icon="play_arrow"
-              v-if="showRunBtn"
-              class="run-btn q-px-sm q-mr-sm"
-              size="sm"
-              @click="runCommand"
-            >
-              <q-tooltip>单独运行此命令并打印输出</q-tooltip>
-            </q-btn>
-
-            <q-btn
-              flat
-              round
-              dense
-              icon="close"
-              @click="$emit('remove')"
-              size="sm"
-              class="remove-btn"
-            >
-              <q-tooltip>移除此命令</q-tooltip>
-            </q-btn>
-          </div>
-
-          <!-- 参数输入 -->
-          <div class="row items-center">
-            <!-- 单独写组件的参数 -->
+        <CommandHead
+          :command="command"
+          :is-control-flow="command.isControlFlow"
+          @update:outputVariable="handleOutputVariableUpdate"
+          @toggle-output="handleToggleOutput"
+          @run="runCommand"
+          @remove="$emit('remove')"
+        >
+          <!-- 控制流程组件，直接把组件放在head中 -->
+          <template v-if="command.isControlFlow">
             <component
               :is="command.component"
               v-model="argvLocal"
               :command="command"
-              class="col"
-              v-if="!!command.component"
               v-bind="command.componentProps || {}"
+              :type="command.controlFlowType"
+              @addBranch="$emit('addBranch')"
             />
-            <!-- 通用组件参数 -->
-            <MultiParamInput
-              v-else
-              v-model="argvLocal"
-              :command="command"
-              class="col"
-            />
-          </div>
+          </template>
+
+          <!-- 非控制流程组件，使用正常布局 -->
+          <template v-else>
+            <q-space />
+          </template>
+        </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>
       </q-card-section>
     </q-card>
@@ -119,12 +59,14 @@ import { defineComponent, inject, defineAsyncComponent } from "vue";
 import { validateVariableName } from "js/common/variableValidator";
 import VariableInput from "components/composer/ui/VariableInput.vue";
 import MultiParamInput from "components/composer/ui/MultiParamInput.vue";
+import CommandHead from "components/composer/card/CommandHead.vue";
 
 export default defineComponent({
   name: "ComposerCard",
   components: {
     VariableInput,
     MultiParamInput,
+    CommandHead,
     KeyEditor: defineAsyncComponent(() =>
       import("components/composer/ui/KeyEditor.vue")
     ),
@@ -173,7 +115,14 @@ export default defineComponent({
       showKeyRecorder: false,
     };
   },
-  emits: ["remove", "toggle-output", "update:argv", "update:command", "run"],
+  emits: [
+    "remove",
+    "toggle-output",
+    "update:argv",
+    "update:command",
+    "run",
+    "addBranch",
+  ],
   computed: {
     saveOutputLocal: {
       get() {
@@ -315,12 +264,6 @@ export default defineComponent({
       this.$emit("run", tempCommand);
     },
   },
-  mounted() {
-    this.$el.classList.add("composer-card-enter-from");
-    requestAnimationFrame(() => {
-      this.$el.classList.remove("composer-card-enter-from");
-    });
-  },
 });
 </script>
 
@@ -341,7 +284,6 @@ export default defineComponent({
 
 .command-item:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
 }
 
 /* 拖拽和放置样式 */
@@ -354,96 +296,6 @@ export default defineComponent({
   border: 2px dashed var(--q-primary);
 }
 
-.drag-handle {
-  display: flex;
-  align-items: center;
-  padding: 0 4px;
-}
-
-.drag-handle:hover {
-  color: var(--q-primary);
-}
-
-/* 输出部分样式 */
-.output-section {
-  max-width: 120px;
-  margin-right: 4px;
-}
-
-.output-section :deep(.q-field) {
-  border-radius: 4px;
-}
-
-.output-section :deep(.q-field__control) {
-  height: 28px;
-  min-height: 28px;
-  padding: 0 4px;
-}
-
-.output-section :deep(.q-field__marginal) {
-  height: 28px;
-  width: 24px;
-  min-width: 24px;
-}
-
-.output-section :deep(.q-field__native) {
-  padding: 0;
-  font-size: 12px;
-  min-height: 28px;
-  text-align: center;
-}
-
-/* 按钮样式 */
-.output-btn,
-.run-btn,
-.remove-btn {
-  font-size: 12px;
-  border-radius: 4px;
-  min-height: 28px;
-  padding: 0 8px;
-  opacity: 0.6;
-  transition: all 0.3s ease;
-}
-
-.output-btn:hover,
-.run-btn:hover,
-.remove-btn:hover {
-  opacity: 1;
-  transform: scale(1.05);
-}
-
-.run-btn:hover {
-  color: var(--q-positive);
-}
-
-.remove-btn:hover {
-  color: var(--q-negative);
-}
-
-.output-btn.q-btn--active {
-  color: var(--q-primary);
-}
-
-/* 动画效果 */
-.composer-card-enter-active {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.composer-card-enter-from {
-  opacity: 0;
-  transform: translateY(20px) scale(0.95);
-}
-
-.composer-card-leave-active {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  position: absolute;
-}
-
-.composer-card-leave-to {
-  opacity: 0;
-  transform: translateY(-20px) scale(0.95);
-}
-
 /* 暗色模式适配 */
 .body--dark .command-item {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@@ -457,19 +309,8 @@ export default defineComponent({
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
-.body--dark .output-section :deep(.q-field) {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.body--dark .output-section :deep(.q-field--focused) {
-  background: #1d1d1d;
-}
-
-.body--dark .output-btn {
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-.body--dark .output-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
+/* 调整控制流程组件的样式 */
+.command-item :deep(.condition-type-btn) {
+  margin-left: -8px;
 }
 </style>
diff --git a/src/components/composer/ComposerFlow.vue b/src/components/composer/ComposerFlow.vue
index 296f98c..335bc90 100644
--- a/src/components/composer/ComposerFlow.vue
+++ b/src/components/composer/ComposerFlow.vue
@@ -47,6 +47,7 @@
                   @update:argv="(val) => handleArgvChange(index, val)"
                   @update:command="(val) => updateCommand(index, val)"
                   @run="handleRunCommand"
+                  @add-branch="() => addBranch(index)"
                 />
               </div>
             </transition>
@@ -162,16 +163,11 @@ export default defineComponent({
 
     onDrop(event) {
       try {
-        // 尝试获取拖拽数据
         const actionData = event.dataTransfer.getData("action");
+        if (!actionData) return;
 
-        // 如果没有action数据，说明是内部排序，直接返回
-        if (!actionData) {
-          return;
-        }
-
-        // 解析外部拖入的新命令数据
         const parsedAction = JSON.parse(actionData);
+        const isControlFlow = parsedAction.isControlFlow;
 
         const newCommand = {
           ...parsedAction,
@@ -185,20 +181,37 @@ export default defineComponent({
         };
 
         const newCommands = [...this.commands];
-        if (this.dragIndex >= 0) {
-          newCommands.splice(this.dragIndex, 0, newCommand);
+
+        // 如果是控制流程命令，添加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 {
-          newCommands.push(newCommand);
+          if (this.dragIndex >= 0) {
+            newCommands.splice(this.dragIndex, 0, newCommand);
+          } else {
+            newCommands.push(newCommand);
+          }
         }
 
         this.$emit("update:modelValue", newCommands);
         this.dragIndex = -1;
-
-        document.querySelectorAll(".dragging").forEach((el) => {
-          el.classList.remove("dragging");
-        });
       } catch (error) {
-        // 忽略内部拖动排序的错误
         console.debug("Internal drag & drop reorder", error);
       }
     },
@@ -255,6 +268,30 @@ export default defineComponent({
       // 触发运行事件
       this.$emit("action", "run", tempFlow);
     },
+    addBranch(index) {
+      const newCommands = [...this.commands];
+      const midCommand = {
+        ...newCommands[index],
+        id: Date.now(),
+        controlFlowType: "mid",
+        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++;
+      }
+
+      // 在end之前插入新的分支
+      if (endIndex > index + 1) {
+        newCommands.splice(endIndex - 1, 0, midCommand);
+        this.$emit("update:modelValue", newCommands);
+      }
+    },
   },
 });
 </script>
diff --git a/src/components/composer/card/CommandButtons.vue b/src/components/composer/card/CommandButtons.vue
new file mode 100644
index 0000000..cbe48ca
--- /dev/null
+++ b/src/components/composer/card/CommandButtons.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="command-buttons q-px-sm">
+    <div class="row items-center no-wrap">
+      <!-- 输出变量设置和按钮 -->
+      <div
+        class="output-section row items-center no-wrap"
+        v-if="!showDeleteOnly"
+      >
+        <!-- 变量输入框 -->
+        <q-input
+          v-if="command.saveOutput"
+          :model-value="command.outputVariable"
+          @update:model-value="$emit('update:outputVariable', $event)"
+          dense
+          outlined
+          placeholder="变量名"
+          class="variable-input"
+          align="center"
+        >
+        </q-input>
+        <!-- 保存变量按钮 -->
+        <q-btn
+          :icon="command.saveOutput ? 'data_object' : 'output'"
+          :label="command.saveOutput ? '保存到变量' : '获取输出'"
+          flat
+          dense
+          class="output-btn"
+          size="sm"
+          @click="$emit('toggle-output')"
+        >
+          <q-tooltip>
+            <div class="text-body2">
+              {{
+                command.saveOutput
+                  ? "当前命令的输出将保存到变量中"
+                  : "点击将此命令的输出保存为变量以供后续使用"
+              }}
+            </div>
+            <div class="text-caption text-grey-5">
+              {{
+                command.saveOutput
+                  ? "点击取消输出到变量"
+                  : "保存后可在其他命令中使用此变量"
+              }}
+            </div>
+          </q-tooltip>
+        </q-btn>
+      </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"
+          @click="$emit('run')"
+        >
+          <q-tooltip>单独运行此命令并打印输出</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          flat
+          round
+          dense
+          icon="close"
+          @click="$emit('remove')"
+          size="sm"
+          class="remove-btn"
+        >
+          <q-tooltip>移除此命令</q-tooltip>
+        </q-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CommandButtons",
+  props: {
+    command: {
+      type: Object,
+      required: true,
+    },
+    showDeleteOnly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:outputVariable", "toggle-output", "run", "remove"],
+};
+</script>
+
+<style scoped>
+.command-buttons {
+  display: flex;
+  align-items: center;
+}
+
+/* 输出部分样式 */
+.output-section {
+  margin-right: 8px;
+  gap: 8px;
+}
+
+.variable-input {
+  width: 100px;
+}
+
+.output-section :deep(.q-field) {
+  border-radius: 4px;
+}
+
+.output-section :deep(.q-field__control) {
+  height: 28px;
+  min-height: 28px;
+  padding: 0 4px;
+}
+
+.output-section :deep(.q-field__marginal) {
+  height: 28px;
+  width: 24px;
+  min-width: 24px;
+}
+
+.output-section :deep(.q-field__native) {
+  padding: 0;
+  font-size: 12px;
+  min-height: 28px;
+  text-align: center;
+}
+
+/* 按钮样式 */
+.output-btn,
+.run-btn,
+.remove-btn {
+  font-size: 12px;
+  border-radius: 4px;
+  min-height: 28px;
+  opacity: 0.6;
+  transition: all 0.3s ease;
+}
+
+.output-btn:hover,
+.run-btn:hover,
+.remove-btn:hover {
+  opacity: 1;
+  transform: scale(1.05);
+}
+
+.run-btn:hover {
+  color: var(--q-positive);
+}
+
+.remove-btn:hover {
+  color: var(--q-negative);
+}
+
+.output-btn.q-btn--active {
+  color: var(--q-primary);
+}
+
+/* 暗色模式适配 */
+.body--dark .output-section :deep(.q-field) {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.body--dark .output-section :deep(.q-field--focused) {
+  background: #1d1d1d;
+}
+
+.body--dark .output-btn {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.body--dark .output-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+</style>
diff --git a/src/components/composer/card/CommandHead.vue b/src/components/composer/card/CommandHead.vue
new file mode 100644
index 0000000..ba01a26
--- /dev/null
+++ b/src/components/composer/card/CommandHead.vue
@@ -0,0 +1,95 @@
+<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>
+
+    <!-- 标题 -->
+    <div v-if="!isControlFlow" class="text-subtitle2 command-label">
+      {{ command.label }}
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div :class="contentClass">
+      <slot></slot>
+    </div>
+
+    <!-- 按钮组 -->
+    <CommandButtons
+      :command="command"
+      :show-delete-only="isControlFlow"
+      v-bind="$attrs"
+      @update:outputVariable="$emit('update:outputVariable', $event)"
+      @toggle-output="$emit('toggle-output')"
+      @run="$emit('run')"
+      @remove="$emit('remove')"
+    />
+  </div>
+</template>
+
+<script>
+import CommandButtons from "./CommandButtons.vue";
+
+export default {
+  name: "CommandHead",
+  components: {
+    CommandButtons,
+  },
+  props: {
+    command: {
+      type: Object,
+      required: true,
+    },
+    isControlFlow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:outputVariable", "toggle-output", "run", "remove"],
+  computed: {
+    contentClass() {
+      return {
+        col: true,
+        "q-ml-md": !this.isControlFlow,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.drag-handle {
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  cursor: grab;
+  opacity: 0.6;
+  transition: all 0.2s ease;
+}
+
+.row:hover .drag-handle {
+  opacity: 0.8;
+}
+
+.drag-handle:hover {
+  opacity: 1;
+  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;
+}
+</style>
diff --git a/src/components/composer/control/ConditionalJudgment.vue b/src/components/composer/control/ConditionalJudgment.vue
index 8f98486..062d5b8 100644
--- a/src/components/composer/control/ConditionalJudgment.vue
+++ b/src/components/composer/control/ConditionalJudgment.vue
@@ -1,83 +1,54 @@
 <template>
-  <div class="row items-center no-wrap">
-    <!-- 下拉按钮 -->
-    <q-btn-dropdown
-      dense
-      flat
-      class="condition-type-btn"
-      :class="{ 'text-primary': type !== 'end' }"
-    >
-      <q-list>
-        <q-item
-          v-for="option in options"
-          :key="option.value"
-          clickable
-          v-close-popup
-          @click="handleTypeChange(option.value)"
-          :active="type === option.value"
-        >
-          <q-item-section>
-            <q-item-label>{{ option.label }}</q-item-label>
-          </q-item-section>
-        </q-item>
-      </q-list>
-    </q-btn-dropdown>
-
-    <!-- 显示选中的类型文本 -->
-    <div class="condition-type-text q-mx-sm">
-      {{ getTypeLabel }}
-    </div>
-
-    <!-- 条件表达式输入框和按钮 -->
-    <template v-if="type !== 'end'">
-      <template v-if="type === 'else'">
-        <!-- 否则的条件按钮 -->
-        <q-btn
-          v-if="!showElseCondition"
-          dense
-          flat
-          size="sm"
-          class="condition-add-btn"
-          icon="add"
-          @click="showElseCondition = true"
-        >
-          <q-tooltip>添加条件</q-tooltip>
-        </q-btn>
-        <!-- 否则的条件输入框 -->
-        <q-input
-          v-else
-          v-model="condition"
-          dense
-          filled
-          class="col condition-input"
-          placeholder="请输入条件表达式"
-          @update:model-value="handleConditionChange"
-        >
-          <template v-slot:prepend>
-            <q-icon name="code" />
-          </template>
-          <template v-slot:append>
-            <q-btn dense flat round icon="close" @click="clearElseCondition" />
-          </template>
-        </q-input>
-      </template>
-      <!-- 如果的条件输入框 -->
-      <q-input
-        v-else
-        v-model="condition"
-        dense
-        filled
-        class="col condition-input"
-        placeholder="请输入条件表达式"
-        @update:model-value="handleConditionChange"
-      >
-        <template v-slot:prepend>
-          <q-icon name="code" />
+  <div class="conditional-judgment">
+    <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'">
+          {{ showCondition ? "否则满足" : "否则" }}
         </template>
-      </q-input>
-    </template>
-    <!-- 结束如果时的占位 -->
-    <div v-else class="col"></div>
+        <template v-else>结束条件判断</template>
+      </div>
+
+      <!-- start类型显示添加按钮 -->
+      <q-btn
+        v-if="type === 'start'"
+        flat
+        round
+        dense
+        size="sm"
+        icon="add"
+        class="control-btn q-mx-xs"
+        @click="$emit('addBranch')"
+      >
+        <q-tooltip>添加条件分支</q-tooltip>
+      </q-btn>
+
+      <!-- mid类型显示切换按钮 -->
+      <q-btn
+        v-if="type === 'mid'"
+        flat
+        round
+        dense
+        size="sm"
+        :icon="showCondition ? 'unfold_less' : 'unfold_more'"
+        class="control-btn q-mx-xs"
+        @click="toggleCondition"
+      >
+        <q-tooltip>{{ showCondition ? "隐藏条件" : "显示条件" }}</q-tooltip>
+      </q-btn>
+
+      <!-- 条件输入框 -->
+      <q-input
+        v-if="showCondition"
+        v-model="conditionLocal"
+        dense
+        borderless
+        :bg-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+        placeholder="输入条件表达式"
+        class="condition-input"
+      />
+    </div>
   </div>
 </template>
 
@@ -86,150 +57,156 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "ConditionalJudgment",
-
   props: {
-    modelValue: {
+    modelValue: String,
+    command: Object,
+    type: {
       type: String,
-      default: "",
-    },
-    command: {
-      type: Object,
       required: true,
+      validator: (value) => ["start", "mid", "end"].includes(value),
     },
   },
-
-  emits: ["update:modelValue"],
-
+  emits: ["update:modelValue", "addBranch"],
   data() {
     return {
-      options: [
-        { label: "如果", value: "if" },
-        { label: "否则", value: "else" },
-        { label: "结束判断", value: "end" },
-      ],
-      type: "if",
+      showMidCondition: false,
       condition: "",
-      showElseCondition: false,
     };
   },
-
-  computed: {
-    getTypeLabel() {
-      switch (this.type) {
-        case "if":
-          return "如果满足：";
-        case "else":
-          return this.showElseCondition ? "否则，满足：" : "否则：";
-        case "end":
-          return "结束条件判断";
-        default:
-          return "";
-      }
-    },
-  },
-
   created() {
-    // 解析初始值
-    if (this.modelValue) {
-      const match = this.modelValue.match(
-        /^(if|else if|else|end)(?:\((.*)\))?$/
-      );
-      if (match) {
-        if (match[1] === "else if") {
-          this.type = "else";
-          this.condition = match[2] || "";
-          this.showElseCondition = true;
-        } else {
-          this.type = match[1];
-          this.condition = match[2] || "";
-          this.showElseCondition = false;
-        }
-      }
-    }
+    // 组件创建时生成初始代码
+    this.updateValue();
   },
-
-  methods: {
-    generateCode() {
+  computed: {
+    showCondition() {
+      return (
+        this.type === "start" || (this.type === "mid" && this.showMidCondition)
+      );
+    },
+    conditionLocal: {
+      get() {
+        return this.condition;
+      },
+      set(value) {
+        this.condition = value;
+        this.updateValue();
+      },
+    },
+    generatedCode() {
       switch (this.type) {
-        case "if":
-          return `if (${this.condition}) {`;
-        case "else":
-          return this.condition
-            ? `} else if (${this.condition}) {`
-            : "} else {";
+        case "start":
+          return `if(${this.condition || "true"}){`;
+        case "mid":
+          return this.showMidCondition && this.condition
+            ? `}else if(${this.condition}){`
+            : "}else{";
         case "end":
           return "}";
         default:
           return "";
       }
     },
-
-    handleTypeChange(value) {
-      this.type = value;
-      if (this.type === "end") {
+  },
+  watch: {
+    modelValue: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.parseCodeString(val);
+        }
+      },
+    },
+  },
+  methods: {
+    toggleCondition() {
+      this.showMidCondition = !this.showMidCondition;
+      if (!this.showMidCondition) {
         this.condition = "";
-        this.showElseCondition = false;
+        this.updateValue();
       }
-      this.$emit("update:modelValue", this.generateCode());
     },
-
-    handleConditionChange() {
-      this.$emit("update:modelValue", this.generateCode());
+    updateValue() {
+      this.$emit("update:modelValue", this.generatedCode);
     },
-
-    clearElseCondition() {
-      this.condition = "";
-      this.showElseCondition = false;
-      this.$emit("update:modelValue", this.generateCode());
+    parseCodeString(val) {
+      try {
+        if (this.type === "start") {
+          const match = val.match(/^if\((.*)\){$/);
+          if (match) {
+            this.condition = match[1] === "true" ? "" : match[1];
+          }
+        } else if (this.type === "mid") {
+          if (val === "}else{") {
+            this.showMidCondition = false;
+            this.condition = "";
+          } else {
+            const match = val.match(/^}else if\((.*)\){$/);
+            if (match) {
+              this.showMidCondition = true;
+              this.condition = match[1];
+            }
+          }
+        }
+      } catch (e) {
+        console.error("Failed to parse code string:", e);
+      }
     },
   },
 });
 </script>
 
 <style scoped>
-.condition-type-btn {
-  min-width: 32px;
-  width: 32px;
-  height: 36px;
-  padding: 0;
+.conditional-judgment {
+  padding: 4px 0;
 }
 
-.condition-type-btn :deep(.q-btn__content) {
-  padding: 0;
-}
-
-.condition-type-btn :deep(.q-icon) {
-  font-size: 20px;
-}
-
-.condition-type-text {
+.type-label {
   font-size: 14px;
   color: var(--q-primary);
   white-space: nowrap;
-}
-
-.condition-add-btn {
-  margin-left: 4px;
-  opacity: 0.7;
-  height: 36px;
-  color: var(--q-primary);
-}
-
-.condition-add-btn:hover {
-  opacity: 1;
-  background: rgba(var(--q-primary-rgb), 0.1);
+  opacity: 0.9;
 }
 
 .condition-input {
+  flex: 1;
   transition: all 0.3s ease;
 }
 
 .condition-input :deep(.q-field__control) {
-  padding-right: 8px;
+  padding: 0 16px;
+  height: 24px !important;
+  min-height: 24px;
+  border-radius: 4px;
+}
+
+.control-btn {
+  width: 24px;
+  height: 24px;
+  min-height: 24px;
+  opacity: 0.7;
+  transition: all 0.2s ease;
+}
+
+.control-btn:hover {
+  opacity: 1;
+  transform: scale(1.1);
 }
 
 /* 暗色模式适配 */
-.body--dark .condition-type-text {
+.body--dark .condition-input {
+  background: rgba(255, 255, 255, 0.05) !important;
+}
+
+.body--dark .type-label {
+  color: var(--q-primary);
+  opacity: 0.8;
+}
+
+.body--dark .control-btn {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.body--dark .control-btn:hover {
   color: var(--q-primary);
 }
 </style>