From 8d4eda17e0304154af395900ad26d70f18e604ff Mon Sep 17 00:00:00 2001
From: mashen <mashen@example.com>
Date: Thu, 9 Apr 2026 13:48:21 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E5=92=8C=E6=9C=8D=E5=8A=A1=E8=AF=A6=E6=83=85=E9=A1=B5=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ArticleDetailPage（文章详情、评论、点赞）
- ServiceDetailPage（服务详情、评分、评论、点赞）
- 更新 App.js 路由配置
- 集成 ArticleStore 和 ServiceStore
---
 frontend/src/App.js                           |  17 +-
 .../components/article/ArticleDetailPage.js   | 183 ++++++++++++++++
 .../components/service/ServiceDetailPage.js   | 204 ++++++++++++++++++
 3 files changed, 403 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/article/ArticleDetailPage.js
 create mode 100644 frontend/src/components/service/ServiceDetailPage.js

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 41be71a..6bec285 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,12 +1,15 @@
 import React from 'react';
-import { Routes, Route } from 'react-router-dom';
+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';
 
 const Container = styled.div`
   max-width: 1200px;
@@ -41,6 +44,8 @@ function App() {
         <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="/user/profile" element={<UserProfilePage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
@@ -48,6 +53,16 @@ function App() {
   );
 }
 
+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>
diff --git a/frontend/src/components/article/ArticleDetailPage.js b/frontend/src/components/article/ArticleDetailPage.js
new file mode 100644
index 0000000..502a97d
--- /dev/null
+++ b/frontend/src/components/article/ArticleDetailPage.js
@@ -0,0 +1,183 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { observer } from 'mobx-react-lite';
+import { useNavigate } from 'react-router-dom';
+import { useArticleStore } from '../../stores/ArticleStore';
+import { useInteractionStore } from '../../stores/InteractionStore';
+import Card from '../common/Card';
+import Loading from '../common/Loading';
+import ErrorMessage from '../common/ErrorMessage';
+
+const Content = styled.div`
+  line-height: 1.8;
+  color: #333;
+
+  h1, h2, h3 {
+    color: #2c3e50;
+    margin-top: 30px;
+  }
+
+  p {
+    margin-bottom: 15px;
+  }
+`;
+
+const Actions = styled.div`
+  display: flex;
+  gap: 10px;
+  margin: 20px 0;
+`;
+
+const Button = styled.button`
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  ${props => props.primary && `
+    background: #667eea;
+    color: white;
+  `}
+
+  ${props => props.secondary && `
+    background: #6c757d;
+    color: white;
+  `}
+`;
+
+const CommentsSection = styled.div`
+  margin-top: 40px;
+`;
+
+const CommentForm = styled.form`
+  margin-bottom: 20px;
+
+  textarea {
+    width: 100%;
+    min-height: 100px;
+    padding: 10px;
+    border: 1px solid #dee2e6;
+    border-radius: 5px;
+    resize: vertical;
+  }
+`;
+
+const CommentList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+const CommentItem = styled.div`
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 5px;
+`;
+
+const ArticleDetailPage = observer(({ articleId }) => {
+  const articleStore = useArticleStore();
+  const interactionStore = useInteractionStore();
+  const navigate = useNavigate();
+  const [comment, setComment] = useState('');
+  const [liked, setLiked] = useState(false);
+
+  useEffect(() => {
+    articleStore.fetchArticle(articleId);
+    articleStore.fetchArticleComments(articleId);
+    articleStore.fetchArticleStats(articleId);
+  }, [articleId, articleStore]);
+
+  const handleLike = async () => {
+    const result = await articleStore.likeArticle(articleId);
+    if (result) {
+      setLiked(result.liked);
+      articleStore.fetchArticleStats(articleId);
+    }
+  };
+
+  const handleComment = async (e) => {
+    e.preventDefault();
+    if (!comment.trim()) return;
+
+    const result = await interactionStore.createComment('article', articleId, comment);
+    if (result.success) {
+      setComment('');
+      articleStore.fetchArticleComments(articleId);
+    }
+  };
+
+  if (articleStore.loading) {
+    return <Loading message="加载文章详情..." />;
+  }
+
+  if (articleStore.error) {
+    return (
+      <ErrorMessage
+        message={articleStore.error}
+        onDismiss={() => articleStore.error = null}
+      />
+    );
+  }
+
+  if (!articleStore.currentArticle) {
+    return <ErrorMessage message="文章不存在" />;
+  }
+
+  const article = articleStore.currentArticle;
+
+  return (
+    <div>
+      <h1>{article.title}</h1>
+      <p>作者: {article.author_username} | {article.article_type_display}</p>
+
+      <Content dangerouslySetInnerHTML={{ __html: article.content }} />
+
+      <Actions>
+        <Button primary onClick={handleLike}>
+          {liked ? '已点赞' : '点赞'}
+        </Button>
+        <Button secondary>
+          收藏
+        </Button>
+        <Button secondary>
+          分享
+        </Button>
+      </Actions>
+
+      <CommentsSection>
+        <h2>评论 ({articleStore.currentArticle.comments_count})</h2>
+
+        <CommentForm onSubmit={handleComment}>
+          <textarea
+            placeholder="写下你的评论..."
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+          />
+          <Button type="submit" primary style={{ marginTop: '10px' }}>
+            发表评论
+          </Button>
+        </CommentForm>
+
+        <CommentList>
+          {articleStore.currentArticle.comments.map((comment) => (
+            <CommentItem key={comment.id}>
+              <p><strong>{comment.author_username}</strong></p>
+              <p>{comment.content}</p>
+              <p style={{ color: '#999', fontSize: '14px' }}>
+                {comment.created_at}
+              </p>
+            </CommentItem>
+          ))}
+        </CommentList>
+      </CommentsSection>
+    </div>
+  );
+});
+
+export default ArticleDetailPage;
\ No newline at end of file
diff --git a/frontend/src/components/service/ServiceDetailPage.js b/frontend/src/components/service/ServiceDetailPage.js
new file mode 100644
index 0000000..8d4ff20
--- /dev/null
+++ b/frontend/src/components/service/ServiceDetailPage.js
@@ -0,0 +1,204 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { observer } from 'mobx-react-lite';
+import { useNavigate } from 'react-router-dom';
+import { useServiceStore } from '../../stores/ServiceStore';
+import { useInteractionStore } from '../../stores/InteractionStore';
+import Card from '../common/Card';
+import Loading from '../common/Loading';
+import ErrorMessage from '../common/ErrorMessage';
+
+const ServiceCard = styled(Card)`
+  cursor: pointer;
+`;
+
+const Rating = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin: 10px 0;
+
+  span {
+    font-weight: bold;
+  }
+`;
+
+const Star = styled.span`
+  color: ${props => props.filled ? '#ffc107' : '#dee2e6'};
+  font-size: 20px;
+`;
+
+const CommentsSection = styled.div`
+  margin-top: 40px;
+`;
+
+const CommentForm = styled.form`
+  margin-bottom: 20px;
+
+  textarea {
+    width: 100%;
+    min-height: 100px;
+    padding: 10px;
+    border: 1px solid #dee2e6;
+    border-radius: 5px;
+    resize: vertical;
+  }
+`;
+
+const ServiceDetailPage = observer(({ serviceId }) => {
+  const serviceStore = useServiceStore();
+  const interactionStore = useInteractionStore();
+  const navigate = useNavigate();
+  const [comment, setComment] = useState('');
+  const [liked, setLiked] = useState(false);
+
+  useEffect(() => {
+    serviceStore.fetchService(serviceId);
+    serviceStore.fetchServiceComments(serviceId);
+    serviceStore.fetchServiceStats(serviceId);
+  }, [serviceId, serviceStore]);
+
+  const handleLike = async () => {
+    const result = await serviceStore.likeService(serviceId);
+    if (result) {
+      setLiked(result.liked);
+      serviceStore.fetchServiceStats(serviceId);
+    }
+  };
+
+  const handleRate = async (score) => {
+    const result = await serviceStore.rateService(serviceId, score);
+    if (result.success) {
+      serviceStore.fetchServiceStats(serviceId);
+    }
+  };
+
+  const handleComment = async (e) => {
+    e.preventDefault();
+    if (!comment.trim()) return;
+
+    const result = await interactionStore.createComment('service', serviceId, comment);
+    if (result.success) {
+      setComment('');
+      serviceStore.fetchServiceComments(serviceId);
+    }
+  };
+
+  if (serviceStore.loading) {
+    return <Loading message="加载服务详情..." />;
+  }
+
+  if (serviceStore.error) {
+    return (
+      <ErrorMessage
+        message={serviceStore.error}
+        onDismiss={() => serviceStore.error = null}
+      />
+    );
+  }
+
+  if (!serviceStore.currentService) {
+    return <ErrorMessage message="服务不存在" />;
+  }
+
+  const service = serviceStore.currentService;
+  const stats = serviceStore.currentService.stats || {};
+
+  return (
+    <div>
+      {service.image && (
+        <img
+          src={service.image}
+          alt={service.name}
+          style={{
+            width: '100%',
+            maxHeight: '400px',
+            objectFit: 'cover',
+            borderRadius: '8px',
+            marginBottom: '20px',
+          }}
+        />
+      )}
+
+      <h1>{service.name}</h1>
+      <p>{service.category_display}</p>
+
+      <p>{service.description}</p>
+
+      {service.address && (
+        <p><strong>地址:</strong> {service.address}</p>
+      )}
+      {service.contact && (
+        <p><strong>联系方式:</strong> {service.contact}</p>
+      )}
+
+      <Rating>
+        <span>评分:</span>
+        {[1, 2, 3, 4, 5].map((star) => (
+          <Star
+            key={star}
+            filled={star <= Math.round(stats.avg_rating || 0)}
+            onClick={() => handleRate(star)}
+            style={{ cursor: 'pointer' }}
+          >
+            ★
+          </Star>
+        ))}
+        <span>
+          {stats.avg_rating || 0} ({stats.ratings_count || 0} 评分)
+        </span>
+      </Rating>
+
+      <p>
+        <strong>点赞:</strong> {stats.likes_count || 0} |
+        <strong>评论:</strong> {stats.comments_count || 0}
+      </p>
+
+      <CommentsSection>
+        <h2>评论 ({stats.comments_count || 0})</h2>
+
+        <CommentForm onSubmit={handleComment}>
+          <textarea
+            placeholder="写下你的评论..."
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+          />
+          <button
+            type="submit"
+            style={{
+              padding: '10px 20px',
+              background: '#667eea',
+              color: 'white',
+              border: 'none',
+              borderRadius: '5px',
+              cursor: 'pointer',
+              marginTop: '10px',
+            }}
+          >
+            发表评论
+          </button>
+        </CommentForm>
+
+        {service.currentService.comments && service.currentService.comments.map((comment) => (
+          <div
+            key={comment.id}
+            style={{
+              background: '#f8f9fa',
+              padding: '15px',
+              borderRadius: '5px',
+              marginBottom: '15px',
+            }}
+          >
+            <p><strong>{comment.author_username}</strong></p>
+            <p>{comment.content}</p>
+            <p style={{ color: '#999', fontSize: '14px' }}>
+              {comment.created_at}
+            </p>
+          </div>
+        ))}
+      </CommentsSection>
+    </div>
+  );
+});
+
+export default ServiceDetailPage;
\ No newline at end of file