update: 更新退出系统菜单

src/assets/index.scss

@@ -79,6 +79,39 @@ body {
     }
   }
 }
+.userinfo-drop-menu{
+  @apply drop-shadow bg-gray-50 pb-2 rounded px-4;
+  .user-profile{
+    @apply py-3;
+    .info{
+      min-width: 100px;
+    }
+    .user-avatar{
+      width: 36px;
+      height: 36px;
+    }
+  }
+  .menu-list-container{
+    .ant-dropdown-menu{
+      @apply shadow-none bg-transparent p-0 rounded-none;
+      .ant-dropdown-menu-item{
+        @apply hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded-none text-base py-2;
+      }
+      .nav-item{
+        @apply flex items-center;
+        .svg-icon{
+          transform: translateY(1px);
+        }
+        .nav-text{
+          @apply ml-2;
+        }
+      }
+    }
+  }
+  .logout{
+    @apply text-center py-2 hover:bg-gray-200 text-gray-600 hover:text-gray-800 cursor-pointer;
+  }
+}
 .news-detail-content-container{
   margin-right: -30px;
   padding-right: 30px;

src/components/icons/index.tsx

@@ -92,7 +92,7 @@ export const IconAddText = ({style, className}: IconProps) => (
 
 export const IconVideo = ({style, className}: IconProps) => (
 	<svg className={`svg-icon ${className || ''} icon-video`} style={style} xmlns="http://www.w3.org/2000/svg"
-	     width="1em" height="1em" viewBox="0 0 21 21" version="1.1">
+	     width="1em" height="1em" viewBox="0 0 21 20" version="1.1">
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M18 1.00268e-07C18.5046 -0.000159579 18.9906 0.190406 19.3605 0.533497C19.7305 0.876588 19.9572 1.34684 19.995 1.85L20 2V16C20.0002 16.5046 19.8096 16.9906 19.4665 17.3605C19.1234 17.7305 18.6532 17.9572 18.15 17.995L18 18H2C1.49542 18.0002 1.00943 17.8096 0.639452 17.4665C0.269471 17.1234 0.0428434 16.6532 0.00500021 16.15L1.00268e-07 16V2C-0.000159579 1.49542 0.190406 1.00943 0.533497 0.639452C0.876588 0.269471 1.34684 0.0428434 1.85 0.00500021L2 1.00268e-07H18ZM18 2H2V16H18V2ZM8.34 4.638L8.858 4.868L9.196 5.028L9.583 5.218L10.013 5.436L10.483 5.686L10.99 5.966L11.256 6.118L11.774 6.423L12.248 6.715L12.678 6.988L13.058 7.241L13.538 7.571L13.902 7.834L13.997 7.904C14.1513 8.01883 14.2767 8.16816 14.363 8.34005C14.4494 8.51194 14.4943 8.70164 14.4943 8.894C14.4943 9.08636 14.4494 9.27606 14.363 9.44795C14.2767 9.61984 14.1513 9.76917 13.997 9.884L13.674 10.119L13.234 10.427L12.878 10.666L12.473 10.929L12.02 11.212L11.521 11.512L10.987 11.821L10.478 12.103L10.007 12.353L9.577 12.573L9.191 12.761L8.569 13.049L8.339 13.149C8.16242 13.2251 7.97051 13.2589 7.77856 13.2476C7.58662 13.2364 7.39995 13.1805 7.23346 13.0843C7.06696 12.9881 6.92524 12.8544 6.8196 12.6937C6.71396 12.5331 6.64732 12.35 6.625 12.159L6.567 11.594L6.535 11.22L6.493 10.556L6.47 10.048L6.455 9.493L6.451 9.199L6.449 8.894C6.449 8.68733 6.451 8.48733 6.455 8.294L6.47 7.739L6.493 7.232L6.52 6.775L6.55 6.374L6.625 5.63C6.64719 5.43882 6.71376 5.25547 6.81939 5.09458C6.92502 4.93369 7.0668 4.79972 7.2334 4.70335C7.4 4.60698 7.58682 4.55089 7.77896 4.53954C7.97109 4.5282 8.16321 4.56191 8.34 4.638ZM8.951 7.139L8.515 6.921L8.486 7.408L8.464 7.959L8.451 8.569L8.449 8.894L8.451 9.219L8.464 9.828L8.474 10.111L8.5 10.631L8.515 10.866L8.949 10.648L9.436 10.392L9.971 10.098L10.255 9.936L10.806 9.61L11.3 9.304L11.736 9.024L11.932 8.894L11.525 8.624L11.059 8.33C10.7938 8.16584 10.5261 8.00582 10.256 7.85L9.973 7.689L9.439 7.395L8.951 7.139Z" fill="black"/>
 	</svg>
 )

src/routes/layout/dashboard-layout.tsx

@@ -1,5 +1,5 @@
 import {Outlet, useLocation, useNavigate} from "react-router-dom";
-import {Dropdown, MenuProps} from "antd";
+import {Divider, Dropdown, MenuProps} from "antd";
 import React, {useEffect} from "react";
 
 import AuthGuard from "@/routes/layout/auth-guard.tsx";
@@ -11,6 +11,7 @@ import {DashboardNavigation} from "@/routes/layout/dashboard-navigation.tsx";
 import useAuth from "@/hooks/useAuth.ts";
 import {hidePhone} from "@/util/strings.ts";
 import {defaultCache} from "@/hooks/useCache.ts";
+import {IconVideo} from "@/components/icons";
 
 
 type LayoutProps = {
@@ -20,19 +21,21 @@ type LayoutProps = {
 const NavigationUserContainer = () => {
 	const {logout, user} = useAuth()
 	const navigate = useNavigate()
+	const handleLogout = ()=>{
+		logout().then(() => navigate('/user'))
+	}
 	const items: MenuProps['items'] = [
-		// {
-		// 	key: 'profile',
-		// 	label: <div onClick={() => {
-		// 		navigate('/history')
-		// 	}}>视频库</div>,
-		// },
 		{
-			key: 'logout',
-			label: <div onClick={() => {
-				logout().then(() => navigate('/user'))
-			}}>退出</div>,
+			key: 'profile',
+			label: <div className="nav-item" onClick={() => navigate('/history')}>
+				<IconVideo />
+				<span className={"nav-text"}>视频库</span>
+			</div>,
 		},
+		// {
+		// 	key: 'logout',
+		// 	label: <div onClick={handleLogout}>退出</div>,
+		// },
 	];
 	const UserButton = () => (<div
 		className={`flex items-center rounded-3xl ${user ? 'bg-[#e3eeff]' : 'bg-primary-blue'} p-1 pr-2 cursor-pointer rounded`}>
@@ -41,9 +44,31 @@ const NavigationUserContainer = () => {
 			<span className="text-sm mx-2 text-white">登录</span>
 		)}
 	</div>)
-
 	return (<div className={"flex items-center justify-between gap-2 ml-10"}>
-		{user ? <Dropdown rootClassName={'z-[99999]'} menu={{items}} placement="bottom" arrow>
+		{user ? <Dropdown
+			rootClassName={'z-[999999] userinfo-drop-menu'}
+			menu={{items}} placement="bottomRight"
+			dropdownRender={(menu)=>(
+				<div>
+					<div className="user-profile flex gap-4">
+						<div className="avatar"><UserAvatar className="user-avatar"/></div>
+						<div className="info">
+							<div>{user?.nickname}</div>
+							<div>ID: {user?.id}</div>
+						</div>
+					</div>
+					<Divider style={{ margin: 0 }} />
+					<div className="menu-list-container">
+						{menu}
+					</div>
+					<Divider style={{ margin: 0 }} />
+					<div className="logout">
+						<div onClick={handleLogout}>退出登录</div>
+					</div>
+				</div>
+
+			)}
+		>
 			<div><UserButton/></div>
 		</Dropdown> : <UserButton/>}
 	</div>)