From e53464eed409a7630718be12e15dd92c3a5d616f Mon Sep 17 00:00:00 2001
From: gaoziman <2942894660@qq.com>
Date: Fri, 7 Nov 2025 22:36:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=B8=83=E5=B1=80):=20=E5=9C=A8=E4=B8=BB?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E4=B8=AD=E9=9B=86=E6=88=90=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=A1=B5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在面包屑导航下方添加 TabBar 组件
- 实现路由变化时自动添加标签页
- 首页标签自动设置为不可关闭
- 添加必要的依赖项导入
- 完善标签页与路由的联动机制
---
 src/layout.tsx | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/layout.tsx b/src/layout.tsx
index df0c733..7f9dfcb 100644
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -3,22 +3,23 @@ import { Switch, Route, Redirect, useHistory } from 'react-router-dom';
 import { Layout, Menu, Breadcrumb, Spin } from '@arco-design/web-react';
 import cs from 'classnames';
 import {
-  IconDashboard,
-  IconList,
+  IconUser,
   IconMenuFold,
   IconMenuUnfold,
 } from '@arco-design/web-react/icon';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import qs from 'query-string';
 import NProgress from 'nprogress';
 import Navbar from './components/NavBar';
 import Footer from './components/Footer';
+import TabBar from './components/TabBar';
 import useRoute, { IRoute } from '@/routes';
 import { isArray } from './utils/is';
 import useLocale from './utils/useLocale';
 import getUrlParams from './utils/getUrlParams';
 import lazyload from './utils/lazyload';
 import { GlobalState } from './store';
+import { TabItem } from './types/tabs';
 import styles from './style/layout.module.less';
 
 const MenuItem = Menu.Item;
@@ -50,10 +51,8 @@ function NotFound() {
 
 function getIconFromKey(key) {
   switch (key) {
-    case 'dashboard':
-      return <IconDashboard className={styles.icon} />;
-    case 'list':
-      return <IconList className={styles.icon} />;
+    case 'user-management':
+      return <IconUser className={styles.icon} />;
     default:
       return <div className={styles['icon-empty']} />;
   }
@@ -89,6 +88,7 @@ function getFlattenRoutes(routes) {
 function PageLayout() {
   const urlParams = getUrlParams();
   const history = useHistory();
+  const dispatch = useDispatch();
   const pathname = history.location.pathname;
   const currentComponent = qs.parseUrl(pathname).url.slice(1);
   const locale = useLocale();
@@ -210,7 +210,26 @@ function PageLayout() {
     const routeConfig = routeMap.current.get(pathname);
     setBreadCrumb(routeConfig || []);
     updateMenuStatus();
-  }, [pathname]);
+
+    // 自动添加标签页
+    const currentRoute = flattenRoutes.find(
+      (route) => pathname === `/${route.key}`
+    );
+    if (currentRoute) {
+      const isFirstRoute = currentRoute.key === defaultRoute;
+      const newTab: TabItem = {
+        key: currentRoute.key,
+        name: currentRoute.name,
+        path: pathname,
+        closable: !isFirstRoute, // 首页标签不可关闭
+      };
+
+      dispatch({
+        type: 'tabs/addTab',
+        payload: newTab,
+      });
+    }
+  }, [pathname, flattenRoutes, defaultRoute, dispatch]);
 
   return (
     <Layout className={styles.layout}>
@@ -267,6 +286,7 @@ function PageLayout() {
                   </Breadcrumb>
                 </div>
               )}
+              <TabBar />
               <Content>
                 <Switch>
                   {flattenRoutes.map((route, index) => {