perf: 优化应用

resources/assets/js/components/MicroApps/index.vue

@@ -122,11 +122,13 @@ export default {
     },
 
     mounted() {
-        emitter.on('observeMicroApp:open', this.observeMicroApp);
+        emitter.on('observeMicroApp:open', this.onOpen);
+        emitter.on('observeMicroApp:updatedOrUninstalled', this.onUpdatedOrUninstalled);
     },
 
     beforeDestroy() {
-        emitter.off('observeMicroApp:open', this.observeMicroApp);
+        emitter.off('observeMicroApp:open', this.onOpen);
+        emitter.off('observeMicroApp:updatedOrUninstalled', this.onUpdatedOrUninstalled);
     },
 
     watch: {
@@ -316,7 +318,7 @@ export default {
          * 观察打开微应用
          * @param config
          */
-        async observeMicroApp(config) {
+        async onOpen(config) {
             if (/_blank$/i.test(config.url_type)) {
                 await this.inlineBlank(config)
                 return
@@ -336,7 +338,7 @@ export default {
 
                 // 更新微应用
                 if (app.url != config.url) {
-                    await microApp.unmountApp(app.name, {destroy: true})
+                    this.unmountMicroApp(app)
                     app.isLoading = true
                 }
                 Object.assign(app, config)
@@ -467,7 +469,7 @@ export default {
 
             app.isOpen = false
             if (destroy) {
-                microApp.unmountApp(app.name, {destroy: true})
+                this.unmountMicroApp(app)
             }
         },
 
@@ -479,11 +481,23 @@ export default {
             this.microApps.forEach(app => {
                 app.isOpen = false
                 if (destroy) {
-                    microApp.unmountApp(app.name, {destroy: true})
+                    this.unmountMicroApp(app)
                 }
             });
         },
 
+        /**
+         * 卸载微应用
+         * @param app
+         */
+        unmountMicroApp(app) {
+            if (app.keep_alive) {
+                app.keepAliveBackup = true
+                app.keep_alive = false
+            }
+            microApp.unmountApp(app.name, {destroy: true})
+        },
+
         /**
          * 关闭之前判断
          * @param name
@@ -550,6 +564,22 @@ export default {
          */
         shouldRenderIFrame(app) {
             return app.url_type === 'iframe' && (app.isOpen || app.keep_alive) && app.url;
+        },
+
+        /**
+         * 应用更新或卸载
+         * @param apps
+         */
+        onUpdatedOrUninstalled(apps) {
+            const ids = apps.map(item => item.id)
+            if (ids.length === 0) {
+                return
+            }
+            this.microApps.forEach(app => {
+                if (ids.includes(app.id)) {
+                    this.closeMicroApp(app.name, true)
+                }
+            })
         }
     }
 }

resources/assets/js/pages/single/apps.vue

@@ -21,7 +21,7 @@ export default {
             return
         }
 
-        await this.$refs.app.observeMicroApp(app)
+        await this.$refs.app.onOpen(app)
     }
 }
 </script>

resources/assets/js/store/mutations.js

@@ -1,3 +1,5 @@
+import emitter from "./events";
+
 export default {
     // 路由加载
     'route/loading': function(state, load) {
@@ -332,10 +334,12 @@ export default {
             state.microApps.splice(index, count, data)
         }
     },
-    
+
     'microApps/data': function(state, data) {
+        // 添加应用商店
         data.unshift({
             id: 'appstore',
+            version: '1.0.0',
             menu_items: [{
                 location: "application/admin",
                 label: $A.L("应用商店"),
@@ -346,10 +350,21 @@ export default {
                 auto_dark_theme: false,
             }]
         })
-        const ids = [];
+        // 找出已卸载的应用和版本更新的应用
+        const updatedOrUninstalledApps = state.microAppsInstalled
+            .filter((oldApp) => !data.some((newApp) => newApp.id === oldApp.id))
+            .map((app) => ({type: 'uninstall', id: app.id}));
+        state.microAppsInstalled.forEach((oldApp) => {
+            const newApp = data.find((app) => app.id === oldApp.id);
+            if (newApp && oldApp.version !== newApp.version) {
+                updatedOrUninstalledApps.push({type: 'update', id: oldApp.id});
+            }
+        });
+        state.microAppsInstalled = data;
+        emitter.emit('observeMicroApp:updatedOrUninstalled', updatedOrUninstalledApps);
+        // 更新菜单
         const menus = [];
         data.forEach((item) => {
-            ids.push(item.id);
             if (item.menu_items) {
                 menus.push(...item.menu_items.map(m => Object.assign(m, {id: item.id})));
             }
@@ -357,14 +372,16 @@ export default {
         menus.forEach(item => {
             let name = item.id
             if (menus.filter(m => m.id === item.id).length > 1) {
-                name += "_" + `${item.url}`.replace(/^https?:\/\/.*?\//, '').replace(/[^a-zA-Z0-9]/g, '_');
+                name += "_" + `${item.url}`
+                    .replace(/^https?:\/\/.*?\//, '')
+                    .replace(/[^a-zA-Z0-9]/g, '_');
             }
             if (menus.find(m => m.name === name)) {
                 name += "_" + $A.randomString(8)
             }
             item.name = name;
         })
-        $A.IDBSave("microAppsIds", state.microAppsIds = ids);
+        $A.IDBSave("microAppsIds", state.microAppsIds = data.map(item => item.id));
         $A.IDBSave("microAppsMenus", state.microAppsMenus = menus);
     },
 }

resources/assets/js/store/state.js

@@ -268,6 +268,7 @@ export default {
 
     // 微应用数据
     microApps: [],
+    microAppsInstalled: [],
     microAppsIds: [],
     microAppsMenus: [],
 };