版本1

src/app/globals.css

@@ -35,3 +35,11 @@ body {
     scrollbar-width: none; /* Firefox */
   }
 }
+
+.ql-align-center {
+  text-align: center;
+}
+
+.ql-align-left {
+  text-align: left;
+}

src/app/page.js

@@ -21,6 +21,15 @@ export default function Home() {
     router.push("/personal-center");
   };
 
+  const handleLogout = () => {
+    // Clear the currentUser from state
+    setCurrentUser(null);
+    // Clear the currentUser from local storage
+    localStorage.removeItem("currentUser");
+    // Redirect to the home page
+    router.push("/");
+  };
+
   return (
     <div className="bg-blue-600 text-white min-h-screen">
       <header className="h-16 fixed top-0 left-0 right-0 bg-[#ea1c24] shadow-md z-10 transition-all duration-300">
@@ -36,31 +45,39 @@ export default function Home() {
             </div>
 
             {currentUser ? (
-              <div
-                className="flex items-center cursor-pointer"
-                onClick={handlePersonalCenterClick}
-              >
-                {currentUser.avatar ? (
-                  <Image
-                    src={currentUser.avatar}
-                    alt="User Avatar"
-                    width={28}
-                    height={28}
-                    className="rounded-full mr-2"
-                  />
-                ) : (
-                  <div className="w-7 h-7  mr-2">
+              <div className="flex items-center">
+                <div
+                  className="flex items-center cursor-pointer mr-4"
+                  onClick={handlePersonalCenterClick}
+                >
+                  {currentUser.avatar ? (
                     <Image
-                      src="/images/cluo.webp"
+                      src={currentUser.avatar}
                       alt="User Avatar"
                       width={28}
                       height={28}
                       className="rounded-full mr-2"
                     />
-                  </div>
-                )}
-                <span className="text-sm font-bold">
-                  {currentUser.username}
+                  ) : (
+                    <div className="w-7 h-7 mr-2">
+                      <Image
+                        src="/images/cluo.webp"
+                        alt="User Avatar"
+                        width={28}
+                        height={28}
+                        className="rounded-full"
+                      />
+                    </div>
+                  )}
+                  <span className="text-sm font-bold">
+                    {currentUser.username}
+                  </span>
+                </div>
+                <span
+                  className="text-sm font-bold cursor-pointer hover:text-gray-200"
+                  onClick={handleLogout}
+                >
+                  退出登录
                 </span>
               </div>
             ) : (

src/app/ui/components/ActivityModal.jsx

@@ -45,23 +45,60 @@ const ActivityModal = () => {
   if (!isOpen || !activityContent || isLoading) return null;
 
   return (
+    // <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    //   <div className="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
+    //     <div className="flex flex-col items-center mb-4 relative w-full">
+    //       <div
+    //         className="text-xl font-bold text-black w-full"
+    //         dangerouslySetInnerHTML={{ __html: activityContent.title }}
+    //       ></div>
+    //       <button
+    //         onClick={() => setIsOpen(false)}
+    //         className="text-gray-500 hover:text-gray-700 absolute right-0 top-0"
+    //       >
+    //         <X size={24} />
+    //       </button>
+    //     </div>
+    //     <div
+    //       className="text-gray-700"
+    //       dangerouslySetInnerHTML={{ __html: activityContent.content }}
+    //     />
+    //   </div>
+    // </div>
+
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
-        <div className="flex justify-between items-center mb-4">
-          <h2 className="text-xl font-bold text-blue-600">
-            {activityContent.title}
-          </h2>
-          <button
-            onClick={() => setIsOpen(false)}
-            className="text-gray-500 hover:text-gray-700"
-          >
-            <X size={24} />
-          </button>
-        </div>
+      <div className="relative">
+        <button
+          onClick={() => setIsOpen(false)}
+          className="absolute -top-16 right-3 text-white hover:text-gray-300 z-20 p-2 rounded-full bg-gray-500  hover:bg-opacity-70 transition-all duration-300"
+        >
+          <X size={24} />
+        </button>
+
         <div
-          className="text-gray-700"
-          dangerouslySetInnerHTML={{ __html: activityContent.content }}
-        />
+          className="bg-cover bg-center rounded-lg px-6 pt-20 max-w-sm w-full mx-4 overflow-hidden"
+          style={{
+            backgroundImage: "url('/images/ad_bg.jpg')",
+            maxHeight: "80vh",
+            height: "50vh",
+            width: "80vw",
+            backgroundPosition: "top center",
+          }}
+        >
+          <div className="relative z-10 text-white">
+            <div className="flex flex-col items-center mb-4 relative w-full">
+              <div
+                className="text-2xl font-bold w-full text-center"
+                dangerouslySetInnerHTML={{ __html: activityContent.title }}
+              ></div>
+            </div>
+            <div
+              className="overflow-y-auto"
+              style={{ maxHeight: "calc(50vh - 100px)" }}
+              dangerouslySetInnerHTML={{ __html: activityContent.content }}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );