--- highlight: atom-one-dark theme: cyanosis --- # 往期回顾 > [前端框架搭建——从零开始搭建一个高颜值后台管理系统全栈框架(一)](https://juejin.cn/post/7233966272991264825) > > [后端框架搭建——从零开始搭建一个高颜值后台管理系统全栈框架(二)](https://juejin.cn/post/7236736926639554615) > > [实现登录功能jwt or token+redis？——从零开始搭建一个高颜值后台管理系统全栈框架(三)](https://juejin.cn/spost/7240475280217145405) > > [封装axios，让请求变得丝滑——从零开始搭建一个高颜值后台管理系统全栈框架(四)](https://juejin.cn/post/7243393786469302329) > > [实现前后端全自动化部署，解放你的双手。——从零开始搭建一个高颜值后台管理系统全栈框架(五)](https://juejin.cn/post/7245613765693702201) > > [雪花算法，附件方案，邮箱验证，修改密码。——从零开始搭建一个高颜值后台管理系统全栈框架(六)](https://juejin.cn/post/7248219648054378554) > > [基于react-router v6实现动态菜单、动态路由。内含vue动态路由实现。——从零开始搭建一个高颜值后台管理系统全栈框架(七）](https://juejin.cn/post/7251182449400709177) > > [通过RBAC模型实现前后端动态菜单和动态路由——从零开始搭建一个高颜值后台管理系统全栈框架(八)](https://juejin.cn/post/7253736317934567481) > > [使用黑科技实现前端按钮权限控制，太优雅了。——从零开始搭建一个高颜值后台管理系统全栈框架(九)](https://juejin.cn/post/7254123931246772280) > > [集成WebSocket实现用户权限变更消息推送，自动刷新。——从零开始搭建一个高颜值后台管理系统全栈框架(十)](https://juejin.cn/post/7257078417651630140) > > [通过ip获取用户登录地点，实现登录日志功能。——从零开始搭建一个高颜值后台管理系统全栈框架(十一)](https://juejin.cn/post/7257511618824355877) > > [使用这个库实现接口鉴权，太简单了。（上）——从零开始搭建一个高颜值后台管理系统全栈框架(十二)](https://juejin.cn/post/7264920710786498572) > > [使用casbin优雅且简洁的实现接口鉴权（下）——从零开始搭建一个高颜值后台管理系统全栈框架(十三)](https://juejin.cn/post/7267568963035447333) # 前言有不少兄弟想让我实现多页签功能，这一期我们就来实现一下。多页签功能我以前实现过，大家可以先看下我以前的文章。以前的文章内容是基于`antd pro`框架实现多页签，这次基于`react-router v6`来实现，原理差不多，稍微改点代码就行了。 > [手把手带你基于ant design pro 5实现多tab页(路由keepalive)](https://juejin.cn/post/7224764099187834938) # 实现思路借助`antd`的`Tabs`组件能够缓存组件的能力，我们只需要把浏览过的路由缓存到一个数组中，交给Tabs渲染就行了。 # 实战 ## 改造src/layouts/index.tsx文件 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70144976a4cc46a4b58cae5158a1b0b6~tplv-k3u1fbpfcp-zoom-1.image) 这里以前是直接渲染页面组件，现在需要给这里加上tabs组件 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/700be6cd9fb244f186ab0ece2be88ccc~tplv-k3u1fbpfcp-zoom-1.image) 写死一个假数据测试一下，因为我们children绑定的时候Outlet组件，所以我们切路由，内容会跟着变化。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/44c4fc320b134fa9a313aa7b7590593a~tplv-k3u1fbpfcp-zoom-1.image) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/afe076c80e9649dba21be43d3f1852c6~tplv-k3u1fbpfcp-zoom-1.image) 样式有点丑，使用Tabs组件的额card类型，并调一下样式 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5931f531f1742baaf8121fb86e78917~tplv-k3u1fbpfcp-zoom-1.image) 这样就好看多了 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dbbaceb7d883411895873b181f69b2b1~tplv-k3u1fbpfcp-zoom-1.image) ## 新加tabs-layout组件多页签的内容可能会有点多，所以把这一块抽出来做成一个单独的组件，新建`src/layouts/tabs-layout.tsx`文件 ```tsx // src/layouts/tabs-layout.tsx import React from "react"; import { Tabs } from 'antd'; import { Outlet } from 'react-router-dom'; const TabsLayout: React.FC = () => { return ( ) }]} type='card' /> ) } export default TabsLayout; ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3700ee02f394bb39a9586e482446083~tplv-k3u1fbpfcp-zoom-1.image) ## 封装获取当前路由信息hook 上面我们tab的label和key都是写死的假数据，现在我们写一个hook获取当前匹配到的路由的名称、路由、图标信息。在动态添加路由的时候，把这些信息可以存到handle属性里。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b4eca57433b48dba8b71e0ce0e1d4de~tplv-k3u1fbpfcp-zoom-1.image) 前面文章有说过，reactr-router v6提供了一个hook可以获取匹配到的路由，正好我们可以使用这个hook，不过这个hook返回的数组，默认最后一个就是当前路由，需要处理一下。 ```tsx // src/hooks/use-match-router/index.tsx import { useEffect, useState } from 'react'; import { useLocation, useMatches, useOutlet } from 'react-router-dom'; interface MatchRouteType { // 菜单名称 title: string; // tab对应的url pathname: string; // 要渲染的组件 children: any; // 路由，和pathname区别是，详情页 pathname是 /:id，routePath是 /1 routePath: string; // 图标 icon?: string; } export function useMatchRoute(): MatchRouteType | undefined { // 获取路由组件实例 const children = useOutlet(); // 获取所有路由 const matches = useMatches(); // 获取当前url const { pathname } = useLocation(); const [matchRoute, setMatchRoute] = useState(); // 监听pathname变了，说明路由有变化，重新匹配，返回新路由信息 useEffect(() => { // 获取当前匹配的路由 const lastRoute = matches.at(-1); if (!lastRoute?.handle) return; setMatchRoute({ title: (lastRoute?.handle as any)?.name, pathname, children, routePath: lastRoute?.pathname || '', icon: (lastRoute?.handle as any)?.icon, }); }, [pathname]) return matchRoute; } ``` 在tabs-layout引入测试一下 ```tsx // src/layouts/tabs-layout.tsx import React from "react"; import { Tabs } from 'antd'; import { useMatchRoute } from '@/hooks/use-match-router'; import { antdIcons } from '@/assets/antd-icons'; const TabsLayout: React.FC = () => { const matchRoute = useMatchRoute(); const getIcon = (icon?: string): React.ReactElement | undefined => { return icon && antdIcons[icon] && React.createElement(antdIcons[icon]); } return ( {getIcon(matchRoute.icon)} {matchRoute.title} ), key: matchRoute.routePath, children: (

{matchRoute.children}

) }] : []} type='card' /> ) } export default TabsLayout; ``` 菜单名称、icon、内容可以正常的显示了 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db862427027f48a5ada7af15a9947dcb~tplv-k3u1fbpfcp-zoom-1.image) ## 封装hook，管理打开过的路由上面永远只能展示最新一个菜单内容，现在我们封装一个hook来管理打开过的页面。使用刚才封装的hook获取当前匹配到的路由信息，发现缓存里已经有了，就不往缓存里添加了，没有则添加到缓存里。 ```tsx // /src/layouts/useTabs.tsx import { useMatchRoute } from '@/hooks/use-match-router'; import { useEffect, useState } from 'react'; export interface KeepAliveTab { title: string; routePath: string; key: string; pathname: string; icon?: any; children: any; } function getKey() { return new Date().getTime().toString(); } export function useTabs() { // 存放页面记录 const [keepAliveTabs, setKeepAliveTabs] = useState([]); // 当前激活的tab const [activeTabRoutePath, setActiveTabRoutePath] = useState(''); const matchRoute = useMatchRoute(); useEffect(() => { if (!matchRoute) return; const existKeepAliveTab = keepAliveTabs.find(o => o.routePath === matchRoute?.routePath); // 如果不存在则需要插入 if (!existKeepAliveTab) { setKeepAliveTabs(prev => [...prev, { title: matchRoute.title, key: getKey(), routePath: matchRoute.routePath, pathname: matchRoute.pathname, children: matchRoute.children, icon: matchRoute.icon, }]); } setActiveTabRoutePath(matchRoute.routePath); }, [matchRoute]) return { tabs: keepAliveTabs, activeTabRoutePath, } } ``` 改造tabs-layout文件，引入上面封装的hook ```tsx // src/layouts/tabs-layout.tsx import React, { useCallback, useMemo } from "react"; import { Tabs } from 'antd'; import { antdIcons } from '@/assets/antd-icons'; import { useTabs } from '@/hooks/use-tabs'; import { router } from '@/router'; const TabsLayout: React.FC = () => { const { activeTabRoutePath, tabs } = useTabs(); const getIcon = (icon?: string): React.ReactElement | undefined => { return icon && antdIcons[icon] && React.createElement(antdIcons[icon]); } const tabItems = useMemo(() => { return tabs.map(tab => ({ label: ( <> {getIcon(tab.icon)} {tab.title} ), key: tab.routePath, children: (

