50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { Card, Col, Row, Statistic, theme } from 'antd';
|
|
import { useEffect, useState } from 'react';
|
|
import { accountApi, loginApi, type LoginTaskItem } from '../api/modules';
|
|
|
|
export default function DashboardPage() {
|
|
const { token } = theme.useToken();
|
|
const [stats, setStats] = useState({ accounts: 0, tasks: 0, success: 0, failed: 0 });
|
|
|
|
useEffect(() => {
|
|
Promise.all([accountApi.list(), loginApi.listTasks()])
|
|
.then(([accounts, tasks]) => {
|
|
setStats({
|
|
accounts: accounts.length,
|
|
tasks: tasks.length,
|
|
success: tasks.filter((t: LoginTaskItem) => t.status === 'success').length,
|
|
failed: tasks.filter((t: LoginTaskItem) => ['failed', 'error'].includes(t.status)).length,
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<h2>概览</h2>
|
|
<Row gutter={16}>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic title="账号总数" value={stats.accounts} />
|
|
</Card>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic title="登录任务总数" value={stats.tasks} />
|
|
</Card>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic title="成功" value={stats.success} styles={{ content: { color: token.colorSuccess } }} />
|
|
</Card>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Card>
|
|
<Statistic title="失败" value={stats.failed} styles={{ content: { color: token.colorError } }} />
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
}
|