874 lines
46 KiB
TypeScript
874 lines
46 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
|
||
import { App, Button, DatePicker, Drawer, Form, Input, Modal, Select, Tabs, Tag, Tooltip } from "antd";
|
||
import type { ColumnsType } from "antd/es/table";
|
||
import dayjs, { type Dayjs } from "dayjs";
|
||
import { AlertTriangle, BarChart3, CircleDollarSign, Clock3, Gauge, Pencil, Plus, RefreshCw, Settings2, Trash2, UsersRound, Workflow } from "lucide-react";
|
||
import { Area, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip as ChartTooltip, XAxis, YAxis } from "recharts";
|
||
import { useSearchParams } from "react-router";
|
||
|
||
import { ListToolbar, PaginationBar } from "@/components/layout/workspace-page";
|
||
import {
|
||
createAdminModelPricing,
|
||
deleteAdminModelPricing,
|
||
exportAdminAnalytics,
|
||
getAdminAnalytics,
|
||
listAdminUsers,
|
||
listAdminModelPricings,
|
||
updateAdminModelPricing,
|
||
type AdminReferenceData,
|
||
type AdminAnalytics,
|
||
type AnalyticsFilters,
|
||
type ModelPricing,
|
||
} from "@/services/api/auth";
|
||
import { AdminDataTable, AdminExportButton, AdminFilterChip, AdminRowActions, AdminStatusBadge, AdminTableEmpty, type AdminStatusTone } from "./admin-ui";
|
||
|
||
type Props = {
|
||
users: AdminReferenceData["users"];
|
||
channels: AdminReferenceData["channels"];
|
||
};
|
||
|
||
type PricingFormValues = {
|
||
channelId?: string;
|
||
model: string;
|
||
capability: ModelPricing["capability"];
|
||
currency: string;
|
||
inputPerMillion?: string;
|
||
outputPerMillion?: string;
|
||
cachedPerMillion?: string;
|
||
perRequest?: string;
|
||
perMedia?: string;
|
||
perVideoSecond?: string;
|
||
};
|
||
|
||
type TrendMetric = "volume" | "quality" | "activity";
|
||
type AnalysisTab = "models" | "users" | "failures";
|
||
type RangePreset = "7d" | "30d" | "60d";
|
||
|
||
const capabilityOptions = [
|
||
{ label: "文本", value: "text" },
|
||
{ label: "图片", value: "image" },
|
||
{ label: "视频", value: "video" },
|
||
{ label: "音频", value: "audio" },
|
||
];
|
||
|
||
export default function AnalyticsPanel({ users, channels }: Props) {
|
||
const { message } = App.useApp();
|
||
const [searchParams, setSearchParams] = useSearchParams();
|
||
const [rangePreset, setRangePreset] = useState<RangePreset | undefined>(() => initialRangePreset(searchParams));
|
||
const [range, setRange] = useState<[Dayjs, Dayjs]>(() => initialAnalyticsRange(searchParams, rangePreset));
|
||
const [userId, setUserId] = useState(searchParams.get("userId") || undefined);
|
||
const [model, setModel] = useState(searchParams.get("model") || undefined);
|
||
const [channelId, setChannelId] = useState(searchParams.get("channelId") || undefined);
|
||
const [capability, setCapability] = useState(searchParams.get("capability") || undefined);
|
||
const [data, setData] = useState<AdminAnalytics | null>(null);
|
||
const [pricings, setPricings] = useState<ModelPricing[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [pricingModalOpen, setPricingModalOpen] = useState(false);
|
||
const [editingPricing, setEditingPricing] = useState<ModelPricing | null>(null);
|
||
const [savingPricing, setSavingPricing] = useState(false);
|
||
const [userOptions, setUserOptions] = useState(users);
|
||
const [searchingUsers, setSearchingUsers] = useState(false);
|
||
const [modelPage, setModelPage] = useState(1);
|
||
const [userPage, setUserPage] = useState(1);
|
||
const [failurePage, setFailurePage] = useState(1);
|
||
const [pricingPage, setPricingPage] = useState(1);
|
||
const [trendMetric, setTrendMetric] = useState<TrendMetric>("volume");
|
||
const [analysisTab, setAnalysisTab] = useState<AnalysisTab>("models");
|
||
const [pricingWorkspaceOpen, setPricingWorkspaceOpen] = useState(false);
|
||
const [pendingPricing, setPendingPricing] = useState<ModelPricing | null | undefined>(undefined);
|
||
const [form] = Form.useForm<PricingFormValues>();
|
||
const pricingChannelId = Form.useWatch("channelId", form);
|
||
const analyticsPageSize = 20;
|
||
|
||
const filters = useMemo<AnalyticsFilters>(
|
||
() => ({
|
||
from: range[0].format("YYYY-MM-DD"),
|
||
to: range[1].format("YYYY-MM-DD"),
|
||
userId,
|
||
model,
|
||
channelId,
|
||
capability,
|
||
}),
|
||
[capability, channelId, model, range, userId],
|
||
);
|
||
|
||
const reload = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const [analytics, pricingData] = await Promise.all([getAdminAnalytics(filters), listAdminModelPricings()]);
|
||
setData(analytics);
|
||
setPricings(pricingData.pricings);
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : "读取统计数据失败");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [filters, message]);
|
||
|
||
useEffect(() => {
|
||
const next = new URLSearchParams(searchParams);
|
||
for (const [key, value] of Object.entries(filters)) {
|
||
if (value) next.set(key, value);
|
||
else next.delete(key);
|
||
}
|
||
if (rangePreset) next.set("rangePreset", rangePreset);
|
||
else next.delete("rangePreset");
|
||
setSearchParams(next, { replace: true });
|
||
void reload();
|
||
}, [filters, rangePreset]);
|
||
|
||
useEffect(() => {
|
||
setModelPage(1);
|
||
setUserPage(1);
|
||
setFailurePage(1);
|
||
setPricingPage(1);
|
||
}, [filters]);
|
||
|
||
useEffect(() => {
|
||
setUserOptions(users);
|
||
}, [users]);
|
||
|
||
const searchUsers = async (keyword: string) => {
|
||
setSearchingUsers(true);
|
||
try {
|
||
const result = await listAdminUsers({ keyword: keyword.trim() || undefined, page: 1, limit: 50 });
|
||
setUserOptions(result.users);
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : "搜索用户失败");
|
||
} finally {
|
||
setSearchingUsers(false);
|
||
}
|
||
};
|
||
|
||
const modelOptions = useMemo(() => {
|
||
const names = new Set<string>();
|
||
channels.forEach((channel) => channel.models?.forEach((name) => names.add(name)));
|
||
data?.models.forEach((item) => item.model !== "未识别" && names.add(item.model));
|
||
return [...names].sort().map((name) => ({ label: name, value: name }));
|
||
}, [channels, data?.models]);
|
||
|
||
const pricingModelOptions = useMemo(() => {
|
||
const names = new Set<string>();
|
||
const sourceChannels = channels.filter((channel) => channel.enabled !== false && (!pricingChannelId || channel.id === pricingChannelId));
|
||
sourceChannels.forEach((channel) => channel.models?.forEach((name) => names.add(name)));
|
||
if (editingPricing?.model && (!pricingChannelId || editingPricing.channelId === pricingChannelId)) {
|
||
names.add(editingPricing.model);
|
||
}
|
||
return [...names].sort().map((name) => ({ label: name, value: name }));
|
||
}, [channels, editingPricing?.channelId, editingPricing?.model, pricingChannelId]);
|
||
|
||
const preparePricingForm = (pricing: ModelPricing | null) => {
|
||
setEditingPricing(pricing);
|
||
form.resetFields();
|
||
form.setFieldsValue(
|
||
pricing
|
||
? {
|
||
channelId: pricing.channelId || undefined,
|
||
model: pricing.model,
|
||
capability: pricing.capability,
|
||
currency: pricing.currency,
|
||
inputPerMillion: formatPriceInput(pricing.inputPerMillionMicros),
|
||
outputPerMillion: formatPriceInput(pricing.outputPerMillionMicros),
|
||
cachedPerMillion: formatPriceInput(pricing.cachedPerMillionMicros),
|
||
perRequest: formatPriceInput(pricing.perRequestMicros),
|
||
perMedia: formatPriceInput(pricing.perMediaMicros),
|
||
perVideoSecond: formatPriceInput(pricing.perVideoSecondMicros),
|
||
}
|
||
: { channelId: undefined, model: "", capability: "text", currency: "USD", inputPerMillion: "", outputPerMillion: "", cachedPerMillion: "", perRequest: "", perMedia: "", perVideoSecond: "" },
|
||
);
|
||
setPricingModalOpen(true);
|
||
};
|
||
|
||
const openPricing = (pricing?: ModelPricing) => {
|
||
const nextPricing = pricing || null;
|
||
if (pricingWorkspaceOpen) {
|
||
setPendingPricing(nextPricing);
|
||
setPricingWorkspaceOpen(false);
|
||
} else {
|
||
preparePricingForm(nextPricing);
|
||
}
|
||
};
|
||
|
||
const handlePricingValuesChange = (changedValues: Partial<PricingFormValues>, values: PricingFormValues) => {
|
||
if (Object.prototype.hasOwnProperty.call(changedValues, "channelId")) {
|
||
const nextModels = channels.filter((channel) => channel.enabled !== false && (!values.channelId || channel.id === values.channelId)).flatMap((channel) => channel.models || []);
|
||
if (values.model && !nextModels.includes(values.model)) form.setFieldValue("model", undefined);
|
||
return;
|
||
}
|
||
|
||
if (!Object.prototype.hasOwnProperty.call(changedValues, "model") || !values.model) return;
|
||
const matchingChannels = channels.filter((channel) => channel.enabled !== false && channel.models?.includes(values.model));
|
||
if (values.channelId && matchingChannels.some((channel) => channel.id === values.channelId)) return;
|
||
if (matchingChannels.length) form.setFieldValue("channelId", matchingChannels[0].id);
|
||
};
|
||
|
||
const handlePricingModelChange = (modelName: string) => {
|
||
const currentChannelId = form.getFieldValue("channelId") as string | undefined;
|
||
const matchingChannels = channels.filter((channel) => channel.enabled !== false && channel.models?.includes(modelName));
|
||
const matchingChannel = matchingChannels.find((channel) => channel.id === currentChannelId) || matchingChannels[0];
|
||
form.setFieldsValue({ model: modelName, channelId: matchingChannel?.id || currentChannelId });
|
||
};
|
||
|
||
const savePricing = async () => {
|
||
const values = await form.validateFields();
|
||
const payload = {
|
||
channelId: values.channelId || "",
|
||
model: values.model.trim(),
|
||
capability: values.capability,
|
||
currency: values.currency.trim().toUpperCase(),
|
||
inputPerMillionMicros: toMicros(values.inputPerMillion),
|
||
outputPerMillionMicros: toMicros(values.outputPerMillion),
|
||
cachedPerMillionMicros: toMicros(values.cachedPerMillion),
|
||
perRequestMicros: toMicros(values.perRequest),
|
||
perMediaMicros: toMicros(values.perMedia),
|
||
perVideoSecondMicros: toMicros(values.perVideoSecond),
|
||
};
|
||
setSavingPricing(true);
|
||
try {
|
||
const result = editingPricing ? await updateAdminModelPricing(editingPricing.id, payload) : await createAdminModelPricing(payload);
|
||
setPricings((items) => (editingPricing ? items.map((item) => (item.id === result.pricing.id ? result.pricing : item)) : [...items, result.pricing]));
|
||
setPricingModalOpen(false);
|
||
message.success("模型价格已保存，后续调用将按新价格记录费用快照");
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : "保存价格失败");
|
||
} finally {
|
||
setSavingPricing(false);
|
||
}
|
||
};
|
||
|
||
const removePricing = async (id: string) => {
|
||
try {
|
||
await deleteAdminModelPricing(id);
|
||
setPricings((items) => items.filter((item) => item.id !== id));
|
||
message.success("价格配置已删除");
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : "删除价格失败");
|
||
}
|
||
};
|
||
|
||
const modelColumns: ColumnsType<AdminAnalytics["models"][number]> = [
|
||
{
|
||
title: "模型",
|
||
dataIndex: "model",
|
||
fixed: "left",
|
||
width: 210,
|
||
render: (value, row) => (
|
||
<div>
|
||
<div className="font-medium">{value}</div>
|
||
<div className="mt-1">
|
||
<Tag className="admin-analytics-capability-tag">{capabilityLabel(row.capability)}</Tag>
|
||
</div>
|
||
</div>
|
||
),
|
||
},
|
||
{ title: "任务 / 请求", width: 120, render: (_, row) => `${row.tasks} / ${row.requests}` },
|
||
{ title: "用户", dataIndex: "uniqueUsers", width: 80 },
|
||
{ title: "任务成功率", dataIndex: "taskSuccessRate", width: 110, render: percent },
|
||
{ title: "请求成功率", dataIndex: "requestSuccessRate", width: 110, render: percent },
|
||
{ title: "P50 / P95", width: 145, render: (_, row) => `${formatDuration(row.p50DurationMs)} / ${formatDuration(row.p95DurationMs)}` },
|
||
{ title: "Token（入 / 出 / 缓存）", width: 190, render: (_, row) => (row.usageAvailable ? `${formatNumber(row.inputTokens)} / ${formatNumber(row.outputTokens)} / ${formatNumber(row.cachedTokens)}` : "--") },
|
||
{ title: "媒体 / 视频秒", width: 125, render: (_, row) => `${row.mediaCount} / ${row.videoSeconds}` },
|
||
{ title: "估算费用", width: 120, render: (_, row) => formatCost(row.estimatedCostMicros, row.currency, row.costAvailable) },
|
||
];
|
||
|
||
const userColumns: ColumnsType<AdminAnalytics["users"][number]> = [
|
||
{
|
||
title: "用户",
|
||
dataIndex: "name",
|
||
width: 180,
|
||
render: (name, row) => (
|
||
<div>
|
||
<div className="font-medium">{name}</div>
|
||
<div className="text-xs text-foreground/45">{row.userId}</div>
|
||
</div>
|
||
),
|
||
},
|
||
{ title: "活跃天数", dataIndex: "activeDays", width: 95 },
|
||
{ title: "任务", dataIndex: "tasks", width: 80 },
|
||
{ title: "Agent 消息", dataIndex: "agentMessages", width: 105 },
|
||
{ title: "画布活跃天数", dataIndex: "canvasDays", width: 120 },
|
||
{ title: "素材 / 资源", width: 110, render: (_, row) => `${row.assets} / ${row.resources}` },
|
||
{ title: "常用模型", dataIndex: "commonModel", ellipsis: true, render: (value) => value || "--" },
|
||
];
|
||
|
||
const failureColumns: ColumnsType<AdminAnalytics["failures"][number]> = [
|
||
{ title: "错误类型", dataIndex: "type", width: 120, render: (value) => <AdminStatusBadge label={value} tone={value === "超时" ? "warning" : "error"} /> },
|
||
{ title: "模型", dataIndex: "model", width: 220 },
|
||
{ title: "次数", dataIndex: "count", width: 90 },
|
||
{ title: "最近错误", dataIndex: "lastError", ellipsis: true, render: (value) => <Tooltip title={value}>{value || "--"}</Tooltip> },
|
||
{ title: "最近发生", dataIndex: "lastSeenAt", width: 170, render: (value) => dayjs(value).format("YYYY-MM-DD HH:mm") },
|
||
];
|
||
|
||
const pricingColumns: ColumnsType<ModelPricing> = [
|
||
{
|
||
title: "模型",
|
||
dataIndex: "model",
|
||
width: 210,
|
||
render: (value, row) => (
|
||
<div>
|
||
<div className="font-medium">{value}</div>
|
||
<div className="text-xs text-foreground/45">{row.channelId ? channels.find((channel) => channel.id === row.channelId)?.name || row.channelId : "全部渠道"}</div>
|
||
</div>
|
||
),
|
||
},
|
||
{ title: "能力", dataIndex: "capability", width: 90, render: capabilityLabel },
|
||
{
|
||
title: "输入 / 输出 / 缓存（每百万 Token）",
|
||
width: 250,
|
||
render: (_, row) => `${formatMoney(fromMicros(row.inputPerMillionMicros), row.currency)} / ${formatMoney(fromMicros(row.outputPerMillionMicros), row.currency)} / ${formatMoney(fromMicros(row.cachedPerMillionMicros), row.currency)}`,
|
||
},
|
||
{
|
||
title: "每请求 / 每媒体 / 每视频秒",
|
||
width: 220,
|
||
render: (_, row) => `${formatMoney(fromMicros(row.perRequestMicros), row.currency)} / ${formatMoney(fromMicros(row.perMediaMicros), row.currency)} / ${formatMoney(fromMicros(row.perVideoSecondMicros), row.currency)}`,
|
||
},
|
||
{
|
||
title: "操作",
|
||
width: 170,
|
||
render: (_, row) => (
|
||
<AdminRowActions
|
||
primary={{ label: "编辑", icon: <Pencil className="size-3.5" />, onClick: () => openPricing(row) }}
|
||
actions={[
|
||
{
|
||
key: "delete",
|
||
label: "删除",
|
||
icon: <Trash2 className="size-3.5" />,
|
||
danger: true,
|
||
confirm: { title: "删除价格配置？", description: "删除后新的调用不再使用这条价格配置，历史费用不受影响。", okText: "确认删除" },
|
||
onClick: () => removePricing(row.id),
|
||
},
|
||
]}
|
||
/>
|
||
),
|
||
},
|
||
];
|
||
|
||
const trend = data?.trend || [];
|
||
const currentTrend = trend[trend.length - 1];
|
||
const previousTrend = trend[trend.length - 2];
|
||
const modelRows = data?.models || [];
|
||
const userRows = data?.users || [];
|
||
const failureRows = data?.failures || [];
|
||
const pricingRows = pricings;
|
||
const failureTotal = failureRows.reduce((sum, item) => sum + item.count, 0);
|
||
const topFailure = failureRows.reduce<AdminAnalytics["failures"][number] | undefined>((current, item) => (!current || item.count > current.count ? item : current), undefined);
|
||
const pricedModelCount = modelRows.filter((item) => item.costAvailable).length;
|
||
const trendHasData = trendMetric === "volume" ? trend.some((item) => item.tasks > 0 || item.requests > 0) : trendMetric === "quality" ? trend.some((item) => item.requests > 0) : trend.some((item) => item.activeUsers > 0);
|
||
const trendTitle = trendMetric === "volume" ? "任务与请求趋势" : trendMetric === "quality" ? "请求质量趋势" : "用户活跃趋势";
|
||
const pageRows = <T,>(rows: T[], page: number) => rows.slice((page - 1) * analyticsPageSize, page * analyticsPageSize);
|
||
|
||
const applyRangePreset = (preset: RangePreset) => {
|
||
const end = dayjs();
|
||
const start = preset === "7d" ? end.subtract(6, "day") : preset === "30d" ? end.subtract(29, "day") : end.subtract(59, "day");
|
||
setRangePreset(preset);
|
||
setRange([start, end]);
|
||
};
|
||
|
||
const openAnalysis = (tab: AnalysisTab) => {
|
||
setAnalysisTab(tab);
|
||
window.requestAnimationFrame(() => document.getElementById("admin-analytics-analysis")?.scrollIntoView({ behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth", block: "start" }));
|
||
};
|
||
|
||
return (
|
||
<div className="admin-analytics-panel space-y-5">
|
||
<ListToolbar
|
||
className="admin-analytics-toolbar"
|
||
active={Boolean(userId || model || channelId || capability)}
|
||
activeFilters={
|
||
<>
|
||
{userId ? <AdminFilterChip label={`用户：${userOptions.find((user) => user.id === userId)?.displayName || userId}`} onRemove={() => setUserId(undefined)} /> : null}
|
||
{model ? <AdminFilterChip label={`模型：${model}`} onRemove={() => setModel(undefined)} /> : null}
|
||
{channelId ? <AdminFilterChip label={`渠道：${channels.find((channel) => channel.id === channelId)?.name || channelId}`} onRemove={() => setChannelId(undefined)} /> : null}
|
||
{capability ? <AdminFilterChip label={`能力：${capabilityLabel(capability)}`} onRemove={() => setCapability(undefined)} /> : null}
|
||
</>
|
||
}
|
||
onReset={() => {
|
||
setUserId(undefined);
|
||
setModel(undefined);
|
||
setChannelId(undefined);
|
||
setCapability(undefined);
|
||
}}
|
||
trailing={
|
||
<>
|
||
<div className="admin-analytics-range-picker" role="group" aria-label="时间范围">
|
||
<span className="sr-only">时间范围</span>
|
||
<DatePicker.RangePicker
|
||
allowClear={false}
|
||
value={range}
|
||
onChange={(value) => {
|
||
if (value?.[0] && value?.[1]) {
|
||
setRangePreset(undefined);
|
||
setRange([value[0], value[1]]);
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
<Button icon={<RefreshCw className="size-4" />} loading={loading} onClick={() => void reload()}>
|
||
刷新
|
||
</Button>
|
||
<AdminExportButton exportFile={() => exportAdminAnalytics(filters)} fileName={() => `usage-${filters.from}-${filters.to}.csv`} label="导出 CSV" />
|
||
</>
|
||
}
|
||
filters={
|
||
<>
|
||
<FilterSelect
|
||
label="用户"
|
||
value={userId}
|
||
onChange={setUserId}
|
||
options={userOptions.map((user) => ({ label: user.displayName || user.username, value: user.id }))}
|
||
filterOption={false}
|
||
loading={searchingUsers}
|
||
onSearch={(value) => void searchUsers(value)}
|
||
/>
|
||
<FilterSelect label="模型" value={model} onChange={setModel} options={modelOptions} width={210} />
|
||
<FilterSelect label="渠道" value={channelId} onChange={setChannelId} options={channels.map((channel) => ({ label: channel.name, value: channel.id }))} />
|
||
<FilterSelect label="能力" value={capability} onChange={setCapability} options={capabilityOptions} />
|
||
</>
|
||
}
|
||
>
|
||
<div className="admin-analytics-range-presets" role="group" aria-label="快捷时间范围">
|
||
{(
|
||
[
|
||
["7d", "7 天"],
|
||
["30d", "30 天"],
|
||
["60d", "60 天"],
|
||
] as const
|
||
).map(([value, label]) => (
|
||
<button key={value} type="button" className={rangePreset === value ? "is-active" : undefined} aria-pressed={rangePreset === value} onClick={() => applyRangePreset(value)}>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</ListToolbar>
|
||
|
||
<section className="admin-analytics-health-grid" aria-label="运营健康指标">
|
||
<AnalyticsHealthCard
|
||
icon={<UsersRound className="size-4" />}
|
||
label="活跃用户"
|
||
value={data ? formatNumber(data.kpi.activeUsers) : "--"}
|
||
trend={formatCountDelta(currentTrend?.activeUsers, previousTrend?.activeUsers)}
|
||
detail={data ? `DAU ${formatNumber(data.kpi.dau)} · WAU ${formatNumber(data.kpi.wau)} · MAU ${formatNumber(data.kpi.mau)}` : undefined}
|
||
/>
|
||
<AnalyticsHealthCard
|
||
icon={<Workflow className="size-4" />}
|
||
label="生成任务"
|
||
value={data ? formatNumber(data.kpi.generationTasks) : "--"}
|
||
trend={formatCountDelta(currentTrend?.tasks, previousTrend?.tasks)}
|
||
detail={data ? `上游请求 ${formatNumber(data.kpi.upstreamRequests)} · 队列 ${formatNumber(data.kpi.currentQueuedTasks)}` : undefined}
|
||
/>
|
||
<AnalyticsHealthCard
|
||
icon={<Gauge className="size-4" />}
|
||
label="服务质量"
|
||
value={data ? percent(data.kpi.successRate) : "--"}
|
||
trend={formatRateDelta(currentTrend?.requestSuccessRate, previousTrend?.requestSuccessRate)}
|
||
detail={data ? `P95 ${formatDuration(data.kpi.p95DurationMs)}` : undefined}
|
||
tone={data && data.kpi.successRate < 90 ? "warning" : "success"}
|
||
/>
|
||
<AnalyticsHealthCard
|
||
icon={<CircleDollarSign className="size-4" />}
|
||
label="估算费用"
|
||
value={data ? (data.kpi.costAvailable ? formatCost(data.kpi.estimatedCostMicros, data.kpi.currency, true) : "待配置") : "--"}
|
||
detail={data ? (data.kpi.costAvailable ? `${pricedModelCount}/${modelRows.length} 个模型可估算` : "价格未完整配置，暂不能汇总") : undefined}
|
||
tone={data?.kpi.costAvailable ? "neutral" : "warning"}
|
||
/>
|
||
</section>
|
||
|
||
<div className="admin-analytics-overview-grid">
|
||
<section className="admin-analytics-trend-section" aria-labelledby="admin-analytics-trend-title">
|
||
<div className="admin-analytics-section-heading">
|
||
<div>
|
||
<h2 id="admin-analytics-trend-title">{trendTitle}</h2>
|
||
<p>{trendMetric === "volume" ? "生成任务与真实上游请求分开统计。" : trendMetric === "quality" ? "成功率按真实上游请求计算。" : "活跃用户按自然日去重统计。"}</p>
|
||
</div>
|
||
<div className="admin-analytics-trend-switch" role="group" aria-label="趋势指标">
|
||
{(
|
||
[
|
||
["volume", "用量"],
|
||
["quality", "质量"],
|
||
["activity", "活跃"],
|
||
] as const
|
||
).map(([value, label]) => (
|
||
<button key={value} type="button" className={trendMetric === value ? "is-active" : undefined} aria-pressed={trendMetric === value} onClick={() => setTrendMetric(value)}>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
{trendHasData ? (
|
||
<div className="admin-analytics-chart" role="img" aria-label={`${trendTitle}图`}>
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<ComposedChart data={data?.trend || []} margin={{ top: 8, right: 12, bottom: 0, left: -16 }}>
|
||
<CartesianGrid stroke="currentColor" className="text-foreground/10" vertical={false} />
|
||
<XAxis dataKey="day" tickFormatter={(value) => value.slice(5)} tick={{ fontSize: 11 }} />
|
||
{trendMetric === "quality" ? <YAxis yAxisId="primary" domain={[0, 100]} tickFormatter={(value) => `${value}%`} tick={{ fontSize: 11 }} /> : <YAxis yAxisId="primary" allowDecimals={false} tick={{ fontSize: 11 }} />}
|
||
<ChartTooltip labelFormatter={(value) => `日期 ${value}`} />
|
||
{trendMetric === "volume" ? <Legend wrapperStyle={{ fontSize: 12 }} /> : null}
|
||
{trendMetric === "volume" ? (
|
||
<>
|
||
<Area yAxisId="primary" type="monotone" dataKey="tasks" name="生成任务" stroke="var(--admin-chart-primary)" fill="var(--admin-chart-primary)" fillOpacity={0.1} />
|
||
<Area yAxisId="primary" type="monotone" dataKey="requests" name="上游请求" stroke="var(--admin-chart-secondary)" fill="var(--admin-chart-secondary)" fillOpacity={0.08} />
|
||
</>
|
||
) : null}
|
||
{trendMetric === "quality" ? <Line yAxisId="primary" type="monotone" dataKey="requestSuccessRate" name="成功率" stroke="var(--admin-chart-warning)" dot={false} strokeWidth={2} /> : null}
|
||
{trendMetric === "activity" ? <Area yAxisId="primary" type="monotone" dataKey="activeUsers" name="活跃用户" stroke="var(--admin-chart-primary)" fill="var(--admin-chart-primary)" fillOpacity={0.1} /> : null}
|
||
</ComposedChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
) : (
|
||
<div className="admin-analytics-empty-chart">
|
||
<span>
|
||
<BarChart3 className="size-5" />
|
||
</span>
|
||
<div className="font-medium">当前范围暂无{trendMetric === "quality" ? "质量" : trendMetric === "activity" ? "活跃" : "使用"}数据</div>
|
||
<p>可以调整时间范围或筛选条件后重新查看。</p>
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
<aside className="admin-analytics-attention" aria-labelledby="admin-analytics-attention-title">
|
||
<div className="admin-analytics-attention-heading">
|
||
<div>
|
||
<h2 id="admin-analytics-attention-title">需要关注</h2>
|
||
<p>优先展示可能需要处理的运行状态。</p>
|
||
</div>
|
||
<AdminStatusBadge label={failureTotal > 0 ? `${formatNumber(failureTotal)} 次异常` : "运行平稳"} tone={failureTotal > 0 ? "warning" : "success"} />
|
||
</div>
|
||
<div className="admin-analytics-attention-list">
|
||
<AnalyticsAttentionItem
|
||
icon={<AlertTriangle className="size-4" />}
|
||
label="异常请求"
|
||
value={data ? formatNumber(failureTotal) : "--"}
|
||
description={topFailure ? `${topFailure.type} · ${topFailure.model}` : "当前范围未记录异常"}
|
||
tone={failureTotal > 0 ? "warning" : "success"}
|
||
onClick={failureTotal > 0 ? () => openAnalysis("failures") : undefined}
|
||
/>
|
||
<AnalyticsAttentionItem
|
||
icon={<Clock3 className="size-4" />}
|
||
label="当前队列"
|
||
value={data ? formatNumber(data.kpi.currentQueuedTasks) : "--"}
|
||
description={data?.kpi.currentQueuedTasks ? "存在等待执行的生成任务" : "没有排队中的生成任务"}
|
||
tone={data?.kpi.currentQueuedTasks ? "warning" : "success"}
|
||
/>
|
||
<AnalyticsAttentionItem
|
||
icon={<CircleDollarSign className="size-4" />}
|
||
label="费用可估算模型"
|
||
value={data ? `${pricedModelCount}/${modelRows.length}` : "--"}
|
||
description={data?.kpi.costAvailable ? "当前范围费用可以汇总" : "仍有调用无法完成费用估算"}
|
||
tone={data?.kpi.costAvailable ? "success" : "warning"}
|
||
onClick={() => setPricingWorkspaceOpen(true)}
|
||
/>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<section id="admin-analytics-analysis" className="admin-analytics-analysis-section">
|
||
<div className="admin-analytics-analysis-heading">
|
||
<div>
|
||
<h2>深度分析</h2>
|
||
<p>按模型、用户或异常类型继续核对当前统计范围。</p>
|
||
</div>
|
||
<Button icon={<Settings2 className="size-4" />} onClick={() => setPricingWorkspaceOpen(true)}>
|
||
模型价格配置
|
||
</Button>
|
||
</div>
|
||
<Tabs
|
||
activeKey={analysisTab}
|
||
onChange={(key) => setAnalysisTab(key as AnalysisTab)}
|
||
className="admin-analytics-tabs"
|
||
items={[
|
||
{
|
||
key: "models",
|
||
label: "模型分析",
|
||
children: (
|
||
<AdminDataTable
|
||
table={{ rowKey: (row) => `${row.model}:${row.capability}`, size: "small", loading, columns: modelColumns, dataSource: pageRows(modelRows, modelPage), pagination: false, scroll: { x: 1250 } }}
|
||
empty={<AdminTableEmpty />}
|
||
skeletonColumns={9}
|
||
footer={<PaginationBar alwaysShow current={modelPage} pageSize={analyticsPageSize} total={modelRows.length} onChange={(page) => setModelPage(page)} pageSizeOptions={[analyticsPageSize]} />}
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
key: "users",
|
||
label: "用户活动",
|
||
children: (
|
||
<AdminDataTable
|
||
table={{ rowKey: "userId", size: "small", loading, columns: userColumns, dataSource: pageRows(userRows, userPage), pagination: false, scroll: { x: 900 } }}
|
||
empty={<AdminTableEmpty />}
|
||
skeletonColumns={7}
|
||
footer={<PaginationBar alwaysShow current={userPage} pageSize={analyticsPageSize} total={userRows.length} onChange={(page) => setUserPage(page)} pageSizeOptions={[analyticsPageSize]} />}
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
key: "failures",
|
||
label: `异常定位${data?.failures.length ? ` (${data.failures.reduce((sum, item) => sum + item.count, 0)})` : ""}`,
|
||
children: (
|
||
<AdminDataTable
|
||
table={{ rowKey: (row) => `${row.type}:${row.model}`, size: "small", loading, columns: failureColumns, dataSource: pageRows(failureRows, failurePage), pagination: false, scroll: { x: 900 } }}
|
||
empty={<AdminTableEmpty />}
|
||
skeletonColumns={5}
|
||
footer={<PaginationBar alwaysShow current={failurePage} pageSize={analyticsPageSize} total={failureRows.length} onChange={(page) => setFailurePage(page)} pageSizeOptions={[analyticsPageSize]} />}
|
||
/>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
</section>
|
||
|
||
<Drawer
|
||
rootClassName="admin-secondary-drawer admin-analytics-pricing-drawer"
|
||
title="模型价格配置"
|
||
open={pricingWorkspaceOpen}
|
||
width="min(1120px, calc(100vw - 48px))"
|
||
onClose={() => setPricingWorkspaceOpen(false)}
|
||
afterOpenChange={(open) => {
|
||
if (open || pendingPricing === undefined) return;
|
||
const nextPricing = pendingPricing;
|
||
setPendingPricing(undefined);
|
||
preparePricingForm(nextPricing);
|
||
}}
|
||
extra={
|
||
<Button type="primary" icon={<Plus className="size-4" />} onClick={() => openPricing()}>
|
||
新增价格
|
||
</Button>
|
||
}
|
||
>
|
||
<p className="admin-analytics-pricing-description">价格只影响后续调用的费用快照，历史统计不会被重新计算。</p>
|
||
<AdminDataTable
|
||
table={{ rowKey: "id", size: "small", loading, columns: pricingColumns, dataSource: pageRows(pricingRows, pricingPage), pagination: false, scroll: { x: 980 } }}
|
||
empty={<AdminTableEmpty title="暂无模型价格" description="新增价格后，后续调用才能形成可汇总的费用快照。" />}
|
||
skeletonColumns={5}
|
||
footer={<PaginationBar alwaysShow current={pricingPage} pageSize={analyticsPageSize} total={pricingRows.length} onChange={(page) => setPricingPage(page)} pageSizeOptions={[analyticsPageSize]} />}
|
||
/>
|
||
</Drawer>
|
||
|
||
<Modal
|
||
rootClassName="admin-modal-root admin-analytics-pricing-modal"
|
||
title={editingPricing ? "编辑模型价格" : "新增模型价格"}
|
||
open={pricingModalOpen}
|
||
onCancel={() => setPricingModalOpen(false)}
|
||
onOk={() => void savePricing()}
|
||
confirmLoading={savingPricing}
|
||
okText="保存"
|
||
cancelText="取消"
|
||
width={760}
|
||
zIndex={1200}
|
||
destroyOnHidden
|
||
>
|
||
<Form form={form} layout="vertical" requiredMark={false} onValuesChange={handlePricingValuesChange}>
|
||
<div className="grid grid-cols-1 gap-x-4 sm:grid-cols-2">
|
||
<Form.Item name="model" label="模型" rules={[{ required: true, message: "请选择模型" }]}>
|
||
<Select
|
||
showSearch
|
||
optionFilterProp="label"
|
||
placeholder={pricingModelOptions.length ? "选择已启用模型" : "暂无已启用模型"}
|
||
options={pricingModelOptions}
|
||
disabled={!pricingModelOptions.length}
|
||
onChange={handlePricingModelChange}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item name="channelId" label="渠道范围">
|
||
<Select allowClear placeholder="全部渠道" options={channels.filter((channel) => channel.enabled !== false).map((channel) => ({ label: channel.name, value: channel.id }))} />
|
||
</Form.Item>
|
||
<Form.Item name="capability" label="能力类型" rules={[{ required: true }]}>
|
||
<Select options={capabilityOptions} />
|
||
</Form.Item>
|
||
<Form.Item name="currency" label="币种" rules={[{ required: true }]}>
|
||
<Input maxLength={12} />
|
||
</Form.Item>
|
||
<PriceInput name="inputPerMillion" label="每百万输入 Token" />
|
||
<PriceInput name="outputPerMillion" label="每百万输出 Token" />
|
||
<PriceInput name="cachedPerMillion" label="每百万缓存 Token" />
|
||
<PriceInput name="perRequest" label="每次请求" />
|
||
<PriceInput name="perMedia" label="每个输出媒体" />
|
||
<PriceInput name="perVideoSecond" label="每视频秒" />
|
||
</div>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AnalyticsHealthCard({ icon, label, value, trend, detail, tone = "neutral" }: { icon: ReactNode; label: string; value: ReactNode; trend?: { value: string; tone?: AdminStatusTone }; detail?: string; tone?: AdminStatusTone }) {
|
||
return (
|
||
<article className="admin-analytics-health-card" data-tone={tone}>
|
||
<div className="admin-analytics-health-card-heading">
|
||
<span aria-hidden="true">{icon}</span>
|
||
<span>{label}</span>
|
||
</div>
|
||
<div className="admin-analytics-health-card-value">{value}</div>
|
||
<div className="admin-analytics-health-card-meta">
|
||
{trend ? <AdminStatusBadge label={trend.value} tone={trend.tone || "neutral"} /> : null}
|
||
{detail ? <span>{detail}</span> : null}
|
||
</div>
|
||
</article>
|
||
);
|
||
}
|
||
|
||
function AnalyticsAttentionItem({ icon, label, value, description, tone = "neutral", onClick }: { icon: ReactNode; label: string; value: ReactNode; description: string; tone?: AdminStatusTone; onClick?: () => void }) {
|
||
const content = (
|
||
<>
|
||
<span className="admin-analytics-attention-icon" aria-hidden="true">
|
||
{icon}
|
||
</span>
|
||
<span className="admin-analytics-attention-copy">
|
||
<span className="admin-analytics-attention-label">{label}</span>
|
||
<span className="admin-analytics-attention-description">{description}</span>
|
||
</span>
|
||
<strong>{value}</strong>
|
||
</>
|
||
);
|
||
|
||
return onClick ? (
|
||
<button type="button" className="admin-analytics-attention-item is-action" data-tone={tone} onClick={onClick}>
|
||
{content}
|
||
</button>
|
||
) : (
|
||
<div className="admin-analytics-attention-item" data-tone={tone}>
|
||
{content}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FilterSelect({
|
||
label,
|
||
value,
|
||
onChange,
|
||
options,
|
||
width = 150,
|
||
filterOption = true,
|
||
loading,
|
||
onSearch,
|
||
}: {
|
||
label: string;
|
||
value?: string;
|
||
onChange: (value?: string) => void;
|
||
options: Array<{ label: string; value: string }>;
|
||
width?: number;
|
||
filterOption?: boolean;
|
||
loading?: boolean;
|
||
onSearch?: (value: string) => void;
|
||
}) {
|
||
return (
|
||
<div>
|
||
<div className="mb-1 text-xs text-foreground/55">{label}</div>
|
||
<Select aria-label={`${label}筛选`} allowClear showSearch optionFilterProp="label" filterOption={filterOption} loading={loading} placeholder="全部" value={value} onChange={onChange} onSearch={onSearch} options={options} style={{ width }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function PriceInput({ name, label }: { name: keyof PricingFormValues; label: string }) {
|
||
return (
|
||
<Form.Item className="admin-analytics-price-field" name={name} label={`${label}（币种单位）`} rules={[{ validator: validatePriceInput }]}>
|
||
<Input aria-label={`${label}价格`} disabled={false} readOnly={false} inputMode="decimal" maxLength={30} className="admin-analytics-price-input" style={{ width: "100%" }} />
|
||
</Form.Item>
|
||
);
|
||
}
|
||
|
||
function validatePriceInput(_: unknown, value?: string) {
|
||
const normalized = value?.trim() || "";
|
||
if (!normalized || /^(?:\d+(?:\.\d{0,6})?|\.\d{1,6})$/.test(normalized)) return Promise.resolve();
|
||
return Promise.reject(new Error("请输入非负价格，最多 6 位小数"));
|
||
}
|
||
|
||
function capabilityLabel(value: string) {
|
||
return capabilityOptions.find((item) => item.value === value)?.label || "未分类";
|
||
}
|
||
|
||
function percent(value: number) {
|
||
return `${Number(value || 0).toFixed(1)}%`;
|
||
}
|
||
|
||
function formatDuration(value: number) {
|
||
if (!value) return "--";
|
||
return value >= 1000 ? `${(value / 1000).toFixed(1)}s` : `${value}ms`;
|
||
}
|
||
|
||
function formatNumber(value: number) {
|
||
return new Intl.NumberFormat("zh-CN", { notation: value >= 100000 ? "compact" : "standard", maximumFractionDigits: 1 }).format(value);
|
||
}
|
||
|
||
function formatCountDelta(current?: number, previous?: number) {
|
||
if (current === undefined || previous === undefined) return undefined;
|
||
const delta = current - previous;
|
||
const direction = delta > 0 ? "↑" : delta < 0 ? "↓" : "→";
|
||
const value = previous === 0 ? formatNumber(Math.abs(delta)) : `${Math.abs((delta / previous) * 100).toFixed(1)}%`;
|
||
return { value: `较前一日 ${direction} ${value}`, tone: delta >= 0 ? ("success" as const) : ("warning" as const) };
|
||
}
|
||
|
||
function formatRateDelta(current?: number, previous?: number) {
|
||
if (current === undefined || previous === undefined) return undefined;
|
||
const delta = current - previous;
|
||
const direction = delta > 0 ? "↑" : delta < 0 ? "↓" : "→";
|
||
return { value: `较前一日 ${direction} ${Math.abs(delta).toFixed(1)}pp`, tone: delta >= 0 ? ("success" as const) : ("warning" as const) };
|
||
}
|
||
|
||
function formatCost(micros: number, currency?: string, available?: boolean) {
|
||
return available ? formatMoney(fromMicros(micros), currency || "USD") : "--";
|
||
}
|
||
|
||
function formatMoney(value: number, currency = "USD") {
|
||
if (currency === "MIXED") return `${value.toFixed(6)}（混合币种）`;
|
||
try {
|
||
return new Intl.NumberFormat("zh-CN", { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: 6 }).format(value);
|
||
} catch {
|
||
return `${currency} ${value.toFixed(6)}`;
|
||
}
|
||
}
|
||
|
||
function fromMicros(value: number) {
|
||
return value / 1_000_000;
|
||
}
|
||
|
||
function formatPriceInput(micros: number) {
|
||
return fromMicros(micros).toFixed(6);
|
||
}
|
||
|
||
function toMicros(value?: string | number) {
|
||
const parsed = typeof value === "number" ? value : Number(value?.trim() || 0);
|
||
return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed * 1_000_000) : 0;
|
||
}
|
||
|
||
function filterDate(value: string | null, fallback: Dayjs) {
|
||
if (!value) return fallback;
|
||
const parsed = dayjs(value);
|
||
return parsed.isValid() ? parsed : fallback;
|
||
}
|
||
|
||
function resolveRangePreset(range: [Dayjs, Dayjs]): RangePreset | undefined {
|
||
const end = dayjs();
|
||
if (!range[1].isSame(end, "day")) return undefined;
|
||
if (range[0].isSame(end.subtract(6, "day"), "day")) return "7d";
|
||
if (range[0].isSame(end.subtract(29, "day"), "day")) return "30d";
|
||
if (range[0].isSame(end.subtract(59, "day"), "day")) return "60d";
|
||
return undefined;
|
||
}
|
||
|
||
function parseRangePreset(value: string | null): RangePreset | undefined {
|
||
return value === "7d" || value === "30d" || value === "60d" ? value : undefined;
|
||
}
|
||
|
||
function initialRangePreset(searchParams: URLSearchParams): RangePreset | undefined {
|
||
const explicit = parseRangePreset(searchParams.get("rangePreset"));
|
||
if (explicit) return explicit;
|
||
if (searchParams.has("from") || searchParams.has("to")) return resolveRangePresetFromQuery(searchParams.get("from"), searchParams.get("to"));
|
||
return "30d";
|
||
}
|
||
|
||
function initialAnalyticsRange(searchParams: URLSearchParams, preset: RangePreset | undefined): [Dayjs, Dayjs] {
|
||
const end = dayjs();
|
||
if (preset) {
|
||
const days = preset === "7d" ? 6 : preset === "30d" ? 29 : 59;
|
||
return [end.subtract(days, "day"), end];
|
||
}
|
||
return [filterDate(searchParams.get("from"), end.subtract(29, "day")), filterDate(searchParams.get("to"), end)];
|
||
}
|
||
|
||
function resolveRangePresetFromQuery(from: string | null, to: string | null): RangePreset | undefined {
|
||
const start = from ? dayjs(from) : null;
|
||
const end = to ? dayjs(to) : null;
|
||
if (!start?.isValid() || !end?.isValid()) return undefined;
|
||
return resolveRangePreset([start, end]);
|
||
}
|