feat(observability): delivery metrics, admin metrics/delivery endpoints, admin API route wiring

app/components/ConsolePage.vue

@@ -108,6 +108,13 @@
             <button class="tab" :class="{ active: view === 'audit' }" @click="switchView('audit')">
               {{ t("tab.audit") }}
             </button>
+            <button
+              class="tab"
+              :class="{ active: view === 'metrics' }"
+              @click="switchView('metrics')"
+            >
+              {{ t("tab.metrics") }}
+            </button>
           </nav>
 
           <template v-if="view === 'groups'">
@@ -210,6 +217,15 @@
               @update:selected-group-id="auditFilterGroup = $event"
             />
           </template>
+
+          <template v-else-if="view === 'metrics'">
+            <MetricsPanel
+              :metrics="metrics"
+              :loading="metricsLoading"
+              :error="metricsError"
+              @refresh="loadMetrics"
+            />
+          </template>
         </template>
       </template>
     </main>
@@ -247,10 +263,10 @@ const router = useRouter();
  * The console view mirrors the URL path so tabs are deep-linkable:
  * /admin (groups) · /admin/logs · /admin/audit. Unknown slugs 404.
  */
-const view = computed<"groups" | "logs" | "audit" | null>(() => {
+const view = computed<"groups" | "logs" | "audit" | "metrics" | null>(() => {
   const seg = route.path.split("/").filter(Boolean)[1];
   if (!seg) return "groups";
-  if (seg === "groups" || seg === "logs" || seg === "audit") return seg;
+  if (seg === "groups" || seg === "logs" || seg === "audit" || seg === "metrics") return seg;
   return null;
 });
 
@@ -265,6 +281,7 @@ const {
   error: auditError,
   load: loadAudit,
 } = useAuditApi();
+const { metrics, loading: metricsLoading, error: metricsError, load: loadMetrics } = useMetrics();
 const {
   groups,
   isSuper,
@@ -319,11 +336,12 @@ watch(
   view,
   (v) => {
     if (v === "audit") loadAudit(50, auditFilterGroup.value || undefined);
+    if (v === "metrics") loadMetrics();
   },
   { immediate: true },
 );
 
-function switchView(next: "groups" | "logs" | "audit"): void {
+function switchView(next: "groups" | "logs" | "audit" | "metrics"): void {
   const path = next === "groups" ? "/admin" : `/admin/${next}`;
   if (route.path !== path) router.replace(path);
 }

app/components/MetricsPanel.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { DeliveryMetrics } from "~/types";
+
+const { t } = useI18n();
+
+defineProps<{
+  metrics: DeliveryMetrics | null;
+  loading: boolean;
+  error: string;
+}>();
+
+const emit = defineEmits<{ refresh: [] }>();
+
+function pct(value: number): string {
+  return `${(value * 100).toFixed(1)}%`;
+}
+</script>
+
+<template>
+  <div class="log-toolbar">
+    <span class="kpi-label">{{ t("metrics.title") }}</span>
+    <button class="btn btn-ghost btn-sm" @click="emit('refresh')">
+      {{ t("metrics.refresh") }}
+    </button>
+  </div>
+
+  <p v-if="error" class="err">{{ error }}</p>
+  <template v-else-if="metrics">
+    <div class="log-list">
+      <article class="log-entry">
+        <div class="log-meta">
+          <span class="kpi-label">{{ t("metrics.total") }}: {{ metrics.total }}</span>
+          <span class="kpi-label">{{ t("metrics.ok") }}: {{ metrics.ok }}</span>
+          <span class="kpi-label">{{ t("metrics.failed") }}: {{ metrics.failed }}</span>
+          <span class="kpi-label"
+            >{{ t("metrics.failureRate") }}: {{ pct(metrics.failureRate) }}</span
+          >
+          <span class="kpi-label">
+            {{ t("metrics.avgDuration") }}: {{ metrics.avgDurationMs.toFixed(0) }}ms
+          </span>
+          <span class="kpi-label">
+            {{ t("metrics.avgAttempts") }}: {{ metrics.avgAttempts.toFixed(1) }}
+          </span>
+        </div>
+      </article>
+
+      <article v-if="metrics.byPlatform.length" class="log-entry">
+        <h3 class="log-head">{{ t("metrics.byPlatform") }}</h3>
+        <div v-for="p in metrics.byPlatform" :key="p.platform" class="log-meta">
+          <span class="kpi-label">{{ p.platform ?? "unknown" }}</span>
+          <span class="kpi-label">{{ t("metrics.ok") }}: {{ p.ok }}</span>
+          <span class="kpi-label">{{ t("metrics.failed") }}: {{ p.failed }}</span>
+        </div>
+      </article>
+
+      <article v-if="metrics.byEvent.length" class="log-entry">
+        <h3 class="log-head">{{ t("metrics.byEvent") }}</h3>
+        <div v-for="e in metrics.byEvent" :key="e.event" class="log-meta">
+          <span class="kpi-label">{{ e.event ?? "unknown" }}</span>
+          <span class="kpi-label">{{ t("metrics.ok") }}: {{ e.ok }}</span>
+          <span class="kpi-label">{{ t("metrics.failed") }}: {{ e.failed }}</span>
+        </div>
+      </article>
+
+      <article v-if="metrics.recentFailures.length" class="log-entry">
+        <h3 class="log-head">{{ t("metrics.recentFailures") }}</h3>
+        <div
+          v-for="f in metrics.recentFailures"
+          :key="f.id ?? `${f.ts}-${f.target}`"
+          class="log-entry"
+        >
+          <span class="log-route">{{ f.event }}</span>
+          <span class="log-meta">{{ f.target }}</span>
+          <span class="log-status ok" v-if="f.errorCode">{{ f.errorCode }}</span>
+        </div>
+      </article>
+    </div>
+  </template>
+  <p v-else-if="!loading" class="empty-log">{{ t("metrics.empty") }}</p>
+</template>

app/composables/useI18n.ts

@@ -17,6 +17,19 @@ const en: Dict = {
   "tab.groups": "Groups",
   "tab.logs": "Send Logs",
   "tab.audit": "Audit Log",
+  "tab.metrics": "Metrics",
+  "metrics.title": "Delivery Metrics",
+  "metrics.refresh": "Refresh",
+  "metrics.total": "Total",
+  "metrics.ok": "OK",
+  "metrics.failed": "Failed",
+  "metrics.failureRate": "Failure rate",
+  "metrics.avgDuration": "Avg duration",
+  "metrics.avgAttempts": "Avg attempts",
+  "metrics.byPlatform": "By platform",
+  "metrics.byEvent": "By event",
+  "metrics.recentFailures": "Recent failures",
+  "metrics.empty": "No delivery data yet",
   "status.loading": "loading",
   "status.connected": "connected",
   "kpi.groups": "GROUPS",
@@ -281,6 +294,19 @@ const zh: Dict = {
   "tab.groups": "分组",
   "tab.logs": "发送日志",
   "tab.audit": "审计日志",
+  "tab.metrics": "指标",
+  "metrics.title": "投递指标",
+  "metrics.refresh": "刷新",
+  "metrics.total": "总计",
+  "metrics.ok": "成功",
+  "metrics.failed": "失败",
+  "metrics.failureRate": "失败率",
+  "metrics.avgDuration": "平均耗时",
+  "metrics.avgAttempts": "平均尝试次数",
+  "metrics.byPlatform": "按平台",
+  "metrics.byEvent": "按事件",
+  "metrics.recentFailures": "最近失败",
+  "metrics.empty": "暂无投递数据",
   "status.loading": "加载中",
   "status.connected": "已连接",
   "kpi.groups": "分组",

app/composables/useMetrics.ts

@@ -0,0 +1,24 @@
+import type { DeliveryMetrics } from "~/types";
+
+export function useMetrics() {
+  const { needLogin } = useAuthState();
+  const metrics = ref<DeliveryMetrics | null>(null);
+  const loading = ref(false);
+  const error = ref("");
+
+  async function load(): Promise<void> {
+    loading.value = true;
+    error.value = "";
+    needLogin.value = false;
+    try {
+      const data = await apiFetch<{ metrics?: DeliveryMetrics }>("/admin/api/metrics");
+      metrics.value = data.metrics ?? null;
+    } catch (err) {
+      if (!needLogin.value) error.value = err instanceof Error ? err.message : String(err);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return { metrics, loading, error, load };
+}

app/pages/admin/[...slug].vue

@@ -0,0 +1,3 @@
+<template>
+  <ConsolePage />
+</template>

app/types.ts

@@ -189,3 +189,30 @@ export interface SendRecord {
   attempts?: number;
   detail?: Record<string, unknown>;
 }
+
+export interface MetricsBreakdown {
+  platform?: string;
+  event?: string;
+  total: number;
+  ok: number;
+  failed: number;
+}
+
+export interface MetricsStatus {
+  status: string;
+  count: number;
+}
+
+export interface DeliveryMetrics {
+  total: number;
+  ok: number;
+  failed: number;
+  failureRate: number;
+  byPlatform: MetricsBreakdown[];
+  byEvent: MetricsBreakdown[];
+  byStatus: MetricsStatus[];
+  avgDurationMs: number;
+  totalAttempts: number;
+  avgAttempts: number;
+  recentFailures: SendRecord[];
+}