From 09a82d03301d06e950a89cb15237b083b7f451ad Mon Sep 17 00:00:00 2001
From: Shu Guang <61069967+shuguangnet@users.noreply.github.com>
Date: Sat, 19 Apr 2025 02:36:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BA=E5=9D=9B=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?=E7=95=99=E8=A8=80=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Forum/Detail/index.tsx | 68 +++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 2 deletions(-)

diff --git a/src/pages/Forum/Detail/index.tsx b/src/pages/Forum/Detail/index.tsx
index 108e77f..93ead2f 100644
--- a/src/pages/Forum/Detail/index.tsx
+++ b/src/pages/Forum/Detail/index.tsx
@@ -10,6 +10,7 @@ import {
   Input,
   message,
   Tag,
+  List,
 } from 'antd';
 import {
   LikeOutlined,
@@ -22,11 +23,40 @@ import {
 const { Title, Paragraph } = Typography;
 const { TextArea } = Input;
 
+// Mock comment data
+const mockComments = [
+  {
+    id: 1,
+    author: '张三',
+    avatar: 'https://joeschmoe.io/api/v1/random',
+    content: '这个帖子很有帮助，感谢分享！',
+    createTime: '2024-03-20 10:00',
+    likes: 5,
+  },
+  {
+    id: 2,
+    author: '李四',
+    avatar: 'https://joeschmoe.io/api/v1/random',
+    content: '我也有一些补充，大家可以参考一下...',
+    createTime: '2024-03-20 11:30',
+    likes: 3,
+  },
+  {
+    id: 3,
+    author: '王五',
+    avatar: 'https://joeschmoe.io/api/v1/random',
+    content: '学到了很多新知识，期待更多分享！',
+    createTime: '2024-03-20 14:15',
+    likes: 2,
+  },
+];
+
 const ForumDetail: React.FC = () => {
   const { id } = useParams();
   const [liked, setLiked] = useState(false);
   const [collected, setCollected] = useState(false);
   const [comment, setComment] = useState('');
+  const [comments, setComments] = useState(mockComments);
 
   const handleSubmitComment = () => {
     if (!comment.trim()) {
@@ -34,6 +64,15 @@ const ForumDetail: React.FC = () => {
       return;
     }
     // 提交评论
+    const newComment = {
+      id: comments.length + 1,
+      author: '当前用户',
+      avatar: 'https://joeschmoe.io/api/v1/random',
+      content: comment,
+      createTime: new Date().toLocaleString(),
+      likes: 0,
+    };
+    setComments([newComment, ...comments]);
     message.success('评论成功');
     setComment('');
   };
@@ -93,8 +132,33 @@ const ForumDetail: React.FC = () => {
             发表评论
           </Button>
 
-          {/* 评论列表 */}
-          {/* 这里可以复用你原有的评论列表组件 */}
+          <List
+            style={{ marginTop: 24 }}
+            itemLayout="horizontal"
+            dataSource={comments}
+            renderItem={(item) => (
+              <List.Item
+                actions={[
+                  <Button type="text" icon={<LikeOutlined />} key="list-loadmore-like">
+                    {item.likes}
+                  </Button>,
+                ]}
+              >
+                <List.Item.Meta
+                  avatar={<Avatar src={item.avatar} />}
+                  title={
+                    <Space>
+                      <span>{item.author}</span>
+                      <span style={{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '14px' }}>
+                        {item.createTime}
+                      </span>
+                    </Space>
+                  }
+                  description={item.content}
+                />
+              </List.Item>
+            )}
+          />
         </div>
       </article>
     </Card>