完成评论列表渲染

src/components/Header/DropdownMessage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import ClickOutside from '../ClickOutside';
 
@@ -7,9 +7,23 @@ import UserTwo from '../../images/user/user-02.png';
 import UserThree from '../../images/user/user-03.png';
 import UserFour from '../../images/user/user-04.png';
 
+import { getCommentListAPI } from '@/api/Comment'
+import { Comment } from '@/types/comment';
+
 const DropdownMessage = () => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [notifying, setNotifying] = useState(true);
+  const [commentList, setCommentList] = useState<Comment[]>([]);
+
+  // 获取评论列表
+  const getCommentList = async () => {
+    const { data } = await getCommentListAPI()
+    setCommentList(data as Comment[])
+  }
+
+  useEffect(() => {
+    getCommentList()
+  }, [])
 
   return (
     <ClickOutside onClick={() => setDropdownOpen(false)} className="relative">
@@ -23,9 +37,8 @@ const DropdownMessage = () => {
           to="#"
         >
           <span
-            className={`absolute -top-0.5 -right-0.5 z-1 h-2 w-2 rounded-full bg-meta-1 ${
-              notifying === false ? 'hidden' : 'inline'
-            }`}
+            className={`absolute -top-0.5 -right-0.5 z-1 h-2 w-2 rounded-full bg-meta-1 ${notifying === false ? 'hidden' : 'inline'
+              }`}
           >
             <span className="absolute -z-1 inline-flex h-full w-full animate-ping rounded-full bg-meta-1 opacity-75"></span>
           </span>
@@ -57,110 +70,39 @@ const DropdownMessage = () => {
           </svg>
         </Link>
 
-        {/* <!-- Dropdown Start --> */}
         {dropdownOpen && (
           <div
             className={`absolute -right-16 mt-2.5 flex h-90 w-75 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark sm:right-0 sm:w-80`}
           >
             <div className="px-4.5 py-3">
-              <h5 className="text-sm font-medium text-bodydark2">Messages</h5>
+              <h5 className="text-sm font-medium text-bodydark2">最新评论</h5>
             </div>
 
             <ul className="flex h-auto flex-col overflow-y-auto">
-              <li>
-                <Link
-                  className="flex gap-4.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
-                  to="/messages"
-                >
-                  <div className="h-12.5 w-12.5 rounded-full">
-                    <img src={UserTwo} alt="User" />
-                  </div>
+              {commentList.map(item => (
+                <li>
+                  <Link
+                    className="flex gap-4.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
+                    to="/comment"
+                  >
+                    <div className="overflow-hidden h-12.5 w-12.5 rounded-full">
+                      <img src={item.avatar} alt="User" />
+                    </div>
 
-                  <div>
-                    <h6 className="text-sm font-medium text-black dark:text-white">
-                      Mariya Desoja
-                    </h6>
-                    <p className="text-sm">I like your confidence 💪</p>
-                    <p className="text-xs">2min ago</p>
-                  </div>
-                </Link>
-              </li>
-              <li>
-                <Link
-                  className="flex gap-4.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
-                  to="/messages"
-                >
-                  <div className="h-12.5 w-12.5 rounded-full">
-                    <img src={UserOne} alt="User" />
-                  </div>
+                    <div>
+                      <h6 className="text-sm font-medium text-black dark:text-white">
+                        {item.name}
+                      </h6>
 
-                  <div>
-                    <h6 className="text-sm font-medium text-black dark:text-white">
-                      Robert Jhon
-                    </h6>
-                    <p className="text-sm">Can you share your offer?</p>
-                    <p className="text-xs">10min ago</p>
-                  </div>
-                </Link>
-              </li>
-              <li>
-                <Link
-                  className="flex gap-4.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
-                  to="/messages"
-                >
-                  <div className="h-12.5 w-12.5 rounded-full">
-                    <img src={UserThree} alt="User" />
-                  </div>
-
-                  <div>
-                    <h6 className="text-sm font-medium text-black dark:text-white">
-                      Henry Dholi
-                    </h6>
-                    <p className="text-sm">I cam across your profile and...</p>
-                    <p className="text-xs">1day ago</p>
-                  </div>
-                </Link>
-              </li>
-              <li>
-                <Link
-                  className="flex gap-4.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
-                  to="/messages"
-                >
-                  <div className="h-12.5 w-12.5 rounded-full">
-                    <img src={UserFour} alt="User" />
-                  </div>
-
-                  <div>
-                    <h6 className="text-sm font-medium text-black dark:text-white">
-                      Cody Fisher
-                    </h6>
-                    <p className="text-sm">I’m waiting for you response!</p>
-                    <p className="text-xs">5days ago</p>
-                  </div>
-                </Link>
-              </li>
-              <li>
-                <Link
-                  className="flex gap-4.5 border-t border-stroke px-4.5 py-3 hover:bg-gray-2 dark:border-strokedark dark:hover:bg-meta-4"
-                  to="/messages"
-                >
-                  <div className="h-12.5 w-12.5 rounded-full">
-                    <img src={UserTwo} alt="User" />
-                  </div>
-
-                  <div>
-                    <h6 className="text-sm font-medium text-black dark:text-white">
-                      Mariya Desoja
-                    </h6>
-                    <p className="text-sm">I like your confidence 💪</p>
-                    <p className="text-xs">2min ago</p>
-                  </div>
-                </Link>
-              </li>
+                      <p className="text-sm">{item.content}</p>
+                      <p className="text-xs">{item.createTime}</p>
+                    </div>
+                  </Link>
+                </li>
+              ))}
             </ul>
           </div>
         )}
-        {/* <!-- Dropdown End --> */}
       </li>
     </ClickOutside>
   );

src/pages/Comment/index.tsx

@@ -15,12 +15,6 @@ const CommentPage = () => {
 
     const [isModalOpen, setIsModalOpen] = useState(false);
 
-    // const loadingFn = async (callback: () => void) => {
-    //     setLoading(true)
-    //     await callback()
-    //     setLoading(false)
-    // }
-
     const getCommentList = async () => {
         const { data } = await getCommentListAPI();
         setList(data as Comment[])
@@ -136,6 +130,7 @@ const CommentPage = () => {
                         rowKey="id"
                         dataSource={list}
                         columns={columns}
+                        expandable={{ defaultExpandAllRows: true }}
                         scroll={{ x: 'max-content' }}
                         pagination={{
                             position: ['bottomCenter'],

src/types/Comment.d.ts

@@ -9,7 +9,7 @@ export interface Comment {
     articleTitle: number,
     commentId: number,
     auditStatus: number
-    createTime: Date,
+    createTime: string,
 }
 
 export interface Info {