feat(web): A5 操作日志与运行日志页

按用户选定实现操作日志列表 / 详情（方案 A）与运行日志（方案 C）；多条件筛选、真实游标分页、字段级 diff / 完整原始 JSON、560 导出抽屉（轮询 / 历史 / 签名下载）、只读与权限控制；侧栏「审计日志」更名「操作日志」、「客户字段」更名「字段管理」并新增「运行日志」；1024 关键列适配。

apps/web/src/api/audit.spec.ts

@@ -0,0 +1,255 @@
+import type {
+  AuditExportJob,
+  AuditLogActionsResponse,
+  AuditLogDetail,
+  AuditLogItem,
+} from '@lingxi/shared';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useAuthStore } from '@/stores/auth-store';
+
+import {
+  buildAuditExportDownloadUrl,
+  createAuditExport,
+  fetchAuditActions,
+  fetchAuditExport,
+  fetchAuditExports,
+  fetchAuditLogDetail,
+  fetchAuditLogs,
+} from './audit';
+import { setUnauthorizedHandler } from './client';
+
+const NOW = '2026-11-04T10:00:00.000Z';
+const ID = '01HZZZZZZZZZZZZZZZZZZZZZZ1';
+const CUSTOMER_ID = '01HZZZZZZZZZZZZZZZZZZZZZZ2';
+
+const jsonResponse = (body: unknown, status = 200): Response =>
+  new Response(status === 204 ? null : JSON.stringify(body), {
+    status,
+    headers: status === 204 ? undefined : { 'Content-Type': 'application/json' },
+  });
+
+const item: AuditLogItem = {
+  id: ID,
+  occurred_at: NOW,
+  actor_id: '01HZZZZZZZZZZZZZZZZZZZZZZ3',
+  actor_name: '江岚',
+  actor_account: 'jiang.lan',
+  action_code: 'identity.role.update',
+  action_label: '修改角色权限',
+  category: 'permission',
+  category_label: '权限与角色',
+  target_type: 'role',
+  target_id: 'role_material_ops',
+  target_name: '素材运营',
+  customer_id: null,
+  customer_name: null,
+  result: 'success',
+  http_method: 'PATCH',
+  http_path: '/api/v1/roles/role_material_ops',
+  trace_id: '01JCH9V4TR4CE00000000005',
+  ip: '10.12.0.18',
+  duration_ms: 74,
+  error_code: null,
+  error_message: null,
+  change_count: 1,
+  has_before: true,
+  has_after: true,
+};
+
+const detail: AuditLogDetail = {
+  ...item,
+  customer_id: CUSTOMER_ID,
+  customer_name: '花间集',
+  user_agent: 'Chrome 130 / Windows 11',
+  reason: '开放图片合成权限',
+  before: { permissions: ['material:review'] },
+  after: { permissions: ['material:render'] },
+  changes: null,
+  diff: [
+    {
+      path: 'permissions',
+      label: '权限点',
+      before: 'material:review',
+      after: null,
+      kind: 'removed',
+    },
+    { path: 'permissions', label: '权限点', before: null, after: 'material:render', kind: 'added' },
+  ],
+};
+
+const actions: AuditLogActionsResponse = {
+  items: [
+    {
+      code: 'identity.role.update',
+      label: '修改角色权限',
+      category: 'permission',
+      category_label: '权限与角色',
+      target_type: 'role',
+      sensitive: false,
+    },
+  ],
+  categories: [{ key: 'permission', label: '权限与角色' }],
+};
+
+const exportJob: AuditExportJob = {
+  id: ID,
+  status: 'succeeded',
+  format: 'csv',
+  filters: { result: 'failure' },
+  total_rows: 120,
+  row_count: 120,
+  processed_rows: 120,
+  truncated: false,
+  progress: 100,
+  file_size: 2048,
+  error_message: null,
+  requested_at: NOW,
+  started_at: NOW,
+  finished_at: NOW,
+  expires_at: NOW,
+  download_count: 0,
+  last_downloaded_at: null,
+  download_token: 'signed.token',
+};
+
+function lastCall(): { url: string; init: RequestInit | undefined } {
+  const fetchMock = vi.mocked(globalThis.fetch);
+  const call = fetchMock.mock.calls.at(-1);
+  const input = call?.[0];
+  const url =
+    typeof input === 'string' ? input : input instanceof URL ? input.href : (input?.url ?? '');
+  return { url, init: call?.[1] };
+}
+
+function lastBody(): unknown {
+  const body = lastCall().init?.body;
+  return typeof body === 'string' ? (JSON.parse(body) as unknown) : undefined;
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks();
+  window.localStorage.clear();
+  useAuthStore.getState().clearSession();
+  setUnauthorizedHandler(null);
+  useAuthStore.getState().setSession({
+    accessToken: 'token',
+    user: { id: '01HZZZZZZZZZZZZZZZZZZZZZZ3', name: '江岚', account: 'jiang.lan' },
+    permissions: ['audit:read', 'audit:export'],
+  });
+});
+
+describe('审计日志接口封装', () => {
+  it('列表 query 使用 snake_case，并剔除空值', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(
+      jsonResponse({ items: [item], next_cursor: 'cursor-2' }),
+    );
+
+    const response = await fetchAuditLogs({
+      keyword: '素材',
+      category: 'permission',
+      actor: '江岚',
+      customer_id: CUSTOMER_ID,
+      action_code: 'identity.role.update',
+      target_type: 'role',
+      target_id: 'role_material_ops',
+      result: 'failure',
+      from: '2026-10-29T00:00:00.000Z',
+      to: '2026-11-04T13:32:00.000Z',
+      cursor: 'cursor-1',
+      limit: 20,
+    });
+
+    expect(response.items).toHaveLength(1);
+    expect(response.next_cursor).toBe('cursor-2');
+    const url = lastCall().url;
+    expect(url).toContain('/audit-logs?');
+    for (const key of [
+      'keyword=',
+      'category=permission',
+      'actor=',
+      'customer_id=',
+      'action_code=',
+      'target_type=role',
+      'target_id=role_material_ops',
+      'result=failure',
+      'from=',
+      'to=',
+      'cursor=cursor-1',
+      'limit=20',
+    ]) {
+      expect(url).toContain(key);
+    }
+    expect(url).not.toContain('undefined');
+  });
+
+  it('列表默认 limit=20，空筛选不会带出空参数', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(
+      jsonResponse({ items: [], next_cursor: null }),
+    );
+    await fetchAuditLogs({});
+    const url = lastCall().url;
+    expect(url).toContain('limit=20');
+    expect(url).not.toContain('keyword=');
+    expect(url).not.toContain('category=');
+  });
+
+  it('详情响应经 Zod parse，diff 保留前后值', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(jsonResponse(detail));
+    const result = await fetchAuditLogDetail(ID);
+    expect(lastCall().url).toContain(`/audit-logs/${ID}`);
+    expect(result.diff).toHaveLength(2);
+    expect(result.diff[0]?.kind).toBe('removed');
+    expect(result.user_agent).toBe('Chrome 130 / Windows 11');
+  });
+
+  it('动作目录返回分类与动作中文名', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(jsonResponse(actions));
+    const result = await fetchAuditActions();
+    expect(lastCall().url).toContain('/audit-logs/actions');
+    expect(result.categories[0]?.label).toBe('权限与角色');
+    expect(result.items[0]?.label).toBe('修改角色权限');
+  });
+
+  it('创建导出：body 为 { format, filters }（filters snake_case）', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(jsonResponse({ id: ID, status: 'queued' }));
+    const result = await createAuditExport({
+      format: 'csv',
+      filters: { result: 'failure', from: '2026-10-29T00:00:00.000Z' },
+    });
+    expect(result.status).toBe('queued');
+    expect(lastCall().init?.method).toBe('POST');
+    expect(lastCall().url).toContain('/audit-logs/export');
+    expect(lastBody()).toEqual({
+      format: 'csv',
+      filters: { result: 'failure', from: '2026-10-29T00:00:00.000Z' },
+    });
+  });
+
+  it('导出历史与单任务进度', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(jsonResponse({ items: [exportJob], next_cursor: null }))
+      .mockResolvedValueOnce(jsonResponse(exportJob));
+
+    const history = await fetchAuditExports({ limit: 20 });
+    expect(history.items[0]?.status).toBe('succeeded');
+    expect(lastCall().url).toContain('/audit-logs/exports?');
+    expect(lastCall().url).toContain('limit=20');
+
+    const job = await fetchAuditExport(ID);
+    expect(lastCall().url).toContain(`/audit-logs/exports/${ID}`);
+    expect(job.download_token).toBe('signed.token');
+  });
+
+  it('下载地址 = API base + path + 编码后的 token', () => {
+    const url = buildAuditExportDownloadUrl(ID, 'a+b/c=');
+    expect(url).toContain('/api/v1/audit-logs/exports/');
+    expect(url).toContain(`/exports/${ID}/download?token=`);
+    expect(url).toContain('a%2Bb%2Fc%3D');
+  });
+
+  it('响应不符合契约时抛 Zod 错误', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(jsonResponse({ items: [{ id: 1 }] }));
+    await expect(fetchAuditLogs({})).rejects.toThrow();
+  });
+});

apps/web/src/api/audit.ts

@@ -0,0 +1,109 @@
+/**
+ * A5 审计日志接口（唯一出处）。
+ * 依据：packages/shared/src/schemas/audit.ts、PRD R-05、工程规范 08。
+ *
+ * 约定：query 用 snake_case（C-01）；导出创建 body 为 `{ format, filters }`，filters 内同样 snake_case。
+ * 所有响应 / 入参都用 shared Zod schema parse，契约漂移在请求层直接暴露。
+ */
+import {
+  type AuditExportCreateInput,
+  type AuditExportCreateResponse,
+  auditExportCreateResponseSchema,
+  auditExportCreateSchema,
+  type AuditExportJob,
+  auditExportJobSchema,
+  type AuditExportListQuery,
+  auditExportListQuerySchema,
+  type AuditExportListResponse,
+  auditExportListResponseSchema,
+  type AuditLogActionsResponse,
+  auditLogActionsResponseSchema,
+  type AuditLogDetail,
+  auditLogDetailSchema,
+  type AuditLogListQuery,
+  auditLogListQuerySchema,
+  type AuditLogListResponse,
+  auditLogListResponseSchema,
+} from '@lingxi/shared';
+
+import { apiBaseUrl, request } from './client';
+import { ENDPOINTS } from './endpoints';
+
+function searchParams(entries: Record<string, string | number | undefined>): string {
+  const params = new URLSearchParams();
+  for (const [key, value] of Object.entries(entries)) {
+    if (value !== undefined && value !== '') params.set(key, String(value));
+  }
+  const search = params.toString();
+  return search === '' ? '' : `?${search}`;
+}
+
+/** 审计日志列表：多条件 + 游标分页（query 全部 snake_case） */
+export async function fetchAuditLogs(
+  query: Partial<AuditLogListQuery> = {},
+): Promise<AuditLogListResponse> {
+  const parsed = auditLogListQuerySchema.parse(query);
+  const payload: unknown = await request(
+    `${ENDPOINTS.auditLogs}${searchParams({
+      actor: parsed.actor,
+      customer_id: parsed.customer_id,
+      action_code: parsed.action_code,
+      category: parsed.category,
+      target_type: parsed.target_type,
+      target_id: parsed.target_id,
+      result: parsed.result,
+      from: parsed.from,
+      to: parsed.to,
+      keyword: parsed.keyword,
+      cursor: parsed.cursor,
+      limit: parsed.limit,
+    })}`,
+  );
+  return auditLogListResponseSchema.parse(payload);
+}
+
+/** 动作目录（筛选下拉 + 中文名 / 分类映射） */
+export async function fetchAuditActions(): Promise<AuditLogActionsResponse> {
+  const payload: unknown = await request(ENDPOINTS.auditLogActions);
+  return auditLogActionsResponseSchema.parse(payload);
+}
+
+/** 日志详情：含 before / after / changes / diff / trace / ip / ua */
+export async function fetchAuditLogDetail(logId: string): Promise<AuditLogDetail> {
+  const payload: unknown = await request(ENDPOINTS.auditLog(logId));
+  return auditLogDetailSchema.parse(payload);
+}
+
+/** 创建异步导出任务（导出本身会写审计，由后端拦截器完成） */
+export async function createAuditExport(
+  input: AuditExportCreateInput,
+): Promise<AuditExportCreateResponse> {
+  const body = auditExportCreateSchema.parse(input);
+  const payload: unknown = await request(ENDPOINTS.auditExport, { method: 'POST', body });
+  return auditExportCreateResponseSchema.parse(payload);
+}
+
+/** 我的导出任务（按发起时间倒序，游标分页） */
+export async function fetchAuditExports(
+  query: Partial<AuditExportListQuery> = {},
+): Promise<AuditExportListResponse> {
+  const parsed = auditExportListQuerySchema.parse(query);
+  const payload: unknown = await request(
+    `${ENDPOINTS.auditExports}${searchParams({
+      cursor: parsed.cursor,
+      limit: parsed.limit,
+    })}`,
+  );
+  return auditExportListResponseSchema.parse(payload);
+}
+
+/** 单个导出任务进度（download_token 仅成功后返回） */
+export async function fetchAuditExport(exportId: string): Promise<AuditExportJob> {
+  const payload: unknown = await request(ENDPOINTS.auditExportJob(exportId));
+  return auditExportJobSchema.parse(payload);
+}
+
+/** 短时效签名下载地址：API base + path + token（token 只出现在 URL，不塞进 JSON） */
+export function buildAuditExportDownloadUrl(exportId: string, token: string): string {
+  return `${apiBaseUrl()}${ENDPOINTS.auditExportDownload(exportId)}?token=${encodeURIComponent(token)}`;
+}

apps/web/src/api/client.ts

@@ -51,6 +51,11 @@ function baseUrl(): string {
   return (configured ?? DEFAULT_BASE_URL).replace(/\/+$/, '');
 }
 
