android-midscene-automation 0.1.0

package/src/config/prompt-example.ts

@@ -0,0 +1,6 @@
+export const promptDocument = `# 示例 App 登录测试
+
+进入目标 App 后，按以下规则处理启动阶段弹窗，这一步必须执行点击动作，不要只判断弹窗是否存在：若弹出位置、存储、相机、麦克风、通知等权限申请弹窗，点击允许；若弹出“声明与条款”、用户协议、隐私政策、服务协议弹窗，点击同意、接受或我已阅读并同意；若弹出广告、活动、版本更新、评分、通知引导等与登录无关的弹窗，点击关闭、跳过、稍后再说或取消。
+
+弹窗处理完成后，确认页面已经稳定停留在目标 App 的登录页、手机号登录页、账号密码登录页，或显示可进入登录流程的入口。页面上不应存在遮挡登录操作的权限、协议、广告、更新或活动弹窗；如果仍存在遮挡弹窗，脚本应失败而不是显示执行完成。
+`;

package/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import App from './App.vue';
+import './style.css';
+
+createApp(App).use(ElementPlus).mount('#app');

package/src/pages/AiGeneratorPage.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { Delete, QuestionFilled } from '@element-plus/icons-vue';
+import TestCaseFileUpload from '../components/generator/TestCaseFileUpload.vue';
+import type { AppPreset, GeneratorForm } from '../types';
+
+defineProps<{
+  form: GeneratorForm;
+  appPresets: AppPreset[];
+  promptExample: string;
+  importingTestCase: boolean;
+  importedFileName: string;
+}>();
+
+defineEmits<{
+  importTestCase: [file: File];
+  clearAll: [];
+}>();
+
+const sourcePrompt = defineModel<string>('sourcePrompt', { required: true });
+const promptExampleVisible = shallowRef(false);
+</script>
+
+<template>
+  <section class="page-grid">
+    <el-card shadow="never">
+      <template #header>基础配置</template>
+      <el-form label-position="top">
+        <el-form-item label="脚本名称">
+          <el-input v-model="form.testName" placeholder="请输入脚本名称" />
+        </el-form-item>
+        <el-form-item label="场景标题">
+          <el-input v-model="form.promptTitle" placeholder="请输入场景标题" />
+        </el-form-item>
+        <el-form-item label="选择 App">
+          <el-select v-model="form.appPresetId" placeholder="选择预设 App">
+            <el-option
+              v-for="app in appPresets"
+              :key="app.id"
+              :label="`${app.name} · ${app.packageName}`"
+              :value="app.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card shadow="never" class="prompt-card">
+      <template #header>
+        <div class="panel-header">
+          <span>原始 Prompt</span>
+          <div class="panel-header__actions prompt-card__actions">
+            <TestCaseFileUpload
+              :uploading="importingTestCase"
+              :file-name="importedFileName"
+              @upload="$emit('importTestCase', $event)"
+            />
+            <el-button size="small" :icon="Delete" :disabled="importingTestCase" @click="$emit('clearAll')">
+              清除
+            </el-button>
+            <el-button
+              text
+              :icon="QuestionFilled"
+              aria-label="查看示例文案"
+              @click="promptExampleVisible = true"
+            />
+          </div>
+        </div>
+      </template>
+      <el-input
+        v-model="sourcePrompt"
+        class="source-prompt-input"
+        type="textarea"
+        :rows="14"
+        placeholder="请输入原始 Prompt，或点击右上角问号查看示例"
+      />
+    </el-card>
+  </section>
+
+  <el-dialog v-model="promptExampleVisible" title="原始 Prompt 示例" width="720px">
+    <pre class="prompt-example"><code>{{ promptExample }}</code></pre>
+  </el-dialog>
+</template>
+
+<style scoped>
+.prompt-card__actions {
+  align-items: center;
+  min-width: 0;
+}
+</style>

