优化ui

app/admin/audits/page.tsx

@@ -1,15 +1,15 @@
+import { formatLocalDateTime } from "@/lib/datetime";
 import { formatBytes, listAudits } from "@/lib/store";
 
 export default async function AuditsPage() {
   const audits = await listAudits();
 
   return (
-    <main className="page-stack">
+    <main className="page-stack management-page">
       <section className="hero-panel hero-panel--compact">
         <div className="hero-copy">
-          <span className="eyebrow">AUDIT</span>
+          <span className="eyebrow">审计</span>
           <h2>鉴权审计</h2>
-          <p className="page-lede">记录最近的 HTTP 鉴权回调结果、失败原因和请求来源。</p>
         </div>
         <div className="hero-aside">
           <div className="stat-tile">
@@ -19,33 +19,38 @@ export default async function AuditsPage() {
         </div>
       </section>
 
-      <section className="panel-card">
-        <div className="stack-md">
+      <section className="panel-card dense-panel">
+        <div className="entity-table entity-table--audits">
+          <div className="entity-table__head audit-row-grid">
+            <span>结果</span>
+            <span>节点 / 用户</span>
+            <span>来源</span>
+            <span>请求速率</span>
+            <span>原因</span>
+            <span>时间</span>
+          </div>
           {audits.map((audit) => (
-            <div key={audit.id} className="list-row list-row--card">
-              <div>
-                <div className="badge-row">
-                  <span className={`status-pill ${audit.ok ? "status-pill--ok" : "status-pill--danger"}`}>
-                    {audit.ok ? "允许" : "拒绝"}
-                  </span>
-                </div>
-                <p className="muted">
-                  {audit.node_name ?? "未知节点"} / {audit.username ?? audit.auth_id ?? "-"}
-                </p>
-                <p className="muted mono">{audit.addr ?? "-"}</p>
-              </div>
-              <div className="align-right">
-                <p>{audit.reason}</p>
-                <p className="muted">
-                  请求速率 {audit.requested_tx != null ? formatBytes(audit.requested_tx) : "-"}
-                  /s
-                </p>
-                <p className="muted">{audit.created_at}</p>
-              </div>
+            <div key={audit.id} className="entity-table__summary audit-row-grid">
+              <span>
+                <span className={`status-pill ${audit.ok ? "status-pill--ok" : "status-pill--danger"}`}>
+                  {audit.ok ? "允许" : "拒绝"}
+                </span>
+              </span>
+              <span className="entity-main-cell">
+                <strong>{audit.node_name ?? "未知节点"}</strong>
+                <span className="muted mono break-all">{audit.username ?? audit.auth_id ?? "-"}</span>
+              </span>
+              <span className="entity-code-cell break-all">{audit.addr ?? "-"}</span>
+              <span className="entity-number-cell">
+                <strong>{audit.requested_tx != null ? formatBytes(audit.requested_tx) : "-"}</strong>
+                <span>/s</span>
+              </span>
+              <span>{audit.reason}</span>
+              <span className="entity-muted-cell">{formatLocalDateTime(audit.created_at)}</span>
             </div>
           ))}
         </div>
       </section>
     </main>
   );
-}
+}