feat: 添加中国地图交互功能

- 新增 react-simple-maps 地图库
- 实现中国省级行政区划地图（34 个省份）
- 首页集成地图组件，点击省份跳转城市列表
- 悬停显示省份名称，热力图颜色表示内容丰富度
- 重构 stores 导出方式，支持 hooks 模式

frontend/src/App.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import { Routes, Route, useParams } from 'react-router-dom';
+import { Routes, Route, useParams, useNavigate } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import styled from 'styled-components';
 import { useAuthStore } from './stores/AuthStore';
 import { useUserStore } from './stores/UserStore';
+import { useRegionStore } from './stores/RegionStore';
 import Layout from './components/common/Layout';
 import Loading from './components/common/Loading';
+import ChinaMap from './components/common/ChinaMap';
 import CitiesPage from './components/region/CitiesPage';
 import CityDetailPage from './components/region/CityDetailPage';
 import ArticleDetailPage from './components/article/ArticleDetailPage';
@@ -68,18 +70,50 @@ const ServiceDetailPageWrapper = observer(() => {
 });
 
 const HomePage = observer(() => {
+  const navigate = useNavigate();
+  const regionStore = useRegionStore();
+  const [loading, setLoading] = React.useState(false);
+
+  const handleProvinceClick = async (geo) => {
+    const provinceName = geo.properties.name;
+    const provinceCode = geo.properties.code;
+    
+    setLoading(true);
+    try {
+      // 先获取所有省份列表，找到对应的 region ID
+      await regionStore.fetchProvinces();
+      const province = regionStore.regions.find(
+        r => r.name === provinceName || r.code === provinceCode
+      );
+      
+      if (province) {
+        navigate(`/cities/${province.id}`);
+      } else {
+        // 如果没有找到，跳转到城市列表页并带上省份名称
+        navigate(`/cities?province=${encodeURIComponent(provinceName)}`);
+      }
+    } catch (error) {
+      console.error('Failed to navigate to province:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <Container>
       <Header>
         <Title>欢迎来到城市手册</Title>
         <p>探索每个城市的故事与特色</p>
       </Header>
-      <div>
-        <h2>热门城市</h2>
-        <p>即将推出...</p>
-      </div>
-      <div>
-        <h2>最新文章</h2>
+      
+      {loading ? (
+        <Loading message="加载中..." />
+      ) : (
+        <ChinaMap onProvinceClick={handleProvinceClick} />
+      )}
+      
+      <div style={{ marginTop: '40px' }}>
+        <h2>📚 最新文章</h2>
         <p>即将推出...</p>
       </div>
     </Container>