android-midscene-automation 0.1.24 → 0.1.26

package/src/config/prompt-presets.ts

@@ -0,0 +1,172 @@
+import { promptDocument } from './prompt-example';
+
+export type PromptPreset = {
+  id: string;
+  name: string;
+  description: string;
+  content: string;
+};
+
+export const defaultPromptPresetId = 'general';
+
+export const promptPresets: PromptPreset[] = [
+  {
+    id: defaultPromptPresetId,
+    name: '通用提示词',
+    description: '当前默认提示词，适合启动、登录和常规流程',
+    content: promptDocument.trim(),
+  },
+  {
+    id: 'ads',
+    name: '广告测试',
+    description: '开屏、插屏、Banner、激励视频等广告链路',
+    content: `# 广告相关测试
+
+目标：测试 App 中的广告展示、跳过、关闭、点击跳转或奖励发放链路，包括开屏广告、插屏广告、Banner 广告、信息流广告和激励视频广告。
+
+生成脚本时请遵循：
+1. 广告素材、广告标识、倒计时、跳过按钮、关闭按钮、领取奖励按钮、奖励到账提示都是本用例的被测目标，不要把它们当作干扰弹窗自动关闭。
+2. 只有权限申请、升级提示、登录态失效、与广告无关的活动弹窗遮挡广告入口或断言时，才生成单独步骤处理。
+3. 每个 Midscene 指令只做一件事：进入页面、触发广告、等待广告出现、读取广告信息、点击跳过/关闭/领取奖励、等待结果分别拆成独立步骤。
+4. 对可见且确定的按钮使用 aiTap；需要等待广告加载、倒计时结束或奖励提示时使用 aiWaitFor；需要读取广告标题、跳转文案、倒计时数字或奖励数量时使用 aiQuery、aiString 或 aiNumber。
+5. 如果测试开屏广告，先启动 App 并等待开屏广告或首页稳定出现；如果没有广告且需求要求必须展示广告，最终步骤应失败，不要自动改为首页成功。
+6. 如果测试激励广告，播放期间不要跳过视频；等待视频播放完成后点击领取、关闭或确认奖励，并等待奖励到账、余额变化或业务页面返回。
+7. 最终成功判定必须是正向、可观察的界面结果，例如“出现广告标识和素材”“广告关闭后回到原页面”“奖励到账提示出现”“点击广告后进入落地页”。`,
+  },
+  {
+    id: 'form',
+    name: '表单填写',
+    description: '注册、登录、资料、地址、反馈等表单提交',
+    content: `# 表单填写测试
+
+目标：测试 App 中表单页面的输入、选择、提交和结果验证流程。
+
+生成脚本时请遵循：
+1. 先进入目标 App 和目标表单页面，等待页面稳定显示字段、标题或提交按钮。
+2. 输入、选择、勾选、上传、提交必须拆成独立步骤，不要用一条 aiAct 同时填写所有字段并提交。
+3. aiInput 的 value 必须完全来自用户原始需求；不要改写、脱敏、补全或编造示例值。
+4. 每个输入框定位要写清楚页面、字段名、附近文本或业务含义，例如“收货地址页中的联系人姓名输入框”。
+5. 下拉选择、日期选择、单选、多选、开关等稳定可见控件优先用 aiTap；如果需要“未勾选才勾选”或“若有默认值则保持”，用单次 aiAct。
+6. 提交后等待明确结果：成功提示、详情页、列表新增项、状态变更或错误提示；不要只判断按钮被点击。
+7. 如果本用例测试校验失败，保留错误状态并读取或等待错误提示，不要自动修正输入继续提交。`,
+  },
+  {
+    id: 'chat',
+    name: '聊天对话',
+    description: 'IM、客服、群聊、发送文本/图片/语音',
+    content: `# 聊天对话测试
+
+目标：测试 App 的聊天、客服或消息会话流程。
+
+生成脚本时请遵循：
+1. 先进入目标会话页面，等待会话标题、消息列表、输入框或发送按钮稳定显示。
+2. 发送文本时使用独立 aiInput 定位消息输入框，再用 aiTap 点击发送按钮；不要把输入和发送合成一条泛化 aiAct。
+3. 发送图片、表情、语音、文件等内容时，先打开对应入口，再选择素材或执行录制，最后等待消息气泡出现。
+4. 聊天页中的表情面板、更多面板、语音录制浮层、图片预览、客服欢迎语可能是被测目标，不要当作干扰弹窗关闭。
+5. 如果需要验证回复，使用 aiWaitFor 等待对方消息、客服回复、发送成功状态或已读状态；需要提取回复内容时使用 aiQuery 或 aiString。
+6. 失败场景要保留失败提示，例如发送失败、网络异常、撤回提示，不要自动重试到成功，除非原始需求明确要求重试。
+7. 最终成功判定必须落在可见消息、状态标签、会话列表更新或未读数变化上。`,
+  },
+  {
+    id: 'player',
+    name: '播放器测试',
+    description: '播放、暂停、进度、横竖屏、清晰度、弹幕',
+    content: `# 播放器相关测试
+
+目标：测试 App 中视频、音频或直播播放器的播放控制和状态验证。
+
+生成脚本时请遵循：
+1. 播放器控件、播放/暂停按钮、进度条、全屏按钮、清晰度菜单、倍速菜单、弹幕开关、试看提示和广告贴片可能是被测目标，不要默认关闭。
+2. 进入播放页后先等待播放器区域、标题或首帧稳定显示，再执行播放、暂停、拖动进度、切换清晰度或全屏等动作。
+3. 明确按钮点击使用 aiTap；需要等待缓冲完成、播放开始、暂停状态、横屏完成或进度变化时使用 aiWaitFor。
+4. 如果测试贴片广告或会员试看提示，保留广告或提示并验证展示、倒计时、跳过或购买入口；不要自动跳过。
+5. 如果测试普通播放链路，只有与播放目标无关且遮挡操作的权限、升级、活动弹窗才可以单独处理。
+6. 读取播放时长、当前进度、清晰度、倍速、标题或直播状态时使用 aiQuery、aiString 或 aiNumber，并描述它们在播放器中的位置。
+7. 最终成功判定应是可观察状态，例如视频正在播放、按钮变为暂停、进度已变化、进入全屏、清晰度已切换或出现播放完成提示。`,
+  },
+  {
+    id: 'search-list',
+    name: '搜索列表',
+    description: '搜索、筛选、排序、列表结果和详情页',
+    content: `# 搜索和列表测试
+
+目标：测试 App 中搜索、筛选、排序、列表加载和详情页进入流程。
+
+生成脚本时请遵循：
+1. 先进入搜索页或列表页，等待搜索框、筛选入口、列表区域或空状态稳定显示。
+2. 输入搜索词使用 aiInput，提交搜索使用 aiTap 或键盘确认；筛选、排序、分类切换用独立步骤。
+3. 搜索词、筛选条件、排序方式必须来自原始需求，不要自行替换成示例值。
+4. 列表结果需要等待明确的可见信号，例如结果卡片、标题、价格、状态、空结果文案或加载完成提示。
+5. 需要读取多个结果时使用 aiQuery，并指定返回字段；需要点击结果时明确“第一个/包含某文本/某状态”的目标。
+6. 滚动加载只在需求明确需要更多结果时生成，且每次滚动后等待新内容出现。
+7. 最终成功判定应是结果存在、空状态正确、筛选结果符合条件、排序生效或详情页核心信息可见。`,
+  },
+  {
+    id: 'payment-order',
+    name: '订单支付',
+    description: '下单、确认订单、支付方式、订单状态',
+    content: `# 订单和支付测试
+
+目标：测试商品/服务选择、提交订单、支付方式选择和订单结果验证。
+
+生成脚本时请遵循：
+1. 进入商品、购物车、服务页或订单页后，等待核心信息稳定显示。
+2. 选择规格、数量、地址、优惠券、支付方式、提交订单、确认支付分别拆成独立步骤。
+3. 对真实支付、扣费、转账、提现、购买等高风险动作，只有原始需求明确要求执行时才生成点击确认支付；否则停在支付确认页并验证页面状态。
+4. 金额、商品名、地址、优惠信息、支付方式等关键数据优先使用 aiQuery 或 aiString 读取后再进行可见结果验证。
+5. 支付密码、验证码、短信码等敏感输入必须完全来自原始需求，不能编造。
+6. 如果测试失败场景，等待并读取失败提示、库存不足、余额不足、风控提示或支付取消状态，不要自动换支付方式继续。
+7. 最终成功判定应是订单提交成功、支付成功、订单状态变化、订单号出现或支付确认页信息正确。`,
+  },
+  {
+    id: 'permission-popup',
+    name: '权限弹窗',
+    description: '系统权限、协议、升级、活动、引导页处理',
+    content: `# 权限和弹窗测试
+
+目标：测试 App 中权限申请、协议确认、升级提示、活动弹窗、引导页或业务弹窗的展示和处理。
+
+生成脚本时请遵循：
+1. 先判断弹窗是被测目标还是干扰遮挡：如果需求正在测试该弹窗，不要关闭；如果弹窗只是遮挡后续操作，才生成处理步骤。
+2. 权限、协议、升级、活动、评分、通知引导等弹窗的按钮定位要写清楚，例如“权限弹窗中的允许按钮”“升级弹窗中的稍后再说按钮”。
+3. 如果测试权限允许链路，点击允许后等待业务页面继续加载；如果测试拒绝链路，点击拒绝后等待错误提示、降级入口或权限引导页。
+4. 如果测试强制升级，不能点击立即更新下载；等待并断言强制升级弹窗内容和按钮状态。
+5. 如果测试活动或营销弹窗，保留弹窗并读取标题、活动文案、按钮或关闭入口；不要默认把它当广告关闭。
+6. 条件式处理使用单次 aiAct，例如“如果出现无关弹窗则关闭，否则保持当前状态”；不要用 boolean 只判断不操作。
+7. 最终成功判定应是弹窗内容正确、弹窗被正确关闭、权限结果生效或后续页面无遮挡。`,
+  },
+  {
+    id: 'profile-settings',
+    name: '个人设置',
+    description: '个人资料、设置开关、账号安全、退出登录',
+    content: `# 个人资料和设置测试
+
+目标：测试 App 的个人中心、资料编辑、设置项、账号安全或退出登录流程。
+
+生成脚本时请遵循：
+1. 先进入个人中心或设置页面，等待页面标题、头像、昵称、设置列表或账号信息稳定显示。
+2. 点击入口、编辑字段、切换开关、保存、返回验证分别拆成独立步骤。
+3. 修改昵称、手机号、邮箱、签名等输入值必须来自原始需求，不要自行补全示例数据。
+4. 开关类控件如果要求“打开/关闭到某状态”，使用条件式 aiAct 避免反向切换；如果只是点击明确开关，使用 aiTap。
+5. 退出登录、注销账号、清除数据等高风险动作，只有原始需求明确要求时才执行；否则停在确认弹窗并验证。
+6. 保存后等待正向结果，例如保存成功提示、资料页显示新值、设置状态变化或回到登录页。
+7. 需要读取当前资料或设置状态时使用 aiQuery、aiString 或 aiBoolean，并要求返回可见文本或明确真假。`,
+  },
+  {
+    id: 'webview-h5',
+    name: 'H5/WebView',
+    description: '内嵌网页、混合页、活动页和外链跳转',
+    content: `# H5 和 WebView 测试
+
+目标：测试 App 内嵌 H5、WebView、活动页、帮助页或外链跳转流程。
+
+生成脚本时请遵循：
+1. 先进入包含 H5/WebView 的页面，等待页面标题、加载完成标识、主要按钮或内容区域稳定显示。
+2. WebView 内的页面加载、弹窗、登录态提示、活动浮层可能是被测目标，不要默认关闭；只有无关遮挡才处理。
+3. 点击、输入、筛选、提交、返回 App 原生页面分别拆成独立步骤。
+4. 如果页面内容异步加载，使用 aiWaitFor 等待可见内容，不要用固定等待替代明确状态。
+5. 如果需要读取网页内容、订单号、协议文本、活动规则或按钮状态，使用 aiQuery、aiString 或 aiBoolean，并描述屏幕上可见的位置。
+6. 如果测试外链跳转，等待目标页面标题、域名提示、浏览器选择页或返回入口；不要把跳转后的页面误判为失败。
+7. 最终成功判定应是 H5 内容正确、交互结果正确、跳转成功或返回原 App 页面成功。`,
+  },
+];

