feat(client): 增加审计日志页面与权限路由菜单
这个提交包含在：
+11
-3
@@ -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
|
||||
|
||||
@@ -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)}`);
|
||||
}
|
||||
@@ -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"],
|
||||
|
||||
@@ -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: "个人设置" },
|
||||
];
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
|
||||
在新工单中引用
屏蔽一个用户