tabbar修改

config/config.js

@@ -47,31 +47,15 @@ export default defineConfig({
           routes: [
             {
               path: '/',
-              redirect: '/welcome',
+              redirect: '/home',
             },
             {
-              path: '/welcome',
+              path: '/home',
               name: 'welcome',
               icon: 'smile',
               component: './Welcome',
             },
             {
-              path: '/admin',
-              name: 'admin',
-              icon: 'crown',
-              component: './Admin',
-              authority: ['admin'],
-              routes: [
-                {
-                  path: '/admin/sub-page',
-                  name: 'sub-page',
-                  icon: 'smile',
-                  component: './Welcome',
-                  authority: ['admin'],
-                },
-              ],
-            },
-            {
               name: 'list.table-list',
               icon: 'table',
               path: '/list',

src/components/TabBar/index.jsx

+import React, { useState, useEffect, useImperativeHandle } from 'react'
+import { Tabs } from 'antd'
+import { useLocation, history } from "umi"
+import './style.less'
+
+const { TabPane } = Tabs;
+
+const TabBar = (props, ref) => {
+
+  const location = useLocation()
+  const { pathname } = location
+  const { currentUser: { menuTree } } = props
+
+  const [panes, setPanes] = useState([
+    { title: '首页', key: '/home', closable: false },
+    // { title: '测试标签1', key: '2' },
+    // { title: '测试标签2', key: '3' },
+    // { title: 'Crud', key: '/demo/crud' },
+    // { title: '测试标签3', key: '4' },
+    // { title: '测试标签4', key: '5' },
+    // { title: '测试标签5', key: '6' },
+    // { title: '测试标签6', key: '7' },
+    // { title: '测试标签7', key: '8' },
+    // { title: '测试标签8', key: '9' },
+    // { title: '测试标签9', key: '10' },
+    // { title: '测试标签10', key: '11' },
+    // { title: '测试标签11', key: '12' },
+    // { title: '测试标签12', key: '13' }
+  ])
+  const [activeKey, setActiveKey] = useState('')
+  const [allPath, setAllPath] = useState([])
+
+  const checkPaneExist = (path) => {
+    let isExist = false
+    for (let i = 0; i < panes.length; i++) {
+      if (panes[i].key === path) {
+        isExist = true
+        break
+      }
+    }
+    if (!isExist) {
+      const p = allPath.find((item) => {
+        return item.path === path
+      })
+      if (p) {
+        const newPanes = panes.slice()
+        newPanes.push({
+          title: p.name,
+          key: path
+        })
+        setPanes(newPanes)
+      }
+    }
+  }
+
+  // 初始化
+  useEffect(() => {
+
+    const list = []
+    const loopPath = (arr) => {
+      arr.forEach(item => {
+        list.push(item);
+        if (item.hasSun) {
+          const clist = item.children.slice()
+          loopPath(clist)
+        }
+      })
+    }
+    loopPath(menuTree)
+    setAllPath(list)
+
+    let isExist = false
+    for (let i = 0; i < panes.length; i++) {
+      if (panes[i].key === pathname) {
+        isExist = true
+        break
+      }
+    }
+    if (!isExist) {
+      const p = list.find((item) => {
+        return item.path === pathname
+      })
+      if (p) {
+        const newPanes = panes.slice()
+        newPanes.push({
+          title: p.name,
+          key: pathname
+        })
+        setPanes(newPanes)
+      }
+    }
+
+    setActiveKey(pathname)
+  }, [])
+
+  const onChange = (activekey, fromMenu) => {
+    if (activekey !== activeKey) {
+      setTimeout(() => {
+        setActiveKey(activekey)
+      }, 200)
+      if (!fromMenu) {
+        history.push(activekey)
+      } else {
+        checkPaneExist(activekey)
+      }
+    }
+  }
+
+  const remove = targetKey => {
+    let lastActiveKey = '/home'
+    let lastIndex;
+    panes.forEach((pane, i) => {
+      if (pane.key === targetKey) {
+        lastIndex = i - 1;
+      }
+    });
+    const lastPanes = panes.filter(pane => pane.key !== targetKey);
+    if (lastPanes.length && activeKey === targetKey) {
+      if (lastIndex >= 0) {
+        lastActiveKey = lastPanes[lastIndex].key;
+      } else {
+        lastActiveKey = lastPanes[0].key;
+      }
+    } else {
+      lastActiveKey = lastPanes[lastPanes.length - 1].key;
+    }
+    setTimeout(() => {
+      setActiveKey(lastActiveKey)
+    }, 200)
+    setPanes(lastPanes)
+    history.push(lastActiveKey)
+  };
+
+  const onEdit = (targetKey, action) => {
+    if (action === 'remove') {
+      remove(targetKey);
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    onChange
+  }))
+
+  return (
+    <div className="sage-tabbar">
+      <Tabs
+        onChange={onChange}
+        activeKey={activeKey}
+        type="editable-card"
+        hideAdd
+        tabBarGutter={4}
+        onEdit={onEdit}
+      >
+        {
+          panes.map(pane => (
+            <TabPane tab={pane.title} key={pane.key} closable={pane.closable} />
+          ))
+        }
+      </Tabs>
+    </div>
+  )
+
+}
+
+export default React.forwardRef(TabBar)

src/components/TabBar/style.less

+.sage-tabbar {
+  margin: -24px -24px -4px;
+  height: 40px;
+  background: #fff;
+  .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
+    // border-bottom: 0px;
+  }
+  .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-ink-bar {
+    // visibility: visible;
+  }
+}

src/global.less

@@ -38,6 +38,14 @@ ol {
   margin: 12px 12px 0 !important;
 }
 
+.ant-pro-page-header-wrap-page-header-warp {
+  display: none !important;
+}
+
+.ant-pro-basicLayout-content .ant-pro-page-header-wrap {
+  margin-top: 0px !important;
+}
+
 // 公共样式
 .sage-hidden {
   display: none !important;

src/layouts/BasicLayout.jsx

@@ -4,12 +4,13 @@
  * https://github.com/ant-design/ant-design-pro-layout
  */
 import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Link, useIntl, connect } from 'umi';
 import { GithubOutlined } from '@ant-design/icons';
 import { Result, Button } from 'antd';
 import Authorized from '@/utils/Authorized';
 import RightContent from '@/components/GlobalHeader/RightContent';
+import TabBar from '@/components/TabBar';
 import { getAuthorityFromRouter } from '@/utils/utils';
 import logo from '../assets/logo.svg';
 
@@ -69,11 +70,14 @@ const BasicLayout = props => {
     location = {
       pathname: '/',
     },
+    currentUser
   } = props;
   /**
    * constructor
    */
 
+  const tabBarRef = useRef()
+
   useEffect(() => {
     if (dispatch) {
       dispatch({
@@ -94,6 +98,12 @@ const BasicLayout = props => {
     }
   }; // get children authority
 
+  const handlePageChange = ({ pathname }) => {
+    if (tabBarRef.current) {
+      tabBarRef.current.onChange(pathname, true)
+    }
+  }
+
   const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || {
     authority: undefined,
   };
@@ -109,6 +119,7 @@ const BasicLayout = props => {
         </Link>
       )}
       onCollapse={handleMenuCollapse}
+      onPageChange={handlePageChange}
       menuItemRender={(menuItemProps, defaultDom) => {
         if (menuItemProps.isUrl || menuItemProps.children || !menuItemProps.path) {
           return defaultDom;
@@ -139,6 +150,7 @@ const BasicLayout = props => {
       {...props}
       {...settings}
     >
+      <TabBar ref={tabBarRef} currentUser={currentUser} />
       <Authorized authority={authorized.authority} noMatch={noMatch}>
         {children}
       </Authorized>
@@ -146,7 +158,8 @@ const BasicLayout = props => {
   );
 };
 
-export default connect(({ global, settings }) => ({
+export default connect(({ user, global, settings }) => ({
+  currentUser: user.currentUser,
   collapsed: global.collapsed,
   settings,
 }))(BasicLayout);