-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
342 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { Spin } from 'antd'; | ||
| import { memo } from 'react'; | ||
|
|
||
| const LayoutSpin = memo(() => { | ||
| return ( | ||
| <div className="supense-loading"> | ||
| <Spin size="large" /> | ||
| </div> | ||
| ); | ||
| }); | ||
|
|
||
| export default LayoutSpin; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import type { RefObject, ReactNode } from 'react'; | ||
| import React, { Suspense, memo, useState, useRef, useEffect } from 'react'; | ||
| import { createPortal } from 'react-dom'; | ||
| import { useLocation, useOutlet } from 'react-router-dom'; | ||
| import { useAppSelector } from '@/store/hooks'; | ||
| import LayoutSpin from '@/components/LayoutSpin'; | ||
|
|
||
| interface Props extends ComponentReactElement { | ||
| include?: Array<string>; | ||
| maxLen?: number; | ||
| } | ||
| export const KeepAlive = memo(({ maxLen = 10 }: Props) => { | ||
| const ele = useOutlet(); | ||
| const location = useLocation(); | ||
| const activeName = location.pathname; | ||
| const multiTabs = useAppSelector((state) => state.route.multiTabs); | ||
| const levelAsyncRouter = useAppSelector((state) => state.route.levelAsyncRouter); | ||
|
|
||
| const containerRef = useRef<HTMLDivElement>(null); | ||
| const [cacheReactNodes, setCacheReactNodes] = useState<Array<{ name: string; ele?: ReactNode }>>( | ||
| [], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (!activeName) { | ||
| return; | ||
| } | ||
| const include = multiTabs.map((i) => i.key); | ||
| const levelRouter = levelAsyncRouter.map((i) => i.path); | ||
| setCacheReactNodes((reactNodes) => { | ||
| // 缓存超过上限的 | ||
| if (reactNodes.length >= maxLen) { | ||
| reactNodes = reactNodes.slice(0, 1); | ||
| } | ||
| // 添加 | ||
| const reactNode = reactNodes.find((res) => res.name === activeName); | ||
| if (!reactNode) { | ||
| reactNodes.push({ | ||
| name: activeName, | ||
| ele: ele, | ||
| }); | ||
| } else { | ||
| // 权限判断 | ||
| const nodeParom = reactNodes | ||
| .filter((i) => !levelRouter.includes(i.name)) | ||
| .map((i) => i.name); | ||
| const reactIndex = reactNodes.findIndex((res) => nodeParom.includes(res.name)); | ||
| if (reactIndex !== -1) reactNodes[reactIndex].ele = ele; | ||
| } | ||
|
|
||
| // 缓存路由列表和标签页列表同步 | ||
| if (include) { | ||
| return reactNodes.filter((i) => include.includes(i.name)); | ||
| } | ||
| return reactNodes; | ||
| }); | ||
| }, [activeName, maxLen, multiTabs, levelAsyncRouter]); | ||
|
|
||
| return ( | ||
| <> | ||
| <div ref={containerRef} className="keep-alive" /> | ||
| {cacheReactNodes.map((i) => { | ||
| return ( | ||
| <Component | ||
| active={i.name === activeName} | ||
| renderDiv={containerRef} | ||
| name={i.name} | ||
| key={i.name} | ||
| > | ||
| {i.ele} | ||
| </Component> | ||
| ); | ||
| })} | ||
| </> | ||
| ); | ||
| }); | ||
|
|
||
| export interface ComponentReactElement { | ||
| children?: ReactNode | ReactNode[]; | ||
| } | ||
|
|
||
| interface ComponentProps extends ComponentReactElement { | ||
| active: boolean; | ||
| name: string; | ||
| renderDiv: RefObject<HTMLDivElement>; | ||
| } | ||
|
|
||
| export const Component: React.FC<ComponentProps> = ({ active, children, name, renderDiv }) => { | ||
| const [targetElement] = useState(() => document.createElement('div')); | ||
| const activatedRef = useRef(false); | ||
| activatedRef.current = activatedRef.current || active; | ||
|
|
||
| useEffect(() => { | ||
| if (active) { | ||
| renderDiv.current?.appendChild(targetElement); | ||
| } else { | ||
| try { | ||
| renderDiv.current?.removeChild(targetElement); | ||
| // eslint-disable-next-line no-empty | ||
| } catch (e) {} | ||
| } | ||
| }, [active, name, renderDiv, targetElement]); | ||
|
|
||
| useEffect(() => { | ||
| targetElement.setAttribute('id', name); | ||
| }, [name, targetElement]); | ||
|
|
||
| return ( | ||
| <Suspense fallback={<LayoutSpin />}> | ||
| {activatedRef.current && createPortal(children, targetElement)} | ||
| </Suspense> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { Tabs } from 'antd'; | ||
| import { memo, useEffect, useMemo } from 'react'; | ||
| import { useNavigate, useLocation } from 'react-router-dom'; | ||
| import { useAppDispatch, useAppSelector } from '@/store/hooks'; | ||
| import { findRouteByPath, routeListToMenu } from '@/router/utils'; | ||
| import { setStoreMultiTabs } from '@/store/modules/route'; | ||
| import defaultRoute from '@/router/modules'; | ||
|
|
||
| const TabsPage = memo(() => { | ||
| const location = useLocation(); | ||
| const navigate = useNavigate(); | ||
| const dispatch = useAppDispatch(); | ||
| const menuList = routeListToMenu(defaultRoute); | ||
| const asyncRouter = useAppSelector((state) => state.route.asyncRouter); | ||
| const multiTabs = useAppSelector((state) => state.route.multiTabs); | ||
|
|
||
| const tabsItem = useMemo(() => { | ||
| return multiTabs.map((i) => { | ||
| const routeBy = findRouteByPath(i.key, menuList); | ||
| return { | ||
| key: i.key, | ||
| label: routeBy?.label, | ||
| }; | ||
| }); | ||
| }, [multiTabs]); | ||
|
|
||
| const handleTabsList = (pathName: string, type: 'add' | 'delete') => { | ||
| const oldKeyAliveList = [...multiTabs]; | ||
|
|
||
| const tabIndex = oldKeyAliveList.findIndex((i) => i.key === pathName); | ||
| switch (type) { | ||
| case 'add': | ||
| if (tabIndex === -1) { | ||
| oldKeyAliveList.push({ key: pathName }); | ||
| } | ||
| break; | ||
| case 'delete': | ||
| if (tabIndex !== -1) oldKeyAliveList.splice(tabIndex, 1); | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
|
|
||
| dispatch(setStoreMultiTabs(oldKeyAliveList)); | ||
| }; | ||
|
|
||
| const onEdit = ( | ||
| targetKey: React.MouseEvent | React.KeyboardEvent | string, | ||
| action: 'add' | 'remove', | ||
| ) => { | ||
| if (action === 'remove') { | ||
| const muIndex = multiTabs.findIndex((i) => i.key === targetKey); | ||
| if (muIndex === multiTabs.length - 1) navigate(multiTabs[muIndex - 1].key); | ||
| else navigate(multiTabs[multiTabs.length - 1].key); | ||
| handleTabsList(targetKey as string, 'delete'); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (location.pathname === '/') { | ||
| if (asyncRouter.length) navigate(asyncRouter[0].path); | ||
| return; | ||
| } | ||
| handleTabsList(location.pathname, 'add'); | ||
| }, [location.pathname]); | ||
|
|
||
| return ( | ||
| <Tabs | ||
| hideAdd | ||
| activeKey={location.pathname} | ||
| type={tabsItem.length > 1 ? 'editable-card' : 'card'} | ||
| onChange={(key) => navigate(key)} | ||
| onEdit={onEdit} | ||
| tabBarStyle={{ | ||
| margin: 0, | ||
| }} | ||
| items={tabsItem} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| export default TabsPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.