52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
import { useState, useEffect } from 'react'
|
||
import { getStats } from '../api'
|
||
|
||
const fallback = {
|
||
nodes: 1280,
|
||
tasksToday: 45000,
|
||
hoursSaved: 8600,
|
||
}
|
||
|
||
function formatNum(n) {
|
||
if (n >= 10000) return (n / 10000).toFixed(1) + '万+'
|
||
return n.toLocaleString() + '+'
|
||
}
|
||
|
||
export default function StatsFooter() {
|
||
const [stats, setStats] = useState(fallback)
|
||
const [loading, setLoading] = useState(true)
|
||
|
||
useEffect(() => {
|
||
getStats()
|
||
.then(setStats)
|
||
.catch(() => setStats(fallback))
|
||
.finally(() => setLoading(false))
|
||
}, [])
|
||
|
||
const items = [
|
||
{ label: '已激活「阿虾」节点', value: formatNum(stats.nodes) },
|
||
{ label: '今日处理自动化任务', value: formatNum(stats.tasksToday) },
|
||
{ label: '已节省人力时长', value: formatNum(stats.hoursSaved) + ' 小时' },
|
||
]
|
||
|
||
return (
|
||
<footer className="border-t border-white/10 bg-space-black">
|
||
<div className="max-w-5xl mx-auto px-4 sm:px-6 py-12">
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 text-center">
|
||
{items.map((item, i) => (
|
||
<div key={i}>
|
||
<div className="text-2xl sm:text-3xl font-bold text-brand-orange mb-1">
|
||
{loading ? '—' : item.value}
|
||
</div>
|
||
<div className="text-gray-400 text-sm">{item.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="mt-10 pt-8 border-t border-white/5 text-center text-gray-500 text-sm">
|
||
Aiclw · 连接算力，执行万物
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
)
|
||
}
|