92 lines
2.2 KiB
TypeScript
92 lines
2.2 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { Card, Row, Col, Statistic, Spin } from 'antd'
|
|
import { UserOutlined, ShoppingOutlined, DollarOutlined } from '@ant-design/icons'
|
|
import statsApi from '../api/modules/stats'
|
|
|
|
function Home() {
|
|
const [stats, setStats] = useState({
|
|
totalUsers: 0,
|
|
todayOrders: 0,
|
|
todayRevenue: 0,
|
|
})
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetchStats()
|
|
}, [])
|
|
|
|
const fetchStats = async () => {
|
|
try {
|
|
const response = await statsApi.getDashboardStats()
|
|
if (response.code === 0) {
|
|
setStats(response.data)
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch stats:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h2 style={styles.title}>欢迎来到 Atlas Console</h2>
|
|
|
|
{loading ? (
|
|
<div style={styles.loading}>
|
|
<Spin size="large" />
|
|
</div>
|
|
) : (
|
|
<Row gutter={[16, 16]}>
|
|
<Col xs={24} sm={8}>
|
|
<Card>
|
|
<Statistic
|
|
title="总用户数"
|
|
value={stats.totalUsers}
|
|
prefix={<UserOutlined />}
|
|
// @ts-ignore - antd v5 types incomplete
|
|
styles={{ value: { color: '#3f8600' } }}
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={24} sm={8}>
|
|
<Card>
|
|
<Statistic
|
|
title="今日订单"
|
|
value={stats.todayOrders}
|
|
prefix={<ShoppingOutlined />}
|
|
// @ts-ignore
|
|
styles={{ value: { color: '#1890ff' } }}
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={24} sm={8}>
|
|
<Card>
|
|
<Statistic
|
|
title="今日收入"
|
|
value={stats.todayRevenue}
|
|
prefix={<DollarOutlined />}
|
|
precision={2}
|
|
suffix="元"
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const styles = {
|
|
title: {
|
|
marginBottom: '24px',
|
|
},
|
|
loading: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
minHeight: '200px',
|
|
},
|
|
}
|
|
|
|
export default Home |