{tab.children}

), closable: tabs.length > 1, // 剩最后一个就不能删除了 })) }, [tabs]); const onTabsChange = useCallback((tabRoutePath: string) => { router.navigate(tabRoutePath); }, []); return ( ) } export default TabsLayout; ``` 效果展示 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56ec8ee29eb34d04a8de1bc4045638f7~tplv-k3u1fbpfcp-zoom-1.image) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47e5cf9e6f144719aac8cbdee7d04559~tplv-k3u1fbpfcp-zoom-1.image) ## 实现删除tab功能 useTabs中实现关闭tab功能 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d653b7b443d40bfb1c37a00a85e4920~tplv-k3u1fbpfcp-zoom-1.image) 在后面导出 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/798b66fdca444c2d9e1c0b95de0fdce1~tplv-k3u1fbpfcp-zoom-1.image) 在tabs-layout中使用closeTab方法 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b4ecc5c62ff4e2abe0ebb90044cd7c1~tplv-k3u1fbpfcp-zoom-1.image) ## 增加右键tab菜单功能，支持关闭、关闭其它、刷新操作改造useTabs增加刷新tab和关闭其它tab方法 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cbbe8d45542249ce9a3ec88ccf395607~tplv-k3u1fbpfcp-zoom-1.image) 改造tab的label字段支持右键菜单功能，这个可以使用antd的`Dropdown`组件。 ```tsx // src/layouts/tabs-layout.tsx import React, { useCallback, useMemo } from "react"; import { Dropdown, Tabs } from 'antd'; import { antdIcons } from '@/assets/antd-icons'; import { KeepAliveTab, useTabs } from '@/hooks/use-tabs'; import { router } from '@/router'; import type { MenuItemType } from 'antd/es/menu/hooks/useItems'; enum OperationType { REFRESH = 'refresh', CLOSE = 'close', CLOSEOTHER = 'close-other', } const TabsLayout: React.FC = () => { const { activeTabRoutePath, tabs, closeTab, refreshTab, closeOtherTab } = useTabs(); const getIcon = (icon?: string): React.ReactElement | undefined => { return icon && antdIcons[icon] && React.createElement(antdIcons[icon]); } const menuItems: MenuItemType[] = useMemo( () => [ { label: '刷新', key: OperationType.REFRESH, }, tabs.length <= 1 ? null : { label: '关闭', key: OperationType.CLOSE, }, tabs.length <= 1 ? null : { label: '关闭其他', key: OperationType.CLOSEOTHER, }, ].filter(o => o !== null) as MenuItemType[], [tabs] ); const menuClick = useCallback(({ key, domEvent }: any, tab: KeepAliveTab) => { domEvent.stopPropagation(); if (key === OperationType.REFRESH) { refreshTab(tab.routePath); } else if (key === OperationType.CLOSE) { closeTab(tab.routePath); } else if (key === OperationType.CLOSEOTHER) { closeOtherTab(tab.routePath); } }, [closeOtherTab, closeTab, refreshTab]); const renderTabTitle = useCallback((tab: KeepAliveTab) => { return ( menuClick(e, tab) }} trigger={['contextMenu']} >

