optimize: 优化tab hook

Author: Ohh-889

src/features/tab/GlobalTab.tsx

@@ -2,15 +2,15 @@ import { PageTab } from '@sa/materials';
 import clsx from 'clsx';
 
 import BetterScroll from '@/components/BetterScroll';
-import { useTheme } from '@/features/theme';
 import { getFullContent, toggleFullContent } from '@/layouts/appStore';
 import { isPC } from '@/utils/agent';
 
 import { setRemoveCacheKey } from '../router/routeStore';
+import { useTheme, useThemeSettings } from '../theme';
 
 import ContextMenu from './TabContextMenu';
 import TabReloadButton from './TabReloadButton';
-import { useTabActions } from './tabHooks';
+import { useTabActions, useTabManager } from './tabHooks';
 import { useTabScroll } from './useTabScroll';
 
 const GlobalTab = () => {
@@ -20,10 +20,14 @@ const GlobalTab = () => {
 
   const { darkMode } = useTheme();
 
-  const { activeTabId, dispatch, isTabRetain, navigate, removeTabById, tabs, themeSettings } = useTabActions();
+  const themeSettings = useThemeSettings();
+
+  const { activeTabId, dispatch, isTabRetain, navigate, removeTabById, tabs } = useTabActions();
 
   const { bsWrapper, setBsScroll, tabRef } = useTabScroll(activeTabId);
 
+  useTabManager();
+
   const fullContent = useAppSelector(getFullContent);
 
   const tabWrapperClass = themeSettings.tab.mode === 'chrome' ? 'items-end' : 'items-center gap-12px';

src/features/tab/TabContextMenu.tsx

@@ -1,8 +1,6 @@
-import { useEmit } from '@sa/hooks';
-import { Dropdown } from 'antd';
 import type { MenuProps } from 'antd';
 
-import { TabEvent } from './tabEnum';
+import { useTabController } from './tabHooks';
 
 interface ContextMenuProps {
   active: boolean;
@@ -39,6 +37,7 @@ function getMenu(options: DropdownOption[]) {
 
 const ContextMenu = ({ children, disabledKeys = [], excludeKeys = [], tabId }: ContextMenuProps) => {
   const { t } = useTranslation();
+  const { clearLeftTabs, clearRightTabs, closeAllTabs, closeCurrentTab, closeOtherTabs } = useTabController();
 
   const options = () => {
     const opts: DropdownOption[] = [
@@ -79,25 +78,23 @@ const ContextMenu = ({ children, disabledKeys = [], excludeKeys = [], tabId }: C
       });
   };
 
-  const emit = useEmit();
-
   const menu = getMenu(options());
 
   const dropdownAction: Record<App.Global.DropdownKey, () => void> = {
     closeAll() {
-      emit(TabEvent.UPDATE_TABS, TabEvent.CLOSE_ALL);
+      closeAllTabs();
     },
     closeCurrent() {
-      emit(TabEvent.UPDATE_TABS, TabEvent.CLOSE_CURRENT, tabId);
+      closeCurrentTab(tabId);
     },
     closeLeft() {
-      emit(TabEvent.UPDATE_TABS, TabEvent.CLEAR_LEFT_TABS, tabId);
+      clearLeftTabs(tabId);
     },
     closeOther() {
-      emit(TabEvent.UPDATE_TABS, TabEvent.CLOSE_OTHER, tabId);
+      closeOtherTabs(tabId);
     },
     closeRight() {
-      emit(TabEvent.UPDATE_TABS, TabEvent.CLEAR_RIGHT_TABS, tabId);
+      clearRightTabs(tabId);
     }
   };
 
@@ -106,12 +103,12 @@ const ContextMenu = ({ children, disabledKeys = [], excludeKeys = [], tabId }: C
   };
 
   return (
-    <Dropdown
+    <ADropdown
       menu={{ items: menu, onClick: handleClick }}
       trigger={['contextMenu']}
     >
       {children}
-    </Dropdown>
+    </ADropdown>
   );
 };
 

src/features/tab/tabHooks.ts

@@ -1,8 +1,9 @@
-import { useOn } from '@sa/hooks';
+import { useEmit, useOn } from '@sa/hooks';
 
 import { useRoute, useRouter } from '@/features/router';
 import {
   addTab,
+  changeTabLabel,
   selectActiveTabId,
   selectTabs,
   setActiveFirstLevelMenuKey,
@@ -17,34 +18,36 @@ import { useThemeSettings } from '../theme';
 import { filterTabsById, filterTabsByIds, getFixedTabs, getTabByRoute, isTabInTabs } from './shared';
 import { TabEvent } from './tabEnum';
 
-export function useTabActions() {
+export function useUpdateTabs() {
   const dispatch = useAppDispatch();
 
-  const tabs = useAppSelector(selectTabs);
+  /**
+   * 更新标签页
+   *
+   * @param newTabs
+   */
+  function updateTabs(newTabs: App.Global.Tab[]) {
+    dispatch(setTabs(newTabs));
+  }
 
-  const _route = useRoute();
+  return updateTabs;
+}
 
-  const isInit = useRef(false);
+export function useTabActions() {
+  const dispatch = useAppDispatch();
+
+  const tabs = useAppSelector(selectTabs);
 
   const _fixedTabs = getFixedTabs(tabs);
 
-  const _tabIds = tabs.map(tab => tab.id);
+  const updateTabs = useUpdateTabs();
 
-  const themeSettings = useThemeSettings();
+  const _tabIds = tabs.map(tab => tab.id);
 
   const { navigate } = useRouter();
 
   const activeTabId = useAppSelector(selectActiveTabId);
 
-  /**
-   * 更新标签页
-   *
-   * @param newTabs
-   */
-  function updateTabs(newTabs: App.Global.Tab[]) {
-    dispatch(setTabs(newTabs));
-  }
-
   /**
    * 切换激活的标签页
    *
@@ -127,46 +130,6 @@ export function useTabActions() {
     _clearTabs(excludes);
   }
 
-  function _initTabs() {
-    const storageTabs = localStg.get('globalTabs');
-
-    if (themeSettings.tab.cache && storageTabs) {
-      // const tabs = extractTabsByAllRoutes(router.getAllRouteNames(), storageTabs);
-      // dispatch(setTabs(tabs));
-      updateTabs(storageTabs);
-      return storageTabs;
-    }
-
-    return [];
-  }
-
-  function _cacheTabs() {
-    if (!themeSettings.tab.cache) return;
-
-    localStg.set('globalTabs', tabs);
-  }
-
-  function _addTab(route: Router.Route) {
-    const tab = getTabByRoute(route);
-
-    if (!isInit.current) {
-      isInit.current = true;
-
-      const initTabs = _initTabs();
-
-      if (!initTabs || initTabs.length === 0 || (initTabs.length > 0 && !isTabInTabs(tab.id, initTabs))) {
-        dispatch(addTab(tab));
-      }
-    } else if (!isTabInTabs(tab.id, tabs)) {
-      dispatch(addTab(tab));
-    }
-
-    dispatch(setActiveTabId(tab.id));
-
-    const firstLevelRouteName = getActiveFirstLevelMenuKey(route);
-    dispatch(setActiveFirstLevelMenuKey(firstLevelRouteName));
-  }
-
   /**
    * 删除标签页
    *
@@ -192,6 +155,10 @@ export function useTabActions() {
     }
   }
 
+  function removeActiveTab() {
+    removeTabById(activeTabId);
+  }
+
   /**
    * 判断标签页是否保留
    *
@@ -202,18 +169,6 @@ export function useTabActions() {
     return _fixedTabs.some(tab => tab.id === tabId);
   }
 
-  useEffect(() => {
-    _addTab(_route);
-  }, [_route.fullPath]);
-
-  useEventListener(
-    'beforeunload',
-    () => {
-      _cacheTabs();
-    },
-    { target: window }
-  );
-
   useOn(TabEvent.UPDATE_TABS, (eventName: TabEvent, id: string) => {
     // 清除左侧标签页
     if (eventName === TabEvent.CLEAR_LEFT_TABS) return _clearLeftTabs(id);
@@ -236,8 +191,143 @@ export function useTabActions() {
     dispatch,
     isTabRetain,
     navigate,
+    removeActiveTab,
     removeTabById,
-    tabs,
-    themeSettings
+    tabs
+  };
+}
+
+export function useTabController() {
+  const emit = useEmit();
+
+  function _operateTab(eventName: TabEvent, id?: string) {
+    emit(TabEvent.UPDATE_TABS, eventName, id);
+  }
+
+  function clearLeftTabs(id: string) {
+    _operateTab(TabEvent.CLEAR_LEFT_TABS, id);
+  }
+
+  function clearRightTabs(id: string) {
+    _operateTab(TabEvent.CLEAR_RIGHT_TABS, id);
+  }
+
+  function closeCurrentTab(id: string) {
+    _operateTab(TabEvent.CLOSE_CURRENT, id);
+  }
+
+  function closeOtherTabs(id: string) {
+    _operateTab(TabEvent.CLOSE_OTHER, id);
+  }
+
+  function closeAllTabs() {
+    _operateTab(TabEvent.CLOSE_ALL);
+  }
+
+  return {
+    clearLeftTabs,
+    clearRightTabs,
+    closeAllTabs,
+    closeCurrentTab,
+    closeOtherTabs
+  };
+}
+
+export function useTabManager() {
+  const isInit = useRef(false);
+
+  const themeSettings = useThemeSettings();
+
+  const tabs = useAppSelector(selectTabs);
+
+  const dispatch = useAppDispatch();
+
+  const _route = useRoute();
+
+  const updateTabs = useUpdateTabs();
+
+  function _initTabs() {
+    const storageTabs = localStg.get('globalTabs');
+
+    if (themeSettings.tab.cache && storageTabs) {
+      // const tabs = extractTabsByAllRoutes(router.getAllRouteNames(), storageTabs);
+      // dispatch(setTabs(tabs));
+      updateTabs(storageTabs);
+      return storageTabs;
+    }
+
+    return [];
+  }
+
+  function _cacheTabs() {
+    if (!themeSettings.tab.cache) return;
+
+    localStg.set('globalTabs', tabs);
+  }
+
+  function _addTab(route: Router.Route) {
+    const tab = getTabByRoute(route);
+
+    if (!isInit.current) {
+      isInit.current = true;
+
+      const initTabs = _initTabs();
+
+      if (!initTabs || initTabs.length === 0 || (initTabs.length > 0 && !isTabInTabs(tab.id, initTabs))) {
+        dispatch(addTab(tab));
+      }
+    } else if (!isTabInTabs(tab.id, tabs)) {
+      dispatch(addTab(tab));
+    }
+
+    dispatch(setActiveTabId(tab.id));
+
+    const firstLevelRouteName = getActiveFirstLevelMenuKey(route);
+    dispatch(setActiveFirstLevelMenuKey(firstLevelRouteName));
+  }
+
+  useEffect(() => {
+    _addTab(_route);
+  }, [_route.fullPath]);
+
+  useEventListener(
+    'beforeunload',
+    () => {
+      _cacheTabs();
+    },
+    { target: window }
+  );
+}
+
+export function useTabLabel() {
+  const dispatch = useAppDispatch();
+
+  const activeTabId = useAppSelector(selectActiveTabId);
+
+  const tabs = useAppSelector(selectTabs);
+
+  function setTabLabel(label: string, tabId?: string) {
+    const id = tabId || activeTabId;
+
+    const tab = tabs.findIndex(item => item.id === id);
+
+    if (tab < 0) return;
+
+    dispatch(changeTabLabel({ index: tab, label }));
+  }
+
+  function resetTabLabel(tabId?: string) {
+    const id = tabId || activeTabId;
+
+    const tab = tabs.findIndex(item => item.id === id);
+
+    if (tab < 0) return;
+
+    dispatch(changeTabLabel({ index: tab }));
+  }
+
+  return {
+    resetTabLabel,
+    setTabLabel
   };
 }