package/src/pages/AutomationPage.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { CopyDocument, Delete, View } from '@element-plus/icons-vue';
+import DevicePreviewPanel from '../components/device/DevicePreviewPanel.vue';
+import type { AndroidDevice, DeviceAction, ExecutionStep, SavedScript } from '../types';
+
+defineProps<{
+  savedScripts: SavedScript[];
+  selectedScript?: SavedScript;
+  playgroundAvailable: boolean;
+  playgroundDeviceId: string;
+  playgroundFrameUrl: string;
+  playgroundPreviewError: string;
+  devicePreviewUrl: string;
+  androidDevices: AndroidDevice[];
+  deviceActions: readonly DeviceAction[];
+  executionLog: string;
+  executionProcess: ExecutionStep[];
+  lastRunStatus: string;
+  runningElapsedText: string;
+  formatScriptTime: (value: string) => string;
+  switchAndroidDevice: (deviceId: string) => void;
+  triggerDeviceKey: (keyCode: number) => void;
+  refreshDevicePreview: () => void;
+  openCodeDialog: (script: SavedScript) => void;
+  removeSavedScript: (id: string) => void;
+  deviceWidth: number;
+  deviceHeight: number;
+  tapDevice: (x: number, y: number) => void;
+  swipeDevice: (startX: number, startY: number, endX: number, endY: number, duration?: number) => void;
+}>();
+
+const selectedScriptId = defineModel<string>('selectedScriptId', { required: true });
+
+defineEmits<{
+  clearExecutionLog: [];
+  copyExecutionLog: [];
+}>();
+
+// 执行状态与 Element Plus tag 类型的映射只影响展示，不参与执行流程判断。
+const getRunStatusTagType = (status: string) => {
+  if (status === '执行完成') return 'success';
+  if (status === '执行中' || status === '停止中' || status === '已停止') return 'warning';
+  return 'danger';
+};
+
+// 将内部执行状态收敛成短标签文案，避免模板中重复三元判断。
+const getRunStatusTagText = (status: string) => {
+  if (status === '执行完成') return '完成';
+  if (status === '执行中') return '执行中';
+  if (status === '停止中') return '停止中';
+  if (status === '已停止') return '已停止';
+  return '失败';
+};
+</script>
+
+<template>
+  <section class="automation-layout">
+    <el-card shadow="never" class="automation-card">
+      <template #header>脚本列表</template>
+      <div class="script-list">
+        <div
+          v-for="item in savedScripts"
+          :key="item.id"
+          role="button"
+          tabindex="0"
+          class="script-row"
+          :class="{ 'script-row--active': selectedScriptId === item.id }"
+          @click="selectedScriptId = item.id"
+          @keydown.enter="selectedScriptId = item.id"
+        >
+          <div class="script-row__main">
+            <strong>{{ item.promptTitle || item.name }}</strong>
+            <span>{{ item.name }}</span>
+            <small>{{ formatScriptTime(item.updatedAt) }}</small>
+          </div>
+          <div class="script-row__actions">
+            <el-button
+              text
+              size="small"
+              :icon="View"
+              title="查看代码"
+              aria-label="查看代码"
+              @click.stop="openCodeDialog(item)"
+            />
+            <el-button text size="small" :icon="Delete" @click.stop="removeSavedScript(item.id)" />
+          </div>
+        </div>
+        <el-empty v-if="!savedScripts.length" description="暂无脚本" />
+      </div>
+    </el-card>
+
+    <div class="automation-stage">
+      <DevicePreviewPanel
+        :available="playgroundAvailable"
+        :devices="androidDevices"
+        :selected-device-id="playgroundDeviceId"
+        :frame-url="playgroundFrameUrl"
+        :image-url="devicePreviewUrl"
+        :preview-error="playgroundPreviewError"
+        :actions="deviceActions"
+        :device-width="deviceWidth"
+        :device-height="deviceHeight"
+        @switch-device="switchAndroidDevice"
+        @trigger-key="triggerDeviceKey"
+        @refresh-preview="refreshDevicePreview"
+        @tap="tapDevice($event.x, $event.y)"
+        @swipe="swipeDevice($event.startX, $event.startY, $event.endX, $event.endY, $event.duration)"
+      />
+
+      <el-card shadow="never" class="automation-card execution-card">
+        <template #header>执行面板</template>
+        <el-form label-position="top">
+          <el-form-item label="当前脚本">
+            <el-input :model-value="selectedScript ? `${selectedScript.promptTitle || selectedScript.name} · ${selectedScript.name}` : ''" readonly />
+          </el-form-item>
+          <el-form-item class="execution-output-item">
+            <div class="execution-output-section">
+              <div class="execution-output-header">
+                <strong>执行输出</strong>
+                <div class="execution-output-toolbar">
+                  <el-tag
+                    v-if="lastRunStatus"
+                    size="small"
+                    :type="getRunStatusTagType(lastRunStatus)"
+                  >
+                    {{ getRunStatusTagText(lastRunStatus) }}
+                  </el-tag>
+                  <span v-if="runningElapsedText" class="execution-output-duration">
+                    {{ runningElapsedText }}
+                  </span>
+                  <el-button
+                    size="small"
+                    text
+                    :icon="CopyDocument"
+                    :disabled="!executionLog"
+                    @click="$emit('copyExecutionLog')"
+                  >
+                    复制
+                  </el-button>
+                  <el-button size="small" text :disabled="!executionLog" @click="$emit('clearExecutionLog')">
+                    清除
+                  </el-button>
+                </div>
+              </div>
+              <div class="execution-log execution-log--panel">
+                <textarea
+                  v-if="executionLog"
+                  class="execution-log__output"
+                  :value="executionLog"
+                  readonly
+                  wrap="off"
+                  spellcheck="false"
+                />
+              </div>
+            </div>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+  </section>
+</template>

