feat: get qiankun global Data (bestchains#15)

config/config.ts

@@ -36,6 +36,8 @@ const banner = `${bannerFlag}
 http://${site}`;
 
 export default defineConfig({
+  initialState: {},
+  model: {},
   /**
    * @name 开启 hash 模式
    * @description 让 build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。

src/app.tsx

@@ -21,24 +21,19 @@ import { basename, IS_PROD, IS_QIAN_KUN } from './constants';
 import { getLocale, setLocale } from './i18n';
 import { Tooltip } from 'antd';
 import { GlobalOutlined } from '@ant-design/icons';
+import { _qiankunData } from '@/utils/helper';
 
 // TODO：qiankun umi 子应用 window.routerBase 问题，目前需要手动设置一下 routerBase 的值
 window.routerBase = basename;
 
-let qiankunHistory: any;
 export const qiankun = {
   // 应用加载之前
   async bootstrap(props) {
     // console.info('app bootstrap:', props);
   },
   // 应用 render 之前触发
   async mount(props) {
-    setTimeout(() => {
-      props.onGlobalStateChange((state, prev) => {
-        // state: 变更后的状态; prev 变更前的状态
-        qiankunHistory = state.history;
-      }, true);
-    }, 50);
+    // do something here before render
   },
   // 应用卸载之后触发
   async unmount(props) {
@@ -70,9 +65,15 @@ const Title = ({ icon }: any) => {
   return <div style={{ color: '#fff' }}>{userName}</div>;
 };
 
-export const layout: RunTimeLayoutConfig = () => {
+export const getInitialState = () => ({});
+
+export const layout: RunTimeLayoutConfig = initState => {
+  if (!_qiankunData.setInitialState) {
+    _qiankunData.setInitialState = initState.setInitialState;
+  }
+  const _theme = initState.initialState?.theme;
   initUnifiedLinkHistory(
-    qiankunHistory || {
+    initState.initialState?.history || {
       goBack: history.back,
       ...history,
     }
@@ -141,18 +142,13 @@ export const layout: RunTimeLayoutConfig = () => {
       //
     },
     token: {
-      colorPrimary: theme.token.colorPrimary,
-      bgLayout: '#ffffff',
-      header: {
-        colorBgHeader: '#272a32',
-        colorHeaderTitle: '#fff',
-        colorTextMenu: '#fff',
-      },
+      colorPrimary: _theme?.colorPrimary || theme.token.colorPrimary,
+      bgLayout: _theme?.colors?.['--background-color'] || '#ffffff',
       sider: {
         // #ffffff
       },
       pageContainer: {
-        colorBgPageContainer: '#f6f6f6',
+        colorBgPageContainer: _theme?.colors?.['--background-color-body'] || '#f6f6f6',
         paddingInlinePageContainerContent: 0,
         paddingBlockPageContainerContent: 0,
       },

src/layouts/index.tsx

@@ -6,14 +6,20 @@ import { getLocale } from '../i18n';
 import Request from '@tenx-ui/utils/es/request';
 import queryString from '@tenx-ui/utils/es/queryString';
 import PageLoading from '@/components/PageLoading';
-import { ConfigProvider } from 'antd';
+import { ConfigProvider, theme } from 'antd';
 import enUS from 'antd/locale/en_US';
 import zhCN from 'antd/locale/zh_CN';
 import dayjs from 'dayjs';
+import { useQiankunGlobalState } from '@/utils/helper';
+import { useModel } from '@@/exports';
 
 const request = Request('');
 
 const Layout: React.FC = () => {
+  // 调用一次即可
+  useQiankunGlobalState();
+  const { qiankun } = useModel('qiankun');
+
   const location = useLocation();
   const [loading, setLoading] = useState(true);
   const query = useMemo(() => queryString.parse(location.search), [location.search]);
@@ -66,7 +72,15 @@ const Layout: React.FC = () => {
     return <PageLoading />;
   }
   return (
-    <ConfigProvider locale={locale === 'zh-cn' ? zhCN : enUS}>
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: qiankun?.theme?.colorPrimary,
+        },
+        algorithm: qiankun?.theme?.isDark ? theme.darkAlgorithm : undefined,
+      }}
+      locale={locale === 'zh-cn' ? zhCN : enUS}
+    >
       <Outlet />
     </ConfigProvider>
   );

src/models/qiankun.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export default () => {
+  const [qiankun, setQiankun] = React.useState({});
+
+  return { qiankun, setQiankun };
+};

src/utils/helper.tsx

@@ -0,0 +1,27 @@
+/**
+ * Licensed Materials - Property of tenxcloud.com
+ * (C) Copyright 2023 TenxCloud. All Rights Reserved.
+ */
+
+/**
+ * hooks
+ * @author songsz
+ * @date 2023-03-16
+ */
+import * as React from 'react';
+import { useModel } from '@umijs/max';
+
+export let _qiankunData = {};
+const useQiankunGlobalState = () => {
+  const u = useModel('@@qiankunStateFromMaster');
+  const { setQiankun } = useModel('qiankun');
+  React.useEffect(() => {
+    u.onGlobalStateChange((state, prev) => {
+      // state: 变更后的状态; prev 变更前的状态
+      setQiankun(state);
+      // 给 app.tsx layout 使用
+      _qiankunData?.setInitialState?.(state);
+    }, true);
+  }, [setQiankun]);
+};
+export { useQiankunGlobalState };