feat: ✨ 添加刷新功能

anyone-yuren · Jan 7, 2024 · cbdc7ff · cbdc7ff
1 parent 6f08208
commit cbdc7ff
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/apps/admin/src/layout/index.tsx b/apps/admin/src/layout/index.tsx
@@ -1,6 +1,6 @@
 import { Layout } from 'antd';
 import ErrorBoundary from 'antd/es/alert/ErrorBoundary';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import '@/gbeata';
 
 import { AppLogo } from '@/components/AppLogo';
@@ -14,11 +14,13 @@ import useStyles from './index.style';
 import LayoutMenu from './menu';
 
 export const BasicLayout = (props: any) => {
+  const { state } = useLocation();
+  const { key = 'key' } = state || {};
   useTitle();
   const { Sider, Content } = Layout;
   const { styles } = useStyles();
 
-  const getMenuFold = useAppSelector((state) => state.app.appConfig?.menuSetting?.menuFold);
+  const getMenuFold = useAppSelector((st) => st.app.appConfig?.menuSetting?.menuFold);
 
   return (
     <Layout className={styles.layout_wrapper}>
@@ -30,7 +32,7 @@ export const BasicLayout = (props: any) => {
         <LayoutHeader />
         <Content>
           <ErrorBoundary>
-            <Outlet />
+            <Outlet key={key} />
           </ErrorBoundary>
         </Content>
       </Layout>

diff --git a/apps/admin/src/layout/tags/index.tsx b/apps/admin/src/layout/tags/index.tsx
@@ -8,7 +8,7 @@ import { searchRoute } from '@/utils';
 
 import { basicRoutes } from '@/router';
 import { useAppDispatch, useAppSelector } from '@/stores';
-import { addVisitedTags, closeAllTags, closeTagByKey, closeTagsByType } from '@/stores/modules/tags';
+import { addVisitedTags, closeAllTags, closeTagByKey, closeTagsByType, updateVisitedTags } from '@/stores/modules/tags';
 
 import { TagItem } from './components';
 import useStyles from './index.module.style';
@@ -166,7 +166,17 @@ const LayoutTags: FC = () => {
     navigate(path);
   };
 
-  const handleReload = () => {};
+  function getKey() {
+    return new Date().getTime().toString();
+  }
+  const handleReload = () => {
+    // 刷新当前路由，页面不刷新
+    const index = visitedTags.findIndex((tab) => tab.fullPath === activeTag);
+    if (index >= 0) {
+      // 这个是react的特性，key变了，组件会卸载重新渲染
+      navigate(activeTag, { replace: true, state: { key: getKey() } });
+    }
+  };
 
   return (
     <div className={styles.layout_tags}>
@@ -182,6 +192,7 @@ const LayoutTags: FC = () => {
           {visitedTags.map((item: RouteObject) => (
             <span key={item.fullPath} data-path={item.fullPath}>
               <TagItem
+                key={item.key}
                 name={item.meta?.title!}
                 active={activeTag === item.fullPath}
                 fixed={item.meta?.affix}

diff --git a/apps/admin/src/router/types.ts b/apps/admin/src/router/types.ts
@@ -23,6 +23,7 @@ export interface RouteObject extends NonIndexRouteObject {
   index?: false;
   meta?: MetaProps;
   name?: string;
+  key?: string;
 }
 
 export interface AppMenu {