导航联动

web/client/src/app.jsx

@@ -6,6 +6,7 @@ import Auth from './sections/auth';
 import Example from './sections/example';
 import Example1 from './sections/example1';
 import NoMatch from './sections/noMatch';
+import Console from './sections/console';
 
 const App = props => {
    const { projectName } = props
@@ -19,7 +20,7 @@ const App = props => {
          title={projectName}
          sections={[
             Example,Example1,
-            Auth, NoMatch
+            Auth, NoMatch,Console
          ]}
       />
    )

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

@@ -2,12 +2,14 @@
 import React from "react";
 import { connect } from "react-redux";
 import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";
+import "./index.less";
 
 const Header = (props) => {
-    const { dispatch, history, user, actions, socket ,headerItems} = props;
+    const { dispatch, history, user, actions, socket ,headerItems,tochange} = props;
 
     return (
         <>
+        <div id="top-slider">
             <Nav
                 mode={"horizontal"}
                 onClick={({ itemKey }) => {
@@ -20,9 +22,6 @@ const Header = (props) => {
                         }
                         history.push(`/signin`);
                     }
-                    else{
-                        console.log('1111111111111111');
-                    }
                 }}
                 style={{
                     height: 60,
@@ -42,18 +41,28 @@ const Header = (props) => {
                 }}
                 footer={
                     <>
-                    {headerItems.map((item,index)=>(
+                    {headerItems.map((item,index)=>{
+                        // console.log('item',item);
+                        if(item.hasOwnProperty('items')){
+                            return(
                                 <Nav.Sub
-                        key={index}
+                                key={index+'a'}
                                 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.Item key={idx+'d'} itemKey={ite.itemKey} text={ite.text} onClick={()=>{tochange(ite);}}/>
                                     ))}
                                 </Nav.Sub>
-                    ))}
+                            )
+                        }
+                        else{
+                            return(
+                                <Nav.Item key={index+'a'} itemKey={item.itemKey} text={item.text} onClick={()=>{tochange(item)}} />
+                            ) 
+                        }
+                    })}
                     <Nav.Sub
                         itemKey={"user"}
                         text={
@@ -96,6 +105,7 @@ const Header = (props) => {
                     </>
                 }
             />
+            </div>
         </>
     );
 };

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

@@ -0,0 +1,11 @@
+#top-slider{
+    .semi-navigation-item-text{
+        color: #F2F3F5;
+    }
+    .semi-navigation-item-icon{
+        color: #F2F3F5;
+    }
+    .semi-navigation-item-selected{
+        background: none;
+    }
+}

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

