UHD_Media_Tool/apps/web/app/routes/console/audit.tsx

import { AuditAction, type AuditEvent } from "@umt/contracts";
import { useEffect, useState } from "react";
import { useSearchParams } from "react-router";
import { useAuditEvents } from "~/api/audit.ts";
import { DataTable } from "~/components/console/data-table.tsx";
import { DetailSection, DetailSheet } from "~/components/console/detail-sheet.tsx";
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
import { JsonView } from "~/components/console/json-view.tsx";
import { KvList } from "~/components/console/kv-list.tsx";
import { PageHeader } from "~/components/console/page-header.tsx";
import { formatRelative } from "~/lib/labels.ts";
import { formatDateTime } from "~/lib/utils.ts";

export const meta = () => [{ title: "审计日志 · UHD 媒体自动化控制台" }];

const ACTOR_TYPES = [
  { value: "user", label: "管理员" },
  { value: "api_key", label: "API Key" },
  { value: "agent", label: "Agent" },
  { value: "system", label: "系统" },
];
const actorLabel = (t: string) => ACTOR_TYPES.find((a) => a.value === t)?.label ?? t;

const ACTION_LABEL: Record<string, string> = {
  "admin.setup": "初始化管理员",
  "admin.login_success": "登录",
  "admin.logout": "退出登录",
  "admin.password_change": "修改密码",
  "admin.totp_enable": "启用二次验证",
  "admin.totp_disable": "停用二次验证",
  "api_key.create": "创建 API Key",
  "api_key.update": "修改 API Key",
  "api_key.revoke": "撤销 API Key",
  "settings.update": "修改设置",
  "secret.create": "新建凭证",
  "secret.rotate": "轮换凭证",
  "secret.delete": "删除凭证",
  "site_account.credentials_set": "录入站点凭证",
  "engine.run_cancel": "取消引擎运行",
};
const VERB: Record<string, string> = { create: "新建", update: "修改", delete: "删除", test: "测试", verify: "校验" };
const NOUN: Record<string, string> = {
  library_root: "库根",
  downloader_instance: "下载器",
  media_server_instance: "媒体服务器",
  path_mapping: "路径映射",
};
function actionLabel(a: string): string {
  if (ACTION_LABEL[a]) return ACTION_LABEL[a];
  const [noun, verb] = a.split(".");
  if (noun && verb && NOUN[noun] && VERB[verb]) return `${VERB[verb]}${NOUN[noun]}`;
  return a;
}

// 前缀组 + 具体动作
const ACTION_OPTIONS = [
  ...[
    "admin",
    "api_key",
    "settings",
    "secret",
    "library_root",
    "downloader_instance",
    "media_server_instance",
    "path_mapping",
  ].map((p) => ({ value: `${p}.*`, label: `${p}.*(全部)` })),
  ...AuditAction.options.map((a) => ({ value: a, label: `${actionLabel(a)} · ${a}` })),
];

export default function AuditPage() {
  const [params, setParams] = useSearchParams();
  const actorType = params.get("actorType") ?? "";
  const action = params.get("action") ?? "";
  const [target, setTarget] = useState(params.get("targetType") ?? "");
  const [targetType, setTargetType] = useState(target);
  const [selected, setSelected] = useState<AuditEvent | null>(null);

  useEffect(() => {
    const t = setTimeout(() => {
      const v = target.trim();
      setTargetType(v);
      setParams(
        (p) => {
          if (v) p.set("targetType", v);
          else p.delete("targetType");
          return p;
        },
        { replace: true },
      );
    }, 350);
    return () => clearTimeout(t);
  }, [target, setParams]);

  const setParam = (k: string, v: string) =>
    setParams(
      (p) => {
        if (v) p.set(k, v);
        else p.delete(k);
        return p;
      },
      { replace: true },
    );

  const q = useAuditEvents({
    actorType: actorType || undefined,
    action: action || undefined,
    targetType: targetType || undefined,
  });
  const rows = q.data?.pages.flatMap((p) => p.items);
  const filtered = !!(actorType || action || targetType);

  return (
    <>
      <PageHeader title="审计日志" description="登录、设置、密钥与实例变更，新的在前。不记录凭证内容。" />
      <FilterBar
        search={{ value: target, onChange: setTarget, placeholder: "对象类型,如 downloader_instance" }}
        onReset={
          filtered
            ? () => {
                setTarget("");
                setParams({}, { replace: true });
              }
            : undefined
        }
      >
        <FilterSelect
          label="操作者"
          value={actorType}
          onChange={(v) => setParam("actorType", v)}
          options={ACTOR_TYPES}
        />
        <FilterSelect label="动作" value={action} onChange={(v) => setParam("action", v)} options={ACTION_OPTIONS} />
      </FilterBar>
      <DataTable<AuditEvent>
        rows={rows}
        rowKey={(r) => r.id}
        loading={q.isPending}
        error={q.error}
        onRetry={() => q.refetch()}
        empty={{
          title: filtered ? "没有符合条件的审计事件" : "还没有审计事件",
        }}
        onRowClick={setSelected}
        selectedKey={selected?.id ?? null}
        hasMore={!!q.hasNextPage}
        onLoadMore={() => q.fetchNextPage()}
        loadingMore={q.isFetchingNextPage}
        columns={[
          {
            key: "at",
            header: "时间",
            cell: (r) => (
              <span className="whitespace-nowrap tabular-nums" title={formatDateTime(r.at)}>
                {formatRelative(r.at)}
              </span>
            ),
          },
          {
            key: "action",
            header: "动作",
            cell: (r) => (
              <div className="min-w-0">
                <p className="font-medium">{actionLabel(r.action)}</p>
                <p className="font-mono text-meta text-muted-foreground">{r.action}</p>
              </div>
            ),
          },
          { key: "actor", header: "操作者", hideBelow: "sm", cell: (r) => actorLabel(r.actorType) },
          {
            key: "target",
            header: "对象",
            hideBelow: "md",
            cell: (r) =>
              r.targetType ? (
                <div className="min-w-0 max-w-[18rem]">
                  <p className="truncate">{r.targetType}</p>
                  <p className="truncate font-mono text-meta text-muted-foreground">{r.targetId}</p>
                </div>
              ) : (
                "—"
              ),
          },
        ]}
      />
      <DetailSheet
        open={!!selected}
        onOpenChange={(o) => !o && setSelected(null)}
        title={selected ? actionLabel(selected.action) : ""}
        description={selected ? formatDateTime(selected.at) : undefined}
      >
        {selected ? (
          <>
            <DetailSection title="事件">
              <KvList
                items={[
                  { label: "动作", value: selected.action, mono: true },
                  {
                    label: "操作者",
                    value: `${actorLabel(selected.actorType)}${selected.actorId ? ` · ${selected.actorId}` : ""}`,
                    wide: true,
                  },
                  { label: "对象类型", value: selected.targetType },
                  { label: "对象 ID", value: selected.targetId, mono: true },
                  { label: "Trace", value: selected.traceId, mono: true },
                  { label: "事件 ID", value: selected.id, mono: true },
                ]}
              />
            </DetailSection>
            <JsonView label="负载" value={selected.payload} />
          </>
        ) : null}
      </DetailSheet>
    </>
  );
}