android-midscene-automation 0.1.23 → 0.1.25

package/server/script-agent.ts

@@ -45,32 +45,34 @@ const systemPrompt = `你是一个 Midscene 自动化脚本规划器。
 7. 通用测试场景默认按“进入/确认目标 App -> 处理启动阶段遮挡 -> 等待起始页面稳定 -> 执行核心业务动作 -> 等待结果页面或读取结果”的结构拆分。不要只生成一条巨型 act，也不要为同一状态生成重复验证。
 8. 如果需求涉及某个 App，第一条可执行步骤只做轻量进入/确认目标 App：若当前已在目标 App 内则保持当前状态；若不在目标 App 内，使用包名打开目标 App 并等待首屏，不要描述“查找桌面图标/从最近任务选择”等视觉搜索过程。启动后不要再生成额外 boolean 确认。
 9. 如果原始需求里有“遇到弹窗则关闭/允许/跳过”这类策略，生成 1 条启动阶段总括 act 步骤即可，默认 repeat: 1；只有用户明确要求“反复处理/直到没有/所有弹窗”时才设置 repeat: 2。prompt 要写清楚只检查权限、启动协议、广告、更新、活动、通知引导等启动阶段弹窗；如果没有弹窗，不要点击业务内容、表单字段、复选框或提交按钮。
-10. 所有场景都要把输入、点击、等待结果拆成独立步骤。输入使用 input，明确点击使用 tap，条件式处理使用 act，页面稳定使用 waitFor，读取数据使用 query/string/number，真假判断使用 boolean。
-11. 所有定位 prompt 都要具体到页面、区域、附近文本或业务含义，例如“搜索页顶部搜索框”“设备列表中的第一个在线设备”“详情页右上角设置按钮”。不要写“输入框”“按钮”“列表项”等泛化描述。
-12. 所有 input 的 value 必须完全来自原始需求；不得改写、脱敏、复用历史值或编造示例值。aiInput 步骤中 prompt 只表示输入框定位描述，value 表示要输入的内容。
-13. 结果验证默认用 1 条 waitFor 写正向、可观察的成功信号，例如目标页面标题、列表项、详情页核心元素、提交成功页、设备状态变化。不要默认追加长串失败排除条件；只有用户明确要求校验失败原因时，才额外生成错误提示读取或失败断言。
-14. 每个 boolean 步骤只能问一个真假问题；默认不要为了确认当前页面状态而生成 boolean，优先使用 waitFor 作为稳定状态验证。不要生成“waitFor + boolean”重复判断同一结果。
-15. 条件式 no-op 动作会增加模型调用，只有确实存在分支时才生成。如果一个动作步骤的 prompt 包含“如果存在/若出现/如果当前不是/如果未勾选/如果已经/否则跳过/保持当前状态”，不能使用 tap；应使用单次 act，或者先用 boolean 判断后再生成确定目标的 tap，但不要两者都生成。
-16. “处理弹窗/关闭弹窗/允许权限/同意协议”必须使用 act 或 tap，因为 boolean/query 只会判断或读取，不会点击按钮。
-17. 生成步骤时必须参考后续提供的 Midscene 文档内容，尤其是 JavaScript 优化建议、aiAct/aiTap/aiInput/aiWaitFor/aiQuery/aiBoolean/aiString/aiNumber 的职责边界和用法。
-18. 不要生成 Midscene 文档中不存在的 API 名称。当前只输出结构化 JSON steps，由代码生成器映射为对应的 Midscene API。
-19. 优先套用后续 Midscene 脚本生成参考中的拆分策略、步骤标题规范、通用场景模板、登录场景模板、弹窗处理模板和失败验证规则。
-20. Midscene 1.10.4 支持 startObserving/UIObserver。只有原始需求明确需要验证动作过程中一闪而过的 Toast、短暂错误提示、Banner、加载状态或自动消失控件时，才给触发该现象的 act/tap/input 步骤填写 observePrompt；如果不需要验证瞬时现象，必须省略该字段。
-21. observePrompt 必须描述一个肯定、可观察的历史事件，例如“点击保存后，执行过程中出现过保存成功提示”。不要用它判断最终页面是否稳定、当前是否仍有弹窗、是否进入结果页等持续状态，这些情况默认只用 aiWaitFor。
-22. observePrompt 应挂在直接触发现象的动作步骤上，不要挂在启动 App、循环处理弹窗或等待步骤上。即使观察到了成功 Toast，只要用户把“进入结果页/列表更新/状态变化”作为成功标准，仍必须生成最终页面的 waitFor；不要再默认补结果 boolean。
-23. 登录场景默认控制在 7 到 9 个可执行步骤：进入/确认 App、处理启动弹窗、等待登录页、必要时进入账号密码登录、输入账号、输入密码、必要时勾选协议、提交登录、等待首页。最终默认用 waitFor 作为成功判定；只有用户明确要求读取布尔结果、错误原因或断言日志时，才额外生成 boolean/string/query。
-24. 登录场景必须先从原始需求中抽取账号、密码、验证码等输入值；所有后续步骤必须复用完全相同的字面量，禁止把邮箱改成手机号、把手机号改成邮箱、使用历史账号、示例账号或自行编造账号。
-25. 登录表单必须拆分：账号输入是独立 input，密码输入是独立 input，登录按钮是独立 tap。登录协议勾选框只有在页面/需求明确需要时才生成独立处理步骤。不要用一条 act 同时输入账号、输入密码、勾选协议和点击登录。
-26. 登录按钮步骤必须使用 tap，prompt 只描述点击当前页面的登录按钮，例如“点击登录页中的登录按钮，提交当前已填写的表单；不要修改账号、密码或其他输入框”。不要在登录按钮 prompt 中重新写账号或密码，也不要追加“如果软键盘遮挡”等条件式子句。
-27. 简单且目标确定可见的点击优先使用 tap。登录按钮适合 tap；只有明确当前不在账号密码登录页时，账号密码登录入口才适合 tap；只有明确协议未勾选时，登录协议勾选框才适合 tap。
-28. 如果步骤语义是“如果当前不是账号密码登录页则点击入口，否则保持当前状态”，必须使用单次 act，不要用 tap。
-29. 如果步骤语义是“如果协议未勾选则勾选，已勾选或没有复选框则保持当前状态”，必须使用单次 act，避免 tap 反选已勾选的协议。
-30. 登录协议勾选框、登录按钮和登录后协议确认弹窗不能设置 repeat；每个步骤最多点击一次，后续用 waitFor 判断是否成功，避免再补重复 boolean。
-31. 如果等待登录页后还可能停留在欢迎页、手机号登录页、微信登录页或其他非账号密码登录页，必须在输入账号前生成单次 act：如果当前不是账号密码登录页，点击账号密码登录入口或切换到账号密码登录方式；如果当前已经显示账号和密码输入框，则保持当前状态。
-32. 登录账号输入框 prompt 必须根据已选择的登录方式精确定位：账号密码登录页中写“账号密码登录页中的账号或邮箱输入框”；手机号登录页中写“手机号登录页中的手机号输入框”。不要写“手机号、账号或邮箱输入框”这种会匹配多个字段的泛化描述。
-33. 登录协议勾选 prompt 必须说明只点击复选框本身，不点击用户协议、隐私政策等文本链接。
-34. 登录成功后的 waitFor 默认只写正向成功信号：等待首页或主界面稳定显示，出现设备列表、添加设备入口、底部导航、用户头像或我的页面入口等首页核心元素之一。不要默认追加长串失败排除条件；只有用户明确要求校验失败原因时，才额外生成错误提示读取或失败断言。
-35. 协议确认弹窗和“再次提交登录”不是登录脚本的默认步骤。只有原始需求明确提到点击登录后会出现服务协议/隐私政策/声明与条款确认弹窗，或上下文明确该 App 存在这个二次确认，才生成这两个条件式 act 步骤。`;
+10. 处理任何弹窗、广告、活动、播放器浮层、权限、升级提示前，必须先根据原始需求判断它是“被测目标”还是“干扰遮挡”。如果原始需求正在测试广告、播放器、弹窗、活动页、升级提示、引导页等内容，不要把这些元素当作干扰关闭；应生成 waitFor/query/boolean/tap/act 来等待、读取、断言或操作它们。只有与当前测试目标无关且遮挡后续操作的内容，才生成单独 act 关闭、跳过或允许。
+11. 所有场景都要把输入、点击、等待结果拆成独立步骤。输入使用 input，明确点击使用 tap，条件式处理使用 act，页面稳定使用 waitFor，读取数据使用 query/string/number，真假判断使用 boolean。
+12. 所有定位 prompt 都要具体到页面、区域、附近文本或业务含义，例如“搜索页顶部搜索框”“设备列表中的第一个在线设备”“详情页右上角设置按钮”。不要写“输入框”“按钮”“列表项”等泛化描述。
+13. 所有 input 的 value 必须完全来自原始需求；不得改写、脱敏、复用历史值或编造示例值。aiInput 步骤中 prompt 只表示输入框定位描述，value 表示要输入的内容。
+14. 结果验证默认用 1 条 waitFor 写正向、可观察的成功信号，例如目标页面标题、列表项、详情页核心元素、提交成功页、设备状态变化。不要默认追加长串失败排除条件；只有用户明确要求校验失败原因时，才额外生成错误提示读取或失败断言。
+15. 每个 boolean 步骤只能问一个真假问题；默认不要为了确认当前页面状态而生成 boolean，优先使用 waitFor 作为稳定状态验证。不要生成“waitFor + boolean”重复判断同一结果。
+16. 条件式 no-op 动作会增加模型调用，只有确实存在分支时才生成。如果一个动作步骤的 prompt 包含“如果存在/若出现/如果当前不是/如果未勾选/如果已经/否则跳过/保持当前状态”，不能使用 tap；应使用单次 act，或者先用 boolean 判断后再生成确定目标的 tap，但不要两者都生成。
+17. “处理弹窗/关闭弹窗/允许权限/同意协议”必须使用 act 或 tap，因为 boolean/query 只会判断或读取，不会点击按钮。
+18. 生成步骤时必须参考后续提供的 Midscene 文档内容，尤其是 JavaScript 优化建议、aiAct/aiTap/aiInput/aiWaitFor/aiQuery/aiBoolean/aiString/aiNumber 的职责边界和用法。
+19. 不要生成 Midscene 文档中不存在的 API 名称。当前只输出结构化 JSON steps，由代码生成器映射为对应的 Midscene API。
+20. 优先套用后续 Midscene 脚本生成参考中的拆分策略、步骤标题规范、通用场景模板、登录场景模板、弹窗处理模板和失败验证规则。
+21. Midscene 1.10.4 支持 startObserving/UIObserver。只有原始需求明确需要验证动作过程中一闪而过的 Toast、短暂错误提示、Banner、加载状态或自动消失控件时，才给触发该现象的 act/tap/input 步骤填写 observePrompt；如果不需要验证瞬时现象，必须省略该字段。
+22. observePrompt 必须描述一个肯定、可观察的历史事件，例如“点击保存后，执行过程中出现过保存成功提示”。不要用它判断最终页面是否稳定、当前是否仍有弹窗、是否进入结果页等持续状态，这些情况默认只用 aiWaitFor。
+23. observePrompt 应挂在直接触发现象的动作步骤上，不要挂在启动 App、循环处理弹窗或等待步骤上。即使观察到了成功 Toast，只要用户把“进入结果页/列表更新/状态变化”作为成功标准，仍必须生成最终页面的 waitFor；不要再默认补结果 boolean。
+24. 登录场景默认控制在 8 到 10 个可执行步骤：进入/确认 App、处理启动弹窗、等待登录页、必要时进入账号密码登录、输入账号、输入密码、必要时勾选协议、提交登录、处理登录后遮挡弹窗、等待首页。最终默认用 waitFor 作为成功判定；只有用户明确要求读取布尔结果、错误原因或断言日志时，才额外生成 boolean/string/query。
+25. 登录场景必须先从原始需求中抽取账号、密码、验证码等输入值；所有后续步骤必须复用完全相同的字面量，禁止把邮箱改成手机号、把手机号改成邮箱、使用历史账号、示例账号或自行编造账号。
+26. 登录表单必须拆分：账号输入是独立 input，密码输入是独立 input，登录按钮是独立 tap。登录协议勾选框只有在页面/需求明确需要时才生成独立处理步骤。不要用一条 act 同时输入账号、输入密码、勾选协议和点击登录。
+27. 登录按钮步骤必须使用 tap，prompt 只描述点击当前页面的登录按钮，例如“点击登录页中的登录按钮，提交当前已填写的表单；不要修改账号、密码或其他输入框”。不要在登录按钮 prompt 中重新写账号或密码，也不要追加“如果软键盘遮挡”等条件式子句。
+28. 简单且目标确定可见的点击优先使用 tap。登录按钮适合 tap；只有明确当前不在账号密码登录页时，账号密码登录入口才适合 tap；只有明确协议未勾选时，登录协议勾选框才适合 tap。
+29. 如果步骤语义是“如果当前不是账号密码登录页则点击入口，否则保持当前状态”，必须使用单次 act，不要用 tap。
+30. 如果步骤语义是“如果协议未勾选则勾选，已勾选或没有复选框则保持当前状态”，必须使用单次 act，避免 tap 反选已勾选的协议。
+31. 登录协议勾选框、登录按钮和登录后协议确认弹窗不能设置 repeat；每个步骤最多点击一次，后续用 waitFor 判断是否成功，避免再补重复 boolean。
+32. 如果等待登录页后还可能停留在欢迎页、手机号登录页、微信登录页或其他非账号密码登录页，必须在输入账号前生成单次 act：如果当前不是账号密码登录页，点击账号密码登录入口或切换到账号密码登录方式；如果当前已经显示账号和密码输入框，则保持当前状态。
+33. 登录账号输入框 prompt 必须根据已选择的登录方式精确定位：账号密码登录页中写“账号密码登录页中的账号或邮箱输入框”；手机号登录页中写“手机号登录页中的手机号输入框”。不要写“手机号、账号或邮箱输入框”这种会匹配多个字段的泛化描述。
+34. 登录协议勾选 prompt 必须说明只点击复选框本身，不点击用户协议、隐私政策等文本链接。
+35. 登录按钮提交后必须生成 1 条单次 act 处理登录后遮挡弹窗：若出现版本升级、广告、活动、评分、通知引导、登录后协议或权限弹窗，点击关闭、跳过、稍后再说、取消、同意或允许；如果没有弹窗则保持当前状态。不要点击首页业务内容、添加设备、底部导航或退出登录。若是强制升级且没有关闭/取消/稍后按钮，不要点击立即更新，保持弹窗让最终 waitFor 失败。
+36. 登录成功后的 waitFor 默认只写正向成功信号并带无遮挡要求：等待首页或主界面稳定显示，出现设备列表、添加设备入口、底部导航、用户头像或我的页面入口等首页核心元素之一，并且没有版本升级、广告、活动、评分或通知引导弹窗遮挡首页。不要默认追加长串失败排除条件；只有用户明确要求校验失败原因时，才额外生成错误提示读取或失败断言。
+37. 协议确认弹窗和“再次提交登录”不是登录脚本的默认步骤。只有原始需求明确提到点击登录后会出现服务协议/隐私政策/声明与条款确认弹窗，或上下文明确该 App 存在这个二次确认，才生成这两个条件式 act 步骤。`;
 
 const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const midsceneDocsDir = path.join(projectRoot, 'docs', 'midscene');
@@ -228,7 +230,7 @@ function normalizeSteps(steps: Array<Record<string, unknown>>) {
   });
 }
 
-export async function generatePlan(input: { prompt: string }) {
+export async function generatePlan(input: { prompt: string; signal?: AbortSignal }) {
   const startedAt = Date.now();
   const config = loadConfig();
 
@@ -241,24 +243,27 @@ export async function generatePlan(input: { prompt: string }) {
     baseURL: config.scriptOptimizer.model.baseUrl,
   });
 
-  const completion = await client.chat.completions.create({
-    model: config.scriptOptimizer.model.name,
-    temperature: 0.2,
-    messages: [
-      { role: 'system', content: systemPrompt },
-      { role: 'system', content: buildMidsceneDocsContext() },
-      {
-        role: 'user',
-        content: JSON.stringify(
-          {
-            prompt: input.prompt,
-          },
-          null,
-          2,
-        ),
-      },
-    ],
-  });
+  const completion = await client.chat.completions.create(
+    {
+      model: config.scriptOptimizer.model.name,
+      temperature: 0.2,
+      messages: [
+        { role: 'system', content: systemPrompt },
+        { role: 'system', content: buildMidsceneDocsContext() },
+        {
+          role: 'user',
+          content: JSON.stringify(
+            {
+              prompt: input.prompt,
+            },
+            null,
+            2,
+          ),
+        },
+      ],
+    },
+    { signal: input.signal },
+  );
 
   const content = completion.choices[0]?.message?.content;
   if (!content) {

package/src/App.vue

@@ -20,15 +20,14 @@ import tasksIcon from './assets/device-actions/tasks.svg';
 import volumeDownIcon from './assets/device-actions/volume-down.svg';
 import volumeUpIcon from './assets/device-actions/volume-up.svg';
 import { promptDocument } from './config/prompt-example';
+import { defaultPromptPresetId, promptPresets } from './config/prompt-presets';
 import {
   buildScript,
   type ScriptStep,
 } from './script-generator';
 import {
   codexMidsceneModel,
-  midsceneModelPresets,
   type MidsceneModelProvider,
-  type MidsceneModelPresetKey,
 } from './config/midscene-model-presets';
 import * as api from './api';
 import AutomationPage from './pages/AutomationPage.vue';
@@ -42,7 +41,6 @@ import type {
   ExecutionStep,
   GeneratorMode,
   MenuKey,
-  ModelUsageRecord,
   RunScriptStreamEvent,
   SavedScript,
 } from './types';
@@ -52,7 +50,9 @@ const menuKeys: MenuKey[] = ['generator', 'automation', 'config', 'appium'];
 const storedMenu = window.localStorage.getItem(ACTIVE_MENU_STORAGE_KEY) as MenuKey | null;
 const activeMenu = ref<MenuKey>(storedMenu && menuKeys.includes(storedMenu) ? storedMenu : 'generator');
 const activeGeneratorMode = ref<GeneratorMode>('ai');
-const sourcePrompt = ref('');
+const defaultSourcePrompt = promptPresets.find((item) => item.id === defaultPromptPresetId)?.content || '';
+const sourcePrompt = ref(defaultSourcePrompt);
+const promptPresetId = shallowRef(defaultPromptPresetId);
 const steps = ref<ScriptStep[]>([]);
 const errorMessage = ref('');
 const isGenerating = ref(false);
@@ -73,6 +73,7 @@ const playgroundPreviewError = ref('');
 const playgroundDeviceId = ref('');
 const playgroundFrameUrl = ref('');
 const playgroundFrameSignature = ref('');
+const restartingPlaygroundPreview = shallowRef(false);
 const devicePreviewUrl = ref('');
 const devicePreviewMode = ref<'stream' | 'screenshot' | ''>('');
 const backendOffline = shallowRef(false);
@@ -95,7 +96,6 @@ const runStartedAt = shallowRef<number | null>(null);
 const runningElapsedNow = shallowRef(0);
 const savedScripts = ref<SavedScript[]>([]);
 const appPresets = ref<AppPreset[]>([]);
-const modelUsageRecords = ref<ModelUsageRecord[]>([]);
 const modelTestStatus = reactive({
   midscene: '',
   scriptOptimizer: '',
@@ -105,6 +105,10 @@ const actionDialog = reactive({
   title: '',
   loading: false,
   error: '',
+  canRunInBackground: false,
+  canCancel: false,
+  cancelText: '终止',
+  canceling: false,
 });
 const codeDialog = reactive({
   visible: false,
@@ -116,8 +120,9 @@ const codeDialog = reactive({
   saving: false,
 });
 let playgroundPollTimer: number | null = null;
-let appiumPreviewTimer: number | null = null;
+let devicePreviewTimer: number | null = null;
 let executionProgressTimer: number | null = null;
+let aiGenerateAbortController: AbortController | null = null;
 let scriptRunAbortController: AbortController | null = null;
 
 const isBackendFetchError = (error: unknown) => {
@@ -265,17 +270,36 @@ async function migrateLegacySavedScripts() {
   localStorage.removeItem('midscene-saved-scripts');
 }
 
-const openActionDialog = (title: string) => {
+type ActionDialogOptions = {
+  canRunInBackground?: boolean;
+  canCancel?: boolean;
+  cancelText?: string;
+};
+
+const openActionDialog = (title: string, options: ActionDialogOptions = {}) => {
   actionDialog.visible = true;
   actionDialog.title = title;
   actionDialog.loading = true;
   actionDialog.error = '';
+  actionDialog.canRunInBackground = !!options.canRunInBackground;
+  actionDialog.canCancel = !!options.canCancel;
+  actionDialog.cancelText = options.cancelText || '终止';
+  actionDialog.canceling = false;
 };
 
 const closeActionDialog = () => {
   actionDialog.visible = false;
   actionDialog.loading = false;
   actionDialog.error = '';
+  actionDialog.canRunInBackground = false;
+  actionDialog.canCancel = false;
+  actionDialog.cancelText = '终止';
+  actionDialog.canceling = false;
+};
+
+const sendActionDialogToBackground = () => {
+  if (!actionDialog.loading || !actionDialog.canRunInBackground) return;
+  actionDialog.visible = false;
 };
 
 const openCodeDialog = (script: SavedScript) => {
@@ -328,6 +352,7 @@ const saveCodeDialog = async () => {
 const failActionDialog = (message: string) => {
   actionDialog.loading = false;
   actionDialog.error = message;
+  actionDialog.canceling = false;
 };
 
 const addStep = () => {
@@ -403,7 +428,8 @@ const clearGeneratorPage = () => {
   form.testName = '';
   form.promptTitle = '';
   form.appPresetId = '';
-  sourcePrompt.value = '';
+  promptPresetId.value = defaultPromptPresetId;
+  sourcePrompt.value = defaultSourcePrompt;
   steps.value = [];
   showGeneratedCode.value = false;
   importedTestCaseFileName.value = '';
@@ -534,6 +560,15 @@ const saveCurrentScript = async () => {
   }
 };
 
+const isAbortError = (error: unknown) =>
+  error instanceof DOMException && error.name === 'AbortError';
+
+const stopGenerateWithModel = () => {
+  if (!aiGenerateAbortController || aiGenerateAbortController.signal.aborted) return;
+  actionDialog.canceling = true;
+  aiGenerateAbortController.abort();
+};
+
 const removeSavedScript = async (id: string) => {
   const script = savedScripts.value.find((item) => item.id === id);
   try {
@@ -559,6 +594,11 @@ const removeSavedScript = async (id: string) => {
 };
 
 const generateWithModel = async () => {
+  if (isGenerating.value) {
+    actionDialog.visible = true;
+    return;
+  }
+
   if (!validateCurrentGeneratorInputs()) return;
 
   if (activeGeneratorMode.value === 'manual') {
@@ -570,11 +610,18 @@ const generateWithModel = async () => {
 
   isGenerating.value = true;
   errorMessage.value = '';
-  openActionDialog('AI生成');
+  const controller = new AbortController();
+  aiGenerateAbortController = controller;
+  openActionDialog('AI生成', {
+    canRunInBackground: true,
+    canCancel: true,
+    cancelText: '终止',
+  });
 
   try {
     const payload = await api.generatePlan({
       prompt: effectiveSourcePrompt.value,
+      signal: controller.signal,
     });
 
     form.promptTitle = payload.promptTitle || form.promptTitle;
@@ -583,11 +630,19 @@ const generateWithModel = async () => {
     showGeneratedCode.value = true;
     closeActionDialog();
   } catch (error) {
+    if (isAbortError(error)) {
+      closeActionDialog();
+      return;
+    }
+
     const message = error instanceof Error ? error.message : 'AI 生成失败';
     errorMessage.value = message;
     failActionDialog(message);
   } finally {
-    await loadModelUsageRecords().catch(() => undefined);
+    if (aiGenerateAbortController === controller) {
+      aiGenerateAbortController = null;
+    }
+    actionDialog.canceling = false;
     isGenerating.value = false;
   }
 };
@@ -627,18 +682,6 @@ const updateMidsceneModelProvider = (provider: MidsceneModelProvider) => {
   modelTestStatus.midscene = '';
 };
 
-const applyMidsceneModelPreset = (key: MidsceneModelPresetKey) => {
-  const preset = midsceneModelPresets.find((item) => item.key === key);
-  if (!preset) return;
-
-  configForm.midscene.model.provider = 'custom';
-  configForm.midscene.model.baseUrl = preset.baseUrl;
-  configForm.midscene.model.name = preset.modelName;
-  configForm.midscene.model.family = preset.modelFamily;
-  rememberCustomMidsceneModel();
-  modelTestStatus.midscene = '';
-};
-
 const getMidsceneModelConfigError = () => {
   const model = configForm.midscene.model;
   const missing = [];
@@ -733,11 +776,6 @@ const removeAppPreset = async (id: string) => {
   }
 };
 
-const loadModelUsageRecords = async () => {
-  const payload = await api.getModelUsageRecords(50);
-  modelUsageRecords.value = payload.records || [];
-};
-
 const testModel = async (key: 'midscene' | 'scriptOptimizer') => {
   testingModelKey.value = key;
   errorMessage.value = '';
@@ -753,7 +791,6 @@ const testModel = async (key: 'midscene' | 'scriptOptimizer') => {
   } catch (error) {
     modelTestStatus[key] = error instanceof Error ? error.message : '测试失败';
   } finally {
-    await loadModelUsageRecords().catch(() => undefined);
     testingModelKey.value = '';
   }
 };
@@ -789,11 +826,13 @@ const loadDeviceInterface = async () => {
 const loadAdbPreview = () => {
   if (backendOffline.value) return;
   if (!playgroundDeviceId.value) {
+    playgroundFrameUrl.value = '';
     devicePreviewUrl.value = '';
     devicePreviewMode.value = '';
     return;
   }
 
+  playgroundFrameUrl.value = '';
   devicePreviewUrl.value = `${api.APP_BASE}/api/android-preview?deviceId=${encodeURIComponent(playgroundDeviceId.value)}&t=${Date.now()}`;
   devicePreviewMode.value = 'screenshot';
 };
@@ -804,25 +843,37 @@ const refreshAdbPreviewAfterInput = () => {
   }
 };
 
-const refreshDevicePreview = () => {
-  if (devicePreviewMode.value === 'stream' && playgroundFrameUrl.value) {
-    playgroundFrameUrl.value = `${api.APP_BASE}/__android_playground__/?ts=${Date.now()}`;
+const refreshDevicePreview = async () => {
+  if (devicePreviewMode.value === 'stream' && playgroundDeviceId.value) {
+    if (restartingPlaygroundPreview.value) return;
+    restartingPlaygroundPreview.value = true;
+    playgroundFrameUrl.value = '';
+    playgroundFrameSignature.value = '';
+    try {
+      await api.restartPlaygroundPreview({ deviceId: playgroundDeviceId.value });
+      restartingPlaygroundPreview.value = false;
+      await loadPlaygroundStatus();
+    } catch (error) {
+      playgroundPreviewError.value = error instanceof Error ? error.message : '重启实时预览失败';
+    } finally {
+      restartingPlaygroundPreview.value = false;
+    }
     return;
   }
   loadAdbPreview();
 };
 
-const startAppiumPreviewTimer = () => {
+const startDevicePreviewTimer = () => {
   if (backendOffline.value) return;
-  if (appiumPreviewTimer) return;
+  if (devicePreviewTimer) return;
   loadAdbPreview();
-  appiumPreviewTimer = window.setInterval(loadAdbPreview, 1000);
+  devicePreviewTimer = window.setInterval(loadAdbPreview, 1000);
 };
 
-const stopAppiumPreviewTimer = () => {
-  if (!appiumPreviewTimer) return;
-  window.clearInterval(appiumPreviewTimer);
-  appiumPreviewTimer = null;
+const stopDevicePreviewTimer = () => {
+  if (!devicePreviewTimer) return;
+  window.clearInterval(devicePreviewTimer);
+  devicePreviewTimer = null;
 };
 
 const markBackendOffline = () => {
@@ -836,13 +887,13 @@ const markBackendOffline = () => {
   playgroundPreviewError.value = '本地服务已断开，请重新运行启动命令后刷新页面。';
   errorMessage.value = playgroundPreviewError.value;
   stopPlaygroundPollTimer();
-  stopAppiumPreviewTimer();
+  stopDevicePreviewTimer();
 };
 
 const loadPlaygroundStatus = async () => {
-  if (backendOffline.value) return;
+  if (backendOffline.value || restartingPlaygroundPreview.value) return;
   if (!playgroundDeviceId.value) {
-    stopAppiumPreviewTimer();
+    stopDevicePreviewTimer();
     playgroundAvailable.value = false;
     playgroundPreviewError.value = '';
     playgroundFrameUrl.value = '';
@@ -854,7 +905,9 @@ const loadPlaygroundStatus = async () => {
 
   try {
     await loadDeviceInterface();
+    if (restartingPlaygroundPreview.value) return;
     const payload = await api.getPlaygroundStatus();
+    if (restartingPlaygroundPreview.value) return;
 
     const matchedDevice = !payload.deviceId || payload.deviceId === playgroundDeviceId.value;
     const hasRealtimeStream = payload.previewKind === 'scrcpy' && payload.sessionConnected === true;
@@ -867,7 +920,7 @@ const loadPlaygroundStatus = async () => {
 
     const nextSignature = `${payload.url || ''}::${playgroundDeviceId.value}`;
     if (hasPlayground) {
-      stopAppiumPreviewTimer();
+      stopDevicePreviewTimer();
       if (nextSignature !== playgroundFrameSignature.value || !playgroundFrameUrl.value) {
         playgroundFrameSignature.value = nextSignature;
         playgroundFrameUrl.value = `${api.APP_BASE}/__android_playground__/?ts=${Date.now()}`;
@@ -881,7 +934,7 @@ const loadPlaygroundStatus = async () => {
       playgroundFrameUrl.value = '';
       playgroundFrameSignature.value = '';
       loadAdbPreview();
-      if (activeMenu.value === 'appium') startAppiumPreviewTimer();
+      if (activeMenu.value === 'appium' || activeMenu.value === 'automation') startDevicePreviewTimer();
     }
   } catch (error) {
     if (isBackendFetchError(error)) {
@@ -892,6 +945,7 @@ const loadPlaygroundStatus = async () => {
     playgroundFrameUrl.value = '';
     playgroundFrameSignature.value = '';
     loadAdbPreview();
+    if (activeMenu.value === 'appium' || activeMenu.value === 'automation') startDevicePreviewTimer();
     playgroundPreviewError.value = error instanceof Error ? error.message : '设备预览不可用';
   }
 };
@@ -1183,7 +1237,6 @@ const runSelectedScript = async () => {
     lastRunStatus.value = isAbortError ? '已停止' : '执行失败';
   } finally {
     stopExecutionProgressTimer();
-    await loadModelUsageRecords().catch(() => undefined);
     isRunningScript.value = false;
     isStoppingScript.value = false;
     runStartedAt.value = null;
@@ -1233,10 +1286,10 @@ watch(
 watch(activeMenu, (menu) => {
   window.localStorage.setItem(ACTIVE_MENU_STORAGE_KEY, menu);
   if (menu === 'appium' || menu === 'automation') {
-    stopAppiumPreviewTimer();
+    stopDevicePreviewTimer();
     void loadPlaygroundStatus();
   } else {
-    stopAppiumPreviewTimer();
+    stopDevicePreviewTimer();
   }
 }, { immediate: true });
 
@@ -1247,7 +1300,7 @@ onMounted(async () => {
     console.warn('脚本缓存迁移失败', error);
   }
 
-  await Promise.allSettled([loadConfig(), loadAppPresets(), loadAndroidDevices(), loadSavedScripts(), loadModelUsageRecords()]);
+  await Promise.allSettled([loadConfig(), loadAppPresets(), loadAndroidDevices(), loadSavedScripts()]);
   await loadPlaygroundStatus();
   playgroundPollTimer = window.setInterval(() => {
     if (backendOffline.value) {
@@ -1261,8 +1314,9 @@ onMounted(async () => {
 
 onUnmounted(() => {
   stopPlaygroundPollTimer();
-  stopAppiumPreviewTimer();
+  stopDevicePreviewTimer();
   stopExecutionProgressTimer();
+  aiGenerateAbortController?.abort();
   scriptRunAbortController?.abort();
 });
 </script>
@@ -1286,7 +1340,31 @@ onUnmounted(() => {
         {{ actionDialog.error }}
       </div>
       <template #footer>
-        <el-button v-if="!actionDialog.loading" type="primary" @click="closeActionDialog">关闭</el-button>
+        <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"
+            :icon="VideoPause"
+            :loading="actionDialog.canceling"
+            @click="stopGenerateWithModel"
+          >
+            {{ actionDialog.cancelText === '终止' ? '终止生成' : actionDialog.cancelText }}
+          </el-button>
+          <el-button
+            v-if="actionDialog.canRunInBackground"
+            class="action-dialog__footer-button action-dialog__footer-button--primary"
+            @click="sendActionDialogToBackground"
+          >
+            后台处理
+          </el-button>
+        </div>
+        <el-button
+          v-else
+          class="action-dialog__footer-button action-dialog__footer-button--primary"
+          @click="closeActionDialog"
+        >
+          关闭
+        </el-button>
       </template>
     </el-dialog>
 
@@ -1355,11 +1433,11 @@ onUnmounted(() => {
           <el-button
             v-if="activeMenu === 'generator'"
             type="primary"
-            :icon="Check"
-            :loading="isGenerating"
+            :icon="isGenerating ? Loading : Check"
+            :class="{ 'layout-header__button--loading': isGenerating }"
             @click="generateWithModel"
           >
-            AI 生成
+            {{ isGenerating ? 'AI 生成中' : 'AI 生成' }}
           </el-button>
           <el-button
             v-if="activeMenu === 'generator'"
@@ -1404,15 +1482,18 @@ onUnmounted(() => {
           v-show="activeMenu === 'generator'"
           v-model:mode="activeGeneratorMode"
           v-model:source-prompt="sourcePrompt"
+          v-model:prompt-preset-id="promptPresetId"
           v-model:generated-code-draft="generatedCodeDraft"
           :form="form"
           :app-presets="appPresets"
+          :prompt-presets="promptPresets"
           :prompt-example="promptDocument.trim()"
           :steps="steps"
           :generated-code="generatedCode"
           :show-generated-code="showGeneratedCode"
           :generated-code-editing="generatedCodeEditing"
           :generated-code-edit-saving="generatedCodeEditSaving"
+          :is-generating="isGenerating"
           :importing-test-case="importingTestCase"
           :imported-test-case-file-name="importedTestCaseFileName"
           @add-step="addStep"
@@ -1434,14 +1515,12 @@ onUnmounted(() => {
           :is-saving-model-config="isSavingModelConfig"
           :is-saving-app-preset="isSavingAppPreset"
           :model-test-status="modelTestStatus"
-          :model-usage-records="modelUsageRecords"
           @test-model="testModel"
           @save-model-config="saveModelConfig"
           @save-app-preset="saveAppPreset"
           @edit-app-preset="editAppPreset"
           @delete-app-preset="removeAppPreset"
           @update-midscene-model-provider="updateMidsceneModelProvider"
-          @apply-midscene-model-preset="applyMidsceneModelPreset"
         />
 
         <AutomationPage