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

client/README.md

@@ -29,17 +29,25 @@ npm run dev
 ```
 
 ## 4. 鉴权与会话说明
-- Access Token 仅保存在内存，不写入 localStorage/sessionStorage。
+- Access Token 仅保存在内存，不写入 `localStorage/sessionStorage`。
 - Refresh Token 由后端通过 HttpOnly Cookie 维护。
 - 前端在 401 时自动调用 `/api/auth/refresh` 并重试一次请求。
 - 登录与刷新请求都会附带 `x-device-fingerprint`。
 
-## 5. 风格资源复用策略（锁定）
+## 5. 菜单与权限（当前壳层）
+- 仪表盘：登录即可访问。
+- 我的报销：`expense.view_own` 或 `expense.view_all`。
+- 待我处理：`expense.approve`。
+- 票据中心：`invoice.upload` / `invoice.view_own` / `invoice.manage`。
+- 审计工作台：`system.audit.view`（finance_mgr/admin）。
+- 个人设置：登录即可访问。
+
+## 6. 风格资源复用策略（锁定）
 - 视觉 Token 来源：`/home/shunli/Projects/hyb-web`。
 - 采用“复制到 client + 单向同步”，不做跨仓软链与自动联动。
 - 如需同步风格，请记录来源 commit 并通过评审。
 
-## 6. 可用脚本
+## 7. 可用脚本
 ```bash
 npm run dev
 npm run typecheck

client/src/api/audit.ts

@@ -0,0 +1,50 @@
+import { apiRequestData } from "./http";
+
+export type AuditLogItem = {
+  id: string;
+  requestId: string;
+  actorId: string;
+  actorName: string;
+  actorEmail: string;
+  action: string;
+  targetType: string;
+  targetId: string | null;
+  ipAddress: string | null;
+  userAgent: string | null;
+  extra: Record<string, unknown>;
+  createdAt: string;
+};
+
+export type AuditLogListResponse = {
+  page: number;
+  pageSize: number;
+  total: number;
+  items: AuditLogItem[];
+};
+
+export type AuditLogQuery = {
+  page?: number;
+  pageSize?: number;
+  actorId?: string;
+  action?: string;
+  targetType?: string;
+  dateFrom?: string;
+  dateTo?: string;
+};
+
+function toQueryString(query: AuditLogQuery) {
+  const params = new URLSearchParams();
+  for (const [key, value] of Object.entries(query)) {
+    if (value == null || value === "") {
+      continue;
+    }
+    params.set(key, String(value));
+  }
+
+  const encoded = params.toString();
+  return encoded ? `?${encoded}` : "";
+}
+
+export async function fetchAuditLogs(query: AuditLogQuery) {
+  return apiRequestData<AuditLogListResponse>(`/api/audit-logs${toQueryString(query)}`);
+}

client/src/auth/permissions.ts

@@ -39,6 +39,7 @@ const ROLE_PERMISSIONS: Record<string, readonly string[]> = {
     "expense.view_all",
     "expense.finance.override_duplicate",
     "system.settings",
+    "system.audit.view",
   ],
   administration: ["expense.proxy_submit", "expense.view_own"],
   hr: ["system.users", "expense.view_all"],

client/src/components/navigation/Sidebar.tsx

@@ -25,6 +25,11 @@ const NAV_ITEMS: NavItem[] = [
     label: "票据中心",
     anyOf: ["invoice.upload", "invoice.view_own", "invoice.manage"],
   },
+  {
+    to: "/audit-logs",
+    label: "审计工作台",
+    anyOf: ["system.audit.view"],
+  },
   { to: "/settings/profile", label: "个人设置" },
 ];
 

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>
+  );
+}

client/src/router/index.tsx

@@ -1,6 +1,7 @@
 import { Navigate, Route, Routes } from "react-router-dom";
 import { AppShellLayout } from "../layouts/AppShellLayout";
 import { AuthLayout } from "../layouts/AuthLayout";
+import { AuditLogsPage } from "../pages/AuditLogsPage";
 import { DashboardPage } from "../pages/DashboardPage";
 import { ForbiddenPage } from "../pages/ForbiddenPage";
 import { InvoicePoolPage } from "../pages/InvoicePoolPage";
@@ -63,6 +64,15 @@ export function AppRouter() {
           }
         />
 
+        <Route
+          path="audit-logs"
+          element={
+            <RequirePermission anyOf={["system.audit.view"]}>
+              <AuditLogsPage />
+            </RequirePermission>
+          }
+        />
+
         <Route path="settings/profile" element={<ProfilePage />} />
       </Route>