package/src/pages/AiGeneratorPage.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue';
-import { Delete, QuestionFilled } from '@element-plus/icons-vue';
+import { shallowRef, useTemplateRef } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Delete, Edit, QuestionFilled, Upload } from '@element-plus/icons-vue';
 import TestCaseFileUpload from '../components/generator/TestCaseFileUpload.vue';
 import type { AppPreset, GeneratorForm } from '../types';
+import type { PromptPreset } from '../config/prompt-presets';
 
-defineProps<{
+const props = defineProps<{
   form: GeneratorForm;
   appPresets: AppPreset[];
+  promptPresets: PromptPreset[];
   promptExample: string;
+  generating: boolean;
   importingTestCase: boolean;
   importedFileName: string;
 }>();
@@ -18,7 +22,51 @@ defineEmits<{
 }>();
 
 const sourcePrompt = defineModel<string>('sourcePrompt', { required: true });
+const promptPresetId = defineModel<string>('promptPresetId', { required: true });
 const promptExampleVisible = shallowRef(false);
+const promptEditorVisible = shallowRef(false);
+const promptEditorDraft = shallowRef('');
+const promptFileInput = useTemplateRef<HTMLInputElement>('promptFileInput');
+
+const applyPromptPreset = (id: string) => {
+  const preset = props.promptPresets.find((item) => item.id === id);
+  if (!preset) return;
+  sourcePrompt.value = preset.content;
+};
+
+const openPromptEditor = () => {
+  promptEditorDraft.value = sourcePrompt.value;
+  promptEditorVisible.value = true;
+};
+
+const savePromptEditor = () => {
+  sourcePrompt.value = promptEditorDraft.value.trim();
+  promptEditorVisible.value = false;
+};
+
+const openPromptFilePicker = () => {
+  promptFileInput.value?.click();
+};
+
+const handlePromptFileChange = async (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) return;
+
+  try {
+    const content = (await file.text()).trim();
+    if (!content) {
+      ElMessage.warning('上传的提示词为空');
+      return;
+    }
+    sourcePrompt.value = content;
+    ElMessage.success('提示词已上传');
+  } catch {
+    ElMessage.error('提示词文件读取失败');
+  } finally {
+    input.value = '';
+  }
+};
 </script>
 
 <template>
