no message

package.json

@@ -21,7 +21,7 @@
     "devDependencies": {
         "@chenfengyuan/vue-qrcode": "^1.0.2",
         "@kangc/v-md-editor": "^1.7.12",
-        "@micro-zoe/micro-app": "^0.8.11",
+        "@micro-zoe/micro-app": "^1.0.0-rc.24",
         "@traptitech/markdown-it-katex": "^3.6.0",
         "autoprefixer": "^10.4.13",
         "axios": "^1.8.4",

resources/assets/js/components/MicroApps.vue

@@ -1,109 +1,94 @@
 <template>
-    <div class="page-microapp">
+    <micro-app
-        <transition name="microapp-load" v-if="showSpin">
+        v-if="appMode=='page'"
-            <div class="microapp-load">
+        v-show="appShow"
+        :name="appName"
+        :url="appUrl"
+        :data="appData"
+        @created="created"
+        @beforemount="beforemount"
+        @mounted="mounted"
+        @unmount="unmount"
+        @error="error"/>
+    <DrawerOverlay
+        v-else-if="appMode=='drawer'"
+        v-model="appShow"
+        ref="drawer"
+        placement="right"
+        modal-class="micro-apps-modal"
+        drawer-class="micro-apps-drawer"
+        :size="1200">
+        <div v-if="appShow" class="page-microapp">
+            <micro-app
+                :name="appName"
+                :url="appUrl"
+                :data="appData"
+                @created="created"
+                @beforemount="beforemount"
+                @mounted="mounted"
+                @unmount="unmount"
+                @error="error"/>
+            <div v-if="loadIng > 0" class="microapp-load">
                 <Loading/>
             </div>
-        </transition>
+        </div>
-        <micro-app
+    </DrawerOverlay>
-            v-if="url && !loading"
-            :name='name'
-            :url='url'
-            inline
-            keep-alive
-            disableSandbox
-            :data='appData'
-            @created='handleCreate'
-            @beforemount='handleBeforeMount'
-            @mounted='handleMount'
-            @unmount='handleUnmount'
-            @error='handleError'
-            @datachange='handleDataChange'
-        />
-    </div>
 </template>
 
+<style lang="scss">
+.micro-apps-modal {
+    .ivu-modal-close {
+        display: none;
+    }
+}
+.micro-apps-drawer {
+    .overlay-content {
+        overflow: hidden;
+    }
+}
+</style>
+
 <script>
 import Vue from 'vue'
 import store from '../store/index'
 import {mapState} from "vuex";
-import {EventCenterForMicroApp, unmountAllApps} from '@micro-zoe/micro-app'
+import {unmountAllApps} from '@micro-zoe/micro-app'
 import DialogWrapper from '../pages/manage/components/DialogWrapper.vue'
 import UserSelect from "./UserSelect.vue";
 import {languageList, languageName} from "../language";
 import {DatePicker} from 'view-design-hi';
+import DrawerOverlay from "./DrawerOverlay/index.vue";
+import emitter from "../store/events";
 
 export default {
     name: "MicroApps",
-    props: {
+    components: {DrawerOverlay},
-        name: {
-            type: String,
-            default: "micro-app"
-        },
-        url: {
-            type: String,
-            default: ""
-        },
-        path: {
-            type: String,
-            default: ""
-        },
-        datas: {
-            type: Object,
-            default: () => {
-            }
-        }
-    },
 
     data() {
         return {
-            showSpin: false,
+            loadIng: 0,
-            loading: false,
+
-            appData: {},
+            appMode: '',
+            appShow: false,
+
+            appName: "micro-app",
+            appUrl: "",
+            appParams: {},
         }
     },
 
     mounted() {
-        this.showSpin = true;
+        emitter.on('openMicroApp', this.openMicroApp);
-        this.appData = this.getAppData
+    },
+
+    beforeDestroy() {
+        emitter.off('openMicroApp', this.openMicroApp);
     },
 
     watch: {
-        loading(val) {
-            if (val) {
-                this.showSpin = true;
-            }
-        },
-
-        path(val) {
-            this.appData = {path: val}
-        },
-
-        datas: {
-            handler(info) {
-                this.appData = info
-            },
-            deep: true,
-        },
-
-        '$route': {
-            handler(to) {
-                if (to.name == 'single-apps') {
-                    this.appData = {
-                        path: to.hash || to.fullPath
-                    }
-                }
-            },
-            immediate: true,
-        },
-
         userToken(val) {
-            this.appData = this.getAppData;
             if (!val) {
                 unmountAllApps({destroy: true})
-                this.loading = true;
-            } else {
-                this.loading = false;
             }
         },
     },
@@ -114,10 +99,8 @@ export default {
             'themeName',
         ]),
 
-        getAppData() {
+        appData() {
             return {
-                type: 'init',
-                url: this.url,
                 vues: {
                     Vue,
                     store,
@@ -134,8 +117,20 @@ export default {
                     languageType: languageName,
                 },
                 userInfo: this.userInfo,
-                path: this.path,
+                userToken: this.userToken,
                 electron: this.$Electron,
+                params: this.appParams,
+
+                nextZIndex: () => {
+                    if (typeof window.modalTransferIndex === 'number') {
+                        return window.modalTransferIndex++;
+                    }
+                    return 1000;
+                },
+
+                onClose: () => {
+                    this.$refs.drawer?.onClose();
+                },
 
                 openAppChildPage: (objects) => {
                     this.$store.dispatch('openAppChildPage', objects);
@@ -152,42 +147,31 @@ export default {
         }
     },
     methods: {
-        // 创建前
+        created() {
-        handleCreate(e) {
+            console.log('元素被创建')
-            window.eventCenterForAppNameVite = new EventCenterForMicroApp(e.detail.name)
+            this.loadIng++
-            this.appData = this.getAppData
+        },
-            this.showSpin = !window["eventCenterForAppNameViteLoad-" + e.detail.name]
+        beforemount() {
+            console.log('即将渲染')
+            this.loadIng--
+        },
+        mounted() {
+            console.log('已经渲染完成')
+        },
+        unmount() {
+            console.log('已经卸载')
+        },
+        error() {
+            console.log('加载出错')
         },
 
-        // 创建完成
+        openMicroApp(data) {
-        handleBeforeMount(e) {
+            this.appName    = data.name ?? 'micro-app';
-            window["eventCenterForAppNameViteLoad-" + e.detail.name] = 1;
+            this.appUrl     = data.url ?? null;
-        },
+            this.appParams  = data.params ?? {};
 
-        // 加载完成
+            this.appShow    = data.show ?? true;
-        handleMount(e) {
+            this.appMode    = data.mode ?? 'drawer';
-            if (this.datas) {
-                this.appData = this.datas;
-            }
-            if (this.path) {
-                this.appData.path = this.path
-            }
-            this.showSpin = false;
-        },
-
-        // 卸载
-        handleUnmount(e) {
-            window.dispatchEvent(new Event('apps-unmount'));
-        },
-
-        // 加载失败
-        handleError(e) {
-            //
-        },
-
-        // 数据变化
-        handleDataChange(e) {
-            //
         }
     }
 }

resources/assets/js/microapp.js

@@ -1,34 +1,9 @@
 import microApp from '@micro-zoe/micro-app'
 
 export default function() {
-    let urls  = "";
-    let route  = "/";
-    let modules = {};
-    let obj = {
-        loader(code,url) {
-            if (process.env.NODE_ENV === 'development') {
-                const match = /^https?:\/\/([^:/]+)(?::(\d+))?/.exec(url);
-                if( match && match[0] && url.indexOf('@vite/client') !== -1 ){
-                    urls = url.replace("@vite/client","");
-                    route = urls.replace(match[0].replace("@vite/client",""),"");
-                }
-                // 这里 /basename/ 需要和子应用vite.config.js中base的配置保持一致
-                code = code.replace(new RegExp(`(from|import)(\\s*['"])(${route.replace(/\//g,"\\/")})`,'g') , all => {
-                    return all.replace(route, urls)
-                })
-            }
-            return code
-        }
-    }
-
-    // 微应用名称
-    modules["micro-app"] = [obj]
-    modules["okr-details"] = [obj]
-
-    // 微应用
     microApp.start({
-        plugins: {
+        'iframe': true,
-            modules: modules
+        'keep-alive': true,         // 全局开启保活模式
-        }
+        'router-mode': 'state',     // 路由设置为state模式
     })
 }

resources/assets/js/pages/manage.vue

@@ -358,26 +358,7 @@
         </DrawerOverlay>
 
         <!--应用详情-->
-        <MicroApps
+        <MicroApps/>
-            v-if="appDetailData.mode=='page'"
-            v-show="appDetailData.show"
-            :name="appDetailData.name"
-            :url="appDetailData.url"
-            :path="appDetailData.path"
-            :datas="appDetailData.data"/>
-        <DrawerOverlay
-            v-else-if="appDetailData.mode=='drawer'"
-            v-model="appDetailData.show"
-            placement="right"
-            drawer-class="page-manage-app-drawer"
-            :size="1200">
-            <MicroApps
-                v-if="appDetailData.show"
-                :name="appDetailData.name"
-                :url="appDetailData.url"
-                :path="appDetailData.path"
-                :datas="appDetailData.data"/>
-        </DrawerOverlay>
     </div>
 </template>
 
@@ -488,7 +469,6 @@ export default {
             approveDetailsShow: false,
 
             appStoreShow: false,
-            appDetailData: {mode:''},
         }
     },
 
@@ -500,7 +480,6 @@ export default {
         emitter.on('dialogMsgPush', this.addDialogMsg);
         emitter.on('approveDetails', this.openApproveDetails);
         emitter.on('openReport', this.openReport);
-        emitter.on('openAppDetail', this.openAppDetail);
         //
         document.addEventListener('keydown', this.shortcutEvent);
     },
@@ -524,7 +503,6 @@ export default {
         emitter.off('dialogMsgPush', this.addDialogMsg);
         emitter.off('approveDetails', this.openApproveDetails);
         emitter.off('openReport', this.openReport);
-        emitter.off('openAppDetail', this.openAppDetail);
         //
         document.removeEventListener('keydown', this.shortcutEvent);
     },
@@ -1163,17 +1141,6 @@ export default {
             this.workReportShow = true;
         },
 
-        openAppDetail(data) {
-            this.appDetailData = Object.assign({
-                mode: 'drawer',
-                show: false,
-                name: '',
-                url: '',
-                path: '',
-                data: {}
-            }, data);
-        },
-
         handleLongpress(event) {
             const {type, data, element} = this.longpressData;
             this.$store.commit("longpress/clear")

resources/assets/js/pages/manage/application.vue

@@ -443,7 +443,7 @@ export default {
                     break;
                 case 'okr':
                 case 'okrAnalyze':
-                    this.$store.dispatch("openOkr", '/manage/apps/okr/' + (item.value == 'okr' ? 'list' : 'analysis'));
+                    this.$store.dispatch("openOkr", item.value == 'okr' ? 'list' : 'analysis');
                     break;
                 case 'report':
                     emitter.emit('openReport', area == 'badge' ? 'receive' : 'my');

resources/assets/js/store/actions.js

@@ -4669,26 +4669,23 @@ export default {
     openOkr({state}, path) {
         if (/^\d+$/.test(path)) {
             // 打开详情页
-            emitter.emit('openAppDetail', {
+            emitter.emit('openMicroApp', {
                 mode: 'page',
                 show: false,
-                name: 'okr-details',
+                name: 'app-okr-details',
-                url: import.meta.env.VITE_OKR_WEB_URL || $A.mainUrl("apps/okr"),
+
-                data: {
+                url: $A.mainUrl(`apps/okr/okrDetails?data=${path}`),
-                    show: true,
+                params: {},
-                    type: 'open',
-                    model: 'details',
-                    id: path
-                }
             });
         } else {
             // 打开列表、统计
-            emitter.emit('openAppDetail', {
+            emitter.emit('openMicroApp', {
                 mode: 'drawer',
                 show: true,
-                name: 'okr-app',
+                name: `app-okr`,
-                url: import.meta.env.VITE_OKR_WEB_URL || $A.mainUrl("apps/okr"),
+
-                path
+                url: $A.mainUrl(`apps/okr/${path}`),
+                params: {},
             });
         }
     },

resources/assets/sass/pages/page-manage.scss

@@ -414,12 +414,6 @@
     }
 }
 
-.page-manage-app-drawer {
-    .overlay-content {
-        overflow: hidden;
-    }
-}
-
 @media (max-height: 640px) {
     .page-manage {
         .manage-box-menu {