android-midscene-automation 0.1.43 → 0.2.2

package/src/analytics/summary.ts

@@ -0,0 +1,75 @@
+export type TestStatus = 'passed' | 'failed' | 'stopped' | 'running';
+export type TestRun = { scriptId: string; scriptName: string; startedAt: string; durationMs: number | null; status: TestStatus };
+export type ScriptInfo = { id: string; name: string };
+export type AnalysisRow = {
+  id: string; name: string; archived: boolean;
+  runs: number; passed: number; failed: number; stopped: number; running: number;
+  passRate: number | null; averageDurationMs: number | null;
+  lastRunAt: string; lastStatus: TestStatus | null;
+};
+export type TrendPoint = { date: string; runs: number };
+export type AnalysisSummary = {
+  scripts: number; testedScripts: number; runs: number; passed: number; failed: number; stopped: number; running: number;
+  passRate: number | null; rows: AnalysisRow[]; daily: TrendPoint[]; monthly: TrendPoint[];
+};
+export type AnalysisResponse = { generatedAt: string; days: number; midscene: AnalysisSummary; appium: AnalysisSummary };
+
+// Stopped/running executions do not count as completed tests. Missing history is never a pass.
+export function summarizeTests(scripts: ScriptInfo[], runs: TestRun[], since = 0, now = Date.now()): AnalysisSummary {
+  const dateKey = (value: Date) => `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}-${String(value.getDate()).padStart(2, '0')}`;
+  const daily = new Map<string, number>();
+  const monthly = new Map<string, number>();
+  // Bound the all-time chart while retaining all historical records in the totals/tables.
+  const firstDay = since ? new Date(since) : new Date(now);
+  if (!since) firstDay.setDate(firstDay.getDate() - 29);
+  firstDay.setHours(0, 0, 0, 0);
+  for (const cursor = new Date(firstDay); cursor.getTime() <= now; cursor.setDate(cursor.getDate() + 1)) daily.set(dateKey(cursor), 0);
+  const firstMonth = since ? new Date(since) : new Date(now);
+  firstMonth.setDate(1);
+  firstMonth.setHours(0, 0, 0, 0);
+  if (!since) firstMonth.setMonth(firstMonth.getMonth() - 11);
+  for (const cursor = new Date(firstMonth); cursor.getTime() <= now; cursor.setMonth(cursor.getMonth() + 1)) monthly.set(dateKey(cursor).slice(0, 7), 0);
+  const rows = new Map<string, AnalysisRow>();
+  const durations = new Map<string, { total: number; count: number }>();
+  const makeRow = (id: string, name: string, archived = false): AnalysisRow => ({
+    id, name, archived, runs: 0, passed: 0, failed: 0, stopped: 0, running: 0,
+    passRate: null, averageDurationMs: null, lastRunAt: '', lastStatus: null,
+  });
+  for (const script of scripts) rows.set(script.id, makeRow(script.id, script.name));
+  for (const run of runs) {
+    const time = Date.parse(run.startedAt);
+    if (since && (!Number.isFinite(time) || time < since)) continue;
+    if (Number.isFinite(time)) {
+      const day = dateKey(new Date(time));
+      const month = day.slice(0, 7);
+      if (daily.has(day)) daily.set(day, daily.get(day)! + 1);
+      if (monthly.has(month)) monthly.set(month, monthly.get(month)! + 1);
+    }
+    const row = rows.get(run.scriptId) ?? makeRow(run.scriptId, run.scriptName || '未命名脚本', true);
+    row.runs++;
+    row[run.status]++;
+    if (!row.lastRunAt || time >= Date.parse(row.lastRunAt)) {
+      row.lastRunAt = run.startedAt;
+      row.lastStatus = run.status;
+    }
+    if ((run.status === 'passed' || run.status === 'failed') && run.durationMs !== null && Number.isFinite(run.durationMs) && run.durationMs >= 0) {
+      const duration = durations.get(row.id) ?? { total: 0, count: 0 };
+      duration.total += run.durationMs;
+      duration.count++;
+      durations.set(row.id, duration);
+    }
+    rows.set(row.id, row);
+  }
+  const result: AnalysisSummary = { scripts: scripts.length, testedScripts: 0, runs: 0, passed: 0, failed: 0, stopped: 0, running: 0, passRate: null, rows: [], daily: [...daily].map(([date, runs]) => ({ date, runs })), monthly: [...monthly].map(([date, runs]) => ({ date, runs })) };
+  for (const row of rows.values()) {
+    row.passRate = row.passed + row.failed ? row.passed / (row.passed + row.failed) : null;
+    const duration = durations.get(row.id);
+    row.averageDurationMs = duration ? duration.total / duration.count : null;
+    if (!row.archived && row.runs) result.testedScripts++;
+    for (const key of ['runs', 'passed', 'failed', 'stopped', 'running'] as const) result[key] += row[key];
+    result.rows.push(row);
+  }
+  result.passRate = result.passed + result.failed ? result.passed / (result.passed + result.failed) : null;
+  result.rows.sort((a, b) => b.lastRunAt.localeCompare(a.lastRunAt) || a.name.localeCompare(b.name));
+  return result;
+}

