feat(client): 增加审计日志页面与权限路由菜单

client/src/pages/AuditLogsPage.tsx

@@ -0,0 +1,186 @@
+import { useEffect, useMemo, useState } from "react";
+import { isApiError } from "../api/types";
+import { fetchAuditLogs, type AuditLogListResponse } from "../api/audit";
+import { PageHeader } from "../components/common/PageHeader";
+
+const DEFAULT_PAGE_SIZE = 20;
+
+export function AuditLogsPage() {
+  const [page, setPage] = useState(1);
+  const [actionFilter, setActionFilter] = useState("");
+  const [targetTypeFilter, setTargetTypeFilter] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [data, setData] = useState<AuditLogListResponse | null>(null);
+
+  const totalPages = useMemo(() => {
+    if (!data) {
+      return 1;
+    }
+
+    return Math.max(1, Math.ceil(data.total / data.pageSize));
+  }, [data]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      setLoading(true);
+      setError("");
+
+      try {
+        const response = await fetchAuditLogs({
+          page,
+          pageSize: DEFAULT_PAGE_SIZE,
+          action: actionFilter || undefined,
+          targetType: targetTypeFilter || undefined,
+        });
+
+        if (!cancelled) {
+          setData(response);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          if (isApiError(err)) {
+            setError(`${err.code}: ${err.message}`);
+          } else {
+            setError("加载审计日志失败，请稍后重试");
+          }
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [actionFilter, page, targetTypeFilter]);
+
+  return (
+    <div>
+      <PageHeader title="审计工作台" subtitle="只读查看系统关键操作审计记录。" />
+
+      <section className="card-std space-y-4">
+        <div className="grid gap-3 md:grid-cols-3">
+          <label className="text-sm text-slate-700">
+            Action
+            <input
+              className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2"
+              onChange={(event) => {
+                setPage(1);
+                setActionFilter(event.target.value.trim());
+              }}
+              placeholder="例如 DELEGATION_CREATE"
+              value={actionFilter}
+            />
+          </label>
+
+          <label className="text-sm text-slate-700">
+            Target Type
+            <input
+              className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2"
+              onChange={(event) => {
+                setPage(1);
+                setTargetTypeFilter(event.target.value.trim());
+              }}
+              placeholder="例如 delegation_grant"
+              value={targetTypeFilter}
+            />
+          </label>
+
+          <div className="text-sm text-slate-700">
+            结果统计
+            <div className="mt-1 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-slate-900">
+              共 {data?.total ?? 0} 条
+            </div>
+          </div>
+        </div>
+
+        {error ? (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+            {error}
+          </p>
+        ) : null}
+
+        <div className="overflow-x-auto rounded-lg border border-slate-200">
+          <table className="min-w-full text-left text-sm">
+            <thead className="bg-slate-50 text-slate-600">
+              <tr>
+                <th className="px-3 py-2">时间</th>
+                <th className="px-3 py-2">Action</th>
+                <th className="px-3 py-2">Actor</th>
+                <th className="px-3 py-2">Target</th>
+                <th className="px-3 py-2">Request ID</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading ? (
+                <tr>
+                  <td className="px-3 py-3 text-slate-500" colSpan={5}>
+                    加载中...
+                  </td>
+                </tr>
+              ) : null}
+
+              {!loading && data?.items?.length ? (
+                data.items.map((item) => (
+                  <tr className="border-t border-slate-100" key={item.id}>
+                    <td className="px-3 py-2">{new Date(item.createdAt).toLocaleString()}</td>
+                    <td className="px-3 py-2">{item.action}</td>
+                    <td className="px-3 py-2">
+                      <div>{item.actorName || item.actorId}</div>
+                      <div className="text-xs text-slate-500">{item.actorEmail}</div>
+                    </td>
+                    <td className="px-3 py-2">
+                      {item.targetType}
+                      {item.targetId ? `/${item.targetId}` : ""}
+                    </td>
+                    <td className="px-3 py-2 font-mono text-xs">{item.requestId}</td>
+                  </tr>
+                ))
+              ) : null}
+
+              {!loading && !(data?.items?.length ?? 0) ? (
+                <tr>
+                  <td className="px-3 py-3 text-slate-500" colSpan={5}>
+                    暂无数据
+                  </td>
+                </tr>
+              ) : null}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="flex items-center justify-between text-sm">
+          <span>
+            第 {page} / {totalPages} 页
+          </span>
+
+          <div className="flex gap-2">
+            <button
+              className="btn-secondary"
+              disabled={page <= 1 || loading}
+              onClick={() => setPage((current) => Math.max(1, current - 1))}
+              type="button"
+            >
+              上一页
+            </button>
+            <button
+              className="btn-secondary"
+              disabled={page >= totalPages || loading}
+              onClick={() => setPage((current) => Math.min(totalPages, current + 1))}
+              type="button"
+            >
+              下一页
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}