android-midscene-automation 0.1.0

package/src/components/config/ModelUsageChart.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { ModelUsageRecord } from '../../types';
+
+const CHART_WIDTH = 720;
+const CHART_HEIGHT = 180;
+const CHART_PADDING = 28;
+
+const props = defineProps<{
+  records: ModelUsageRecord[];
+}>();
+
+type ChartPoint = {
+  x: number;
+  y: number;
+};
+
+const recentRecords = computed(() => props.records.slice(-20));
+const displayRecords = computed(() => recentRecords.value.slice().reverse());
+const latestRecord = computed(() => recentRecords.value[recentRecords.value.length - 1]);
+const tokenRecords = computed(() =>
+  recentRecords.value.filter((record) => typeof record.totalTokens === 'number'),
+);
+
+const maxDurationMs = computed(() =>
+  Math.max(1, ...recentRecords.value.map((record) => record.durationMs)),
+);
+
+const maxTotalTokens = computed(() =>
+  Math.max(
+    1,
+    ...tokenRecords.value.flatMap((record) => [
+      record.promptTokens || 0,
+      record.completionTokens || 0,
+      record.totalTokens || 0,
+    ]),
+  ),
+);
+
+const buildPoints = (records: ModelUsageRecord[], valueOf: (record: ModelUsageRecord) => number, maxValue: number) => {
+  const plotWidth = CHART_WIDTH - CHART_PADDING * 2;
+  const plotHeight = CHART_HEIGHT - CHART_PADDING * 2;
+  return records.map<ChartPoint>((record, index) => {
+    const count = Math.max(1, records.length - 1);
+    return {
+      x: CHART_PADDING + (plotWidth * index) / count,
+      y: CHART_HEIGHT - CHART_PADDING - (plotHeight * valueOf(record)) / maxValue,
+    };
+  });
+};
+
+const durationPoints = computed(() =>
+  buildPoints(recentRecords.value, (record) => record.durationMs, maxDurationMs.value),
+);
+
+const promptTokenPoints = computed(() =>
+  buildPoints(tokenRecords.value, (record) => record.promptTokens || 0, maxTotalTokens.value),
+);
+
+const completionTokenPoints = computed(() =>
+  buildPoints(tokenRecords.value, (record) => record.completionTokens || 0, maxTotalTokens.value),
+);
+
+const toPolyline = (points: ChartPoint[]) =>
+  points.map((point) => `${point.x.toFixed(1)},${point.y.toFixed(1)}`).join(' ');
+
+const durationPolyline = computed(() => toPolyline(durationPoints.value));
+const promptTokenPolyline = computed(() => toPolyline(promptTokenPoints.value));
+const completionTokenPolyline = computed(() => toPolyline(completionTokenPoints.value));
+
+const tokenLabel = (value?: number) => (typeof value === 'number' ? String(value) : '未返回');
+
+const formatTime = (isoTime: string) =>
+  new Intl.DateTimeFormat('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }).format(new Date(isoTime));
+</script>
+
+<template>
+  <section class="model-usage-chart">
+    <div class="panel-header panel-header--sub">
+      <div class="panel-header__title">
+        <span>测试消耗统计</span>
+      </div>
+    </div>
+
+    <div v-if="recentRecords.length" class="model-usage-chart__body">
+      <div class="model-usage-chart__summary">
+        <span>最近 {{ recentRecords.length }} 次</span>
+        <span>最新耗时 {{ latestRecord?.durationMs || 0 }}ms</span>
+        <span>输入 {{ tokenLabel(latestRecord?.promptTokens) }}</span>
+        <span>输出 {{ tokenLabel(latestRecord?.completionTokens) }}</span>
+        <span>总计 {{ tokenLabel(latestRecord?.totalTokens) }}</span>
+      </div>
+
+      <svg
+        class="model-usage-chart__svg"
+        :viewBox="`0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`"
+        role="img"
+        aria-label="测试模型消耗统计曲线"
+      >
+        <line
+          :x1="CHART_PADDING"
+          :y1="CHART_HEIGHT - CHART_PADDING"
+          :x2="CHART_WIDTH - CHART_PADDING"
+          :y2="CHART_HEIGHT - CHART_PADDING"
+          class="model-usage-chart__axis"
+        />
+        <line
+          :x1="CHART_PADDING"
+          :y1="CHART_PADDING"
+          :x2="CHART_PADDING"
+          :y2="CHART_HEIGHT - CHART_PADDING"
+          class="model-usage-chart__axis"
+        />
+        <polyline
+          v-if="promptTokenPolyline"
+          :points="promptTokenPolyline"
+          class="model-usage-chart__line model-usage-chart__line--prompt"
+        />
+        <polyline
+          v-if="completionTokenPolyline"
+          :points="completionTokenPolyline"
+          class="model-usage-chart__line model-usage-chart__line--completion"
+        />
+        <polyline
+          :points="durationPolyline"
+          class="model-usage-chart__line model-usage-chart__line--duration"
+        />
+        <circle
+          v-for="point in promptTokenPoints"
+          :key="`prompt-${point.x}-${point.y}`"
+          :cx="point.x"
+          :cy="point.y"
+          r="3"
+          class="model-usage-chart__point model-usage-chart__point--prompt"
+        />
+        <circle
+          v-for="point in completionTokenPoints"
+          :key="`completion-${point.x}-${point.y}`"
+          :cx="point.x"
+          :cy="point.y"
+          r="3"
+          class="model-usage-chart__point model-usage-chart__point--completion"
+        />
+        <circle
+          v-for="point in durationPoints"
+          :key="`duration-${point.x}-${point.y}`"
+          :cx="point.x"
+          :cy="point.y"
+          r="3"
+          class="model-usage-chart__point model-usage-chart__point--duration"
+        />
+      </svg>
+
+      <div class="model-usage-chart__legend">
+        <span><i class="model-usage-chart__swatch model-usage-chart__swatch--prompt"></i>输入 tokens</span>
+        <span><i class="model-usage-chart__swatch model-usage-chart__swatch--completion"></i>输出 tokens</span>
+        <span><i class="model-usage-chart__swatch model-usage-chart__swatch--duration"></i>耗时 ms</span>
+      </div>
+
+      <div class="model-usage-chart__records">
+        <div class="model-usage-chart__record model-usage-chart__record--head">
+          <span>时间</span>
+          <span>状态</span>
+          <span>模型</span>
+          <span>输入</span>
+          <span>输出</span>
+          <span>总计</span>
+          <span>耗时</span>
+        </div>
+        <div v-for="record in displayRecords" :key="record.id" class="model-usage-chart__record">
+          <span>{{ formatTime(record.createdAt) }}</span>
+          <span>{{ record.success ? '成功' : '失败' }}</span>
+          <span>{{ record.modelName }}</span>
+          <span>{{ tokenLabel(record.promptTokens) }}</span>
+          <span>{{ tokenLabel(record.completionTokens) }}</span>
+          <span>{{ tokenLabel(record.totalTokens) }}</span>
+          <span>{{ record.durationMs }}ms</span>
+        </div>
+      </div>
+    </div>
+
+    <el-empty v-else description="测试 AI 生成模型或生成脚本后显示消耗曲线" />
+  </section>
+</template>

package/src/components/device/DevicePreviewPanel.vue

@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { computed, shallowRef } from 'vue';
+import { Cpu, Refresh } from '@element-plus/icons-vue';
+import type { AndroidDevice, DeviceAction } from '../../types';
+
+type DeviceOverlayBounds = {
+  id: string;
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+
+const props = defineProps<{
+  available: boolean;
+  devices: AndroidDevice[];
+  selectedDeviceId: string;
+  frameUrl?: string;
+  imageUrl?: string;
+  previewError?: string;
+  actions?: readonly DeviceAction[];
+  overlayBounds?: readonly DeviceOverlayBounds[];
+  selectedBounds?: DeviceOverlayBounds;
+  deviceWidth?: number;
+  deviceHeight?: number;
+}>();
+
+const emit = defineEmits<{
+  switchDevice: [deviceId: string];
+  triggerKey: [keyCode: number];
+  previewLoaded: [size: { width: number; height: number }];
+  previewError: [];
+  refreshPreview: [];
+  tap: [point: { x: number; y: number }];
+  swipe: [gesture: {
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    duration: number;
+  }];
+}>();
+
+const imageSize = shallowRef({ width: 0, height: 0 });
+let pointerSession: {
+  pointerId: number;
+  start: { x: number; y: number };
+  startClientX: number;
+  startClientY: number;
+} | null = null;
+const hasPreview = computed(() => Boolean(props.frameUrl || props.imageUrl));
+const imageBoxStyle = computed(() => {
+  if (props.frameUrl) return {};
+  const width = props.deviceWidth || imageSize.value.width;
+  const height = props.deviceHeight || imageSize.value.height;
+  return { aspectRatio: width && height ? `${width} / ${height}` : '9 / 20' };
+});
+const overlayViewBox = computed(() => {
+  const width = props.deviceWidth || imageSize.value.width;
+  const height = props.deviceHeight || imageSize.value.height;
+  return width && height ? `0 0 ${width} ${height}` : '';
+});
+
+function updateImageSize(event: Event) {
+  const image = event.target as HTMLImageElement;
+  imageSize.value = { width: image.naturalWidth, height: image.naturalHeight };
+  emit('previewLoaded', imageSize.value);
+}
+
+function getDevicePoint(target: HTMLElement, clientX: number, clientY: number) {
+  const width = props.deviceWidth || imageSize.value.width;
+  const height = props.deviceHeight || imageSize.value.height;
+  if (!width || !height) return;
+  const rect = target.getBoundingClientRect();
+  if (!rect.width || !rect.height) return;
+
+  const deviceAspect = width / height;
+  const containerAspect = rect.width / rect.height;
+  let drawWidth = rect.width;
+  let drawHeight = rect.height;
+  let offsetX = 0;
+  let offsetY = 0;
+
+  if (containerAspect > deviceAspect) {
+    drawWidth = rect.height * deviceAspect;
+    offsetX = (rect.width - drawWidth) / 2;
+  } else {
+    drawHeight = rect.width / deviceAspect;
+    offsetY = (rect.height - drawHeight) / 2;
+  }
+
+  const localX = Math.max(0, Math.min(drawWidth, clientX - rect.left - offsetX));
+  const localY = Math.max(0, Math.min(drawHeight, clientY - rect.top - offsetY));
+  return {
+    x: Math.round((localX / drawWidth) * width),
+    y: Math.round((localY / drawHeight) * height),
+  };
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (event.pointerType === 'mouse' && event.button !== 0) return;
+  const target = event.currentTarget as HTMLElement;
+  const point = getDevicePoint(target, event.clientX, event.clientY);
+  if (!point) return;
+  target.setPointerCapture(event.pointerId);
+  pointerSession = {
+    pointerId: event.pointerId,
+    start: point,
+    startClientX: event.clientX,
+    startClientY: event.clientY,
+  };
+}
+
+function handlePointerUp(event: PointerEvent) {
+  if (!pointerSession || pointerSession.pointerId !== event.pointerId) return;
+  const target = event.currentTarget as HTMLElement;
+  const point = getDevicePoint(target, event.clientX, event.clientY);
+  const session = pointerSession;
+  pointerSession = null;
+  if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+  if (!point) return;
+
+  const moved = Math.hypot(
+    event.clientX - session.startClientX,
+    event.clientY - session.startClientY,
+  );
+  if (moved < 8) {
+    emit('tap', session.start);
+    return;
+  }
+
+  emit('swipe', {
+    startX: session.start.x,
+    startY: session.start.y,
+    endX: point.x,
+    endY: point.y,
+    duration: 120,
+  });
+}
+
+function handlePointerCancel(event: PointerEvent) {
+  if (pointerSession?.pointerId === event.pointerId) pointerSession = null;
+}
+</script>
+
+<template>
+  <el-card shadow="never" class="automation-card device-preview-card">
+    <template #header>
+      <div class="panel-header">
+        <span>设备预览</span>
+        <div class="device-status">
+          <el-button
+            text
+            circle
+            :icon="Refresh"
+            :disabled="!selectedDeviceId"
+            title="刷新画面"
+            @click="emit('refreshPreview')"
+          />
+          <el-tag :type="available ? 'success' : 'info'">
+            {{ available ? 'ADB 已连接' : '未检测到设备' }}
+          </el-tag>
+        </div>
+      </div>
+    </template>
+
+    <div class="device-toolbar">
+      <el-select
+        :model-value="selectedDeviceId"
+        placeholder="选择设备"
+        class="device-select"
+        @change="emit('switchDevice', String($event))"
+      >
+        <el-option
+          v-for="device in devices"
+          :key="device.id"
+          :label="`${device.id}${device.description ? ` · ${device.description}` : ''}`"
+          :value="device.id"
+        />
+      </el-select>
+    </div>
+
+    <div v-if="actions?.length" class="device-actions">
+      <button
+        v-for="action in actions"
+        :key="action.key"
+        type="button"
+        class="device-action-button"
+        @click="emit('triggerKey', action.keyCode)"
+      >
+        <img :src="action.icon" :alt="action.label" class="device-action-button__icon" />
+        <span class="device-action-button__tooltip">{{ action.label }}</span>
+      </button>
+    </div>
+
+    <div
+      class="device-preview"
+      :class="{ 'device-preview--image': imageUrl && !frameUrl }"
+    >
+      <div
+        v-if="hasPreview"
+        class="device-preview__interactive"
+        :class="{ 'device-preview__interactive--image': !frameUrl }"
+        :style="imageBoxStyle"
+      >
+        <div
+          class="device-preview__surface"
+          @pointerdown="handlePointerDown"
+          @pointerup="handlePointerUp"
+          @pointercancel="handlePointerCancel"
+        />
+        <iframe
+          v-if="frameUrl"
+          :key="frameUrl"
+          :src="frameUrl"
+          title="Android Device Preview"
+          sandbox="allow-scripts allow-same-origin allow-forms"
+          class="device-preview__frame"
+        />
+        <img
+          v-else
+          :src="imageUrl"
+          alt="Android Device Preview"
+          class="device-preview__frame device-preview__image"
+          @load="updateImageSize"
+          @error="emit('previewError')"
+        />
+        <svg
+          v-if="overlayViewBox && (overlayBounds?.length || selectedBounds)"
+          class="device-preview__overlay"
+          :viewBox="overlayViewBox"
+          preserveAspectRatio="xMidYMid meet"
+          aria-hidden="true"
+        >
+          <rect
+            v-for="bounds in overlayBounds"
+            :key="bounds.id"
+            class="device-preview__node-bound"
+            :x="bounds.left"
+            :y="bounds.top"
+            :width="Math.max(0, bounds.right - bounds.left)"
+            :height="Math.max(0, bounds.bottom - bounds.top)"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            v-if="selectedBounds"
+            class="device-preview__selected-bound"
+            :x="selectedBounds.left"
+            :y="selectedBounds.top"
+            :width="Math.max(0, selectedBounds.right - selectedBounds.left)"
+            :height="Math.max(0, selectedBounds.bottom - selectedBounds.top)"
+            vector-effect="non-scaling-stroke"
+          />
+        </svg>
+      </div>
+      <div v-else class="device-preview__empty">
+        <Cpu class="device-preview__icon" />
+        <p v-if="selectedDeviceId" class="device-preview__meta">
+          当前设备：{{ selectedDeviceId }}
+        </p>
+        <p v-if="previewError">{{ previewError }}</p>
+        <p v-else>请选择可用设备</p>
+      </div>
+    </div>
+  </el-card>
+</template>

package/src/components/generator/GeneratedCodePanel.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { CopyDocument, Edit, RefreshLeft } from '@element-plus/icons-vue';
+
+defineProps<{
+  code: string;
+  showCode: boolean;
+  editing: boolean;
+  saving: boolean;
+}>();
+
+const draftCode = defineModel<string>('draftCode', { required: true });
+
+defineEmits<{
+  copy: [];
+  edit: [];
+  undo: [];
+  save: [];
+}>();
+</script>
+
+<template>
+  <el-card shadow="never" class="generator-code-card">
+    <template #header>
+      <div class="panel-header">
+        <span>生成代码</span>
+        <div class="panel-header__actions">
+          <el-button
+            type="success"
+            :icon="CopyDocument"
+            :disabled="!showCode"
+            @click="$emit('copy')"
+          >
+            复制
+          </el-button>
+          <el-button
+            v-if="!editing"
+            type="primary"
+            :icon="Edit"
+            :disabled="!showCode"
+            @click="$emit('edit')"
+          >
+            编辑
+          </el-button>
+          <template v-else>
+            <el-button :icon="RefreshLeft" :disabled="saving" @click="$emit('undo')">
+              撤回修改
+            </el-button>
+            <el-button
+              type="primary"
+              :loading="saving"
+              @click="$emit('save')"
+            >
+              保存
+            </el-button>
+          </template>
+        </div>
+      </div>
+    </template>
+
+    <el-input
+      v-if="editing"
+      v-model="draftCode"
+      type="textarea"
+      resize="none"
+      spellcheck="false"
+      class="generator-code-editor"
+    />
+    <pre v-else class="code-block generator-code-block"><code>{{ showCode ? code : '' }}</code></pre>
+  </el-card>
+</template>

package/src/components/generator/TestCaseFileUpload.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { Document, UploadFilled } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import { useTemplateRef } from 'vue';
+
+defineProps<{
+  uploading: boolean;
+  fileName: string;
+}>();
+
+const emit = defineEmits<{
+  upload: [file: File];
+}>();
+
+const fileInput = useTemplateRef<HTMLInputElement>('fileInput');
+const allowedExtensions = new Set(['txt', 'xls', 'xlsx', 'doc', 'docx']);
+const maxFileSize = 10 * 1024 * 1024;
+
+const openFilePicker = () => {
+  if (!fileInput.value) return;
+  fileInput.value.value = '';
+  fileInput.value.click();
+};
+
+const handleFileChange = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) return;
+
+  const extension = file.name.split('.').pop()?.toLowerCase() || '';
+  if (!allowedExtensions.has(extension)) {
+    ElMessage.error('仅支持 txt、xls、xlsx、doc、docx 格式');
+    return;
+  }
+  if (file.size > maxFileSize) {
+    ElMessage.error('文件大小不能超过 10MB');
+    return;
+  }
+
+  emit('upload', file);
+};
+</script>
+
+<template>
+  <div class="test-case-upload">
+    <el-tooltip v-if="fileName" :content="fileName" placement="top">
+      <span class="test-case-upload__file">
+        <el-icon><Document /></el-icon>
+        <span class="test-case-upload__name">{{ fileName }}</span>
+      </span>
+    </el-tooltip>
+    <el-button
+      size="small"
+      :icon="UploadFilled"
+      :loading="uploading"
+      @click="openFilePicker"
+    >
+      上传用例
+    </el-button>
+    <input
+      ref="fileInput"
+      class="test-case-upload__input"
+      type="file"
+      accept=".txt,.xls,.xlsx,.doc,.docx"
+      @change="handleFileChange"
+    />
+  </div>
+</template>
+
+<style scoped>
+.test-case-upload {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.test-case-upload__file {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: 132px;
+  color: #606266;
+  font-size: 12px;
+}
+
+.test-case-upload__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.test-case-upload__input {
+  display: none;
+}
+</style>

package/src/config/midscene-model-presets.ts

@@ -0,0 +1,75 @@
+export type MidsceneModelProvider = 'custom' | 'codex';
+export type MidsceneModelPresetKey = 'gpt' | 'doubao';
+
+export type MidsceneModelPreset = {
+  key: MidsceneModelPresetKey;
+  label: string;
+  baseUrl: string;
+  modelName: string;
+  modelFamily: string;
+};
+
+export type MidsceneModelOption = {
+  label: string;
+  value: string;
+  family: string;
+};
+
+export const codexMidsceneModel = {
+  provider: 'codex' as const,
+  baseUrl: 'codex://app-server',
+  apiKey: '',
+  name: 'gpt-5.5',
+  family: 'gpt-5',
+};
+
+export const codexMidsceneModelOptions: MidsceneModelOption[] = [
+  { label: 'GPT-5.5（推荐）', value: 'gpt-5.5', family: 'gpt-5' },
+  { label: 'GPT-5.6 Sol', value: 'gpt-5.6-sol', family: 'gpt-5' },
+  { label: 'GPT-5.6 Terra', value: 'gpt-5.6-terra', family: 'gpt-5' },
+  { label: 'GPT-5.6 Luna', value: 'gpt-5.6-luna', family: 'gpt-5' },
+  { label: 'GPT-5.4', value: 'gpt-5.4', family: 'gpt-5' },
+];
+
+export const midsceneModelOptions: MidsceneModelOption[] = [
+  ...codexMidsceneModelOptions,
+  { label: 'Doubao Seed 2.1 Pro 260628', value: 'doubao-seed-2-1-pro-260628', family: 'doubao-seed' },
+  { label: 'Doubao Seed 2.1 Turbo', value: 'doubao-seed-2.1-turbo', family: 'doubao-seed' },
+  { label: 'Doubao Seed 2.0 Lite', value: 'doubao-seed-2.0-lite', family: 'doubao-seed' },
+  { label: 'Doubao Seed 1.6 Vision', value: 'doubao-seed-1.6-vision', family: 'doubao-seed' },
+  { label: 'Doubao Seed 1.8', value: 'doubao-seed-1.8', family: 'doubao-seed' },
+  { label: 'Qwen 3.7 Plus', value: 'qwen3.7-plus', family: 'qwen3' },
+  { label: 'Qwen 3.5 Plus', value: 'qwen3.5-plus', family: 'qwen3' },
+  { label: 'Qwen 3.6 Plus', value: 'qwen3.6-plus', family: 'qwen3' },
+  { label: 'Qwen 3 VL Plus', value: 'qwen3-vl-plus', family: 'qwen3-vl' },
+  { label: 'Qwen VL Max Latest', value: 'qwen-vl-max-latest', family: 'qwen2.5-vl' },
+  { label: 'Gemini 3.5 Flash', value: 'gemini-3.5-flash', family: 'gemini' },
+  { label: 'Gemini 3 Flash Preview', value: 'gemini-3-flash-preview', family: 'gemini' },
+  { label: 'Kimi K3', value: 'kimi-k3', family: 'kimi3' },
+  { label: 'Kimi K2.5', value: 'kimi-k2.5', family: 'kimi' },
+  { label: 'Kimi K2.6', value: 'kimi-k2.6', family: 'kimi' },
+  { label: 'MiMo V2.5', value: 'mimo-v2.5', family: 'xiaomi-mimo' },
+  { label: 'GLM 5V Turbo', value: 'glm-5v-turbo', family: 'glm-v' },
+  { label: 'GLM 4.6V', value: 'glm-4.6v', family: 'glm-v' },
+];
+
+export const midsceneModelFamilyOptions = Array.from(
+  new Set(midsceneModelOptions.map((option) => option.family)),
+).map((family) => ({ label: family, value: family }));
+
+export const midsceneModelPresets: MidsceneModelPreset[] = [
+  {
+    key: 'gpt',
+    label: 'GPT',
+    baseUrl: 'https://api.openai.com/v1',
+    modelName: 'gpt-5.5',
+    modelFamily: 'gpt-5',
+  },
+  {
+    key: 'doubao',
+    label: 'Doubao',
+    baseUrl: 'https://ark.cn-beijing.volces.com/api/v3',
+    modelName: 'doubao-seed-2-1-pro-260628',
+    modelFamily: 'doubao-seed',
+  },
+];