@@ -42,6 +90,44 @@ const promptExampleVisible = shallowRef(false);
             />
           </el-select>
         </el-form-item>
+        <el-form-item label="提示词模板">
+          <div class="prompt-template-row">
+            <el-select
+              v-model="promptPresetId"
+              placeholder="选择提示词模板"
+              popper-class="prompt-template-dropdown"
+              :disabled="generating"
+              @change="applyPromptPreset"
+            >
+              <el-option
+                v-for="preset in promptPresets"
+                :key="preset.id"
+                :label="preset.name"
+                :value="preset.id"
+              >
+                <div class="prompt-template-option">
+                  <span class="prompt-template-option__name">{{ preset.name }}</span>
+                  <span class="prompt-template-option__description">{{ preset.description }}</span>
+                </div>
+              </el-option>
+            </el-select>
+            <div class="prompt-template-actions">
+              <el-button size="small" :icon="Edit" :disabled="generating" @click="openPromptEditor">
+                编辑
+              </el-button>
+              <el-button size="small" :icon="Upload" :disabled="generating" @click="openPromptFilePicker">
+                上传
+              </el-button>
+            </div>
+            <input
+              ref="promptFileInput"
+              class="prompt-file-input"
+              type="file"
+              accept=".txt,.md,.markdown,.text"
+              @change="handlePromptFileChange"
+            />
+          </div>
+        </el-form-item>
       </el-form>
     </el-card>
 
