导航

web/client/src/app.jsx

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import Layout from './layout';
 import Auth from './sections/auth';
 import Example from './sections/example';
+import Example1 from './sections/example1';
 import NoMatch from './sections/noMatch';
 
 const App = props => {
@@ -17,7 +18,7 @@ const App = props => {
       <Layout
          title={projectName}
          sections={[
-            // Example,
+            Example,Example1,
             Auth, NoMatch
          ]}
       />

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

@@ -24,7 +24,7 @@ const Header = (props) => {
                 style={{
                     height: 60,
                     minWidth: 520,
-                    background: `url(${__webpack_public_path__}assets/images/background/header.png)`,
+                    background: '#1D2343',
                     backgroundSize: "100% 100%",
                     color: "white",
                 }}

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

@@ -41,6 +41,33 @@ const LayoutContainer = props => {
    }
 
    useEffect(() => {
+    let topItems=[]//头部导航
+    let siderItems=[]//侧边导航
+    for (let c of sections) {
+        if (typeof c.getNavItem == 'function') {
+           let item = c.getNavItem(user, dispatch);
+           if (item) {
+              if(item.length>0){
+                let itm = JSON.parse(JSON.stringify(item[0]));
+                let itms = JSON.parse(JSON.stringify(item[0]));
+                if(itm.hasOwnProperty('items')){
+                  siderItems.push.apply(siderItems,itms.items)
+                  for (let i = 0; i < itm.items.length; i++) {
+                      delete itm.items[i].items
+                  }
+                  topItems.push(itm)
+                }
+                else{
+                  topItems.push.apply(topItems, item)
+                }
+              }
+              
+           }
+        }
+     }
+     console.log('siderItems',siderItems);
+     console.log('topItems',topItems);
+
       window.addEventListener('resize', resize_);
       return () => {
          window.removeEventListener('resize', resize_);

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

@@ -2,13 +2,13 @@
 
 import { ApiTable ,basicAction} from '$utils'
 
-export function getMembers (orgId) {
+// export function getMembers (orgId) {
-    return dispatch => basicAction({
+//     return dispatch => basicAction({
-        type: 'get',
+//         type: 'get',
-        dispatch: dispatch,
+//         dispatch: dispatch,
-        actionType: 'GET_MEMBERS',
+//         actionType: 'GET_MEMBERS',
-        url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
+//         url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
-        msg: { error: '获取用户列表失败' },
+//         msg: { error: '获取用户列表失败' },
-        reducer: { name: 'members' }
+//         reducer: { name: 'members' }
-    });
+//     });
-}
+// }

web/client/src/sections/example/containers/example.jsx

@@ -9,29 +9,29 @@ const Example = (props) => {
 
    useEffect(() => {
       // ACTION 示例
-      dispatch(actions.example.getMembers(user.orgId))
+    //   dispatch(actions.example.getMembers(user.orgId))
    }, [])
 
    // websocket 使用测试
-   useEffect(() => {
+//    useEffect(() => {
-      console.log(socket)
+//       console.log(socket)
-      if (socket) {
+//       if (socket) {
-         socket.on('TEST', function (msg) {
+//          socket.on('TEST', function (msg) {
-            console.info(msg);
+//             console.info(msg);
-         });
+//          });
-         return () => {
+//          return () => {
-            socket.off("TEST");
+//             socket.off("TEST");
-         }
+//          }
-      }
+//       }
 
-   }, [socket])
+//    }, [socket])
 
    return (
       <Spin tip="biubiubiu~" spinning={loading}>
          <div id='example'>
             <p>STYLE EXAMPLE</p>
          </div>
-         <Card
+         {/* <Card
             style={{ maxWidth: 300 }}
             cover={
                <img
@@ -41,7 +41,7 @@ const Example = (props) => {
             }
          >
             <Meta title="组件示例" />
-         </Card>
+         </Card> */}
       </Spin>
    )
 }
@@ -49,11 +49,11 @@ const Example = (props) => {
 function mapStateToProps (state) {
    const { auth, global, members, webSocket } = state;
    return {
-      loading: members.isRequesting,
+    //   loading: members.isRequesting,
-      user: auth.user,
+    //   user: auth.user,
-      actions: global.actions,
+    //   actions: global.actions,
-      members: members.data,
+    //   members: members.data,
-      socket: webSocket.socket
+    //   socket: webSocket.socket
    };
 }
 

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

@@ -5,11 +5,37 @@ export function getNavItem (user, dispatch) {
     return (
         [
             {
-                itemKey: 'example', text: '举个栗子', icon: <IconCode />,
+                itemKey: 'example',
+                text: '举个栗子',
+                icon: <IconCode />,
                 items: [
-                    { itemKey: 'e1', to: '/example/e1', text: '举个棒子' },
+                    {
+                        itemKey: 'e1',
+                        text: '举个棒子1',
+                        icon: <IconCode />,
+                        items: [{
+                            itemKey: 'c1', to: '/example/e1/c1', text: '举个锤子1'
+                        }]
+                    }, {
+                        itemKey: 'e2',
+                        text: '举个棒子2',
+                        icon: <IconCode />,
+                        items: [{
+                            itemKey: 'c2', to: '/example/e2/c2', text: '举个锤子2'
+                        }]
+                    },
                 ]
             },
         ]
+        // ,[
+        //     {
+        //        itemKey: 'equipmentWarehouse', text: '设备仓库', icon:<iconpark-icon style={{width:20,height:20}}  name="she-1"></iconpark-icon>,
+        //        items: [
+        //           { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR管理' },
+        //           { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '摄像头管理' },
+        //           { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '回收站' },
+        //        ]
+        //     },
+        //  ]
     );
 }

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

@@ -11,8 +11,25 @@ export default [{
         childRoutes: [{
             path: '/e1',
             key: 'e1',
+            // component: Example,
+            breadcrumb: '棒子1',
+            childRoutes:[{
+                path: '/c1',
+                key: 'c1',
                 component: Example,
-            breadcrumb: '棒子',
+                breadcrumb: '锤子1',
+            }]
+        },{
+            path: '/e2',
+            key: 'e2',
+            // component: Example,
+            breadcrumb: '棒子2',
+            childRoutes:[{
+                path: '/c2',
+                key: 'c2',
+                component: Example,
+                breadcrumb: '锤子2',
+            }]
         }]
     }
 }];

web/client/src/sections/example1/actions/example.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import { ApiTable ,basicAction} from '$utils'
+
+// export function getMembers (orgId) {
+//     return dispatch => basicAction({
+//         type: 'get',
+//         dispatch: dispatch,
+//         actionType: 'GET_MEMBERS',
+//         url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
+//         msg: { error: '获取用户列表失败' },
+//         reducer: { name: 'members' }
+//     });
+// }

web/client/src/sections/example1/actions/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+import * as example from './example'
+
+export default {
+    ...example
+}

web/client/src/sections/example1/containers/example.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Spin, Card } from '@douyinfe/semi-ui';
+import '../style.less'
+const { Meta } = Card;
+
+const Example = (props) => {
+   const { dispatch, actions, user, loading, socket } = props
+
+   useEffect(() => {
+      // ACTION 示例
+    //   dispatch(actions.example.getMembers(user.orgId))
+   }, [])
+
+   // websocket 使用测试
+//    useEffect(() => {
+//       console.log(socket)
+//       if (socket) {
+//          socket.on('TEST', function (msg) {
+//             console.info(msg);
+//          });
+//          return () => {
+//             socket.off("TEST");
+//          }
+//       }
+
+//    }, [socket])
+
+   return (
+      <Spin tip="biubiubiu~" spinning={loading}>
+         <div id='example'>
+            <p>STYLE EXAMPLE</p>
+         </div>
+         {/* <Card
+            style={{ maxWidth: 300 }}
+            cover={
+               <img
+                  alt="example"
+                  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg"
+               />
+            }
+         >
+            <Meta title="组件示例" />
+         </Card> */}
+      </Spin>
+   )
+}
+
+function mapStateToProps (state) {
+   const { auth, global, members, webSocket } = state;
+   return {
+    //   loading: members.isRequesting,
+    //   user: auth.user,
+    //   actions: global.actions,
+    //   members: members.data,
+    //   socket: webSocket.socket
+   };
+}
+
+export default connect(mapStateToProps)(Example);

web/client/src/sections/example1/containers/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+import Example from './example';
+
+export { Example };

web/client/src/sections/example1/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+import reducers from './reducers';
+import routes from './routes';
+import actions from './actions';
+import { getNavItem } from './nav-item';
+
+export default {
+    key: 'example',
+    name: '书写示例',
+    reducers: reducers,
+    routes: routes,
+    actions: actions,
+    getNavItem: getNavItem
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { IconCode } from '@douyinfe/semi-icons';
+
+export function getNavItem (user, dispatch) {
+    return (
+        [
+            {
+                itemKey: 'example1',
+                text: '举个栗子1',
+                icon: <IconCode />,
+                items: [
+                    {
+                        itemKey: 'e3',
+                        text: '举个棒子3',
+                        icon: <IconCode />,
+                        items: [{
+                            itemKey: 'c3', to: '/example/e3/c3', text: '举个锤子3'
+                        }]
+                    }, {
+                        itemKey: 'e4',
+                        text: '举个棒子4',
+                        icon: <IconCode />,
+                        items: [{
+                            itemKey: 'c4', to: '/example/e4/c4', text: '举个锤子4'
+                        }]
+                    },
+                ]
+            },
+        ]
+        // ,[
+        //     {
+        //        itemKey: 'equipmentWarehouse', text: '设备仓库', icon:<iconpark-icon style={{width:20,height:20}}  name="she-1"></iconpark-icon>,
+        //        items: [
+        //           { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR管理' },
+        //           { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '摄像头管理' },
+        //           { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '回收站' },
+        //        ]
+        //     },
+        //  ]
+    );
+}

web/client/src/sections/example1/reducers/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+export default {
+
+}

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

@@ -0,0 +1,35 @@
+'use strict';
+import { Example, } from './containers';
+
+export default [{
+    type: 'inner',
+    route: {
+        path: '/example1',
+        key: 'example1',
+        breadcrumb: '栗子1',
+        // 不设置 component 则面包屑禁止跳转
+        childRoutes: [{
+            path: '/e3',
+            key: 'e3',
+            // component: Example,
+            breadcrumb: '棒子3',
+            childRoutes:[{
+                path: '/c3',
+                key: 'c3',
+                component: Example,
+                breadcrumb: '锤子3',
+            }]
+        },{
+            path: '/e4',
+            key: 'e4',
+            // component: Example,
+            breadcrumb: '棒子4',
+            childRoutes:[{
+                path: '/c4',
+                key: 'c4',
+                component: Example,
+                breadcrumb: '锤子4',
+            }]
+        }]
+    }
+}];

web/client/src/sections/example1/style.less

@@ -0,0 +1,7 @@
+#example {
+    box-shadow: 3px 3px 2px black;
+}
+
+#example:hover {
+    color: yellowgreen;
+}