tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 统计面板指标接入 count-up 动画并完善画布 Agent 聊天 UI (吸收 BoardUI, 尊重 reduced-motion)

Browse Source
This commit is contained in:
maomaochong-ai
2026-09-06 20:28:53 +08:00
parent 936f2d7551
commit dafc009e2d
3 changed files with 233 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/pages/admin/components/analytics-panel.tsx
View File

@@ -1,5 +1,6 @@
import { App, Button, DatePicker, Drawer, Form, Input, Modal, Select, Tabs, Tag } from "antd";
import { Tooltip } from "@/components/ui/base/tooltip";
import { useCountUp } from "@/hooks/use-count-up";
import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
import type { ColumnsType } from "antd/es/table";
@@ -447,21 +448,21 @@ export default function AnalyticsPanel({ users, channels }: Props) {
<AnalyticsHealthCard
icon={<UsersRound className="size-4" />}
label="活跃用户"
value={data ? formatNumber(data.kpi.activeUsers) : "--"}
value={data ? <AnimatedHealthValue target={data.kpi.activeUsers} format={formatNumber} /> : "--"}
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) : "--"}
value={data ? <AnimatedHealthValue target={data.kpi.generationTasks} format={formatNumber} /> : "--"}
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) : "--"}
value={data ? <AnimatedHealthValue target={data.kpi.successRate} format={percent} /> : "--"}
trend={formatRateDelta(currentTrend?.requestSuccessRate, previousTrend?.requestSuccessRate)}
detail={data ? `P95 ${formatDuration(data.kpi.p95DurationMs)}` : undefined}
tone={data && data.kpi.successRate < 90 ? "warning" : "success"}
@@ -692,6 +693,11 @@ export default function AnalyticsPanel({ users, channels }: Props) {
);
}
function AnimatedHealthValue({ target, format }: { target: number; format: (value: number) => string }) {
const display = useCountUp(target, 420, 0);
return <>{format(display)}</>;
}
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}>