refactor: multiple tabs logic

src/layouts/dashboard/main.tsx

@@ -7,6 +7,7 @@ import { useResponsive } from '@/theme/hooks';
 
 import { NAV_WIDTH, NAV_COLLAPSED_WIDTH, HEADER_HEIGHT, MULTI_TABS_HEIGHT } from './config';
 import MultiTabs from './multi-tabs';
+import { MultiTabsProvider } from './multi-tabs/multi-tabs-provider';
 
 import { ThemeLayout } from '#/enum';
 
@@ -40,7 +41,13 @@ const Main = forwardRef<HTMLDivElement, Props>(({ offsetTop = false }, ref) => {
           themeStretch ? '' : 'xl:max-w-screen-xl'
         }`}
       >
-        {multiTab ? <MultiTabs offsetTop={offsetTop} /> : <Outlet />}
+        {multiTab ? (
+          <MultiTabsProvider>
+            <MultiTabs offsetTop={offsetTop} />
+          </MultiTabsProvider>
+        ) : (
+          <Outlet />
+        )}
       </div>
     </Content>
   );

src/layouts/dashboard/multi-tabs.tsx → src/layouts/dashboard/multi-tabs/index.tsx

@@ -8,7 +8,6 @@ import styled from 'styled-components';
 
 import { USER_LIST } from '@/_mock/assets';
 import { Iconify } from '@/components/icon';
-import useKeepAlive, { KeepAliveTab } from '@/hooks/web/use-keepalive';
 import { useRouter } from '@/router/hooks';
 import { replaceDynamicParams } from '@/router/hooks/use-current-route-meta';
 import { useSettings } from '@/store/settingStore';
@@ -21,7 +20,9 @@ import {
   OFFSET_HEADER_HEIGHT,
   MULTI_TABS_HEIGHT,
   NAV_HORIZONTAL_HEIGHT,
-} from './config';
+} from '../config';
+
+import { useMultiTabsContext, type KeepAliveTab } from './multi-tabs-provider';
 
 import { MultiTabOperation, ThemeLayout } from '#/enum';
 
@@ -43,13 +44,14 @@ export default function MultiTabs({ offsetTop = false }: Props) {
   const {
     tabs,
     activeTabRoutePath,
+    setTabs,
     closeTab,
     refreshTab,
     closeOthersTab,
     closeAll,
     closeLeft,
     closeRight,
-  } = useKeepAlive();
+  } = useMultiTabsContext();
 
   /**
    * Special Tab Label Render
@@ -294,6 +296,7 @@ export default function MultiTabs({ offsetTop = false }: Props) {
     const newTabs = Array.from(tabs);
     const [movedTab] = newTabs.splice(source.index, 1);
     newTabs.splice(destination.index, 0, movedTab);
+    setTabs(newTabs);
   };
 
   /**

src/hooks/web/use-keepalive.ts → src/layouts/dashboard/multi-tabs/multi-tabs-provider.tsx

@@ -1,26 +1,54 @@
 import { isEmpty } from 'ramda';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import { useCurrentRouteMeta, useRouter } from '@/router/hooks';
 import { replaceDynamicParams } from '@/router/hooks/use-current-route-meta';
 
 import type { RouteMeta } from '#/router';
 
-const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
-
 export type KeepAliveTab = RouteMeta & {
   children: any;
 };
-export default function useKeepAlive() {
-  console.log('useKeepAlive');
-  const { push } = useRouter();
-
-  // current route meta
-  const currentRouteMeta = useCurrentRouteMeta();
+type MultiTabsContextType = {
+  tabs: KeepAliveTab[];
+  activeTabRoutePath?: string;
+  setTabs: (tabs: KeepAliveTab[]) => void;
+  closeTab: (path?: string) => void;
+  closeOthersTab: (path?: string) => void;
+  closeAll: () => void;
+  closeLeft: (path: string) => void;
+  closeRight: (path: string) => void;
+  refreshTab: (path: string) => void;
+};
+const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;
 
+const MultiTabsContext = createContext<MultiTabsContextType>({
+  tabs: [],
+  activeTabRoutePath: '',
+  setTabs: () => {},
+  closeTab: () => {},
+  closeOthersTab: () => {},
+  closeAll: () => {},
+  closeLeft: () => {},
+  closeRight: () => {},
+  refreshTab: () => {},
+});
+
+export function MultiTabsProvider({ children }: PropsWithChildren) {
+  const { push } = useRouter();
   // tabs
   const [tabs, setTabs] = useState<KeepAliveTab[]>([]);
 
+  // current route meta
+  const currentRouteMeta = useCurrentRouteMeta();
   // active tab
   const activeTabRoutePath = useMemo(() => {
     if (!currentRouteMeta) return '';
@@ -138,17 +166,34 @@ export default function useKeepAlive() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentRouteMeta]);
 
-  return {
-    tabs,
-    activeTabRoutePath,
-    setTabs,
-    closeTab,
-    closeOthersTab,
-    refreshTab,
-    closeAll,
-    closeLeft,
-    closeRight,
-  };
+  const defaultValue: MultiTabsContextType = useMemo(
+    () => ({
+      tabs,
+      activeTabRoutePath,
+      setTabs,
+      closeTab,
+      closeOthersTab,
+      refreshTab,
+      closeAll,
+      closeLeft,
+      closeRight,
+    }),
+    [
+      activeTabRoutePath,
+      closeAll,
+      closeLeft,
+      closeOthersTab,
+      closeRight,
+      closeTab,
+      refreshTab,
+      tabs,
+    ],
+  );
+  return <MultiTabsContext.Provider value={defaultValue}>{children}</MultiTabsContext.Provider>;
+}
+
+export function useMultiTabsContext() {
+  return useContext(MultiTabsContext);
 }
 
 function getTimeStamp() {

src/pages/components/animate/views/background/container.tsx

@@ -1,5 +1,5 @@
 import { m } from 'framer-motion';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import Cover3 from '@/assets/images/cover/cover_3.jpg';
 import MotionContainer from '@/components/animate/motion-container';
@@ -14,9 +14,6 @@ export default function ContainerView({ variant }: Props) {
   const varients = useMemo(() => getVariant(variant), [variant]);
   const isKenburns = variant.includes('kenburns');
 
-  useEffect(() => {
-    console.log(varients);
-  });
   return (
     <div
       key={variant}

src/pages/dashboard/analysis/index.tsx

@@ -6,7 +6,6 @@ import glass_buy from '@/assets/images/glass/ic_glass_buy.png';
 import glass_message from '@/assets/images/glass/ic_glass_message.png';
 import glass_users from '@/assets/images/glass/ic_glass_users.png';
 import { Iconify } from '@/components/icon';
-import useKeepAlive from '@/hooks/web/use-keepalive';
 import ChartBar from '@/pages/components/chart/view/chart-bar';
 import ChartMixed from '@/pages/components/chart/view/chart-mixed';
 import ChartPie from '@/pages/components/chart/view/chart-pie';
@@ -21,10 +20,8 @@ import AnalysisTrafficCard from './analysis-traffic-card';
 
 function Analysis() {
   const theme = useThemeToken();
-  const { closeTab } = useKeepAlive();
   return (
     <div className="p-2">
-      <button onClick={() => closeTab()}>close tab</button>
       <Typography.Title level={2}>Hi, Welcome back 👋</Typography.Title>
       <Row gutter={[16, 16]} justify="center">
         <Col lg={6} md={12} span={24}>