diff --git a/src/assets/index.scss b/src/assets/index.scss index 4fad8d0..cafd4f3 100644 --- a/src/assets/index.scss +++ b/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; diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 79de615..ba6b990 100644 --- a/src/components/icons/index.tsx +++ b/src/components/icons/index.tsx @@ -92,7 +92,7 @@ export const IconAddText = ({style, className}: IconProps) => ( export const IconVideo = ({style, className}: IconProps) => ( + width="1em" height="1em" viewBox="0 0 21 20" version="1.1"> ) diff --git a/src/routes/layout/dashboard-layout.tsx b/src/routes/layout/dashboard-layout.tsx index 41648b0..69979fb 100644 --- a/src/routes/layout/dashboard-layout.tsx +++ b/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:
{ - // navigate('/history') - // }}>视频库
, - // }, { - key: 'logout', - label:
{ - logout().then(() => navigate('/user')) - }}>退出
, + key: 'profile', + label:
navigate('/history')}> + + 视频库 +
, }, + // { + // key: 'logout', + // label:
退出
, + // }, ]; const UserButton = () => (
@@ -41,9 +44,31 @@ const NavigationUserContainer = () => { 登录 )}
) - return (
- {user ? + {user ? ( +
+
+
+
+
{user?.nickname}
+
ID: {user?.id}
+
+
+ +
+ {menu} +
+ +
+
退出登录
+
+
+ + )} + >
: }
)