142 lines
3.3 KiB
TypeScript
142 lines
3.3 KiB
TypeScript
import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
|
|
import { history, useModel } from '@umijs/max';
|
|
import { Spin } from 'antd';
|
|
import { createStyles } from 'antd-style';
|
|
import { stringify } from 'querystring';
|
|
import type { MenuInfo } from 'rc-menu/lib/interface';
|
|
import React, { useCallback } from 'react';
|
|
import { flushSync } from 'react-dom';
|
|
import HeaderDropdown from '../HeaderDropdown';
|
|
import { userLogoutUsingPost } from '@/services/hebi/userController';
|
|
|
|
export type GlobalHeaderRightProps = {
|
|
menu?: boolean;
|
|
children?: React.ReactNode;
|
|
};
|
|
|
|
export const AvatarName = () => {
|
|
const { initialState } = useModel('@@initialState');
|
|
const { currentUser } = initialState || {};
|
|
return <span className="anticon">{currentUser?.userName}</span>;
|
|
};
|
|
|
|
const useStyles = createStyles(({ token }) => {
|
|
return {
|
|
action: {
|
|
display: 'flex',
|
|
height: '48px',
|
|
marginLeft: 'auto',
|
|
overflow: 'hidden',
|
|
alignItems: 'center',
|
|
padding: '0 8px',
|
|
cursor: 'pointer',
|
|
borderRadius: token.borderRadius,
|
|
'&:hover': {
|
|
backgroundColor: token.colorBgTextHover,
|
|
},
|
|
},
|
|
};
|
|
});
|
|
|
|
export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu,initState, children }) => {
|
|
|
|
/**
|
|
* 退出登录，并且将当前的 url 保存
|
|
*/
|
|
const loginOut = async () => {
|
|
await userLogoutUsingPost();
|
|
const { search, pathname } = window.location;
|
|
const urlParams = new URL(window.location.href).searchParams;
|
|
/** redirect */
|
|
const redirect = urlParams.get('redirect');
|
|
if (window.location.pathname !== '/user/login' && !redirect) {
|
|
history.replace({
|
|
pathname: '/user/login',
|
|
search: stringify({
|
|
redirect: pathname + search,
|
|
}),
|
|
});
|
|
}
|
|
};
|
|
const { styles } = useStyles();
|
|
|
|
const { initialState, setInitialState } = useModel('@@initialState');
|
|
|
|
const onMenuClick = useCallback(
|
|
(event: MenuInfo) => {
|
|
const { key } = event;
|
|
if (key === 'logout') {
|
|
flushSync(() => {
|
|
setInitialState((s) => ({ ...s, currentUser: undefined }));
|
|
});
|
|
loginOut();
|
|
return;
|
|
}
|
|
history.push(`/account/${key}`);
|
|
},
|
|
[setInitialState],
|
|
);
|
|
|
|
|
|
const loading = (
|
|
<span className={styles.action}>
|
|
<Spin
|
|
size="small"
|
|
style={{
|
|
marginLeft: 8,
|
|
marginRight: 8,
|
|
}}
|
|
/>
|
|
</span>
|
|
);
|
|
|
|
// if (!initialState) {
|
|
// return loading;
|
|
// }
|
|
|
|
const { currentUser } = initState;
|
|
|
|
console.log('currentUser:',currentUser,initState)
|
|
|
|
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>
|
|
);
|
|
};
|