android-midscene-automation 0.1.21 → 0.1.22

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

@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue';
+import { Handle, Position } from '@vue-flow/core';
+import { CopyDocument, Delete, Edit, Plus, VideoPlay, View } from '@element-plus/icons-vue';
+import type { AppiumRecordedStep } from '../types';
+import {
+  PASTE_COMMAND,
+  type FlowBranch,
+  type FlowGraphNodeData,
+  type InsertAction,
+} from '../flow-graph';
+import FlowStepEditor from './FlowStepEditor.vue';
+
+const props = defineProps<{
+  nodeId: string;
+  data: FlowGraphNodeData;
+  readonly?: boolean;
+}>();
+
+const emit = defineEmits<{
+  nodeClick: [index: number];
+  copy: [index: number];
+  remove: [index: number];
+  editInput: [index: number];
+  previewLinkedScript: [index: number];
+  execute: [index: number];
+  insert: [payload: { afterIndex: number; action: InsertAction | typeof PASTE_COMMAND; branch?: FlowBranch; conditionIndex?: number }];
+  updateStep: [payload: { index: number; step: AppiumRecordedStep }];
+  resize: [payload: { id: string; height: number }];
+}>();
+
+const rootRef = shallowRef<HTMLElement | null>(null);
+let resizeObserver: ResizeObserver | null = null;
+
+const branchLabel = computed(() => {
+  if (props.data.kind !== 'branch') return '';
+  return props.data.branch === 'yes' ? '是' : '否';
+});
+
+const insertTitle = computed(() => {
+  if (props.data.kind !== 'insert') return '';
+  if (props.data.branch === 'yes') return '在“是”分支插入操作';
+  if (props.data.branch === 'no') return '在“否”分支插入操作';
+  return props.data.afterIndex < 0 ? '在开始后插入操作' : '插入操作';
+});
+
+function emitInsert(command: string | number | object) {
+  if (props.readonly || props.data.kind !== 'insert') return;
+  emit('insert', {
+    afterIndex: props.data.afterIndex,
+    action: command === PASTE_COMMAND ? PASTE_COMMAND : command as InsertAction,
+    branch: props.data.branch,
+    conditionIndex: props.data.conditionIndex,
+  });
+}
+
+function updateStep(payload: { index: number; step: AppiumRecordedStep }) {
+  if (props.readonly) return;
+  emit('updateStep', payload);
+}
+
+function handleStepClick() {
+  if (props.readonly || props.data.kind !== 'step') return;
+  emit('nodeClick', props.data.index);
+}
+
+function reportSize() {
+  if (!rootRef.value || props.data.kind !== 'step') return;
+  emit('resize', {
+    id: props.nodeId,
+    height: rootRef.value.offsetHeight,
+  });
+}
+
+onMounted(() => {
+  resizeObserver = new ResizeObserver(reportSize);
+  if (rootRef.value) resizeObserver.observe(rootRef.value);
+  void nextTick(reportSize);
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+});
+
+watch(() => props.data, () => {
+  void nextTick(reportSize);
+});
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="appium-flow-graph-node nodrag nopan"
+    :class="`appium-flow-graph-node--${data.kind}`"
+    @pointerdown.stop
+    @mousedown.stop
+    @touchstart.stop
+  >
+    <Handle
+      id="top"
+      type="target"
+      :position="Position.Top"
+      class="appium-flow-handle appium-flow-handle--top"
+    />
+
+    <div v-if="data.kind === 'start'" class="appium-flow-start-card nodrag nopan">
+      <span class="appium-flow-start-card__icon">S</span>
+      <span>
+        <strong>开始</strong>
+        <small>当前脚本入口</small>
+      </span>
+    </div>
+
+    <button
+      v-else-if="data.kind === 'branch'"
+      type="button"
+      class="appium-flow-branch-pill nodrag nopan"
+      :class="`appium-flow-branch-pill--${data.branch}`"
+      tabindex="-1"
+    >
+      {{ branchLabel }}
+    </button>
+
+    <span
+      v-else-if="data.kind === 'split'"
+      class="appium-flow-split-joint"
+      aria-hidden="true"
+    />
+
+    <div v-else-if="data.kind === 'insert'" class="appium-flow-insert-node nodrag nopan">
+      <span
+        v-if="props.readonly"
+        class="appium-flow-insert-preview-point"
+        aria-hidden="true"
+      />
+      <el-tooltip v-else content="添加操作" placement="top">
+        <el-dropdown
+          trigger="click"
+          :disabled="!data.canOpenInsertMenu"
+          max-height="320px"
+          popper-class="appium-action-dropdown"
+          @command="emitInsert"
+        >
+          <el-button
+            circle
+            type="primary"
+            :icon="Plus"
+            :disabled="!data.canOpenInsertMenu"
+            :aria-label="insertTitle"
+          />
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                v-if="data.clipboardCount"
+                :command="PASTE_COMMAND"
+                divided
+              >
+                粘贴 {{ data.clipboardCount }} 个节点
+              </el-dropdown-item>
+              <template v-for="group in data.actionGroups" :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="data.isActionDisabled(action.type)"
+                >
+                  {{ action.label }}
+                </el-dropdown-item>
+              </template>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-tooltip>
+    </div>
+
+    <div
+      v-else
+      class="appium-flow-step-shell"
+      :class="[
+        `appium-flow-step-shell--${data.flowKind}`,
+        {
+          'appium-flow-step-shell--expanded': data.expanded,
+          'appium-flow-step-shell--selected': data.selected,
+          'appium-flow-step-shell--copying': data.copyMode,
+          'appium-flow-step-shell--readonly': props.readonly,
+        },
+      ]"
+    >
+      <button
+        type="button"
+        class="appium-flow-step-card nodrag nopan"
+        :style="{ minHeight: `${data.cardMinHeight}px` }"
+        @click="handleStepClick"
+      >
+        <span class="appium-flow-step-card__content">
+          <strong :title="data.title">{{ data.title }}</strong>
+          <small :title="data.meta">{{ data.meta }}</small>
+          <em v-if="data.note" :title="data.note">{{ data.note }}</em>
+        </span>
+      </button>
+      <span v-if="!props.readonly" class="appium-flow-step-card__actions nodrag nopan" @click.stop>
+        <el-button
+          v-if="!data.copyMode && data.canCopy"
+          text
+          size="small"
+          :icon="CopyDocument"
+          title="复制节点"
+          @click="emit('copy', data.index)"
+        />
+        <el-button
+          v-if="data.canExecute"
+          text
+          size="small"
+          :icon="VideoPlay"
+          :loading="data.launching"
+          :disabled="data.disabled"
+          title="立即执行"
+          @click="emit('execute', data.index)"
+        />
+        <el-button
+          v-if="data.canEditInput"
+          text
+          size="small"
+          :icon="Edit"
+          :disabled="data.disabled"
+          title="修改输入内容"
+          @click="emit('editInput', data.index)"
+        />
+        <el-button
+          v-if="data.step.type === 'runScript'"
+          text
+          size="small"
+          :icon="View"
+          title="预览连接脚本"
+          @click="emit('previewLinkedScript', data.index)"
+        />
+        <el-button
+          text
+          size="small"
+          :icon="Delete"
+          :disabled="data.removeDisabled"
+          title="删除节点"
+          @click="emit('remove', data.index)"
+        />
+      </span>
+      <FlowStepEditor
+        v-if="!props.readonly && data.expanded"
+        class="appium-flow-step-editor nodrag nopan"
+        :step="data.step"
+        :index="data.index"
+        :disabled="data.disabled"
+        @update="updateStep"
+      />
+    </div>
+
+    <Handle
+      id="bottom"
+      type="source"
+      :position="Position.Bottom"
+      class="appium-flow-handle appium-flow-handle--bottom"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { BaseEdge, type EdgeProps } from '@vue-flow/core';
+import type { FlowGraphNodeData } from '../flow-graph';
+
+const props = defineProps<EdgeProps>();
+
+const targetData = computed(() => props.targetNode.data as FlowGraphNodeData | undefined);
+
+type Point = {
+  x: number;
+  y: number;
+};
+
+function linePath(points: Point[]) {
+  if (points.length < 2) return '';
+  const [start, ...rest] = points;
+  return [
+    `M ${start.x} ${start.y}`,
+    ...rest.map((point) => `L ${point.x} ${point.y}`),
+  ].join(' ');
+}
+
+const path = computed(() => {
+  const source = { x: props.sourceX, y: props.sourceY };
+  const target = { x: props.targetX, y: props.targetY };
+  const deltaX = target.x - source.x;
+  const deltaY = target.y - source.y;
+
+  if (targetData.value?.kind === 'branch') {
+    const direction = deltaY >= 0 ? 1 : -1;
+    const branchY = source.y + direction * Math.min(Math.max(Math.abs(deltaY) * 0.45, 18), 34);
+    return linePath([
+      source,
+      { x: source.x, y: branchY },
+      { x: target.x, y: branchY },
+      target,
+    ]);
+  }
+
+  if (Math.abs(deltaX) < 2) {
+    return `M ${source.x} ${source.y} L ${target.x} ${target.y}`;
+  }
+
+  const verticalGap = Math.min(Math.max(Math.abs(deltaY) * 0.38, 28), 56);
+  const splitY = deltaY >= 0
+    ? source.y + verticalGap
+    : source.y - verticalGap;
+
+  return linePath([
+    source,
+    { x: source.x, y: splitY },
+    { x: target.x, y: splitY },
+    target,
+  ]);
+});
+</script>
+
+<template>
+  <BaseEdge
+    :id="id"
+    :path="path"
+    :marker-start="markerStart"
+    :marker-end="markerEnd"
+    :interaction-width="interactionWidth"
+  />
+</template>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { CopyDocument, Delete, Edit, Link, Timer } from '@element-plus/icons-vue';
+import { CopyDocument, Delete, Edit, Timer } from '@element-plus/icons-vue';
 import type { AppiumRecordedStep } from '../types';
 import { buildConditionLayouts, FLOW_BRANCH_GAP, FLOW_NODE_WIDTH } from '../flow-layout';
 import FlowStepEditor from './FlowStepEditor.vue';
