first commit

webapp/packages/supersonic-fe/src/components/RightContent/AvatarDropdown.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { LogoutOutlined } from '@ant-design/icons';
+import { Menu } from 'antd';
+import { useModel } from 'umi';
+import HeaderDropdown from '../HeaderDropdown';
+import styles from './index.less';
+import TMEAvatar from '../TMEAvatar';
+import cx from 'classnames';
+import { AUTH_TOKEN_KEY } from '@/common/constants';
+import { history } from 'umi';
+
+export type GlobalHeaderRightProps = {
+  menu?: boolean;
+  onClickLogin?: () => void;
+};
+
+/**
+ * 退出登录
+ * 并返回到首页
+ */
+const loginOut = async () => {
+  localStorage.removeItem(AUTH_TOKEN_KEY);
+  history.push('/login');
+  window.location.reload();
+};
+
+const { APP_TARGET } = process.env;
+
+const AvatarDropdown: React.FC<GlobalHeaderRightProps> = () => {
+  const { initialState = {}, setInitialState } = useModel('@@initialState');
+
+  const onMenuClick = (event: any) => {
+    const { key } = event;
+    if (key === 'logout' && initialState) {
+      loginOut().then(() => {
+        setInitialState({ ...initialState, currentUser: undefined });
+      });
+      return;
+    }
+  };
+
+  const { currentUser = {} } = initialState as any;
+  console.log(currentUser, 'currentUser');
+  const menuHeaderDropdown = (
+    <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
+      <Menu.Item key="logout">
+        <LogoutOutlined />
+        退出登录
+      </Menu.Item>
+    </Menu>
+  );
+  return (
+    <HeaderDropdown overlay={menuHeaderDropdown} disabled={APP_TARGET === 'inner'}>
+      <span className={`${styles.action} ${styles.account}`}>
+        <TMEAvatar className={styles.avatar} size="small" staffName={currentUser.staffName} />
+        <span className={cx(styles.name, 'anticon')}>{currentUser.staffName}</span>
+      </span>
+    </HeaderDropdown>
+  );
+};
+
+export default AvatarDropdown;

webapp/packages/supersonic-fe/src/components/RightContent/index.less

@@ -0,0 +1,105 @@
+@import '~antd/es/style/themes/default.less';
+
+@pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+
+.menu {
+  :global(.anticon) {
+    margin-right: 8px;
+  }
+
+  :global(.ant-dropdown-menu-item) {
+    min-width: 160px;
+  }
+}
+
+.right {
+  display: flex;
+  float: right;
+  height: 48px;
+  margin-left: auto;
+  overflow: hidden;
+
+  .action {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 0 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    >span {
+      vertical-align: middle;
+    }
+
+    &:hover {
+      background: @pro-header-hover-bg;
+    }
+
+    &:global(.opened) {
+      background: @pro-header-hover-bg;
+    }
+  }
+
+  .search {
+    padding: 0 12px;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  .account {
+    .avatar {
+      margin-right: 8px;
+      color: @primary-color;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+}
+
+.dark {
+  .action {
+    .download {
+      display: flex;
+      align-items: center;
+    }
+
+    .menuName {
+      margin-left: 5px;
+      color: #fff;
+      font-size: 13px;
+    }
+
+    &:hover {
+      background: #296df3;
+    }
+
+    &:global(.opened) {
+      background: #252a3d;
+    }
+  }
+}
+
+.actionIcon {
+  font-size: 20px;
+}
+
+
+
+.tooltip {
+  padding-top: 0 !important;
+  font-size: 12px !important;
+
+  :global {
+    .ant-tooltip-arrow {
+      display: none;
+    }
+
+    .ant-tooltip-inner {
+      min-height: 0 !important;
+      padding: 3px 6px !important;
+    }
+  }
+}
+

webapp/packages/supersonic-fe/src/components/RightContent/index.tsx

@@ -0,0 +1,33 @@
+import { Space } from 'antd';
+import React from 'react';
+import { useModel } from 'umi';
+import Avatar from './AvatarDropdown';
+
+import styles from './index.less';
+import cx from 'classnames';
+
+export type SiderTheme = 'light' | 'dark';
+
+const GlobalHeaderRight: React.FC = () => {
+  const { initialState } = useModel('@@initialState');
+
+  if (!initialState || !initialState.settings) {
+    return null;
+  }
+
+  const { navTheme, layout } = initialState.settings;
+  let className = styles.right;
+
+  if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
+    className = cx(styles.right, styles.dark);
+  }
+
+  function handleLogin() {}
+
+  return (
+    <Space className={className}>
+      <Avatar onClickLogin={handleLogin} />
+    </Space>
+  );
+};
+export default GlobalHeaderRight;