导航栏

web/client/src/index.less

@@ -67,3 +67,7 @@ body {
 .semi-portal-inner {
    position: fixed;
 }
+@font-face {
+    font-family: 'icomoon';//这个可以任意取，但是应与后面相对应eg：yxingguang
+    src:  url('../fonts/YouSheBiaoTiHei-2.ttf');
+  }

web/client/src/layout/components/header/index.jsx

@@ -22,7 +22,7 @@ const Header = (props) => {
                     }
                 }}
                 style={{
-                    height: 60,
+                    height: 48,
                     minWidth: 520,
                     background: '#1D2343',
                     backgroundSize: "100% 100%",
@@ -32,10 +32,12 @@ const Header = (props) => {
                     logo: (
                         <img
                             src="/assets/images/background/logo.png"
-                            style={{ display: "inline-block", width: 280, height: 52 }}
+                            style={{ display: "inline-block", width: 280, height: 40 }}
                         />
                     ),
-                    text: "",
+                    // text: (
+                    //     <div style={{fontFamily: "icomoon",color:'#FFFFFF'}}>运维管理系统</div>
+                    // ),
                 }}
                 footer={
                     <>
@@ -70,18 +72,6 @@ const Header = (props) => {
                                     color: "white",
                                 }}
                             >
-                                <img
-                                    src="/assets/images/background/notice.png"
-                                    style={{
-                                        display: "inline-block",
-                                        width: 18,
-                                        height: 18,
-                                        position: "relative",
-                                        top: 6,
-                                        left: -10,
-                                    }}
-                                />
-
                                 <Avatar size="small" color="light-blue" style={{marginRight:4}}>
                                     <img src="/assets/images/avatar/6.png" />
                                 </Avatar>
@@ -91,8 +81,6 @@ const Header = (props) => {
                                     left: 4,
                                     marginRight: 4,
                                 }}>
-                                    <div>你好！</div>
-                                    <div>{user && user.displayName}</div>
                                 </div>
                             </div>
                         }

web/client/src/layout/components/header/index.less

@@ -8,4 +8,7 @@
     .semi-navigation-item-selected{
         background: none;
     }
+    .semi-navigation-item-text{
+        overflow: inherit;
+    }
 }

web/client/src/layout/components/sider/index.jsx

@@ -51,7 +51,11 @@ const Sider = (props) => {
             <Nav
                 style={{ background: '#101531', width: 180, padding: 0 }}
                 selectedKeys={selectedKeys}
-
+                // bodyStyle={{}}
+                // mode = "vertical"
+                // footer={{
+                //     collapseButton: true,
+                // }}
                 openKeys={openKeys}
                 onSelect={({ selectedItems, selectedKeys, }) => {
                     const selectItem = selectedItems[0]

web/client/src/sections/example/nav-item.jsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import { IconCode } from '@douyinfe/semi-icons';
+import { Badge } from "@douyinfe/semi-ui";
 
 export function getNavItem (user, dispatch) {
     return (
         [
             {
                 itemKey: 'example',
-                text: '举个栗子',
+                text: <Badge count={5}  type='danger' >举个栗子</Badge>,
                 icon: <IconCode />,
                 items: [
                     {
                         itemKey: 'e1',
-                        text: '举个棒子1',
+                        text:'举个棒子1',
                         icon: <IconCode />,
                         to: '/example/e1/c1',
                         items: [{