android-midscene-automation 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -1,4 +1,8 @@
 # 更新记录
+## v0.2.4
+- Midscene Android、Android Playground、Core、Playground、Shared 和 Web 模块统一升级至 1.14.0。
+- 修复 Midscene 测试脚本生成过程中切换“AI 生成 / 自定义步骤编排”会清空生成状态和结果的问题；生成任务继续在后台执行，模式切换后保留已生成步骤与代码。
+
 ## v0.2.3
 - 修复长时间执行 ADB 操作、延时或 AI 识别后，Appium 因默认 60 秒命令空闲超时销毁会话，导致后续 Home 键、点击等节点报“invalid session id”的问题；托管服务关闭会话空闲计时，外部服务通过心跳保活并保留 60 秒空闲回收，避免创建请求取消或清理失败后遗留永久会话。
 - 为启动 App、清理数据、坐标点击与滑动补齐 ADB 超时和取消控制；终止前台检查后不再继续启动 App，异常结束仍清理会话。
@@ -6,7 +10,6 @@
 - 修复远程设备无法手动终止回放的问题，通过独立心跳传递取消信号，兼容任务派发前取消，并阻止同一设备重复提交回放。
 
 ## v0.2.2
-- 更新浅色后台界面：蓝色主色、白色卡片、浅灰背景、可折叠侧边栏与顶部页签。
 - 新增“概览 → 分析页”，根据已保存脚本和真实执行记录分别汇总 Midscene、Appium 测试数据。
 - 修复配置加载失败后出现空白可保存表单的问题，增加独立错误提示和重试；后端断线后自动尝试重连并支持手动重连，保留页面编辑内容。
 - Appium 配置自动保存失败后保留最新待保存内容并提供“重试保存”；修复切换或关闭 Appium 页签后，离开页面时未保存草稿保护失效的问题。

package/README.md

@@ -2,6 +2,30 @@
 
 一个面向 Android App 的自动化测试工具，同时支持 Midscene AI 测试和 Appium 组件树录制回放。
 
+## 界面预览
+
+![](./screen/c1.jpg)
+
+### Midscene
+
+![](./screen/m1.jpg)
+
+![](./screen/m2.jpg)
+
+![](./screen/m3.jpg)
+
+### Appium
+
+![](./screen/a1.jpg)
+
+![](./screen/a2.jpg)
+
+![](./screen/a3.jpg)
+
+![](./screen/a4.jpg)
+
+![](./screen/a5.jpg)
+
 ## 支持的测试方式
 
 | 测试方式 | 页面入口 | 工作方式 | 模型要求 | 适用场景 |
@@ -1358,6 +1382,10 @@ Linux: ~/.local/share/android-midscene-automation
 
 # 项目更新记录
 
+## v0.2.4
+- Midscene Android、Android Playground、Core、Playground、Shared 和 Web 模块统一升级至 1.14.0。
+- 修复 Midscene 测试脚本生成过程中切换“AI 生成 / 自定义步骤编排”会清空生成状态和结果的问题；生成任务继续在后台执行，模式切换后保留已生成步骤与代码。
+
 ## v0.2.3
 - 修复长时间执行 ADB 操作、延时或 AI 识别后，Appium 因默认 60 秒命令空闲超时销毁会话，导致后续 Home 键、点击等节点报“invalid session id”的问题；托管服务关闭会话空闲计时，外部服务通过心跳保活并保留 60 秒空闲回收，避免创建请求取消或清理失败后遗留永久会话。
 - 为启动 App、清理数据、坐标点击与滑动补齐 ADB 超时和取消控制；终止前台检查后不再继续启动 App，异常结束仍清理会话。
@@ -1365,7 +1393,6 @@ Linux: ~/.local/share/android-midscene-automation
 - 修复远程设备无法手动终止回放的问题，通过独立心跳传递取消信号，兼容任务派发前取消，并阻止同一设备重复提交回放。
 
 ## v0.2.2
-- 更新浅色后台界面：蓝色主色、白色卡片、浅灰背景、可折叠侧边栏与顶部页签。
 - 新增“概览 → 分析页”，根据已保存脚本和真实执行记录分别汇总 Midscene、Appium 测试数据。
 - 修复配置加载失败后出现空白可保存表单的问题，增加独立错误提示和重试；后端断线后自动尝试重连并支持手动重连，保留页面编辑内容。
 - Appium 配置自动保存失败后保留最新待保存内容并提供“重试保存”；修复切换或关闭 Appium 页签后，离开页面时未保存草稿保护失效的问题。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "android-midscene-automation",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/oooooooko/android-midscene-automation.git"
@@ -45,12 +45,12 @@
     "mediabunny": "1.58.0",
     "@dagrejs/dagre": "1.1.5",
     "@element-plus/icons-vue": "2.3.2",
