78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
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>
|
|
<h1>欢迎来到管理后台</h1>
|
|
{loading ? (
|
|
<p>加载中...</p>
|
|
) : (
|
|
<div style={styles.cards}>
|
|
<div style={styles.card}>
|
|
<h3>📊 数据统计</h3>
|
|
<p style={styles.number}>{stats.totalUsers.toLocaleString()}</p>
|
|
<p>总用户数</p>
|
|
</div>
|
|
<div style={styles.card}>
|
|
<h3>📦 订单</h3>
|
|
<p style={styles.number}>{stats.todayOrders.toLocaleString()}</p>
|
|
<p>今日订单</p>
|
|
</div>
|
|
<div style={styles.card}>
|
|
<h3>💰 收入</h3>
|
|
<p style={styles.number}>¥{stats.todayRevenue.toLocaleString()}</p>
|
|
<p>今日收入</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const styles = {
|
|
cards: {
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
gap: '24px',
|
|
marginTop: '24px',
|
|
},
|
|
card: {
|
|
backgroundColor: '#fff',
|
|
padding: '24px',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
|
},
|
|
number: {
|
|
fontSize: '32px',
|
|
fontWeight: 'bold',
|
|
color: '#1890ff',
|
|
margin: '16px 0',
|
|
},
|
|
}
|
|
|
|
export default Home |