124 lines
3.2 KiB
TypeScript
124 lines
3.2 KiB
TypeScript
import React, { useState, useCallback } from 'react';
|
|
import { LogoutOutlined, SettingOutlined, UserOutlined, EditOutlined } from '@ant-design/icons';
|
|
import { Avatar, Menu, Spin } from 'antd';
|
|
import { history } from 'umi';
|
|
import { stringify } from 'querystring';
|
|
import HeaderDropdown from '../HeaderDropdown';
|
|
import styles from './index.less';
|
|
import type { MenuInfo } from 'rc-menu/lib/interface';
|
|
import RoutePath from '@/routes/routePath';
|
|
import { CACHE_TOKEN } from '@/constants/cacheKey';
|
|
import ModifyPasswordModal from '@/components/ModifyPassword/ModifyPasswordModal';
|
|
|
|
export type GlobalHeaderRightProps = {
|
|
menu?: boolean;
|
|
};
|
|
|
|
/**
|
|
* 退出登录，并且将当前的 url 保存
|
|
*/
|
|
const loginOut = async () => {
|
|
const { query = {}, search, pathname } = history.location;
|
|
const { redirect } = query;
|
|
// Note: There may be security issues, please note
|
|
if (window.location.pathname !== RoutePath.LOGIN && !redirect) {
|
|
localStorage.removeItem(CACHE_TOKEN);
|
|
history.replace({
|
|
pathname: RoutePath.LOGIN,
|
|
search: stringify({
|
|
redirect: pathname + search,
|
|
}),
|
|
});
|
|
}
|
|
};
|
|
|
|
const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
|
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
|
|
|
const modifyPassword = async () => {
|
|
setIsModalVisible(true);
|
|
};
|
|
|
|
const onMenuClick = useCallback((event: MenuInfo) => {
|
|
const { key } = event;
|
|
if (key === 'modify') {
|
|
modifyPassword();
|
|
return;
|
|
}
|
|
if (key === 'logout') {
|
|
loginOut();
|
|
return;
|
|
}
|
|
history.push(`/account/${key}`);
|
|
}, []);
|
|
|
|
const loading = (
|
|
<span className={`${styles.action} ${styles.account}`}>
|
|
<Spin
|
|
size="small"
|
|
style={{
|
|
marginLeft: 8,
|
|
marginRight: 8,
|
|
}}
|
|
/>
|
|
</span>
|
|
);
|
|
|
|
const currentUser = {
|
|
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
|
|
name: 'admin',
|
|
};
|
|
|
|
if (!currentUser || !currentUser.name) {
|
|
return loading;
|
|
}
|
|
|
|
const menuHeaderDropdown = (
|
|
<Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
|
|
{menu && (
|
|
<Menu.Item key="center">
|
|
<UserOutlined />
|
|
个人中心
|
|
</Menu.Item>
|
|
)}
|
|
{menu && (
|
|
<Menu.Item key="settings">
|
|
<SettingOutlined />
|
|
个人设置
|
|
</Menu.Item>
|
|
)}
|
|
{menu && <Menu.Divider />}
|
|
<Menu.Item key="modify">
|
|
<EditOutlined />
|
|
修改密码
|
|
</Menu.Item>
|
|
<Menu.Item key="logout">
|
|
<LogoutOutlined />
|
|
退出登录
|
|
</Menu.Item>
|
|
</Menu>
|
|
);
|
|
return (
|
|
<div>
|
|
<HeaderDropdown overlay={menuHeaderDropdown}>
|
|
<span className={`${styles.action} ${styles.account}`}>
|
|
<Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
|
|
<span className={`${styles.name} anticon`}>{currentUser.name}</span>
|
|
</span>
|
|
</HeaderDropdown>
|
|
<ModifyPasswordModal
|
|
visible={isModalVisible}
|
|
onCancel={function () {
|
|
setIsModalVisible(false);
|
|
}}
|
|
onOk={function () {
|
|
console.log('onOk');
|
|
setIsModalVisible(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AvatarDropdown;
|