feat: 新增多标签模式

src/layouts/BasicLayout.js

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import Cookies from 'js-cookie';
-import { Anchor, Button, Popover, Radio, Result, Spin } from 'antd';
+import { Anchor, Button, Popover, Radio, Result, Spin, Tabs } from 'antd';
 
 import classNames from 'classnames';
 import { dom } from 'kit_utils';
@@ -35,6 +35,7 @@ import styles from './UserLayout.less';
 import defaultSetting from '../../config/defaultSetting';
 // import Login from '../pages/user/login/login';
 const antIcon = <LoadingOutlined style={{ fontSize: 12 }} spin />;
+const { TabPane } = Tabs;
 
 const baseURI = isProd
   ? window.location.origin
@@ -324,6 +325,8 @@ const BasicLayout = props => {
   const [pageLoading, setPageLoading] = useState(true);
   const [siteLoading, setSiteLoading] = useState(false);
   const [complexCollapsed, setComplexCollapsed] = useState(false);
+  const [tabRoutesList, setTabRoutesList] = useState(JSON.parse(sessionStorage.getItem('tabNav'))); // 多标签导航
+  const [tabActiveKey, setTabActiveKey] = useState(sessionStorage.getItem('tabActiveKey')); // 多标签导航选中项
   const isMounted = useMountedState();
   const [siteAction, setSiteAction] = useState(
     () => new Site(props, setSiteLoading),
@@ -335,6 +338,15 @@ const BasicLayout = props => {
 
   useEffect(() => {
     props.updatePathname(props.location.pathname);
+    let path = props.global.homepage ? `/civweb4/${props.global.homepage}` : `/civweb4/?client=${props.global.get('client')}`;
+    if(!JSON.parse(sessionStorage.getItem('tabNav'))){
+      sessionStorage.setItem('tabNav', JSON.stringify([{title: '首页', key: path, path: path}]))
+      setTabRoutesList([{title: '首页', key: path, path: path}]);
+    }
+    if(!sessionStorage.getItem('tabActiveKey')){
+      sessionStorage.setItem('tabActiveKey', path);
+      setTabActiveKey(path);
+    }
   }, []);
 
   const extraRender = menuExtraRender(currentRoutes);
@@ -373,8 +385,52 @@ const BasicLayout = props => {
       setCollapse(true);
       history.push(config.path);
     }
+    handleTabList(props.location.pathname);
   }, [props.location.pathname, currentRoutes]);
 
+  // 监听路由变化，处理标签数据
+  const handleTabList = (pathname) =>{
+    const { flatMenu } = props;
+    let curConfigArr = flatMenu.length > 0 && flatMenu.filter(item => item.name && item.path == pathname);
+    if(curConfigArr.length > 0){
+      let config = curConfigArr[0];
+      let key = null;
+      let curTabRoutesList = JSON.parse(sessionStorage.getItem('tabNav'));
+      if(config.level <= 3){
+        key = pathname
+        const curSelectTab = curTabRoutesList.filter(child => child.key == key);
+        if(curSelectTab.length > 0){
+          setTabActiveKey(key);
+        }else{
+          curTabRoutesList.push({
+            title: config.name,
+            key: key,
+            path: pathname
+          })
+        }
+      }else{
+        const routes = config.parent.routes || [];
+        if(routes.length > 0){
+          key = routes[0].path;
+          const curSelectTab = curTabRoutesList.filter(child => child.key == key);
+          if(curSelectTab.length > 0){
+            setTabActiveKey(key);
+          }else{
+            curTabRoutesList.push({
+              title: config.parent.name,
+              key: key,
+              path: routes[0].path
+            })
+          }
+        }
+      }
+      setTabActiveKey(key);
+      setTabRoutesList(curTabRoutesList);
+      sessionStorage.setItem('tabNav', JSON.stringify(curTabRoutesList))
+      sessionStorage.setItem('tabActiveKey', key)
+    }
+  }
+
   // useEffect(() => {
   //   setLoading(true);
   //
@@ -442,7 +498,11 @@ const BasicLayout = props => {
 
   useEffect(() => {
     window.share.event.on('updateSite', res => setCityData(res));
-    return () => window.share.event.removeAllListeners('updateSite')
+    return () => {
+      window.share.event.removeAllListeners('updateSite')
+      sessionStorage.removeItem('tabNav')
+      sessionStorage.removeItem('tabActiveKey')
+    }
   }, []);
 
   useMemo(() => {
@@ -699,6 +759,69 @@ const BasicLayout = props => {
       </>
     );
   };
+
+  // 多标签模式下，切换标签
+  const handleTabRouteChange = (activeKey) => {
+    let tabRoutesList = JSON.parse(sessionStorage.getItem('tabNav'));
+    const currentItem = tabRoutesList.filter(item => item.key === activeKey)[0];
+    if(currentItem.title == '首页'){
+      let path = tabRoutesList[0].path;
+      props.updateSelectedKeys(path);
+      props.updatePathname(path);
+      history.replace(path);
+    }else{
+      const config = findPathByLeafId(currentItem.path, [currentRoutes], '', 'path');
+      props.updateComplexConfig({});
+      props.updateComplexPathName(null);
+      if (config && config.routes && config.routes.length > 0) {
+        props.updateComplexConfig(config);
+        props.updateComplexPathName(config.routes[0].path);
+        history.push(config.routes[0].path);
+      }
+      history.push(currentItem.path);
+      props.updatePathname(activeKey);
+      props.updateSelectedKeys(`${activeKey}`);
+    }
+    setTabActiveKey(activeKey);
+    sessionStorage.setItem('tabActiveKey', activeKey)
+    forceRender();
+  }
+
+  // 多标签模式下，删除标签
+  const handleTabRouteEdit = (targetKey, action) => {
+    if(action === 'remove'){
+      let newActiveKey = tabActiveKey;
+      let lastIndex;
+      let tabRoutesList = JSON.parse(sessionStorage.getItem('tabNav'))
+      tabRoutesList.forEach((item, i)=>{
+        if(item.key === targetKey){ lastIndex = i - 1 }
+      })
+      const newTabList = tabRoutesList.filter(item => item.key !== targetKey);
+      if(newTabList.length && newActiveKey === targetKey){
+        newActiveKey = lastIndex >= 0 ? newTabList[lastIndex].key : newTabList[0].key
+      }     
+      const config = findPathByLeafId(newActiveKey, [currentRoutes], '', 'path'); 
+      props.updateComplexConfig({});
+      props.updateComplexPathName(null);
+      if (config && config.routes && config.routes.length > 0) {
+        props.updateComplexConfig(config);
+        props.updateComplexPathName(config.routes[0].path);
+        history.push(config.routes[0].path);
+      }
+      if(lastIndex >= 0){
+        history.push(newTabList[lastIndex].path);
+      }else{
+        history.replace(`/civweb4/${props.global.homepage}`);
+      }
+      props.updateSelectedKeys(newActiveKey);
+      props.updatePathname(newActiveKey);    
+      setTabActiveKey(newActiveKey);
+      setTabRoutesList(newTabList); 
+      sessionStorage.setItem('tabNav', JSON.stringify(newTabList))      
+      sessionStorage.setItem('tabActiveKey', newActiveKey) 
+    }
+  }
+
   const { openKeys } = props;
   // const filterMenu = props.menu.filter(item => !item.hideInMenu)
   return (
@@ -822,6 +945,21 @@ const BasicLayout = props => {
             onChange={index => props.updateCurrentIndex(index)}
             onSelect={item => handleSelectedKey(item)}
           />
+          {
+            props.global.mdi == 'MDI' && 
+            <Tabs
+              className={styles.menuTabs}
+              type="editable-card"
+              hideAdd={true}
+              onChange={activeKey => handleTabRouteChange(activeKey)}
+              activeKey={tabActiveKey}
+              onEdit={(targetKey, action) => handleTabRouteEdit(targetKey, action)}
+            >
+              {tabRoutesList && tabRoutesList.length > 0 && tabRoutesList.map(item => (
+                <TabPane tab={item.title} key={item.key} closable={item.title != '首页'}/>
+              ))}
+            </Tabs>
+          }
           {/*noMatch={noMatch*/}
           {renderComplexLayout(
             <>

src/layouts/UserLayout.less

@@ -589,3 +589,13 @@
     }
   }
 }
+
+.menuTabs{
+  position: relative;
+  padding: 0 10px;
+}
+
+:global(.@{ant-prefix}-spin-container .@{ant-prefix}-tabs .@{ant-prefix}-tabs-nav){
+  margin: 0;
+}
+