封装随机头像组件

package.json

@@ -17,6 +17,7 @@
     "antd": "^5.19.3",
     "apexcharts": "^3.41.0",
     "axios": "^1.7.2",
+    "dicebear": "^9.2.1",
     "flatpickr": "^4.6.13",
     "headlessui": "^0.0.0",
     "jsvectormap": "^1.5.3",

src/api/Comment.ts

@@ -17,7 +17,7 @@ export const editCommentDataAPI = (data: Comment) => Request<Comment>("PATCH", "
 export const getCommentDataAPI = (id?: number) => Request<Paginate<Comment>>("GET", `/comment/${id}`)
 
 // 获取评论列表
-export const getCommentListAPI = (pagination?: Page, pattern?: string) => {
+export const getCommentListAPI = (pattern?: "list" | "recursion", pagination?: Page) => {
     if (pagination) {
         const { page, size } = pagination
         return Request<Paginate<Comment[]>>("GET", `/comment?page=${page}&size=${size}`);

src/components/Header/DropdownComment.tsx

@@ -5,6 +5,9 @@ import ClickOutside from '../ClickOutside';
 import { getCommentListAPI } from '@/api/Comment'
 import { Comment } from '@/types/comment';
 
+import dayjs from 'dayjs'
+import RandomAvatar from '@/components/RandomAvatar'
+
 const DropdownMessage = () => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [notifying, setNotifying] = useState(true);
@@ -12,7 +15,7 @@ const DropdownMessage = () => {
 
   // 获取评论列表
   const getCommentList = async () => {
-    const { data } = await getCommentListAPI()
+    const { data } = await getCommentListAPI("list")
     setCommentList(data as Comment[])
   }
 
@@ -75,13 +78,15 @@ const DropdownMessage = () => {
 
             <ul className="flex h-auto flex-col overflow-y-auto">
               {commentList.map(item => (
-                <li>
+                <li key={item.id}>
                   <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" />
+                      {
+                        item.avatar ? <img src={item.avatar} alt="User" /> : <RandomAvatar />
+                      }
                     </div>
 
                     <div>
@@ -90,7 +95,7 @@ const DropdownMessage = () => {
                       </h6>
 
                       <p className="text-sm">{item.content}</p>
-                      <p className="text-xs">{item.createTime}</p>
+                      <p className="text-xs">{dayjs(+item.createTime).format("YYYY-MM-DD HH:mm:ss")}</p>
                     </div>
                   </Link>
                 </li>

src/components/Header/index.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import DropdownMessage from './DropdownMessage';
+import DropdownMessage from './DropdownComment';
 import DropdownNotification from './DropdownNotification';
 import DropdownUser from './DropdownUser';
 import LogoIcon from '../../images/logo/logo-icon.svg';

src/components/RandomAvatar/index.tsx

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { createAvatar } from '@dicebear/core';
+
+// 使用指定风格头像
+import { croodles } from '@dicebear/collection';
+
+export default () => {
+    const avatar = useMemo(() => {
+        // 生成一个随机种子
+        const seed = Math.random().toString(36).substring(2, 15);
+
+        // 创建头像
+        return createAvatar(croodles, {
+            seed: seed, // 使用随机种子
+            size: 128,
+            // 其他选项
+        }).toDataUri();
+    }, []);
+
+    return <img src={avatar} alt="Avatar" />
+}