hyb-oa/client/src/pages/AuditLogsPage.tsx

import { useEffect, useMemo, useState } from "react";
import { isApiError } from "../api/types";
import { exportAuditLogs } from "../api/exports";
import { fetchAuditLogs, type AuditLogListResponse } from "../api/audit";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
import { downloadBlob } from "../lib/download";
import { TableSkeleton } from "../components/common/TableSkeleton";

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 [exporting, setExporting] = 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="只读查看系统关键操作审计记录。"
        actions={
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="secondary" type="button" disabled={exporting} data-testid="audit-export">
                {exporting ? "导出中..." : "导出"}
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem
                data-testid="audit-export-csv"
                onSelect={async () => {
                  setExporting(true);
                  try {
                    const response = await exportAuditLogs({
                      format: "csv",
                      action: actionFilter || undefined,
                      targetType: targetTypeFilter || undefined,
                    });
                    downloadBlob(response.blob, response.filename ?? "audit-logs.csv");
                    setError("");
                  } catch (err) {
                    if (isApiError(err)) {
                      setError(`${err.code}: ${err.message}`);
                    } else {
                      setError("导出审计日志失败，请稍后重试");
                    }
                  } finally {
                    setExporting(false);
                  }
                }}
              >
                导出 CSV
              </DropdownMenuItem>
              <DropdownMenuItem
                data-testid="audit-export-xlsx"
                onSelect={async () => {
                  setExporting(true);
                  try {
                    const response = await exportAuditLogs({
                      format: "xlsx",
                      action: actionFilter || undefined,
                      targetType: targetTypeFilter || undefined,
                    });
                    downloadBlob(response.blob, response.filename ?? "audit-logs.xlsx");
                    setError("");
                  } catch (err) {
                    if (isApiError(err)) {
                      setError(`${err.code}: ${err.message}`);
                    } else {
                      setError("导出审计日志失败，请稍后重试");
                    }
                  } finally {
                    setExporting(false);
                  }
                }}
              >
                导出 Excel
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        }
      />

      <section className="card-std p-6 space-y-4">
        <div className="grid gap-3 md:grid-cols-3">
          <label className="text-sm text-zinc-700">
            Action
            <input
              className="mt-1 w-full rounded-lg border border-zinc-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-zinc-700">
            Target Type
            <input
              className="mt-1 w-full rounded-lg border border-zinc-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-zinc-700">
            结果统计
            <div className="mt-1 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-zinc-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-zinc-200">
          <table className="min-w-full text-left text-sm">
            <thead className="bg-zinc-50 text-zinc-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 colSpan={5} className="p-4">
                    <TableSkeleton columns={5} rows={5} />
                  </td>
                </tr>
              ) : null}

              {!loading && data?.items?.length ? (
                data.items.map((item) => (
                  <tr className="border-t border-zinc-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-zinc-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-zinc-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>
  );
}