chore: pre

src/layouts/page/index.vue

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

src/main.ts

@@ -17,6 +17,7 @@ import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components';
 import { isDevMode } from './utils/env';
+import registerApps from '/@/qiankun';
 
 if (isDevMode()) {
   import('ant-design-vue/dist/antd.less');
@@ -47,6 +48,9 @@ async function bootstrap() {
   // 注册全局指令
   setupGlobDirectives(app);
 
+  // 注册微服务应用
+  registerApps();
+
   // 等待路由准备好时挂载: https://next.router.vuejs.org/api/#isready
   await router.isReady();
 

src/qiankun/state.ts

@@ -9,6 +9,7 @@ import { initGlobalState } from 'qiankun';
 import { store } from '/@/store';
 import { router } from '/@/router';
 import { getAccessToken } from '/@/utils/auth';
+import { useMicroAppStore } from '/@/store/modules/microApp';
 
 /** 子应用的数据 */
 export function getSubDefineProps() {
@@ -26,11 +27,15 @@ export function getSubDefineProps() {
  * 初始化全局通信状态
  * @param state 主应用穿的公共数据
  */
-export function initGlState(info = { _state: 'foobar' }) {
+export function initGlState(info = {}) {
+  const microAppStore = useMicroAppStore();
   const actions = initGlobalState(info);
-  // todo: 可根据自身的数据传输需求进行更改
   actions.setGlobalState(info);
   actions.onGlobalStateChange((newState, prev) => {
-    console.log(newState, prev);
+    const { formDesignEmit } = newState;
+    microAppStore.setFormDesignApp({
+      formDesignEmit
+    });
+    console.log('Emit收参数', newState, prev);
   });
 }

src/store/modules/microApp.ts

@@ -0,0 +1,35 @@
+/**
+ * @program: kicc-ui
+ * @description: 微应用配置存储中心
+ * @author: entfrm开发团队-王翔
+ * @create: 2023/7/22
+ */
+import { defineStore } from 'pinia';
+import { store } from '/@/store';
+
+interface MicroAppState {
+  // 表单设计APP
+  formDesignApp: Recordable;
+}
+
+export const useMicroAppStore = defineStore({
+  id: 'micro-app',
+  state: (): MicroAppState => ({
+    formDesignApp: {},
+  }),
+  getters: {
+    getFormDesignApp(): Recordable {
+      return this.formDesignApp;
+    },
+  },
+  actions: {
+    setFormDesignApp(data: Recordable): void {
+      this.formDesignApp = data;
+    }
+  }
+});
+
+// 需要在设置之外使用
+export function useAppStoreWithOut() {
+  return useMicroAppStore(store);
+}

src/views/workflow/extension/form/helper/WorkflowFormDesign.vue

@@ -1,35 +1,18 @@
 <template>
   <BasicModal v-bind="$attrs"
-              width="720px"
+              defaultFullscreen
+              :canFullscreen="false"
               @register="registerModal"
               @ok="handleSubmit"
   >
-    <div id="vue" class="app-view-box"/>
+    <div id="formDesign"/>
+    <a-button @click="test">测试</a-button>
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { onMounted, reactive, nextTick } from 'vue';
+  import { reactive } from 'vue';
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { loadMicroApp } from 'qiankun';
-
-  /*onMounted(() => {
-    /!* //注册openQianKun
-     if (openQianKun) {
-       if (!window.qiankunStarted) {
-         window.qiankunStarted = true;
-         registerApps();
-       }
-     }*!/
-
-    nextTick(() => );
-
-    loadMicroApp(
-        { name: 'form-design', entry: '//localhost:7101', container: '#form-design' },
-        { sandbox: { experimentalStyleIsolation: true } },
-    );
-
-  });*/
+  import { loadMicroApp, MicroApp } from 'qiankun';
 
   interface TableState {
     tag: string;
@@ -39,16 +22,10 @@
     tag: '',
   });
 
-  const globSetting = useGlobSetting();
-  const openQianKun = globSetting.openQianKun;
   const emit = defineEmits(['success', 'register']);
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
-
-    loadMicroApp(
-        { name: 'vue', entry: '//localhost:7101', container: '#vue' },
-        { sandbox: { experimentalStyleIsolation: true } }
-    );
-
+    loadMicroApp({ name: 'formDesign', entry: '//localhost:7101', container: '#formDesign' },
+        { sandbox: { experimentalStyleIsolation: true }});
     state.tag = data._tag;
     const id = data.record?.id;
     const props: Partial<ModalProps> = { confirmLoading: false };
@@ -63,6 +40,9 @@
     setModalProps(props);
   });
 
+  function test(){
+    console.log(10101);
+  }
 
   /** 处理弹出框提交 */
   async function handleSubmit() {