feat: login页面增加header&header增加退出登录功能

src/components/MessageModal/MessageModal.tsx

@@ -193,9 +193,9 @@ const MessageModal: React.FC<MessageModalProps> = ({
                             <div className="font-bold">病例时效提醒</div>
                           </div>
                           <div className="text-gray-500 text-xs">
-                            {dayjs(message.push_time).format(
-                              "YYYY-MM-DD HH:mm:ss"
-                            )}
+                            {dayjs(
+                              message.push_time || message.created_at
+                            ).format("YYYY-MM-DD HH:mm:ss")}
                           </div>
                         </div>
                         <div className="flex items-start space-x-4">

src/layouts/Header/index.tsx

@@ -1,24 +1,28 @@
 import { useEffect, useState } from "react";
-import { Bell, Expand, Minus, Shrink, Square, X } from "lucide-react";
+import { Bell, Expand, LogOut, Minus, Shrink, Square, X } from "lucide-react";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
 
 import "./index.scss";
 import MessageModal from "@/components/MessageModal/MessageModal";
 import { useNotificationStore } from "@/store/NotificationStore";
-import { MESSAGE_STATUS } from "@/constants";
+import { MESSAGE_STATUS, STORAGE_UID } from "@/constants";
 import { renderNoticeLength } from "@/utils/utils";
+import storage from "@/utils/storage";
 
 interface optType {
   maxStatus?: string; // 最大化
 }
 
 // 顶部栏
-const LayoutHeader = (props) => {
+const LayoutHeader = ({ isLoginPage }: { isLoginPage: boolean }) => {
   const [opt, setOpt] = useState<optType>({});
   const [messageModalVisible, setMessageModalVisible] = useState(false);
   const { notifications, changeNotification } = useNotificationStore();
   const [winWidth, setWinWidth] = useState(0);
   const [scaleFactor, setScaleFactor] = useState(1);
+  const navigate = useNavigate();
+  const uid = storage.getItem(STORAGE_UID);
 
   const unreadNotifications = notifications.filter(
     (notification) => notification.is_read === MESSAGE_STATUS.UNREAD
@@ -31,13 +35,14 @@ const LayoutHeader = (props) => {
   };
 
   const fetchNoticeList = async (id?: number, isRead?: number) => {
-    const baseUrl = import.meta.env.MODE === 'development' 
-      ? '/notification' 
-      : import.meta.env.VITE_NOTIFICATION_URL;
-    
+    const baseUrl =
+      import.meta.env.MODE === "development"
+        ? "/notification"
+        : import.meta.env.VITE_NOTIFICATION_URL;
+
     const res = await axios.get(
       `${baseUrl}/bazb/getMsgList${id ? `?msgId=${id}` : ""}${
-        isRead !== undefined ? `${id ? '&' : '?'}isRead=${isRead}` : ""
+        isRead !== undefined ? `${id ? "&" : "?"}isRead=${isRead}` : ""
       }`
     );
     if (res?.data?.data?.list?.data) {
@@ -98,17 +103,20 @@ const LayoutHeader = (props) => {
       <div className="flex">
         <div className="flex-1 h-full"></div>
         <div className="flex items-center py-2 no-drag">
-          <div
-            onClick={() => setMessageModalVisible(true)}
-            className="relative cursor-pointer p-2 hover:bg-gray-100 rounded-lg"
-          >
-            <Bell className="text-gray-600 hover:bg-gray-5002" size={16} />
-            {!!unreadNotifications.length && (
-              <span className="absolute top-0 right-0 w-4 h-4 flex justify-center items-center text-xs bg-red-500 text-white rounded-full">
-                {renderNoticeLength(unreadNotifications)}
-              </span>
-            )}
-          </div>
+          {uid && (
+            <div
+              onClick={() => setMessageModalVisible(true)}
+              className="relative cursor-pointer p-2 hover:bg-gray-100 rounded-lg"
+            >
+              <Bell className="text-gray-600 hover:bg-gray-5002" size={16} />
+              {!!unreadNotifications.length && (
+                <span className="absolute top-0 right-0 w-4 h-4 flex justify-center items-center text-xs bg-red-500 text-white rounded-full">
+                  {renderNoticeLength(unreadNotifications)}
+                </span>
+              )}
+            </div>
+          )}
+
           <div
             className="cursor-pointer p-2 hover:bg-gray-100 rounded-lg"
             onClick={(event) => handleTitleClick(event, "middle")}
@@ -137,6 +145,17 @@ const LayoutHeader = (props) => {
           >
             <X className="cursor-pointer text-gray-600" size={16} />
           </div>
+          {!isLoginPage && (
+            <div
+              className="cursor-pointer p-2 hover:bg-gray-100 rounded-lg"
+              onClick={() => {
+                storage.clearItem(STORAGE_UID);
+                navigate("/login");
+              }}
+            >
+              <LogOut className="cursor-pointer text-gray-600" size={16} />
+            </div>
+          )}
         </div>
       </div>
       <MessageModal

src/router/beforeEnter.tsx

@@ -70,7 +70,7 @@ const BeforeEnter = ({ routers }) => {
 
   return (
     <div className="h-full">
-      {showHeader && <LayoutHeader />}
+      <LayoutHeader isLoginPage={findRoute?.path === "/login"} />
       <div className="h-[calc(100vh-2.5rem)]">{router}</div>
     </div>
   );