From 17dbaa3290e14abbc3a8fc4a9998a75cc93e2074 Mon Sep 17 00:00:00 2001
From: zhiyu1998 <542716863@qq.com>
Date: Sat, 23 Nov 2024 22:11:22 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feat:=20=E5=A2=9E=E5=8A=A0=E4=B8=80?=
 =?UTF-8?q?=E4=B8=AA=F0=9F=90=94=E6=89=8B=E5=8A=A8=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/components/home/bot-item.jsx | 49 ++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/server/components/home/bot-item.jsx b/server/components/home/bot-item.jsx
index 6855f40..cb55d9b 100644
--- a/server/components/home/bot-item.jsx
+++ b/server/components/home/bot-item.jsx
@@ -4,40 +4,59 @@ import { BOT_INFO_URL } from "../../constants/api.js";
 export function BotItem() {
 
     const [user, setUser] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const fetchBotInfo = async () => {
+        setIsLoading(true);
+        try {
+            const response = await fetch(BOT_INFO_URL);
+            const data = await response.json();
+            setUser(data);
+        } catch (error) {
+            console.error("获取机器人信息失败:", error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
     useEffect(() => {
-        fetch(BOT_INFO_URL)
-            .then(response => {
-                return response.json();
-            })
-            .then(data => setUser(data))
+        fetchBotInfo();
     }, []);
 
     return (
         <div className="card bg-base-100 shadow-xl">
             <div className="card-body">
                 <h2 className="card-title">🐔状态</h2>
-                <div className="flex flex-row pt-5 justify-between items-center">
-                    <div className={ `avatar z-0 ${ user?.online ? "online" : "offline" }` }>
+                <div className="flex flex-col sm:flex-row pt-5 items-center sm:items-start gap-6 sm:gap-8">
+                    <div className={`avatar z-0 ${user?.online ? "online" : "offline"}`}>
                         <div className="w-24 rounded-full">
-                            <img src={ `http://q1.qlogo.cn/g?b=qq&nk=${ user?.user_id }&s=100` }/>
+                            <img src={`http://q1.qlogo.cn/g?b=qq&nk=${user?.user_id}&s=100`} alt="Bot Avatar" />
                         </div>
                     </div>
-                    <div className="flex flex-col ml-12 space-y-2">
+                    <div className="flex flex-col space-y-4 text-center sm:text-left">
                         <div className="space-y-2">
-                            <div className="font-bold">昵称：{ user?.nickname || "未获取" }</div>
-                            <div className="text-sm opacity-50">QQ号：{ user?.user_id || "NaN" }</div>
+                            <div className="font-bold">昵称：{user?.nickname || "未获取"}</div>
+                            <div className="text-sm opacity-50">QQ号：{user?.user_id || "NaN"}</div>
                         </div>
                         <div className="space-y-2">
                             <div className="font-bold">协议信息：</div>
-                            <div className="space-x-1">
-                                <div className="badge badge-ghost">{ user?.app_name }</div>
-                                <div className="badge badge-ghost">{ user?.app_version }</div>
-                                <div className="badge badge-ghost">{ user?.protocol_version }</div>
+                            <div className="flex flex-wrap justify-center sm:justify-start gap-2">
+                                <div className="badge badge-ghost">{user?.app_name}</div>
+                                <div className="badge badge-ghost">{user?.app_version}</div>
+                                <div className="badge badge-ghost">{user?.protocol_version}</div>
                             </div>
                         </div>
                     </div>
                 </div>
+                <div className="card-actions justify-end mt-4">
+                    <button
+                        className={`btn btn-sm btn-ghost ${isLoading ? 'loading' : ''}`}
+                        onClick={fetchBotInfo}
+                        disabled={isLoading}
+                    >
+                        {isLoading ? '刷新中...' : '刷新信息'}
+                    </button>
+                </div>
             </div>
         </div>
     )