@@ -9,7 +9,7 @@ import "./index.less";
 let scrollbar = null
 const homePath = '/example/e1/c1'
 const Sider = (props) => {
-   const { collapsed, clientHeight, dispatch, pathname,leftItems } = props
+   const { collapsed, clientHeight, dispatch, pathname,leftItems,leftChange } = props
    const [items, setItems] = useState([])
    const [selectedKeys, setSelectedKeys] = useState([])
    const [openKeys, setOpenKeys] = useState([])
@@ -18,6 +18,7 @@ const Sider = (props) => {
       let nextItems = leftItems
       let pathname_ = pathname == '/' ? homePath : pathname
       const initKeys = (items, lastKeys) => {
+        console.log('1111111',items);
          for (let it of items) {
             if (it.to && it.to == pathname_) {
                lastKeys.selectedKeys.push(it.itemKey)
@@ -66,6 +67,7 @@ const Sider = (props) => {
    }, [leftItems])
    let routeSelectedKey = [useLocation().pathname.split('/')[1]]//没有子目录的
    let routeSelectedKeys = [useLocation().pathname.split('/')[2]]//有子目录的
+   let routeSelectedKeyss = [useLocation().pathname.split('/')[3]]//有子目录的
    useEffect(()=>{
        let pathname_ = pathname == '/' ? homePath : pathname
       const initKeys = (items, lastKeys) => {
@@ -84,8 +86,10 @@ const Sider = (props) => {
          }
          return lastKeys
       }
-   
+   if(routeSelectedKeyss[0]){
-   if(routeSelectedKeys[0]){
+    setSelectedKeys(routeSelectedKeyss)
+   }
+   else if(routeSelectedKeys[0]){
       setSelectedKeys(routeSelectedKeys)
    }
    else{
@@ -95,7 +99,7 @@ const Sider = (props) => {
     if (lastOpenKeys) {
        setOpenKeys(JSON.parse(lastOpenKeys))
     }
-   },[window.localStorage.vcmp_open_sider,window.localStorage.vcmp_selected_sider])
+   },[window.localStorage.vcmp_open_sider,window.localStorage.vcmp_selected_sider,leftChange])
 
    useEffect(() => {
       if (scrollbar) {
@@ -106,9 +110,8 @@ const Sider = (props) => {
       <div id={'page-slider'} style={{ height: clientHeight, position: 'relative',background:'#101531',width:180 }}>
          <Nav
             style={{background:'#101531',width:180,padding:0}}
-            // defaultOpenKeys={openKeys}
-            // defaultSelectedKeys	={selectedKeys}
             selectedKeys={selectedKeys}
+            
             openKeys={openKeys}
             onSelect={({ selectedItems, selectedKeys, }) => {
                const selectItem = selectedItems[0]

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

@@ -11,8 +11,5 @@
     }
     .semi-navigation-sub-title-selected{
         background: #1D2343;
-        .semi-navigation-item-inner{
-
-        }
     }
 }

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

@@ -79,21 +79,25 @@ const LayoutContainer = props => {
       return data;
     }
   }
+   const [allItems, setAllItems] = useState([])
    const [headerItems, setHeaderItems] = useState([])
    const [leftItems, setLeftItems] = useState([])
-
+   const [leftChange, setLeftChange] = useState(true)
+   const [leftShow, setLeftShow] = useState(false)
    useEffect(() => {
       let topItems = []//头部导航
-      let siderItems = []//侧边导航
+    //   let siderItems = []//侧边导航
+      let nextItems = []//所有导航
       for (let c of sections) {
          if (typeof c.getNavItem == 'function') {
             let item = c.getNavItem(user, dispatch);
             if (item) {
+                nextItems.push.apply(nextItems, item)
                if (item.length > 0) {
                   let itm = deepCopy(item[0]);
                   let itms=deepCopy(item[0]);
                   if (itm.hasOwnProperty('items')) {
-                     siderItems.push.apply(siderItems, itms.items)
+                    //  siderItems.push.apply(siderItems, itms.items)
                      for (let i = 0; i < itm.items.length; i++) {
                         delete itm.items[i].items
                      }
@@ -103,12 +107,13 @@ const LayoutContainer = props => {
                      topItems.push.apply(topItems, item)
                   }
                }
-
             }
          }
       }
+      setLeftShow(false)
+      setAllItems(nextItems)
       setHeaderItems(topItems)
-      setLeftItems(siderItems)
+    //   setLeftItems(siderItems)
 
       window.addEventListener('resize', resize_);
       return () => {
@@ -191,19 +196,35 @@ const LayoutContainer = props => {
                      }}
                      collapsed={collapsed}
                      history={history}
+                     tochange={(val) => {
+                        setLeftChange(!leftChange)
+                        if(val.fatherKey){
+                            for (let i = 0; i < allItems.length; i++) {
+                                if(val.fatherKey==allItems[i].itemKey){
+                                    setLeftItems(allItems[i].items)
+                                }
+                            }
+                            setLeftShow(true)
+                        }
+                        else{
+                            setLeftShow(false)
+                        }
+                        history.push(val.to);
+                    }}
                   />
                </Layout.Header>
                <Layout style={{ height: 'calc(100% - 60px)' }}>
-                  <Layout.Sider>
+                {leftShow?(<Layout.Sider>
                      <Sider
                         sections={sections}
                         leftItems={leftItems}
                         dispatch={dispatch}
                         user={user}
+                        leftChange={leftChange}
                         pathname={location.pathname}
                         collapsed={collapsed}
                      />
-                  </Layout.Sider>
+                  </Layout.Sider>):('')}
                   <Layout.Content>
                      <div style={{
                         margin: '12px 12px 0px',

web/client/src/sections/console/actions/console.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/console/actions/index.js

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

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

@@ -0,0 +1,49 @@
+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 (
+      <>
+        <div>
+            texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
+        </div>
+      </>
+   )
+}
+
+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/console/containers/index.js

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

web/client/src/sections/console/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: 'console',
+    name: '控制台',
+    reducers: reducers,
+    routes: routes,
+    actions: actions,
+    getNavItem: getNavItem
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IconCode } from '@douyinfe/semi-icons';
+
+export function getNavItem (user, dispatch) {
+    return (
+        [
+            {
+                itemKey: 'console',
+                text: '控制台',
+                to: '/console',
+                // icon: <IconCode />,
+            },
+        ]
+    );
+}

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

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

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

@@ -0,0 +1,13 @@
+'use strict';
+import { Console, } from './containers';
+
+export default [{
+    type: 'inner',
+    route: {
+        path: '/console',
+        key: 'console',
+        breadcrumb: '控制台',
+        component: Console,
+        // 不设置 component 则面包屑禁止跳转
+    }
+}];

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

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

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

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

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

@@ -13,6 +13,8 @@ export function getNavItem (user, dispatch) {
                         itemKey: 'e3',
                         text: '举个棒子3',
                         icon: <IconCode />,
+                        to: '/example/e3/c3',
+                        fatherKey:'example1',
                         items: [{
                             itemKey: 'c3', to: '/example/e3/c3', text: '举个锤子3'
                         }]
@@ -20,6 +22,8 @@ export function getNavItem (user, dispatch) {
                         itemKey: 'e4',
                         text: '举个棒子4',
                         icon: <IconCode />,
+                        to: '/example/e4/c4',
+                        fatherKey:'example1',
                         items: [{
                             itemKey: 'c4', to: '/example/e4/c4', text: '举个锤子4'
                         }]