导航

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

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";
 
 const Header = (props) => {
-    const { dispatch, history, user, actions, socket } = props;
+    const { dispatch, history, user, actions, socket ,headerItems} = props;
 
     return (
         <>
@@ -20,6 +20,9 @@ const Header = (props) => {
                         }
                         history.push(`/signin`);
                     }
+                    else{
+                        console.log('1111111111111111');
+                    }
                 }}
                 style={{
                     height: 60,
@@ -38,6 +41,19 @@ const Header = (props) => {
                     text: "",
                 }}
                 footer={
+                    <>
+                    {headerItems.map((item,index)=>(
+                        <Nav.Sub
+                        key={index}
+                        itemKey={item.itemKey}
+                        text={item.text}
+                        dropdownStyle={{color:'#F2F3F5'}}
+                        >
+                            {item.hasOwnProperty('items')&&item.items.map((ite,idx)=>(
+                                <Nav.Item key={idx} itemKey={ite.itemKey} text={ite.text} />
+                            ))}
+                        </Nav.Sub>
+                    ))}
                     <Nav.Sub
                         itemKey={"user"}
                         text={
@@ -77,6 +93,7 @@ const Header = (props) => {
                     >
                         <Nav.Item itemKey={"logout"} text={"退出"} />
                     </Nav.Sub>
+                    </>
                 }
             />
         </>

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

@@ -4,18 +4,18 @@ import { connect } from 'react-redux';
 import { Nav } from '@douyinfe/semi-ui';
 import { push } from 'react-router-redux';
 import { useLocation } from 'react-router';
+import "./index.less";
 
 let scrollbar = null
-const homePath = '/equipmentWarehouse/nvr'
+const homePath = '/example/e1/c1'
-const Sider = props => {
+const Sider = (props) => {
-   const { collapsed, clientHeight, dispatch, pathname } = props
+   const { collapsed, clientHeight, dispatch, pathname,leftItems } = props
    const [items, setItems] = useState([])
    const [selectedKeys, setSelectedKeys] = useState([])
    const [openKeys, setOpenKeys] = useState([])
-
    useEffect(() => {
       const { sections, dispatch, user } = props;
-      let nextItems = []
+      let nextItems = leftItems
       let pathname_ = pathname == '/' ? homePath : pathname
       const initKeys = (items, lastKeys) => {
          for (let it of items) {
@@ -37,17 +37,7 @@ const Sider = props => {
             openKeys: []
          }
       }
-
-      for (let c of sections) {
-         if (typeof c.getNavItem == 'function') {
-            let item = c.getNavItem(user, dispatch);
-            if (item) {
-               nextItems.push.apply(nextItems, item)
-            }
-         }
-      }
       setItems(nextItems)
-
       const { selectedKeys, openKeys } = initKeys(
          nextItems,
          {
@@ -73,7 +63,7 @@ const Sider = props => {
       if (pathname == '/') {
          dispatch(push(homePath))
       }
-   }, [])
+   }, [leftItems])
    let routeSelectedKey = [useLocation().pathname.split('/')[1]]//没有子目录的
    let routeSelectedKeys = [useLocation().pathname.split('/')[2]]//有子目录的
    useEffect(()=>{
@@ -113,9 +103,9 @@ const Sider = props => {
       }
    })
    return (
-      <div id={'page-slider'} style={{ height: clientHeight, position: 'relative' }}>
+      <div id={'page-slider'} style={{ height: clientHeight, position: 'relative',background:'#101531',width:180 }}>
          <Nav
-            style={{}}
+            style={{background:'#101531',width:180,padding:0}}
             // defaultOpenKeys={openKeys}
             // defaultSelectedKeys	={selectedKeys}
             selectedKeys={selectedKeys}

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

@@ -0,0 +1,18 @@
+#page-slider{
+    .semi-navigation-sub .semi-navigation-item-selected{
+        background: rgba(0, 90, 189, 0.5);
+        color: #F2F3F5;
+    }
+    .semi-navigation-item-text{
+        color: #F2F3F5;
+    }
+    .semi-navigation-item-icon{
+        color:#F2F3F5
+    }
+    .semi-navigation-sub-title-selected{
+        background: #1D2343;
+        .semi-navigation-item-inner{
+
+        }
+    }
+}

web/client/src/layout/containers/layout/index.jsx

@@ -38,6 +38,49 @@ const LayoutContainer = props => {
          document.getElementById('PomsApp').clientWidth - (collapsed ? 120 : 240)
       ));
    }
+   function deepCopy(data) {//深拷贝
+    //string,number,bool,null,undefined,symbol
+    //object,array,date
+    if (data && typeof data === "object") {
+      //针对函数的拷贝
+      if (typeof data === "function") {
+        let tempFunc = data.bind(null);
+        tempFunc.prototype = deepCopy(data.prototype);
+        return tempFunc;
+      }
+  
+      switch (Object.prototype.toString.call(data)) {
+        case "[object String]":
+          return data.toString();
+        case "[object Number]":
+          return Number(data.toString());
+        case "[object Boolean]":
+          return new Boolean(data.toString());
+        case "[object Date]":
+          return new Date(data.getTime());
+        case "[object Array]":
+          var arr = [];
+          for (let i = 0; i < data.length; i++) {
+            arr[i] = deepCopy(data[i]);
+          }
+          return arr;
+  
+        //js自带对象或用户自定义类实例
+        case "[object Object]":
+          var obj = {};
+          for (let key in data) {
+            //会遍历原型链上的属性方法，可以用hasOwnProperty来控制 （obj.hasOwnProperty(prop)
+            obj[key] = deepCopy(data[key]);
+          }
+          return obj;
+      }
+    } else {
+      //string,number,bool,null,undefined,symbol
+      return data;
+    }
+  }
+   const [headerItems, setHeaderItems] = useState([])
+   const [leftItems, setLeftItems] = useState([])
 
    useEffect(() => {
       let topItems = []//头部导航
@@ -47,8 +90,8 @@ const LayoutContainer = props => {
             let item = c.getNavItem(user, dispatch);
             if (item) {
                if (item.length > 0) {
-                  let itm = JSON.parse(JSON.stringify(item[0]));
+                  let itm = deepCopy(item[0]);
-                  let itms = JSON.parse(JSON.stringify(item[0]));
+                  let itms=deepCopy(item[0]);
                   if (itm.hasOwnProperty('items')) {
                      siderItems.push.apply(siderItems, itms.items)
                      for (let i = 0; i < itm.items.length; i++) {
@@ -64,8 +107,8 @@ const LayoutContainer = props => {
             }
          }
       }
-      console.log('siderItems', siderItems);
+      setHeaderItems(topItems)
-      console.log('topItems', topItems);
+      setLeftItems(siderItems)
 
       window.addEventListener('resize', resize_);
       return () => {
@@ -140,6 +183,7 @@ const LayoutContainer = props => {
             <>
                <Layout.Header>
                   <Header
+                     headerItems={headerItems}
                      user={user}
                      pathname={location.pathname}
                      toggleCollapsed={() => {
@@ -153,6 +197,7 @@ const LayoutContainer = props => {
                   <Layout.Sider>
                      <Sider
                         sections={sections}
+                        leftItems={leftItems}
                         dispatch={dispatch}
                         user={user}
                         pathname={location.pathname}

web/client/src/sections/auth/containers/login.jsx

@@ -20,7 +20,7 @@ const Login = props => {
 
     useEffect(() => {
         if (user && user.authorized) {
-            dispatch(push('/equipmentWarehouse/nvr'));
+            dispatch(push('/example/e1/c1'));
             localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr']))
             localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse']))
         }

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

@@ -13,6 +13,7 @@ export function getNavItem (user, dispatch) {
                         itemKey: 'e1',
                         text: '举个棒子1',
                         icon: <IconCode />,
+                        to: '/example/e1/c1',
                         items: [{
                             itemKey: 'c1', to: '/example/e1/c1', text: '举个锤子1'
                         }]

web/client/src/sections/example/routes.js

@@ -11,7 +11,7 @@ export default [{
         childRoutes: [{
             path: '/e1',
             key: 'e1',
-            // component: Example,
+            component: Example,
             breadcrumb: '棒子1',
             childRoutes:[{
                 path: '/c1',