android-midscene-automation 0.1.19 → 0.1.21

package/src/appium-recorder/components/RecordedSteps.vue

@@ -1,13 +1,23 @@
 <script setup lang="ts">
 import { computed, reactive, shallowRef, watch } from 'vue';
-import { Delete, Edit, FullScreen, Link, Timer, VideoPlay } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import { CopyDocument, Delete, Edit, FullScreen, Link, Timer, VideoPlay } from '@element-plus/icons-vue';
 import type { AppiumRecordedStep } from '../types';
+import { createFlowClipboard } from '../flow-copy';
+import {
+  buildConditionLayouts,
+  FLOW_BRANCH_GAP,
+  FLOW_NODE_WIDTH,
+  placeConditionLayout,
+} from '../flow-layout';
 import FlowStepEditor from './FlowStepEditor.vue';
+import NestedConditionBranches from './NestedConditionBranches.vue';
 
 type FlowKind = 'action' | 'condition' | 'assertion';
 type BranchName = 'yes' | 'no';
 type FlowViewport = 'main' | 'overview';
 type StepItem = { step: AppiumRecordedStep; index: number };
+const PASTE_COMMAND = '__paste_flow_nodes__';
 type InsertAction =
   | 'delay'
   | 'tap'
@@ -39,10 +49,13 @@ const props = defineProps<{
   disabled?: boolean;
   allowedLockedActions?: InsertAction[];
   launchingStepId?: string;
+  clipboardCount?: number;
 }>();
 
 const emit = defineEmits<{
   remove: [index: number];
+  copy: [indexes: number[]];
+  paste: [index: number, branch?: BranchName];
   addDelay: [index?: number];
   insertAction: [index: number, action: InsertAction];
   insertBranchAction: [index: number, branch: BranchName, action: InsertAction];
@@ -54,6 +67,8 @@ const emit = defineEmits<{
 }>();
 
 const expandedStepIndex = shallowRef<number | null>(null);
+const copyMode = shallowRef(false);
+const selectedCopyIndexes = shallowRef<number[]>([]);
 const flowDialogVisible = shallowRef(false);
 const flowPan = reactive({ x: 0, y: 0 });
 const flowScale = shallowRef(1);
@@ -79,6 +94,11 @@ const visibleStepItems = computed(() => stepItems.value
   .filter(({ step }) => !branchTargetIds.value.has(step.id)));
 const hasFlowSteps = computed(() => visibleStepItems.value.length > 0);
 const hasLaunchAppStep = computed(() => props.steps.some((step) => step.type === 'launchApp'));
+const conditionLayouts = computed(() => buildConditionLayouts(props.steps));
+const flowContentWidth = computed(() => Math.max(
+  980,
+  ...visibleStepItems.value.map(({ step }) => conditionLayouts.value.get(step.id)?.totalWidth || 0),
+));
 const flowAxisByStepId = computed(() => {
   const axes = new Map<string, number>();
   let inheritedAxis = 50;
@@ -86,8 +106,15 @@ const flowAxisByStepId = computed(() => {
     const incomingAxes: number[] = [];
     visibleStepItems.value.forEach(({ step: condition }) => {
       if (defaultKind(condition) !== 'condition') return;
-      if (branchConnectionTargetId(condition, 'yes') === step.id) incomingAxes.push(25);
-      if (branchConnectionTargetId(condition, 'no') === step.id) incomingAxes.push(75);
+      const layout = conditionLayouts.value.get(condition.id);
+      if (!layout) return;
+      const placement = placeConditionLayout(
+        layout,
+        flowContentWidth.value,
+        axes.get(condition.id) ?? inheritedAxis,
+      );
+      if (branchConnectionTargetId(condition, 'yes') === step.id) incomingAxes.push(placement.yesAxis);
+      if (branchConnectionTargetId(condition, 'no') === step.id) incomingAxes.push(placement.noAxis);
     });
     if (incomingAxes.length) {
       inheritedAxis = incomingAxes.reduce((total, axis) => total + axis, 0) / incomingAxes.length;
@@ -221,7 +248,7 @@ function targetLabel(id?: string) {
   if (!id) return '结束';
   const index = props.steps.findIndex((step) => step.id === id);
   if (index < 0) return '未找到目标';
-  return `${index + 1}. ${props.steps[index].label}`;
+  return props.steps[index].label;
 }
 
 function branchStepItems(step: AppiumRecordedStep, branch: BranchName) {
@@ -269,21 +296,51 @@ function flowAxisStyle(step: AppiumRecordedStep) {
   return { '--flow-axis': `${flowAxis(step)}%` };
 }
 
+function conditionLayout(step: AppiumRecordedStep) {
+  return conditionLayouts.value.get(step.id) || {
+    yesWidth: FLOW_NODE_WIDTH,
+    noWidth: FLOW_NODE_WIDTH,
+    totalWidth: FLOW_NODE_WIDTH * 2 + FLOW_BRANCH_GAP,
+    yesAxis: 25,
+    noAxis: 75,
+  };
+}
+
+function branchAxis(step: AppiumRecordedStep, branch: BranchName) {
+  const layout = conditionLayout(step);
+  const placement = placeConditionLayout(layout, flowContentWidth.value, flowAxis(step));
+  return branch === 'yes' ? placement.yesAxis : placement.noAxis;
+}
+
+function branchLayoutStyle(step: AppiumRecordedStep) {
+  const layout = conditionLayout(step);
+  const placement = placeConditionLayout(layout, flowContentWidth.value, flowAxis(step));
+  return {
+    width: `${layout.totalWidth}px`,
+    minWidth: `${layout.totalWidth}px`,
+    gridTemplateColumns: `${layout.yesWidth}px ${layout.noWidth}px`,
+    justifySelf: 'start',
+    marginLeft: `${placement.left}px`,
+  };
+}
+
 function branchPath(step: AppiumRecordedStep, branch: BranchName) {
-  const targetAxis = branch === 'yes' ? 25 : 75;
-  return `M${flowAxis(step)} 0 C${flowAxis(step)} 16 ${targetAxis} 16 ${targetAxis} 31 L${targetAxis} 48`;
+  const layout = conditionLayout(step);
+  const placement = placeConditionLayout(layout, flowContentWidth.value, flowAxis(step));
+  const targetAxis = branch === 'yes' ? layout.yesAxis : layout.noAxis;
+  return `M${placement.startAxis} 0 C${placement.startAxis} 16 ${targetAxis} 16 ${targetAxis} 31 L${targetAxis} 48`;
 }
 
 function mergeTargetAxis(step: AppiumRecordedStep) {
   const axes = [
-    branchConnectionTargetId(step, 'yes') ? 25 : 0,
-    branchConnectionTargetId(step, 'no') ? 75 : 0,
+    branchConnectionTargetId(step, 'yes') ? branchAxis(step, 'yes') : 0,
+    branchConnectionTargetId(step, 'no') ? branchAxis(step, 'no') : 0,
   ].filter(Boolean);
   return axes.reduce((total, axis) => total + axis, 0) / axes.length;
 }
 
 function mergePath(step: AppiumRecordedStep, branch: BranchName) {
-  const sourceAxis = branch === 'yes' ? 25 : 75;
+  const sourceAxis = branchAxis(step, branch);
   const targetAxis = mergeTargetAxis(step);
   return `M${sourceAxis} 0 C${sourceAxis} 20 ${targetAxis} 20 ${targetAxis} 44`;
 }
@@ -300,15 +357,90 @@ function toggleExpanded(index: number) {
   expandedStepIndex.value = expandedStepIndex.value === index ? null : index;
 }
 
+function isDescendantStep(descendantIndex: number, ancestorIndex: number) {
+  const ancestorId = props.steps[ancestorIndex]?.id;
+  let parentId = props.steps[descendantIndex]?.flow?.parentConditionId;
+  while (ancestorId && parentId) {
+    if (parentId === ancestorId) return true;
+    parentId = props.steps.find((item) => item.id === parentId)?.flow?.parentConditionId;
+  }
+  return false;
+}
+
+function isCopySelected(index: number) {
+  return selectedCopyIndexes.value.includes(index)
+    || selectedCopyIndexes.value.some((selectedIndex) => isDescendantStep(index, selectedIndex));
+}
+
+function toggleCopySelection(index: number) {
+  const step = props.steps[index];
+  if (!step) return;
+  if (step.type === 'launchApp') {
+    ElMessage.warning('启动 APP 节点不能复制');
+    return;
+  }
+  const current = selectedCopyIndexes.value;
+  if (current.includes(index)) {
+    selectedCopyIndexes.value = current.filter((item) => item !== index);
+    return;
+  }
+  if (current.some((item) => isDescendantStep(index, item))) {
+    ElMessage.info('该子节点已随判断节点选中');
+    return;
+  }
+  const effectiveCurrent = current.filter((item) => !isDescendantStep(item, index));
+  const candidate = [...effectiveCurrent, index].sort((left, right) => left - right);
+  try {
+    createFlowClipboard(props.steps, candidate);
+  } catch (error) {
+    ElMessage.warning(error instanceof Error ? error.message : '当前节点不能一起复制');
+    return;
+  }
+  selectedCopyIndexes.value = candidate;
+}
+
+function startCopyMode() {
+  copyMode.value = true;
+  selectedCopyIndexes.value = [];
+  expandedStepIndex.value = null;
+}
+
+function cancelCopyMode() {
+  copyMode.value = false;
+  selectedCopyIndexes.value = [];
+}
+
+function copySelectedNodes() {
+  if (!selectedCopyIndexes.value.length) return;
+  emit('copy', selectedCopyIndexes.value);
+  cancelCopyMode();
+}
+
+function copySingleNode(index: number) {
+  emit('copy', [index]);
+}
+
 function insertAction(index: number, command: string | number | object) {
+  if (command === PASTE_COMMAND) {
+    emit('paste', index);
+    return;
+  }
   emit('insertAction', index, command as InsertAction);
 }
 
 function insertStartAction(command: string | number | object) {
+  if (command === PASTE_COMMAND) {
+    emit('paste', -1);
+    return;
+  }
   emit('insertAction', -1, command as InsertAction);
 }
 
 function insertBranchAction(index: number, branch: BranchName, command: string | number | object) {
+  if (command === PASTE_COMMAND) {
+    emit('paste', index, branch);
+    return;
+  }
   emit('insertBranchAction', index, branch, command as InsertAction);
 }
 
@@ -374,6 +506,10 @@ function handleFlowWheel(event: WheelEvent, viewport: FlowViewport) {
 
 function handleNodeClick(index: number) {
   if (flowDragMoved.value) return;
+  if (copyMode.value) {
+    toggleCopySelection(index);
+    return;
+  }
   toggleExpanded(index);
 }
 
@@ -421,6 +557,28 @@ watch(() => props.steps.length, () => {
 <template>
   <div class="appium-recorded-steps-panel">
     <div class="appium-flow-toolbar">
+      <template v-if="copyMode">
+        <span class="appium-flow-toolbar__status">已选择 {{ selectedCopyIndexes.length }} 个节点</span>
+        <el-button
+          size="small"
+          type="primary"
+          :disabled="!selectedCopyIndexes.length"
+          :icon="CopyDocument"
+          @click="copySelectedNodes"
+        >
+          复制选中
+        </el-button>
+        <el-button size="small" @click="cancelCopyMode">取消</el-button>
+      </template>
+      <el-button
+        v-else
+        size="small"
+        :icon="CopyDocument"
+        :disabled="!steps.length"
+        @click="startCopyMode"
+      >
+        批量复制
+      </el-button>
       <el-button
         size="small"
         :icon="FullScreen"
@@ -444,6 +602,8 @@ watch(() => props.steps.length, () => {
         class="appium-flow-content"
         :style="{
           transform: `translate(${flowPan.x}px, ${flowPan.y}px) scale(${flowScale})`,
+          width: `${flowContentWidth}px`,
+          minWidth: `${flowContentWidth}px`,
           '--appium-flow-line-width': '3px',
         }"
       >
@@ -475,6 +635,13 @@ watch(() => props.steps.length, () => {
             </button>
             <template #dropdown>
               <el-dropdown-menu>
+                <el-dropdown-item
+                  v-if="clipboardCount"
+                  :command="PASTE_COMMAND"
+                  divided
+                >
+                  粘贴 {{ clipboardCount }} 个节点
+                </el-dropdown-item>
                 <template v-for="group in startActionGroups" :key="group.title">
                   <div class="appium-action-dropdown__group">{{ group.title }}</div>
                   <el-dropdown-item
@@ -510,7 +677,11 @@ watch(() => props.steps.length, () => {
             class="appium-flow-node"
             :class="[
               `appium-flow-node--${defaultKind(step)}`,
-              { 'appium-flow-node--expanded': expandedStepIndex === index },
+              {
+                'appium-flow-node--expanded': expandedStepIndex === index,
+                'appium-flow-node--selected': isCopySelected(index),
+                'appium-flow-node--copying': copyMode,
+              },
             ]"
           >
             <button
@@ -519,7 +690,6 @@ watch(() => props.steps.length, () => {
               :aria-expanded="expandedStepIndex === index"
               @click.stop="handleNodeClick(index)"
             >
-              <span class="appium-flow-node__index">{{ index + 1 }}</span>
               <span class="appium-flow-node__body">
                 <span class="appium-flow-node__title" :title="step.label">{{ step.label }}</span>
                 <span class="appium-flow-node__meta" :title="stepMeta(step)">
@@ -531,6 +701,14 @@ watch(() => props.steps.length, () => {
               </span>
             </button>
             <span class="appium-flow-node__actions" @click.stop>
+              <el-button
+                v-if="!copyMode && step.type !== 'launchApp'"
+                text
+                size="small"
+                :icon="CopyDocument"
+                title="复制节点"
+                @click="copySingleNode(index)"
+              />
               <el-button
                 v-if="step.type === 'launchApp'"
                 text
@@ -561,7 +739,11 @@ watch(() => props.steps.length, () => {
             </span>
           </div>
 
-        <div v-if="defaultKind(step) === 'condition'" class="appium-flow-branches">
+        <div
+          v-if="defaultKind(step) === 'condition'"
+          class="appium-flow-branches"
+          :style="branchLayoutStyle(step)"
+        >
           <svg class="appium-flow-branch-lines" viewBox="0 0 100 48" preserveAspectRatio="none" aria-hidden="true">
             <path :d="branchPath(step, 'yes')" />
             <path :d="branchPath(step, 'no')" />
@@ -589,7 +771,11 @@ watch(() => props.steps.length, () => {
                   class="appium-flow-node appium-flow-branch-step"
                   :class="[
                     `appium-flow-node--${defaultKind(item.step)}`,
-                    { 'appium-flow-node--expanded': expandedStepIndex === item.index },
+                    {
+                      'appium-flow-node--expanded': expandedStepIndex === item.index,
+                      'appium-flow-node--selected': isCopySelected(item.index),
+                      'appium-flow-node--copying': copyMode,
+                    },
                   ]"
                 >
                   <button
@@ -598,7 +784,6 @@ watch(() => props.steps.length, () => {
                     :aria-expanded="expandedStepIndex === item.index"
                     @click.stop="handleNodeClick(item.index)"
                   >
-                    <span class="appium-flow-node__index">{{ item.index + 1 }}</span>
                     <span class="appium-flow-node__body">
                       <span class="appium-flow-node__title">{{ item.step.label }}</span>
                       <span class="appium-flow-node__meta">
@@ -609,6 +794,14 @@ watch(() => props.steps.length, () => {
                     </span>
                   </button>
                   <span class="appium-flow-node__actions" @click.stop>
+                    <el-button
+                      v-if="!copyMode"
+                      text
+                      size="small"
+                      :icon="CopyDocument"
+                      title="复制节点"
+                      @click="copySingleNode(item.index)"
+                    />
                     <el-button
                       text
                       size="small"
@@ -626,6 +819,27 @@ watch(() => props.steps.length, () => {
                   :disabled="disabled"
                   @update="updateStep"
                 />
+                <NestedConditionBranches
+                  v-if="defaultKind(item.step) === 'condition'"
+                  :steps="steps"
+                  :condition="item.step"
+                  :condition-index="item.index"
+                  :expanded-step-index="expandedStepIndex"
+                  :copy-mode="copyMode"
+                  :selected-copy-indexes="selectedCopyIndexes"
+                  :disabled="disabled"
+                  :allowed-locked-actions="allowedLockedActions"
+                  :clipboard-count="clipboardCount"
+                  @node-click="handleNodeClick"
+                  @copy="$emit('copy', $event)"
+                  @remove="$emit('remove', $event)"
+                  @paste="(childIndex, childBranch) => $emit('paste', childIndex, childBranch)"
+                  @insert-branch-action="(childIndex, childBranch, action) => $emit('insertBranchAction', childIndex, childBranch, action)"
+                  @connect-next="(childIndex, childBranch) => $emit('connectNext', childIndex, childBranch)"
+                  @disconnect-next="(childIndex, childBranch) => $emit('disconnectNext', childIndex, childBranch)"
+                  @edit-input="$emit('editInput', $event)"
+                  @update-step="(childIndex, childStep) => $emit('updateStep', childIndex, childStep)"
+                />
               </div>
             </div>
             <span
@@ -653,6 +867,13 @@ watch(() => props.steps.length, () => {
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
+                  <el-dropdown-item
+                    v-if="clipboardCount"
+                    :command="PASTE_COMMAND"
+                    divided
+                  >
+                    粘贴 {{ clipboardCount }} 个节点
+                  </el-dropdown-item>
                   <template v-for="group in mainActionGroups" :key="group.title">
                     <div class="appium-action-dropdown__group">{{ group.title }}</div>
                     <el-dropdown-item
@@ -703,7 +924,11 @@ watch(() => props.steps.length, () => {
                   class="appium-flow-node appium-flow-branch-step"
                   :class="[
                     `appium-flow-node--${defaultKind(item.step)}`,
-                    { 'appium-flow-node--expanded': expandedStepIndex === item.index },
+                    {
+                      'appium-flow-node--expanded': expandedStepIndex === item.index,
+                      'appium-flow-node--selected': isCopySelected(item.index),
+                      'appium-flow-node--copying': copyMode,
+                    },
                   ]"
                 >
                   <button
@@ -712,7 +937,6 @@ watch(() => props.steps.length, () => {
                     :aria-expanded="expandedStepIndex === item.index"
                     @click.stop="handleNodeClick(item.index)"
                   >
-                    <span class="appium-flow-node__index">{{ item.index + 1 }}</span>
                     <span class="appium-flow-node__body">
                       <span class="appium-flow-node__title">{{ item.step.label }}</span>
                       <span class="appium-flow-node__meta">
@@ -723,6 +947,14 @@ watch(() => props.steps.length, () => {
                     </span>
                   </button>
                   <span class="appium-flow-node__actions" @click.stop>
+                    <el-button
+                      v-if="!copyMode"
+                      text
+                      size="small"
+                      :icon="CopyDocument"
+                      title="复制节点"
+                      @click="copySingleNode(item.index)"
+                    />
                     <el-button
                       text
                       size="small"
@@ -740,6 +972,27 @@ watch(() => props.steps.length, () => {
                   :disabled="disabled"
                   @update="updateStep"
                 />
+                <NestedConditionBranches
+                  v-if="defaultKind(item.step) === 'condition'"
+                  :steps="steps"
+                  :condition="item.step"
+                  :condition-index="item.index"
+                  :expanded-step-index="expandedStepIndex"
+                  :copy-mode="copyMode"
+                  :selected-copy-indexes="selectedCopyIndexes"
+                  :disabled="disabled"
+                  :allowed-locked-actions="allowedLockedActions"
+                  :clipboard-count="clipboardCount"
+                  @node-click="handleNodeClick"
+                  @copy="$emit('copy', $event)"
+                  @remove="$emit('remove', $event)"
+                  @paste="(childIndex, childBranch) => $emit('paste', childIndex, childBranch)"
+                  @insert-branch-action="(childIndex, childBranch, action) => $emit('insertBranchAction', childIndex, childBranch, action)"
+                  @connect-next="(childIndex, childBranch) => $emit('connectNext', childIndex, childBranch)"
+                  @disconnect-next="(childIndex, childBranch) => $emit('disconnectNext', childIndex, childBranch)"
+                  @edit-input="$emit('editInput', $event)"
+                  @update-step="(childIndex, childStep) => $emit('updateStep', childIndex, childStep)"
+                />
               </div>
             </div>
             <span
@@ -767,6 +1020,13 @@ watch(() => props.steps.length, () => {
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
+                  <el-dropdown-item
+                    v-if="clipboardCount"
+                    :command="PASTE_COMMAND"
+                    divided
+                  >
+                    粘贴 {{ clipboardCount }} 个节点
+                  </el-dropdown-item>
                   <template v-for="group in mainActionGroups" :key="group.title">
                     <div class="appium-action-dropdown__group">{{ group.title }}</div>
                     <el-dropdown-item
@@ -837,6 +1097,13 @@ watch(() => props.steps.length, () => {
           </button>
           <template #dropdown>
             <el-dropdown-menu>
+              <el-dropdown-item
+                v-if="clipboardCount"
+                :command="PASTE_COMMAND"
+                divided
+              >
+                粘贴 {{ clipboardCount }} 个节点
+              </el-dropdown-item>
               <template v-for="group in mainActionGroups" :key="group.title">
                 <div class="appium-action-dropdown__group">{{ group.title }}</div>
                 <el-dropdown-item
@@ -861,6 +1128,30 @@ watch(() => props.steps.length, () => {
       class="appium-flow-dialog"
       append-to-body
     >
+      <div class="appium-flow-toolbar appium-flow-dialog__toolbar">
+        <template v-if="copyMode">
+          <span class="appium-flow-toolbar__status">已选择 {{ selectedCopyIndexes.length }} 个节点</span>
+          <el-button
+            size="small"
+            type="primary"
+            :disabled="!selectedCopyIndexes.length"
+            :icon="CopyDocument"
+            @click="copySelectedNodes"
+          >
+            复制选中
+          </el-button>
+          <el-button size="small" @click="cancelCopyMode">取消</el-button>
+        </template>
+        <el-button
+          v-else
+          size="small"
+          :icon="CopyDocument"
+          :disabled="!steps.length"
+          @click="startCopyMode"
+        >
+          批量复制
+        </el-button>
+      </div>
       <div
         class="appium-flow-dialog-canvas"
         :class="{ 'appium-flow-dialog-canvas--dragging': draggingViewport === 'overview' }"
@@ -875,6 +1166,8 @@ watch(() => props.steps.length, () => {
           class="appium-flow-content appium-flow-content--overview"
           :style="{
             transform: `translate(${overviewPan.x}px, ${overviewPan.y}px) scale(${overviewScale})`,
+            width: `${flowContentWidth}px`,
+            minWidth: `${flowContentWidth}px`,
             '--appium-flow-line-width': '3px',
           }"
         >
@@ -889,6 +1182,40 @@ watch(() => props.steps.length, () => {
               <path d="M5 0 V100" />
             </svg>
             <div class="appium-flow-start__node">开始</div>
+            <el-dropdown
+              trigger="click"
+              :disabled="!canOpenInsertMenu()"
+              max-height="320px"
+              popper-class="appium-action-dropdown"
+              @command="insertStartAction($event)"
+            >
+              <button
+                type="button"
+                class="appium-flow-insert"
+                :disabled="!canOpenInsertMenu()"
+              >
+                <el-icon><Timer /></el-icon>
+                <span>插入操作</span>
+              </button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-if="clipboardCount" :command="PASTE_COMMAND" divided>
+                    粘贴 {{ clipboardCount }} 个节点
+                  </el-dropdown-item>
+                  <template v-for="group in startActionGroups" :key="group.title">
+                    <div class="appium-action-dropdown__group">{{ group.title }}</div>
+                    <el-dropdown-item
+                      v-for="action in group.actions"
+                      :key="action.type"
+                      :command="action.type"
+                      :disabled="isStartActionDisabled(action.type)"
+                    >
+                      {{ action.label }}
+                    </el-dropdown-item>
+                  </template>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </div>
           <div
             v-for="{ step, index } in visibleStepItems"
@@ -910,7 +1237,11 @@ watch(() => props.steps.length, () => {
               class="appium-flow-node"
               :class="[
                 `appium-flow-node--${defaultKind(step)}`,
-                { 'appium-flow-node--expanded': expandedStepIndex === index },
+                {
+                  'appium-flow-node--expanded': expandedStepIndex === index,
+                  'appium-flow-node--selected': isCopySelected(index),
+                  'appium-flow-node--copying': copyMode,
+                },
               ]"
             >
               <button
@@ -919,7 +1250,6 @@ watch(() => props.steps.length, () => {
                 :aria-expanded="expandedStepIndex === index"
                 @click="handleNodeClick(index)"
               >
-                <span class="appium-flow-node__index">{{ index + 1 }}</span>
                 <span class="appium-flow-node__body">
                   <span class="appium-flow-node__title" :title="step.label">{{ step.label }}</span>
                   <span class="appium-flow-node__meta" :title="stepMeta(step)">
@@ -930,6 +1260,43 @@ watch(() => props.steps.length, () => {
                   <span v-if="step.note" class="appium-flow-node__note" :title="step.note">{{ step.note }}</span>
                 </span>
               </button>
+              <span class="appium-flow-node__actions" @click.stop>
+                <el-button
+                  v-if="!copyMode && step.type !== 'launchApp'"
+                  text
+                  size="small"
+                  :icon="CopyDocument"
+                  title="复制节点"
+                  @click="copySingleNode(index)"
+                />
+                <el-button
+                  v-if="step.type === 'launchApp'"
+                  text
+                  size="small"
+                  :icon="VideoPlay"
+                  :loading="launchingStepId === step.id"
+                  :disabled="isLaunchExecutionDisabled()"
+                  title="立即执行启动 App"
+                  @click="$emit('executeStep', index)"
+                />
+                <el-button
+                  v-if="step.type === 'input' || step.type === 'inputIfExists'"
+                  text
+                  size="small"
+                  :icon="Edit"
+                  :disabled="disabled"
+                  title="修改输入内容"
+                  @click="$emit('editInput', index)"
+                />
+                <el-button
+                  text
+                  size="small"
+                  :icon="Delete"
+                  :disabled="disabled"
+                  title="删除节点"
+                  @click="$emit('remove', index)"
+                />
+              </span>
             </div>
 
             <FlowStepEditor
@@ -940,7 +1307,11 @@ watch(() => props.steps.length, () => {
               @update="updateStep"
             />
 
-            <div v-if="defaultKind(step) === 'condition'" class="appium-flow-branches">
+            <div
+              v-if="defaultKind(step) === 'condition'"
+              class="appium-flow-branches"
+              :style="branchLayoutStyle(step)"
+            >
               <svg class="appium-flow-branch-lines" viewBox="0 0 100 48" preserveAspectRatio="none" aria-hidden="true">
                 <path :d="branchPath(step, 'yes')" />
                 <path :d="branchPath(step, 'no')" />
@@ -968,7 +1339,11 @@ watch(() => props.steps.length, () => {
                       class="appium-flow-node appium-flow-branch-step"
                       :class="[
                         `appium-flow-node--${defaultKind(item.step)}`,
-                        { 'appium-flow-node--expanded': expandedStepIndex === item.index },
+                        {
+                          'appium-flow-node--expanded': expandedStepIndex === item.index,
+                          'appium-flow-node--selected': isCopySelected(item.index),
+                          'appium-flow-node--copying': copyMode,
+                        },
                       ]"
                     >
                       <button
@@ -977,7 +1352,6 @@ watch(() => props.steps.length, () => {
                         :aria-expanded="expandedStepIndex === item.index"
                         @click="handleNodeClick(item.index)"
                       >
-                        <span class="appium-flow-node__index">{{ item.index + 1 }}</span>
                         <span class="appium-flow-node__body">
                           <span class="appium-flow-node__title">{{ item.step.label }}</span>
                           <span class="appium-flow-node__meta">
@@ -987,6 +1361,24 @@ watch(() => props.steps.length, () => {
                           <span v-if="item.step.note" class="appium-flow-node__note" :title="item.step.note">{{ item.step.note }}</span>
                         </span>
                       </button>
+                      <span class="appium-flow-node__actions" @click.stop>
+                        <el-button
+                          v-if="!copyMode"
+                          text
+                          size="small"
+                          :icon="CopyDocument"
+                          title="复制节点"
+                          @click="copySingleNode(item.index)"
+                        />
+                        <el-button
+                          text
+                          size="small"
+                          :icon="Delete"
+                          :disabled="disabled"
+                          title="删除节点"
+                          @click="$emit('remove', item.index)"
+                        />
+                      </span>
                     </div>
                     <FlowStepEditor
                       v-if="expandedStepIndex === item.index"
@@ -995,6 +1387,27 @@ watch(() => props.steps.length, () => {
                       :disabled="disabled"
                       @update="updateStep"
                     />
+                    <NestedConditionBranches
+                      v-if="defaultKind(item.step) === 'condition'"
+                      :steps="steps"
+                      :condition="item.step"
+                      :condition-index="item.index"
+                      :expanded-step-index="expandedStepIndex"
+                      :copy-mode="copyMode"
+                      :selected-copy-indexes="selectedCopyIndexes"
+                      :disabled="disabled"
+                      :allowed-locked-actions="allowedLockedActions"
+                      :clipboard-count="clipboardCount"
+                      @node-click="handleNodeClick"
+                      @copy="$emit('copy', $event)"
+                      @remove="$emit('remove', $event)"
+                      @paste="(childIndex, childBranch) => $emit('paste', childIndex, childBranch)"
+                      @insert-branch-action="(childIndex, childBranch, action) => $emit('insertBranchAction', childIndex, childBranch, action)"
+                      @connect-next="(childIndex, childBranch) => $emit('connectNext', childIndex, childBranch)"
+                      @disconnect-next="(childIndex, childBranch) => $emit('disconnectNext', childIndex, childBranch)"
+                      @edit-input="$emit('editInput', $event)"
+                      @update-step="(childIndex, childStep) => $emit('updateStep', childIndex, childStep)"
+                    />
                   </div>
                 </div>
                 <span
@@ -1003,6 +1416,53 @@ watch(() => props.steps.length, () => {
                 >
                   {{ targetLabel(step.flow?.yesTargetId) }}
                 </span>
+                <div class="appium-flow-branch__actions">
+                  <el-dropdown
+                    trigger="click"
+                    :disabled="!canOpenInsertMenu()"
+                    max-height="320px"
+                    popper-class="appium-action-dropdown"
+                    @command="insertBranchAction(index, 'yes', $event)"
+                  >
+                    <el-button
+                      size="small"
+                      class="appium-flow-branch__insert"
+                      :disabled="!canOpenInsertMenu()"
+                      :icon="Timer"
+                      @click.stop
+                    >
+                      插入操作
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item v-if="clipboardCount" :command="PASTE_COMMAND" divided>
+                          粘贴 {{ clipboardCount }} 个节点
+                        </el-dropdown-item>
+                        <template v-for="group in mainActionGroups" :key="group.title">
+                          <div class="appium-action-dropdown__group">{{ group.title }}</div>
+                          <el-dropdown-item
+                            v-for="action in group.actions"
+                            :key="action.type"
+                            :command="action.type"
+                            :disabled="isInsertActionDisabled(action.type)"
+                          >
+                            {{ action.label }}
+                          </el-dropdown-item>
+                        </template>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                  <el-button
+                    v-if="shouldShowBranchConnect(index, step, 'yes')"
+                    size="small"
+                    class="appium-flow-branch__connect"
+                    :icon="Link"
+                    :disabled="disabled"
+                    @click.stop="toggleBranchConnection(index, step, 'yes')"
+                  >
+                    {{ branchConnectionTargetId(step, 'yes') ? '取消连接' : '连接到下一节点' }}
+                  </el-button>
+                </div>
               </div>
               <div
                 class="appium-flow-branch appium-flow-branch--no"
@@ -1027,7 +1487,11 @@ watch(() => props.steps.length, () => {
                       class="appium-flow-node appium-flow-branch-step"
                       :class="[
                         `appium-flow-node--${defaultKind(item.step)}`,
-                        { 'appium-flow-node--expanded': expandedStepIndex === item.index },
+                        {
+                          'appium-flow-node--expanded': expandedStepIndex === item.index,
+                          'appium-flow-node--selected': isCopySelected(item.index),
+                          'appium-flow-node--copying': copyMode,
+                        },
                       ]"
                     >
                       <button
@@ -1036,7 +1500,6 @@ watch(() => props.steps.length, () => {
                         :aria-expanded="expandedStepIndex === item.index"
                         @click="handleNodeClick(item.index)"
                       >
-                        <span class="appium-flow-node__index">{{ item.index + 1 }}</span>
                         <span class="appium-flow-node__body">
                           <span class="appium-flow-node__title">{{ item.step.label }}</span>
                           <span class="appium-flow-node__meta">
@@ -1046,6 +1509,24 @@ watch(() => props.steps.length, () => {
                           <span v-if="item.step.note" class="appium-flow-node__note" :title="item.step.note">{{ item.step.note }}</span>
                         </span>
                       </button>
+                      <span class="appium-flow-node__actions" @click.stop>
+                        <el-button
+                          v-if="!copyMode"
+                          text
+                          size="small"
+                          :icon="CopyDocument"
+                          title="复制节点"
+                          @click="copySingleNode(item.index)"
+                        />
+                        <el-button
+                          text
+                          size="small"
+                          :icon="Delete"
+                          :disabled="disabled"
+                          title="删除节点"
+                          @click="$emit('remove', item.index)"
+                        />
+                      </span>
                     </div>
                     <FlowStepEditor
                       v-if="expandedStepIndex === item.index"
@@ -1054,6 +1535,27 @@ watch(() => props.steps.length, () => {
                       :disabled="disabled"
                       @update="updateStep"
                     />
+                    <NestedConditionBranches
+                      v-if="defaultKind(item.step) === 'condition'"
+                      :steps="steps"
+                      :condition="item.step"
+                      :condition-index="item.index"
+                      :expanded-step-index="expandedStepIndex"
+                      :copy-mode="copyMode"
+                      :selected-copy-indexes="selectedCopyIndexes"
+                      :disabled="disabled"
+                      :allowed-locked-actions="allowedLockedActions"
+                      :clipboard-count="clipboardCount"
+                      @node-click="handleNodeClick"
+                      @copy="$emit('copy', $event)"
+                      @remove="$emit('remove', $event)"
+                      @paste="(childIndex, childBranch) => $emit('paste', childIndex, childBranch)"
+                      @insert-branch-action="(childIndex, childBranch, action) => $emit('insertBranchAction', childIndex, childBranch, action)"
+                      @connect-next="(childIndex, childBranch) => $emit('connectNext', childIndex, childBranch)"
+                      @disconnect-next="(childIndex, childBranch) => $emit('disconnectNext', childIndex, childBranch)"
+                      @edit-input="$emit('editInput', $event)"
+                      @update-step="(childIndex, childStep) => $emit('updateStep', childIndex, childStep)"
+                    />
                   </div>
                 </div>
                 <span
@@ -1062,6 +1564,53 @@ watch(() => props.steps.length, () => {
                 >
                   {{ targetLabel(step.flow?.noTargetId) }}
                 </span>
+                <div class="appium-flow-branch__actions">
+                  <el-dropdown
+                    trigger="click"
+                    :disabled="!canOpenInsertMenu()"
+                    max-height="320px"
+                    popper-class="appium-action-dropdown"
+                    @command="insertBranchAction(index, 'no', $event)"
+                  >
+                    <el-button
+                      size="small"
+                      class="appium-flow-branch__insert"
+                      :disabled="!canOpenInsertMenu()"
+                      :icon="Timer"
+                      @click.stop
+                    >
+                      插入操作
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item v-if="clipboardCount" :command="PASTE_COMMAND" divided>
+                          粘贴 {{ clipboardCount }} 个节点
+                        </el-dropdown-item>
+                        <template v-for="group in mainActionGroups" :key="group.title">
+                          <div class="appium-action-dropdown__group">{{ group.title }}</div>
+                          <el-dropdown-item
+                            v-for="action in group.actions"
+                            :key="action.type"
+                            :command="action.type"
+                            :disabled="isInsertActionDisabled(action.type)"
+                          >
+                            {{ action.label }}
+                          </el-dropdown-item>
+                        </template>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                  <el-button
+                    v-if="shouldShowBranchConnect(index, step, 'no')"
+                    size="small"
+                    class="appium-flow-branch__connect"
+                    :icon="Link"
+                    :disabled="disabled"
+                    @click.stop="toggleBranchConnection(index, step, 'no')"
+                  >
+                    {{ branchConnectionTargetId(step, 'no') ? '取消连接' : '连接到下一节点' }}
+                  </el-button>
+                </div>
               </div>
             </div>
             <div v-if="hasBranchConnection(step)" class="appium-flow-merge">
@@ -1078,6 +1627,41 @@ watch(() => props.steps.length, () => {
                 />
               </svg>
             </div>
+            <el-dropdown
+              v-if="defaultKind(step) !== 'condition'"
+              trigger="click"
+              :disabled="!canOpenInsertMenu()"
+              max-height="320px"
+              popper-class="appium-action-dropdown"
+              @command="insertAction(index, $event)"
+            >
+              <button
+                type="button"
+                class="appium-flow-insert"
+                :disabled="!canOpenInsertMenu()"
+              >
+                <el-icon><Timer /></el-icon>
+                <span>插入操作</span>
+              </button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-if="clipboardCount" :command="PASTE_COMMAND" divided>
+                    粘贴 {{ clipboardCount }} 个节点
+                  </el-dropdown-item>
+                  <template v-for="group in mainActionGroups" :key="group.title">
+                    <div class="appium-action-dropdown__group">{{ group.title }}</div>
+                    <el-dropdown-item
+                      v-for="action in group.actions"
+                      :key="action.type"
+                      :command="action.type"
+                      :disabled="isInsertActionDisabled(action.type)"
+                    >
+                      {{ action.label }}
+                    </el-dropdown-item>
+                  </template>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </div>
         </div>
       </div>