diff --git a/package.json b/package.json index 416fe85..bfae184 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,6 @@ "echarts": "^5.2.1", "enquire.js": "^2.1.6", "intro.js": "^4.2.2", - "js-cookie": "^2.2.1", "lodash-es": "^4.17.21", "md5": "^2.3.0", "mockjs": "^1.1.0", @@ -59,7 +58,6 @@ "path-to-regexp": "^6.2.0", "pinia": "2.0.0-rc.14", "print-js": "^1.6.0", - "qiankun": "^2.5.1", "qrcode": "^1.4.4", "qrcodejs2": "0.0.2", "resize-observer-polyfill": "^1.5.1", @@ -232,7 +230,6 @@ "path-to-regexp", "pinia", "print-js", - "qiankun", "qrcode", "qs", "resize-observer-polyfill", diff --git a/src/layouts/default/content/index.vue b/src/layouts/default/content/index.vue index d1eadb6..a5ca774 100644 --- a/src/layouts/default/content/index.vue +++ b/src/layouts/default/content/index.vue @@ -13,7 +13,7 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting'; import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting'; import { useContentViewHeight } from './useContentViewHeight'; - import registerApps from '/@/qiankun'; + // import registerApps from '/@/qiankun'; import { useGlobSetting } from '/@/hooks/setting'; export default defineComponent({ name: 'LayoutContent', @@ -26,13 +26,13 @@ const openQianKun = globSetting.openQianKun; useContentViewHeight(); onMounted(() => { - //注册openQianKun - if (openQianKun == 'true') { - if (!window.qiankunStarted) { - window.qiankunStarted = true; - registerApps(); - } - } + // //注册openQianKun + // if (openQianKun == 'true') { + // if (!window.qiankunStarted) { + // window.qiankunStarted = true; + // registerApps(); + // } + // } }); return { prefixCls, diff --git a/src/qiankun/apps.ts b/src/qiankun/apps.ts index 21a1192..a6f0358 100644 --- a/src/qiankun/apps.ts +++ b/src/qiankun/apps.ts @@ -1,22 +1,22 @@ -/** - *微应用apps - * @name: 微应用名称 - 具有唯一性 - * @entry: 微应用入口.必选 - 通过该地址加载微应用， - * @container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上 - * @activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用 - */ -//子应用列表 -const _apps: object[] = []; -for (const key in import.meta.env) { - if (key.includes('VITE_APP_SUB_')) { - const name = key.split('VITE_APP_SUB_')[1]; - const obj = { - name, - entry: import.meta.env[key], - container: '#content', - activeRule: name, - }; - _apps.push(obj); - } -} -export const apps = _apps; +// /** +// *微应用apps +// * @name: 微应用名称 - 具有唯一性 +// * @entry: 微应用入口.必选 - 通过该地址加载微应用， +// * @container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上 +// * @activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用 +// */ +// //子应用列表 +// const _apps: object[] = []; +// for (const key in import.meta.env) { +// if (key.includes('VITE_APP_SUB_')) { +// const name = key.split('VITE_APP_SUB_')[1]; +// const obj = { +// name, +// entry: import.meta.env[key], +// container: '#content', +// activeRule: name, +// }; +// _apps.push(obj); +// } +// } +// export const apps = _apps; diff --git a/src/qiankun/index.ts b/src/qiankun/index.ts index 11d4f82..23b1a4f 100644 --- a/src/qiankun/index.ts +++ b/src/qiankun/index.ts @@ -1,73 +1,73 @@ -/** - * qiankun配置 - */ -import { registerMicroApps, setDefaultMountApp, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler } from 'qiankun'; -import { apps } from './apps'; -import { getProps, initGlState } from './state'; - -/** - * 重构apps - */ -function filterApps() { - apps.forEach((item) => { - //主应用需要传递给微应用的数据。 - item.props = getProps(); - //微应用触发的路由规则 - // @ts-ignore - item.activeRule = genActiveRule('/' + item.activeRule); - }); - return apps; -} - -/** - * 路由监听 - * @param {*} routerPrefix 前缀 - */ -function genActiveRule(routerPrefix) { - return (location) => location.pathname.startsWith(routerPrefix); -} - -/** - * 微应用注册 - */ -function registerApps() { - const _apps = filterApps(); - registerMicroApps(_apps, { - beforeLoad: [ - // @ts-ignore - (loadApp) => { - console.log('before load', loadApp); - }, - ], - beforeMount: [ - // @ts-ignore - (mountApp) => { - console.log('before mount', mountApp); - }, - ], - afterMount: [ - // @ts-ignore - (mountApp) => { - console.log('before mount', mountApp); - }, - ], - afterUnmount: [ - // @ts-ignore - (unloadApp) => { - console.log('after unload', unloadApp); - }, - ], - }); - // 设置默认子应用,与 genActiveRule中的参数保持一致 - // setDefaultMountApp(); - // 第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。 - runAfterFirstMounted(() => console.log('开启监控')); - // 添加全局的未捕获异常处理器。 - addGlobalUncaughtErrorHandler((event) => console.log(event)); - // 定义全局状态 - initGlState(); - //启动qiankun - start({}); -} - -export default registerApps; +// /** +// * qiankun配置 +// */ +// import { registerMicroApps, setDefaultMountApp, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler } from 'qiankun'; +// import { apps } from './apps'; +// import { getProps, initGlState } from './state'; +// +// /** +// * 重构apps +// */ +// function filterApps() { +// apps.forEach((item) => { +// //主应用需要传递给微应用的数据。 +// item.props = getProps(); +// //微应用触发的路由规则 +// // @ts-ignore +// item.activeRule = genActiveRule('/' + item.activeRule); +// }); +// return apps; +// } +// +// /** +// * 路由监听 +// * @param {*} routerPrefix 前缀 +// */ +// function genActiveRule(routerPrefix) { +// return (location) => location.pathname.startsWith(routerPrefix); +// } +// +// /** +// * 微应用注册 +// */ +// function registerApps() { +// const _apps = filterApps(); +// registerMicroApps(_apps, { +// beforeLoad: [ +// // @ts-ignore +// (loadApp) => { +// console.log('before load', loadApp); +// }, +// ], +// beforeMount: [ +// // @ts-ignore +// (mountApp) => { +// console.log('before mount', mountApp); +// }, +// ], +// afterMount: [ +// // @ts-ignore +// (mountApp) => { +// console.log('before mount', mountApp); +// }, +// ], +// afterUnmount: [ +// // @ts-ignore +// (unloadApp) => { +// console.log('after unload', unloadApp); +// }, +// ], +// }); +// // 设置默认子应用,与 genActiveRule中的参数保持一致 +// // setDefaultMountApp(); +// // 第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。 +// runAfterFirstMounted(() => console.log('开启监控')); +// // 添加全局的未捕获异常处理器。 +// addGlobalUncaughtErrorHandler((event) => console.log(event)); +// // 定义全局状态 +// initGlState(); +// //启动qiankun +// start({}); +// } +// +// export default registerApps; diff --git a/src/qiankun/state.ts b/src/qiankun/state.ts index 102e987..92aaf03 100644 --- a/src/qiankun/state.ts +++ b/src/qiankun/state.ts @@ -1,38 +1,38 @@ -/** - *公共数据 - */ -import { initGlobalState } from 'qiankun'; -import { store } from '/@/store'; -import { router } from '/@/router'; -import { getToken } from '/@/utils/auth'; -//定义传入子应用的数据 -export function getProps() { - return { - data: { - publicPath: '/', - token: getToken(), - store, - router, - }, - }; -} - -/** - * 定义全局状态，并返回通信方法,在主应用使用，微应用通过 props 获取通信方法。 - * @param state 主应用穿的公共数据 - */ -export function initGlState(info = { userName: 'admin' }) { - // 初始化state - const actions = initGlobalState(info); - // 设置新的值 - actions.setGlobalState(info); - // 注册 观察者 函数 - 响应 globalState 变化，在 globalState 发生改变时触发该 观察者 函数。 - actions.onGlobalStateChange((newState, prev) => { - // state: 变更后的状态; prev 变更前的状态 - console.info('newState', newState); - console.info('prev', prev); - for (const key in newState) { - console.info('onGlobalStateChange', key); - } - }); -} +// /** +// *公共数据 +// */ +// import { initGlobalState } from 'qiankun'; +// import { store } from '/@/store'; +// import { router } from '/@/router'; +// import { getToken } from '/@/utils/auth'; +// //定义传入子应用的数据 +// export function getProps() { +// return { +// data: { +// publicPath: '/', +// token: getToken(), +// store, +// router, +// }, +// }; +// } +// +// /** +// * 定义全局状态，并返回通信方法,在主应用使用，微应用通过 props 获取通信方法。 +// * @param state 主应用穿的公共数据 +// */ +// export function initGlState(info = { userName: 'admin' }) { +// // 初始化state +// const actions = initGlobalState(info); +// // 设置新的值 +// actions.setGlobalState(info); +// // 注册 观察者 函数 - 响应 globalState 变化，在 globalState 发生改变时触发该 观察者 函数。 +// actions.onGlobalStateChange((newState, prev) => { +// // state: 变更后的状态; prev 变更前的状态 +// console.info('newState', newState); +// console.info('prev', prev); +// for (const key in newState) { +// console.info('onGlobalStateChange', key); +// } +// }); +// }