package/src/pages/ConfigPage.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Delete, Edit } from '@element-plus/icons-vue';
+import ModelUsageChart from '../components/config/ModelUsageChart.vue';
+import {
+  codexMidsceneModelOptions,
+  midsceneModelFamilyOptions,
+  midsceneModelOptions,
+  midsceneModelPresets,
+  type MidsceneModelProvider,
+  type MidsceneModelPresetKey,
+} from '../config/midscene-model-presets';
+import type { AppPreset, ConfigForm, ModelUsageRecord } from '../types';
+
+type AppPresetForm = {
+  id: string;
+  name: string;
+  packageName: string;
+};
+
+const props = defineProps<{
+  configForm: ConfigForm;
+  appPresets: AppPreset[];
+  appPresetForm: AppPresetForm;
+  testingModelKey: string;
+  isSavingModelConfig: boolean;
+  isSavingAppPreset: boolean;
+  modelTestStatus: {
+    midscene: string;
+    scriptOptimizer: string;
+  };
+  modelUsageRecords: ModelUsageRecord[];
+}>();
+
+const emit = defineEmits<{
+  testModel: [key: 'midscene' | 'scriptOptimizer'];
+  saveModelConfig: [];
+  saveAppPreset: [];
+  editAppPreset: [app: AppPreset];
+  deleteAppPreset: [id: string];
+  updateMidsceneModelProvider: [provider: MidsceneModelProvider];
+  applyMidsceneModelPreset: [key: MidsceneModelPresetKey];
+}>();
+
+const activeMidsceneProvider = computed<MidsceneModelProvider>(() =>
+  props.configForm.midscene.model.provider === 'codex' ? 'codex' : 'custom',
+);
+
+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 activeMidsceneModelOptions = computed(() =>
+  activeMidsceneProvider.value === 'codex' ? codexMidsceneModelOptions : midsceneModelOptions,
+);
+
+const updateMidsceneModelName = (value: string) => {
+  props.configForm.midscene.model.name = value;
+  const option = activeMidsceneModelOptions.value.find((item) => item.value === value);
+  if (option) {
+    props.configForm.midscene.model.family = option.family;
+  }
+};
+
+const applyMidscenePreset = (value: string) => {
+  if (value === 'gpt' || value === 'doubao') {
+    emit('applyMidsceneModelPreset', value);
+  }
+};
+
+const updateMidsceneProvider = (value: string) => {
+  if (value === 'custom' || value === 'codex') {
+    emit('updateMidsceneModelProvider', value);
+  }
+};
+</script>
+
+<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>
+
+        <div class="config-model-grid">
+          <section>
+            <div class="panel-header panel-header--sub">
+              <span>Midscene 模型</span>
+              <el-button
+                :loading="testingModelKey === 'midscene'"
+                @click="$emit('testModel', 'midscene')"
+              >
+                测试模型
+              </el-button>
+            </div>
+            <el-form label-position="top">
+              <el-form-item label="接入方式">
+                <el-select
+                  :model-value="activeMidsceneProvider"
+                  @change="updateMidsceneProvider"
+                >
+                  <el-option label="自定义提供方" value="custom" />
+                  <el-option label="使用 Codex" value="codex" />
+                </el-select>
+              </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-form-item>
+                <el-form-item label="API Key">
+                  <el-input v-model="configForm.midscene.model.apiKey" show-password />
+                </el-form-item>
+                <el-form-item label="Model Name">
+                  <el-select
+                    :model-value="configForm.midscene.model.name"
+                    filterable
+                    @change="updateMidsceneModelName"
+                  >
+                    <el-option
+                      v-for="option in activeMidsceneModelOptions"
+                      :key="option.value"
+                      :label="option.label"
+                      :value="option.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="Model Family">
+                  <el-select v-model="configForm.midscene.model.family" filterable>
+                    <el-option
+                      v-for="option in midsceneModelFamilyOptions"
+                      :key="option.value"
+                      :label="option.label"
+                      :value="option.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </template>
+
+              <template v-else>
+                <el-alert
+                  class="config-form-alert"
+                  type="info"
+                  :closable="false"
+                  title="复用 Codex 登录态，无需 API Key。请确保 codex 在 PATH 中可用，并已完成 codex login。"
+                />
+                <el-form-item label="Base URL">
+                  <el-input :model-value="configForm.midscene.model.baseUrl" readonly />
+                </el-form-item>
+                <el-form-item label="Model Name">
+                  <el-select
+                    :model-value="configForm.midscene.model.name"
+                    @change="updateMidsceneModelName"
+                  >
+                    <el-option
+                      v-for="option in activeMidsceneModelOptions"
+                      :key="option.value"
+                      :label="option.label"
+                      :value="option.value"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="Model Family">
+                  <el-select v-model="configForm.midscene.model.family" disabled>
+                    <el-option label="gpt-5" value="gpt-5" />
+                  </el-select>
+                </el-form-item>
+              </template>
+              <el-form-item v-if="modelTestStatus.midscene" label="测试结果">
+                <el-input :model-value="modelTestStatus.midscene" readonly />
+              </el-form-item>
+            </el-form>
+          </section>
+
+          <section>
+            <div class="panel-header panel-header--sub">
+              <span>脚本优化模型</span>
+              <el-button
+                :loading="testingModelKey === 'scriptOptimizer'"
+                @click="$emit('testModel', 'scriptOptimizer')"
+              >
+                测试模型
+              </el-button>
+            </div>
+            <el-form label-position="top">
+              <el-form-item label="Base URL">
+                <el-input v-model="configForm.scriptOptimizer.model.baseUrl" />
+              </el-form-item>
+              <el-form-item label="API Key">
+                <el-input v-model="configForm.scriptOptimizer.model.apiKey" show-password />
+              </el-form-item>
+              <el-form-item label="Model Name">
+                <el-input v-model="configForm.scriptOptimizer.model.name" />
+              </el-form-item>
+              <el-form-item v-if="modelTestStatus.scriptOptimizer" label="测试结果">
+                <el-input :model-value="modelTestStatus.scriptOptimizer" readonly />
+              </el-form-item>
+            </el-form>
+          </section>
+        </div>
+
+        <ModelUsageChart
+          :records="modelUsageRecords"
+        />
+      </el-card>
+
+      <el-card shadow="never" class="config-module-card">
+        <template #header>
+          <div class="panel-header">
+            <div class="panel-header__title">
+              <span>预设 App 参数</span>
+              <el-tag v-if="appPresetForm.id" size="small" type="warning">编辑中</el-tag>
+            </div>
+            <div class="panel-header__actions">
+              <el-button type="primary" :loading="isSavingAppPreset" @click="$emit('saveAppPreset')">
+                {{ appPresetForm.id ? '保存修改' : '保存 App' }}
+              </el-button>
+            </div>
+          </div>
+        </template>
+
+        <el-form label-position="top">
+          <el-form-item label="App 名称">
+            <el-input v-model="appPresetForm.name" placeholder="例如：示例 App" />
+          </el-form-item>
+          <el-form-item label="App 包名">
+            <el-input v-model="appPresetForm.packageName" placeholder="例如：com.example.app" />
+          </el-form-item>
+        </el-form>
+
+        <div class="app-preset-list">
+          <div v-for="app in appPresets" :key="app.id" class="app-preset-row">
+            <div class="app-preset-row__main">
+              <strong>{{ app.name }}</strong>
+              <span>{{ app.packageName }}</span>
+            </div>
+            <div class="script-row__actions">
+              <el-button text size="small" :icon="Edit" @click="$emit('editAppPreset', app)" />
+              <el-button text size="small" :icon="Delete" @click="$emit('deleteAppPreset', app.id)" />
+            </div>
+          </div>
+          <el-empty v-if="!appPresets.length" description="暂无预设 App" />
+        </div>
+      </el-card>
+    </section>
+  </div>
+</template>