-    "@midscene/android": "https://registry.npmjs.org/@midscene/android/-/android-1.12.7.tgz",
-    "@midscene/android-playground": "https://registry.npmjs.org/@midscene/android-playground/-/android-playground-1.12.7.tgz",
-    "@midscene/core": "https://registry.npmjs.org/@midscene/core/-/core-1.12.7.tgz",
-    "@midscene/playground": "https://registry.npmjs.org/@midscene/playground/-/playground-1.12.7.tgz",
-    "@midscene/shared": "https://registry.npmjs.org/@midscene/shared/-/shared-1.12.7.tgz",
-    "@midscene/web": "https://registry.npmjs.org/@midscene/web/-/web-1.12.7.tgz",
+    "@midscene/android": "https://registry.npmjs.org/@midscene/android/-/android-1.14.0.tgz",
+    "@midscene/android-playground": "https://registry.npmjs.org/@midscene/android-playground/-/android-playground-1.14.0.tgz",
+    "@midscene/core": "https://registry.npmjs.org/@midscene/core/-/core-1.14.0.tgz",
+    "@midscene/playground": "https://registry.npmjs.org/@midscene/playground/-/playground-1.14.0.tgz",
+    "@midscene/shared": "https://registry.npmjs.org/@midscene/shared/-/shared-1.14.0.tgz",
+    "@midscene/web": "https://registry.npmjs.org/@midscene/web/-/web-1.14.0.tgz",
     "@techstark/opencv-js": "5.0.0-release.1",
     "@vitejs/plugin-vue": "6.0.7",
     "@vue-flow/core": "1.48.2",

package/server/http-api.ts

@@ -79,7 +79,7 @@ function delay(ms: number) {
   });
 }
 