@@ -21,6 +21,7 @@ type InsertAction =
   | 'swipe'
   | 'pinch'
   | 'launchApp'
+  | 'clearAppData'
   | 'popupCondition'
   | 'tapIfExists'
   | 'inputIfExists'
@@ -43,6 +44,7 @@ const props = defineProps<{
   copyMode?: boolean;
   selectedCopyIndexes?: number[];
   disabled?: boolean;
+  removeDisabled?: boolean;
   allowedLockedActions?: InsertAction[];
   clipboardCount?: number;
 }>();
@@ -53,8 +55,6 @@ const emit = defineEmits<{
   remove: [index: number];
   paste: [index: number, branch: BranchName];
   insertBranchAction: [index: number, branch: BranchName, action: InsertAction];
-  connectNext: [index: number, branch: BranchName];
-  disconnectNext: [index: number, branch: BranchName];
   editInput: [index: number];
   updateStep: [index: number, step: AppiumRecordedStep];
 }>();
@@ -124,7 +124,7 @@ function typeLabel(step: AppiumRecordedStep) {
     clearIfExists: '存在则清空', backIfExists: '存在则返回', clearInput: '清空',
     waitFor: '等待出现', waitDisappear: '等待消失', assertExists: '断言存在',
     assertText: '断言文本', key: '按键', waitActivity: '等待 Activity', delay: '延时',
-    coordinateTap: '坐标点击', swipe: '滑动', launchApp: '启动 APP', longPress: '长按',
+    coordinateTap: '坐标点击', swipe: '滑动', launchApp: '启动 APP', clearAppData: '清理 APP 缓存', longPress: '长按',
     pinch: '双指缩放', runScript: '连接脚本', screenshot: '截图',
   };
   return labels[step.type] || step.type;
