移动退出登录位置

src/layouts/index.tsx

@@ -8,14 +8,19 @@ import {
 } from 'darkreader';
 import defaultProps from './defaultProps';
 import { Link, history } from 'umi';
-import { LogoutOutlined } from '@ant-design/icons';
+import {
+  LogoutOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
 import config from '@/utils/config';
 import { request } from '@/utils/http';
 import './index.less';
 import vhCheck from 'vh-check';
 import { version, changeLogLink, changeLog } from '../version';
 import { useCtx, useTheme } from '@/utils/hooks';
-import { message, Badge, Modal } from 'antd';
+import { message, Badge, Modal, Avatar, Dropdown, Menu, Popover } from 'antd';
 // @ts-ignore
 import SockJS from 'sockjs-client';
 
@@ -27,6 +32,7 @@ export default function (props: any) {
   const [systemInfo, setSystemInfo] = useState<{ isInitialized: boolean }>();
   const ws = useRef<any>(null);
   const [socketMessage, setSocketMessage] = useState<any>();
+  const [collapsed, setCollapsed] = useState(false);
 
   const logout = () => {
     request.post(`${config.apiPrefix}logout`).then(() => {
@@ -184,6 +190,14 @@ export default function (props: any) {
     !navigator.userAgent.includes('Chrome');
   const isQQBrowser = navigator.userAgent.includes('QQBrowser');
 
+  const menu = (
+    <Menu className="side-menu-user-drop-menu">
+      <Menu.Item key="1" icon={<LogoutOutlined />} onClick={logout}>
+        退出登录
+      </Menu.Item>
+    </Menu>
+  );
+
   return loading ? (
     <PageLoading />
   ) : (
@@ -192,7 +206,7 @@ export default function (props: any) {
       loading={loading}
       title={
         <>
-          控制面板
+          <span style={{ fontSize: 16 }}>控制面板</span>
           <a
             href={changeLogLink}
             target="_blank"
@@ -225,23 +239,46 @@ export default function (props: any) {
         }
         return <Link to={menuItemProps.path}>{defaultDom}</Link>;
       }}
-      postMenuData={(menuData) => {
-        return [
-          ...(menuData || []),
-          {
-            icon: <LogoutOutlined />,
-            name: '退出登录',
-            path: 'logout',
-            onTitleClick: () => logout(),
-          },
-        ];
-      }}
       pageTitleRender={(props, pageName, info) => {
         if (info && typeof info.pageName === 'string') {
           return `${info.pageName} - 控制面板`;
         }
         return '控制面板';
       }}
+      onCollapse={setCollapsed}
+      collapsed={collapsed}
+      rightContentRender={() => (
+        <Dropdown overlay={menu} trigger={['click']}>
+          <span className="side-menu-user-wrapper">
+            <Avatar shape="square" size="small" icon={<UserOutlined />} />
+            <span style={{ marginLeft: 5 }}>admin</span>
+          </span>
+        </Dropdown>
+      )}
+      collapsedButtonRender={(collapsed) => (
+        <span
+          className="side-menu-container"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        >
+          {!collapsed && (
+            <Dropdown overlay={menu} trigger={['hover']}>
+              <span className="side-menu-user-wrapper">
+                <Avatar shape="square" size="small" icon={<UserOutlined />} />
+                <span style={{ marginLeft: 5 }}>admin</span>
+              </span>
+            </Dropdown>
+          )}
+          <span
+            className="side-menu-collapse-button"
+            onClick={() => setCollapsed(!collapsed)}
+          >
+            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+          </span>
+        </span>
+      )}
       {...defaultProps}
     >
       {React.Children.map(props.children, (child) => {