feat: 添加主题变更全局事件监听

src/containers/App/store/reducer.js

@@ -92,7 +92,6 @@ const appReducer = (state = initialState, action) => {
       // 临时补充messageVoice。后续需要加到AppConfig中。
       action.data && action.data.hasOwnProperty('messageVoice') && (window.globalConfig.messageVoice = action.data.messageVoice)
       action.data && action.data.hasOwnProperty('topMenu') && (window.globalConfig.topMenu = action.data.topMenu)
-      action.data && action.data.hasOwnProperty('navTheme') && (window.globalConfig.navTheme = action.data.navTheme)
 
 
       // eslint-disable-next-line no-undef

src/layouts/BasicLayout.js

@@ -358,7 +358,7 @@ const Layout = (props) => {
         title={props.global.title}
         route={props.route}
         location={location}
-        navTheme={props.global?.navTheme ?? 'dark'}
+        navTheme={props.global?.variableTheme?.navTheme ?? 'dark'}
         mode="MDI"
         fixedHeader
         headerHeight={52}

src/render.js

@@ -218,10 +218,64 @@ export const AppInitState = () => {
     };
   };
 
+  // 添加主题变更事件监听
+  const initAppTheme = () => {
+    const hasThemeChanged = (preTheme, theme) => {
+      if (!preTheme && !theme) return false
+      if (
+        preTheme && theme &&
+       (!theme.primaryColor || theme.primaryColor === preTheme.primaryColor) &&
+       (!theme.navTheme || theme.navTheme === preTheme.navTheme) &&
+       (!theme.headerPrimaryColor || theme.headerPrimaryColor === preTheme.headerPrimaryColor)
+      ) return false
+      return true
+    }
+    /**
+     * @param {Object} theme
+     *     primaryColor:
+     *     navTheme: "dark" or "light"
+     *     headerPrimaryColor:
+     */
+    window.share && window.share.event && window.share.event.on('update:theme', function(theme) {
+      if(!theme || !hasThemeChanged(window.globalConfig.variableTheme, theme)) return;
+      
+      const preVariableTheme = window.globalConfig.variableTheme ?? {};
+      const { 
+        primaryColor: prePrimaryColor, 
+        navTheme: preNavTheme,
+        headerPrimaryColor: preHeaderPrimaryColor,
+      } = preVariableTheme;
+      const { primaryColor, navTheme, headerPrimaryColor } = theme;
+
+      if (primaryColor && primaryColor !== prePrimaryColor) {
+        ConfigProvider.config({
+          prefixCls: customPrefixCls,
+          theme: {
+            primaryColor,
+          }
+        });
+      }
+      if (navTheme && navTheme !== preNavTheme) {
+        // do nothing
+      }
+      if (headerPrimaryColor && headerPrimaryColor !== preHeaderPrimaryColor) {
+        registerTheme(customPrefixCls, {
+          'header-bg-color': headerPrimaryColor,
+        });
+      }
+      
+      // updage global config
+      const variableTheme = Object.assign({}, preVariableTheme, theme);
+      store.dispatch(actionCreators.getConfig(Object.assign({}, window.globalConfig, { 
+        variableTheme: variableTheme,
+      })));
+    })
+  };
 
   initLocale();
   initMessageVoice();
   initGeteWay();
+  initAppTheme();
 }
 
 const RootContainer = () => {