android-midscene-automation 0.1.19 → 0.1.21

package/src/appium-recorder/flow-copy.ts

@@ -0,0 +1,193 @@
+import type { AppiumRecordedStep } from './types';
+
+export type FlowBranch = 'yes' | 'no';
+
+export type FlowClipboard = {
+  steps: AppiumRecordedStep[];
+  rootIds: string[];
+};
+
+type PasteTarget = {
+  afterIndex: number;
+  branch?: FlowBranch;
+};
+
+const targetKeys = [
+  'yesTargetId',
+  'noTargetId',
+  'successTargetId',
+  'failureTargetId',
+] as const;
+
+function clone<T>(value: T): T {
+  return structuredClone(value);
+}
+
+function scopeKey(step: AppiumRecordedStep) {
+  return step.flow?.parentConditionId
+    ? `${step.flow.parentConditionId}:${step.flow.parentBranch || ''}`
+    : 'main';
+}
+
+function collectDescendantIds(steps: AppiumRecordedStep[], rootIds: Iterable<string>) {
+  const ids = new Set(rootIds);
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const step of steps) {
+      if (step.flow?.parentConditionId && ids.has(step.flow.parentConditionId) && !ids.has(step.id)) {
+        ids.add(step.id);
+        changed = true;
+      }
+    }
+  }
+  return ids;
+}
+
+function setFlowTarget(step: AppiumRecordedStep, key: typeof targetKeys[number], targetId: string) {
+  const flow = { ...(step.flow || {}) };
+  if (targetId) flow[key] = targetId;
+  else delete flow[key];
+  step.flow = Object.keys(flow).length ? flow : undefined;
+}
+
+function wireContinuation(step: AppiumRecordedStep, targetId: string) {
+  setFlowTarget(step, 'successTargetId', targetId);
+  if (step.flow?.nodeKind !== 'condition' || !targetId) return;
+  if (!step.flow.yesTargetId) setFlowTarget(step, 'yesTargetId', targetId);
+  if (!step.flow.noTargetId) setFlowTarget(step, 'noTargetId', targetId);
+}
+
+export function createFlowClipboard(steps: AppiumRecordedStep[], indexes: number[]): FlowClipboard {
+  const selectedIndexes = [...new Set(indexes)].sort((left, right) => left - right);
+  const selectedSteps = selectedIndexes.map((index) => steps[index]).filter(Boolean);
+  const selectedIds = new Set(selectedSteps.map((step) => step.id));
+  const roots = selectedSteps.filter((step) => {
+    let parentId = step.flow?.parentConditionId;
+    while (parentId) {
+      if (selectedIds.has(parentId)) return false;
+      parentId = steps.find((item) => item.id === parentId)?.flow?.parentConditionId;
+    }
+    return true;
+  });
+  if (!roots.length) throw new Error('请选择要复制的节点');
+  const isDisconnected = roots.some((step, index) => {
+    if (!index) return false;
+    const previous = roots[index - 1];
+    if (scopeKey(previous) !== scopeKey(step)) {
+      return previous.flow?.successTargetId !== step.id;
+    }
+    const siblings = steps.filter((item) => scopeKey(item) === scopeKey(step));
+    return siblings.findIndex((item) => item.id === step.id)
+      !== siblings.findIndex((item) => item.id === previous.id) + 1;
+  });
+  if (isDisconnected) {
+    throw new Error('批量复制只能选择连续节点');
+  }
+
+  const rootIds = roots.map((step) => step.id);
+  const copiedIds = collectDescendantIds(steps, rootIds);
+  const copiedSteps = steps.filter((step) => copiedIds.has(step.id));
+  if (copiedSteps.some((step) => step.type === 'launchApp')) {
+    throw new Error('启动 APP 节点不能复制');
+  }
+  return { steps: clone(copiedSteps), rootIds };
+}
+
+export function pasteFlowClipboard(
+  steps: AppiumRecordedStep[],
+  clipboard: FlowClipboard,
+  target: PasteTarget,
+  createId: () => string = () => `step_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
+) {
+  if (!clipboard.steps.length || !clipboard.rootIds.length) throw new Error('复制板中没有节点');
+
+  const idMap = new Map(clipboard.steps.map((step) => [step.id, createId()]));
+  const rootIdSet = new Set(clipboard.rootIds);
+  const condition = target.branch ? steps[target.afterIndex] : undefined;
+  if (target.branch && (!condition || condition.flow?.nodeKind !== 'condition')) {
+    throw new Error('目标分支不存在');
+  }
+
+  const copies = clipboard.steps.map((source) => {
+    const step = clone(source);
+    step.id = idMap.get(source.id) || createId();
+    const flow = { ...(step.flow || {}) };
+    for (const key of targetKeys) {
+      const mappedId = flow[key] ? idMap.get(flow[key] || '') : '';
+      if (mappedId) flow[key] = mappedId;
+      else delete flow[key];
+    }
+    if (flow.parentConditionId) {
+      const mappedParentId = idMap.get(flow.parentConditionId);
+      if (mappedParentId) flow.parentConditionId = mappedParentId;
+      else {
+        delete flow.parentConditionId;
+        delete flow.parentBranch;
+      }
+    }
+    if (rootIdSet.has(source.id)) {
+      if (target.branch && condition) {
+        flow.parentConditionId = condition.id;
+        flow.parentBranch = target.branch;
+      } else {
+        delete flow.parentConditionId;
+        delete flow.parentBranch;
+      }
+    }
+    step.flow = Object.keys(flow).length ? flow : undefined;
+    return step;
+  });
+
+  const copiedBySourceId = new Map(clipboard.steps.map((step, index) => [step.id, copies[index]]));
+  const copiedRoots = clipboard.rootIds
+    .map((id) => copiedBySourceId.get(id))
+    .filter((step): step is AppiumRecordedStep => Boolean(step));
+  const firstRoot = copiedRoots[0];
+  const lastRoot = copiedRoots[copiedRoots.length - 1];
+  if (!firstRoot || !lastRoot) throw new Error('复制节点数据无效');
+
+  const nextSteps = [...steps];
+  let insertAfterIndex = target.afterIndex;
+  let continuationId = '';
+
+  if (target.branch && condition) {
+    const branchRoots = steps.filter((step) => (
+      step.flow?.parentConditionId === condition.id
+      && step.flow.parentBranch === target.branch
+    ));
+    if (branchRoots.length) {
+      const ownedIds = collectDescendantIds(steps, branchRoots.map((step) => step.id));
+      insertAfterIndex = Math.max(...steps.flatMap((step, index) => (ownedIds.has(step.id) ? [index] : [])));
+      const lastExistingRoot = branchRoots[branchRoots.length - 1];
+      continuationId = lastExistingRoot.flow?.successTargetId || condition.flow?.successTargetId || '';
+      const lastExistingIndex = nextSteps.findIndex((step) => step.id === lastExistingRoot.id);
+      const updatedLastExisting = clone(nextSteps[lastExistingIndex]);
+      setFlowTarget(updatedLastExisting, 'successTargetId', firstRoot.id);
+      nextSteps[lastExistingIndex] = updatedLastExisting;
+    } else {
+      const targetKey = target.branch === 'yes' ? 'yesTargetId' : 'noTargetId';
+      const currentTargetId = condition.flow?.[targetKey] || '';
+      const currentTarget = steps.find((step) => step.id === currentTargetId);
+      continuationId = currentTarget && !currentTarget.flow?.parentConditionId
+        ? currentTargetId
+        : condition.flow?.successTargetId || '';
+      const updatedCondition = clone(nextSteps[target.afterIndex]);
+      setFlowTarget(updatedCondition, targetKey, firstRoot.id);
+      nextSteps[target.afterIndex] = updatedCondition;
+    }
+  } else {
+    const previous = target.afterIndex >= 0 ? nextSteps[target.afterIndex] : undefined;
+    const nextMainStep = steps.slice(target.afterIndex + 1).find((step) => !step.flow?.parentConditionId);
+    continuationId = previous?.flow?.successTargetId || nextMainStep?.id || '';
+    if (previous?.flow?.successTargetId) {
+      const updatedPrevious = clone(previous);
+      setFlowTarget(updatedPrevious, 'successTargetId', firstRoot.id);
+      nextSteps[target.afterIndex] = updatedPrevious;
+    }
+  }
+
+  wireContinuation(lastRoot, continuationId);
+  nextSteps.splice(insertAfterIndex + 1, 0, ...copies);
+  return nextSteps;
+}

package/src/appium-recorder/flow-layout.ts

@@ -0,0 +1,88 @@
+import type { AppiumRecordedStep } from './types';
+
+export const FLOW_NODE_WIDTH = 420;
+export const FLOW_BRANCH_GAP = 16;
+
+export type ConditionLayout = {
+  yesWidth: number;
+  noWidth: number;
+  totalWidth: number;
+  yesAxis: number;
+  noAxis: number;
+};
+
+export type ConditionPlacement = {
+  left: number;
+  startAxis: number;
+  yesAxis: number;
+  noAxis: number;
+};
+
+export function placeConditionLayout(
+  layout: ConditionLayout,
+  canvasWidth: number,
+  parentAxis: number,
+): ConditionPlacement {
+  const parentCenter = (parentAxis / 100) * canvasWidth;
+  const left = Math.min(
+    Math.max(parentCenter - layout.totalWidth / 2, 0),
+    Math.max(canvasWidth - layout.totalWidth, 0),
+  );
+  const yesCenter = left + layout.yesWidth / 2;
+  const noCenter = left + layout.yesWidth + FLOW_BRANCH_GAP + layout.noWidth / 2;
+  return {
+    left,
+    startAxis: ((parentCenter - left) / layout.totalWidth) * 100,
+    yesAxis: (yesCenter / canvasWidth) * 100,
+    noAxis: (noCenter / canvasWidth) * 100,
+  };
+}
+
+export function buildConditionLayouts(steps: AppiumRecordedStep[]) {
+  const layouts = new Map<string, ConditionLayout>();
+  const visiting = new Set<string>();
+
+  function conditionLayout(conditionId: string): ConditionLayout {
+    const cached = layouts.get(conditionId);
+    if (cached) return cached;
+    if (visiting.has(conditionId)) {
+      return {
+        yesWidth: FLOW_NODE_WIDTH,
+        noWidth: FLOW_NODE_WIDTH,
+        totalWidth: FLOW_NODE_WIDTH * 2 + FLOW_BRANCH_GAP,
+        yesAxis: 25,
+        noAxis: 75,
+      };
+    }
+
+    visiting.add(conditionId);
+    const branchWidth = (branch: 'yes' | 'no') => Math.max(
+      FLOW_NODE_WIDTH,
+      ...steps
+        .filter((step) => (
+          step.flow?.parentConditionId === conditionId
+          && step.flow.parentBranch === branch
+          && step.flow.nodeKind === 'condition'
+        ))
+        .map((step) => conditionLayout(step.id).totalWidth),
+    );
+    const yesWidth = branchWidth('yes');
+    const noWidth = branchWidth('no');
+    const totalWidth = yesWidth + FLOW_BRANCH_GAP + noWidth;
+    const layout = {
+      yesWidth,
+      noWidth,
+      totalWidth,
+      yesAxis: (yesWidth / 2 / totalWidth) * 100,
+      noAxis: ((yesWidth + FLOW_BRANCH_GAP + noWidth / 2) / totalWidth) * 100,
+    };
+    visiting.delete(conditionId);
+    layouts.set(conditionId, layout);
+    return layout;
+  }
+
+  steps
+    .filter((step) => step.flow?.nodeKind === 'condition')
+    .forEach((step) => conditionLayout(step.id));
+  return layouts;
+}

package/src/style.css

@@ -192,7 +192,7 @@ select {
 .appium-recorder-layout {
   display: grid;
   flex: 1 1 auto;
-  grid-template-columns: minmax(0, 3fr) minmax(320px, 3fr) minmax(0, 4fr);
+  grid-template-columns: minmax(0, 3fr) minmax(320px, 2.8fr) minmax(0, 4.2fr);
   gap: 12px;
   align-items: stretch;
   height: auto;
@@ -662,10 +662,22 @@ select {
 
 .appium-flow-toolbar {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
+  gap: 6px;
   margin-bottom: 6px;
 }
 
+.appium-flow-toolbar .el-button + .el-button {
+  margin-left: 0;
+}
+
+.appium-flow-toolbar__status {
+  margin-right: 2px;
+  color: #64748b;
+  font-size: 12px;
+}
+
 .appium-flow-canvas {
   position: relative;
   height: 460px;
@@ -695,7 +707,8 @@ select {
   display: grid;
   gap: 8px;
   align-content: start;
-  width: max(760px, 100%);
+  width: max-content;
+  min-width: max(980px, 100%);
   min-width: 0;
   padding: 10px 12px 14px;
   transform-origin: 0 0;
@@ -725,7 +738,8 @@ select {
 }
 
 .appium-flow-content--overview {
-  width: min(980px, 100%);
+  width: max-content;
+  min-width: max(980px, 100%);
   margin: 0 auto;
   transform-origin: 0 0;
 }
@@ -836,8 +850,7 @@ select {
 
 .appium-flow-node__toggle {
   display: grid;
-  grid-template-columns: 24px minmax(0, 1fr);
-  gap: 6px;
+  grid-template-columns: minmax(0, 1fr);
   align-items: center;
   min-width: 0;
   padding: 0;
@@ -852,7 +865,8 @@ select {
 .appium-flow-item > .appium-flow-node,
 .appium-flow-item > .appium-flow-editor {
   box-sizing: border-box;
-  width: min(440px, 100%);
+  width: 100%;
+  max-width: 420px;
   justify-self: center;
   left: calc(var(--flow-axis) - 50%);
 }
@@ -872,16 +886,14 @@ select {
   border-color: #409eff;
 }
 
-.appium-flow-node__index {
-  display: grid;
-  place-items: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  background: #eef2ff;
-  color: #475569;
-  font-size: 11px;
-  font-weight: 700;
+.appium-flow-node--copying {
+  cursor: copy;
+}
+
+.appium-flow-node--selected {
+  border-color: #337ecc;
+  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.32);
+  background: #d9ecff;
 }
 
 .appium-flow-node__body {
@@ -931,17 +943,36 @@ select {
   position: relative;
   z-index: 1;
   display: grid;
-  grid-template-columns: repeat(2, minmax(300px, 1fr));
-  gap: 0;
+  grid-template-columns: repeat(2, minmax(420px, 1fr));
+  column-gap: 16px;
+  width: max-content;
+  min-width: 100%;
+  justify-self: center;
   margin-left: 0;
   margin-right: 0;
   padding-top: 30px;
 }
 
+.appium-flow-nested-condition {
+  position: relative;
+  z-index: 1;
+  width: max-content;
+  min-width: 856px;
+  justify-self: center;
+  background:
+    radial-gradient(circle at 1px 1px, #e7edf6 1px, transparent 0) 0 0 / 18px 18px,
+    #fff;
+}
+
+.appium-flow-nested-condition > .appium-flow-branches {
+  width: 100%;
+}
+
 .appium-flow-item--condition > .appium-flow-editor {
   order: 1;
   box-sizing: border-box;
-  width: min(440px, 100%);
+  width: 100%;
+  max-width: 420px;
   justify-self: center;
 }
 
@@ -978,8 +1009,9 @@ select {
   align-content: start;
   justify-self: center;
   box-sizing: border-box;
-  width: calc(100% - 32px);
-  min-width: 0;
+  width: 100%;
+  max-width: none;
+  min-width: 420px;
   padding: 0;
   color: #64748b;
   font-size: 11px;
@@ -1033,14 +1065,23 @@ select {
   gap: 10px;
   justify-self: center;
   width: 100%;
-  min-width: 0;
+  max-width: none;
+  min-width: 420px;
 }
 
 .appium-flow-branch-step-group {
   display: grid;
   gap: 6px;
   width: 100%;
-  min-width: 0;
+  max-width: none;
+  min-width: 420px;
+}
+
+.appium-flow-branch-step-group > .appium-flow-node,
+.appium-flow-branch-step-group > .appium-flow-editor {
+  box-sizing: border-box;
+  width: 420px;
+  justify-self: center;
 }
 
 .appium-flow-branch-step {
@@ -1051,6 +1092,7 @@ select {
   gap: 6px;
   align-items: center;
   width: 100%;
+  max-width: 420px;
   min-width: 0;
   padding: 6px 8px;
   border: 1px solid #d8e0ea;
@@ -1079,6 +1121,19 @@ select {
   justify-content: center;
 }
 
+.appium-flow-branch:has(
+  .appium-flow-branch-step-group:last-child > .appium-flow-nested-condition
+) > .appium-flow-branch__actions {
+  background: #fff;
+  box-shadow: 0 -10px 0 #fff;
+}
+
+.appium-flow-branch:has(
+  .appium-flow-branch-step-group:last-child > .appium-flow-nested-condition
+) > .appium-flow-branch__actions > .el-dropdown {
+  display: none;
+}
+
 .appium-flow-branch__connect {
   height: 24px;
   padding: 0 8px;
@@ -1140,11 +1195,11 @@ select {
   stroke: var(--appium-flow-line-color);
 }
 
-.appium-flow-branch--yes .appium-flow-branch-step {
+.appium-flow-branch--yes .appium-flow-branch-step:not(.appium-flow-node--selected) {
   border-color: #b3e19d;
 }
 
-.appium-flow-branch--no .appium-flow-branch-step {
+.appium-flow-branch--no .appium-flow-branch-step:not(.appium-flow-node--selected) {
   border-color: #fab6b6;
 }
 
@@ -1164,13 +1219,6 @@ select {
   gap: 8px;
 }
 
-.appium-flow-editor__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: flex-end;
-}
-
 .appium-flow-insert {
   position: relative;
   z-index: 1;
@@ -1246,8 +1294,78 @@ select {
 }
 
 .appium-replay-output--dialog {
-  height: 72vh;
-  max-height: 72vh;
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  max-height: none;
+}
+
+.appium-replay-dialog.el-dialog {
+  display: flex;
+  width: min(820px, calc(100vw - 32px)) !important;
+  height: min(620px, calc(100vh - 64px));
+  min-width: 420px;
+  min-height: 280px;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
+  flex-direction: column;
+  overflow: hidden;
+  resize: both;
+}
+
+.appium-replay-dialog > .el-dialog__header,
+.appium-replay-dialog > .el-dialog__footer {
+  flex: 0 0 auto;
+}
+
+.appium-replay-dialog > .el-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.appium-replay-dialog .appium-replay-output {
+  border-color: #263244;
+  background: #101722;
+  color: #d7e0ea;
+  scrollbar-color: #526174 #101722;
+}
+
+.appium-replay-dialog .appium-replay-output::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.appium-replay-dialog .appium-replay-output::-webkit-scrollbar-track {
+  background: #101722;
+}
+
+.appium-replay-dialog .appium-replay-output::-webkit-scrollbar-thumb {
+  border: 2px solid #101722;
+  border-radius: 6px;
+  background: #526174;
+}
+
+.appium-replay-fab {
+  position: fixed;
+  right: 28px;
+  bottom: 28px;
+  z-index: 50;
+}
+
+.appium-replay-fab .el-button {
+  width: 52px;
+  height: 52px;
+  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.28);
+  font-size: 20px;
+}
+
+.appium-replay-fab__button--running {
+  box-shadow:
+    0 0 0 5px rgba(230, 162, 60, 0.18),
+    0 8px 24px rgba(64, 158, 255, 0.28) !important;
 }
 
 .appium-navigation-dialog {
@@ -2628,6 +2746,17 @@ select {
   }
 }
 
+@media (max-width: 520px) {
+  .appium-replay-dialog.el-dialog {
+    min-width: calc(100vw - 24px);
+  }
+
+  .appium-replay-fab {
+    right: 16px;
+    bottom: 16px;
+  }
+}
+
 @media (max-width: 1200px) {
   .layout {
     grid-template-columns: 1fr;