package/src/api.ts

@@ -2,6 +2,7 @@ import type { ScriptStep } from './script-generator';
 import type { MidsceneModelProvider } from './config/midscene-model-presets';
 import type {
   AndroidDevice,
+  AppiumVersionInfo,
   AppPreset,
   ConfigForm,
   DeviceLock,
@@ -42,6 +43,11 @@ async function postJson<T>(url: string, body?: unknown, options: { signal?: Abor
   return readJson<T>(response);
 }
 
+export async function getAppiumVersion() {
+  const response = await fetch(`${APP_BASE}/api/appium-version`, { signal: AbortSignal.timeout(8000) });
+  return readJson<AppiumVersionInfo>(response);
+}
+
 // 读取已保存的脚本列表，自动化测试页面左侧脚本列表使用。
 export async function getScripts() {
   const response = await fetch(`${APP_BASE}/api/scripts`);
@@ -302,3 +308,8 @@ export async function runScript(
     onEvent(JSON.parse(buffer) as RunScriptStreamEvent);
   }
 }
+
+export async function getTestAnalytics(days = 0) {
+  const response = await fetch(`${APP_BASE}/api/analytics?days=${days}`, { signal: AbortSignal.timeout(15000) });
+  return readJson<import('./analytics/summary').AnalysisResponse>(response);
+}

package/src/appium-recorder/AppiumPage.vue

@@ -239,7 +239,7 @@ function onVariablesSaved(id: string, variables: TestVariable[]) {
 }
 
 function warnBeforeUnload(event: BeforeUnloadEvent) {
-  if (!props.active || !hasUnsavedChanges.value) return;
+  if (!hasUnsavedChanges.value) return;
   event.preventDefault();
   event.returnValue = '';
 }
@@ -2232,6 +2232,7 @@ watch(
 
 <template>
   <section class="appium-recorder-page">
+    <Teleport to="#appium-header-actions">
     <div v-if="active" class="appium-header-actions">
       <el-select
         v-model="selectedScriptId"
@@ -2281,6 +2282,8 @@ watch(
       </el-button>
     </div>
 
+    </Teleport>
+
     <RecorderWorkspace ref="workspaceRef">
       <template #preview>
       <DevicePreviewPanel

package/src/appium-recorder/ai-recognition.ts

@@ -1,6 +1,7 @@
 import type { AiDeduplicationConfig } from './ai-deduplication';
 
 export type AiRecognitionModel = { baseUrl: string; apiKey: string; name: string };
+export type AiInvalidResultBranch = 'yes' | 'no';
 export type AiObservationConfig = { durationMs: number; intervalMs: number; mode?: 'batch' | 'untilMatch' };
 export type AiObservationFrame = { elapsedMs: number; imageDataUrl: string };
 export type AiRecognitionResult = {
@@ -21,6 +22,12 @@ export function validateAiObservation(value: unknown): AiObservationConfig | und
   return { durationMs, intervalMs, ...(mode ? { mode } : {}) };
 }
 
+export function validateAiInvalidResultBranch(value: unknown): AiInvalidResultBranch | undefined {
+  if (value === undefined || value === null || value === '') return undefined;
+  if (value !== 'yes' && value !== 'no') throw new Error('AI 无有效结果兜底分支无效');
+  return value;
+}
+
 // 未保存此字段的是旧版判断节点，保留已有分支；新节点显式保存 false。
 export function isAiBranchEnabled(step: { aiBranchEnabled?: boolean }) {
   return step.aiBranchEnabled !== false;

package/src/appium-recorder/components/AiRecognitionSettings.vue

@@ -3,6 +3,7 @@ import { computed, inject, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
 import { Loading, QuestionFilled } from '@element-plus/icons-vue';
 import { isAiBranchEnabled, validateAiRecognitionPrompt, DEFAULT_AI_OBSERVATION, validateAiObservation, type AiObservationConfig } from '../ai-recognition';
 import { optimizeAppiumPrompt, validateAiBranchQuestion } from '../api';
+import { flowBranchLabel } from '../flow-labels';
 import type { AppiumRecordedStep } from '../types';
 import { aiPromptPresetsKey, DEFAULT_AI_PROMPT_PRESETS } from '../ai-prompt-presets';
 import AiRecognitionPromptInput from './AiRecognitionPromptInput.vue';
@@ -17,7 +18,9 @@ const error = ref('');
 const branch = computed(() => isAiBranchEnabled(props.step));
 const untilMatch = computed(() => props.step.aiObservation?.mode === 'untilMatch');
 const branchChoice = ref(branch.value);
+const fallbackEnabled = shallowRef(Boolean(props.step.aiInvalidResultBranch));
 watch(branch, value => { branchChoice.value = value; });
+watch(() => props.step.aiInvalidResultBranch, value => { fallbackEnabled.value = Boolean(value); });
 let controller: AbortController | undefined;
 let optimizeController: AbortController | undefined;
 watch(() => props.step.value, value => { prompt.value = value || ''; });
@@ -37,6 +40,12 @@ async function toggleBranch(enabled: boolean) {
   branchChoice.value = branch.value;
 }
 
+function toggleFallback(enabled: boolean) {
+  fallbackEnabled.value = enabled;
+  error.value = '';
+  if (!enabled) emit('update', { aiInvalidResultBranch: undefined });
+}
+
 async function optimizePrompt() {
   if (busy.value || optimizingPrompt.value || props.disabled) return;
   error.value = '';
@@ -148,6 +157,24 @@ async function save(enabled: boolean, observation?: AiObservationConfig) {
       正在验证…
     </span>
   </el-form-item>
+  <el-form-item v-if="branch">
+    <el-checkbox :model-value="fallbackEnabled" :disabled="disabled || busy" @update:model-value="toggleFallback($event === true)">启用兜底</el-checkbox>
+    <el-tooltip placement="top" :show-after="200">
+      <template #content><div class="recognition-help-content">仅在模型返回空内容、无效格式、无法判断或没有返回 true/false 时生效。正常返回布尔结果时仍按识别结果进入分支；请求失败和超时不使用此兜底。</div></template>
+      <el-button class="recognition-help" text :icon="QuestionFilled" aria-label="AI 识别兜底说明" @click.prevent />
+    </el-tooltip>
+  </el-form-item>
+  <el-form-item v-if="branch && fallbackEnabled" label="兜底分支">
+    <el-select
+      :model-value="step.aiInvalidResultBranch || ''"
+      :disabled="disabled || busy"
+      placeholder="请选择左右分支"
+      @update:model-value="emit('update', { aiInvalidResultBranch: $event })"
+    >
+      <el-option :label="`进入左侧分支（${flowBranchLabel(step, 'yes')}）`" value="yes" />
+      <el-option :label="`进入右侧分支（${flowBranchLabel(step, 'no')}）`" value="no" />
+    </el-select>
+  </el-form-item>
   <el-alert v-if="error" :title="error" type="warning" :closable="false" show-icon />
 </template>
 

package/src/appium-recorder/flow-labels.ts

@@ -85,7 +85,7 @@ export function flowStepMeta(step: AppiumRecordedStep) {
   if (step.type === 'breakLoop') return step.breakLoopTargetId ? '退出指定循环，继续循环结束后的流程' : '退出当前循环，继续循环结束后的流程';
   if (step.type === 'continueLoop') return step.continueLoopTargetId ? '结束本轮，进入指定循环的下一轮' : '结束本轮，进入当前循环的下一轮';
   if (step.type === 'log') return `${step.logPrefix ?? DEFAULT_LOG_PREFIX}:${step.value || ''}`;
-  if (step.type === 'aiRecognition') return `AI ${step.aiObservation?.mode === 'untilMatch' ? '命中即结束' : step.aiObservation ? '持续观察' : '识别'} · ${step.value || '未填写识别内容'}`;
+  if (step.type === 'aiRecognition') return `AI ${step.aiObservation?.mode === 'untilMatch' ? '命中即结束' : step.aiObservation ? '持续观察' : '识别'} · ${step.value || '未填写识别内容'}${step.aiInvalidResultBranch ? ` · 无有效结果→${step.aiInvalidResultBranch === 'yes' ? 'true' : 'false'}` : ''}`;
   if (step.type === 'longPress') {
     const target = longPressMode(step) === 'element'
       ? `元素 ${step.selector?.strategy || ''} ${step.selector?.value || ''}`

package/src/appium-recorder/types.ts

@@ -1,4 +1,4 @@
-import type { AiObservationConfig } from './ai-recognition';
+import type { AiInvalidResultBranch, AiObservationConfig } from './ai-recognition';
 import type { TestVariable, VariableExtraction, ScriptReturn } from './variables';
 import type { ImageCheckConfig } from './image-check';
 
@@ -125,6 +125,7 @@ export type AppiumRecordedStep = {
   timeoutMs?: number;
   aiTimeoutEnabled?: boolean;
   aiBranchEnabled?: boolean;
+  aiInvalidResultBranch?: AiInvalidResultBranch;
   aiObservation?: AiObservationConfig;
   timeoutBranch?: 'stop' | 'yes' | 'no';
   longPressMode?: 'element' | 'coordinates';

package/src/components/AppSidebar.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { DataAnalysis, Grid, Monitor, Operation, InfoFilled, Setting } from '@element-plus/icons-vue';
+import type { MenuKey } from '../types';
+
+defineProps<{ activeMenu: MenuKey; collapsed: boolean }>();
+defineEmits<{ select: [key: string] }>();
+</script>
+
+<template>
+  <aside class="layout-sidebar" aria-label="主导航">
+    <div class="layout-sidebar__top">
+      <div class="layout-sidebar__logo" aria-hidden="true">M</div>
+      <span v-if="!collapsed" class="layout-sidebar__brand">Midscene <span>Admin</span></span>
+    </div>
+    <el-menu :default-active="activeMenu" :default-openeds="['overview', 'midscene']" :collapse="collapsed"
+      :collapse-transition="false" class="layout-menu" @select="$emit('select', $event)">
+      <el-sub-menu index="overview" aria-label="概览">
+        <template #title><el-icon><Grid /></el-icon><span>概览</span></template>
+        <el-menu-item index="analysis" aria-label="分析页"><el-icon><DataAnalysis /></el-icon><template #title>分析页</template></el-menu-item>
+      </el-sub-menu>
+      <el-sub-menu index="midscene" aria-label="Midscene">
+        <template #title><el-icon><Operation /></el-icon><span>Midscene</span></template>
+        <el-menu-item index="generator" aria-label="测试脚本生成"><el-icon><Operation /></el-icon><template #title>测试脚本生成</template></el-menu-item>
+        <el-menu-item index="automation" aria-label="自动化测试"><el-icon><Monitor /></el-icon><template #title>自动化测试</template></el-menu-item>
+      </el-sub-menu>
+      <el-menu-item index="appium" aria-label="Appium"><el-icon><Monitor /></el-icon><template #title>Appium</template></el-menu-item>
+      <el-menu-item index="config" aria-label="参数配置"><el-icon><Setting /></el-icon><template #title>参数配置</template></el-menu-item>
+      <el-menu-item index="about" aria-label="关于"><el-icon><InfoFilled /></el-icon><template #title>关于</template></el-menu-item>
+    </el-menu>
+  </aside>
+</template>

package/src/components/analytics/AnalysisCharts.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { Collection, VideoPlay, CircleCheck, Warning } from '@element-plus/icons-vue';
+import type { AnalysisResponse } from '../../analytics/summary';
+
+const props = defineProps<{ data: AnalysisResponse }>();
+const mode = ref<'daily' | 'monthly'>('daily');
+const shown = ref({ midscene: true, appium: true });
+const selectedPoint = ref<number | null>(null);
+const engineColors = { midscene: '#4ea9ee', appium: '#13b8a6' };
+const total = computed(() => {
+  const { midscene: m, appium: a } = props.data;
+  return { scripts: m.scripts + a.scripts, runs: m.runs + a.runs, passed: m.passed + a.passed, failed: m.failed + a.failed, stopped: m.stopped + a.stopped, running: m.running + a.running };
+});
+const passRate = computed(() => total.value.passed + total.value.failed ? `${(100 * total.value.passed / (total.value.passed + total.value.failed)).toFixed(1)}%` : '—');
+const cards = computed(() => [
+  { name: '测试脚本', value: total.value.scripts, note: `Midscene ${props.data.midscene.scripts} · Appium ${props.data.appium.scripts}`, icon: Collection, color: '#006be6' },
+  { name: '执行次数', value: total.value.runs, note: `Midscene ${props.data.midscene.runs} · Appium ${props.data.appium.runs}`, icon: VideoPlay, color: '#13b8a6' },
+  { name: '测试通过率', value: passRate.value, note: `通过 ${total.value.passed} 次 / 完成 ${total.value.passed + total.value.failed} 次`, icon: CircleCheck, color: '#67b92e' },
+  { name: '失败次数', value: total.value.failed, note: `已停止 ${total.value.stopped} 次 · 运行中 ${total.value.running} 次`, icon: Warning, color: '#ed6a5e' },
+]);
+const points = computed(() => {
+  const appium = new Map(props.data.appium[mode.value].map(point => [point.date, point.runs]));
+  return props.data.midscene[mode.value].map(point => ({ date: point.date, midscene: point.runs, appium: appium.get(point.date) || 0 }));
+});
+const chartDescription = computed(() => props.data.days ? `所选最近 ${props.data.days} 天，按${mode.value === 'daily' ? '日' : '月'}汇总` : mode.value === 'daily' ? '最近 30 天，按日汇总' : '最近 12 个月，按月汇总');
+const maxY = computed(() => Math.max(4, Math.ceil(Math.max(0, ...points.value.flatMap(point => [shown.value.midscene ? point.midscene : 0, shown.value.appium ? point.appium : 0])) / 4) * 4));
+const x = (index: number) => 52 + index * 920 / Math.max(1, points.value.length - 1);
+const y = (value: number) => 242 - value / maxY.value * 210;
+function line(engine: 'midscene' | 'appium') {
+  return points.value.map((point, index) => index === 0 ? `M ${x(index)} ${y(point[engine])}` : `C ${(x(index - 1) + x(index)) / 2} ${y(points.value[index - 1][engine])}, ${(x(index - 1) + x(index)) / 2} ${y(point[engine])}, ${x(index)} ${y(point[engine])}`).join(' ');
+}
+const labelIndices = computed(() => points.value.map((_, i) => i).filter(i => i % Math.max(1, Math.ceil((points.value.length - 1) / 10)) === 0 || i === points.value.length - 1));
+const selected = computed(() => selectedPoint.value === null ? null : points.value[selectedPoint.value]);
+watch(points, () => { selectedPoint.value = null; });
+function navigatePoint(event: KeyboardEvent) {
+  if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+  event.preventDefault();
+  selectedPoint.value = event.key === 'Home' ? 0 : event.key === 'End' ? points.value.length - 1 : Math.max(0, Math.min(points.value.length - 1, (selectedPoint.value ?? -1) + (event.key === 'ArrowRight' ? 1 : -1)));
+}
+const distributions = computed(() => [
+  { title: '引擎执行占比', center: '总执行次数', entries: [
+    { name: 'Midscene', value: props.data.midscene.runs, color: engineColors.midscene },
+    { name: 'Appium', value: props.data.appium.runs, color: engineColors.appium },
+  ] },
+  { title: '测试结果分布', center: '总执行次数', entries: [
+    { name: '通过', value: total.value.passed, color: '#13b8a6' },
+    { name: '失败', value: total.value.failed, color: '#ed6a5e' },
+    { name: '已停止', value: total.value.stopped, color: '#a3a8b3' },
+    { name: '运行中', value: total.value.running, color: '#f0b44b' },
+  ] },
+]);
+const failures = computed(() => [
+  ...props.data.midscene.rows.map(row => ({ ...row, engine: 'Midscene' })),
+  ...props.data.appium.rows.map(row => ({ ...row, engine: 'Appium' })),
+].filter(row => row.failed > 0).sort((a, b) => b.failed - a.failed).slice(0, 5));
+function ringStyle(entries: { value: number; color: string }[]) {
+  if (!total.value.runs) return { background: 'var(--ui-bg)' };
+  let angle = 0;
+  return { background: `conic-gradient(${entries.map(entry => {
+    const start = angle;
+    angle += entry.value / total.value.runs * 360;
+    return `${entry.color} ${start}deg ${angle}deg`;
+  }).join(', ')})` };
+}
+</script>
+
+<template>
+  <section class="analysis-charts" aria-label="测试数据图表">
+    <div class="analysis-metrics">
+      <article v-for="card in cards" :key="card.name" class="analysis-chart-card metric-card">
+        <h2>{{ card.name }}</h2>
+        <div class="metric-card__value"><strong>{{ card.value }}</strong><el-icon :style="{ color: card.color, backgroundColor: `${card.color}16` }"><component :is="card.icon" /></el-icon></div>
+        <p>{{ card.note }}</p>
+      </article>
+    </div>
+
+    <section class="analysis-chart-card trend-card" aria-label="测试执行趋势">
+      <div class="chart-heading">
+        <div class="trend-tabs" role="group" aria-label="趋势图时间粒度">
+          <button :class="{ active: mode === 'daily' }" :aria-pressed="mode === 'daily'" @click="mode = 'daily'">执行趋势</button>
+          <button :class="{ active: mode === 'monthly' }" :aria-pressed="mode === 'monthly'" @click="mode = 'monthly'">月执行量</button>
+        </div>
+        <div class="trend-legend">
+          <button v-for="engine in (['midscene', 'appium'] as const)" :key="engine" :aria-pressed="shown[engine]" :class="{ muted: !shown[engine] }" @click="shown[engine] = !shown[engine]">
+            <i :style="{ background: engineColors[engine] }" />{{ engine === 'midscene' ? 'Midscene' : 'Appium' }}
+          </button>
+        </div>
+      </div>
+      <div class="chart-caption"><span>{{ chartDescription }} · 执行次数</span><span role="status">{{ selected ? `${selected.date} · Midscene ${selected.midscene} 次 · Appium ${selected.appium} 次` : '悬停查看数据，聚焦图表后可用左右方向键切换' }}</span></div>
+      <div class="trend-chart-scroll">
+        <svg class="trend-chart" viewBox="0 0 1000 284" role="img" aria-label="Midscene 与 Appium 执行趋势，左右方向键查看日期数据" tabindex="0" @keydown="navigatePoint">
+          <defs>
+            <linearGradient id="midscene-trend-fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4ea9ee" stop-opacity=".45" /><stop offset="100%" stop-color="#4ea9ee" stop-opacity=".05" /></linearGradient>
+            <linearGradient id="appium-trend-fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#13b8a6" stop-opacity=".4" /><stop offset="100%" stop-color="#13b8a6" stop-opacity=".05" /></linearGradient>
+          </defs>
+          <g v-for="tick in [0, 1, 2, 3, 4]" :key="tick">
+            <rect v-if="tick < 4 && tick % 2 === 0" x="52" :y="y((tick + 1) * maxY / 4)" width="920" height="52.5" fill="var(--ui-bg-soft)" />
+            <line x1="52" x2="972" :y1="y(tick * maxY / 4)" :y2="y(tick * maxY / 4)" stroke="var(--ui-border)" />
+            <text x="42" :y="y(tick * maxY / 4) + 4" text-anchor="end">{{ tick * maxY / 4 }}</text>
+          </g>
+          <g v-for="index in labelIndices" :key="index">
+            <line :x1="x(index)" :x2="x(index)" y1="32" y2="242" stroke="var(--ui-border)" stroke-dasharray="3 4" />
+            <text :x="x(index)" y="267" text-anchor="middle">{{ points[index].date.slice(mode === 'daily' ? 5 : 2) }}</text>
+          </g>
+          <template v-for="engine in (['midscene', 'appium'] as const)" :key="engine">
+            <g v-if="shown[engine] && points.length">
+              <path :d="`${line(engine)} L ${x(points.length - 1)} 242 L 52 242 Z`" :fill="`url(#${engine}-trend-fill)`" />
+              <path :d="line(engine)" fill="none" :stroke="engineColors[engine]" stroke-width="2.5" />
+              <circle v-for="(point, index) in points" :key="point.date" :cx="x(index)" :cy="y(point[engine])" :r="selectedPoint === index ? 4 : 2.5" fill="white" :stroke="engineColors[engine]" stroke-width="1.5" />
+            </g>
+          </template>
+          <line v-if="selectedPoint !== null" :x1="x(selectedPoint)" :x2="x(selectedPoint)" y1="32" y2="242" stroke="var(--ui-text-muted)" stroke-dasharray="4 4" />
+          <rect v-for="(point, index) in points" :key="point.date" :x="Math.max(40, x(index) - 460 / Math.max(1, points.length - 1))" y="24" :width="920 / Math.max(1, points.length - 1)" height="224" fill="transparent" @mouseenter="selectedPoint = index">
+            <title>{{ point.date }}：Midscene {{ point.midscene }} 次，Appium {{ point.appium }} 次</title>
+          </rect>
+          <text v-if="!points.some(point => point.midscene || point.appium)" x="512" y="126" text-anchor="middle">此时间范围暂无执行记录</text>
+        </svg>
+      </div>
+    </section>
+
+    <div class="analysis-distributions">
+      <section v-for="chart in distributions" :key="chart.title" class="analysis-chart-card distribution-card" :aria-label="chart.title">
+        <h2>{{ chart.title }}</h2>
+        <div class="distribution-card__body">
+          <div class="donut" :style="ringStyle(chart.entries)" role="img" :aria-label="chart.entries.map(entry => `${entry.name} ${entry.value} 次`).join('，')">
+            <div class="donut__center"><strong>{{ total.runs }}</strong><span>{{ total.runs ? chart.center : '暂无记录' }}</span></div>
+          </div>
+          <ul class="distribution-legend"><li v-for="entry in chart.entries" :key="entry.name"><span><i :style="{ background: entry.color }" />{{ entry.name }}</span><strong>{{ entry.value }}</strong><small>{{ total.runs ? `${(entry.value / total.runs * 100).toFixed(1)}%` : '—' }}</small></li></ul>
+        </div>
+      </section>
+      <section class="analysis-chart-card failures-card" aria-label="失败次数排行">
+        <h2>失败次数排行 <small>TOP 5</small></h2>
+        <div v-if="!failures.length" class="chart-empty">所选范围暂无失败记录</div>
+        <ol v-else class="failure-bars"><li v-for="(row, index) in failures" :key="`${row.engine}-${row.id}`">
+          <div><span :title="row.name">{{ index + 1 }}. {{ row.name }}</span><strong>{{ row.failed }} 次</strong></div>
+          <div class="failure-bars__track"><span :style="{ width: `${row.failed / failures[0].failed * 100}%` }" /></div>
+          <small>{{ row.engine }}</small>
+        </li></ol>
+      </section>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.analysis-charts { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
+.analysis-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
+.analysis-chart-card { padding: 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); min-width: 0; }
+h2 { margin: 0; font-size: 16px; font-weight: 600; }
+.metric-card__value { display: flex; justify-content: space-between; align-items: center; margin: 24px 0; }
+.metric-card__value > strong { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.metric-card__value .el-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 24px; }
+.metric-card p { margin: 0; color: var(--ui-text-secondary); font-size: 12px; }
+.chart-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.trend-tabs { display: flex; padding: 4px; border-radius: 6px; background: var(--ui-bg); }
+.trend-tabs button, .trend-legend button { cursor: pointer; border: 0; background: transparent; color: var(--ui-text-secondary); font-size: 13px; padding: 6px 12px; }
+.trend-tabs button.active { background: var(--ui-surface); color: var(--ui-text); border-radius: 4px; box-shadow: 0 1px 3px #00000012; }
+.trend-legend { display: flex; gap: 8px; }
+.trend-legend button { display: flex; align-items: center; gap: 8px; }
+.trend-legend .muted { opacity: .4; }
+i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
+.chart-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--ui-text-secondary); font-size: 12px; margin-top: 18px; min-height: 18px; }
+.trend-chart-scroll { overflow-x: auto; }
+.trend-chart { display: block; width: 100%; min-width: 600px; margin-top: 8px; }
+.trend-chart text { fill: var(--ui-text-secondary); font-size: 12px; }
+.trend-chart:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -2px; border-radius: 4px; }
+.analysis-distributions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
+.distribution-card__body { display: flex; align-items: center; flex-direction: column; gap: 22px; padding-top: 24px; }
+.donut { display: grid; place-items: center; width: 176px; aspect-ratio: 1; border-radius: 50%; }
+.donut__center { width: 124px; height: 124px; background: var(--ui-surface); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
+.donut__center strong { font-size: 27px; font-weight: 600; }
+.donut__center span { font-size: 12px; color: var(--ui-text-secondary); }
+.distribution-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; width: 100%; max-width: 260px; }
+.distribution-legend li { display: grid; grid-template-columns: 1fr 36px 54px; gap: 8px; align-items: center; font-size: 13px; }
+.distribution-legend li > span { display: flex; align-items: center; gap: 8px; }
+.distribution-legend strong, .distribution-legend small { text-align: right; font-variant-numeric: tabular-nums; }
+.distribution-legend small, .failure-bars small { color: var(--ui-text-secondary); }
+.failures-card h2 small { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--ui-text-muted); }
+.failure-bars { padding: 0; margin: 26px 0 0; list-style: none; display: grid; gap: 16px; }
+.failure-bars li > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
+.failure-bars li > div:first-child > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.failure-bars strong { font-size: 12px; white-space: nowrap; font-weight: 500; }
+.failure-bars__track { height: 6px; border-radius: 3px; background: var(--ui-bg); margin: 7px 0 3px; overflow: hidden; }
+.failure-bars__track > span { display: block; height: 100%; background: #4ea9ee; border-radius: inherit; }
+.failure-bars small { font-size: 11px; }
+.chart-empty { display: grid; place-items: center; min-height: 240px; color: var(--ui-text-muted); font-size: 13px; }
+@media (max-width: 1200px) { .analysis-metrics { gap: 12px; } .analysis-chart-card { padding: 18px; } .analysis-distributions { gap: 12px; } }
+@media (max-width: 1000px) { .analysis-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .analysis-distributions { grid-template-columns: 1fr; } .distribution-card__body { flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; } }
+</style>

package/src/components/analytics/ReportAnalysis.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { AnalysisSummary, AnalysisRow } from '../../analytics/summary';
+const props = defineProps<{ title: string; summary: AnalysisSummary }>();
+const search = ref('');
+const page = ref(1);
+const sort = ref<{ prop: keyof AnalysisRow; order: string | null }>({ prop: 'lastRunAt', order: 'descending' });
+const filteredRows = computed(() => {
+  const rows = props.summary.rows.filter(row => row.name.toLowerCase().includes(search.value.trim().toLowerCase()));
+  const { prop, order } = sort.value;
+  if (order) rows.sort((a, b) => {
+    const left = a[prop], right = b[prop];
+    if (left == null) return right == null ? 0 : 1;
+    if (right == null) return -1;
+    const value = typeof left === 'number' && typeof right === 'number' ? left - right : String(left).localeCompare(String(right));
+    return order === 'ascending' ? value : -value;
+  });
+  return rows;
+});
+const rows = computed(() => filteredRows.value.slice((page.value - 1) * 10, page.value * 10));
+watch([search, () => props.summary, sort], () => { page.value = 1; });
+const rate = (value: number | null) => value === null ? '—' : `${(value * 100).toFixed(1)}%`;
+const duration = (value: number | null) => value === null ? '—' : value < 1000 ? `${Math.round(value)} 毫秒` : `${(value / 1000).toFixed(1)} 秒`;
+const statusText = { passed: '通过', failed: '失败', stopped: '已停止', running: '运行中' };
+const statusType = { passed: 'success', failed: 'danger', stopped: 'info', running: 'warning' } as const;
+const date = (value: string) => value && Number.isFinite(Date.parse(value)) ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '—';
+</script>
+
+<template>
+  <section class="report-analysis" :aria-label="`${title} 测试报告分析`">
+    <div class="report-analysis__heading">
+      <div><h2>{{ title }} 测试报告</h2><p>现有脚本 {{ summary.scripts }} 个 · 其中 {{ summary.testedScripts }} 个在所选范围内有执行记录</p></div>
+      <el-input v-model="search" clearable placeholder="搜索脚本名称" :aria-label="`搜索 ${title} 脚本`" class="report-analysis__search" />
+    </div>
+    <div class="report-analysis__metrics">
+      <div><span>执行次数</span><strong>{{ summary.runs }}</strong></div>
+      <div><span>通过率</span><strong class="metric-primary">{{ rate(summary.passRate) }}</strong></div>
+      <div><span>通过 / 失败</span><strong><span class="metric-success">{{ summary.passed }}</span> / <span :class="{ 'metric-danger': summary.failed > 0 }">{{ summary.failed }}</span></strong></div>
+      <div><span>停止 / 运行中</span><strong>{{ summary.stopped }} / {{ summary.running }}</strong></div>
+    </div>
+    <el-table :data="rows" row-key="id" stripe :default-sort="{ prop: 'lastRunAt', order: 'descending' }"
+      :empty-text="search ? '没有匹配的脚本' : '暂无脚本或测试记录'" @sort-change="sort = $event">
+      <el-table-column prop="name" label="脚本名称" min-width="200" sortable="custom">
+        <template #default="{ row }"><span>{{ row.name }}</span><el-tag v-if="row.archived" size="small" type="info" class="report-analysis__historical">历史脚本</el-tag></template>
+      </el-table-column>
+      <el-table-column prop="runs" label="执行次数" width="110" sortable="custom" />
+      <el-table-column prop="passed" label="通过" width="85" sortable="custom" />
+      <el-table-column prop="failed" label="失败" width="85" sortable="custom" />
+      <el-table-column label="停止 / 运行中" width="120"><template #default="{ row }">{{ row.stopped }} / {{ row.running }}</template></el-table-column>
+      <el-table-column prop="passRate" label="通过率" width="105" sortable="custom"><template #default="{ row }">{{ rate(row.passRate) }}</template></el-table-column>
+      <el-table-column prop="averageDurationMs" label="平均耗时" width="125" sortable="custom"><template #default="{ row }">{{ duration(row.averageDurationMs) }}</template></el-table-column>
+      <el-table-column label="最近状态" width="105"><template #default="{ row }"><el-tag v-if="row.lastStatus" :type="statusType[row.lastStatus as keyof typeof statusType]" effect="light">{{ statusText[row.lastStatus as keyof typeof statusText] }}</el-tag><span v-else class="report-analysis__muted">未执行</span></template></el-table-column>
+      <el-table-column prop="lastRunAt" label="最近执行" min-width="180" sortable="custom"><template #default="{ row }">{{ date(row.lastRunAt) }}</template></el-table-column>
+    </el-table>
+    <el-pagination v-if="filteredRows.length > 10" v-model:current-page="page" :total="filteredRows.length" :page-size="10" layout="total, prev, pager, next" class="report-analysis__pagination" />
+  </section>
+</template>
+
+<style scoped>
+.report-analysis { padding: 20px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); min-width: 0; }
+.report-analysis__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+h2 { margin: 0; font-size: 17px; font-weight: 600; }
+p { margin: 8px 0 0; color: var(--ui-text-secondary); font-size: 12px; }
+.report-analysis__search { width: 220px; }
+.report-analysis__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 24px 0; }
+.report-analysis__metrics > div { border-right: 1px solid var(--ui-border); padding-left: 16px; }
+.report-analysis__metrics > div:first-child { padding-left: 0; }
+.report-analysis__metrics > div:last-child { border-right: 0; }
+.report-analysis__metrics > div > span { display: block; color: var(--ui-text-secondary); font-size: 13px; margin-bottom: 8px; }
+.report-analysis__metrics strong { font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.metric-primary { color: var(--ui-primary); }
+.metric-success { color: var(--ui-success); }
+.metric-danger { color: var(--ui-danger); }
+.report-analysis__historical { margin-left: 8px; }
+.report-analysis__muted { color: var(--ui-text-muted); }
+.report-analysis__pagination { margin-top: 16px; justify-content: flex-end; }
+@media (max-width: 800px) { .report-analysis__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .report-analysis__metrics > div { border-right: 0; padding-left: 0; } }
+</style>