android-midscene-automation 0.1.13 → 0.1.14

package/src/appium-recorder/types.ts

@@ -66,6 +66,7 @@ export type AppiumRecordedStep = {
     | 'pinch'
     | 'runScript';
   label: string;
+  note?: string;
   selector?: AppiumSelector;
   contextSelector?: AppiumSelector;
   selectorChain?: AppiumSelector[];
@@ -82,6 +83,7 @@ export type AppiumRecordedStep = {
     parentBranch?: 'yes' | 'no';
     successTargetId?: string;
     failureTargetId?: string;
+    textMatch?: 'contains' | 'exact';
     collapsed?: boolean;
   };
   pageBefore?: AppiumPageSnapshot;

package/src/pages/ConfigPage.vue

@@ -84,6 +84,34 @@ const updateMidsceneProvider = (value: string) => {
 <template>
   <div class="config-page">
     <section class="config-grid">
+      <el-card shadow="never" class="config-module-card">
+        <template #header>
+          <div class="panel-header">
+            <span>运行配置</span>
+            <el-button type="primary" :loading="isSavingModelConfig" @click="$emit('saveModelConfig')">
+              保存运行配置
+            </el-button>
+          </div>
+        </template>
+
+        <el-form label-position="top">
+          <el-form-item label="Android SDK 路径">
+            <el-input
+              v-model="configForm.runtime.androidSdkPath"
+              clearable
+              placeholder="留空时读取 ANDROID_SDK_ROOT、ANDROID_HOME 或系统默认路径"
+            />
+          </el-form-item>
+          <el-form-item label="回放报告目录">
+            <el-input
+              v-model="configForm.runtime.reportOutputPath"
+              clearable
+              placeholder="留空时保存到启动目录下的 output"
+            />
+          </el-form-item>
+        </el-form>
+      </el-card>
+
       <el-card shadow="never" class="config-module-card">
         <template #header>
           <div class="panel-header">

package/src/style.css

@@ -192,7 +192,7 @@ select {
 .appium-recorder-layout {
   display: grid;
   flex: 1 1 auto;
-  grid-template-columns: minmax(0, 4fr) minmax(320px, 3fr) minmax(0, 3fr);
+  grid-template-columns: minmax(0, 3fr) minmax(320px, 3fr) minmax(0, 4fr);
   gap: 12px;
   align-items: stretch;
   height: auto;
@@ -354,7 +354,7 @@ select {
 .appium-current-activity {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
+  align-items: start;
   gap: 12px;
   padding: 12px 0 0;
   border-top: 1px solid #e4e7ed;
@@ -363,11 +363,15 @@ select {
 }
 
 .appium-current-activity code {
+  display: -webkit-box;
   overflow: hidden;
   color: #303133;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
 }
 
 .appium-node-detail__title {
@@ -390,6 +394,16 @@ select {
   padding: 16px;
 }
 
+.appium-script-list__toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.appium-script-list__file-input {
+  display: none;
+}
+
 .appium-script-list__item {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -676,6 +690,8 @@ select {
 }
 
 .appium-flow-content {
+  --appium-flow-line-width: 3px;
+  --appium-flow-line-color: #dbe5f1;
   display: grid;
   gap: 8px;
   align-content: start;
@@ -699,13 +715,19 @@ select {
   background:
     radial-gradient(circle at 1px 1px, #e7edf6 1px, transparent 0) 0 0 / 18px 18px,
     #fff;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+
+.appium-flow-dialog-canvas--dragging {
+  cursor: grabbing;
 }
 
 .appium-flow-content--overview {
   width: min(980px, 100%);
   margin: 0 auto;
-  transform: none;
-  user-select: text;
+  transform-origin: 0 0;
 }
 
 .appium-flow-content .el-empty {
@@ -713,10 +735,11 @@ select {
 }
 
 .appium-flow-item {
+  --flow-axis: 50%;
   position: relative;
   display: grid;
   gap: 6px;
-  justify-items: stretch;
+  justify-items: center;
   min-width: 0;
 }
 
@@ -724,19 +747,33 @@ select {
   position: relative;
   z-index: 1;
   display: grid;
-  justify-items: start;
+  justify-items: center;
   gap: 6px;
 }
 
-.appium-flow-start--has-next::after {
-  content: "";
+.appium-flow-line {
   position: absolute;
   z-index: 0;
+  width: 10px;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.appium-flow-line path {
+  fill: none;
+  stroke: var(--appium-flow-line-color);
+  stroke-width: var(--appium-flow-line-width);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.appium-flow-start__line {
   top: 30px;
   bottom: -8px;
-  left: 19px;
-  width: 2px;
-  background: #dbe5f1;
+  left: 50%;
+  height: calc(100% - 22px);
+  transform: translateX(-50%);
 }
 
 .appium-flow-start__node {
@@ -765,22 +802,18 @@ select {
   padding-bottom: 2px;
 }
 
-.appium-flow-start--overview::after {
+.appium-flow-start--overview .appium-flow-start__line {
   bottom: -10px;
+  height: calc(100% - 20px);
 }
 
-.appium-flow-item:not(:last-child)::after {
-  content: "";
+.appium-flow-item__line {
   position: absolute;
-  left: 19px;
+  left: var(--flow-axis);
   top: 40px;
   bottom: -8px;
-  width: 2px;
-  background: #dbe5f1;
-}
-
-.appium-flow-item--condition:not(:last-child)::after {
-  display: none;
+  height: calc(100% - 32px);
+  transform: translateX(-50%);
 }
 
 .appium-flow-node {
@@ -816,10 +849,12 @@ select {
   cursor: pointer;
 }
 
-.appium-flow-item:not(.appium-flow-item--condition) > .appium-flow-node,
-.appium-flow-item:not(.appium-flow-item--condition) > .appium-flow-editor {
+.appium-flow-item > .appium-flow-node,
+.appium-flow-item > .appium-flow-editor {
   box-sizing: border-box;
   width: min(440px, 100%);
+  justify-self: center;
+  left: calc(var(--flow-axis) - 50%);
 }
 
 .appium-flow-node--condition {
@@ -871,6 +906,15 @@ select {
   overflow-wrap: anywhere;
 }
 
+.appium-flow-node__note {
+  min-width: 0;
+  color: #303133;
+  font-size: 11px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
 .appium-flow-node__actions {
   display: inline-flex;
   gap: 2px;
@@ -888,12 +932,24 @@ select {
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(2, minmax(300px, 1fr));
-  gap: 56px;
-  margin-left: 24px;
-  margin-right: 24px;
+  gap: 0;
+  margin-left: 0;
+  margin-right: 0;
   padding-top: 30px;
 }
 
+.appium-flow-item--condition > .appium-flow-editor {
+  order: 1;
+  box-sizing: border-box;
+  width: min(440px, 100%);
+  justify-self: center;
+}
+
+.appium-flow-item--condition > .appium-flow-branches {
+  order: 2;
+  justify-self: stretch;
+}
+
 .appium-flow-branch-lines {
   position: absolute;
   top: -6px;
@@ -904,10 +960,11 @@ select {
   pointer-events: none;
 }
 
-.appium-flow-branch-lines path {
+.appium-flow-branch-lines path,
+.appium-flow-merge path {
   fill: none;
-  stroke: #e6a23c;
-  stroke-width: 2;
+  stroke: var(--appium-flow-line-color);
+  stroke-width: var(--appium-flow-line-width);
   stroke-linecap: round;
   stroke-linejoin: round;
   vector-effect: non-scaling-stroke;
@@ -917,23 +974,23 @@ select {
   position: relative;
   display: grid;
   gap: 10px;
+  align-self: start;
   align-content: start;
+  justify-self: center;
+  box-sizing: border-box;
+  width: calc(100% - 32px);
   min-width: 0;
   padding: 0;
   color: #64748b;
   font-size: 11px;
 }
 
-.appium-flow-branch::before {
-  content: "";
-  position: absolute;
-  z-index: 0;
+.appium-flow-branch__line {
   top: 18px;
   bottom: 12px;
   left: 50%;
-  width: 2px;
+  height: calc(100% - 30px);
   transform: translateX(-50%);
-  background: #d8e0ea;
 }
 
 .appium-flow-branch__label {
@@ -979,62 +1036,28 @@ select {
   min-width: 0;
 }
 
+.appium-flow-branch-step-group {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+}
+
 .appium-flow-branch-step {
   position: relative;
   z-index: 1;
   display: grid;
-  grid-template-columns: 20px minmax(0, 1fr) auto;
-  gap: 5px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px;
   align-items: center;
+  width: 100%;
   min-width: 0;
-  padding: 5px 6px;
+  padding: 6px 8px;
   border: 1px solid #d8e0ea;
   border-radius: 8px;
   background: #fff;
 }
 
-.appium-flow-branch-step__delete.el-button {
-  width: 22px;
-  height: 22px;
-  margin: 0;
-  padding: 0;
-}
-
-.appium-flow-branch-step__index {
-  display: grid;
-  place-items: center;
-  width: 19px;
-  height: 19px;
-  border-radius: 50%;
-  background: #eef2ff;
-  color: #475569;
-  font-size: 10px;
-  font-weight: 700;
-}
-
-.appium-flow-branch-step__body {
-  display: grid;
-  gap: 1px;
-  min-width: 0;
-}
-
-.appium-flow-branch-step__title {
-  min-width: 0;
-  color: #303133;
-  font-size: 11px;
-  font-weight: 700;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-}
-
-.appium-flow-branch-step__meta {
-  min-width: 0;
-  color: #64748b;
-  font-size: 10px;
-  line-height: 1.3;
-  overflow-wrap: anywhere;
-}
-
 .appium-flow-branch__insert {
   position: relative;
   z-index: 1;
@@ -1046,10 +1069,20 @@ select {
   font-size: 12px;
 }
 
-.appium-flow-branch > .el-dropdown {
+.appium-flow-branch__actions {
   position: relative;
   z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
   justify-self: center;
+  justify-content: center;
+}
+
+.appium-flow-branch__connect {
+  height: 24px;
+  padding: 0 8px;
+  font-size: 12px;
 }
 
 .appium-flow-branch--yes .appium-flow-branch__label {
@@ -1068,12 +1101,43 @@ select {
   background: transparent;
 }
 
-.appium-flow-branch--yes::before {
-  background: #b3e19d;
+.appium-flow-branch--connected .appium-flow-branch__line {
+  bottom: -1px;
+  height: calc(100% - 17px);
 }
 
-.appium-flow-branch--no::before {
-  background: #fab6b6;
+.appium-flow-branch--connected {
+  align-self: stretch;
+}
+
+.appium-flow-merge {
+  order: 3;
+  position: relative;
+  z-index: 0;
+  justify-self: stretch;
+  height: 36px;
+  margin: -6px 0 0;
+  pointer-events: none;
+}
+
+.appium-flow-merge svg {
+  position: absolute;
+  inset: 0 0 -8px;
+  width: 100%;
+  height: calc(100% + 8px);
+  overflow: visible;
+}
+
+.appium-flow-merge path {
+  stroke: var(--appium-flow-line-color);
+}
+
+.appium-flow-merge__yes {
+  stroke: var(--appium-flow-line-color);
+}
+
+.appium-flow-merge__no {
+  stroke: var(--appium-flow-line-color);
 }
 
 .appium-flow-branch--yes .appium-flow-branch-step {
@@ -1110,11 +1174,11 @@ select {
 .appium-flow-insert {
   position: relative;
   z-index: 1;
-  justify-self: start;
+  justify-self: center;
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  margin-left: 38px;
+  margin-left: 0;
   padding: 3px 8px;
   border: 1px dashed #d6dde8;
   border-radius: 999px;
@@ -1139,6 +1203,15 @@ select {
   margin-left: 0;
 }
 
+.appium-flow-start > .el-dropdown,
+.appium-flow-item > .el-dropdown {
+  position: relative;
+  width: fit-content;
+  justify-self: center;
+  left: calc(var(--flow-axis, 50%) - 50%);
+  transform: translateX(calc(50% + 8px));
+}
+
 .appium-linked-script-select {
   width: 100%;
 }

package/src/types.ts

@@ -11,6 +11,10 @@ export type GeneratorForm = {
 };
 
 export type ConfigForm = {
+  runtime: {
+    androidSdkPath: string;
+    reportOutputPath: string;
+  };
   midscene: {
     model: {
       provider: MidsceneModelProvider;