@@ -152,7 +152,12 @@ function branchItems(branch: BranchName) {
 
 function branchConnectionTargetId(branch: BranchName) {
   const items = branchItems(branch);
-  if (items.length) return items[items.length - 1]?.step.flow?.successTargetId || '';
+  if (items.length) {
+    const lastItem = items[items.length - 1];
+    return defaultKind(lastItem.step) === 'condition'
+      ? ''
+      : lastItem.step.flow?.successTargetId || '';
+  }
   const targetId = branch === 'yes' ? props.condition.flow?.yesTargetId : props.condition.flow?.noTargetId;
   const target = props.steps.find((step) => step.id === targetId);
   return target && !target.flow?.parentConditionId ? target.id : '';
@@ -193,18 +198,19 @@ function insert(branch: BranchName, command: string | number | object) {
   else emit('insertBranchAction', props.conditionIndex, branch, command as InsertAction);
 }
 
-function toggleConnection(branch: BranchName) {
-  if (branchConnectionTargetId(branch)) emit('disconnectNext', props.conditionIndex, branch);
-  else emit('connectNext', props.conditionIndex, branch);
-}
-
 function updateStep(payload: { index: number; step: AppiumRecordedStep }) {
   emit('updateStep', payload.index, payload.step);
 }
 
-function branchPath(branch: BranchName) {
-  const targetAxis = branch === 'yes' ? layout.value.yesAxis : layout.value.noAxis;
-  return `M50 0 C50 16 ${targetAxis} 16 ${targetAxis} 31 L${targetAxis} 48`;
+function branchSplitPath() {
+  const yesMiddle = (50 + layout.value.yesAxis) / 2;
+  const noMiddle = (50 + layout.value.noAxis) / 2;
+  return [
+    `M${layout.value.yesAxis} 48 L${layout.value.yesAxis} 31`,
+    `C${layout.value.yesAxis} 16 ${yesMiddle} 0 50 0`,
+    `C${noMiddle} 0 ${layout.value.noAxis} 16 ${layout.value.noAxis} 31`,
+    `L${layout.value.noAxis} 48`,
+  ].join(' ');
 }
 </script>
 
@@ -219,13 +225,14 @@ function branchPath(branch: BranchName) {
       }"
     >
       <svg class="appium-flow-branch-lines" viewBox="0 0 100 48" preserveAspectRatio="none" aria-hidden="true">
-        <path :d="branchPath('yes')" />
-        <path :d="branchPath('no')" />
+        <path :d="branchSplitPath()" />
       </svg>
       <div
         v-for="branch in (['yes', 'no'] as const)"
         :key="branch"
         class="appium-flow-branch"
+        :data-flow-condition-id="condition.id"
+        :data-flow-branch="branch"
         :class="[`appium-flow-branch--${branch}`, { 'appium-flow-branch--connected': branchConnectionTargetId(branch) }]"
       >
         <svg class="appium-flow-line appium-flow-branch__line" viewBox="0 0 10 100" preserveAspectRatio="none" aria-hidden="true">
@@ -282,7 +289,7 @@ function branchPath(branch: BranchName) {
                   text
                   size="small"
                   :icon="Delete"
-                  :disabled="disabled"
+                  :disabled="removeDisabled"
                   title="删除节点"
                   @click="$emit('remove', item.index)"
                 />
@@ -304,6 +311,7 @@ function branchPath(branch: BranchName) {
               :copy-mode="copyMode"
               :selected-copy-indexes="selectedCopyIndexes"
               :disabled="disabled"
+              :remove-disabled="removeDisabled"
               :allowed-locked-actions="allowedLockedActions"
               :clipboard-count="clipboardCount"
               @node-click="$emit('nodeClick', $event)"
@@ -311,8 +319,6 @@ function branchPath(branch: BranchName) {
               @remove="$emit('remove', $event)"
               @paste="(index, childBranch) => $emit('paste', index, childBranch)"
               @insert-branch-action="(index, childBranch, action) => $emit('insertBranchAction', index, childBranch, action)"
-              @connect-next="(index, childBranch) => $emit('connectNext', index, childBranch)"
-              @disconnect-next="(index, childBranch) => $emit('disconnectNext', index, childBranch)"
               @edit-input="$emit('editInput', $event)"
               @update-step="(index, step) => $emit('updateStep', index, step)"
             />
@@ -355,17 +361,6 @@ function branchPath(branch: BranchName) {
               </el-dropdown-menu>
             </template>
           </el-dropdown>
-          <el-button
-            v-if="branchConnectionTargetId(branch)"
-            size="small"
-            class="appium-flow-branch__connect"
-            :icon="Link"
-            :disabled="disabled"
-            title="取消当前分支与后续流程的连接"
-            @click.stop="toggleConnection(branch)"
-          >
-            取消连接
-          </el-button>
         </div>
       </div>
     </div>