feat: 配置 React Router 路由

- 配置首页路由
- 配置城市列表页路由
- 配置城市详情页路由
- 配置个人中心页路由
- 配置 404 页面
- 集成 MobX stores

frontend/src/App.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
+import { observer } from 'mobx-react-lite';
 import styled from 'styled-components';
+import { useAuthStore } from './stores/AuthStore';
+import Layout from './components/common/Layout';
+import Loading from './components/common/Loading';
+import CitiesPage from './components/region/CitiesPage';
+import CityDetailPage from './components/region/CityDetailPage';
 
 const Container = styled.div`
   max-width: 1200px;
@@ -20,16 +26,100 @@ const Title = styled.h1`
 `;
 
 function App() {
+  const authStore = useAuthStore();
+
+  // Fetch current user on app load
+  React.useEffect(() => {
+    if (authStore.isAuthenticated) {
+      authStore.fetchCurrentUser();
+    }
+  }, [authStore]);
+
+  return (
+    <Layout title="城市手册" subtitle="地方志兼本地生活服务平台">
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/cities" element={<CitiesPage />} />
+        <Route path="/cities/:regionId" element={<CityDetailPage />} />
+        <Route path="/user/profile" element={<UserProfilePage />} />
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </Layout>
+  );
+}
+
+const HomePage = observer(() => {
   return (
     <Container>
       <Header>
-        <Title>React + Django App</Title>
+        <Title>欢迎来到城市手册</Title>
+        <p>探索每个城市的故事与特色</p>
       </Header>
-      <Routes>
+      <div>
-        <Route path="/" element={<div>Welcome to the app!</div>} />
+        <h2>热门城市</h2>
-      </Routes>
+        <p>即将推出...</p>
+      </div>
+      <div>
+        <h2>最新文章</h2>
+        <p>即将推出...</p>
+      </div>
+    </Container>
+  );
+});
+
+const UserProfilePage = observer(() => {
+  const authStore = useAuthStore();
+  const userStore = useUserStore();
+
+  React.useEffect(() => {
+    if (authStore.isAuthenticated) {
+      userStore.fetchCurrentUser();
+    }
+  }, [authStore, userStore]);
+
+  if (!authStore.isAuthenticated) {
+    return (
+      <Container>
+        <p>请先登录</p>
       </Container>
     );
   }
 
+  if (userStore.loading) {
+    return <Loading message="加载用户信息..." />;
+  }
+
+  return (
+    <Container>
+      <Header>
+        <Title>个人中心</Title>
+      </Header>
+      {userStore.user && (
+        <div>
+          <h3>用户信息</h3>
+          <p>用户名: {userStore.user.username}</p>
+          <p>邮箱: {userStore.user.email}</p>
+          <p>角色: {userStore.user.role_display}</p>
+
+          <h3>统计</h3>
+          <p>文章数: {userStore.user.articles_count}</p>
+          <p>服务数: {userStore.user.services_count}</p>
+          <p>评论数: {userStore.user.comments_count}</p>
+          <p>点赞数: {userStore.user.likes_count}</p>
+          <p>收藏数: {userStore.user.favorites_count}</p>
+        </div>
+      )}
+    </Container>
+  );
+});
+
+const NotFoundPage = () => (
+  <Container>
+    <Header>
+      <Title>404</Title>
+    </Header>
+    <p>页面未找到</p>
+  </Container>
+);
+
 export default App;