diff --git a/config/config.ts b/config/config.ts
index 9d15f0f..09238fb 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -36,6 +36,8 @@ const banner = `${bannerFlag}
http://${site}`;
export default defineConfig({
+ initialState: {},
+ model: {},
/**
* @name 开启 hash 模式
* @description 让 build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。
diff --git a/src/app.tsx b/src/app.tsx
index e518a14..d364680 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -21,11 +21,11 @@ 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) {
@@ -33,12 +33,7 @@ export const qiankun = {
},
// 应用 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
{userName}
;
};
-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,
},
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index a7b9f67..5184ac6 100644
--- a/src/layouts/index.tsx
+++ b/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 ;
}
return (
-
+
);
diff --git a/src/models/qiankun.tsx b/src/models/qiankun.tsx
new file mode 100644
index 0000000..8b2c1b2
--- /dev/null
+++ b/src/models/qiankun.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+export default () => {
+ const [qiankun, setQiankun] = React.useState({});
+
+ return { qiankun, setQiankun };
+};
diff --git a/src/utils/helper.tsx b/src/utils/helper.tsx
new file mode 100644
index 0000000..981136a
--- /dev/null
+++ b/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 };