| | |
| | | import { outLogin } from '@/services/ant-design-pro/api'; |
| | | import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons'; |
| | | import { useEmotionCss } from '@ant-design/use-emotion-css'; |
| | | import { history, useModel } from '@umijs/max'; |
| | | import { Spin } from 'antd'; |
| | | import { stringify } from 'querystring'; |
| | | import type { MenuInfo } from 'rc-menu/lib/interface'; |
| | | import React, { useCallback } from 'react'; |
| | | import { outLogin } from './service'; |
| | | import { LogoutOutlined } from '@ant-design/icons'; |
| | | import { useModel } from '@umijs/max'; |
| | | import React from 'react'; |
| | | import { flushSync } from 'react-dom'; |
| | | import HeaderDropdown from '../HeaderDropdown'; |
| | | import './style.less'; |
| | | |
| | | export type GlobalHeaderRightProps = { |
| | | menu?: boolean; |
| | |
| | | }; |
| | | |
| | | export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, children }) => { |
| | | /** |
| | | * 退出登录,并且将当前的 url 保存 |
| | | */ |
| | | const loginOut = async () => { |
| | | // await outLogin(); |
| | | const { search, pathname } = window.location; |
| | | const urlParams = new URL(window.location.href).searchParams; |
| | | /** 此方法会跳转到 redirect 参数所在的位置 */ |
| | | const redirect = urlParams.get('redirect'); |
| | | // Note: There may be security issues, please note |
| | | if (window.location.pathname !== '/login' && !redirect) { |
| | | // history.replace({ |
| | | // pathname: '/login', |
| | | // search: stringify({ |
| | | // redirect: pathname + search, |
| | | // }), |
| | | // }); |
| | | } |
| | | }; |
| | | const actionClassName = useEmotionCss(({ token }) => { |
| | | return { |
| | | display: 'flex', |
| | | height: '48px', |
| | | marginLeft: 'auto', |
| | | overflow: 'hidden', |
| | | alignItems: 'center', |
| | | padding: '0 8px', |
| | | cursor: 'pointer', |
| | | borderRadius: token.borderRadius, |
| | | '&:hover': { |
| | | backgroundColor: token.colorBgTextHover, |
| | | }, |
| | | }; |
| | | }); |
| | | |
| | | const { initialState, setInitialState } = useModel('@@initialState'); |
| | | |
| | | const onMenuClick = useCallback( |
| | | (event: MenuInfo) => { |
| | | const { key } = event; |
| | | if (key === 'logout') { |
| | | |
| | | const onMenuClick = async () => { |
| | | await outLogin(); |
| | | localStorage.clear(); |
| | | flushSync(() => { |
| | | setInitialState((s) => ({ ...s, currentUser: undefined })); |
| | | }); |
| | | loginOut(); |
| | | return; |
| | | } |
| | | history.push(`/account/${key}`); |
| | | }, |
| | | [setInitialState], |
| | | ); |
| | | |
| | | const loading = ( |
| | | <span className={actionClassName}> |
| | | <Spin |
| | | size="small" |
| | | style={{ |
| | | marginLeft: 8, |
| | | marginRight: 8, |
| | | }} |
| | | /> |
| | | </span> |
| | | ); |
| | | |
| | | if (!initialState) { |
| | | return loading; |
| | | } |
| | | |
| | | const { currentUser } = initialState; |
| | | |
| | | if (!currentUser || !currentUser.userName) { |
| | | return loading; |
| | | } |
| | | |
| | | const menuItems = [ |
| | | ...(menu |
| | | ? [ |
| | | { |
| | | key: 'center', |
| | | icon: <UserOutlined />, |
| | | label: '个人中心', |
| | | }, |
| | | { |
| | | key: 'settings', |
| | | icon: <SettingOutlined />, |
| | | label: '个人设置', |
| | | }, |
| | | { |
| | | type: 'divider' as const, |
| | | }, |
| | | ] |
| | | : []), |
| | | { |
| | | key: 'logout', |
| | | icon: <LogoutOutlined />, |
| | | label: '退出登录', |
| | | }, |
| | | ]; |
| | | |
| | | return ( |
| | | <HeaderDropdown |
| | | menu={{ |
| | | selectedKeys: [], |
| | | onClick: onMenuClick, |
| | | items: menuItems, |
| | | }} |
| | | > |
| | | {children} |
| | | </HeaderDropdown> |
| | | ); |
| | | return <div style={{ display: 'flex', alignItems: 'center', color: '#000' }}> |
| | | <div className='unread' > |
| | | <div>未读提醒</div> |
| | | <div style={{ border: '1px solid red', borderRadius: '50%', width: '18px', lineHeight: '18px', marginLeft: '5px', textAlign: 'center', color: 'red' }}>1</div> |
| | | </div> |
| | | <div className="logoOut" onClick={onMenuClick}>退出登录<LogoutOutlined style={{ marginLeft: '5px' }} /></div> |
| | | </div> |
| | | }; |