49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
import { BarChartOutlined } from '@ant-design/icons';
|
||
import { Empty, Spin } from 'antd';
|
||
import type { StatsPageLogic } from '../StatsPageLogic';
|
||
import StatsMetricCards from './StatsMetricCards';
|
||
import StatsPointsCard from './StatsPointsCard';
|
||
import StatsTokenSection from './StatsTokenSection';
|
||
import StatsTopAgentsCard from './StatsTopAgentsCard';
|
||
import StatsTrendCard from './StatsTrendCard';
|
||
|
||
export default function StatsPageWeb({ logic }: { logic: StatsPageLogic }) {
|
||
if (logic.loading) return <Spin className="stats-state-spin" />;
|
||
if (!logic.data) return <Empty description="暂无数据" className="stats-state-empty" />;
|
||
|
||
return (
|
||
<div className="page-container stats-page-web">
|
||
<div className="stats-page-hero">
|
||
<div className="stats-page-header">
|
||
<div className="stats-page-title-section">
|
||
<div className="stats-page-badge">
|
||
<BarChartOutlined className="stats-page-badge-icon" />
|
||
数据洞察看板
|
||
</div>
|
||
<h1 className="page-title stats-page-title">调用统计</h1>
|
||
<p className="page-subtitle stats-page-subtitle">
|
||
不只是查看调用数量，而是帮助你感知哪些智能体正在被频繁使用、最近的消息趋势如何，以及整体会话是否健康增长。
|
||
</p>
|
||
</div>
|
||
<div className="stats-page-summary-card">
|
||
<div className="stats-page-summary-label">近 7 天消息总量</div>
|
||
<div className="stats-page-summary-value">{logic.last7Days}</div>
|
||
<div className="stats-page-summary-desc">平均每个会话 {logic.avgSessionMessages} 条消息</div>
|
||
</div>
|
||
</div>
|
||
|
||
<StatsMetricCards logic={logic} />
|
||
</div>
|
||
|
||
<StatsPointsCard logic={logic} />
|
||
|
||
<div className="stats-page-main-grid stats-page-mt-18">
|
||
<StatsTrendCard logic={logic} />
|
||
<StatsTopAgentsCard logic={logic} />
|
||
</div>
|
||
|
||
<StatsTokenSection logic={logic} />
|
||
</div>
|
||
);
|
||
}
|