功能：贴子详情

src/components/forumCommentItem/index.tsx

+import React from 'react';
+import { LikeOutlined, MessageOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import styled from 'styled-components';
+import { InterListType } from '@/api/interface';
+import { AllCommentListType } from '@/api/interface/home';
+
+// 详情类型
+type DetailType = InterListType<AllCommentListType>[0];
+
+const ForumCommentItem: React.FC<{ detail: DetailType }> = ({ detail }) => {
+  return (
+    <ForumCommentWrap>
+      <img
+        className={'image'}
+        src={detail?.userAccountVO?.userImg}
+        alt={detail?.userAccountVO?.userName}
+      />
+      <div className="content">
+        <div className="name">
+          {detail?.userAccountVO?.nickName ||
+            `云享飞用户_${detail?.userAccountId}`}
+        </div>
+        <div className="text">{detail?.content}</div>
+        <div className="action">
+          <div className="date">{detail?.createTime}</div>
+          <div className="button">
+            <Button type={'link'} icon={<MessageOutlined />}>
+              回复
+            </Button>
+            <Button type={'link'} icon={<LikeOutlined />}>
+              &nbsp;{detail?.likeCount || 0}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </ForumCommentWrap>
+  );
+};
+
+export default ForumCommentItem;
+// 样式
+const ForumCommentWrap = styled.div`
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin-bottom: 1.5rem;
+  .image {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    margin-right: 1rem;
+  }
+  .content {
+    position: relative;
+    width: calc(100% - 3.5rem);
+    box-sizing: border-box;
+    .name {
+      font-weight: bold;
+    }
+    .text {
+      width: 100%;
+      color: #666666;
+      margin-bottom: 0.5rem;
+    }
+    .action {
+      position: relative;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .date {
+        color: #999999;
+      }
+    }
+  }
+`;

src/pages/forum/detail/[id].tsx

 import React, { useEffect, useState } from 'react';
-import { LikeOutlined, MessageOutlined } from '@ant-design/icons';
 import { Button, Input } from 'antd';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { HomeAPI } from '@/api';
 import { InterDataType, InterListType, PaginationProps } from '@/api/interface';
 import { AllCommentListType, ForumDetailType } from '@/api/interface/home';
+import ForumCommentItem from '@/components/forumCommentItem';
 import ForumItemView from '@/components/forumItem';
 import LayoutView from '@/components/layout';
 import { wrapper } from '@/store';
@@ -115,31 +115,7 @@ const ForumDetailPage: React.FC<{ forumDetail: DetailType }> = ({
             <div className="detail-list">
               <div className="list-title">评论列表</div>
               {commentList?.map((i, j) => (
-                <div className="list-item list-none" key={j}>
-                  <img
-                    className={'image'}
-                    src={i?.userAccountVO?.userImg}
-                    alt={i?.userAccountVO?.userName}
-                  />
-                  <div className="content">
-                    <div className="name">
-                      {i?.userAccountVO?.nickName ||
-                        `云享飞用户_${i?.userAccountId}`}
-                    </div>
-                    <div className="text">{i?.content}</div>
-                    <div className="action">
-                      <div className="date">{i?.createTime}</div>
-                      <div className="button">
-                        <Button type={'link'} icon={<MessageOutlined />}>
-                          回复
-                        </Button>
-                        <Button type={'link'} icon={<LikeOutlined />}>
-                          &nbsp;{i?.likeCount || 0}
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                <ForumCommentItem key={j} detail={i} />
               ))}
             </div>
           </div>
@@ -212,44 +188,6 @@ const ForumDetailWrap = styled.div`
           font-weight: bold;
           margin-bottom: 1rem;
         }
-        .list-item {
-          position: relative;
-          width: 100%;
-          box-sizing: border-box;
-          display: flex;
-          align-items: flex-start;
-          justify-content: flex-start;
-          margin-bottom: 1.5rem;
-          .image {
-            width: 2.5rem;
-            height: 2.5rem;
-            border-radius: 50%;
-            margin-right: 1rem;
-          }
-          .content {
-            position: relative;
-            width: calc(100% - 3.5rem);
-            box-sizing: border-box;
-            .name {
-              font-weight: bold;
-            }
-            .text {
-              width: 100%;
-              color: #666666;
-              margin-bottom: 0.5rem;
-            }
-            .action {
-              position: relative;
-              width: 100%;
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              .date {
-                color: #999999;
-              }
-            }
-          }
-        }
       }
     }
     .forum-order {