feat(ops): 增加运行时性能看板

apps/web/app/admin/ops/page.tsx

@@ -0,0 +1,391 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  Activity,
+  AlertTriangle,
+  CheckCircle2,
+  Clock3,
+  Database,
+  Loader2,
+  RefreshCw,
+  ServerCog,
+} from 'lucide-react';
+import { RouteGuard } from '@/components/auth/Guard';
+import { api } from '@/lib/api';
+
+type JobStatus = 'queued' | 'running' | 'succeeded' | 'failed';
+
+interface OpsRuntimeSnapshot {
+  collectedAt: string;
+  thresholds: {
+    apiSlowRequestMs: number;
+    prismaSlowQueryMs: number;
+  };
+  database: {
+    ok: boolean;
+    error?: string;
+  };
+  slowRequests: Array<{
+    id: string;
+    method: string;
+    path: string;
+    durationMs: number;
+    thresholdMs: number;
+    occurredAt: string;
+  }>;
+  slowQueries: Array<{
+    id: string;
+    queryPreview: string;
+    durationMs: number;
+    thresholdMs: number;
+    occurredAt: string;
+  }>;
+  jobQueue: {
+    totals: Record<JobStatus, number> & { total: number };
+    byType: Array<Record<JobStatus, number> & {
+      type: string;
+      total: number;
+      oldestQueuedAt?: string;
+      nextLeaseExpiresAt?: string;
+    }>;
+    recentFailures: Array<{
+      id: string;
+      type: string;
+      attempts: number;
+      maxAttempts: number;
+      lastError: string;
+      updatedAt?: string;
+    }>;
+  };
+  dirtySummaryCount: number;
+  access: {
+    requiredPermission: string;
+    backendEnforced: boolean;
+    adapter: string;
+  };
+}
+
+const STATUS_LABEL: Record<JobStatus, string> = {
+  queued: '排队',
+  running: '运行',
+  succeeded: '成功',
+  failed: '失败',
+};
+
+export default function OpsPage() {
+  return (
+    <RouteGuard permission="ops:view">
+      <OpsPageContent />
+    </RouteGuard>
+  );
+}
+
+function OpsPageContent() {
+  const [snapshot, setSnapshot] = useState<OpsRuntimeSnapshot | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchSnapshot = async (initial = false) => {
+    if (initial) setLoading(true);
+    else setRefreshing(true);
+    try {
+      const next = await api.get<OpsRuntimeSnapshot>('/ops/runtime');
+      setSnapshot(next);
+      setError(null);
+    } catch (e: any) {
+      setError(e?.message || '读取失败');
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    void fetchSnapshot(true);
+    const timer = window.setInterval(() => { void fetchSnapshot(); }, 30_000);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col bg-[var(--bg)]">
+      <header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
+        <div className="flex items-center gap-2.5">
+          <Activity className="h-4 w-4 text-blue-600" strokeWidth={2} />
+          <h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">运维看板</h1>
+          {snapshot && (
+            <span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">
+              {formatClock(snapshot.collectedAt)}
+            </span>
+          )}
+        </div>
+        <button
+          onClick={() => fetchSnapshot()}
+          disabled={refreshing}
+          className="flex h-8 items-center gap-1.5 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] font-medium text-[var(--ink-soft)] transition-colors hover:bg-[var(--bg-subtle)] disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {refreshing ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5" />}
+          刷新
+        </button>
+      </header>
+
+      <main className="flex-1 overflow-y-auto px-5 py-4">
+        {loading ? (
+          <div className="flex h-full items-center justify-center text-[13px] text-[var(--ink-muted)]">
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            加载中
+          </div>
+        ) : error ? (
+          <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] text-red-700">{error}</div>
+        ) : snapshot ? (
+          <div className="space-y-4">
+            <OverviewStrip snapshot={snapshot} />
+            <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_420px]">
+              <div className="space-y-4">
+                <SlowRequestsPanel snapshot={snapshot} />
+                <SlowQueriesPanel snapshot={snapshot} />
+              </div>
+              <div className="space-y-4">
+                <JobQueuePanel snapshot={snapshot} />
+                <FailuresPanel snapshot={snapshot} />
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </main>
+    </div>
+  );
+}
+
+function OverviewStrip({ snapshot }: { snapshot: OpsRuntimeSnapshot }) {
+  const cards = [
+    {
+      label: '慢请求',
+      value: snapshot.slowRequests.length,
+      sub: `阈值 ${snapshot.thresholds.apiSlowRequestMs}ms`,
+      icon: Clock3,
+      tone: 'blue',
+    },
+    {
+      label: '慢查询',
+      value: snapshot.slowQueries.length,
+      sub: `阈值 ${snapshot.thresholds.prismaSlowQueryMs}ms`,
+      icon: Database,
+      tone: 'amber',
+    },
+    {
+      label: '后台任务',
+      value: snapshot.jobQueue.totals.total,
+      sub: `${snapshot.jobQueue.totals.queued} 排队 / ${snapshot.jobQueue.totals.running} 运行`,
+      icon: ServerCog,
+      tone: 'zinc',
+    },
+    {
+      label: '脏 Summary',
+      value: snapshot.dirtySummaryCount,
+      sub: 'xiaobao_risk_summaries',
+      icon: AlertTriangle,
+      tone: snapshot.dirtySummaryCount > 0 ? 'red' : 'emerald',
+    },
+  ];
+
+  return (
+    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+      {cards.map((card) => {
+        const Icon = card.icon;
+        return (
+          <section key={card.label} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-4 py-3 shadow-[var(--shadow-sm)]">
+            <div className="flex items-center justify-between gap-3">
+              <div className="min-w-0">
+                <p className="text-[11px] font-medium text-[var(--ink-muted)]">{card.label}</p>
+                <p className="mt-1 text-[24px] font-semibold leading-none tabular-nums text-[var(--ink)]">{card.value}</p>
+                <p className="mt-1 truncate text-[11px] text-[var(--ink-soft)]">{card.sub}</p>
+              </div>
+              <span className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${toneClass(card.tone)}`}>
+                <Icon className="h-4 w-4" strokeWidth={2} />
+              </span>
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+}
+
+function SlowRequestsPanel({ snapshot }: { snapshot: OpsRuntimeSnapshot }) {
+  return (
+    <section className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
+      <PanelHeader title="慢请求" right={`${snapshot.slowRequests.length}`} />
+      <div className="divide-y divide-[var(--line)]">
+        {snapshot.slowRequests.length === 0 ? (
+          <EmptyRow label="暂无慢请求" />
+        ) : snapshot.slowRequests.map((item) => (
+          <div key={item.id} className="grid grid-cols-[76px_minmax(0,1fr)_92px_96px] items-center gap-3 px-4 py-2.5 text-[12px]">
+            <span className="font-mono font-medium text-blue-700">{item.method}</span>
+            <span className="truncate font-mono text-[var(--ink)]">{item.path}</span>
+            <span className="text-right font-mono tabular-nums text-red-600">{item.durationMs}ms</span>
+            <span className="text-right text-[var(--ink-muted)]">{formatClock(item.occurredAt)}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function SlowQueriesPanel({ snapshot }: { snapshot: OpsRuntimeSnapshot }) {
+  return (
+    <section className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
+      <PanelHeader title="慢查询" right={`${snapshot.slowQueries.length}`} />
+      <div className="divide-y divide-[var(--line)]">
+        {snapshot.slowQueries.length === 0 ? (
+          <EmptyRow label="暂无慢查询" />
+        ) : snapshot.slowQueries.map((item) => (
+          <div key={item.id} className="grid grid-cols-[minmax(0,1fr)_92px_96px] items-start gap-3 px-4 py-2.5 text-[12px]">
+            <code className="min-w-0 break-words font-mono text-[11px] leading-5 text-[var(--ink)]">{item.queryPreview}</code>
+            <span className="text-right font-mono tabular-nums text-amber-700">{item.durationMs}ms</span>
+            <span className="text-right text-[var(--ink-muted)]">{formatClock(item.occurredAt)}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function JobQueuePanel({ snapshot }: { snapshot: OpsRuntimeSnapshot }) {
+  const rows = snapshot.jobQueue.byType;
+  return (
+    <section className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
+      <PanelHeader title="后台任务" right={`${snapshot.jobQueue.totals.total}`} />
+      <div className="border-b border-[var(--line)] px-4 py-3">
+        <StatusBars totals={snapshot.jobQueue.totals} />
+      </div>
+      <div className="divide-y divide-[var(--line)]">
+        {rows.length === 0 ? (
+          <EmptyRow label="暂无任务" />
+        ) : rows.map((row) => (
+          <div key={row.type} className="px-4 py-3">
+            <div className="flex items-center justify-between gap-3">
+              <span className="min-w-0 truncate font-mono text-[12px] font-medium text-[var(--ink)]">{row.type}</span>
+              <span className="text-[11px] font-medium tabular-nums text-[var(--ink-muted)]">{row.total}</span>
+            </div>
+            <div className="mt-2 grid grid-cols-4 gap-1.5">
+              {(['queued', 'running', 'succeeded', 'failed'] as JobStatus[]).map((status) => (
+                <StatusPill key={status} status={status} count={row[status]} />
+              ))}
+            </div>
+            {(row.oldestQueuedAt || row.nextLeaseExpiresAt) && (
+              <div className="mt-2 flex flex-wrap gap-2 text-[11px] text-[var(--ink-muted)]">
+                {row.oldestQueuedAt && <span>最早排队 {formatClock(row.oldestQueuedAt)}</span>}
+                {row.nextLeaseExpiresAt && <span>Lease {formatClock(row.nextLeaseExpiresAt)}</span>}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function FailuresPanel({ snapshot }: { snapshot: OpsRuntimeSnapshot }) {
+  const failures = snapshot.jobQueue.recentFailures;
+  const dbOk = snapshot.database.ok;
+
+  return (
+    <section className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
+      <PanelHeader title="运行状态" right={dbOk ? 'OK' : 'DB'} />
+      <div className="border-b border-[var(--line)] px-4 py-3">
+        <div className={`flex items-center gap-2 rounded-md border px-3 py-2 text-[12px] ${dbOk ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-red-200 bg-red-50 text-red-700'}`}>
+          {dbOk ? <CheckCircle2 className="h-4 w-4" /> : <AlertTriangle className="h-4 w-4" />}
+          <span className="min-w-0 truncate">{dbOk ? '数据库可读' : snapshot.database.error || '数据库不可读'}</span>
+        </div>
+      </div>
+      <div className="divide-y divide-[var(--line)]">
+        {failures.length === 0 ? (
+          <EmptyRow label="暂无失败任务" />
+        ) : failures.map((item) => (
+          <div key={item.id} className="px-4 py-3 text-[12px]">
+            <div className="flex items-center justify-between gap-3">
+              <span className="min-w-0 truncate font-mono font-medium text-[var(--ink)]">{item.type}</span>
+              <span className="shrink-0 font-mono tabular-nums text-red-600">{item.attempts}/{item.maxAttempts}</span>
+            </div>
+            <p className="mt-1 line-clamp-2 text-[11px] leading-5 text-[var(--ink-soft)]">{item.lastError || '-'}</p>
+            {item.updatedAt && <p className="mt-1 text-[11px] text-[var(--ink-muted)]">{formatClock(item.updatedAt)}</p>}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function StatusBars({ totals }: { totals: OpsRuntimeSnapshot['jobQueue']['totals'] }) {
+  const statuses: JobStatus[] = ['queued', 'running', 'succeeded', 'failed'];
+  const total = Math.max(1, totals.total);
+  return (
+    <div className="space-y-2">
+      <div className="flex h-2 overflow-hidden rounded-full bg-[var(--bg-subtle)]">
+        {statuses.map((status) => (
+          <span
+            key={status}
+            className={statusBarClass(status)}
+            style={{ width: `${(totals[status] / total) * 100}%` }}
+          />
+        ))}
+      </div>
+      <div className="grid grid-cols-4 gap-1.5">
+        {statuses.map((status) => <StatusPill key={status} status={status} count={totals[status]} />)}
+      </div>
+    </div>
+  );
+}
+
+function StatusPill({ status, count }: { status: JobStatus; count: number }) {
+  return (
+    <div className={`flex items-center justify-between gap-1 rounded-md px-2 py-1 text-[11px] ${statusPillClass(status)}`}>
+      <span>{STATUS_LABEL[status]}</span>
+      <span className="font-mono tabular-nums">{count}</span>
+    </div>
+  );
+}
+
+function PanelHeader({ title, right }: { title: string; right: string }) {
+  return (
+    <div className="flex h-10 items-center justify-between border-b border-[var(--line)] px-4">
+      <h2 className="text-[13px] font-semibold text-[var(--ink)]">{title}</h2>
+      <span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">{right}</span>
+    </div>
+  );
+}
+
+function EmptyRow({ label }: { label: string }) {
+  return <div className="px-4 py-8 text-center text-[12px] text-[var(--ink-muted)]">{label}</div>;
+}
+
+function formatClock(value?: string) {
+  if (!value) return '-';
+  const date = new Date(value);
+  if (!Number.isFinite(date.getTime())) return '-';
+  return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
+}
+
+function toneClass(tone: string) {
+  if (tone === 'blue') return 'bg-blue-50 text-blue-700';
+  if (tone === 'amber') return 'bg-amber-50 text-amber-700';
+  if (tone === 'red') return 'bg-red-50 text-red-700';
+  if (tone === 'emerald') return 'bg-emerald-50 text-emerald-700';
+  return 'bg-zinc-100 text-zinc-700';
+}
+
+function statusBarClass(status: JobStatus) {
+  if (status === 'queued') return 'bg-blue-500';
+  if (status === 'running') return 'bg-amber-500';
+  if (status === 'succeeded') return 'bg-emerald-500';
+  return 'bg-red-500';
+}
+
+function statusPillClass(status: JobStatus) {
+  if (status === 'queued') return 'bg-blue-50 text-blue-700';
+  if (status === 'running') return 'bg-amber-50 text-amber-700';
+  if (status === 'succeeded') return 'bg-emerald-50 text-emerald-700';
+  return 'bg-red-50 text-red-700';
+}