chore: 乾坤支持

.env.development

@@ -23,5 +23,5 @@ VITE_GLOB_FILE_PREVIEW_URL=http://192.168.3.10:8086
 # 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换
 VITE_GLOB_API_URL_PREFIX=
 
-#微前端qiankun应用,命名必须以VITE_APP_SUB_开头,form-design为子应用的项目名称,也是子应用的路由父路径
+# 表单设计器微前端地址
 VITE_APP_SUB_form-design = '//localhost:7101'

.env.production

@@ -35,3 +35,6 @@ VITE_USE_PWA = false
 
 # 是否兼容旧版浏览器。开启后打包时间会慢一倍左右。会多打出旧浏览器兼容包,且会根据浏览器兼容性自动使用相应的版本
 VITE_LEGACY = false
+
+# 表单设计器微前端地址
+VITE_APP_SUB_form-design = '//kicc.kanglailab.com:7101'

.env.test

@@ -37,3 +37,6 @@ VITE_USE_PWA = false
 
 # 是否兼容旧版浏览器。开启后打包时间会慢一倍左右。会多打出旧浏览器兼容包,且会根据浏览器兼容性自动使用相应的版本
 VITE_LEGACY = false
+
+# 表单设计器微前端地址
+VITE_APP_SUB_form-design = '//192.168.3.10:7101'

src/layouts/page/index.vue

@@ -22,16 +22,19 @@
     </template>
   </RouterView>
   <FrameLayout v-if="getCanEmbedIFramePage"/>
+  <div v-if="openQianKun" id="content"/>
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, unref } from 'vue';
+  import { computed, defineComponent, unref, onMounted } from 'vue';
   import FrameLayout from '/@/layouts/iframe/index.vue';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
   import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
   import { getTransitionName } from './transition';
   import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import registerApps from '/@/qiankun';
 
   export default defineComponent({
     name: 'PageLayout',
@@ -53,6 +56,16 @@
         return tabStore.getCachedTabList;
       });
 
+      // 注册乾坤微应用
+      const globSetting = useGlobSetting();
+      const openQianKun = globSetting.openQianKun;
+      onMounted(() => {
+        if (openQianKun && !window.qiankunStarted) {
+          window.qiankunStarted = true;
+          registerApps();
+        }
+      });
+
       return {
         getTransitionName,
         openCache,
@@ -60,6 +73,7 @@
         getBasicTransition,
         getCaches,
         getCanEmbedIFramePage,
+        openQianKun,
       };
     },
   });

src/qiankun/apps.ts

@@ -1,13 +1,12 @@
 /**
- *微应用apps
- * @name: 微应用名称 - 具有唯一性
- * @entry: 微应用入口.必选 - 通过该地址加载微应用，
- * @container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
- * @activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
+ * 解析微应用子列表
+ * @param name: 微应用名称具有唯一性
+ * @param entry: 微应用入口必选,通过该地址加载微应用
+ * @param container: 微应用挂载节点,微应用加载完成后将挂载在该节点上
+ * @param activeRule: 微应用触发的路由规则,触发路由规则后将加载该微应用
  */
 import type { RegistrableApp } from 'qiankun';
 