@@ -51,11 +137,16 @@ const promptExampleVisible = shallowRef(false);
           <span>原始 Prompt</span>
           <div class="panel-header__actions prompt-card__actions">
             <TestCaseFileUpload
-              :uploading="importingTestCase"
+              :uploading="importingTestCase || generating"
               :file-name="importedFileName"
               @upload="$emit('importTestCase', $event)"
             />
-            <el-button size="small" :icon="Delete" :disabled="importingTestCase" @click="$emit('clearAll')">
+            <el-button
+              size="small"
+              :icon="Delete"
+              :disabled="importingTestCase || generating"
+              @click="$emit('clearAll')"
+            >
               清除
             </el-button>
             <el-button
@@ -72,6 +163,7 @@ const promptExampleVisible = shallowRef(false);
         class="source-prompt-input"
         type="textarea"
         :rows="14"
+        :disabled="generating"
         placeholder="请输入原始 Prompt，或点击右上角问号查看示例"
       />
     </el-card>
@@ -80,11 +172,102 @@ const promptExampleVisible = shallowRef(false);
   <el-dialog v-model="promptExampleVisible" title="原始 Prompt 示例" width="720px">
     <pre class="prompt-example"><code>{{ promptExample }}</code></pre>
   </el-dialog>
+
+  <el-dialog v-model="promptEditorVisible" title="编辑提示词" width="760px">
+    <el-input
+      v-model="promptEditorDraft"
+      class="prompt-editor-input"
+      type="textarea"
+      :rows="18"
+      :disabled="generating"
+      placeholder="请输入提示词"
+    />
+    <template #footer>
+      <el-button @click="promptEditorVisible = false">取消</el-button>
+      <el-button type="primary" :disabled="generating" @click="savePromptEditor">保存</el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <style scoped>
+.prompt-template-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.prompt-template-row .el-select {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.prompt-template-actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 8px;
+}
+
+.prompt-template-option {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  line-height: 1.35;
+}
+
+.prompt-template-option__name {
+  color: #1f2937;
+  font-weight: 600;
+}
+
+.prompt-template-option__description {
+  color: #8a97a8;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.prompt-file-input {
+  display: none;
+}
+
+:global(.prompt-template-dropdown .el-select-dropdown__list) {
+  padding: 6px;
+}
+
+:global(.prompt-template-dropdown .el-select-dropdown__item) {
+  height: auto;
+  min-height: 64px;
+  padding: 11px 12px;
+  border-radius: 6px;
+  line-height: 1.35;
+  white-space: normal;
+}
+
+:global(.prompt-template-dropdown .el-select-dropdown__item + .el-select-dropdown__item) {
+  margin-top: 4px;
+}
+
 .prompt-card__actions {
   align-items: center;
   min-width: 0;
 }