{getIcon(tab.icon)} {tab.title}

) }, [menuItems]); const tabItems = useMemo(() => { return tabs.map(tab => { return { key: tab.routePath, label: renderTabTitle(tab), children: (

{tab.children}

), closable: tabs.length > 1, // 剩最后一个就不能删除了 } }) }, [tabs]); const onTabsChange = useCallback((tabRoutePath: string) => { router.navigate(tabRoutePath); }, []); const onTabEdit = ( targetKey: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove', ) => { if (action === 'remove') { closeTab(targetKey as string); } }; return ( ) } export default TabsLayout; ``` 右键tab菜单效果展示 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10fb0d2a496548b8b0d084f206ce379d~tplv-k3u1fbpfcp-zoom-1.image) ## 把这些方法设置成全局方法，在业务代码中可以主动调用这个可以使用react中`useContext`，可以跨组件使用变量新建`src/layouts/tabs-context.tsx`文件 ```tsx /* eslint-disable @typescript-eslint/no-empty-function */ import { createContext } from 'react' interface KeepAliveTabContextType { refreshTab: (path?: string) => void; closeTab: (path?: string) => void; closeOtherTab: (path?: string) => void; } const defaultValue = { refreshTab: () => { }, closeTab: () => { }, closeOtherTab: () => { }, } export const KeepAliveTabContext = createContext(defaultValue); ``` 在tabs-layout文件中使用这个context，并注入上面那些方法。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/847610bd928e4f728c6fa2aa0988fbda~tplv-k3u1fbpfcp-zoom-1.image) 在业务组件中，可以导入这些方法，然后使用 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c8e96c17772843c6b53e11cf10608fab~tplv-k3u1fbpfcp-zoom-1.image) ## 支持拖拽排序 antd官网有Tabs组件支持拖拽的例子，可以直接拿来用。封装一个可拖拽排序的Tabs组件 ```tsx // src/components/draggable-tab/index.tsx import type { DragEndEvent } from '@dnd-kit/core'; import { DndContext, PointerSensor, useSensor } from '@dnd-kit/core'; import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable, } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; import React, { useEffect, useState } from 'react'; import { Tabs, TabsProps } from 'antd'; import { restrictToHorizontalAxis, } from '@dnd-kit/modifiers'; interface DraggableTabPaneProps extends React.HTMLAttributes { 'data-node-key': string; } const DraggableTabNode = (props: DraggableTabPaneProps) => { const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: props['data-node-key'], }); const style: React.CSSProperties = { ...props.style, transform: CSS.Transform.toString(transform && { ...transform, scaleX: 1 }), transition, }; return React.cloneElement(props.children as React.ReactElement, { ref: setNodeRef, style, ...attributes, ...listeners, }); }; const DraggableTab: React.FC void }> = ({ onItemsChange, ...props }) => { const [items, setItems] = useState(props.items || []); const sensor = useSensor(PointerSensor, { activationConstraint: { distance: 10 } }); const onDragEnd = ({ active, over }: DragEndEvent) => { if (active.id !== over?.id) { setItems((prev) => { const activeIndex = prev.findIndex((i) => i.key === active.id); const overIndex = prev.findIndex((i) => i.key === over?.id); return arrayMove(prev, activeIndex, overIndex); }); } }; useEffect(() => { setItems(props.items || []); }, [props.items]); useEffect(() => { if (onItemsChange) { onItemsChange(items); } }, [items]); return ( ( i.key)} strategy={horizontalListSortingStrategy}> {(node) => ( {node} )} )} {...props} items={items} className='tab-layout' /> ); }; export default DraggableTab; ``` 需要安装几个依赖 ```sh pnpm i @dnd-kit/core pnpm i @dnd-kit/utilities pnpm i @dnd-kit/modifiers ``` 官网给的例子中，card类型的Tabs，拖拽时很卡，调试一段时间，发现`editable-card`类型Tabs会给tab加上`transition`css属性，这个用来添加和删除tab动画用的。但是我们这里拖拽排序的原理是改变元素的transform属性的位移，每次位移都会触发动画，所以就不流畅了，这边写了个样式给`transition`设置成了`none`就行了。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b07475b62bd64326899dabbb73f3e67b~tplv-k3u1fbpfcp-zoom-1.image) 效果展示 ![Kapture 2023-08-18 at 01.16.43.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a5da697bb0a419f97ee4e0119e019c3~tplv-k3u1fbpfcp-watermark.image?) # 最后如果文章对你有帮助，帮忙点个赞，谢谢。项目体验地址：前端仓库地址：后端仓库地址：