Initial commit: React + Django 城市手册项目

- Django 4.2 + DRF + JWT + GraphQL
- React 18 + MobX + styled-components
- PostgreSQL 数据库
- Docker + Docker Compose + Nginx
- 完整的功能模块（用户、版块、文章、服务、交互、版主管理）
- 完整的文档（需求、部署、测试）

frontend/src/App.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import { Routes, Route, useParams } 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 Layout from './components/common/Layout';
+import Loading from './components/common/Loading';
+import CitiesPage from './components/region/CitiesPage';
+import CityDetailPage from './components/region/CityDetailPage';
+import ArticleDetailPage from './components/article/ArticleDetailPage';
+import ServiceDetailPage from './components/service/ServiceDetailPage';
+import LoginPage from './components/auth/LoginPage';
+import RegisterPage from './components/auth/RegisterPage';
+
+const Container = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+`;
+
+const Header = styled.header`
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid #eee;
+`;
+
+const Title = styled.h1`
+  margin: 0;
+  font-size: 28px;
+`;
+
+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="/articles/:articleId" element={<ArticleDetailPageWrapper />} />
+        <Route path="/services/:serviceId" element={<ServiceDetailPageWrapper />} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<RegisterPage />} />
+        <Route path="/user/profile" element={<UserProfilePage />} />
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </Layout>
+  );
+}
+
+const ArticleDetailPageWrapper = observer(() => {
+  const { articleId } = useParams();
+  return <ArticleDetailPage articleId={articleId} />;
+});
+
+const ServiceDetailPageWrapper = observer(() => {
+  const { serviceId } = useParams();
+  return <ServiceDetailPage serviceId={serviceId} />;
+});
+
+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;