From 7050f15f0a61451ab5c0e981b5881864cb471e46 Mon Sep 17 00:00:00 2001
From: mashen <mashen@example.com>
Date: Thu, 9 Apr 2026 13:46:50 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=85=8D=E7=BD=AE=20React=20Router=20?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 配置首页路由
- 配置城市列表页路由
- 配置城市详情页路由
- 配置个人中心页路由
- 配置 404 页面
- 集成 MobX stores
---
 frontend/src/App.js | 102 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 96 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index cacbc41..41be71a 100644
--- a/frontend/src/App.js
+++ b/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 (
-    <Container>
-      <Header>
-        <Title>React + Django App</Title>
-      </Header>
+    <Layout title="城市手册" subtitle="地方志兼本地生活服务平台">
       <Routes>
-        <Route path="/" element={<div>Welcome to the app!</div>} />
+        <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>
-    </Container>
+    </Layout>
   );
 }
 
+const HomePage = observer(() => {
+  return (
+    <Container>
+      <Header>
+        <Title>欢迎来到城市手册</Title>
+        <p>探索每个城市的故事与特色</p>
+      </Header>
+      <div>
+        <h2>热门城市</h2>
+        <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;
\ No newline at end of file