package/src/pages/GeneratorPage.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+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 { ScriptStep } from '../script-generator';
+
+defineProps<{
+  form: GeneratorForm;
+  appPresets: AppPreset[];
+  promptExample: string;
+  steps: ScriptStep[];
+  generatedCode: string;
+  showGeneratedCode: boolean;
+  generatedCodeEditing: boolean;
+  generatedCodeEditSaving: boolean;
+  importingTestCase: boolean;
+  importedTestCaseFileName: string;
+}>();
+
+const mode = defineModel<GeneratorMode>('mode', { required: true });
+const sourcePrompt = defineModel<string>('sourcePrompt', { required: true });
+const generatedCodeDraft = defineModel<string>('generatedCodeDraft', { required: true });
+
+defineEmits<{
+  addStep: [];
+  removeStep: [id: string];
+  copyCode: [];
+  editCode: [];
+  undoCode: [];
+  saveCode: [];
+  importTestCase: [file: File];
+  clearAll: [];
+}>();
+</script>
+
+<template>
+  <div
+    class="generator-page"
+    :class="{
+      'generator-page--ai': mode === 'ai',
+      'generator-page--manual': mode === 'manual',
+    }"
+  >
+    <div class="subnav">
+      <button
+        type="button"
+        class="subnav__item"
+        :class="{ 'subnav__item--active': mode === 'ai' }"
+        @click="mode = 'ai'"
+      >
+        AI生成
+      </button>
+      <button
+        type="button"
+        class="subnav__item"
+        :class="{ 'subnav__item--active': mode === 'manual' }"
+        @click="mode = 'manual'"
+      >
+        自定义步骤编排
+      </button>
+    </div>
+
+    <AiGeneratorPage
+      v-if="mode === 'ai'"
+      v-model:source-prompt="sourcePrompt"
+      :form="form"
+      :app-presets="appPresets"
+      :prompt-example="promptExample"
+      :importing-test-case="importingTestCase"
+      :imported-file-name="importedTestCaseFileName"
+      @import-test-case="$emit('importTestCase', $event)"
+      @clear-all="$emit('clearAll')"
+    />
+
+    <ManualStepsPage
+      v-else
+      :form="form"
+      :app-presets="appPresets"
+      :steps="steps"
+      @add-step="$emit('addStep')"
+      @remove-step="$emit('removeStep', $event)"
+    />
+
+    <GeneratedCodePanel
+      v-model:draft-code="generatedCodeDraft"
+      :code="generatedCode"
+      :show-code="showGeneratedCode"
+      :editing="generatedCodeEditing"
+      :saving="generatedCodeEditSaving"
+      @copy="$emit('copyCode')"
+      @edit="$emit('editCode')"
+      @undo="$emit('undoCode')"
+      @save="$emit('saveCode')"
+    />
+  </div>
+</template>