AvatarDropdown.tsx 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import React, { useCallback } from 'react';
  2. import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
  3. import { Avatar, Menu, Spin } from 'antd';
  4. import { history, useModel } from 'umi';
  5. import { outLogin } from '@/services/login';
  6. import { stringify } from 'querystring';
  7. import HeaderDropdown from '../HeaderDropdown';
  8. import styles from './index.less';
  9. export interface GlobalHeaderRightProps {
  10. menu?: boolean;
  11. }
  12. /**
  13. * 退出登录,并且将当前的 url 保存
  14. */
  15. const loginOut = async () => {
  16. await outLogin();
  17. const { query, pathname } = history.location;
  18. const { redirect } = query;
  19. // Note: There may be security issues, please note
  20. if (window.location.pathname !== '/user/login' && !redirect) {
  21. history.replace({
  22. pathname: '/user/login',
  23. search: stringify({
  24. redirect: pathname,
  25. }),
  26. });
  27. }
  28. };
  29. const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
  30. const { initialState, setInitialState } = useModel('@@initialState');
  31. const onMenuClick = useCallback(
  32. (event: {
  33. key: React.Key;
  34. keyPath: React.Key[];
  35. item: React.ReactInstance;
  36. domEvent: React.MouseEvent<HTMLElement>;
  37. }) => {
  38. const { key } = event;
  39. if (key === 'logout' && initialState) {
  40. setInitialState({ ...initialState, currentUser: undefined });
  41. loginOut();
  42. return;
  43. }
  44. history.push(`/account/${key}`);
  45. },
  46. [],
  47. );
  48. const loading = (
  49. <span className={`${styles.action} ${styles.account}`}>
  50. <Spin
  51. size="small"
  52. style={{
  53. marginLeft: 8,
  54. marginRight: 8,
  55. }}
  56. />
  57. </span>
  58. );
  59. if (!initialState) {
  60. return loading;
  61. }
  62. const { currentUser } = initialState;
  63. if (!currentUser || !currentUser.name) {
  64. return loading;
  65. }
  66. const menuHeaderDropdown = (
  67. <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
  68. {menu && (
  69. <Menu.Item key="center">
  70. <UserOutlined />
  71. 个人中心
  72. </Menu.Item>
  73. )}
  74. {menu && (
  75. <Menu.Item key="settings">
  76. <SettingOutlined />
  77. 个人设置
  78. </Menu.Item>
  79. )}
  80. {menu && <Menu.Divider />}
  81. <Menu.Item key="logout">
  82. <LogoutOutlined />
  83. 退出登录
  84. </Menu.Item>
  85. </Menu>
  86. );
  87. return (
  88. <HeaderDropdown overlay={menuHeaderDropdown}>
  89. <span className={`${styles.action} ${styles.account}`}>
  90. <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
  91. <span className={`${styles.name} anticon`}>{currentUser.name}</span>
  92. </span>
  93. </HeaderDropdown>
  94. );
  95. };
  96. export default AvatarDropdown;