<!-- SPEC: PJ2026-010405 云端控制台 / Performance. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<script setup lang="ts">
import DataGrid from "@/components/common/DataGrid.vue";
import type { DataGridColumn } from "@/components/common/DataGrid.vue";
import SectionFrame from "@/components/layout/SectionFrame.vue";
import type { WebPerformanceRow } from "@/types";
defineProps<{ rows: WebPerformanceRow[] }>();
const columns: DataGridColumn[] = [{ key: "metric", label: "指标" }, { key: "route", label: "路由与维度" }, { key: "count", label: "样本", align: "right" }, { key: "p50", label: "P50", align: "right" }, { key: "p75", label: "P75", align: "right" }, { key: "p95", label: "P95", align: "right" }, { key: "tone", label: "健康状态" }];
function rowKey(row: WebPerformanceRow): string { return `${row.kind ?? "kind"}:${row.metric ?? "metric"}:${row.route ?? "route"}:${row.method ?? "method"}:${row.statusClass ?? "status"}:${row.backend ?? "backend"}:${row.transport ?? "transport"}:${row.eventType ?? "event"}:${row.phase ?? "phase"}`; }
function label(value: unknown): string { return String(value ?? "-").replace(/:sessionId/gu, ":会话").replace(/:traceId/gu, ":轨迹").replace(/:runId/gu, ":运行"); }
function count(value: unknown): string { const number = Number(value ?? 0); return Number.isFinite(number) ? new Intl.NumberFormat("zh-CN").format(number) : "0"; }
function value(row: WebPerformanceRow, key: "p50" | "p75" | "p95"): string { const number = Number(row[key]); if (!Number.isFinite(number)) return "-"; return row.unit === "seconds" ? `${number.toFixed(number < 1 ? 3 : 2)}s` : String(number); }
</script>

<template>
  <SectionFrame title="性能明细" description="来自同一 summary 的可访问表格 drill-down。" :body-padding="false">
    <DataGrid :columns="columns" :rows="rows" :row-key="rowKey" :interactive="false" density="compact" empty-text="暂无性能样本。请先打开工作台或执行一次真实页面操作后刷新。">
      <template #cell-metric="{ row }"><strong>{{ label((row as WebPerformanceRow).metric || (row as WebPerformanceRow).kind) }}</strong><small>{{ label((row as WebPerformanceRow).kind) }}</small></template>
      <template #cell-route="{ row }"><code>{{ label((row as WebPerformanceRow).route) }}</code><small>{{ label((row as WebPerformanceRow).method || (row as WebPerformanceRow).sourceFamily) }}</small></template>
      <template #cell-count="{ row }">{{ count((row as WebPerformanceRow).count) }}</template><template #cell-p50="{ row }">{{ value(row as WebPerformanceRow, 'p50') }}</template><template #cell-p75="{ row }">{{ value(row as WebPerformanceRow, 'p75') }}</template><template #cell-p95="{ row }"><strong>{{ value(row as WebPerformanceRow, 'p95') }}</strong></template>
      <template #cell-tone="{ row }"><span class="status-pill" :data-status="(row as WebPerformanceRow).tone || 'pending'">{{ (row as WebPerformanceRow).problem || (row as WebPerformanceRow).freshness || (row as WebPerformanceRow).tone || 'waiting' }}</span></template>
    </DataGrid>
  </SectionFrame>
</template>
