feat: add admin state and diagnostics (TASK-WP6-05)

2026-08-04 01:51:35 +08:00
parent 19212cc1b6
commit 5041dc03c3
15 changed files with 1374 additions and 8 deletions
@@ -0,0 +1,136 @@
+import { useCallback, useEffect, useState } from "react";
+
+import type { AdminDiagnosticsResponse, AdminServicesStorageResponse } from "@dada/shared-contracts";
+
+import "./admin-services-storage.css";
+
+const serviceLabels: Record<AdminServicesStorageResponse["services"][number]["service_id"], string> = {
+  ai_gateway: "AI 网关",
+  amap: "高德",
+  api: "API",
+  asset_root: "素材根",
+  resend: "Resend",
+  worker: "Worker",
+};
+
+const statusLabels: Record<AdminServicesStorageResponse["services"][number]["status"], string> = {
+  active: "正常",
+  degraded: "有异常",
+  disabled: "已停用",
+  paused_provider: "供应商暂停",
+  paused_quota: "额度暂停",
+  unavailable: "不可用",
+};
+
+const impactLabels: Record<AdminServicesStorageResponse["services"][number]["impact_scope"], string> = {
+  account: "账户模型",
+  api: "后台接口",
+  authentication: "认证",
+  generation: "生成",
+  location: "定位",
+  model: "单模型",
+  none: "无",
+  storage: "存储",
+  unknown: "未知范围",
+};
+
+function formatTime(value: string | null) {
+  if (!value) return "未记录";
+  return new Intl.DateTimeFormat("zh-CN", { dateStyle: "short", timeStyle: "short" }).format(new Date(value));
+}
+
+async function getJson<T>(url: string) {
+  const response = await fetch(url, { credentials: "same-origin" });
+  if (response.status === 401) window.dispatchEvent(new Event("dada:session-invalid"));
+  if (!response.ok) throw new Error("admin_state_unavailable");
+  return await response.json() as T;
+}
+
+export function AdminServicesStoragePage() {
+  const [state, setState] = useState<AdminServicesStorageResponse>();
+  const [diagnostics, setDiagnostics] = useState<AdminDiagnosticsResponse>();
+  const [loading, setLoading] = useState(true);
+  const [failed, setFailed] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setFailed(false);
+    try {
+      const [nextState, nextDiagnostics] = await Promise.all([
+        getJson<AdminServicesStorageResponse>("/api/v1/admin/services-storage"),
+        getJson<AdminDiagnosticsResponse>("/api/v1/admin/diagnostics"),
+      ]);
+      setState(nextState);
+      setDiagnostics(nextDiagnostics);
+    } catch {
+      setFailed(true);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { void load(); }, [load]);
+
+  async function copyDiagnostics() {
+    if (!diagnostics) return;
+    try {
+      await navigator.clipboard.writeText(diagnostics.diagnostic_text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1800);
+    } catch {
+      setCopied(false);
+    }
+  }
+
+  return (
+    <main className="admin-services-storage" id="admin-main">
+      <header className="admin-page-heading admin-services-heading">
+        <div><p>OPERATIONS / HEALTH</p><h2>服务与存储</h2></div>
+        <div className="admin-services-heading-actions">
+          {state ? <time dateTime={state.generated_at}>更新于 {formatTime(state.generated_at)}</time> : null}
+          <button aria-label="重新读取服务与存储状态" onClick={() => void load()} type="button">重新读取</button>
+        </div>
+      </header>
+      {loading && !state ? <div aria-label="服务与存储状态加载中" className="admin-services-loading"><span /><span /><span /><span /></div> : null}
+      {failed ? <div className="admin-services-failure" role="alert"><span>状态暂时无法读取{state ? `，保留 ${formatTime(state.generated_at)} 的结果` : ""}。</span><button onClick={() => void load()} type="button">重试</button></div> : null}
+      {state ? (
+        <>
+          <section aria-labelledby="admin-services-list-heading" className="admin-health-section">
+            <header><div><p>SERVICE STATUS</p><h3 id="admin-services-list-heading">外部服务与本机组件</h3></div><span className="admin-safe-note">仅显示脱敏状态</span></header>
+            <div className="admin-service-grid">
+              {state.services.map((service) => (
+                <article className={`admin-service-card is-${service.status}`} key={service.service_id}>
+                  <div className="admin-service-card-heading"><strong>{serviceLabels[service.service_id]}</strong><span>{statusLabels[service.status]}</span></div>
+                  <dl>
+                    <div><dt>配置状态</dt><dd>{service.configured ? "已配置" : "未配置"}</dd></div>
+                    <div><dt>影响范围</dt><dd>{impactLabels[service.impact_scope]}</dd></div>
+                    <div><dt>最近检查</dt><dd>{formatTime(service.checked_at)}</dd></div>
+                    {service.pause_reason ? <div><dt>安全原因</dt><dd>{service.pause_reason}</dd></div> : null}
+                  </dl>
+                </article>
+              ))}
+            </div>
+          </section>
+          <section aria-labelledby="admin-storage-heading" className="admin-health-section">
+            <header><div><p>LOCAL DATA ROOT</p><h3 id="admin-storage-heading">本机内容容量</h3></div><span className={`admin-storage-state is-${state.storage.status}`}>{state.storage.status === "active" ? "可写" : state.storage.status === "full" ? "已满" : "不可用"}</span></header>
+            <div className="admin-storage-metrics">
+              <div><span>已用内容</span><strong>{(state.storage.managed_content_bytes / 1024 / 1024 / 1024).toFixed(2)} GB</strong></div>
+              <div><span>固定上限</span><strong>{(state.storage.hard_limit_bytes / 1024 / 1024 / 1024).toFixed(2)} GB</strong></div>
+              <div><span>容量提醒</span><strong>{state.storage.capacity_notice_level}</strong></div>
+              <div><span>清理队列</span><strong>{state.storage.cleanup_pending_count}</strong></div>
+            </div>
+            <div className="admin-storage-progress" aria-label={`本机内容容量 ${(state.storage.managed_content_bytes / state.storage.hard_limit_bytes * 100).toFixed(1)}%`}><span style={{ width: `${Math.min(100, state.storage.managed_content_bytes / state.storage.hard_limit_bytes * 100)}%` }} /></div>
+            <p className="admin-storage-description">测试数据仅保存在本机，不自动备份，也不会迁移到正式系统。当前 Windows 用户的 Dada 本机数据目录引用：<code>{state.storage.data_root_ref}</code>。只读规范素材库不计入 5 GB 内容额度。</p>
+            <dl className="admin-storage-details"><div><dt>最后计量</dt><dd>{formatTime(state.storage.last_measured_at)}</dd></div><div><dt>重新计量</dt><dd>{state.storage.remeasurement_required ? "需要完成" : "无需等待"}</dd></div></dl>
+          </section>
+          <section aria-labelledby="admin-diagnostics-heading" className="admin-health-section admin-diagnostics-section">
+            <header><div><p>DIAGNOSTICS</p><h3 id="admin-diagnostics-heading">脱敏诊断</h3></div><button disabled={!diagnostics} onClick={() => void copyDiagnostics()} type="button">{copied ? "已复制" : "复制诊断"}</button></header>
+            <p>诊断内容只包含固定版本、组件状态、逻辑位置和容量计量，不包含密钥、邮箱、绝对路径、提示词、图片或供应商原文。</p>
+            {diagnostics ? <pre aria-label="脱敏诊断内容">{diagnostics.diagnostic_text}</pre> : <div aria-label="诊断加载中" className="admin-diagnostics-placeholder" />}
+          </section>
+        </>
+      ) : null}
+    </main>
+  );
+}