optimize: 优化主题设置和tabs缓存的相关代码

Author: Ohh-889

src/features/antdConfig/AntdContextHolder.tsx

@@ -1,9 +1,6 @@
 import { App } from 'antd';
 import type { PropsWithChildren } from 'react';
-
 import '@ant-design/v5-patch-for-react-19';
-import { cacheTabs } from '@/store/slice/tab';
-import { cacheThemeSettings } from '@/store/slice/theme';
 
 function ContextHolder() {
   const { message, modal, notification } = App.useApp();
@@ -14,17 +11,6 @@ function ContextHolder() {
 }
 
 const AppProvider = ({ children }: PropsWithChildren) => {
-  const dispatch = useAppDispatch();
-
-  useEventListener(
-    'beforeunload',
-    () => {
-      dispatch(cacheTabs());
-      dispatch(cacheThemeSettings());
-    },
-    { target: window }
-  );
-
   return (
     <App className="h-full">
       <ContextHolder />

src/features/antdConfig/AntdProvider.tsx

@@ -2,8 +2,10 @@ import type { WatermarkProps } from 'antd';
 import type { PropsWithChildren } from 'react';
 
 import { info } from '@/constants/app';
+import { useThemeSettings } from '@/hooks/common/theme';
 import { antdLocales } from '@/locales/antd';
-import { getThemeSettings, themeColors } from '@/store/slice/theme';
+import { selectTabs } from '@/store/slice/tab';
+import { themeColors } from '@/store/slice/theme';
 import { getAntdTheme, setupThemeVarsToHtml } from '@/store/slice/theme/shared';
 import { localStg } from '@/utils/storage';
 
@@ -22,10 +24,12 @@ const WATERMARK_CONFIG = {
 } satisfies WatermarkProps;
 
 function useAntdTheme() {
-  const themeSettings = useAppSelector(getThemeSettings);
+  const themeSettings = useThemeSettings();
 
   const colors = useAppSelector(themeColors);
 
+  const tabs = useAppSelector(selectTabs);
+
   const { darkMode } = useTheme();
 
   const antdTheme = getAntdTheme(colors, darkMode, themeSettings.tokens);
@@ -35,6 +39,32 @@ function useAntdTheme() {
     localStg.set('themeColor', colors.primary);
   }, [colors, themeSettings]);
 
+  useMount(() => {
+    function cacheThemeSettings() {
+      const isProd = import.meta.env.PROD;
+
+      if (!isProd) return;
+      localStg.set('themeSettings', themeSettings);
+    }
+
+    function cacheTabs() {
+      if (!themeSettings.tab.cache) return;
+      localStg.set('globalTabs', tabs);
+    }
+
+    window.addEventListener('beforeunload', () => {
+      cacheThemeSettings();
+      cacheTabs();
+    });
+
+    return () => {
+      window.removeEventListener('beforeunload', () => {
+        cacheThemeSettings();
+        cacheTabs();
+      });
+    };
+  });
+
   console.info(`%c${info}`, `color: ${colors.primary}`);
 
   return { antdTheme, watermarkText: themeSettings.watermark.text, watermarkVisible: themeSettings.watermark.visible };

src/layouts/modules/GlobalContent.tsx

@@ -2,37 +2,26 @@ import clsx from 'clsx';
 import KeepAlive, { useKeepAliveRef } from 'keepalive-for-react';
 
 import { getReloadFlag } from '@/store/slice/app';
-import { getRemoveCacheKey, selectCacheRoutes } from '@/store/slice/route';
-import { getThemeSettings } from '@/store/slice/theme';
+import { selectCacheRoutes, selectRemoveCacheKey } from '@/store/slice/route';
 import './transition.css';
 
 interface Props {
   /** Show padding for content */
   closePadding?: boolean;
 }
 
-const useGetCacheKey = () => {
-  const { pathname, search } = useLocation();
-
-  const cacheKey = useMemo(() => {
-    return (pathname + search).slice(1).split('/').join('_');
-  }, [pathname, search]);
-
-  return cacheKey;
-};
-
 const GlobalContent: FC<Props> = memo(({ closePadding }) => {
   const currentOutlet = useOutlet();
-
+  const { pathname } = useLocation();
   const aliveRef = useKeepAliveRef();
 
-  const removeCacheKey = useAppSelector(getRemoveCacheKey);
+  const removeCacheKey = useAppSelector(selectRemoveCacheKey);
 
   const cacheKeys = useAppSelector(selectCacheRoutes);
 
-  const reload = useAppSelector(getReloadFlag);
+  console.log(cacheKeys, 'cacheKeys');
 
-  const cacheKey = useGetCacheKey();
+  const reload = useAppSelector(getReloadFlag);
 
   // const themeSetting = useAppSelector(getThemeSettings);
 
@@ -51,7 +40,7 @@ const GlobalContent: FC<Props> = memo(({ closePadding }) => {
   return (
     <div className={clsx('h-full flex-grow bg-layout', { 'p-16px': !closePadding })}>
       <KeepAlive
-        activeCacheKey={cacheKey}
+        activeCacheKey={pathname}
         aliveRef={aliveRef}
         include={cacheKeys}
       >

src/store/slice/theme/index.ts

@@ -2,10 +2,6 @@ import { createSelector, createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { getPaletteColorByNumber } from '@sa/color';
 
-import { localStg } from '@/utils/storage';
-
-import type { AppThunk } from '../..';
-
 import { initThemeSettings, toggleAuxiliaryColorModes, toggleGrayscaleMode } from './shared';
 
 interface InitialStateType {
@@ -157,15 +153,6 @@ export const themeColors = createSelector([getThemeSettings], ({ isInfoFollowPri
   return colors;
 });
 
-/** Cache theme settings */
-export const cacheThemeSettings = (): AppThunk => (_, getState) => {
-  const isProd = import.meta.env.PROD;
-
-  if (!isProd) return;
-
-  localStg.set('themeSettings', getThemeSettings(getState()));
-};
-
 export const settingsJson = createSelector([getThemeSettings], settings => {
   return JSON.stringify(settings);
 });