+/** API 根地址（无尾斜杠）：供签名下载等需要直链 / 新窗口打开的接口复用，禁止在业务里重复硬编码 */
+export function apiBaseUrl(): string {
+  return baseUrl();
+}
+
 function buildUrl(path: string): string {
   if (/^https?:\/\//.test(path)) {
     return path;

apps/web/src/api/endpoints.ts

@@ -6,6 +6,7 @@
 const USERS = '/users';
 const DICTS = '/dicts';
 const SYSTEM_CONFIGS = '/system/configs';
+const AUDIT_LOGS = '/audit-logs';
 
 export const ENDPOINTS = {
   login: '/auth/login',
@@ -64,4 +65,14 @@ export const ENDPOINTS = {
   systemConfigs: SYSTEM_CONFIGS,
   systemConfigsEffective: `${SYSTEM_CONFIGS}/effective`,
   systemConfigsHistory: `${SYSTEM_CONFIGS}/history`,
+  // A5 audit：列表 / 动作目录 / 详情 / 异步导出
+  auditLogs: AUDIT_LOGS,
+  auditLog: (logId: string): string => `${AUDIT_LOGS}/${encodeURIComponent(logId)}`,
+  auditLogActions: `${AUDIT_LOGS}/actions`,
+  auditExport: `${AUDIT_LOGS}/export`,
+  auditExports: `${AUDIT_LOGS}/exports`,
+  auditExportJob: (exportId: string): string =>
+    `${AUDIT_LOGS}/exports/${encodeURIComponent(exportId)}`,
+  auditExportDownload: (exportId: string): string =>
+    `${AUDIT_LOGS}/exports/${encodeURIComponent(exportId)}/download`,
 } as const;

apps/web/src/api/query-keys.ts

@@ -35,4 +35,12 @@ export const queryKeys = {
   systemConfigs: ['system-configs'] as const,
   systemConfigsEffective: ['system-configs', 'effective'] as const,
   systemConfigHistory: (query: object) => ['system-configs', 'history', query] as const,
+  // A5 audit
+  auditLogs: ['audit-logs'] as const,
+  auditLogList: (query: object) => ['audit-logs', 'list', query] as const,
+  auditLog: (logId: string) => ['audit-logs', 'detail', logId] as const,
+  auditActions: ['audit-logs', 'actions'] as const,
+  auditExports: ['audit-exports'] as const,
+  auditExportList: (query: object) => ['audit-exports', 'list', query] as const,
+  auditExport: (exportId: string) => ['audit-exports', 'detail', exportId] as const,
 };

apps/web/src/hooks/queries/use-audit.ts

@@ -0,0 +1,155 @@
+/**
+ * A5 审计日志查询与写操作（TanStack Query 唯一入口）。
+ *
+ * - 列表用 `useInfiniteQuery` 做真实游标累加，「加载更多」追加下一页；
+ * - 详情请求本身会写 `audit.log.view`（后端拦截器），前端只负责读取；
+ * - 导出为异步任务：创建后失效审计列表，让「导出本身留痕」的新记录可见；
+ * - 导出进度按 status 轮询（queued / running → 1.5s），成功 / 失败即停止。
+ */
+import type {
+  AuditExportCreateInput,
+  AuditExportCreateResponse,
+  AuditExportJob,
+  AuditExportListQuery,
+  AuditExportListResponse,
+  AuditLogActionsResponse,
+  AuditLogDetail,
+  AuditLogFilter,
+  AuditLogListQuery,
+  AuditLogListResponse,
+} from '@lingxi/shared';
+import {
+  type InfiniteData,
+  keepPreviousData,
+  useInfiniteQuery,
+  type UseInfiniteQueryResult,
+  useMutation,
+  type UseMutationResult,
+  useQuery,
+  useQueryClient,
+  type UseQueryResult,
+} from '@tanstack/react-query';
+
+import {
+  createAuditExport,
+  fetchAuditActions,
+  fetchAuditExport,
+  fetchAuditExports,
+  fetchAuditLogDetail,
+  fetchAuditLogs,
+} from '@/api/audit';
+import { ApiError } from '@/api/client';
+import { queryKeys } from '@/api/query-keys';
+
+/** 审计列表每页条数（与后端默认上限 100 对齐，取 20 兼顾首屏） */
+export const AUDIT_LOG_PAGE_SIZE = 20;
+/** 导出任务列表每页条数 */
+export const AUDIT_EXPORT_PAGE_SIZE = 20;
+/** 导出进行中轮询间隔 */
+const EXPORT_POLL_INTERVAL_MS = 1500;
+
+/** 游标分页列表：下一页靠后端返回的 next_cursor，不猜页码 */
+export function useAuditLogsInfiniteQuery(
+  filter: AuditLogFilter,
+): UseInfiniteQueryResult<InfiniteData<AuditLogListResponse>> {
+  return useInfiniteQuery({
+    queryKey: queryKeys.auditLogList({ ...filter, limit: AUDIT_LOG_PAGE_SIZE }),
+    queryFn: ({ pageParam }) =>
+      fetchAuditLogs({
+        ...filter,
+        limit: AUDIT_LOG_PAGE_SIZE,
+        ...(pageParam === '' ? {} : { cursor: pageParam }),
+      }),
+    initialPageParam: '',
+    getNextPageParam: (lastPage) => lastPage.next_cursor,
+    staleTime: 10_000,
+  });
+}
+
+/** 单页列表（详情页「相关记录」等小范围读取） */
+export function useAuditLogsQuery(
+  query: Partial<AuditLogListQuery>,
+  options: { enabled?: boolean } = {},
+): UseQueryResult<AuditLogListResponse> {
+  return useQuery({
+    queryKey: queryKeys.auditLogList(query),
+    queryFn: () => fetchAuditLogs(query),
+    enabled: options.enabled ?? true,
+    placeholderData: keepPreviousData,
+    staleTime: 10_000,
+  });
+}
+
+/** 详情：40401 不做无意义重试，避免「重试 → loading → 又失败」的抖动 */
+export function useAuditLogDetailQuery(logId: string | null): UseQueryResult<AuditLogDetail> {
+  return useQuery({
+    queryKey: queryKeys.auditLog(logId ?? ''),
+    queryFn: () => fetchAuditLogDetail(logId ?? ''),
+    enabled: logId !== null && logId !== '',
+    staleTime: 10_000,
+    retry: (failureCount, error) => {
+      if (error instanceof ApiError && error.code === 40401) return false;
+      return failureCount < 2;
+    },
+  });
+}
+
+/** 动作目录：中文名 / 分类，筛选下拉与标签映射共用 */
+export function useAuditActionsQuery(): UseQueryResult<AuditLogActionsResponse> {
+  return useQuery({
+    queryKey: queryKeys.auditActions,
+    queryFn: fetchAuditActions,
+    staleTime: 5 * 60_000,
+  });
+}
+
+/** 我的导出历史 */
+export function useAuditExportsQuery(
+  options: { enabled?: boolean } = {},
+): UseQueryResult<AuditExportListResponse> {
+  return useQuery({
+    queryKey: queryKeys.auditExportList({ limit: AUDIT_EXPORT_PAGE_SIZE }),
+    queryFn: () => fetchAuditExports({ limit: AUDIT_EXPORT_PAGE_SIZE }),
+    enabled: options.enabled ?? true,
+    staleTime: 5_000,
+  });
+}
+
+/** 单个导出任务：进行中按 1.5s 轮询，终态自动停止 */
+export function useAuditExportQuery(
+  exportId: string | null,
+  options: { enabled?: boolean } = {},
+): UseQueryResult<AuditExportJob> {
+  return useQuery({
+    queryKey: queryKeys.auditExport(exportId ?? ''),
+    queryFn: () => fetchAuditExport(exportId ?? ''),
+    enabled: (options.enabled ?? true) && exportId !== null && exportId !== '',
+    refetchInterval: (query) => {
+      const status = query.state.data?.status;
+      return status === 'queued' || status === 'running' ? EXPORT_POLL_INTERVAL_MS : false;
+    },
+    staleTime: 0,
+    retry: 1,
+  });
+}
+
+/** 创建导出：成功后失效审计列表与导出历史（导出动作自身会生成 audit.export 记录） */
+export function useCreateAuditExportMutation(): UseMutationResult<
+  AuditExportCreateResponse,
+  Error,
+  AuditExportCreateInput
+> {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createAuditExport,
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: queryKeys.auditLogs }),
+        queryClient.invalidateQueries({ queryKey: queryKeys.auditExports }),
+      ]);
+    },
+  });
+}
+
+/** 导出历史查询参数（供调用方在需要时扩展） */
+export type AuditExportHistoryQuery = Partial<AuditExportListQuery>;

apps/web/src/layout/AppLayout.tsx

@@ -11,7 +11,7 @@ import { PageBreadcrumbs } from './PageBreadcrumbs';
 import { SideNav } from './SideNav';
 import { TopBar } from './TopBar';
 
