移动退出登录位置

src/layouts/defaultProps.tsx

@@ -80,4 +80,5 @@ export default {
   contentWidth: 'Fixed',
   splitMenus: false,
   logo: '/images/qinglong.png',
+  siderWidth: 180,
 } as any;

src/layouts/index.less

@@ -9,13 +9,6 @@
     url('../assets/fonts/SourceCodePro-Regular.ttf') format('truetype');
 }
 
-// body {
-//   height: 100%;
-//   overflow-y: hidden;
-//   // background-color: rgb(248, 248, 248);
-//   width: 100% !important;
-// }
-
 .log-modal {
   .ant-modal {
     padding-bottom: 0 !important;
@@ -129,7 +122,7 @@
   .ant-pro-grid-content.wide {
     flex: 1;
     .ant-pro-grid-content-children {
-      height: calc(100% - 48px);
+      height: calc(100% - 36px);
       > div,
       .log-container,
       .react-codemirror2,
@@ -159,8 +152,8 @@
 
 .ant-layout-content.ant-pro-basicLayout-content.ant-pro-basicLayout-has-header {
   margin-bottom: 0 !important;
-  min-height: calc(100vh - 72px);
-  min-height: calc(100vh - var(--vh-offset, 0px) - 72px);
+  min-height: calc(100vh - 66px);
+  min-height: calc(100vh - var(--vh-offset, 0px) - 66px);
 }
 
 .Resizer {
@@ -252,3 +245,40 @@
     opacity: 0.5 !important;
   }
 }
+
+.ant-pro-page-container-children-content {
+  margin: 18px 18px 18px;
+}
+
+.ant-pro-basicLayout-content {
+  margin: 18px;
+  .ant-pro-page-container {
+    margin: -18px -18px -18px;
+  }
+}
+
+.ant-menu-item.ant-pro-sider-collapsed-button {
+  margin: 0;
+}
+
+.side-menu-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.85);
+
+  .side-menu-collapse-button:hover {
+    color: #1890ff;
+  }
+
+  .side-menu-user-wrapper {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.side-menu-user-drop-menu {
+  .ant-dropdown-menu-item:hover {
+    color: #1890ff;
+  }
+}

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) => {

src/utils/index.ts

@@ -182,7 +182,7 @@ export function getTableScroll({
 }: { extraHeight?: number; id?: string } = {}) {
   if (typeof extraHeight == 'undefined') {
     //  47 + 40 + 10 + 24
-    extraHeight = 127;
+    extraHeight = 121;
   }
   let tHeader = null;
   if (id) {