深度优化 ui

This commit is contained in:
2026-09-29 11:34:18 +08:00
parent 916a4f5ffc
commit 3faf960f35
27 changed files with 6510 additions and 2232 deletions
+60 -36
View File
@@ -1,3 +1,4 @@
import { FilterList } from "@/components/filter-list";
import { formatLocalDateTime } from "@/lib/datetime";
import { formatBytes, listAudits } from "@/lib/store";
@@ -10,47 +11,70 @@ export default async function AuditsPage() {
<div className="hero-copy">
<span className="eyebrow">审计</span>
<h2>鉴权审计</h2>
</div>
<div className="hero-aside">
<div className="stat-tile">
<span>最近记录</span>
<strong>{audits.length}</strong>
</div>
<span className="status-pill">最近 {audits.length} 条</span>
</div>
</section>
<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="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>
<FilterList
className="entity-table entity-table--audits"
placeholder="搜索节点、用户、来源、原因…"
statuses={[
{ value: "ok", label: "允许" },
{ value: "denied", label: "拒绝" },
]}
header={
<div className="entity-table__head audit-row-grid">
<span>结果</span>
<span>节点 / 用户</span>
<span>来源</span>
<span>请求速率</span>
<span>原因</span>
<span>时间</span>
</div>
))}
</div>
}
items={audits.map((audit) => ({
id: audit.id,
text: `${audit.node_name ?? ""} ${audit.username ?? ""} ${audit.auth_id ?? ""} ${audit.addr ?? ""} ${audit.reason}`,
status: audit.ok ? "ok" : "denied",
content: (
<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>
),
}))}
/>
</section>
</main>
);
}
}