-// Work around @midscene/android-playground v1.12.x ESM __dirname usage on Node 24.
+// Keep the Android Playground launcher compatible with Node 24 ESM execution.
 const START_ANDROID_PLAYGROUND_WITHOUT_BROWSER = [
   "import { createRequire } from 'node:module';",
   'const require = createRequire(import.meta.url);',

package/src/App.vue

@@ -110,8 +110,9 @@ const { isRunningScript, isStoppingScript, executionLog, executionProcess, lastR
 const visitedMenus = reactive(new Set<MenuKey>([activeMenu.value]));
 const openMenus = ref<MenuKey[]>([...menuKeys]);
 const visibleMenuItems = computed(() => openMenus.value.map(key => menuItems.find(item => item.key === key)!));
-function closeMenu(key: MenuKey) {
+async function closeMenu(key: MenuKey) {
   if (openMenus.value.length === 1) return;
+  if (key === 'generator' && !(await confirmUnsavedGeneratorNavigation())) return;
   const index = openMenus.value.indexOf(key);
   openMenus.value.splice(index, 1);
   if (activeMenu.value === key) activeMenu.value = openMenus.value[Math.max(0, index - 1)];
@@ -144,6 +145,23 @@ const appPromptPrefix = computed(() => {
 const effectiveSourcePrompt = computed(() => `${appPromptPrefix.value}${sourcePrompt.value}`.trim());
 const generatedCodeFromSteps = computed(() => buildScript(form, steps.value));
 const generatedCode = computed(() => generatedCodeOverride.value ?? generatedCodeFromSteps.value);
+const generatorContentSnapshot = computed(() => JSON.stringify({
+  form: {
+    promptTitle: form.promptTitle,
+    testName: form.testName,
+    appPresetId: form.appPresetId,
+  },
+  sourcePrompt: sourcePrompt.value,
+  steps: steps.value,
+  generatedCodeOverride: generatedCodeOverride.value,
+  generatedCodeDraft: generatedCodeEditing.value ? generatedCodeDraft.value : '',
+}));
+const savedGeneratorSnapshot = shallowRef('');
+const generatorHasUnsavedContent = computed(() => (
+  showGeneratedCode.value
+  && Boolean(generatedCode.value.trim())
+  && generatorContentSnapshot.value !== savedGeneratorSnapshot.value
+));
 const selectedScript = computed(() => savedScripts.value.find((item) => item.id === selectedScriptId.value));
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 const deviceActions = [
@@ -155,8 +173,11 @@ const deviceActions = [
   { key: 'tasks', label: '任务', icon: tasksIcon, keyCode: 187 },
 ] as const;
 
-const selectMenu = (key: string) => {
-  activeMenu.value = key as MenuKey;
+const selectMenu = async (key: string) => {
+  const nextMenu = key as MenuKey;
+  if (nextMenu === activeMenu.value) return;
+  if (activeMenu.value === 'generator' && !(await confirmUnsavedGeneratorNavigation())) return;
+  activeMenu.value = nextMenu;
 };
 
 const resetGeneratedCodeEditor = () => {
@@ -166,11 +187,6 @@ const resetGeneratedCodeEditor = () => {
   generatedCodeEditSaving.value = false;
 };
 
-watch(activeGeneratorMode, () => {
-  showGeneratedCode.value = false;
-  resetGeneratedCodeEditor();
-});
-
 function formatScriptTime(value: string) {
   if (!value) return '';
   const date = new Date(value);
@@ -455,16 +471,16 @@ const buildSourcePromptForSave = () => {
 
 const saveCurrentScript = async () => {
   const validInput = validateCurrentGeneratorInputs();
-  if (!validInput) return;
+  if (!validInput) return false;
 
   if (generatedCodeEditing.value) {
     ElMessage.error('请先保存或撤回代码修改');
-    return;
+    return false;
   }
 
   if (!showGeneratedCode.value || !generatedCode.value.trim()) {
     ElMessage.error('请先点击 AI 生成，生成代码后再保存脚本');
-    return;
+    return false;
   }
 
   const { scriptName, promptTitle } = validInput;
@@ -478,7 +494,7 @@ const saveCurrentScript = async () => {
         cancelButtonText: '取消',
       });
     } catch {
-      return;
+      return false;
     }
   }
 
@@ -495,10 +511,34 @@ const saveCurrentScript = async () => {
     });
 
     await loadSavedScripts(payload.script?.id || '');
+    savedGeneratorSnapshot.value = generatorContentSnapshot.value;
     await sleep(Math.max(0, 1200 - (Date.now() - startedAt)));
     closeActionDialog();
+    return true;
   } catch (error) {
     failActionDialog(error instanceof Error ? error.message : '保存脚本失败');
+    return false;
+  }
+};
+
+const confirmUnsavedGeneratorNavigation = async () => {
+  if (!generatorHasUnsavedContent.value) return true;
+
+  try {
+    await ElMessageBox.confirm(
+      '当前生成内容尚未保存。可以先保存脚本，或暂不保存并继续切换页面。',
+      '未保存的测试脚本',
+      {
+        type: 'warning',
+        confirmButtonText: '保存脚本',
+        cancelButtonText: '暂不保存',
+        distinguishCancelAndClose: true,
+        closeOnClickModal: false,
+      },
+    );
+    return await saveCurrentScript();
+  } catch (action) {
+    return action === 'cancel';
   }
 };
 
@@ -554,7 +594,7 @@ const generateWithModel = async () => {
   errorMessage.value = '';
   const controller = new AbortController();
   aiGenerateAbortController = controller;
-  openActionDialog('AI生成', {
+  openActionDialog('AI 生成', {
     canRunInBackground: true,
     canCancel: true,
     cancelText: '终止',
@@ -674,7 +714,7 @@ watch(activeMenu, menu => {
   if (!openMenus.value.includes(menu)) openMenus.value.push(menu);
 }, { flush: 'sync' });
 const warnBeforeUnload = (event: BeforeUnloadEvent) => {
-  if (!appiumAutoSave.dirty.value) return;
+  if (!appiumAutoSave.dirty.value && !generatorHasUnsavedContent.value) return;
   event.preventDefault();
   event.returnValue = '';
 };
@@ -695,7 +735,9 @@ onUnmounted(() => {
     <el-dialog
       v-model="actionDialog.visible"
       :title="actionDialog.title"
-      width="360px"
+      width="min(440px, calc(100vw - 32px))"
+      align-center
+      append-to-body
       :close-on-click-modal="false"
       :close-on-press-escape="!actionDialog.loading"
       :show-close="!actionDialog.loading"
@@ -712,7 +754,7 @@ onUnmounted(() => {
         <div v-if="actionDialog.loading" class="action-dialog__footer-actions">
           <el-button
             v-if="actionDialog.canCancel"
-            class="action-dialog__footer-button action-dialog__footer-button--secondary"
+            class="action-dialog__footer-button"
             :icon="VideoPause"
             :loading="actionDialog.canceling"
             @click="stopGenerateWithModel"
@@ -721,7 +763,8 @@ onUnmounted(() => {
           </el-button>
           <el-button
             v-if="actionDialog.canRunInBackground"
-            class="action-dialog__footer-button action-dialog__footer-button--primary"
+            type="primary"
+            class="action-dialog__footer-button"
             @click="sendActionDialogToBackground"
           >
             后台处理
@@ -729,7 +772,8 @@ onUnmounted(() => {
         </div>
         <el-button
           v-else
-          class="action-dialog__footer-button action-dialog__footer-button--primary"
+          type="primary"
+          class="action-dialog__footer-button"
           @click="closeActionDialog"
         >
           关闭

package/src/style.css

@@ -68,38 +68,33 @@ select {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  min-height: 56px;
-  padding: 4px 0;
-  color: #303133;
+  gap: 10px;
+  min-height: 72px;
+  padding: 8px 0;
+  color: var(--ui-text);
   font-size: 14px;
 }
 
 .action-dialog__spinner {
-  font-size: 16px;
+  color: var(--ui-primary);
+  font-size: 18px;
   animation: action-dialog-spin 1s linear infinite;
 }
 
 .action-dialog__error {
-  min-height: 0;
-  padding: 4px 0 2px;
-  color: #f56c6c;
+  min-height: 72px;
+  padding: 14px 16px;
+  border: 1px solid #ffd6d6;
+  border-radius: var(--ui-radius-control);
+  background: #fff5f5;
+  color: var(--ui-danger);
   font-size: 13px;
   line-height: 1.6;
   white-space: pre-wrap;
 }
 
-.action-dialog .el-dialog__header {
-  margin-right: 0;
-  padding: 14px 16px 6px;
-}
-
 .action-dialog .el-dialog__body {
-  padding: 8px 16px 6px;
-}
-
-.action-dialog .el-dialog__footer {
-  padding: 6px 16px 14px;
+  padding-bottom: 14px;
 }
 
 .action-dialog__footer-actions {
@@ -110,44 +105,13 @@ select {
 }
 
 .action-dialog__footer-button.el-button {
-  min-width: 88px;
-  height: 34px;
-  padding: 0 16px;
-  border-radius: 7px;
-  font-size: 14px;
-  font-weight: 700;
+  min-width: 104px;
 }
 
 .action-dialog__footer-button.el-button + .action-dialog__footer-button.el-button {
   margin-left: 0;
 }
 
-.action-dialog__footer-button--secondary.el-button {
-  border-color: #e5e7eb;
-  background: #fff;
-  color: #8b95a5;
-}
-
-.action-dialog__footer-button--secondary.el-button:hover,
-.action-dialog__footer-button--secondary.el-button:focus {
-  border-color: #d7dce5;
-  background: #f8fafc;
-  color: #6b7280;
-}
-
-.action-dialog__footer-button--primary.el-button {
-  border-color: #ffd436;
-  background: #ffd436;
-  color: #111827;
-}
-
-.action-dialog__footer-button--primary.el-button:hover,
-.action-dialog__footer-button--primary.el-button:focus {
-  border-color: #ffca1f;
-  background: #ffca1f;
-  color: #111827;
-}
-
 @keyframes action-dialog-spin {
   from {
     transform: rotate(0deg);
@@ -1298,7 +1262,7 @@ select {
 
 .appium-replay-dialog.el-dialog {
   display: flex;
-  padding: 16px;
+  padding: 0;
   height: min(620px, calc(100vh - 64px));
   min-width: 420px;
   min-height: 280px;
@@ -1318,16 +1282,16 @@ select {
   flex: 1 1 auto;
   min-height: 0;
   overflow: hidden;
-  padding: 8px 0 0;
+  padding: 16px 20px 0;
 }
 
 .appium-replay-dialog > .el-dialog__header {
-  padding: 0 0 16px;
-  border-bottom: 0;
+  padding: 18px 20px 14px;
+  border-bottom: 1px solid var(--ui-border);
 }
 
 .appium-replay-dialog > .el-dialog__footer {
-  padding: 16px 0 0;
+  padding: 12px 20px 18px;
 }
 
 .appium-replay-dialog .appium-replay-output {
@@ -3592,22 +3556,22 @@ body {
   flex-direction: column;
   height: 86dvh;
   max-height: calc(100dvh - 32px);
-  overflow: visible;
-  padding: 16px;
-  border: 0;
-  border-radius: 4px;
-  box-shadow: var(--el-box-shadow);
+  overflow: hidden;
+  padding: 0;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
 }
 
 .appium-flow-dialog .el-dialog__header {
   flex: none;
-  padding: 0 0 16px;
-  border-bottom: 0;
+  padding: 18px 20px 14px;
+  border-bottom: 1px solid var(--ui-border);
 }
 
 .appium-flow-dialog .el-dialog__title {
-  font-size: var(--el-dialog-title-font-size);
-  font-weight: 400;
+  font-size: 16px;
+  font-weight: 650;
 }
 
 .appium-flow-dialog .el-dialog__body {
@@ -3615,7 +3579,7 @@ body {
   flex-direction: column;
   flex: 1;
   min-height: 0;
-  padding: 8px 0 0;
+  padding: 16px 20px 20px;
 }
 
 .appium-flow-dialog__toolbar { flex: none; }