+
+.prompt-editor-input :deep(.el-textarea__inner) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  line-height: 1.6;
+}
+
+@media (max-width: 640px) {
+  .prompt-template-row {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .prompt-template-actions {
+    justify-content: flex-end;
+  }
+}
 </style>

package/src/pages/AutomationPage.vue

@@ -20,7 +20,7 @@ defineProps<{
   formatScriptTime: (value: string) => string;
   switchAndroidDevice: (deviceId: string) => void;
   triggerDeviceKey: (keyCode: number) => void;
-  refreshDevicePreview: () => void;
+  refreshDevicePreview: () => void | Promise<void>;
   openCodeDialog: (script: SavedScript) => void;
   removeSavedScript: (id: string) => void;
   deviceWidth: number;
@@ -110,7 +110,7 @@ const getRunStatusTagText = (status: string) => {
       <el-card shadow="never" class="automation-card execution-card">
         <template #header>执行面板</template>
         <el-form label-position="top">
-          <el-form-item label="当前脚本">
+          <el-form-item class="execution-script-item" label="当前脚本">
             <el-input :model-value="selectedScript ? `${selectedScript.promptTitle || selectedScript.name} · ${selectedScript.name}` : ''" readonly />
           </el-form-item>
           <el-form-item class="execution-output-item">
@@ -148,7 +148,7 @@ const getRunStatusTagText = (status: string) => {
                   class="execution-log__output"
                   :value="executionLog"
                   readonly
-                  wrap="off"
+                  wrap="soft"
                   spellcheck="false"
                 />
               </div>

package/src/pages/ConfigPage.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { Delete, Edit, QuestionFilled } from '@element-plus/icons-vue';
-import ModelUsageChart from '../components/config/ModelUsageChart.vue';
 import {
   codexMidsceneModelOptions,
   midsceneModelPresets,
   type MidsceneModelProvider,
-  type MidsceneModelPresetKey,
 } from '../config/midscene-model-presets';
-import type { AppPreset, ConfigForm, ModelUsageRecord } from '../types';
+import type { AppPreset, ConfigForm } from '../types';
 
 type AppPresetForm = {
   id: string;
@@ -27,7 +25,6 @@ const props = defineProps<{
     midscene: string;
     scriptOptimizer: string;
   };
-  modelUsageRecords: ModelUsageRecord[];
 }>();
 
 const emit = defineEmits<{
@@ -37,7 +34,6 @@ const emit = defineEmits<{
   editAppPreset: [app: AppPreset];
   deleteAppPreset: [id: string];
   updateMidsceneModelProvider: [provider: MidsceneModelProvider];
-  applyMidsceneModelPreset: [key: MidsceneModelPresetKey];
 }>();
 
 const activeMidsceneProvider = computed<MidsceneModelProvider>(() =>
@@ -45,15 +41,7 @@ const activeMidsceneProvider = computed<MidsceneModelProvider>(() =>
 );
 const modelConfigGuideUrl = 'https://midscenejs.com/zh/model-common-config.html';
 
-const activeMidscenePresetKey = computed(() => {
-  const model = props.configForm.midscene.model;
-  return midsceneModelPresets.find(
-    (preset) =>
-      preset.baseUrl === model.baseUrl &&
-      preset.modelName === model.name &&
-      preset.modelFamily === model.family,
-  )?.key || '';
-});
+const normalizeBaseUrl = (value: string) => value.trim().replace(/\/+$/, '');
 
 const updateMidsceneModelName = (value: string) => {
   props.configForm.midscene.model.name = value;
@@ -63,9 +51,12 @@ const updateMidsceneModelName = (value: string) => {
   }
 };
 
-const applyMidscenePreset = (value: string) => {
-  if (value === 'gpt' || value === 'doubao') {
-    emit('applyMidsceneModelPreset', value);
+const updateCustomMidsceneBaseUrl = (value: string) => {
+  props.configForm.midscene.model.baseUrl = value;
+  const preset = midsceneModelPresets.find((item) => normalizeBaseUrl(item.baseUrl) === normalizeBaseUrl(value));
+  if (preset) {
+    props.configForm.midscene.model.name = preset.modelName;
+    props.configForm.midscene.model.family = preset.modelFamily;
   }
 };
 
@@ -183,22 +174,12 @@ const openModelConfigGuide = () => {
               </el-form-item>
 
               <template v-if="activeMidsceneProvider === 'custom'">
-                <el-form-item label="模型预设参数">
-                  <el-select
-                    :model-value="activeMidscenePresetKey"
-                    placeholder="请选择模型预设"
-                    @change="applyMidscenePreset"
-                  >
-                    <el-option
-                      v-for="preset in midsceneModelPresets"
-                      :key="preset.key"
-                      :label="preset.label"
-                      :value="preset.key"
-                    />
-                  </el-select>
-                </el-form-item>
                 <el-form-item label="Base URL">
-                  <el-input v-model="configForm.midscene.model.baseUrl" />
+                  <el-input
+                    :model-value="configForm.midscene.model.baseUrl"
+                    placeholder="输入 Base URL，匹配已知提供方时自动填充模型"
+                    @input="updateCustomMidsceneBaseUrl"
+                  />
                 </el-form-item>
                 <el-form-item label="API Key">
                   <el-input v-model="configForm.midscene.model.apiKey" show-password />
@@ -303,9 +284,6 @@ const openModelConfigGuide = () => {
           </section>
         </div>
 
-        <ModelUsageChart
-          :records="modelUsageRecords"
-        />
       </el-card>
 
     </section>

package/src/pages/GeneratorPage.vue

@@ -3,23 +3,27 @@ import AiGeneratorPage from './AiGeneratorPage.vue';
 import ManualStepsPage from './ManualStepsPage.vue';
 import GeneratedCodePanel from '../components/generator/GeneratedCodePanel.vue';
 import type { AppPreset, GeneratorForm, GeneratorMode } from '../types';
+import type { PromptPreset } from '../config/prompt-presets';
 import type { ScriptStep } from '../script-generator';
 
 defineProps<{
   form: GeneratorForm;
   appPresets: AppPreset[];
+  promptPresets: PromptPreset[];
   promptExample: string;
   steps: ScriptStep[];
   generatedCode: string;
   showGeneratedCode: boolean;
   generatedCodeEditing: boolean;
   generatedCodeEditSaving: boolean;
+  isGenerating: boolean;
   importingTestCase: boolean;
   importedTestCaseFileName: string;
 }>();
 
 const mode = defineModel<GeneratorMode>('mode', { required: true });
 const sourcePrompt = defineModel<string>('sourcePrompt', { required: true });
+const promptPresetId = defineModel<string>('promptPresetId', { required: true });
 const generatedCodeDraft = defineModel<string>('generatedCodeDraft', { required: true });
 
 defineEmits<{
@@ -64,9 +68,12 @@ defineEmits<{
     <AiGeneratorPage
       v-if="mode === 'ai'"
       v-model:source-prompt="sourcePrompt"
+      v-model:prompt-preset-id="promptPresetId"
       :form="form"
       :app-presets="appPresets"
+      :prompt-presets="promptPresets"
       :prompt-example="promptExample"
+      :generating="isGenerating"
       :importing-test-case="importingTestCase"
       :imported-file-name="importedTestCaseFileName"
       @import-test-case="$emit('importTestCase', $event)"