feat(audit): 日活使用统计 + 双 CSV 导出（审计/上下线，列可自定义）
【日活统计：GET /audit/daily-usage】 按【北京时间自然日 × 操作人】聚合，单个 GROUP BY 完成（count(*) FILTER）， 不用窗口函数。指标：上线/下线时间、操作次数、登录/登出次数。 ⚠️ 上线/下线时间取【当天首次/末次活动】，刻意不取登录时间： Refresh Token 有效期 7 天，用户不必每天重新登录。按登录算会出现 「登录次数 0、上线时间空，但操作次数 35」——报表自相矛盾。 时间一律按 +08:00 分日与渲染，否则早班（00:00~08:00）操作会掉到前一天。 【CSV 导出：两个端点 + 列自定义】 - /audit/logs/export 整体审计导出，筛选维度与列表页完全一致 - /audit/daily-usage/export 上下线导出，每人一行 - 列清单由后端统一维护并经 /audit/options 下发（log_export_columns / usage_export_columns），前端不硬编码表头，避免两端漂移 - ⚠️ 响应带 UTF-8 BOM：Excel 靠它识别编码，否则中文表头全乱码 - 单次上限 5 万行，超出经 X-Export-Truncated 头告知前端明确提示 （静默截断比报错更危险） - list_audit_logs 与 export_audit_logs 共用 _log_filters， 保证「看到的」与「导出的」永远是同一批数据 【前端】 - 审计页页头新增「人员统计」「导出 CSV」两个按钮，现有表格与筛选零改动 - 人员统计走抽屉（AuditUsagePanel）：日期范围+快捷键、日活表格、 上下线次数彩色标签、北京时间渲染、导出前弹列勾选面板 - ExportColumnsModal 为两处导出共用，默认全选
This commit is contained in:
75
frontend/src/components/admin/ExportColumnsModal.tsx
Normal file
75
frontend/src/components/admin/ExportColumnsModal.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
/**
|
||||
* 导出列选择弹窗 —— 勾选要写进 CSV 的列。
|
||||
*
|
||||
* 列清单由后端 /audit/options 下发（value=后端列 key，label=中文表头），
|
||||
* 前端不硬编码表头：否则两端各维护一份，迟早出现「导出的列和页面对不上」。
|
||||
*
|
||||
* 默认全选 —— 大多数人只是想"全部导出来"，不该逼他们先勾一遍。
|
||||
*/
|
||||
import { useEffect, useState } from "react";
|
||||
import { Modal, Checkbox, Button } from "antd";
|
||||
import type { AuditOption } from "../../services/auditApi";
|
||||
|
||||
export default function ExportColumnsModal({
|
||||
open,
|
||||
columns,
|
||||
submitting,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
}: {
|
||||
open: boolean;
|
||||
columns: AuditOption[];
|
||||
submitting?: boolean;
|
||||
onCancel: () => void;
|
||||
/** 传出当前勾选的列 key（顺序 = 后端下发顺序，保证表头稳定） */
|
||||
onConfirm: (keys: string[]) => void;
|
||||
}) {
|
||||
const [checked, setChecked] = useState<string[]>([]);
|
||||
|
||||
// 每次打开都重置为全选：上一次的勾选残留会让用户莫名少导几列
|
||||
useEffect(() => {
|
||||
if (open) setChecked(columns.map((c) => c.value));
|
||||
}, [open, columns]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
title="选择导出列"
|
||||
onCancel={onCancel}
|
||||
width={520}
|
||||
footer={
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex gap-2">
|
||||
<Button size="small" onClick={() => setChecked(columns.map((c) => c.value))}>
|
||||
全选
|
||||
</Button>
|
||||
<Button size="small" onClick={() => setChecked([])}>
|
||||
全不选
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={onCancel}>取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
loading={submitting}
|
||||
disabled={checked.length === 0}
|
||||
onClick={() => onConfirm(checked)}
|
||||
>
|
||||
导出 ({checked.length} 列)
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{checked.length === 0 && (
|
||||
<p className="mb-2 text-xs text-amber-600">至少勾选一列才能导出。</p>
|
||||
)}
|
||||
<Checkbox.Group
|
||||
value={checked}
|
||||
onChange={(v) => setChecked(v as string[])}
|
||||
className="grid grid-cols-3 gap-y-2"
|
||||
options={columns.map((c) => ({ value: c.value, label: c.label }))}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@ -1,11 +1,17 @@
|
||||
/** 操作审计日志 — 谁 / 何时 / 从哪 / 对什么 / 做了什么事 / 结果如何 */
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { ScrollText, Loader2, AlertCircle, RefreshCw, Search, X } from "lucide-react";
|
||||
import { ScrollText, Loader2, AlertCircle, RefreshCw, Search, X, Download, BarChart3 } from "lucide-react";
|
||||
import { Table, Tag, Input, Select, DatePicker, Button, Tooltip, Drawer, Descriptions } from "antd";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import dayjs, { type Dayjs } from "dayjs";
|
||||
import { fetchAuditLogs, fetchAuditOptions, type AuditLogItem, type AuditOption } from "../../services/auditApi";
|
||||
import {
|
||||
fetchAuditLogs, fetchAuditOptions, exportAuditLogsCsv,
|
||||
type AuditLogItem, type AuditOption,
|
||||
} from "../../services/auditApi";
|
||||
import { extractErrorMessage } from "../../utils/errorMessage";
|
||||
import { useToast } from "../../components/ui/Toast";
|
||||
import AuditUsagePanel from "./AuditUsagePanel";
|
||||
import ExportColumnsModal from "../../components/admin/ExportColumnsModal";
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
@ -36,8 +42,15 @@ export default function AdminAuditLogPage() {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [detail, setDetail] = useState<AuditLogItem | null>(null);
|
||||
|
||||
const { toast } = useToast();
|
||||
const [modules, setModules] = useState<AuditOption[]>([]);
|
||||
const [actions, setActions] = useState<AuditOption[]>([]);
|
||||
/** 导出可选列 —— 由后端下发，前端不硬编码表头 */
|
||||
const [logColumns, setLogColumns] = useState<AuditOption[]>([]);
|
||||
|
||||
const [usageOpen, setUsageOpen] = useState(false); // 人员统计抽屉
|
||||
const [exportPickerOpen, setExportPickerOpen] = useState(false);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
|
||||
// 筛选条件（user_id 用受控输入，其余即时生效）
|
||||
const [userInput, setUserInput] = useState("");
|
||||
@ -81,12 +94,43 @@ export default function AdminAuditLogPage() {
|
||||
.then((o) => {
|
||||
setModules(o.modules);
|
||||
setActions(o.actions);
|
||||
setLogColumns(o.log_export_columns || []);
|
||||
})
|
||||
.catch(() => {
|
||||
/* 筛选项拉取失败不影响列表本身 */
|
||||
});
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 导出当前筛选条件下的明细。
|
||||
* 刻意复用与列表完全相同的筛选参数 —— 导出与"看到的"必须是同一批数据，
|
||||
* 否则使用者会怀疑到底哪份才是真的。
|
||||
*/
|
||||
async function handleExport(columns: string[]) {
|
||||
setExporting(true);
|
||||
try {
|
||||
const truncated = await exportAuditLogsCsv({
|
||||
user_id: userId || undefined,
|
||||
module,
|
||||
action,
|
||||
status_code: statusCode,
|
||||
start_date: range?.[0]?.format("YYYY-MM-DD"),
|
||||
end_date: range?.[1]?.format("YYYY-MM-DD"),
|
||||
columns,
|
||||
});
|
||||
setExportPickerOpen(false);
|
||||
// 截断必须显式告知：静默少几万行比报错更危险
|
||||
toast(
|
||||
truncated ? "已导出，但数据超上限已被截断，请收窄筛选条件" : "已导出 CSV",
|
||||
truncated ? "error" : "success",
|
||||
);
|
||||
} catch (e) {
|
||||
toast(extractErrorMessage(e, "导出失败"), "error");
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
}
|
||||
|
||||
const hasFilter = !!(userId || module || action || statusCode || range);
|
||||
|
||||
const resetFilters = () => {
|
||||
@ -185,9 +229,23 @@ export default function AdminAuditLogPage() {
|
||||
所有写操作（含被拒绝的请求）自动留痕，共 {total} 条
|
||||
</p>
|
||||
</div>
|
||||
<Button icon={<RefreshCw className="h-4 w-4" />} onClick={() => void load()} loading={loading}>
|
||||
刷新
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 人员统计刻意做成抽屉而不是标签页：两个视图的粒度不同
|
||||
（一行一次操作 vs 一人一天一行），并列成 Tab 会让筛选状态互相干扰 */}
|
||||
<Button icon={<BarChart3 className="h-4 w-4" />} onClick={() => setUsageOpen(true)}>
|
||||
人员统计
|
||||
</Button>
|
||||
<Button
|
||||
icon={<Download className="h-4 w-4" />}
|
||||
disabled={total === 0}
|
||||
onClick={() => setExportPickerOpen(true)}
|
||||
>
|
||||
导出 CSV
|
||||
</Button>
|
||||
<Button icon={<RefreshCw className="h-4 w-4" />} onClick={() => void load()} loading={loading}>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 筛选区 */}
|
||||
@ -350,6 +408,17 @@ export default function AdminAuditLogPage() {
|
||||
</Descriptions>
|
||||
)}
|
||||
</Drawer>
|
||||
|
||||
{/* 人员统计：独立抽屉，本页表格与筛选完全不受影响 */}
|
||||
<AuditUsagePanel open={usageOpen} onClose={() => setUsageOpen(false)} />
|
||||
|
||||
<ExportColumnsModal
|
||||
open={exportPickerOpen}
|
||||
columns={logColumns}
|
||||
submitting={exporting}
|
||||
onCancel={() => setExportPickerOpen(false)}
|
||||
onConfirm={handleExport}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
207
frontend/src/pages/admin/AuditUsagePanel.tsx
Normal file
207
frontend/src/pages/admin/AuditUsagePanel.tsx
Normal file
@ -0,0 +1,207 @@
|
||||
/**
|
||||
* 人员统计（日活报表）—— 以抽屉形式挂在操作审计页旁边。
|
||||
*
|
||||
* 回答的是「每天有哪些人用了系统、用了多少」：
|
||||
* 上线次数 / 上线时间、下线次数 / 下线时间、操作次数。
|
||||
*
|
||||
* 刻意不复用审计明细页的表格：两者的粒度不同（一个是一行一次操作，
|
||||
* 一个是一人一天一行），合在一起筛选状态会互相干扰。
|
||||
*/
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Drawer, Table, DatePicker, Button, Alert, Tag, Empty } from "antd";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import { Download, Loader2, RefreshCw } from "lucide-react";
|
||||
import dayjs, { type Dayjs } from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import {
|
||||
fetchDailyUsage, fetchAuditOptions, exportDailyUsageCsv,
|
||||
type DailyUsageRow, type AuditOption,
|
||||
} from "../../services/auditApi";
|
||||
import { extractErrorMessage } from "../../utils/errorMessage";
|
||||
import { useToast } from "../../components/ui/Toast";
|
||||
import ExportColumnsModal from "../../components/admin/ExportColumnsModal";
|
||||
|
||||
// 后端返回的是 UTC，而统计按【北京时间自然日】分组。
|
||||
// 必须显式按 +08:00 渲染 —— 依赖浏览器本地时区的话，一旦有人机器不在东八区，
|
||||
// 时间就会和「日期」列对不上（比如显示 17:00 而日期是次日）。
|
||||
dayjs.extend(utc);
|
||||
const BJ_OFFSET_MIN = 8 * 60;
|
||||
|
||||
function bjTime(v: string | null): string {
|
||||
if (!v) return "—";
|
||||
return dayjs.utc(v).utcOffset(BJ_OFFSET_MIN).format("HH:mm");
|
||||
}
|
||||
|
||||
/** 「上线 vs 下线」次数配色：有记录就显眼，0 就淡化 */
|
||||
function countTag(n: number, cls: string) {
|
||||
if (!n) return <span className="text-gray-300">0</span>;
|
||||
return <Tag className={`${cls} border-0 font-semibold`}>{n}</Tag>;
|
||||
}
|
||||
|
||||
export default function AuditUsagePanel({
|
||||
open,
|
||||
onClose,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const { toast } = useToast();
|
||||
const [rows, setRows] = useState<DailyUsageRow[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [range, setRange] = useState<[Dayjs, Dayjs]>([dayjs(), dayjs()]);
|
||||
|
||||
const [usageColumns, setUsageColumns] = useState<AuditOption[]>([]);
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetchDailyUsage({
|
||||
start_date: range[0].format("YYYY-MM-DD"),
|
||||
end_date: range[1].format("YYYY-MM-DD"),
|
||||
});
|
||||
setRows(res.items);
|
||||
} catch (err: unknown) {
|
||||
setError(extractErrorMessage(err, "加载使用统计失败"));
|
||||
setRows([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [range]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) load();
|
||||
}, [open, load]);
|
||||
|
||||
// 列清单只需拉一次；失败不阻断表格本身
|
||||
useEffect(() => {
|
||||
if (!open || usageColumns.length) return;
|
||||
fetchAuditOptions()
|
||||
.then((o) => setUsageColumns(o.usage_export_columns || []))
|
||||
.catch(() => { /* 拉不到列清单只影响导出，不影响查看 */ });
|
||||
}, [open, usageColumns.length]);
|
||||
|
||||
async function handleExport(columns: string[]) {
|
||||
setExporting(true);
|
||||
try {
|
||||
const truncated = await exportDailyUsageCsv({
|
||||
start_date: range[0].format("YYYY-MM-DD"),
|
||||
end_date: range[1].format("YYYY-MM-DD"),
|
||||
columns,
|
||||
});
|
||||
setPickerOpen(false);
|
||||
toast(truncated ? "已导出（数据超上限，已截断）" : "已导出 CSV", truncated ? "error" : "success");
|
||||
} catch (err: unknown) {
|
||||
toast(extractErrorMessage(err, "导出失败"), "error");
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
}
|
||||
|
||||
const multiDay = range[0].format("YYYY-MM-DD") !== range[1].format("YYYY-MM-DD");
|
||||
|
||||
const columns: ColumnsType<DailyUsageRow> = [
|
||||
// 单日查询时日期列是冗余的，自动隐藏，少一列噪音
|
||||
...(multiDay
|
||||
? [{ title: "日期", dataIndex: "day", width: 110,
|
||||
sorter: (a: DailyUsageRow, b: DailyUsageRow) => a.day.localeCompare(b.day) }]
|
||||
: []),
|
||||
{
|
||||
title: "操作人", dataIndex: "display_name", width: 160,
|
||||
render: (_: unknown, r: DailyUsageRow) => (
|
||||
<div className="leading-tight">
|
||||
<div className="text-gray-900">{r.display_name || r.user_id || "—"}</div>
|
||||
{r.display_name && <div className="text-xs text-gray-400">{r.user_id}</div>}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
// 上线/下线时间 = 当天首次/末次【活动】。token 有效期内用户不重新登录，
|
||||
// 若取登录时间会得出"登录 0 次却操作 35 次"的矛盾数据（见后端 docstring）
|
||||
{ title: "上线时间", dataIndex: "first_active_at", width: 100, align: "center",
|
||||
render: (v: string | null) => <span className="font-mono text-gray-700">{bjTime(v)}</span> },
|
||||
{ title: "下线时间", dataIndex: "last_active_at", width: 100, align: "center",
|
||||
render: (v: string | null) => <span className="font-mono text-gray-700">{bjTime(v)}</span> },
|
||||
{ title: "操作次数", dataIndex: "op_count", width: 110, align: "center",
|
||||
render: (v: number) => <span className="font-bold text-blue-600">{v}</span>,
|
||||
sorter: (a: DailyUsageRow, b: DailyUsageRow) => a.op_count - b.op_count,
|
||||
defaultSortOrder: "descend" as const },
|
||||
// 登录/登出次数是真实的手动行为计数，与上面的活动时间并列展示，不混为一谈
|
||||
{ title: "登录次数", dataIndex: "login_count", width: 100, align: "center",
|
||||
render: (v: number) => countTag(v, "bg-emerald-100 text-emerald-700"),
|
||||
sorter: (a: DailyUsageRow, b: DailyUsageRow) => a.login_count - b.login_count },
|
||||
{ title: "登出次数", dataIndex: "logout_count", width: 100, align: "center",
|
||||
render: (v: number) => countTag(v, "bg-blue-100 text-blue-700"),
|
||||
sorter: (a: DailyUsageRow, b: DailyUsageRow) => a.logout_count - b.logout_count },
|
||||
];
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
width={1000}
|
||||
title="📊 人员统计（日活）"
|
||||
extra={
|
||||
<Button icon={<RefreshCw className="h-3.5 w-3.5" />} onClick={load} disabled={loading}>
|
||||
刷新
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="mb-4 flex flex-wrap items-center gap-2">
|
||||
<DatePicker.RangePicker
|
||||
value={range}
|
||||
allowClear={false}
|
||||
onChange={(v) => { if (v?.[0] && v?.[1]) setRange([v[0], v[1]]); }}
|
||||
presets={[
|
||||
{ label: "今天", value: [dayjs(), dayjs()] },
|
||||
{ label: "昨天", value: [dayjs().subtract(1, "day"), dayjs().subtract(1, "day")] },
|
||||
{ label: "近 7 天", value: [dayjs().subtract(6, "day"), dayjs()] },
|
||||
{ label: "本月", value: [dayjs().startOf("month"), dayjs()] },
|
||||
]}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<Download className="h-3.5 w-3.5" />}
|
||||
disabled={rows.length === 0}
|
||||
onClick={() => setPickerOpen(true)}
|
||||
>
|
||||
导出 CSV
|
||||
</Button>
|
||||
<span className="text-xs text-gray-400">
|
||||
{rows.length > 0 && `共 ${rows.length} 人·天`} ｜ 时间均为北京时间
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert type="error" showIcon className="mb-3" message={error} />
|
||||
)}
|
||||
|
||||
{/* 两处口径容易被误读，直接写在表格上方 */}
|
||||
<p className="mb-3 text-xs text-gray-400">
|
||||
ⓘ 「上线/下线时间」= 当天首次/末次<strong>活动</strong>时间，不是登录时间 ——
|
||||
登录状态可保持 7 天，当天不登录也会正常统计。
|
||||
「登录/登出次数」是真实的手动登录行为计数，登出通常少于登录（关浏览器、断网不产生登出记录）。
|
||||
</p>
|
||||
|
||||
<Table<DailyUsageRow>
|
||||
rowKey={(r) => `${r.day}|${r.user_id ?? ""}`}
|
||||
size="small"
|
||||
columns={columns}
|
||||
dataSource={rows}
|
||||
loading={{ spinning: loading, indicator: <Loader2 className="h-5 w-5 animate-spin text-blue-500" /> }}
|
||||
pagination={{ pageSize: 20, showSizeChanger: true, showTotal: (t) => `共 ${t} 条` }}
|
||||
locale={{ emptyText: <Empty description="该时段没有使用记录" /> }}
|
||||
/>
|
||||
|
||||
<ExportColumnsModal
|
||||
open={pickerOpen}
|
||||
columns={usageColumns}
|
||||
submitting={exporting}
|
||||
onCancel={() => setPickerOpen(false)}
|
||||
onConfirm={handleExport}
|
||||
/>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
@ -44,6 +44,34 @@ export interface AuditOption {
|
||||
export interface AuditOptionsResponse {
|
||||
modules: AuditOption[];
|
||||
actions: AuditOption[];
|
||||
/** 导出可选列（value=后端列 key，label=中文表头）—— 由后端下发，前端不再硬编码 */
|
||||
log_export_columns: AuditOption[];
|
||||
usage_export_columns: AuditOption[];
|
||||
}
|
||||
|
||||
/** 日活统计的单行（某人在某一天的用量） */
|
||||
export interface DailyUsageRow {
|
||||
day: string;
|
||||
user_id: string | null;
|
||||
display_name: string | null;
|
||||
role: string | null;
|
||||
login_count: number;
|
||||
logout_count: number;
|
||||
op_count: number;
|
||||
/**
|
||||
* 上线 / 下线时间 = 当天首次 / 末次【活动】时间（不是登录时间）。
|
||||
* token 有效期内用户不重新登录，按登录算会得出"登录 0 次却操作 35 次"的矛盾数据。
|
||||
* ISO(UTC)，展示前必须转北京时间，否则会和 day 列对不上。
|
||||
*/
|
||||
first_active_at: string | null;
|
||||
last_active_at: string | null;
|
||||
}
|
||||
|
||||
export interface DailyUsageResponse {
|
||||
start_date: string;
|
||||
end_date: string;
|
||||
items: DailyUsageRow[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface AuditLogQuery {
|
||||
@ -70,8 +98,74 @@ export async function fetchAuditLogs(q: AuditLogQuery = {}): Promise<AuditLogLis
|
||||
return data;
|
||||
}
|
||||
|
||||
/** 获取模块/动作筛选项 */
|
||||
/** 获取模块/动作筛选项（含导出可选列） */
|
||||
export async function fetchAuditOptions(): Promise<AuditOptionsResponse> {
|
||||
const { data } = await api.get<AuditOptionsResponse>("/audit/options");
|
||||
return data;
|
||||
}
|
||||
|
||||
/** 日活 / 使用统计 —— 按【北京时间自然日 × 操作人】聚合 */
|
||||
export async function fetchDailyUsage(params: {
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
} = {}): Promise<DailyUsageResponse> {
|
||||
const { data } = await api.get<DailyUsageResponse>("/audit/daily-usage", { params });
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 触发浏览器下载一个 CSV。
|
||||
*
|
||||
* ⚠️ 不能直接用 <a href="/api/..."> 或 window.open：本项目是 Bearer Token 鉴权
|
||||
* （token 在 localStorage，不在 Cookie），普通链接带不上 Authorization 头，
|
||||
* 后端会直接 401。必须先经 axios 取回 blob 再本地落盘。
|
||||
*
|
||||
* @returns 是否因超出后端行数上限而被截断（调用方据此提示用户，不要静默）
|
||||
*/
|
||||
async function downloadCsv(
|
||||
path: string,
|
||||
params: Record<string, unknown>,
|
||||
filename: string,
|
||||
): Promise<boolean> {
|
||||
const resp = await api.get(path, { params, responseType: "blob" });
|
||||
const url = URL.createObjectURL(resp.data as Blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
return resp.headers["x-export-truncated"] === "1";
|
||||
}
|
||||
|
||||
/** 导出审计明细（列可自定义，columns 为后端列 key 数组；不传=全部列） */
|
||||
export function exportAuditLogsCsv(
|
||||
q: AuditLogQuery & { columns?: string[] },
|
||||
): Promise<boolean> {
|
||||
const { columns, ...rest } = q;
|
||||
return downloadCsv(
|
||||
"/audit/logs/export",
|
||||
{ ...clean(rest), columns: columns?.join(",") },
|
||||
"audit_logs.csv",
|
||||
);
|
||||
}
|
||||
|
||||
/** 导出日活统计（每人一行，列可自定义） */
|
||||
export function exportDailyUsageCsv(
|
||||
params: { start_date?: string; end_date?: string; columns?: string[] },
|
||||
): Promise<boolean> {
|
||||
const { columns, ...rest } = params;
|
||||
return downloadCsv(
|
||||
"/audit/daily-usage/export",
|
||||
{ ...clean(rest), columns: columns?.join(",") },
|
||||
"daily_usage.csv",
|
||||
);
|
||||
}
|
||||
|
||||
/** 去掉 undefined / null / 空串，避免拼出 ?a=&b= 这类空参数 */
|
||||
function clean(o: Record<string, unknown>): Record<string, unknown> {
|
||||
return Object.fromEntries(
|
||||
Object.entries(o).filter(([, v]) => v !== undefined && v !== null && v !== "")
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user