android-midscene-automation 0.1.6 → 0.1.9

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

@@ -1,24 +1,169 @@
 <script setup lang="ts">
-import { Delete, Edit, Timer } from '@element-plus/icons-vue';
-import type { AppiumRecordedStep } from '../types';
+import { computed, reactive, shallowRef, watch } from 'vue';
+import { Delete, Edit, FullScreen, Timer } from '@element-plus/icons-vue';
+import type { AppiumRecordedStep, AppiumSelector } from '../types';
 
-defineProps<{
+type FlowKind = 'action' | 'condition' | 'assertion';
+type BranchName = 'yes' | 'no';
+type StepScope = 'pre' | 'main' | 'post';
+type StepItem = { step: AppiumRecordedStep; index: number };
+type InsertAction =
+  | 'delay'
+  | 'tap'
+  | 'input'
+  | 'clearInput'
+  | 'coordinateTap'
+  | 'longPress'
+  | 'keyBack'
+  | 'keyHome'
+  | 'keyRecent'
+  | 'keyPower'
+  | 'swipe'
+  | 'pinch'
+  | 'launchApp'
+  | 'popupCondition'
+  | 'tapIfExists'
+  | 'inputIfExists'
+  | 'clearIfExists'
+  | 'backIfExists'
+  | 'waitFor'
+  | 'assertExists'
+  | 'assertText'
+  | 'waitDisappear'
+  | 'waitActivity'
+  | 'runScript';
+
+const props = defineProps<{
   steps: AppiumRecordedStep[];
   disabled?: boolean;
+  allowedLockedActions?: InsertAction[];
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   remove: [index: number];
   addDelay: [index?: number];
+  insertAction: [index: number, action: InsertAction];
+  insertBranchAction: [index: number, branch: BranchName, action: InsertAction];
   editInput: [index: number];
+  updateStep: [index: number, step: AppiumRecordedStep];
 }>();
 
+const expandedStepIndex = shallowRef<number | null>(null);
+const flowDialogVisible = shallowRef(false);
+const flowPan = reactive({ x: 0, y: 0 });
+const flowScale = shallowRef(1);
+const flowDragging = shallowRef(false);
+const flowDragMoved = shallowRef(false);
+let dragStart = { pointerId: 0, x: 0, y: 0, panX: 0, panY: 0 };
+
+const stepOptions = computed(() => props.steps.map((step, index) => ({
+  label: `${index + 1}. ${step.label}`,
+  value: step.id,
+})));
+
+const branchTargetIds = computed(() => {
+  const ids = new Set<string>();
+  props.steps.forEach((step) => {
+    if (step.flow?.parentConditionId) ids.add(step.id);
+    if (step.flow?.yesTargetId) ids.add(step.flow.yesTargetId);
+    if (step.flow?.noTargetId) ids.add(step.flow.noTargetId);
+  });
+  return ids;
+});
+
+const stepItems = computed<StepItem[]>(() => props.steps
+  .map((step, index) => ({ step, index }))
+);
+
+const visibleStepItems = computed(() => stepItems.value
+  .filter(({ step }) => !branchTargetIds.value.has(step.id)));
+
+const insertActionGroups: Array<{ title: string; actions: Array<{ type: InsertAction; label: string }> }> = [
+  {
+    title: '组件操作',
+    actions: [
+      { type: 'tap', label: '录制点击' },
+      { type: 'input', label: '录制输入' },
+      { type: 'clearInput', label: '清空输入' },
+      { type: 'coordinateTap', label: '点击坐标' },
+      { type: 'longPress', label: '长按' },
+    ],
+  },
+  {
+    title: '设备操作',
+    actions: [
+      { type: 'keyBack', label: '系统返回' },
+      { type: 'keyHome', label: 'Home 键' },
+      { type: 'keyRecent', label: '最近任务' },
+      { type: 'keyPower', label: '电源键' },
+      { type: 'swipe', label: '滑动' },
+      { type: 'pinch', label: '双指缩放' },
+      { type: 'launchApp', label: '启动 App' },
+    ],
+  },
+  {
+    title: '等待断言',
+    actions: [
+      { type: 'delay', label: '添加延时' },
+      { type: 'popupCondition', label: '判断存在' },
+      { type: 'tapIfExists', label: '存在则点击' },
+      { type: 'inputIfExists', label: '存在则输入' },
+      { type: 'clearIfExists', label: '存在则清空' },
+      { type: 'backIfExists', label: '存在则返回' },
+      { type: 'waitFor', label: '等待出现' },
+      { type: 'assertExists', label: '断言存在' },
+      { type: 'assertText', label: '断言文本' },
+      { type: 'waitDisappear', label: '等待元素消失' },
+      { type: 'waitActivity', label: '等待 Activity' },
+    ],
+  },
+  {
+    title: '流程控制',
+    actions: [
+      { type: 'runScript', label: '连接脚本' },
+    ],
+  },
+];
+
+const mainActionGroups = insertActionGroups.map((group) => ({
+  ...group,
+  actions: group.actions.filter((action) => action.type !== 'launchApp'),
+}));
+
+const boundaryActionGroups = [{
+  title: '前后置操作',
+  actions: [
+    { type: 'launchApp' as const, label: '启动 APP' },
+    { type: 'delay' as const, label: '添加延时' },
+  ],
+}];
+
+function stepScope(step: AppiumRecordedStep): StepScope {
+  return step.flow?.scope || 'main';
+}
+
+function scopedStepOptions(source: AppiumRecordedStep) {
+  const scope = stepScope(source);
+  return stepOptions.value.filter((option) => {
+    const target = props.steps.find((step) => step.id === option.value);
+    return target && stepScope(target) === scope;
+  });
+}
+
+function actionGroupsForStep(step: AppiumRecordedStep) {
+  return stepScope(step) === 'main' ? mainActionGroups : boundaryActionGroups;
+}
+
 function stepMeta(step: AppiumRecordedStep) {
   if (step.type === 'delay') return `${step.timeoutMs || 1000}ms`;
-  if (step.type === 'input') return `输入内容：${step.value || '空'}`;
+  if (step.type === 'input' || step.type === 'inputIfExists') return `输入内容：${step.value || '空'}`;
+  if (step.contextSelector && step.selector) {
+    return `父级 ${step.contextSelector.strategy} ${step.contextSelector.value || ''} + 子级 ${step.selector.strategy} ${step.selector.value || ''}`;
+  }
   if (step.type === 'key') return `keyCode ${step.keyCode || ''}`;
   if (step.type === 'waitActivity') return step.value || '';
   if (step.type === 'launchApp') return step.value || '';
+  if (step.type === 'runScript') return step.value ? `脚本 ${step.value}` : '';
   if (step.type === 'screenshot') return '保存当前截图';
   if (step.type === 'swipe') {
     const swipe = step.swipe;
@@ -30,50 +175,767 @@ function stepMeta(step: AppiumRecordedStep) {
   if (step.type === 'assertText') return step.value || '';
   return `${step.selector?.strategy || ''} ${step.selector?.value || ''}`;
 }
+
+function defaultKind(step: AppiumRecordedStep): FlowKind {
+  if (step.flow?.nodeKind) return step.flow.nodeKind;
+  if (step.type === 'assertExists' || step.type === 'assertText') return 'assertion';
+  return 'action';
+}
+
+function kindLabel(kind: FlowKind) {
+  return {
+    action: '操作',
+    condition: '判断',
+    assertion: '校验',
+  }[kind];
+}
+
+function typeLabel(step: AppiumRecordedStep) {
+  const labelMap: Partial<Record<AppiumRecordedStep['type'], string>> = {
+    tap: '点击',
+    input: '输入',
+    tapIfExists: '存在则点击',
+    inputIfExists: '存在则输入',
+    clearIfExists: '存在则清空',
+    backIfExists: '存在则返回',
+    clearInput: '清空',
+    waitFor: '等待出现',
+    waitDisappear: '等待消失',
+    assertExists: '断言存在',
+    assertText: '断言文本',
+    key: '按键',
+    waitActivity: '等待 Activity',
+    delay: '延时',
+    coordinateTap: '坐标点击',
+    swipe: '滑动',
+    screenshot: '截图',
+    launchApp: '启动 APP',
+    longPress: '长按',
+    pinch: '双指缩放',
+    runScript: '连接脚本',
+  };
+  return labelMap[step.type] || step.type;
+}
+
+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}`;
+}
+
+function targetStep(id?: string) {
+  if (!id) return null;
+  const index = props.steps.findIndex((step) => step.id === id);
+  if (index < 0) return null;
+  return { step: props.steps[index], index };
+}
+
+function branchStepItems(step: AppiumRecordedStep, branch: BranchName) {
+  const ownedItems = stepItems.value.filter((item) => (
+    item.step.flow?.parentConditionId === step.id
+    && item.step.flow?.parentBranch === branch
+  ));
+  if (ownedItems.length) return ownedItems;
+
+  const targetId = branch === 'yes' ? step.flow?.yesTargetId : step.flow?.noTargetId;
+  const target = targetStep(targetId);
+  return target ? [target] : [];
+}
+
+function nextStepId(index: number) {
+  return props.steps[index + 1]?.id || '';
+}
+
+function toggleExpanded(index: number) {
+  expandedStepIndex.value = expandedStepIndex.value === index ? null : index;
+}
+
+function patchStep(index: number, patch: Partial<AppiumRecordedStep>) {
+  const current = props.steps[index];
+  if (!current) return;
+  emit('updateStep', index, { ...current, ...patch });
+}
+
+function patchFlow(index: number, patch: NonNullable<AppiumRecordedStep['flow']>) {
+  const current = props.steps[index];
+  if (!current) return;
+  emit('updateStep', index, {
+    ...current,
+    flow: {
+      ...(current.flow || {}),
+      ...patch,
+    },
+  });
+}
+
+function insertAction(index: number, command: string | number | object) {
+  emit('insertAction', index, command as InsertAction);
+}
+
+function insertBranchAction(index: number, branch: BranchName, command: string | number | object) {
+  emit('insertBranchAction', index, branch, command as InsertAction);
+}
+
+function isInsertActionDisabled(action: InsertAction) {
+  return Boolean(props.disabled && !props.allowedLockedActions?.includes(action));
+}
+
+function canOpenInsertMenu() {
+  return !props.disabled || Boolean(props.allowedLockedActions?.length);
+}
+
+function isInteractiveTarget(target: EventTarget | null) {
+  return target instanceof Element && Boolean(target.closest(
+    'button,input,textarea,select,.el-select,.el-dropdown,.el-input,.el-input-number,.appium-flow-node',
+  ));
+}
+
+function resetFlowView() {
+  flowPan.x = 0;
+  flowPan.y = 0;
+  flowScale.value = 1;
+}
+
+function handleFlowWheel(event: WheelEvent) {
+  if (!event.ctrlKey) return;
+  event.preventDefault();
+  const canvas = event.currentTarget as HTMLElement;
+  const bounds = canvas.getBoundingClientRect();
+  const cursorX = event.clientX - bounds.left;
+  const cursorY = event.clientY - bounds.top;
+  const previousScale = flowScale.value;
+  const direction = event.deltaY < 0 ? 1 : -1;
+  const nextScale = Math.min(2, Math.max(0.5, Math.round((previousScale + direction * 0.1) * 10) / 10));
+  if (nextScale === previousScale) return;
+  flowPan.x = cursorX - ((cursorX - flowPan.x) / previousScale) * nextScale;
+  flowPan.y = cursorY - ((cursorY - flowPan.y) / previousScale) * nextScale;
+  flowScale.value = nextScale;
+}
+
+function handleNodeClick(index: number) {
+  toggleExpanded(index);
+}
+
+function startFlowDrag(event: PointerEvent) {
+  if (isInteractiveTarget(event.target)) return;
+  flowDragging.value = true;
+  flowDragMoved.value = false;
+  dragStart = {
+    pointerId: event.pointerId,
+    x: event.clientX,
+    y: event.clientY,
+    panX: flowPan.x,
+    panY: flowPan.y,
+  };
+  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+}
+
+function moveFlowDrag(event: PointerEvent) {
+  if (!flowDragging.value || event.pointerId !== dragStart.pointerId) return;
+  if (Math.abs(event.clientX - dragStart.x) + Math.abs(event.clientY - dragStart.y) > 4) {
+    flowDragMoved.value = true;
+  }
+  flowPan.x = dragStart.panX + event.clientX - dragStart.x;
+  flowPan.y = dragStart.panY + event.clientY - dragStart.y;
+}
+
+function stopFlowDrag(event: PointerEvent) {
+  if (!flowDragging.value || event.pointerId !== dragStart.pointerId) return;
+  flowDragging.value = false;
+  const target = event.currentTarget as HTMLElement;
+  if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+  window.setTimeout(() => {
+    flowDragMoved.value = false;
+  }, 0);
+}
+
+watch(() => props.steps.length, () => {
+  resetFlowView();
+});
 </script>
 
 <template>
   <div class="appium-recorded-steps-panel">
-    <div class="appium-recorded-steps">
-      <el-empty v-if="!steps.length" description="暂无录制步骤" />
+    <div class="appium-flow-toolbar">
+      <el-button
+        size="small"
+        :icon="FullScreen"
+        :disabled="!steps.length"
+        @click="flowDialogVisible = true"
+      >
+        放大
+      </el-button>
+    </div>
+    <div
+      class="appium-flow-canvas"
+      :class="{ 'appium-flow-canvas--dragging': flowDragging }"
+      @pointerdown="startFlowDrag"
+      @pointermove="moveFlowDrag"
+      @pointerup="stopFlowDrag"
+      @pointercancel="stopFlowDrag"
+      @pointerleave="stopFlowDrag"
+      @wheel="handleFlowWheel"
+    >
       <div
-        v-for="(step, index) in steps"
-        v-else
-        :key="step.id"
-        class="appium-step-item"
+        class="appium-flow-content"
+        :style="{ transform: `translate(${flowPan.x}px, ${flowPan.y}px) scale(${flowScale})` }"
       >
+        <div class="appium-flow-boundary appium-flow-boundary--pre">
+          <span class="appium-flow-boundary__label">前置操作</span>
+          <el-dropdown
+            trigger="click"
+            :disabled="!canOpenInsertMenu()"
+            max-height="320px"
+            popper-class="appium-action-dropdown"
+            @command="insertAction(-2, $event)"
+          >
+            <button
+              type="button"
+              class="appium-flow-insert"
+              :disabled="!canOpenInsertMenu()"
+            >
+              <el-icon><Timer /></el-icon>
+              <span>添加前置操作</span>
+            </button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <template v-for="group in boundaryActionGroups" :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 class="appium-flow-start">
+          <div class="appium-flow-start__node">开始</div>
+          <el-dropdown
+            trigger="click"
+            :disabled="!canOpenInsertMenu()"
+            max-height="320px"
+            popper-class="appium-action-dropdown"
+            @command="insertAction(-1, $event)"
+          >
+            <button
+              type="button"
+              class="appium-flow-insert"
+              :disabled="!canOpenInsertMenu()"
+            >
+              <el-icon><Timer /></el-icon>
+              <span>插入操作</span>
+            </button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <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
-          class="appium-step-row"
-          :class="{ 'appium-step-row--delay': step.type === 'delay' }"
+          v-for="{ step, index } in visibleStepItems"
+          :key="step.id"
+          class="appium-flow-item"
+          :class="[
+            `appium-flow-item--${stepScope(step)}`,
+            { 'appium-flow-item--condition': defaultKind(step) === 'condition' },
+          ]"
         >
-          <span class="appium-step-row__index">{{ index + 1 }}</span>
-          <div class="appium-step-row__main">
-            <strong :title="step.label">{{ step.label }}</strong>
-            <small :title="stepMeta(step)">{{ stepMeta(step) }}</small>
+          <div
+            class="appium-flow-node"
+            :class="[
+              `appium-flow-node--${defaultKind(step)}`,
+              { 'appium-flow-node--expanded': expandedStepIndex === index },
+            ]"
+          >
+            <button
+              type="button"
+              class="appium-flow-node__toggle"
+              :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)">
+                  {{ kindLabel(defaultKind(step)) }} · {{ typeLabel(step) }}
+                  <template v-if="step.optional"> · 可选</template>
+                  <template v-if="stepMeta(step)"> · {{ stepMeta(step) }}</template>
+                </span>
+              </span>
+            </button>
+            <span class="appium-flow-node__actions" @click.stop>
+              <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>
+
+        <div v-if="defaultKind(step) === 'condition'" class="appium-flow-branches">
+          <svg class="appium-flow-branch-lines" viewBox="0 0 100 48" preserveAspectRatio="none" aria-hidden="true">
+            <path d="M50 0 C50 16 25 16 25 31 L25 48" />
+            <path d="M50 0 C50 16 75 16 75 31 L75 48" />
+          </svg>
+          <div class="appium-flow-branch appium-flow-branch--yes">
+            <strong class="appium-flow-branch__label">是</strong>
+            <div v-if="branchStepItems(step, 'yes').length" class="appium-flow-branch-steps">
+              <div
+                v-for="item in branchStepItems(step, 'yes')"
+                :key="item.step.id"
+                class="appium-flow-branch-step"
+              >
+                <span class="appium-flow-branch-step__index">
+                  {{ item.index + 1 }}
+                </span>
+                <span class="appium-flow-branch-step__body">
+                  <span class="appium-flow-branch-step__title">
+                    {{ item.step.label }}
+                  </span>
+                  <span class="appium-flow-branch-step__meta">
+                    {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
+                  </span>
+                </span>
+                <el-button
+                  class="appium-flow-branch-step__delete"
+                  text
+                  size="small"
+                  :icon="Delete"
+                  :disabled="disabled"
+                  title="删除节点"
+                  @click.stop="$emit('remove', item.index)"
+                />
+              </div>
+            </div>
+            <span v-else class="appium-flow-branch__target">{{ targetLabel(step.flow?.yesTargetId) }}</span>
+            <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>
+                  <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 class="appium-step-row__actions">
-            <el-button
-              v-if="step.type === 'input'"
-              text
-              size="small"
-              :icon="Edit"
-              :disabled="disabled"
-              title="修改输入内容"
-              @click="$emit('editInput', index)"
-            />
-            <el-button text size="small" :icon="Delete" :disabled="disabled" @click="$emit('remove', index)" />
+          <div class="appium-flow-branch appium-flow-branch--no">
+            <strong class="appium-flow-branch__label">否</strong>
+            <div v-if="branchStepItems(step, 'no').length" class="appium-flow-branch-steps">
+              <div
+                v-for="item in branchStepItems(step, 'no')"
+                :key="item.step.id"
+                class="appium-flow-branch-step"
+              >
+                <span class="appium-flow-branch-step__index">
+                  {{ item.index + 1 }}
+                </span>
+                <span class="appium-flow-branch-step__body">
+                  <span class="appium-flow-branch-step__title">
+                    {{ item.step.label }}
+                  </span>
+                  <span class="appium-flow-branch-step__meta">
+                    {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
+                  </span>
+                </span>
+                <el-button
+                  class="appium-flow-branch-step__delete"
+                  text
+                  size="small"
+                  :icon="Delete"
+                  :disabled="disabled"
+                  title="删除节点"
+                  @click.stop="$emit('remove', item.index)"
+                />
+              </div>
+            </div>
+            <span v-else class="appium-flow-branch__target">{{ targetLabel(step.flow?.noTargetId) }}</span>
+            <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>
+                  <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>
-        <button
-          type="button"
-          class="appium-step-insert-delay"
-          :disabled="disabled"
-          @click="$emit('addDelay', index)"
+
+        <div v-if="expandedStepIndex === index" class="appium-flow-editor">
+          <el-form label-position="top" size="small">
+            <el-form-item label="节点名称">
+              <el-input
+                :model-value="step.label"
+                :disabled="disabled"
+                @update:model-value="patchStep(index, { label: String($event) })"
+              />
+            </el-form-item>
+            <div class="appium-flow-editor__grid">
+              <el-form-item label="节点类型">
+                <el-select
+                  :model-value="defaultKind(step)"
+                  :disabled="disabled"
+                  @update:model-value="patchFlow(index, { nodeKind: $event as FlowKind })"
+                >
+                  <el-option label="操作" value="action" />
+                  <el-option label="判断" value="condition" />
+                  <el-option label="校验" value="assertion" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="超时时间 ms">
+                <el-input-number
+                  :model-value="step.timeoutMs || undefined"
+                  :disabled="disabled"
+                  :min="0"
+                  :max="999999"
+                  controls-position="right"
+                  @update:model-value="patchStep(index, { timeoutMs: Number($event || 0) || undefined })"
+                />
+              </el-form-item>
+            </div>
+            <el-form-item v-if="step.type === 'input' || step.type === 'inputIfExists' || step.type === 'assertText'" label="文本内容">
+              <el-input
+                :model-value="step.value || ''"
+                :disabled="disabled"
+                @update:model-value="patchStep(index, { value: String($event) })"
+              />
+            </el-form-item>
+            <div v-if="step.selector" class="appium-flow-editor__grid">
+              <el-form-item label="Selector 类型">
+                <el-select
+                  :model-value="step.selector.strategy"
+                  :disabled="disabled"
+                  @update:model-value="patchStep(index, { selector: { ...step.selector!, strategy: $event as AppiumSelector['strategy'] } })"
+                >
+                  <el-option label="accessibility id" value="accessibilityId" />
+                  <el-option label="id" value="id" />
+                  <el-option label="android uiAutomator" value="androidUiAutomator" />
+                  <el-option label="xpath" value="xpath" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="Selector 值">
+                <el-input
+                  :model-value="step.selector.value || ''"
+                  :disabled="disabled"
+                  @update:model-value="patchStep(index, { selector: { ...step.selector!, value: String($event) } })"
+                />
+              </el-form-item>
+            </div>
+            <div v-if="step.selector" class="appium-flow-editor__grid">
+              <el-form-item label="父级上下文类型">
+                <el-select
+                  :model-value="step.contextSelector?.strategy || ''"
+                  :disabled="disabled"
+                  clearable
+                  placeholder="不使用父级"
+                  @update:model-value="patchStep(index, { contextSelector: $event ? { ...(step.contextSelector || { value: '' }), strategy: $event as AppiumSelector['strategy'] } : undefined })"
+                >
+                  <el-option label="accessibility id" value="accessibilityId" />
+                  <el-option label="id" value="id" />
+                  <el-option label="android uiAutomator" value="androidUiAutomator" />
+                  <el-option label="xpath" value="xpath" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="父级上下文值">
+                <el-input
+                  :model-value="step.contextSelector?.value || ''"
+                  :disabled="disabled || !step.contextSelector"
+                  @update:model-value="patchStep(index, { contextSelector: { ...(step.contextSelector || { strategy: 'xpath' }), value: String($event) } })"
+                />
+              </el-form-item>
+            </div>
+            <el-form-item label="可选步骤">
+              <el-switch
+                :model-value="Boolean(step.optional)"
+                :disabled="disabled"
+                active-text="找不到时跳过"
+                inactive-text="找不到时失败"
+                @update:model-value="patchStep(index, { optional: Boolean($event) })"
+              />
+            </el-form-item>
+            <template v-if="defaultKind(step) === 'condition'">
+              <div class="appium-flow-editor__grid">
+                <el-form-item label="是，进入">
+                  <el-select
+                    :model-value="step.flow?.yesTargetId || ''"
+                    :disabled="disabled"
+                    clearable
+                    placeholder="默认下一步"
+                    @update:model-value="patchFlow(index, { yesTargetId: String($event || '') })"
+                  >
+                    <el-option v-for="option in scopedStepOptions(step)" :key="option.value" :label="option.label" :value="option.value" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="否，进入">
+                  <el-select
+                    :model-value="step.flow?.noTargetId || ''"
+                    :disabled="disabled"
+                    clearable
+                    placeholder="默认结束"
+                    @update:model-value="patchFlow(index, { noTargetId: String($event || '') })"
+                  >
+                    <el-option v-for="option in scopedStepOptions(step)" :key="option.value" :label="option.label" :value="option.value" />
+                  </el-select>
+                </el-form-item>
+              </div>
+            </template>
+            <div class="appium-flow-editor__actions">
+              <el-button :icon="Timer" :disabled="disabled" @click="$emit('addDelay', index)">
+                插入延时
+              </el-button>
+              <el-button
+                v-if="defaultKind(step) !== 'condition' && stepScope(step) === 'main'"
+                :disabled="disabled"
+                @click="patchFlow(index, { nodeKind: 'condition', yesTargetId: '', noTargetId: '' })"
+              >
+                转为判断节点
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+
+        <el-dropdown
+          v-if="defaultKind(step) !== 'condition'"
+          trigger="click"
+          :disabled="!canOpenInsertMenu()"
+          max-height="320px"
+          popper-class="appium-action-dropdown"
+          @command="insertAction(index, $event)"
         >
-          <el-icon><Timer /></el-icon>
-          <span>在此步骤后插入延时</span>
-        </button>
+          <button
+            type="button"
+            class="appium-flow-insert"
+            :disabled="!canOpenInsertMenu()"
+          >
+            <el-icon><Timer /></el-icon>
+            <span>插入操作</span>
+          </button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <template v-for="group in actionGroupsForStep(step)" :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 class="appium-flow-end">
+          <div class="appium-flow-end__node">结束</div>
+        </div>
+        <div class="appium-flow-boundary appium-flow-boundary--post">
+          <span class="appium-flow-boundary__label">后置操作</span>
+          <el-dropdown
+            trigger="click"
+            :disabled="!canOpenInsertMenu()"
+            max-height="320px"
+            popper-class="appium-action-dropdown"
+            @command="insertAction(-3, $event)"
+          >
+            <button
+              type="button"
+              class="appium-flow-insert"
+              :disabled="!canOpenInsertMenu()"
+            >
+              <el-icon><Timer /></el-icon>
+              <span>添加后置操作</span>
+            </button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <template v-for="group in boundaryActionGroups" :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>
+    <el-dialog
+      v-model="flowDialogVisible"
+      title="流程总览"
+      width="86vw"
+      class="appium-flow-dialog"
+      append-to-body
+    >
+      <div class="appium-flow-dialog-canvas">
+        <div class="appium-flow-content appium-flow-content--overview">
+          <div class="appium-flow-boundary appium-flow-boundary--pre">
+            <span class="appium-flow-boundary__label">前置操作</span>
+          </div>
+          <div class="appium-flow-start appium-flow-start--overview">
+            <div class="appium-flow-start__node">开始</div>
+          </div>
+          <div
+            v-for="{ step, index } in visibleStepItems"
+            :key="step.id"
+            class="appium-flow-item"
+            :class="[
+              `appium-flow-item--${stepScope(step)}`,
+              { 'appium-flow-item--condition': defaultKind(step) === 'condition' },
+            ]"
+          >
+            <div
+              class="appium-flow-node"
+              :class="`appium-flow-node--${defaultKind(step)}`"
+            >
+              <span class="appium-flow-node__toggle">
+                <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)">
+                    {{ kindLabel(defaultKind(step)) }} · {{ typeLabel(step) }}
+                    <template v-if="step.optional"> · 可选</template>
+                    <template v-if="stepMeta(step)"> · {{ stepMeta(step) }}</template>
+                  </span>
+                </span>
+              </span>
+            </div>
+
+            <div v-if="defaultKind(step) === 'condition'" class="appium-flow-branches">
+              <svg class="appium-flow-branch-lines" viewBox="0 0 100 48" preserveAspectRatio="none" aria-hidden="true">
+                <path d="M50 0 C50 16 25 16 25 31 L25 48" />
+                <path d="M50 0 C50 16 75 16 75 31 L75 48" />
+              </svg>
+              <div class="appium-flow-branch appium-flow-branch--yes">
+                <strong class="appium-flow-branch__label">是</strong>
+                <div v-if="branchStepItems(step, 'yes').length" class="appium-flow-branch-steps">
+                  <div
+                    v-for="item in branchStepItems(step, 'yes')"
+                    :key="item.step.id"
+                    class="appium-flow-branch-step"
+                  >
+                    <span class="appium-flow-branch-step__index">{{ item.index + 1 }}</span>
+                    <span class="appium-flow-branch-step__body">
+                      <span class="appium-flow-branch-step__title">{{ item.step.label }}</span>
+                      <span class="appium-flow-branch-step__meta">
+                        {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
+                      </span>
+                    </span>
+                  </div>
+                </div>
+                <span v-else class="appium-flow-branch__target">{{ targetLabel(step.flow?.yesTargetId) }}</span>
+              </div>
+              <div class="appium-flow-branch appium-flow-branch--no">
+                <strong class="appium-flow-branch__label">否</strong>
+                <div v-if="branchStepItems(step, 'no').length" class="appium-flow-branch-steps">
+                  <div
+                    v-for="item in branchStepItems(step, 'no')"
+                    :key="item.step.id"
+                    class="appium-flow-branch-step"
+                  >
+                    <span class="appium-flow-branch-step__index">{{ item.index + 1 }}</span>
+                    <span class="appium-flow-branch-step__body">
+                      <span class="appium-flow-branch-step__title">{{ item.step.label }}</span>
+                      <span class="appium-flow-branch-step__meta">
+                        {{ kindLabel(defaultKind(item.step)) }} · {{ typeLabel(item.step) }}
+                      </span>
+                    </span>
+                  </div>
+                </div>
+                <span v-else class="appium-flow-branch__target">{{ targetLabel(step.flow?.noTargetId) }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="appium-flow-end">
+            <div class="appium-flow-end__node">结束</div>
+          </div>
+          <div class="appium-flow-boundary appium-flow-boundary--post">
+            <span class="appium-flow-boundary__label">后置操作</span>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>