-/** 用户管理、部门管理、数据字典、系统配置为「满高主从布局」，由页面自己控制内部滚动 */
+/** 用户 / 部门 / 字典 / 系统配置 / 操作日志 / 运行日志为「满高布局」，由页面自己控制内部滚动 */
 function isFlushRoute(pathname: string): boolean {
   return (
     pathname === ROUTES.system.users ||
@@ -19,7 +19,10 @@ function isFlushRoute(pathname: string): boolean {
     pathname === ROUTES.system.departments ||
     pathname === ROUTES.system.dicts ||
     pathname.startsWith(`${ROUTES.system.dicts}/`) ||
-    pathname === ROUTES.system.settings
+    pathname === ROUTES.system.settings ||
+    pathname === ROUTES.system.auditLogs ||
+    pathname.startsWith(`${ROUTES.system.auditLogs}/`) ||
+    pathname === ROUTES.system.runLogs
   );
 }
 

apps/web/src/layout/PageBreadcrumbs.tsx

@@ -1,7 +1,11 @@
 import type { ReactNode } from 'react';
 import { Link } from 'react-router';
 
-import { getRoleSectionTrail, getUserSectionTrail } from '@/navigation/breadcrumbs';
+import {
+  getAuditSectionTrail,
+  getRoleSectionTrail,
+  getUserSectionTrail,
+} from '@/navigation/breadcrumbs';
 import { getBreadcrumbs, NAV_MODULES } from '@/navigation/nav-config';
 
 export interface PageBreadcrumbsProps {
@@ -12,6 +16,7 @@ export function PageBreadcrumbs({ pathname }: PageBreadcrumbsProps): ReactNode {
   const entries =
     getUserSectionTrail(pathname) ??
     getRoleSectionTrail(pathname) ??
+    getAuditSectionTrail(pathname) ??
     getBreadcrumbs(NAV_MODULES, pathname);
   return (
     <nav className="lx-breadcrumbs" aria-label="面包屑">

apps/web/src/main.tsx

@@ -12,6 +12,8 @@ import '@/styles/departments.css';
 import '@/styles/client.css';
 import '@/styles/dicts.css';
 import '@/styles/settings.css';
+import '@/styles/audit.css';
+import '@/styles/run-logs.css';
 
 import { LocaleProvider } from '@douyinfe/semi-ui-19';
 import { localeZhCN } from '@lingxi/ui';

apps/web/src/navigation/breadcrumbs.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { getRoleSectionTrail, getUserSectionTrail } from './breadcrumbs';
+import { getAuditSectionTrail, getRoleSectionTrail, getUserSectionTrail } from './breadcrumbs';
 
 describe('面包屑子路由补全', () => {
   it('角色新建页：工作台 / 管理中心 / 角色管理 / 新建角色', () => {
@@ -28,6 +28,19 @@ describe('面包屑子路由补全', () => {
     expect(getRoleSectionTrail('/system/roles')).toBeNull();
   });
 
+  it('操作日志详情：管理中心 / 操作日志 / 日志详情', () => {
+    const trail = getAuditSectionTrail('/system/audit-logs/01HZZZZZZZZZZZZZZZZZZZZZZZ');
+    expect(trail?.map((entry) => entry.label)).toEqual([
+      '工作台',
+      '管理中心',
+      '操作日志',
+      '日志详情',
+    ]);
+    expect(trail?.[2]?.path).toBe('/system/audit-logs');
+    expect(getAuditSectionTrail('/system/audit-logs')).toBeNull();
+    expect(getAuditSectionTrail('/system/logs')).toBeNull();
+  });
+
   it('用户子路由补全不受影响', () => {
     expect(getUserSectionTrail('/system/users/new')?.map((entry) => entry.label)).toEqual([
       '工作台',

apps/web/src/navigation/breadcrumbs.ts

@@ -46,3 +46,16 @@ export function getUserSectionTrail(pathname: string): BreadcrumbEntry[] | null
   }
   return null;
 }
+
+/** 操作日志详情不在 nav-config 菜单项里，这里补齐：管理中心 / 操作日志 / 日志详情 */
+export function getAuditSectionTrail(pathname: string): BreadcrumbEntry[] | null {
+  if (/^\/system\/audit-logs\/[^/]+$/.test(pathname)) {
+    return [
+      { key: 'home', label: '工作台', path: ROUTES.home },
+      { key: 'system', label: '管理中心' },
+      { key: 'audit', label: '操作日志', path: ROUTES.system.auditLogs },
+      { key: 'audit-detail', label: '日志详情' },
+    ];
+  }
+  return null;
+}

apps/web/src/navigation/nav-config.spec.ts

@@ -1,4 +1,5 @@
 import type { PermissionCode } from '@lingxi/shared';
+import { IconServer } from '@lingxi/ui/icons';
 import { describe, expect, it } from 'vitest';
 
 import { filterNavByPermissions, findActiveNav, getBreadcrumbs, NAV_MODULES } from './nav-config';
@@ -75,6 +76,34 @@ describe('导航配置', () => {
     expect(findActiveNav(NAV_MODULES, '/system/dicts')?.item?.label).toBe('数据字典');
   });
 
+  it('A5：操作日志 / 运行日志 / 字段管理命名、权限与归属', () => {
+    const systemItems = NAV_MODULES.find((module) => module.key === 'system')?.items ?? [];
+    const auditItem = systemItems.find((item) => item.key === 'audit');
+    const runlogsItem = systemItems.find((item) => item.key === 'runlogs');
+    const customerFieldsItem = systemItems.find((item) => item.key === 'customer-fields');
+
+    expect(auditItem?.label).toBe('操作日志');
+    expect(auditItem?.path).toBe('/system/audit-logs');
+    expect(auditItem?.permission).toBe('audit:read');
+    expect(runlogsItem?.label).toBe('运行日志');
+    expect(runlogsItem?.path).toBe('/system/logs');
+    expect(runlogsItem?.permission).toBe('audit:read');
+    expect(runlogsItem?.icon).toBe(IconServer);
+    expect(customerFieldsItem?.label).toBe('字段管理');
+
+    // 运行日志排在操作日志之后
+    const auditIndex = systemItems.findIndex((item) => item.key === 'audit');
+    const runlogsIndex = systemItems.findIndex((item) => item.key === 'runlogs');
+    expect(runlogsIndex).toBe(auditIndex + 1);
+
+    expect(findActiveNav(NAV_MODULES, '/system/logs')?.item?.label).toBe('运行日志');
+    expect(findActiveNav(NAV_MODULES, '/system/logs')?.module.key).toBe('system');
+    expect(findActiveNav(NAV_MODULES, '/system/audit-logs')?.item?.label).toBe('操作日志');
+    expect(
+      findActiveNav(NAV_MODULES, '/system/audit-logs/01HZZZZZZZZZZZZZZZZZZZZZZZ')?.item?.label,
+    ).toBe('操作日志');
+  });
+
   it('按路径定位当前模块与菜单', () => {
     const active = findActiveNav(NAV_MODULES, '/material/quick-review');
     expect(active?.module.key).toBe('material');

apps/web/src/navigation/nav-config.ts

@@ -17,6 +17,7 @@ import {
   IconPlay,
   IconRobot,
   IconScript,
+  IconServer,
   IconSettings,
   IconShield,
   IconStack,
@@ -305,12 +306,20 @@ export const NAV_MODULES: readonly NavModule[] = [
       },
       {
         key: 'audit',
-        label: '审计日志',
+        label: '操作日志',
         path: '/system/audit-logs',
         icon: IconView,
         permission: Permission.AUDIT_READ,
         description: '关键操作留痕与导出记录',
       },
+      {
+        key: 'runlogs',
+        label: '运行日志',
+        path: '/system/logs',
+        icon: IconServer,
+        permission: Permission.AUDIT_READ,
+        description: '日志平台入口、trace 检索与运行日志说明',
+      },
       {
         key: 'ai',
         label: '模型接入',
@@ -345,7 +354,7 @@ export const NAV_MODULES: readonly NavModule[] = [
       },
       {
         key: 'customer-fields',
-        label: '客户字段',
+        label: '字段管理',
         path: '/system/customer-fields/approvals',
         icon: IconTask,
         permission: Permission.CUSTOMER_FIELD_APPROVE,

apps/web/src/pages/system/audit-logs/AuditDiffView.tsx

@@ -0,0 +1,143 @@
+/* eslint-disable max-lines-per-function -- 详情 diff 视图包含表格 / 原始 JSON 双视图与失败态，集中便于保持展示口径 */
+import type { AuditLogDetail } from '@lingxi/shared';
+import { PageEmpty } from '@lingxi/ui';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+
+import {
+  AUDIT_DIFF_KIND_META,
+  auditDiffFieldLabel,
+  formatAuditDiffValue,
+  formatAuditRawJson,
+} from './audit-display';
+
+type DiffView = 'diff' | 'raw';
+
+export interface AuditDiffViewProps {
+  detail: AuditLogDetail;
+}
+
+/** 详情主体：变更对比（默认）/ 完整原始 JSON 切换 */
+export function AuditDiffView({ detail }: AuditDiffViewProps): ReactNode {
+  const [view, setView] = useState<DiffView>('diff');
+  const failed = detail.result === 'failure';
+  const diff = detail.diff;
+
+  return (
+    <section className="lx-audit-detail-card lx-audit-diff" aria-label="变更对比">
+      <div className="lx-audit-detail-card__head">
+        <b>变更对比</b>
+        <span className="lx-audit-detail-card__count">
+          {diff.length === 0 ? '无字段变更' : `${String(diff.length)} 个字段变更`}
+        </span>
+        <div className="lx-audit-seg" role="tablist" aria-label="变更展示方式">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={view === 'diff'}
+            className={`lx-audit-seg__item${view === 'diff' ? ' is-active' : ''}`}
+            onClick={() => {
+              setView('diff');
+            }}
+          >
+            对比视图
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={view === 'raw'}
+            className={`lx-audit-seg__item${view === 'raw' ? ' is-active' : ''}`}
+            onClick={() => {
+              setView('raw');
+            }}
+          >
+            原始 JSON
+          </button>
+        </div>
+      </div>
+
+      {failed ? (
+        <div className="lx-audit-fail-box" role="alert">
+          <b>操作失败 · 变更未生效</b>
+          <span>
+            {detail.error_code === null ? '' : `错误码 ${detail.error_code} · `}
+            {detail.error_message ?? '服务端未返回错误信息'}
+          </span>
+        </div>
+      ) : null}
+
+      {view === 'diff' ? (
+        diff.length === 0 ? (
+          <PageEmpty
+            title="没有可展示的字段变更"
+            description="该记录未产生字段级前后值差异，可切换到「原始 JSON」查看完整记录。"
+          />
+        ) : (
+          <div className="lx-audit-diff__wrap">
+            <table className="lx-audit-diff-table">
+              <thead>
+                <tr>
+                  <th scope="col">变更字段</th>
+                  <th scope="col">变更前</th>
+                  <th scope="col">变更后</th>
+                </tr>
+              </thead>
+              <tbody>
+                {diff.map((row) => {
+                  const meta = AUDIT_DIFF_KIND_META[row.kind];
+                  const rejected = failed && row.kind !== 'removed';
+                  return (
+                    <tr key={`${row.kind}-${row.path}`} className={`is-${meta.tone}`}>
+                      <td>
+                        <span className={`lx-audit-tag lx-audit-tag--${meta.tone}`}>
+                          {meta.label}
+                        </span>
+                        <b>{auditDiffFieldLabel(row)}</b>
+                        {auditDiffFieldLabel(row) === row.path ? null : <code>{row.path}</code>}
+                      </td>
+                      <td className="lx-audit-diff__before">
+                        {row.kind === 'added' ? (
+                          <span className="lx-audit-muted">—</span>
+                        ) : (
+                          formatAuditDiffValue(row.before)
+                        )}
+                      </td>
+                      <td
+                        className={
+                          rejected
+                            ? 'lx-audit-diff__after lx-audit-diff__after--rejected'
+                            : 'lx-audit-diff__after'
+                        }
+                      >
+                        {row.kind === 'removed' ? (
+                          <span className="lx-audit-muted">—</span>
+                        ) : (
+                          formatAuditDiffValue(row.after)
+                        )}
+                        {rejected ? <em className="lx-audit-diff__rejected">未生效</em> : null}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )
+      ) : (
+        <div className="lx-audit-raw">
+          <div className="lx-audit-raw__head">
+            完整审计记录（原始 JSON）· 含 id / 操作人 / 动作 / 对象 / 请求 / 前后值
+          </div>
+          <pre className="lx-audit-raw__code">{formatAuditRawJson(detail)}</pre>
+        </div>
+      )}
+
+      {detail.reason === null || detail.reason === '' ? null : (
+        <div className="lx-audit-reason">
+          <span>变更原因</span>
+          <p>{detail.reason}</p>
+        </div>
+      )}
+    </section>
+  );
+}

apps/web/src/pages/system/audit-logs/AuditExportSheet.tsx

@@ -0,0 +1,487 @@
+/* eslint-disable max-lines-per-function, complexity -- 导出抽屉编排创建 / 进度轮询 / 历史与下载，集中便于追踪状态流转 */
+import { Button, Progress, SideSheet } from '@douyinfe/semi-ui-19';
+import { type AuditExportJob, type AuditLogFilter, systemConfigDefinition } from '@lingxi/shared';
+import { ErrorState, notifyError, notifySuccess, PageEmpty } from '@lingxi/ui';
+import { IconDownload, IconRefresh } from '@lingxi/ui/icons';
+import type { ReactNode } from 'react';
+import { useMemo, useState } from 'react';
+
+import { buildAuditExportDownloadUrl } from '@/api/audit';
+import {
+  useAuditExportQuery,
+  useAuditExportsQuery,
+  useCreateAuditExportMutation,
+} from '@/hooks/queries/use-audit';
+import { useEffectiveConfigsQuery } from '@/hooks/queries/use-configs';
+import { useAuthStore } from '@/stores/auth-store';
+
+import {
+  AUDIT_EXPORT_STATUS_META,
+  auditExportPercent,
+  auditExportRowsText,
+  canDownloadAuditExport,
+  formatAuditDateTime,
+  formatFileSize,
+  formatRowCount,
+  isAuditExportExpired,
+  summarizeAuditFilterRange,
+} from './audit-display';
+import {
+  AUDIT_RESULT_OPTIONS,
+  type AuditFilterDraft,
+  describeAuditTimeRange,
+  toAuditLogFilter,
+} from './audit-filter-utils';
+import type { AuditFilterOption } from './AuditFilters';
+
+const EXPORT_MAX_ROWS_KEY = 'audit.export_max_rows';
+const EXPORT_RETENTION_KEY = 'audit.retention_months';
+const EXPORT_TTL_KEY = 'platform.export.signed_url_ttl_seconds';
+
+const EXPORT_FIELDS = ['时间', '操作人', '操作', '对象', '客户', '结果', 'IP', 'trace_id'] as const;
+
+export interface AuditExportSheetProps {
+  visible: boolean;
+  /** 当前已应用的筛选（导出范围跟随列表当前筛选） */
+  draft: AuditFilterDraft;
+  categoryOptions: readonly AuditFilterOption[];
+  customerOptions: readonly AuditFilterOption[];
+  loadedCount: number;
+  onClose: () => void;
+}
+
+type ExportTab = 'create' | 'history';
+
+function definitionNumber(key: string, fallback: number): number {
+  const definition = systemConfigDefinition(key);
+  return typeof definition?.defaultValue === 'number' ? definition.defaultValue : fallback;
+}
+
+function statusTag(job: AuditExportJob): ReactNode {
+  const meta = AUDIT_EXPORT_STATUS_META[job.status];
+  return <span className={`lx-audit-tag lx-audit-tag--${meta.tone}`}>{meta.label}</span>;
+}
+
+function downloadExport(job: AuditExportJob): void {
+  if (job.download_token === null || job.download_token === '') {
+    notifyError('下载链接不可用，请刷新后重试');
+    return;
+  }
+  window.open(buildAuditExportDownloadUrl(job.id, job.download_token), '_blank', 'noopener');
+  notifySuccess('已打开下载链接，下载动作会写入操作日志');
+}
+
+function Fact({ label, value }: { label: string; value: ReactNode }): ReactNode {
+  return (
+    <div className="lx-audit-fact">
+      <span>{label}</span>
+      <b>{value}</b>
+    </div>
+  );
+}
+
+/** 导出范围摘要（跟随列表当前筛选，不做「预计条数」这类无法真实获知的推算） */
+function scopeRows(
+  draft: AuditFilterDraft,
+  categoryLabel: string,
+  customerLabel: string,
+): { label: string; value: string }[] {
+  const time = describeAuditTimeRange(draft, new Date());
+  const resultLabel =
+    AUDIT_RESULT_OPTIONS.find((option) => option.value === draft.result)?.label ?? '全部结果';
+  return [
+    { label: '时间范围', value: `${time.label}（${time.range}）` },
+    { label: '动作分类', value: categoryLabel },
+    { label: '操作人', value: draft.actor.trim() === '' ? '全部操作人' : draft.actor.trim() },
+    { label: '客户', value: customerLabel },
+    { label: '结果', value: resultLabel },
+    { label: '关键字', value: draft.keyword.trim() === '' ? '未设置' : draft.keyword.trim() },
+  ];
+}
+
+interface ExportProgressProps {
+  job: AuditExportJob;
+  onRetry: () => void;
+}
+
+function ExportProgress({ job, onRetry }: ExportProgressProps): ReactNode {
+  const now = new Date();
+  const expired = isAuditExportExpired(job, now);
+  if (job.status === 'queued' || job.status === 'running') {
+    const percent = auditExportPercent(job);
+    return (
+      <div className="lx-audit-export-progress">
+        <div className="lx-audit-export-progress__head">
+          {statusTag(job)}
+          <b>{job.status === 'queued' ? '任务排队中' : '正在生成 CSV 文件'}</b>
+          <span className="lx-audit-export-progress__pct">{percent}%</span>
+        </div>
+        <Progress percent={percent} showInfo={false} stroke="var(--lx-color-brand)" />
+        <div className="lx-audit-export-progress__meta">
+          <span>{auditExportRowsText(job)}</span>
+          <span>{job.truncated ? '已达单次上限，文件会被截断' : '可关闭窗口，任务在后台继续'}</span>
+        </div>
+        <div className="lx-audit-facts">
+          <Fact label="任务号" value={<code>{job.id}</code>} />
+          <Fact label="创建时间" value={formatAuditDateTime(job.requested_at)} />
+          <Fact label="文件格式" value="CSV（只读）" />
+          <Fact label="执行状态" value={AUDIT_EXPORT_STATUS_META[job.status].label} />
+        </div>
+      </div>
+    );
+  }
+  if (job.status === 'succeeded') {
+    return (
+      <div className="lx-audit-export-result">
+        <div className="lx-audit-export-success">
+          <b>导出完成</b>
+          <span>
+            {job.id} · {formatRowCount(job.row_count)} 条 · CSV
+          </span>
+        </div>
+        <div className="lx-audit-facts">
+          <Fact label="文件大小" value={formatFileSize(job.file_size)} />
+          <Fact label="完成时间" value={formatAuditDateTime(job.finished_at)} />
+          <Fact label="过期时间" value={formatAuditDateTime(job.expires_at)} />
+          <Fact label="下载次数" value={`${String(job.download_count)} 次`} />
+          <Fact label="实际条数" value={formatRowCount(job.row_count)} />
+          <Fact label="是否截断" value={job.truncated ? '已截断（达单次上限）' : '未截断'} />
+        </div>
+        {expired ? (
+          <div className="lx-audit-export-warn">
+            下载链接已过期。请点击「重新导出」生成新任务；过期任务仍保留在导出历史中。
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+  return (
+    <div className="lx-audit-export-result">
+      <div className="lx-audit-export-fail">
+        <b>导出失败</b>
+        <span>{job.error_message ?? '后台生成失败，请重新导出'}</span>
+      </div>
+      <div className="lx-audit-facts">
+        <Fact label="任务号" value={<code>{job.id}</code>} />
+        <Fact label="失败时间" value={formatAuditDateTime(job.finished_at)} />
+        <Fact label="筛选范围" value={summarizeAuditFilterRange(job.filters)} />
+        <Fact label="重试" value="重新导出会生成新的任务号" />
+      </div>
+      <Button icon={<IconRefresh size={16} />} onClick={onRetry} className="lx-audit-export-retry">
+        重新导出
+      </Button>
+    </div>
+  );
+}
+
+/** 操作日志导出抽屉（方案 A：右侧 560，创建导出 / 导出历史两个 Tab） */
+export function AuditExportSheet({
+  visible,
+  draft,
+  categoryOptions,
+  customerOptions,
+  loadedCount,
+  onClose,
+}: AuditExportSheetProps): ReactNode {
+  const [tab, setTab] = useState<ExportTab>('create');
+  const [activeExportId, setActiveExportId] = useState<string | null>(null);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const userName = useAuthStore((state) => state.user?.name ?? '—');
+
+  const effective = useEffectiveConfigsQuery();
+  const maxRowsConfig = effective.data?.[EXPORT_MAX_ROWS_KEY];
+  const maxRows =
+    typeof maxRowsConfig === 'number'
+      ? maxRowsConfig
+      : definitionNumber(EXPORT_MAX_ROWS_KEY, 50000);
+  const retentionDefinition = systemConfigDefinition(EXPORT_RETENTION_KEY);
+  const retentionMonths =
+    typeof retentionDefinition?.min === 'number' ? retentionDefinition.min : 12;
+  const ttlDefinition = systemConfigDefinition(EXPORT_TTL_KEY);
+  const ttlSeconds =
+    typeof ttlDefinition?.defaultValue === 'number' ? ttlDefinition.defaultValue : 900;
+
+  const createExport = useCreateAuditExportMutation();
+  const jobQuery = useAuditExportQuery(activeExportId, { enabled: visible });
+  const job = jobQuery.data ?? null;
+  const history = useAuditExportsQuery({ enabled: visible && tab === 'history' });
+
+  const categoryLabel =
+    categoryOptions.find((option) => option.value === draft.category)?.label ?? '全部分类';
+  const customerLabel =
+    customerOptions.find((option) => option.value === draft.customerId)?.label ?? '全部客户';
+  const scope = useMemo(
+    () => scopeRows(draft, categoryLabel, customerLabel),
+    [draft, categoryLabel, customerLabel],
+  );
+
+  const handleCreate = async (): Promise<void> => {
+    setSubmitError(null);
+    const filters: AuditLogFilter = toAuditLogFilter(draft, new Date());
+    try {
+      const result = await createExport.mutateAsync({ format: 'csv', filters });
+      setActiveExportId(result.id);
+      setTab('create');
+      notifySuccess('导出任务已创建，导出动作已写入操作日志');
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : '创建导出任务失败';
+      setSubmitError(message);
+      notifyError(message);
+    }
+  };
+
+  const retry = (): void => {
+    void handleCreate();
+  };
+
+  const now = new Date();
+  const canDownload = job !== null && canDownloadAuditExport(job, now);
+
+  const footer =
+    tab === 'history' ? (
+      <Button onClick={onClose}>关闭</Button>
+    ) : job === null ? (
+      <>
+        <Button onClick={onClose}>取消</Button>
+        <Button
+          theme="solid"
+          type="primary"
+          loading={createExport.isPending}
+          onClick={() => {
+            void handleCreate();
+          }}
+        >
+          创建导出任务
+        </Button>
+      </>
+    ) : job.status === 'queued' || job.status === 'running' ? (
+      <>
+        <Button onClick={onClose}>关闭</Button>
+        <Button
+          theme="solid"
+          type="primary"
+          onClick={() => {
+            setTab('history');
+          }}
+        >
+          查看导出历史
+        </Button>
+      </>
+    ) : job.status === 'succeeded' ? (
+      <>
+        <Button onClick={onClose}>关闭</Button>
+        <Button
+          theme="solid"
+          type="primary"
+          icon={<IconDownload size={16} />}
+          disabled={!canDownload}
+          onClick={() => {
+            downloadExport(job);
+          }}
+        >
+          {canDownload ? '下载文件' : '链接已过期'}
+        </Button>
+      </>
+    ) : (
+      <>
+        <Button onClick={onClose}>关闭</Button>
+        <Button
+          theme="solid"
+          type="primary"
+          icon={<IconRefresh size={16} />}
+          loading={createExport.isPending}
+          onClick={retry}
+        >
+          重新导出
+        </Button>
+      </>
+    );
+
+  return (
+    <SideSheet
+      visible={visible}
+      width={560}
+      title="导出操作日志"
+      closeOnEsc
+      maskClosable={false}
+      onCancel={onClose}
+      footer={<div className="lx-audit-export-footer">{footer}</div>}
+    >
+      <div className="lx-audit-export">
+        <p className="lx-audit-export__sub">
+          当前筛选已加载 {loadedCount} 条 · CSV · 审计记录只读，实际导出条数以服务端筛选为准
+        </p>
+
+        <div className="lx-audit-tabs" role="tablist" aria-label="导出">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={tab === 'create'}
+            className={`lx-audit-tab${tab === 'create' ? ' is-active' : ''}`}
+            onClick={() => {
+              setTab('create');
+            }}
+          >
+            创建导出
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={tab === 'history'}
+            className={`lx-audit-tab${tab === 'history' ? ' is-active' : ''}`}
+            onClick={() => {
+              setTab('history');
+            }}
+          >
+            导出历史
+            <i className="lx-audit-tab__count">
+              {history.data === undefined ? '—' : String(history.data.items.length)}
+            </i>
+          </button>
+        </div>
+
+        {tab === 'create' ? (
+          <div role="tabpanel" className="lx-audit-export__panel">
+            <div className="lx-audit-export__label">导出范围（跟随当前筛选）</div>
+            <div className="lx-audit-scope">
+              {scope.map((row) => (
+                <div key={row.label} className="lx-audit-scope__row">
+                  <span>{row.label}</span>
+                  <b>{row.value}</b>
+                </div>
+              ))}
+            </div>
+
+            <div className="lx-audit-facts">
+              <Fact label="文件格式" value="CSV（只读）" />
+              <Fact label="单次上限" value={`${formatRowCount(maxRows)} 行`} />
+              <Fact label="文件有效期" value={`约 ${String(Math.round(ttlSeconds / 60))} 分钟`} />
+              <Fact label="审计保留期" value={`≥ ${String(retentionMonths)} 个月`} />
+            </div>
+
+            {job === null ? (
+              <>
+                <div className="lx-audit-export__label">导出字段（CSV 列）</div>
+                <div className="lx-audit-chips">
+                  {EXPORT_FIELDS.map((field) => (
+                    <span key={field} className="lx-audit-chip">
+                      {field}
+                    </span>
+                  ))}
+                </div>
+                <div className="lx-audit-export-flow">
+                  <div className="lx-audit-export-flow__step">
+                    <i>1</i>
+                    <span>创建任务并写入操作日志（audit.export）</span>
+                  </div>
+                  <div className="lx-audit-export-flow__step">
+                    <i>2</i>
+                    <span>后台生成 CSV，通常数秒内完成</span>
+                  </div>
+                  <div className="lx-audit-export-flow__step">
+                    <i>3</i>
+                    <span>短时效链接内下载，下载再次留痕</span>
+                  </div>
+                </div>
+                {submitError === null ? null : (
+                  <div className="lx-audit-export-error">{submitError}</div>
+                )}
+                <div className="lx-audit-export-note">
+                  CSV 为只读格式；超过单次上限会截断并在任务上标记 truncated。文件有效期以任务完成时
+                  返回的过期时间为准，审计记录按系统配置保留至少 {retentionMonths}{' '}
+                  个月，导出与下载都会写入 操作日志。
+                </div>
+              </>
+            ) : (
+              <ExportProgress job={job} onRetry={retry} />
+            )}
+          </div>
+        ) : (
+          <div role="tabpanel" className="lx-audit-export__panel">
+            <div className="lx-audit-history__toolbar">
+              <span>
+                {history.data === undefined
+                  ? '加载中…'
+                  : `共 ${String(history.data.items.length)} 个任务`}
+              </span>
+              <Button
+                size="small"
+                theme="borderless"
+                icon={<IconRefresh size={16} />}
+                loading={history.isFetching}
+                onClick={() => {
+                  void history.refetch();
+                }}
+              >
+                刷新
+              </Button>
+            </div>
+            {history.isPending ? <p className="lx-audit-muted">正在加载导出历史…</p> : null}
+            {history.error === null ? null : (
+              <ErrorState
+                title="导出历史加载失败"
+                message={history.error.message}
+                onRetry={() => {
+                  void history.refetch();
+                }}
+              />
+            )}
+            {!history.isPending && history.error === null && history.data.items.length === 0 ? (
+              <PageEmpty
+                title="还没有导出任务"
+                description="创建导出后会在这里看到任务号、条数、状态与下载入口。"
+              />
+            ) : null}
+            {!history.isPending && history.error === null
+              ? history.data.items.map((item) => (
+                  <div key={item.id} className="lx-audit-history-item">
+                    <div className="lx-audit-history-item__main">
+                      <b>
+                        {statusTag(item)} <code>{item.id}</code>
+                      </b>
+                      <span>
+                        {formatAuditDateTime(item.requested_at)} ·{' '}
+                        {formatRowCount(item.total_rows ?? item.row_count)} 条 · {userName}
+                      </span>
+                      <em>
+                        {summarizeAuditFilterRange(
+                          item.filters,
+                          (category) =>
+                            categoryOptions.find((option) => option.value === category)?.label ??
+                            category,
+                        )}
+                      </em>
+                    </div>
+                    <div className="lx-audit-history-item__side">
+                      {item.status === 'succeeded' ? (
+                        canDownloadAuditExport(item, new Date()) ? (
+                          <Button
+                            size="small"
+                            theme="borderless"
+                            icon={<IconDownload size={14} />}
+                            onClick={() => {
+                              downloadExport(item);
+                            }}
+                          >
+                            下载
+                          </Button>
+                        ) : (
+                          <span className="lx-audit-muted">链接已过期</span>
+                        )
+                      ) : item.status === 'failed' ? (
+                        <span className="lx-audit-history-item__fail">
+                          {item.error_message ?? '生成失败'}
+                        </span>
+                      ) : (
+                        <span className="lx-audit-muted">{auditExportPercent(item)}%</span>
+                      )}
+                    </div>
+                  </div>
+                ))
+              : null}
+          </div>
+        )}
+      </div>
+    </SideSheet>
+  );
+}

apps/web/src/pages/system/audit-logs/AuditFilters.tsx

@@ -0,0 +1,197 @@
+/* eslint-disable max-lines-per-function -- 筛选卡两行布局与自定义时间区间集中在一处 */
+import { Button, DatePicker, Input, RadioGroup, Select } from '@douyinfe/semi-ui-19';
+import { PageSkeleton } from '@lingxi/ui';
+import { IconRefresh, IconSearch } from '@lingxi/ui/icons';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
+
+import {
+  AUDIT_RESULT_OPTIONS,
+  AUDIT_TIME_PRESETS,
+  type AuditFilterDraft,
+  type AuditResultFilter,
+  describeAuditTimeRange,
+  formatDateInput,
+  parseDateInput,
+} from './audit-filter-utils';
+
+export interface AuditFilterOption {
+  value: string;
+  label: string;
+}
+
+export interface AuditFiltersProps {
+  draft: AuditFilterDraft;
+  categoryOptions: readonly AuditFilterOption[];
+  customerOptions: readonly AuditFilterOption[];
+  loadingCategories?: boolean;
+  loadingCustomers?: boolean;
+  searching?: boolean;
+  onChange: (draft: AuditFilterDraft) => void;
+  onApply: () => void;
+  onReset: () => void;
+}
+
+/** 操作日志筛选卡（方案 A：两行；第一行关键字 / 分类 / 操作人 / 客户 + 查询，第二行时间与结果） */
+export function AuditFilters({
+  draft,
+  categoryOptions,
+  customerOptions,
+  loadingCategories = false,
+  loadingCustomers = false,
+  searching = false,
+  onChange,
+  onApply,
+  onReset,
+}: AuditFiltersProps): ReactNode {
+  const customRange = useMemo<Date[] | undefined>(() => {
+    if (draft.timePreset !== 'custom') return undefined;
+    const from = parseDateInput(draft.customFrom);
+    const to = parseDateInput(draft.customTo);
+    if (from === null || to === null) return undefined;
+    return [from, to];
+  }, [draft.customFrom, draft.customTo, draft.timePreset]);
+
+  const timeHint = describeAuditTimeRange(draft, new Date());
+
+  const patch = (updates: Partial<AuditFilterDraft>): void => {
+    onChange({ ...draft, ...updates });
+  };
+
+  if (loadingCategories && categoryOptions.length === 0) {
+    return (
+      <section className="lx-audit-filters" aria-label="日志筛选">
+        <PageSkeleton rows={2} />
+      </section>
+    );
+  }
+
+  return (
+    <form
+      className="lx-audit-filters"
+      aria-label="日志筛选"
+      onSubmit={(event) => {
+        event.preventDefault();
+        onApply();
+      }}
+    >
+      <div className="lx-audit-filters__row">
+        <label className="lx-audit-field lx-audit-field--keyword">
+          <span>关键字</span>
+          <Input
+            value={draft.keyword}
+            prefix={<IconSearch size={16} />}
+            placeholder="操作人 / 对象 / trace_id / IP"
+            showClear
+            maxLength={100}
+            onChange={(value) => {
+              patch({ keyword: value });
+            }}
+            onEnterPress={onApply}
+          />
+        </label>
+        <label className="lx-audit-field">
+          <span>动作分类</span>
+          <Select
+            value={draft.category}
+            optionList={[{ value: '', label: '全部分类' }, ...categoryOptions]}
+            loading={loadingCategories}
+            showClear
+            onChange={(value) => {
+              patch({ category: typeof value === 'string' ? value : '' });
+            }}
+          />
+        </label>
+        <label className="lx-audit-field">
+          <span>操作人</span>
+          <Input
+            value={draft.actor}
+            placeholder="姓名 / 账号"
+            showClear
+            maxLength={64}
+            onChange={(value) => {
+              patch({ actor: value });
+            }}
+            onEnterPress={onApply}
+          />
+        </label>
+        <label className="lx-audit-field">
+          <span>客户</span>
+          <Select
+            value={draft.customerId}
+            optionList={[{ value: '', label: '全部客户' }, ...customerOptions]}
+            loading={loadingCustomers}
+            showClear
+            filter
+            onChange={(value) => {
+              patch({ customerId: typeof value === 'string' ? value : '' });
+            }}
+          />
+        </label>
+        <div className="lx-audit-filters__actions">
+          <Button icon={<IconRefresh size={16} />} onClick={onReset}>
+            重置
+          </Button>
+          <Button htmlType="submit" theme="solid" type="primary" icon={<IconSearch size={16} />}>
+            查询
+          </Button>
+        </div>
+      </div>
+
+      <div className="lx-audit-filters__sub">
+        <span className="lx-audit-filters__label">时间</span>
+        <RadioGroup
+          type="button"
+          buttonSize="small"
+          value={draft.timePreset}
+          options={AUDIT_TIME_PRESETS.map((preset) => ({
+            value: preset.value,
+            label: preset.label,
+          }))}
+          onChange={(event) => {
+            const next = String(event.target.value);
+            const preset = AUDIT_TIME_PRESETS.find((item) => item.value === next);
+            if (preset !== undefined) patch({ timePreset: preset.value });
+          }}
+        />
+        {draft.timePreset === 'custom' ? (
+          <DatePicker
+            className="lx-audit-filters__date"
+            type="dateRange"
+            value={customRange}
+            placeholder={['开始日期', '结束日期']}
+            onChange={(value) => {
+              if (!Array.isArray(value)) {
+                patch({ customFrom: '', customTo: '' });
+                return;
+              }
+              const [start, end] = value;
+              if (!(start instanceof Date) || !(end instanceof Date)) return;
+              patch({ customFrom: formatDateInput(start), customTo: formatDateInput(end) });
+            }}
+          />
+        ) : null}
+        <span className="lx-audit-filters__sep" aria-hidden="true" />
+        <Select
+          className="lx-audit-filters__result"
+          value={draft.result}
+          optionList={AUDIT_RESULT_OPTIONS.map((option) => ({
+            value: option.value,
+            label: option.label,
+          }))}
+          onChange={(value) => {
+            const next = typeof value === 'string' ? value : 'all';
+            const option: AuditResultFilter | undefined = AUDIT_RESULT_OPTIONS.find(
+              (item) => item.value === next,
+            )?.value;
+            patch({ result: option ?? 'all' });
+          }}
+        />
+        <span className="lx-audit-filters__hint">
+          {timeHint.label} · {timeHint.range}
+          {searching ? ' · 查询中…' : ''}
+        </span>
+      </div>
+    </form>
+  );
+}

apps/web/src/pages/system/audit-logs/AuditLogDetailPage.tsx

@@ -0,0 +1,286 @@
+/* eslint-disable max-lines-per-function -- 详情页编排摘要 / 上下文 / 相关记录查询，集中便于追踪数据流 */
+import { Button } from '@douyinfe/semi-ui-19';
+import type { AuditLogDetail } from '@lingxi/shared';
+import { ErrorState, notifyError, notifySuccess, PageEmpty, PageSkeleton } from '@lingxi/ui';
+import { IconBack, IconCopy, IconLock } from '@lingxi/ui/icons';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
+import { Link, useNavigate, useParams } from 'react-router';
+
+import { ApiError } from '@/api/client';
+import { useAuditLogDetailQuery, useAuditLogsQuery } from '@/hooks/queries/use-audit';
+import { auditLogDetailPath, ROUTES } from '@/routes';
+
+import { copyToClipboard } from './audit-clipboard';
+import {
+  AUDIT_RESULT_LABEL,
+  auditTargetTypeLabel,
+  buildRelatedAuditQuery,
+  formatAuditDateTime,
+  formatDuration,
+} from './audit-display';
+import { AuditDiffView } from './AuditDiffView';
+
+const RELATED_LIMIT = 5;
+
+function copyLink(): void {
+  void copyToClipboard(window.location.href).then((ok) => {
+    if (ok) notifySuccess('已复制当前日志链接');
+    else notifyError('复制失败，请从地址栏复制');
+  });
+}
+
+function copyTrace(traceId: string | null): void {
+  if (traceId === null || traceId === '') {
+    notifyError('该记录没有 trace_id');
+    return;
+  }
+  void copyToClipboard(traceId).then((ok) => {
+    if (ok) notifySuccess('已复制 trace_id');
+    else notifyError('复制失败，请手动选择文本');
+  });
+}
+
+function DetailHeader(): ReactNode {
+  const navigate = useNavigate();
+  return (
+    <header className="lx-audit-page__header lx-audit-detail__header">
+      <div className="lx-audit-detail__title">
+        <Button
+          theme="borderless"
+          icon={<IconBack size={18} />}
+          aria-label="返回操作日志列表"
+          onClick={() => {
+            void navigate(ROUTES.system.auditLogs);
+          }}
+        />
+        <div>
+          <h1>日志详情</h1>
+          <p>审计记录不可修改或删除，仅用于追溯</p>
+        </div>
+      </div>
+      <div className="lx-audit-page__actions">
+        <span className="lx-audit-readonly">
+          <IconLock size={14} />
+          只读 · append-only
+        </span>
+        <Button icon={<IconCopy size={16} />} onClick={copyLink}>
+          复制链接
+        </Button>
+      </div>
+    </header>
+  );
+}
+
+function DetailHero({ detail }: { detail: AuditLogDetail }): ReactNode {
+  return (
+    <section className="lx-audit-hero" aria-label="日志摘要">
+      <div className="lx-audit-hero__title">
+        <span className={`lx-audit-tag lx-audit-tag--category`}>{detail.category_label}</span>
+        <span className={`lx-audit-tag lx-audit-tag--${detail.result}`}>
+          {AUDIT_RESULT_LABEL[detail.result]}
+        </span>
+        <b>{detail.action_label}</b>
+        <code>{detail.action_code}</code>
+        <span className="lx-audit-hero__time">{formatAuditDateTime(detail.occurred_at)}</span>
+      </div>
+      <div className="lx-audit-hero__grid">
+        <div>
+          <span>操作人</span>
+          <b>{detail.actor_name ?? '系统'}</b>
+          <em>{detail.actor_account ?? '—'}</em>
+        </div>
+        <div>
+          <span>对象</span>
+          <b>{detail.target_name ?? '—'}</b>
+          <em>
+            {auditTargetTypeLabel(detail.target_type)}
+            {detail.target_id === null ? '' : ` · ${detail.target_id}`}
+          </em>
+        </div>
+        <div>
+          <span>客户</span>
+          <b>{detail.customer_name ?? '平台级（无客户）'}</b>
+          <em>{detail.customer_id ?? '—'}</em>
+        </div>
+      </div>
+      <div className="lx-audit-hero__meta">
+        <div>
+          <span>trace_id</span>
+          <b className="lx-audit-mono">{detail.trace_id ?? '—'}</b>
+          <Button
+            theme="borderless"
+            size="small"
+            icon={<IconCopy size={14} />}
+            aria-label="复制 trace_id"
+            disabled={detail.trace_id === null}
+            onClick={() => {
+              copyTrace(detail.trace_id);
+            }}
+          />
+        </div>
+        <div>
+          <span>IP 地址</span>
+          <b className="lx-audit-mono">{detail.ip ?? '—'}</b>
+        </div>
+        <div>
+          <span>请求</span>
+          <b className="lx-audit-mono">
+            {detail.http_method ?? '—'} {detail.http_path ?? '—'}
+          </b>
+        </div>
+        <div>
+          <span>耗时</span>
+          <b>{formatDuration(detail.duration_ms)}</b>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function DetailAside({ detail }: { detail: AuditLogDetail }): ReactNode {
+  const relatedFilter = useMemo(() => buildRelatedAuditQuery(detail), [detail]);
+  const related = useAuditLogsQuery(
+    relatedFilter === null ? { limit: RELATED_LIMIT } : { ...relatedFilter, limit: RELATED_LIMIT },
+    { enabled: relatedFilter !== null },
+  );
+  const relatedItems = (related.data?.items ?? [])
+    .filter((item) => item.id !== detail.id)
+    .slice(0, RELATED_LIMIT);
+
+  return (
+    <aside className="lx-audit-detail__aside">
+      <section className="lx-audit-detail-card">
+        <div className="lx-audit-detail-card__head">
+          <b>上下文</b>
+          <span className="lx-audit-detail-card__count">请求与来源</span>
+        </div>
+        <dl className="lx-audit-kv">
+          <dt>对象类型</dt>
+          <dd>{auditTargetTypeLabel(detail.target_type)}</dd>
+          <dt>对象 ID</dt>
+          <dd className="lx-audit-mono">{detail.target_id ?? '—'}</dd>
+          <dt>客户</dt>
+          <dd>{detail.customer_name ?? '平台级（无客户）'}</dd>
+          <dt>动作分类</dt>
+          <dd>{detail.category_label}</dd>
+          <dt>请求来源</dt>
+          <dd className="lx-audit-mono">
+            {detail.http_method ?? '—'} {detail.http_path ?? '—'}
+          </dd>
+          <dt>结果</dt>
+          <dd>
+            <span className={`lx-audit-tag lx-audit-tag--${detail.result}`}>
+              {AUDIT_RESULT_LABEL[detail.result]}
+            </span>
+          </dd>
+          <dt>trace_id</dt>
+          <dd className="lx-audit-mono">{detail.trace_id ?? '—'}</dd>
+          <dt>User-Agent</dt>
+          <dd>{detail.user_agent ?? '—'}</dd>
+        </dl>
+      </section>
+
+      <section className="lx-audit-detail-card">
+        <div className="lx-audit-detail-card__head">
+          <b>只读说明</b>
+          <IconLock size={14} />
+        </div>
+        <p className="lx-audit-detail-note">
+          审计表 append-only，只允许
+          INSERT；系统不提供修改与删除入口。操作日志用于业务追责，运行日志请前往
+          <Link to={ROUTES.system.runLogs} className="lx-audit-link">
+            运行日志
+          </Link>
+          。
+        </p>
+      </section>
+
+      {relatedItems.length === 0 ? null : (
+        <section className="lx-audit-detail-card">
+          <div className="lx-audit-detail-card__head">
+            <b>相关记录</b>
+            <span className="lx-audit-detail-card__count">同对象 / 同操作人</span>
+          </div>
+          <ul className="lx-audit-related">
+            {relatedItems.map((item) => (
+              <li key={item.id}>
+                <Link to={auditLogDetailPath(item.id)} className="lx-audit-related__link">
+                  <b>{item.action_label}</b>
+                  <span>{formatAuditDateTime(item.occurred_at)}</span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </aside>
+  );
+}
+
+/** 操作日志详情（方案 A：左 2/3 变更对比 + 原始 JSON，右 1/3 上下文 / 只读说明 / 相关记录） */
+export function AuditLogDetailPage(): ReactNode {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const detailQuery = useAuditLogDetailQuery(id ?? null);
+  const error = detailQuery.error;
+
+  if (detailQuery.isPending) {
+    return (
+      <div className="lx-audit-page">
+        <DetailHeader />
+        <PageSkeleton rows={10} />
+      </div>
+    );
+  }
+
+  if (error !== null) {
+    const notFound = error instanceof ApiError && error.code === 40401;
+    return (
+      <div className="lx-audit-page">
+        <DetailHeader />
+        <section className="lx-audit-state" aria-label={notFound ? '日志不存在' : '日志加载失败'}>
+          {notFound ? (
+            <PageEmpty
+              title="日志不存在或已被归档"
+              description="该审计记录可能不存在，或已按保留策略归档。请返回列表重新检索。"
+              action={
+                <Button
+                  onClick={() => {
+                    void navigate(ROUTES.system.auditLogs);
+                  }}
+                >
+                  返回操作日志
+                </Button>
+              }
+            />
+          ) : (
+            <ErrorState
+              title="日志详情加载失败"
+              message={error.message}
+              traceId={error instanceof ApiError ? error.traceId : undefined}
+              onRetry={() => {
+                void detailQuery.refetch();
+              }}
+            />
+          )}
+        </section>
+      </div>
+    );
+  }
+
+  const detail = detailQuery.data;
+
+  return (
+    <div className="lx-audit-page lx-audit-detail">
+      <DetailHeader />
+      <DetailHero detail={detail} />
+      <div className="lx-audit-detail__body">
+        <div className="lx-audit-detail__main">
+          <AuditDiffView detail={detail} />
+        </div>
+        <DetailAside detail={detail} />
+      </div>
+    </div>
+  );
+}

apps/web/src/pages/system/audit-logs/AuditLogTable.tsx

@@ -0,0 +1,321 @@
+/* eslint-disable max-lines-per-function -- 表格列定义集中便于对照接口字段 */
+import { Button, Table } from '@douyinfe/semi-ui-19';
+import type { ColumnProps } from '@douyinfe/semi-ui-19/lib/es/table/interface';
+import type { AuditLogItem } from '@lingxi/shared';
+import { notifyError, notifySuccess, PageEmpty } from '@lingxi/ui';
+import { IconCheck, IconCopy, IconRefresh } from '@lingxi/ui/icons';
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+
+import { copyToClipboard } from './audit-clipboard';
+import {
+  AUDIT_RESULT_LABEL,
+  auditTargetTypeLabel,
+  formatAuditDate,
+  formatAuditTime,
+  truncateMiddle,
+} from './audit-display';
+
+export interface AuditLogTableProps {
+  items: readonly AuditLogItem[];
+  loading: boolean;
+  refreshing?: boolean;
+  isFetchingNextPage: boolean;
+  hasNextPage: boolean;
+  /** 追加分页失败时的提示（保留已有数据） */
+  errorMessage?: string | null;
+  onOpen: (logId: string) => void;
+  onLoadMore: () => void;
+  onRetryMore: () => void;
+  onRefresh: () => void;
+  onClearFilters: () => void;
+}
+
+function copyTrace(traceId: string | null): void {
+  if (traceId === null || traceId === '') {
+    notifyError('该记录没有 trace_id');
+    return;
+  }
+  void copyToClipboard(traceId).then((ok) => {
+    if (ok) notifySuccess('已复制 trace_id');
+    else notifyError('复制失败，请手动选择文本');
+  });
+}
+
+function emptyState(onClearFilters: () => void): ReactNode {
+  return (
+    <PageEmpty
+      title="没有符合条件的日志"
+      description="当前筛选条件下没有记录，可放宽时间范围或清除筛选后重试。"
+      action={
+        <Button onClick={onClearFilters} icon={<IconRefresh size={16} />}>
+          清除筛选
+        </Button>
+      }
+    />
+  );
+}
+
+const COMPACT_COLUMN_WIDTHS: Readonly<Record<string, number>> = {
+  occurred_at: 100,
+  actor_name: 110,
+  action_label: 140,
+  target_name: 170,
+  customer_name: 90,
+  result: 90,
+  ip: 96,
+  trace_id: 140,
+  id: 60,
+};
+
+/** 1024：隐藏 IP / trace，并收窄关键列，保证时间 / 操作 / 对象 / 客户 / 结果同屏 */
+function useNarrowTable(): boolean {
+  const query = '(max-width: 1100px)';
+  const [narrow, setNarrow] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia(query).matches,
+  );
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const media = window.matchMedia(query);
+    const onChange = (event: MediaQueryListEvent): void => {
+      setNarrow(event.matches);
+    };
+    media.addEventListener('change', onChange);
+    return () => {
+      media.removeEventListener('change', onChange);
+    };
+  }, []);
+  return narrow;
+}
+
+/** 操作日志列表表格（方案 A：全宽表格 + 游标「加载更多」） */
+export function AuditLogTable({
+  items,
+  loading,
+  refreshing = false,
+  isFetchingNextPage,
+  hasNextPage,
+  errorMessage = null,
+  onOpen,
+  onLoadMore,
+  onRetryMore,
+  onRefresh,
+  onClearFilters,
+}: AuditLogTableProps): ReactNode {
+  const narrow = useNarrowTable();
+  const columns: ColumnProps<AuditLogItem>[] = [
+    {
+      title: '时间',
+      dataIndex: 'occurred_at',
+      width: 120,
+      render: (_value: unknown, record: AuditLogItem): ReactNode => (
+        <span className="lx-audit-time">
+          <b>{formatAuditTime(record.occurred_at)}</b>
+          <em>{formatAuditDate(record.occurred_at)}</em>
+        </span>
+      ),
+    },
+    {
+      title: '操作人',
+      dataIndex: 'actor_name',
+      width: 130,
+      render: (_value: unknown, record: AuditLogItem): ReactNode => (
+        <span className="lx-audit-actor">
+          <b>{record.actor_name ?? '系统'}</b>
+          <em>{record.actor_account ?? '—'}</em>
+        </span>
+      ),
+    },
+    {
+      title: '操作',
+      dataIndex: 'action_label',
+      width: 150,
+      render: (_value: unknown, record: AuditLogItem): ReactNode => (
+        <span className="lx-audit-action">
+          <b>{record.action_label}</b>
+          <em>{record.action_code}</em>
+        </span>
+      ),
+    },
+    {
+      title: '对象',
+      dataIndex: 'target_name',
+      width: 200,
+      render: (_value: unknown, record: AuditLogItem): ReactNode =>
+        record.target_name === null && record.target_id === null ? (
+          <span className="lx-audit-muted">—</span>
+        ) : (
+          <span className="lx-audit-target">
+            <b>{record.target_name ?? '未命名对象'}</b>
+            <em>
+              {auditTargetTypeLabel(record.target_type)}
+              {record.target_id === null ? '' : ` · ${record.target_id}`}
+            </em>
+          </span>
+        ),
+    },
+    {
+      title: '客户',
+      dataIndex: 'customer_name',
+      width: 100,
+      render: (_value: unknown, record: AuditLogItem): ReactNode =>
+        record.customer_name === null ? (
+          <span className="lx-audit-muted">—</span>
+        ) : (
+          <span className="lx-audit-customer">{record.customer_name}</span>
+        ),
+    },
+    {
+      title: '结果',
+      dataIndex: 'result',
+      width: 110,
+      render: (_value: unknown, record: AuditLogItem): ReactNode => (
+        <span className="lx-audit-result">
+          <span className={`lx-audit-tag lx-audit-tag--${record.result}`}>
+            {AUDIT_RESULT_LABEL[record.result]}
+          </span>
+          {record.result === 'failure' && record.error_message !== null ? (
+            <em title={record.error_message}>{record.error_message}</em>
+          ) : null}
+        </span>
+      ),
+    },
+    {
+      title: 'IP',
+      dataIndex: 'ip',
+      width: 112,
+      className: 'lx-audit-col-ip',
+      render: (_value: unknown, record: AuditLogItem): ReactNode => (
+        <span className="lx-audit-mono">{record.ip ?? '—'}</span>
+      ),
+    },
+    {
+      title: 'trace_id',
+      dataIndex: 'trace_id',
+      width: 140,
+      className: 'lx-audit-col-trace',
+      render: (_value: unknown, record: AuditLogItem): ReactNode => (
+        <span className="lx-audit-trace">
+          <code title={record.trace_id ?? ''}>{truncateMiddle(record.trace_id, 18)}</code>
+          <Button
+            theme="borderless"
+            size="small"
+            icon={<IconCopy size={14} />}
+            aria-label="复制 trace_id"
+            onClick={(event) => {
+              event.stopPropagation();
+              copyTrace(record.trace_id);
+            }}
+          />
+        </span>
+      ),
+    },
+    {
+      title: '查看',
+      dataIndex: 'id',
+      width: 72,
+      fixed: 'right',
+      render: (_value: unknown, record: AuditLogItem): ReactNode => (
+        <button
+          type="button"
+          className="lx-audit-link"
+          onClick={(event) => {
+            event.stopPropagation();
+            onOpen(record.id);
+          }}
+        >
+          查看
+        </button>
+      ),
+    },
+  ];
+
+  const visibleColumns = columns
+    .filter((column) => !narrow || (column.dataIndex !== 'ip' && column.dataIndex !== 'trace_id'))
+    .map((column) =>
+      narrow
+        ? {
+            ...column,
+            width: COMPACT_COLUMN_WIDTHS[String(column.dataIndex)] ?? column.width,
+          }
+        : column,
+    );
+
+  const pagerText =
+    items.length === 0
+      ? '暂无已加载记录'
+      : hasNextPage
+        ? `已加载 ${String(items.length)} 条 · 还有更多`
+        : `已加载 ${String(items.length)} 条 · 当前筛选结果已全部加载`;
+
+  return (
+    <section className="lx-audit-table-card" aria-label="操作日志列表">
+      <div className="lx-audit-table-card__head">
+        <b>日志列表</b>
+        <span className="lx-audit-table-card__count">{pagerText}</span>
+        <div className="lx-audit-table-card__tools">
+          <Button
+            theme="borderless"
+            icon={<IconRefresh size={16} />}
+            loading={refreshing}
+            aria-label="刷新日志"
+            onClick={onRefresh}
+          />
+        </div>
+      </div>
+
+      <div className="lx-audit-table-wrap">
+        <Table<AuditLogItem>
+          className="lx-audit-table"
+          columns={visibleColumns}
+          dataSource={[...items]}
+          rowKey="id"
+          pagination={false}
+          loading={loading}
+          size="middle"
+          scroll={{ x: narrow ? 760 : 1180 }}
+          empty={emptyState(onClearFilters)}
+          onRow={(record) =>
+            record === undefined
+              ? {}
+              : {
+                  className: 'lx-audit-row',
+                  tabIndex: 0,
+                  onKeyDown: (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault();
+                      onOpen(record.id);
+                    }
+                  },
+                  onClick: () => {
+                    onOpen(record.id);
+                  },
+                }
+          }
+        />
+      </div>
+
+      <div className="lx-audit-pager">
+        <span>
+          游标分页 · 按操作时间倒序
+          {errorMessage === null ? null : (
+            <em className="lx-audit-pager__error"> · {errorMessage}</em>
+          )}
+        </span>
+        {hasNextPage ? (
+          <Button
+            size="small"
+            loading={isFetchingNextPage}
+            onClick={errorMessage === null ? onLoadMore : onRetryMore}
+          >
+            加载更多
+          </Button>
+        ) : (
+          <Button size="small" disabled icon={<IconCheck size={14} />}>
+            已全部加载
+          </Button>
+        )}
+      </div>
+    </section>
+  );
+}

apps/web/src/pages/system/audit-logs/AuditLogsPage.tsx

@@ -0,0 +1,216 @@
+/* eslint-disable max-lines-per-function -- 页面编排筛选、游标列表与导出抽屉，集中便于追踪数据流 */
+import { Button, Modal } from '@douyinfe/semi-ui-19';
+import { Permission } from '@lingxi/shared';
+import { ErrorState } from '@lingxi/ui';
+import { IconAlert, IconDownload, IconLock } from '@lingxi/ui/icons';
+import type { ReactNode } from 'react';
+import { useMemo, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router';
+
+import { ApiError } from '@/api/client';
+import { useAuditActionsQuery, useAuditLogsInfiniteQuery } from '@/hooks/queries/use-audit';
+import { useCustomersQuery } from '@/hooks/queries/use-client';
+import { usePermission } from '@/hooks/use-permission';
+import { auditLogDetailPath } from '@/routes';
+
+import {
+  type AuditFilterDraft,
+  createDefaultAuditFilter,
+  parseAuditFilters,
+  serializeAuditFilters,
+  toAuditLogFilter,
+} from './audit-filter-utils';
+import { AuditExportSheet } from './AuditExportSheet';
+import { type AuditFilterOption, AuditFilters } from './AuditFilters';
+import { AuditLogTable } from './AuditLogTable';
+
+const CUSTOMER_OPTION_LIMIT = 100;
+
+function showPermissionHelp(): void {
+  Modal.info({
+    title: '操作日志权限说明',
+    content: (
+      <div className="lx-audit-help">
+        <p>
+          <b>audit:read</b>：查看操作日志列表与详情，属特殊权限，默认不授予；缺少时无法进入本页。
+        </p>
+        <p>
+          <b>audit:export</b>：创建异步导出任务，需在角色中单独授予；无此权限时不显示导出入口。
+        </p>
+        <p>审计日志 append-only，系统不提供修改 / 删除入口；查看与导出行为本身也会被记录。</p>
+      </div>
+    ),
+    okText: '知道了',
+  });
+}
+
+/** 操作日志（用户选定方案 A：页头 + 筛选卡 + 全宽表格 + 游标分页 + 560 导出抽屉） */
+export function AuditLogsPage(): ReactNode {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const canExport = usePermission(Permission.AUDIT_EXPORT);
+  const [exportOpen, setExportOpen] = useState(false);
+
+  const searchKey = searchParams.toString();
+  const applied = useMemo(() => parseAuditFilters(new URLSearchParams(searchKey)), [searchKey]);
+  /** 草稿跟随 URL：URL 变化时以 URL 为准，用户编辑时写入当前 key，避免在 effect 里同步 state */
+  const [draftState, setDraftState] = useState<{ key: string; draft: AuditFilterDraft }>(() => ({
+    key: searchKey,
+    draft: parseAuditFilters(new URLSearchParams(searchKey)),
+  }));
+  const draft = draftState.key === searchKey ? draftState.draft : applied;
+  const setDraft = (next: AuditFilterDraft): void => {
+    setDraftState({ key: searchKey, draft: next });
+  };
+
+  /** 只在筛选条件变化时换算时间，避免每次渲染 now 变化导致 queryKey 抖动 */
+  const queryFilter = useMemo(() => toAuditLogFilter(applied, new Date()), [applied]);
+  const logs = useAuditLogsInfiniteQuery(queryFilter);
+  const actions = useAuditActionsQuery();
+  const customers = useCustomersQuery({ limit: CUSTOMER_OPTION_LIMIT });
+
+  const items = useMemo(
+    () => (logs.data === undefined ? [] : logs.data.pages.flatMap((page) => page.items)),
+    [logs.data],
+  );
+  const categoryOptions = useMemo<AuditFilterOption[]>(
+    () =>
+      (actions.data?.categories ?? []).map((category) => ({
+        value: category.key,
+        label: category.label,
+      })),
+    [actions.data],
+  );
+  const customerOptions = useMemo<AuditFilterOption[]>(
+    () =>
+      (customers.data?.items ?? []).map((customer) => ({
+        value: customer.id,
+        label: customer.name,
+      })),
+    [customers.data],
+  );
+
+  const applyFilters = (): void => {
+    setSearchParams(serializeAuditFilters(draft), { replace: false });
+  };
+  const resetFilters = (): void => {
+    setDraftState({ key: searchKey, draft: createDefaultAuditFilter() });
+    setSearchParams(new URLSearchParams(), { replace: false });
+  };
+  const openDetail = (logId: string): void => {
+    void navigate(auditLogDetailPath(logId));
+  };
+
+  const pageError = logs.error;
+  const showError = pageError !== null && items.length === 0;
+  const moreError = logs.isFetchNextPageError ? (pageError?.message ?? '加载更多失败') : null;
+
+  return (
+    <div className="lx-audit-page">
+      <header className="lx-audit-page__header">
+        <div>
+          <h1>操作日志</h1>
+          <p>关键操作留痕 · 只读 · append-only</p>
+        </div>
+        <div className="lx-audit-page__actions">
+          {canExport ? (
+            <>
+              <span className="lx-audit-readonly">
+                <IconLock size={14} />
+                只读
+              </span>
+              <Button
+                theme="solid"
+                type="primary"
+                icon={<IconDownload size={16} />}
+                onClick={() => {
+                  setExportOpen(true);
+                }}
+              >
+                导出日志
+              </Button>
+            </>
+          ) : (
+            <span
+              className="lx-audit-readonly"
+              title="当前账号没有 audit:export 权限，无法创建导出任务"
+            >
+              <IconLock size={14} />
+              只读 · 无 audit:export 权限
+            </span>
+          )}
+        </div>
+      </header>
+
+      <div className="lx-audit-note" role="note">
+        <IconAlert size={16} />
+        <span>
+          <b>查看留痕</b> ·
+          查看操作日志本身也会被记录（audit.log.view），用于追溯谁在何时查看了哪些记录。
+          {canExport ? '' : '导出需在角色中单独授予 audit:export 权限。'}
+        </span>
+        <button type="button" className="lx-audit-link" onClick={showPermissionHelp}>
+          权限说明
+        </button>
+      </div>
+
+      <AuditFilters
+        draft={draft}
+        categoryOptions={categoryOptions}
+        customerOptions={customerOptions}
+        loadingCategories={actions.isPending}
+        loadingCustomers={customers.isPending}
+        searching={logs.isFetching}
+        onChange={setDraft}
+        onApply={applyFilters}
+        onReset={resetFilters}
+      />
+
+      {showError ? (
+        <section className="lx-audit-state" aria-label="操作日志加载失败">
+          <ErrorState
+            title="操作日志加载失败"
+            message={pageError.message}
+            traceId={pageError instanceof ApiError ? pageError.traceId : undefined}
+            onRetry={() => {
+              void logs.refetch();
+            }}
+          />
+        </section>
+      ) : (
+        <AuditLogTable
+          items={items}
+          loading={logs.isPending}
+          refreshing={logs.isFetching && !logs.isFetchingNextPage}
+          isFetchingNextPage={logs.isFetchingNextPage}
+          hasNextPage={logs.hasNextPage}
+          errorMessage={moreError}
+          onOpen={openDetail}
+          onLoadMore={() => {
+            void logs.fetchNextPage();
+          }}
+          onRetryMore={() => {
+            void logs.fetchNextPage();
+          }}
+          onRefresh={() => {
+            void logs.refetch();
+          }}
+          onClearFilters={resetFilters}
+        />
+      )}
+
+      {canExport ? (
+        <AuditExportSheet
+          visible={exportOpen}
+          draft={applied}
+          categoryOptions={categoryOptions}
+          customerOptions={customerOptions}
+          loadedCount={items.length}
+          onClose={() => {
+            setExportOpen(false);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}

apps/web/src/pages/system/audit-logs/audit-clipboard.ts

@@ -0,0 +1,12 @@
+/**
+ * 复制到剪贴板：非安全上下文 / 浏览器不支持时返回 false，由调用方提示手动复制。
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  if (text.length === 0) return false;
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}

apps/web/src/pages/system/audit-logs/audit-display.spec.ts

@@ -0,0 +1,201 @@
+import type { AuditExportJob, AuditLogDetail } from '@lingxi/shared';
+import { describe, expect, it } from 'vitest';
+
+import {
+  AUDIT_DIFF_KIND_META,
+  auditDiffFieldLabel,
+  auditExportPercent,
+  auditExportRowsText,
+  auditTargetTypeLabel,
+  buildAuditRawRecord,
+  buildRelatedAuditQuery,
+  canDownloadAuditExport,
+  formatAuditDateTime,
+  formatAuditDiffValue,
+  formatDuration,
+  formatFileSize,
+  formatRowCount,
+  isAuditExportExpired,
+  summarizeAuditFilterRange,
+  truncateMiddle,
+} from './audit-display';
+
+const NOW = '2026-11-04T05:32:00.000Z';
+
+const detail: AuditLogDetail = {
+  id: '01HZZZZZZZZZZZZZZZZZZZZZZ1',
+  occurred_at: NOW,
+  actor_id: '01HZZZZZZZZZZZZZZZZZZZZZZ3',
+  actor_name: '江岚',
+  actor_account: 'jiang.lan',
+  action_code: 'identity.role.update',
+  action_label: '修改角色权限',
+  category: 'permission',
+  category_label: '权限与角色',
+  target_type: 'role',
+  target_id: 'role_material_ops',
+  target_name: '素材运营',
+  customer_id: null,
+  customer_name: null,
+  result: 'success',
+  http_method: 'PATCH',
+  http_path: '/api/v1/roles/role_material_ops',
+  trace_id: '01JCH9V4TR4CE00000000005',
+  ip: '10.12.0.18',
+  duration_ms: 74,
+  error_code: null,
+  error_message: null,
+  change_count: 2,
+  has_before: true,
+  has_after: true,
+  user_agent: 'Chrome 130 / Windows 11',
+  reason: '开放图片合成权限',
+  before: { permissions: ['material:review'] },
+  after: { permissions: ['material:render'] },
+  changes: null,
+  diff: [
+    { path: 'permissions', label: null, before: 'material:review', after: null, kind: 'removed' },
+    { path: 'permissions', label: null, before: null, after: 'material:render', kind: 'added' },
+    { path: 'description', label: null, before: '旧描述', after: '新描述', kind: 'changed' },
+  ],
+};
+
+function job(patch: Partial<AuditExportJob> = {}): AuditExportJob {
+  return {
+    id: '01HZZZZZZZZZZZZZZZZZZZZZZ9',
+    status: 'succeeded',
+    format: 'csv',
+    filters: { result: 'failure' },
+    total_rows: 120,
+    row_count: 120,
+    processed_rows: 120,
+    truncated: false,
+    progress: 100,
+    file_size: 2_204_160,
+    error_message: null,
+    requested_at: NOW,
+    started_at: NOW,
+    finished_at: NOW,
+    expires_at: '2026-11-04T05:47:00.000Z',
+    download_count: 0,
+    last_downloaded_at: null,
+    download_token: 'signed.token',
+    ...patch,
+  };
+}
+
+describe('操作日志展示纯函数', () => {
+  it('时间 / 时长 / 大小 / 行数格式化', () => {
+    expect(formatAuditDateTime(NOW)).toMatch(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/);
+    expect(formatDuration(74)).toBe('74 ms');
+    expect(formatDuration(1500)).toBe('1.50 s');
+    expect(formatDuration(null)).toBe('—');
+    expect(formatFileSize(2048)).toBe('2.0 KB');
+    expect(formatFileSize(2_204_160)).toBe('2.1 MB');
+    expect(formatFileSize(null)).toBe('—');
+    expect(formatRowCount(12000)).toBe('12,000');
+    expect(formatRowCount(null)).toBe('—');
+  });
+
+  it('对象类型中文名与未知类型回退', () => {
+    expect(auditTargetTypeLabel('role')).toBe('角色');
+    expect(auditTargetTypeLabel('unknown_type')).toBe('unknown_type');
+    expect(auditTargetTypeLabel(null)).toBe('—');
+  });
+
+  it('trace_id 截断保留首尾', () => {
+    expect(truncateMiddle('01JCH9V4TR4CE00000000005', 18)).toHaveLength(18);
+    expect(truncateMiddle('short', 18)).toBe('short');
+    expect(truncateMiddle(null)).toBe('—');
+  });
+
+  it('diff 值格式化覆盖 null / 数组 / 对象 / 空串', () => {
+    expect(formatAuditDiffValue(null)).toBe('—');
+    expect(formatAuditDiffValue('')).toBe('（空）');
+    expect(formatAuditDiffValue(['a', 'b'])).toBe('a、b');
+    expect(formatAuditDiffValue([])).toBe('（空）');
+    expect(formatAuditDiffValue({ a: 1 })).toBe('{"a":1}');
+    expect(formatAuditDiffValue(10)).toBe('10');
+    expect(formatAuditDiffValue(false)).toBe('false');
+  });
+
+  it('diff 字段中文名优先 label，其次路径映射，最后原路径', () => {
+    expect(auditDiffFieldLabel({ ...detail.diff[0]!, label: '权限点' })).toBe('权限点');
+    expect(auditDiffFieldLabel(detail.diff[0]!)).toBe('权限点');
+    expect(auditDiffFieldLabel({ ...detail.diff[2]! })).toBe('描述');
+    expect(auditDiffFieldLabel({ ...detail.diff[0]!, path: 'unknown.path' })).toBe('unknown.path');
+    expect(AUDIT_DIFF_KIND_META.added.label).toBe('新增');
+    expect(AUDIT_DIFF_KIND_META.removed.tone).toBe('removed');
+  });
+
+  it('原始 JSON 含完整记录（不止 before / after）', () => {
+    const raw = buildAuditRawRecord(detail);
+    expect(Object.keys(raw)).toEqual([
+      'id',
+      'occurred_at',
+      'actor',
+      'action',
+      'target',
+      'customer',
+      'result',
+      'request',
+      'ip',
+      'user_agent',
+      'trace_id',
+      'reason',
+      'error',
+      'before',
+      'after',
+    ]);
+    expect(raw.actor.account).toBe('jiang.lan');
+    expect(raw.action.label).toBe('修改角色权限');
+    expect(raw.request.method).toBe('PATCH');
+    expect(raw.error).toBeNull();
+  });
+
+  it('相关记录查询：优先同对象，其次同操作人', () => {
+    expect(buildRelatedAuditQuery(detail)).toEqual({
+      target_type: 'role',
+      target_id: 'role_material_ops',
+    });
+    const actorOnly = { ...detail, target_id: null };
+    expect(buildRelatedAuditQuery(actorOnly)).toEqual({ actor: detail.actor_id });
+    const none = { ...detail, target_id: null, actor_id: null };
+    expect(buildRelatedAuditQuery(none)).toBeNull();
+  });
+
+  it('导出进度直接使用服务端 progress 并夹在 0–100', () => {
+    expect(auditExportPercent({ progress: 62 })).toBe(62);
+    expect(auditExportPercent({ progress: 0 })).toBe(0);
+    expect(auditExportPercent({ progress: 130 })).toBe(100);
+    expect(auditExportRowsText({ processed_rows: 40, total_rows: 120 })).toBe('40 / 120 条');
+    expect(auditExportRowsText({ processed_rows: null, total_rows: null })).toBe('0 / — 条');
+  });
+
+  it('过期 / 可下载判断基于 expires_at 与 token', () => {
+    const fresh = job();
+    expect(isAuditExportExpired(fresh, new Date('2026-11-04T05:40:00.000Z'))).toBe(false);
+    expect(canDownloadAuditExport(fresh, new Date('2026-11-04T05:40:00.000Z'))).toBe(true);
+    expect(isAuditExportExpired(fresh, new Date('2026-11-04T05:50:00.000Z'))).toBe(true);
+    expect(canDownloadAuditExport(fresh, new Date('2026-11-04T05:50:00.000Z'))).toBe(false);
+    expect(canDownloadAuditExport(job({ download_token: null }), new Date(NOW))).toBe(false);
+    expect(canDownloadAuditExport(job({ status: 'failed' }), new Date(NOW))).toBe(false);
+  });
+
+  it('导出历史筛选摘要包含范围 / 分类 / 结果 / 关键字', () => {
+    const summary = summarizeAuditFilterRange(
+      {
+        from: '2026-10-29T00:00:00.000Z',
+        to: '2026-11-04T13:32:00.000Z',
+        category: 'permission',
+        result: 'failure',
+        keyword: '素材',
+      },
+      (category) => (category === 'permission' ? '权限与角色' : category),
+    );
+    expect(summary).toContain('权限与角色');
+    expect(summary).toContain('失败');
+    expect(summary).toContain('关键字：素材');
+    expect(summarizeAuditFilterRange({})).toBe('全部时间');
+  });
+});

apps/web/src/pages/system/audit-logs/audit-display.ts

@@ -0,0 +1,295 @@
+/**
+ * 操作日志展示层纯函数：时间 / 大小 / diff / 原始 JSON / 导出进度。
+ * 与接口字段一一对应，不做任何推测性计算（导出进度直接用服务端 progress）。
+ */
+import type {
+  AuditDiffKind,
+  AuditExportJob,
+  AuditExportStatus,
+  AuditLogDetail,
+  AuditLogFilter,
+  AuditResult,
+} from '@lingxi/shared';
+
+export const AUDIT_RESULT_LABEL: Record<AuditResult, string> = {
+  success: '成功',
+  failure: '失败',
+};
+
+/** 对象类型中文名（与 shared AUDIT_TARGET_TYPES 对齐；未登记类型回退原值） */
+export const AUDIT_TARGET_TYPE_LABEL: Readonly<Record<string, string>> = {
+  role: '角色',
+  user: '用户',
+  customer: '客户',
+  customer_field: '客户字段',
+  customer_group: '客户组',
+  department: '部门',
+  industry: '行业',
+  dict_item: '字典条目',
+  dict_type: '字典类型',
+  system_config: '系统配置',
+  audit_export: '导出任务',
+  audit_log: '操作日志',
+  asset: '资产',
+  task: '任务',
+};
+
+export function auditTargetTypeLabel(type: string | null): string {
+  if (type === null || type === '') return '—';
+  return AUDIT_TARGET_TYPE_LABEL[type] ?? type;
+}
+
+const DATE_TIME_FORMATTER = new Intl.DateTimeFormat('zh-CN', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+  hour12: false,
+});
+
+const TIME_FORMATTER = new Intl.DateTimeFormat('zh-CN', {
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+  hour12: false,
+});
+
+const DATE_FORMATTER = new Intl.DateTimeFormat('zh-CN', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+});
+
+function toDate(value: string | null | undefined): Date | null {
+  if (value === null || value === undefined || value === '') return null;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+/** ISO 时间 → `YYYY-MM-DD HH:mm:ss` */
+export function formatAuditDateTime(value: string | null | undefined): string {
+  const date = toDate(value);
+  return date === null ? '—' : DATE_TIME_FORMATTER.format(date).replaceAll('/', '-');
+}
+
+/** ISO 时间 → `HH:mm:ss`（列表「时间」列主行） */
+export function formatAuditTime(value: string | null | undefined): string {
+  const date = toDate(value);
+  return date === null ? '—' : TIME_FORMATTER.format(date);
+}
+
+/** ISO 时间 → `YYYY-MM-DD`（列表「时间」列副行） */
+export function formatAuditDate(value: string | null | undefined): string {
+  const date = toDate(value);
+  return date === null ? '—' : DATE_FORMATTER.format(date).replaceAll('/', '-');
+}
+
+/** 耗时：< 1s 用 ms，≥ 1s 用 s（保留两位） */
+export function formatDuration(durationMs: number | null | undefined): string {
+  if (durationMs === null || durationMs === undefined || durationMs < 0) return '—';
+  if (durationMs < 1000) return `${String(durationMs)} ms`;
+  return `${(durationMs / 1000).toFixed(2)} s`;
+}
+
+/** 文件大小：B / KB / MB */
+export function formatFileSize(bytes: number | null | undefined): string {
+  if (bytes === null || bytes === undefined || bytes < 0) return '—';
+  if (bytes < 1024) return `${String(bytes)} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/** 行数：千分位；未知返回 — */
+export function formatRowCount(value: number | null | undefined): string {
+  if (value === null || value === undefined) return '—';
+  return value.toLocaleString('en-US');
+}
+
+/** 截断长文本（trace_id / IP 等列展示用） */
+export function truncateMiddle(value: string | null | undefined, max = 16): string {
+  if (value === null || value === undefined || value === '') return '—';
+  if (value.length <= max) return value;
+  const head = Math.ceil((max - 1) / 2);
+  const tail = Math.floor((max - 1) / 2);
+  return `${value.slice(0, head)}…${value.slice(value.length - tail)}`;
+}
+
+export type AuditDiffItem = AuditLogDetail['diff'][number];
+
+export const AUDIT_DIFF_KIND_META: Record<AuditDiffKind, { label: string; tone: string }> = {
+  added: { label: '新增', tone: 'added' },
+  removed: { label: '删除', tone: 'removed' },
+  changed: { label: '修改', tone: 'changed' },
+};
+
+/** 常见字段路径 → 中文名（接口不返回 label 时的兜底，未知路径原样展示） */
+export const AUDIT_DIFF_FIELD_LABELS: Readonly<Record<string, string>> = {
+  name: '名称',
+  displayName: '显示名称',
+  description: '描述',
+  code: '编码',
+  status: '状态',
+  remark: '备注',
+  group: '分组',
+  groupCode: '分组编码',
+  sortOrder: '排序',
+  permissions: '权限点',
+  permissionCodes: '权限点',
+  roleIds: '关联角色',
+  ownerUserId: '负责人',
+  customerIds: '关联客户',
+  dataScope: '数据范围',
+  dataScopeType: '数据范围',
+  value: '配置值',
+};
+
+export function auditDiffFieldLabel(row: AuditDiffItem): string {
+  return row.label ?? AUDIT_DIFF_FIELD_LABELS[row.path] ?? row.path;
+}
+
+/** diff 值 → 可读字符串；数组按顿号连接，对象用 JSON 文本 */
+export function formatAuditDiffValue(value: unknown): string {
+  if (value === null || value === undefined) return '—';
+  if (typeof value === 'string') return value === '' ? '（空）' : value;
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  if (Array.isArray(value)) {
+    if (value.length === 0) return '（空）';
+    if (value.every((item): item is string => typeof item === 'string')) {
+      return value.join('、');
+    }
+    return JSON.stringify(value);
+  }
+  return JSON.stringify(value);
+}
+
+export interface AuditRawRecord {
+  id: string;
+  occurred_at: string;
+  actor: { id: string | null; name: string | null; account: string | null };
+  action: { code: string; label: string; category: string; category_label: string };
+  target: { type: string | null; id: string | null; name: string | null };
+  customer: { id: string | null; name: string | null };
+  result: AuditResult;
+  request: { method: string | null; path: string | null; duration_ms: number | null };
+  ip: string | null;
+  user_agent: string | null;
+  trace_id: string | null;
+  reason: string | null;
+  error: { code: string | null; message: string | null } | null;
+  before: unknown;
+  after: unknown;
+}
+
+/** 详情「原始 JSON」：展示完整审计记录，不止 before / after */
+export function buildAuditRawRecord(detail: AuditLogDetail): AuditRawRecord {
+  return {
+    id: detail.id,
+    occurred_at: detail.occurred_at,
+    actor: { id: detail.actor_id, name: detail.actor_name, account: detail.actor_account },
+    action: {
+      code: detail.action_code,
+      label: detail.action_label,
+      category: detail.category,
+      category_label: detail.category_label,
+    },
+    target: { type: detail.target_type, id: detail.target_id, name: detail.target_name },
+    customer: { id: detail.customer_id, name: detail.customer_name },
+    result: detail.result,
+    request: {
+      method: detail.http_method,
+      path: detail.http_path,
+      duration_ms: detail.duration_ms,
+    },
+    ip: detail.ip,
+    user_agent: detail.user_agent,
+    trace_id: detail.trace_id,
+    reason: detail.reason,
+    error:
+      detail.error_code === null && detail.error_message === null
+        ? null
+        : { code: detail.error_code, message: detail.error_message },
+    before: detail.before,
+    after: detail.after,
+  };
+}
+
+export function formatAuditRawJson(detail: AuditLogDetail): string {
+  return JSON.stringify(buildAuditRawRecord(detail), null, 2);
+}
+
+/** 详情页「相关记录」查询：优先同对象，其次同操作人；都没有则不查 */
+export function buildRelatedAuditQuery(detail: AuditLogDetail): Partial<AuditLogFilter> | null {
+  if (detail.target_id !== null && detail.target_id !== '') {
+    return {
+      ...(detail.target_type === null ? {} : { target_type: detail.target_type }),
+      target_id: detail.target_id,
+    };
+  }
+  if (detail.actor_id !== null && detail.actor_id !== '') {
+    return { actor: detail.actor_id };
+  }
+  return null;
+}
+
+export const AUDIT_EXPORT_STATUS_META: Record<AuditExportStatus, { label: string; tone: string }> =
+  {
+    queued: { label: '排队中', tone: 'queued' },
+    running: { label: '生成中', tone: 'running' },
+    succeeded: { label: '已完成', tone: 'succeeded' },
+    failed: { label: '失败', tone: 'failed' },
+  };
+
+/** 导出进度百分比：直接使用服务端 progress，限制在 0–100 */
+export function auditExportPercent(job: Pick<AuditExportJob, 'progress'>): number {
+  return Math.min(100, Math.max(0, Math.round(job.progress)));
+}
+
+/** 已处理 / 总行数文案 */
+export function auditExportRowsText(
+  job: Pick<AuditExportJob, 'processed_rows' | 'total_rows'>,
+): string {
+  const processed = formatRowCount(job.processed_rows ?? 0);
+  return `${processed} / ${formatRowCount(job.total_rows)} 条`;
+}
+
+/** 签名链接是否已过期（过期后不再渲染下载入口） */
+export function isAuditExportExpired(job: AuditExportJob, now: Date): boolean {
+  if (job.expires_at === null) return false;
+  const expiresAt = new Date(job.expires_at);
+  return !Number.isNaN(expiresAt.getTime()) && expiresAt.getTime() <= now.getTime();
+}
+
+/** 可下载：成功 + 有 token + 未过期 */
+export function canDownloadAuditExport(job: AuditExportJob, now: Date): boolean {
+  return (
+    job.status === 'succeeded' &&
+    job.download_token !== null &&
+    job.download_token !== '' &&
+    !isAuditExportExpired(job, now)
+  );
+}
+
+/** 筛选 → 导出历史里的范围摘要（分类使用调用方传入的 label 映射） */
+export function summarizeAuditFilterRange(
+  filters: AuditLogFilter,
+  categoryLabel?: (category: string) => string,
+): string {
+  const parts: string[] = [];
+  if (filters.from !== undefined || filters.to !== undefined) {
+    const from = filters.from === undefined ? '不限' : formatAuditDate(filters.from);
+    const to = filters.to === undefined ? '不限' : formatAuditDate(filters.to);
+    parts.push(`${from} 至 ${to}`);
+  } else {
+    parts.push('全部时间');
+  }
+  if (filters.category !== undefined) {
+    parts.push(categoryLabel?.(filters.category) ?? filters.category);
+  }
+  if (filters.result !== undefined) {
+    parts.push(AUDIT_RESULT_LABEL[filters.result]);
+  }
+  if (filters.keyword !== undefined) parts.push(`关键字：${filters.keyword}`);
+  return parts.join(' · ');
+}

apps/web/src/pages/system/audit-logs/audit-filter-utils.spec.ts

@@ -0,0 +1,167 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  auditFiltersEqual,
+  createDefaultAuditFilter,
+  DEFAULT_AUDIT_TIME_PRESET,
+  describeAuditTimeRange,
+  formatDateInput,
+  parseAuditFilters,
+  resolveAuditTimeRange,
+  serializeAuditFilters,
+  toAuditLogFilter,
+} from './audit-filter-utils';
+
+/** 固定「现在」：本地时区 2026-11-04 13:32:00，避免依赖运行环境时区 */
+const NOW = new Date(2026, 10, 4, 13, 32, 0);
+
+function localStart(year: number, month: number, day: number): string {
+  return new Date(year, month, day, 0, 0, 0, 0).toISOString();
+}
+
+function localEnd(year: number, month: number, day: number): string {
+  return new Date(year, month, day, 23, 59, 59, 999).toISOString();
+}
+
+describe('操作日志筛选纯函数', () => {
+  it('默认时间范围为近 7 天', () => {
+    expect(createDefaultAuditFilter().timePreset).toBe(DEFAULT_AUDIT_TIME_PRESET);
+  });
+
+  it('今天：从本日 00:00 到当天结束', () => {
+    const range = resolveAuditTimeRange(
+      { ...createDefaultAuditFilter(), timePreset: 'today' },
+      NOW,
+    );
+    expect(range.from).toBe(localStart(2026, 10, 4));
+    expect(range.to).toBe(localEnd(2026, 10, 4));
+  });
+
+  it('近 7 天：从 6 天前 00:00 到当天结束', () => {
+    const range = resolveAuditTimeRange({ ...createDefaultAuditFilter(), timePreset: '7d' }, NOW);
+    expect(range.from).toBe(localStart(2026, 9, 29));
+    expect(range.to).toBe(localEnd(2026, 10, 4));
+  });
+
+  it('近 30 天：从 29 天前 00:00 到当天结束', () => {
+    const range = resolveAuditTimeRange({ ...createDefaultAuditFilter(), timePreset: '30d' }, NOW);
+    expect(range.from).toBe(localStart(2026, 9, 6));
+    expect(range.to).toBe(localEnd(2026, 10, 4));
+  });
+
+  it('自定义：from 取当天开始、to 取当天结束', () => {
+    const range = resolveAuditTimeRange(
+      {
+        ...createDefaultAuditFilter(),
+        timePreset: 'custom',
+        customFrom: '2026-10-01',
+        customTo: '2026-10-07',
+      },
+      NOW,
+    );
+    expect(range.from).toBe(localStart(2026, 9, 1));
+    expect(range.to).toBe(localEnd(2026, 9, 7));
+  });
+
+  it('自定义缺日期时该端不限制', () => {
+    const range = resolveAuditTimeRange(
+      { ...createDefaultAuditFilter(), timePreset: 'custom', customFrom: '2026-10-01' },
+      NOW,
+    );
+    expect(range.from).toBe(localStart(2026, 9, 1));
+    expect(range.to).toBeNull();
+  });
+
+  it('关键字 / 操作人 trim，空值剔除，分类只接受白名单', () => {
+    const filter = toAuditLogFilter(
+      {
+        ...createDefaultAuditFilter(),
+        keyword: '  素材  ',
+        actor: ' 江岚 ',
+        category: 'permission',
+        customerId: '01HZZZZZZZZZZZZZZZZZZZZZZ2',
+        result: 'failure',
+      },
+      NOW,
+    );
+    expect(filter.keyword).toBe('素材');
+    expect(filter.actor).toBe('江岚');
+    expect(filter.category).toBe('permission');
+    expect(filter.customer_id).toBe('01HZZZZZZZZZZZZZZZZZZZZZZ2');
+    expect(filter.result).toBe('failure');
+    expect(filter.from).toBe(localStart(2026, 9, 29));
+
+    const empty = toAuditLogFilter(
+      { ...createDefaultAuditFilter(), keyword: '   ', actor: '', category: 'not-a-category' },
+      NOW,
+    );
+    expect(empty.keyword).toBeUndefined();
+    expect(empty.actor).toBeUndefined();
+    expect(empty.category).toBeUndefined();
+  });
+
+  it('URL search params 往返：非默认值才序列化', () => {
+    const draft = {
+      ...createDefaultAuditFilter(),
+      keyword: ' 素材 ',
+      category: 'permission',
+      actor: '江岚',
+      customerId: '01HZZZZZZZZZZZZZZZZZZZZZZ2',
+      result: 'failure' as const,
+    };
+    const params = serializeAuditFilters(draft);
+    expect(params.get('keyword')).toBe('素材');
+    expect(params.get('time')).toBeNull();
+
+    const parsed = parseAuditFilters(params);
+    expect(parsed.keyword).toBe('素材');
+    expect(parsed.category).toBe('permission');
+    expect(parsed.result).toBe('failure');
+    expect(parsed.timePreset).toBe('7d');
+    expect(auditFiltersEqual(parsed, draft)).toBe(true);
+    expect(serializeAuditFilters(createDefaultAuditFilter()).toString()).toBe('');
+  });
+
+  it('自定义时间写入 from / to 并可还原', () => {
+    const draft = {
+      ...createDefaultAuditFilter(),
+      timePreset: 'custom' as const,
+      customFrom: '2026-10-01',
+      customTo: '2026-10-07',
+    };
+    const params = serializeAuditFilters(draft);
+    expect(params.get('time')).toBe('custom');
+    expect(params.get('from')).toBe('2026-10-01');
+    expect(params.get('to')).toBe('2026-10-07');
+    const parsed = parseAuditFilters(params);
+    expect(parsed.timePreset).toBe('custom');
+    expect(parsed.customFrom).toBe('2026-10-01');
+  });
+
+  it('非法 time / result 参数回退默认值', () => {
+    const params = new URLSearchParams({ time: 'bad', result: 'unknown', category: 'auth' });
+    const parsed = parseAuditFilters(params);
+    expect(parsed.timePreset).toBe('7d');
+    expect(parsed.result).toBe('all');
+    expect(parsed.category).toBe('auth');
+  });
+
+  it('时间范围说明用于导出抽屉', () => {
+    const today = describeAuditTimeRange(
+      { ...createDefaultAuditFilter(), timePreset: 'today' },
+      NOW,
+    );
+    expect(today.label).toBe('今天');
+    expect(today.range).toBe('2026-11-04 至 2026-11-04');
+
+    const customEmpty = describeAuditTimeRange(
+      { ...createDefaultAuditFilter(), timePreset: 'custom' },
+      NOW,
+    );
+    expect(customEmpty.range).toBe('未选择起止日期');
+  });
+
+  it('formatDateInput 输出本地 YYYY-MM-DD', () => {
+    expect(formatDateInput(new Date(2026, 0, 9))).toBe('2026-01-09');
+  });
+});

apps/web/src/pages/system/audit-logs/audit-filter-utils.ts

@@ -0,0 +1,208 @@
+/**
+ * 操作日志筛选 → API query 的纯函数（可单测，不依赖 React）。
+ *
+ * 口径：
+ * - 时间预设「今天 / 近 7 天 / 近 30 天」在每次查询时按本地时区换算为 from / to ISO；
+ * - 「自定义」用日期区间，from 取当天 00:00:00、to 取当天 23:59:59.999；
+ * - 关键字 trim 后为空则剔除；URL search params 与界面草稿一一对应，刷新可还原。
+ */
+import { AUDIT_CATEGORY_KEYS, type AuditLogFilter } from '@lingxi/shared';
+
+export type AuditResultFilter = 'all' | 'success' | 'failure';
+export type AuditTimePreset = 'today' | '7d' | '30d' | 'custom';
+
+export const AUDIT_TIME_PRESETS: readonly { value: AuditTimePreset; label: string }[] = [
+  { value: 'today', label: '今天' },
+  { value: '7d', label: '近 7 天' },
+  { value: '30d', label: '近 30 天' },
+  { value: 'custom', label: '自定义' },
+];
+
+export const DEFAULT_AUDIT_TIME_PRESET: AuditTimePreset = '7d';
+
+export const AUDIT_RESULT_OPTIONS: readonly { value: AuditResultFilter; label: string }[] = [
+  { value: 'all', label: '全部结果' },
+  { value: 'success', label: '成功' },
+  { value: 'failure', label: '失败' },
+];
+
+/** 筛选草稿（UI 状态；与 URL search params 同构） */
+export interface AuditFilterDraft {
+  keyword: string;
+  /** 动作分类；空串 = 全部分类 */
+  category: string;
+  /** 操作人：姓名 / 账号关键字 */
+  actor: string;
+  /** 客户 id；空串 = 全部客户 */
+  customerId: string;
+  result: AuditResultFilter;
+  timePreset: AuditTimePreset;
+  /** 自定义起始日期（YYYY-MM-DD，本地时区） */
+  customFrom: string;
+  /** 自定义结束日期（YYYY-MM-DD，本地时区） */
+  customTo: string;
+}
+
+export interface AuditTimeRange {
+  from: string | null;
+  to: string | null;
+}
+
+export function createDefaultAuditFilter(): AuditFilterDraft {
+  return {
+    keyword: '',
+    category: '',
+    actor: '',
+    customerId: '',
+    result: 'all',
+    timePreset: DEFAULT_AUDIT_TIME_PRESET,
+    customFrom: '',
+    customTo: '',
+  };
+}
+
+export function isAuditTimePreset(value: string): value is AuditTimePreset {
+  return value === 'today' || value === '7d' || value === '30d' || value === 'custom';
+}
+
+export function isAuditResultFilter(value: string): value is AuditResultFilter {
+  return value === 'all' || value === 'success' || value === 'failure';
+}
+
+function startOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+}
+
+function endOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+}
+
+function shiftDays(date: Date, days: number): Date {
+  const next = new Date(date);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+
+/** `YYYY-MM-DD` → 本地当天 00:00；非法输入返回 null */
+export function parseDateInput(value: string): Date | null {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return null;
+  const date = new Date(`${value}T00:00:00`);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+/** Date → `YYYY-MM-DD`（本地时区） */
+export function formatDateInput(date: Date): string {
+  const year = String(date.getFullYear());
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+/** 时间预设 / 自定义区间 → from / to ISO（自定义缺任意一端时不限制该端） */
+export function resolveAuditTimeRange(draft: AuditFilterDraft, now: Date): AuditTimeRange {
+  switch (draft.timePreset) {
+    case 'today':
+      return { from: startOfDay(now).toISOString(), to: endOfDay(now).toISOString() };
+    case '7d':
+      return {
+        from: startOfDay(shiftDays(now, -6)).toISOString(),
+        to: endOfDay(now).toISOString(),
+      };
+    case '30d':
+      return {
+        from: startOfDay(shiftDays(now, -29)).toISOString(),
+        to: endOfDay(now).toISOString(),
+      };
+    case 'custom': {
+      const from = parseDateInput(draft.customFrom);
+      const to = parseDateInput(draft.customTo);
+      return {
+        from: from === null ? null : startOfDay(from).toISOString(),
+        to: to === null ? null : endOfDay(to).toISOString(),
+      };
+    }
+    default:
+      return { from: null, to: null };
+  }
+}
+
+/** 草稿 → 后端筛选（snake_case，空值剔除） */
+export function toAuditLogFilter(draft: AuditFilterDraft, now: Date): AuditLogFilter {
+  const filter: AuditLogFilter = {};
+  const keyword = draft.keyword.trim();
+  const actor = draft.actor.trim();
+  const range = resolveAuditTimeRange(draft, now);
+
+  if (keyword !== '') filter.keyword = keyword;
+  const category = AUDIT_CATEGORY_KEYS.find((key) => key === draft.category);
+  if (category !== undefined) filter.category = category;
+  if (actor !== '') filter.actor = actor;
+  if (draft.customerId !== '') filter.customer_id = draft.customerId;
+  if (draft.result !== 'all') filter.result = draft.result;
+  if (range.from !== null) filter.from = range.from;
+  if (range.to !== null) filter.to = range.to;
+  return filter;
+}
+
+/** 草稿 → URLSearchParams（仅序列化非默认值，便于分享 / 刷新还原） */
+export function serializeAuditFilters(draft: AuditFilterDraft): URLSearchParams {
+  const params = new URLSearchParams();
+  if (draft.keyword.trim() !== '') params.set('keyword', draft.keyword.trim());
+  if (draft.category !== '') params.set('category', draft.category);
+  if (draft.actor.trim() !== '') params.set('actor', draft.actor.trim());
+  if (draft.customerId !== '') params.set('customer', draft.customerId);
+  if (draft.result !== 'all') params.set('result', draft.result);
+  if (draft.timePreset !== DEFAULT_AUDIT_TIME_PRESET) params.set('time', draft.timePreset);
+  if (draft.timePreset === 'custom') {
+    if (draft.customFrom !== '') params.set('from', draft.customFrom);
+    if (draft.customTo !== '') params.set('to', draft.customTo);
+  }
+  return params;
+}
+
+/** URLSearchParams → 草稿（缺省时间范围为近 7 天） */
+export function parseAuditFilters(params: URLSearchParams): AuditFilterDraft {
+  const timeRaw = params.get('time') ?? '';
+  const resultRaw = params.get('result') ?? '';
+  const category = params.get('category') ?? '';
+  return {
+    keyword: params.get('keyword') ?? '',
+    category,
+    actor: params.get('actor') ?? '',
+    customerId: params.get('customer') ?? '',
+    result: isAuditResultFilter(resultRaw) ? resultRaw : 'all',
+    timePreset: isAuditTimePreset(timeRaw) ? timeRaw : DEFAULT_AUDIT_TIME_PRESET,
+    customFrom: params.get('from') ?? '',
+    customTo: params.get('to') ?? '',
+  };
+}
+
+/** 时间范围说明：用于导出抽屉的「本次导出范围」 */
+export function describeAuditTimeRange(
+  draft: AuditFilterDraft,
+  now: Date,
+): { label: string; range: string } {
+  const preset = AUDIT_TIME_PRESETS.find((item) => item.value === draft.timePreset);
+  const label = preset?.label ?? '近 7 天';
+  const resolved = resolveAuditTimeRange(draft, now);
+  if (resolved.from === null && resolved.to === null) {
+    return { label, range: draft.timePreset === 'custom' ? '未选择起止日期' : '不限时间' };
+  }
+  const from = resolved.from === null ? '不限' : formatDateInput(new Date(resolved.from));
+  const to = resolved.to === null ? '不限' : formatDateInput(new Date(resolved.to));
+  return { label, range: `${from} 至 ${to}` };
+}
+
+/** 两个草稿是否等价（用于避免重复查询 / 无效 URL 写入） */
+export function auditFiltersEqual(left: AuditFilterDraft, right: AuditFilterDraft): boolean {
+  return (
+    left.keyword.trim() === right.keyword.trim() &&
+    left.category === right.category &&
+    left.actor.trim() === right.actor.trim() &&
+    left.customerId === right.customerId &&
+    left.result === right.result &&
+    left.timePreset === right.timePreset &&
+    left.customFrom === right.customFrom &&
+    left.customTo === right.customTo
+  );
+}

apps/web/src/pages/system/run-logs/RunLogsPage.tsx

@@ -0,0 +1,238 @@
+/* eslint-disable max-lines-per-function -- 运行日志页由平台入口 / trace / 空态卡片组成，集中便于保持文案口径 */
+import { Button, Input } from '@douyinfe/semi-ui-19';
+import { Permission } from '@lingxi/shared';
+import { ErrorState, notifyError, notifySuccess, PageEmpty, PageSkeleton } from '@lingxi/ui';
+import { IconExport, IconLock, IconSearch, IconServer } from '@lingxi/ui/icons';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import { Link } from 'react-router';
+
+import { useEffectiveConfigsQuery } from '@/hooks/queries/use-configs';
+import { usePermission } from '@/hooks/use-permission';
+import { ROUTES } from '@/routes';
+
+import { copyToClipboard } from '../audit-logs/audit-clipboard';
+
+const PLATFORM_URL_KEY = 'audit.logs_platform_url';
+
+function isHttpUrl(value: string): boolean {
+  return /^https?:\/\/\S+$/.test(value);
+}
+
+function openUrl(url: string): void {
+  window.open(url, '_blank', 'noopener');
+}
+
+function PlatformCard({ url }: { url: string }): ReactNode {
+  return (
+    <section className="lx-runlog-card" aria-label="日志平台接入">
+      <div className="lx-runlog-card__head">
+        <b>日志平台接入</b>
+        <span className="lx-audit-tag lx-audit-tag--success">已接入</span>
+        <span className="lx-runlog-card__sub">运行日志集中检索</span>
+        <Button
+          size="small"
+          theme="borderless"
+          icon={<IconExport size={14} />}
+          onClick={() => {
+            openUrl(url);
+          }}
+        >
+          打开日志平台
+        </Button>
+      </div>
+      <div className="lx-runlog-platform">
+        <span className="lx-runlog-platform__icon" aria-hidden="true">
+          <IconServer size={22} />
+        </span>
+        <div className="lx-runlog-platform__main">
+          <b>日志平台</b>
+          <a className="lx-audit-link lx-audit-mono" href={url} target="_blank" rel="noopener">
+            {url}
+          </a>
+        </div>
+        <Button
+          theme="solid"
+          type="primary"
+          size="small"
+          onClick={() => {
+            openUrl(url);
+          }}
+        >
+          在平台中检索
+        </Button>
+      </div>
+      <div className="lx-runlog-flow">
+        <div className="lx-runlog-flow__step">
+          <i>1</i>
+          <span>从操作日志复制 trace_id</span>
+        </div>
+        <span className="lx-runlog-flow__arrow" aria-hidden="true">
+          →
+        </span>
+        <div className="lx-runlog-flow__step">
+          <i>2</i>
+          <span>在日志平台粘贴检索</span>
+        </div>
+      </div>
+      <div className="lx-runlog-note">
+        平台地址由「系统配置 › 审计与日志 › 运行日志平台地址」维护；运行日志不写入业务库。
+      </div>
+    </section>
+  );
+}
+
+function TraceCard({ url }: { url: string }): ReactNode {
+  const [traceId, setTraceId] = useState('');
+  const trimmed = traceId.trim();
+
+  return (
+    <section className="lx-runlog-card" aria-label="trace 检索">
+      <div className="lx-runlog-card__head">
+        <b>trace 检索</b>
+        <span className="lx-runlog-card__sub">复制 trace_id 到日志平台查询</span>
+      </div>
+      <div className="lx-runlog-trace">
+        <Input
+          value={traceId}
+          prefix={<IconSearch size={16} />}
+          placeholder="输入或粘贴 trace_id"
+          showClear
+          maxLength={128}
+          onChange={setTraceId}
+        />
+        <Button
+          theme="solid"
+          type="primary"
+          disabled={trimmed === ''}
+          onClick={() => {
+            void copyToClipboard(trimmed).then((ok) => {
+              if (ok) notifySuccess('已复制 trace_id，请到日志平台粘贴检索');
+              else notifyError('复制失败，请手动选择文本');
+            });
+          }}
+        >
+          复制 trace_id
+        </Button>
+        <Button
+          icon={<IconExport size={16} />}
+          onClick={() => {
+            openUrl(url);
+          }}
+        >
+          打开日志平台
+        </Button>
+      </div>
+      <div className="lx-runlog-trace__hint">
+        操作日志详情中的 trace_id 与后端日志一致：复制后到日志平台按 trace_id
+        检索即可查看完整链路。本页不保存检索历史。
+      </div>
+    </section>
+  );
+}
+
+function EmptyCard({ title, description }: { title: string; description: string }): ReactNode {
+  return (
+    <section className="lx-runlog-card lx-runlog-card--empty" aria-label={title}>
+      <div className="lx-runlog-card__head">
+        <b>{title}</b>
+      </div>
+      <PageEmpty title={title} description={description} />
+    </section>
+  );
+}
+
+/** 运行日志（用户选定方案 C：平台入口 / trace 检索 / 服务状态 / 最近错误；真实数据只有平台地址） */
+export function RunLogsPage(): ReactNode {
+  const effective = useEffectiveConfigsQuery();
+  const canConfigure = usePermission(Permission.SYSTEM_CONFIGURE);
+  const rawUrl = effective.data?.[PLATFORM_URL_KEY];
+  const url = typeof rawUrl === 'string' ? rawUrl.trim() : '';
+  const configured = isHttpUrl(url);
+
+  return (
+    <div className="lx-runlog-page">
+      <header className="lx-audit-page__header">
+        <div>
+          <h1>运行日志</h1>
+          <p>与操作日志分离 · 只读观测入口</p>
+        </div>
+        <div className="lx-audit-page__actions">
+          <span className="lx-audit-readonly">
+            <IconLock size={14} />
+            只读
+          </span>
+          {configured ? (
+            <Button
+              icon={<IconExport size={16} />}
+              onClick={() => {
+                openUrl(url);
+              }}
+            >
+              打开日志平台
+            </Button>
+          ) : null}
+        </div>
+      </header>
+
+      <div className="lx-audit-note" role="note">
+        <IconServer size={16} />
+        <span>
+          <b>运行日志不写入业务库</b>：本页只提供日志平台入口与 trace 检索指引；业务追责请查看
+          append-only 的操作日志。
+        </span>
+        <Link to={ROUTES.system.auditLogs} className="lx-audit-link">
+          前往操作日志
+        </Link>
+      </div>
+
+      {effective.isPending ? (
+        <div className="lx-runlog-grid">
+          <PageSkeleton rows={6} />
+          <PageSkeleton rows={6} />
+        </div>
+      ) : effective.error === null ? null : (
+        <section className="lx-audit-state" aria-label="运行日志配置加载失败">
+          <ErrorState
+            title="日志平台配置加载失败"
+            message={effective.error.message}
+            onRetry={() => {
+              void effective.refetch();
+            }}
+          />
+        </section>
+      )}
+
+      {effective.isPending || effective.error !== null ? null : configured ? (
+        <div className="lx-runlog-grid">
+          <PlatformCard url={url} />
+          <EmptyCard
+            title="服务状态"
+            description="服务状态与日志级别统计由日志平台提供；本页不伪造运行数据，请打开平台查看。"
+          />
+          <TraceCard url={url} />
+          <EmptyCard
+            title="最近错误"
+            description="接入日志平台后在此查看最近错误；错误日志与上下文请到日志平台按级别 / trace_id 检索。"
+          />
+        </div>
+      ) : (
+        <section className="lx-runlog-unconfigured" aria-label="尚未配置日志平台">
+          <PageEmpty
+            title="尚未配置日志平台"
+            description="到系统配置填写运行日志平台地址后，这里会展示平台入口与 trace 检索；运行日志不写入业务库。"
+            action={
+              canConfigure ? (
+                <Link to={ROUTES.system.settings} className="lx-audit-link">
+                  前往系统配置
+                </Link>
+              ) : (
+                <span className="lx-audit-muted">请联系平台管理员在系统配置中填写日志平台地址</span>
+              )
+            }
+          />
+        </section>
+      )}
+    </div>
+  );
+}

apps/web/src/router.tsx

@@ -84,6 +84,21 @@ const SettingsPage = lazy(async () => {
   return { default: module.SettingsPage };
 });
 
+const AuditLogsPage = lazy(async () => {
+  const module = await import('@/pages/system/audit-logs/AuditLogsPage');
+  return { default: module.AuditLogsPage };
+});
+
+const AuditLogDetailPage = lazy(async () => {
+  const module = await import('@/pages/system/audit-logs/AuditLogDetailPage');
+  return { default: module.AuditLogDetailPage };
+});
+
+const RunLogsPage = lazy(async () => {
+  const module = await import('@/pages/system/run-logs/RunLogsPage');
+  return { default: module.RunLogsPage };
+});
+
 function withSkeleton(node: ReactNode): ReactNode {
   return <Suspense fallback={<PageSkeleton rows={8} />}>{node}</Suspense>;
 }
@@ -238,6 +253,30 @@ export const router = createBrowserRouter([
           </RequirePermission>
         ),
       },
+      {
+        path: 'system/audit-logs',
+        element: (
+          <RequirePermission permission={Permission.AUDIT_READ}>
+            {withSkeleton(<AuditLogsPage />)}
+          </RequirePermission>
+        ),
+      },
+      {
+        path: 'system/audit-logs/:id',
+        element: (
+          <RequirePermission permission={Permission.AUDIT_READ}>
+            {withSkeleton(<AuditLogDetailPage />)}
+          </RequirePermission>
+        ),
+      },
+      {
+        path: 'system/logs',
+        element: (
+          <RequirePermission permission={Permission.AUDIT_READ}>
+            {withSkeleton(<RunLogsPage />)}
+          </RequirePermission>
+        ),
+      },
       {
         path: 'system/settings',
         element: (

apps/web/src/routes.spec.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import {
+  auditLogDetailPath,
   loginPath,
   roleDetailPath,
   roleNewPath,
@@ -31,6 +32,15 @@ describe('路由常量与登录回跳', () => {
     );
   });
 
+  it('A5 审计路由：列表 / 详情 / 运行日志', () => {
+    expect(ROUTES.system.auditLogs).toBe('/system/audit-logs');
+    expect(ROUTES.system.auditLogDetail).toBe('/system/audit-logs/:id');
+    expect(ROUTES.system.runLogs).toBe('/system/logs');
+    expect(auditLogDetailPath('01HZZZZZZZZZZZZZZZZZZZZZZZ')).toBe(
+      '/system/audit-logs/01HZZZZZZZZZZZZZZZZZZZZZZZ',
+    );
+  });
+
   it('部门管理路由挂在管理中心下', () => {
     expect(ROUTES.system.departments).toBe('/system/departments');
   });

apps/web/src/routes.ts

@@ -24,6 +24,9 @@ export const ROUTES = {
     customerFields: '/system/customer-fields/approvals',
     dicts: '/system/dicts',
     dictDetail: '/system/dicts/:type',
+    auditLogs: '/system/audit-logs',
+    auditLogDetail: '/system/audit-logs/:id',
+    runLogs: '/system/logs',
     settings: '/system/settings',
   },
   unauthorized: '/401',
@@ -51,6 +54,9 @@ export type RoutePath =
   | typeof ROUTES.system.customerFields
   | typeof ROUTES.system.dicts
   | typeof ROUTES.system.dictDetail
+  | typeof ROUTES.system.auditLogs
+  | typeof ROUTES.system.auditLogDetail
+  | typeof ROUTES.system.runLogs
   | typeof ROUTES.system.settings
   | typeof ROUTES.unauthorized
   | typeof ROUTES.forbidden
@@ -77,6 +83,11 @@ export function dictDetailPath(typeCode: string): string {
   return `${ROUTES.system.dicts}/${encodeURIComponent(typeCode)}`;
 }
 
+/** 操作日志详情深链：`/system/audit-logs/{id}` */
+export function auditLogDetailPath(logId: string): string {
+  return `${ROUTES.system.auditLogs}/${encodeURIComponent(logId)}`;
+}
+
 /** 新建客户（四步向导） */
 export function customerNewPath(): string {
   return ROUTES.system.customerNew;

apps/web/src/styles/run-logs.css

@@ -0,0 +1,187 @@
+/* A5 运行日志（用户选定方案 C：平台入口 / trace 检索 / 服务状态 / 最近错误） */
+
+.lx-runlog-page {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--lx-space-4);
+  overflow-y: auto;
+}
+
+.lx-runlog-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+  gap: var(--lx-space-4);
+  align-items: start;
+}
+
+.lx-runlog-card {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--lx-color-border);
+  border-radius: var(--lx-radius-lg);
+  background: var(--lx-color-bg-panel);
+  box-shadow: var(--lx-shadow-panel);
+}
+
+.lx-runlog-card__head {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--lx-color-border);
+}
+
+.lx-runlog-card__head b {
+  font-size: var(--lx-font-size-sm);
+  font-weight: 600;
+}
+
+.lx-runlog-card__head .semi-button {
+  margin-left: auto;
+}
+
+.lx-runlog-card__sub {
+  color: var(--lx-color-text-tertiary);
+  font-size: var(--lx-font-size-xs);
+}
+
+.lx-runlog-card--empty {
+  min-height: 240px;
+}
+
+.lx-runlog-card--empty .lx-empty {
+  flex: 1;
+}
+
+.lx-runlog-platform {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+}
+
+.lx-runlog-platform__icon {
+  display: inline-flex;
+  width: 40px;
+  height: 40px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--lx-radius-md);
+  background: var(--lx-color-brand-soft);
+  color: var(--lx-color-brand);
+}
+
+.lx-runlog-platform__main {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.lx-runlog-platform__main b {
+  font-size: var(--lx-font-size-md);
+  font-weight: 600;
+}
+
+.lx-runlog-platform__main a {
+  overflow: hidden;
+  color: var(--lx-color-brand);
+  font-size: var(--lx-font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lx-runlog-flow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px 14px;
+}
+
+.lx-runlog-flow__step {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 10px;
+  border: 1px solid var(--lx-color-border);
+  border-radius: var(--lx-radius-md);
+  color: var(--lx-color-text-secondary);
+  font-size: var(--lx-font-size-xs);
+}
+
+.lx-runlog-flow__step i {
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--lx-color-brand-soft);
+  color: var(--lx-color-brand);
+  font-size: 11px;
+  font-style: normal;
+}
+
+.lx-runlog-flow__arrow {
+  color: var(--lx-color-text-tertiary);
+}
+
+.lx-runlog-note {
+  padding: 10px 16px;
+  border-top: 1px solid var(--lx-color-border);
+  background: var(--lx-color-bg-subtle);
+  color: var(--lx-color-text-tertiary);
+  font-size: var(--lx-font-size-xs);
+}
+
+.lx-runlog-trace {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+}
+
+.lx-runlog-trace .semi-input-wrapper {
+  min-width: 220px;
+  flex: 1;
+}
+
+.lx-runlog-trace__hint {
+  padding: 0 16px 14px;
+  color: var(--lx-color-text-tertiary);
+  font-size: var(--lx-font-size-xs);
+  line-height: 1.7;
+}
+
+.lx-runlog-unconfigured {
+  display: flex;
+  flex: 1;
+  min-height: 320px;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  border: 1px solid var(--lx-color-border);
+  border-radius: var(--lx-radius-lg);
+  background: var(--lx-color-bg-panel);
+  box-shadow: var(--lx-shadow-panel);
+}
+
+@media (width <= 1200px) {
+  .lx-runlog-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .lx-runlog-card--empty {
+    min-height: 180px;
+  }
+}