最外层页面基础布局调整

src/pages/nav_system_content/SystemContentList.js

@@ -3,6 +3,10 @@ import { history, Outlet, useLocation, matchRoutes } from '@umijs/max'
 import { Menu, Tabs } from 'antd'
 import './SystemContentList.less'
 import { formatRoute, getDefaultRoute } from '@/utils/routeUtils'
+import styles from './TopNavBar.less'
+import { Row, Col, Avatar, Dropdown, Button } from 'antd'
+import { userInfo } from '@/utils/globalCommon'
+import { HomeOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons'
 
 const SystemContentList = (props) => {
     const dynamicRoute = window.dynamicRoute
@@ -50,6 +54,27 @@ const SystemContentList = (props) => {
         history.replace(curKey)
     }
 
+    const handleMenuClick = (e) => {
+        switch (e.key) {
+            case 'logout':
+                loginOut()
+                break
+            default:
+                break
+        }
+    }
+
+    const dropDownMenuItems = [
+        {
+            label: <><LogoutOutlined style={{ marginRight: '8px' }} />退出登录</>,
+            key: 'logout'
+        }
+    ]
+
+    const dropDownMenu = () => (
+        <Menu items={dropDownMenuItems} onClick={handleMenuClick} selectedKeys={[]} className={styles.tabBarMenu} />
+    )
+
     return (
         <div className='pageContainer systemContent'>
             <div className='leftMenu'>
@@ -63,8 +88,34 @@ const SystemContentList = (props) => {
                 />
             </div>
 
-            <div className='rightContentMain'>
-                <Outlet />
+            <div className='rightContent'>
+                {/* <div style={{ width: '100%', backgroundColor: '#fff', marginBottom: '10px' }}> */}
+                <div className='tabBarHeader'>
+                    <Row className='tabBarRow'>
+                        {/* <Col xs={16} sm={16} md={16} lg={16} xl={16} className='tabBarLeft'>
+                            <img src={Logo} alt='logo' className='leftLogo' />
+
+                            <Menu mode='horizontal' className='leftMenu' selectedKeys={[activeKey]} items={menuItems} onClick={value => setRouteActive(value)} />
+                        </Col> */}
+
+                        <Col xs={8} sm={8} md={8} lg={8} xl={8} className='tabBarRight'>
+                            <Avatar className='tabBarRightAvaTor' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F31%2F20170731021444_2YUfe.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669779871&t=ec025ed48a1668dee9cfa0e803b6f787' />
+
+                            <span className='tabBarRightName'>{userInfo?.user_name_cn ? userInfo.user_name_cn : (userInfo?.user_name || '')}</span>
+
+                            <Dropdown dropdownRender={dropDownMenu}>
+                                <Button type='text' className='tabBarRightBtn'><SettingOutlined /></Button>
+                            </Dropdown>
+                        </Col>
+                    </Row>
+                </div>
+                {/* </div> */}
+                <div style={{ padding: '12px', height: '100%' }}>
+                    <div className='rightContentMain'>
+                        <Outlet />
+                    </div>
+                </div>
+
             </div>
         </div>
     )

src/pages/nav_system_content/SystemContentList.less

@@ -1,13 +1,70 @@
 .systemContent {
 	display: flex;
-	height: 100%;
-	justify-content: space-between;
+	height: 100vh;
+	// justify-content: space-between;
 	flex-wrap: nowrap;
-	padding: 12px;
+	// padding: 12px;
+
+	.tabBarHeader {
+		background-color: #fff;
+		padding: 0;
+		width: 100%;
+		// margin-bottom: 10px;
+
+		.tabBarRow {
+			padding: 0 12px;
+			justify-content: flex-end;
+
+			.tabBarLeft {
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: nowrap;
+				align-items: center;
+
+				.leftLogo {
+					width: 36px;
+					height: 36px;
+					margin: 0 12px;
+				}
+
+				.leftMenu {
+					width: calc(100% - 52px);
+				}
+			}
+
+			.tabBarRight {
+				text-align: right;
+				display: flex;
+				justify-content: flex-end;
+				flex-wrap: nowrap;
+				align-items: center;
+
+				.tabBarRightAvaTor {
+					margin-right: 20px;
+				}
+
+				.tabBarRightName {
+					margin-right: 5px;
+				}
+
+				.tabBarRightBtn {
+					height: 100%;
+				}
+			}
+		}
+	}
+
+	.rightContent {
+		width: calc(100% - 230px);
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		overflow: auto;
+	}
 
 	.leftMenu {
 		margin: 0;
-		width: 200px;
+		width: 230px;
 		background-color: #ffffff;
 		border-radius: 6px;
 		overflow-y: auto;
@@ -19,9 +76,11 @@
 	}
 
 	.rightContentMain {
-		width: calc(100% - 212px);
+		width: 100%;
 		background-color: #ffffff;
-		border-radius: 6px;
+		// border-radius: 6px;
 		overflow-y: auto;
+		// height: 100%;
+		overflow: auto;
 	}
 }

src/pages/nav_system_content/TopNavBar.less

@@ -0,0 +1,11 @@
+.layoutContainer {
+  height: 100%;
+  background-color: #f0f2f5;
+
+
+
+  .contentMain {
+    height: calc(100% - 46px);
+    overflow-y: hidden;
+  }
+}

src/pages/topnavbar/TopNavBar.js

@@ -122,7 +122,7 @@ const TopNavBar = (props) => {
 
   return (
     <div className={styles.layoutContainer}>
-      <div className={styles.tabBarHeader}>
+      {/* <div className={styles.tabBarHeader}>
         <Row className={styles.tabBarRow}>
           <Col xs={16} sm={16} md={16} lg={16} xl={16} className={styles.tabBarLeft}>
             <img src={Logo} alt='logo' className={styles.leftLogo} />
@@ -140,11 +140,12 @@ const TopNavBar = (props) => {
             </Dropdown>
           </Col>
         </Row>
-      </div>
+      </div> */}
 
-      <div className={styles.contentMain}>
+      {/* <div className={styles.contentMain}>
         <Outlet />
-      </div>
+      </div> */}
+      <Outlet />
     </div>
   )
 }