feat: 处理退出登录

src/auth/AuthContext.tsx

@@ -46,6 +46,8 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
 
   const logout = () => {
     setIsLoggedIn(false)
+    setToken('')
+    showToast('已退出', 'success')
   }
 
   const toggleLoginModal = () => {

src/layouts/MainLayout/MainLayout.tsx

 import type React from 'react'
 import { motion } from 'framer-motion'
-import { useToggle } from 'ahooks'
+import { useState } from 'react'
 import { Navbar } from '../Navbar'
 import { HistoryBar } from '../HistoryBar/HistoryBar'
 import styles from './MainLayout.module.less'
@@ -24,7 +24,7 @@ const contentVariants = {
 
 export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
   const { showLoginModal, toggleLoginModal } = useAuth()
-  const [isHistoryVisible, { toggle }] = useToggle()
+  const [isHistoryVisible, setHistoryVisible] = useState(false)
   return (
     <motion.main className={styles.layoutMain}>
       <motion.div
@@ -32,7 +32,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
         variants={contentVariants}
         className={`h-full pl-[12px] flex items-center ${isHistoryVisible ? 'w-[340px]' : 'w-[90px]'}`}
       >
-        <Navbar isCollapsed={isHistoryVisible} onToggle={toggle} />
+        <Navbar isHistoryVisible={isHistoryVisible} onSetHistoryVisible={setHistoryVisible} />
         <HistoryBar isVisible={isHistoryVisible} />
       </motion.div>
       <motion.div

src/layouts/Navbar/Navbar.tsx

 import type React from 'react'
 import { motion } from 'framer-motion'
-import { Button, Tooltip } from '@nextui-org/react'
 import styles from './Navbar.module.less'
 import { NavBarItem } from './components/NavBarItem'
-import UserIcon from '@/assets/svg/user.svg?react'
+import { User } from './components/User'
 import type { WithAuthProps } from '@/auth/withAuth'
 import { withAuth } from '@/auth/withAuth'
 import { NAV_BAR_ITEMS } from '@/config/nav'
 
 interface NavbarProps {
-  isCollapsed: boolean
-  onToggle: () => void
+  isHistoryVisible: boolean
+  onSetHistoryVisible: (visible: boolean) => void
 }
 
-const NavbarBase: React.FC<NavbarProps & WithAuthProps> = ({ showLoginTip, checkAuth, onToggle }) => {
+const NavbarBase: React.FC<NavbarProps & WithAuthProps> = ({ isHistoryVisible, checkAuth, onSetHistoryVisible }) => {
   const handleClick = (type: string | undefined) => {
     if (!checkAuth())
       return
 
     if (type === 'history') {
-      onToggle()
+      onSetHistoryVisible(!isHistoryVisible)
     }
   }
+  const handleLogout = () => {
+    onSetHistoryVisible(false)
+  }
 
   return (
     <motion.nav className="h-full flex-shrink-0 flex flex-col items-center justify-center">
@@ -31,11 +33,7 @@ const NavbarBase: React.FC<NavbarProps & WithAuthProps> = ({ showLoginTip, check
             <NavBarItem onClick={handleClick} icon={item.icon} label={item.label} key={item.key} type={item.key} />
           )
         })}
-        <Tooltip isOpen={showLoginTip} color="foreground" content="登录体验更多功能" placement="right">
-          <Button onClick={checkAuth} variant="light" isIconOnly aria-label="Like">
-            <UserIcon />
-          </Button>
-        </Tooltip>
+        <User onLogout={handleLogout} />
       </motion.div>
     </motion.nav>
   )

src/layouts/Navbar/components/User/index.tsx

+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Tooltip } from '@nextui-org/react'
+import { withAuth } from '@/auth/withAuth'
+import type { WithAuthProps } from '@/auth/withAuth'
+import UserIcon from '@/assets/svg/user.svg?react'
+import { useAuth } from '@/auth/AuthContext'
+
+interface UserProps {
+  onLogout: () => void
+}
+
+export const UserLogin: React.FC<UserProps> = ({ onLogout }) => {
+  const { logout } = useAuth()
+  const items = [
+    {
+      key: 'conact',
+      label: '联系我们',
+    },
+    {
+      key: 'file',
+      label: '相关协议',
+    },
+    {
+      key: 'logout',
+      label: '退出登录',
+    },
+  ]
+  const handleClick = (key: string) => {
+    if (key === 'logout') {
+      logout()
+      onLogout()
+    }
+  }
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button variant="light" isIconOnly aria-label="Like">
+          <UserIcon />
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu variant="flat" aria-label="Dynamic Actions" items={items}>
+        {item => (
+          <DropdownItem
+            onClick={() => handleClick(item.key)}
+            key={item.key}
+            color={item.key === 'logout' ? 'danger' : 'primary'}
+            className={item.key === 'logout' ? 'text-danger' : ''}
+          >
+            {item.label}
+          </DropdownItem>
+        )}
+      </DropdownMenu>
+    </Dropdown>
+
+  )
+}
+
+const UserNotLoginBase: React.FC<WithAuthProps> = ({ showLoginTip, checkAuth }) => {
+  return (
+    <Tooltip isOpen={showLoginTip} color="foreground" content="登录体验更多功能" placement="right">
+      <Button onClick={checkAuth} variant="light" isIconOnly aria-label="Like">
+        <UserIcon />
+      </Button>
+    </Tooltip>
+  )
+}
+export const UserNotLogin = withAuth(UserNotLoginBase)
+
+export const User: React.FC<UserProps> = ({ onLogout }) => {
+  const { isLoggedIn } = useAuth()
+  return isLoggedIn ? <UserLogin onLogout={onLogout} /> : <UserNotLogin />
+}