Function StatsBlock

src/Components/Home/home.jsx:678–725

()

}

function StatsBlock() {
    const dark = useTheme().palette.mode === 'dark';
    const [stats, setStats] = useState({programs: null, univs: null, records: null, posts: null});
    useEffect(() => {
        let alive = true;
        (async () => {
            try {
                const p = await getPrograms();
                if (alive) setStats((s) => ({...s, programs: Object.values(p).flat().length, univs: Object.keys(p).length}));
            } catch { /* not signed in / offline — leave as null */ }
            try {
                const r = await getRecords();
                if (alive) setStats((s) => ({...s, records: Object.keys(r ?? {}).length}));
            } catch { /* ignore */ }
            try {
                const posts = await getPosts();
                if (alive) setStats((s) => ({...s, posts: posts.length}));
            } catch { /* ignore */ }
        })();
        return () => {
            alive = false;
        };
    }, []);

    const tiles = [
        {icon: <TravelExploreOutlined/>, value: stats.programs, label: '收录项目'},
        {icon: <SchoolOutlined/>, value: stats.univs, label: '覆盖高校'},
        {icon: <TableChartOutlined/>, value: stats.records, label: '申请记录'},
        {icon: <MenuBookOutlined/>, value: stats.posts, label: '经验分享'},
    ];
    return (
        <Box sx={{width: '100%', maxWidth: 920}}>
            <SectionHeading title='社区数据' subtitle='由上科大学子共同积累与维护'/>
            <Box sx={{display: 'grid', gridTemplateColumns: {xs: '1fr 1fr', md: 'repeat(4, 1fr)'}, gap: {xs: 2, md: 2.5}}}>
                {tiles.map((t) => (
                    <Box key={t.label} className='GlassCard'
                         sx={glassSx(dark, {p: {xs: '1.25rem', md: '1.75rem 1rem'}, textAlign: 'center'})}>
                        <Box sx={{color: 'primary.main', display: 'flex', justifyContent: 'center', mb: 1}}>{t.icon}</Box>
                        <Typography sx={{fontWeight: 800, lineHeight: 1.1, fontSize: {xs: '2rem', md: '2.6rem'}, display: 'inline-block', ...gradientTextSx(dark)}}>
                            <StatNumber value={t.value}/>
                        </Typography>
                        <Typography variant='body2' sx={{color: 'text.secondary', mt: 0.5}}>{t.label}</Typography>
                    </Box>
                ))}
            </Box>
        </Box>
    );
}

function WorldMap({width, height}) {
    const theme = useTheme();