-//子应用列表
 const _apps: RegistrableApp<object>[] = [];
 for (const key in import.meta.env) {
   if (key.includes('VITE_APP_SUB_')) {
@@ -21,4 +20,5 @@ for (const key in import.meta.env) {
     _apps.push(obj);
   }
 }
+
 export const apps = _apps;

src/qiankun/index.ts

@@ -1,68 +1,61 @@
 /**
- * qiankun配置
+ * @program: kicc-ui
+ * @description: 微应用乾坤配置
+ * @author: wangxiang4
+ * @create: 2023/7/20
  */
+
 import { registerMicroApps, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler } from 'qiankun';
 import { apps } from './apps';
-import { getProps, initGlState } from './state';
-
-/**
- * 重构apps
- */
-function filterApps() {
-  apps.forEach((item) => {
-    //主应用需要传递给微应用的数据。
-    item.props = getProps();
-    //微应用触发的路由规则
-    item.activeRule = genActiveRule('/' + item.activeRule);
-  });
-  return apps;
-}
+import { getSubDefineProps, initGlState } from './state';
 
-/**
- * 路由监听
- * @param {*} routerPrefix 前缀
- */
-function genActiveRule(routerPrefix) {
-  return (location) => location.pathname.startsWith(routerPrefix);
+/** 匹配激活微服务路由规则 */
+function listenerRouteActiveRule(routerPath) {
+  console.info(location.pathname,routerPath,location.pathname.startsWith(routerPath));
+  return (location) => location.pathname.endsWith(routerPath);
 }
 
-/**
- * 微应用注册
- */
+/** 微应用注册 */
 function registerApps() {
-  const _apps = filterApps();
-  registerMicroApps(_apps, {
+  const microApps = apps.map((item) => {
+    // 主应用传递给微应用的数据
+    item.props = getSubDefineProps();
+    // 微应用触发的路由规则
+    item.activeRule = listenerRouteActiveRule('/' + item.activeRule);
+    return item;
+  });
+  registerMicroApps(microApps, {
     beforeLoad: [
       (loadApp) => Promise.resolve(()=>{
-          console.log('before load', loadApp);
+          console.info('before load', loadApp);
       }),
     ],
     beforeMount: [
       (mountApp) => Promise.resolve(()=>{
-        console.log('before mount', mountApp);
+        console.info('before mount', mountApp);
       }),
     ],
     afterMount: [
       (mountApp) => Promise.resolve(()=>{
-        console.log('before mount', mountApp);
+        console.info('before mount', mountApp);
       }),
     ],
     afterUnmount: [
       (unloadApp) => Promise.resolve(()=>{
-        console.log('after unload', unloadApp);
+        console.info('after unload', unloadApp);
       }),
     ],
   });
-  // 设置默认子应用,与 genActiveRule中的参数保持一致
-  // setDefaultMountApp();
-  // 第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。
+  // 首个微应用加载之后的回调函数用于开启一些监控或者埋点脚本进行数据分析
   runAfterFirstMounted(() => console.log('开启监控'));
-  // 添加全局的未捕获异常处理器。
+  // 全局的未捕获异常处理器
   addGlobalUncaughtErrorHandler((event) => console.log(event));
-  // 定义全局状态
+  // 初始化全局通信
   initGlState();
   // 启动qiankun
-  start({});
+  start({
+    sandbox: { experimentalStyleIsolation: true }
+  });
 }
 
 export default registerApps;

src/qiankun/state.ts

@@ -1,39 +1,37 @@
 /**
- *公共数据
+ * @program: kicc-ui
+ * @description: 微应用数据通信
+ * @author: wangxiang4
+ * @create: 2023/7/20
  */
+
 import { initGlobalState } from 'qiankun';
 import { store } from '/@/store';
 import { router } from '/@/router';
 import { getAccessToken } from '/@/utils/auth';
 
-//定义传入子应用的数据
-export function getProps(){
+/** 子应用的数据 */
+export function getSubDefineProps() {
   return {
     data: {
       publicPath: '/',
       token: getAccessToken(),
       store,
-      router,
-    },
+      router
+    }
   };
 }
 
 /**
- * 定义全局状态，并返回通信方法,在主应用使用，微应用通过 props 获取通信方法。
+ * 初始化全局通信状态
  * @param state 主应用穿的公共数据
  */
-export function initGlState(info = { userName: 'admin' }) {
-  // 初始化state
+export function initGlState(info = { test: 'demo' }) {
   const actions = initGlobalState(info);
-  // 设置新的值
+  // todo: 可根据自身的数据传输需求进行更改
   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);
-    }
+    console.info(`newState:${newState}`, `prev:${prev}`);
+    for (const key in newState) console.info('newState:value', key);
   });
 }

types/config.d.ts

@@ -154,7 +154,7 @@ export interface GlobConfig {
   gatewayAseEncodeSecret: string;
   // 文件在线预览网址
   filePreviewUrl?: string;
-  // 开启微服务
+  // 开启微前端
   openQianKun?: boolean;
 }
 
@@ -177,6 +177,6 @@ export interface GlobEnvConfig {
   VITE_GLOB_GATEWAY_ASE_ENCODE_SECRET: string;
   // 文件在线预览网址
   VITE_GLOB_FILE_PREVIEW_URL?: string;
-  // 开启微服务
+  // 开启微前端
   VITE_GLOB_APP_OPEN_QIANKUN: boolean;
 }