perf: 优化应用

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

@@ -9,9 +9,10 @@
             :background="app.background"
             :transparent="app.transparent"
             :autoDarkTheme="app.auto_dark_theme"
+            :keepAlive="app.keep_alive"
             :beforeClose="async () => { await onBeforeClose(app.name) }">
             <MicroIFrame
-                v-if="app.url_type === 'iframe' && app.isOpen && app.url"
+                v-if="shouldRenderIFrame(app)"
                 :name="app.name"
                 :url="app.url"
                 :data="appData(app.name)"
@@ -327,20 +328,34 @@ export default {
 
             const app = this.microApps.find(({name}) => name == config.name);
             if (app) {
+                // 恢复 keep_alive
+                if (app.keepAliveBackup !== undefined) {
+                    app.keep_alive = app.keepAliveBackup
+                    delete app.keepAliveBackup
+                }
+
                 // 更新微应用
                 if (app.url != config.url) {
                     await microApp.unmountApp(app.name, {destroy: true})
                     app.isLoading = true
                 }
                 Object.assign(app, config)
-                requestAnimationFrame(_ => app.isOpen = true)
+                requestAnimationFrame(_ => {
+                    app.isOpen = true
+                    app.lastOpenAt = Date.now()
+                    this.$store.commit('microApps/keepAlive', 3)
+                })
             } else {
                 // 新建微应用
                 config.isLoading = true
                 config.isOpen = false
                 config.onBeforeClose = () => true
                 this.$store.commit('microApps/push', config)
-                requestAnimationFrame(_ => config.isOpen = true)
+                requestAnimationFrame(_ => {
+                    config.isOpen = true
+                    config.lastOpenAt = Date.now()
+                    this.$store.commit('microApps/keepAlive', 3)
+                })
             }
         },
 
@@ -527,6 +542,15 @@ export default {
                 }
             })
         },
+
+        /**
+         * 是否渲染 iframe
+         * @param app
+         * @returns {boolean}
+         */
+        shouldRenderIFrame(app) {
+            return app.url_type === 'iframe' && (app.isOpen || app.keep_alive) && app.url;
+        }
     }
 }
 </script>

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

@@ -2,10 +2,10 @@
     <div v-transfer-dom :data-transfer="true">
         <div :class="className">
             <transition :name="transitions[0]">
-                <div v-if="value" class="micro-modal-mask" @click="onClose" :style="maskStyle"></div>
+                <div v-if="shouldRenderInDom" v-show="value" class="micro-modal-mask" @click="onClose" :style="maskStyle"></div>
             </transition>
             <transition :name="transitions[1]">
-                <div v-if="value" class="micro-modal-content" :style="contentStyle">
+                <div v-if="shouldRenderInDom" v-show="value" class="micro-modal-content" :style="contentStyle">
                     <div class="micro-modal-close" @click="onClose">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
                             <path d="M8.28596 6.51819C7.7978 6.03003 7.00634 6.03003 6.51819 6.51819C6.03003 7.00634 6.03003 7.7978 6.51819 8.28596L11.2322 13L6.51819 17.714C6.03003 18.2022 6.03003 18.9937 6.51819 19.4818C7.00634 19.97 7.7978 19.97 8.28596 19.4818L13 14.7678L17.714 19.4818C18.2022 19.97 18.9937 19.97 19.4818 19.4818C19.97 18.9937 19.97 18.2022 19.4818 17.714L14.7678 13L19.4818 8.28596C19.97 7.7978 19.97 7.00634 19.4818 6.51819C18.9937 6.03003 18.2022 6.03003 17.714 6.51819L13 11.2322L8.28596 6.51819Z" fill="currentColor"></path>
@@ -61,6 +61,10 @@ export default {
             type: Boolean,
             default: true
         },
+        keepAlive: {
+            type: Boolean,
+            default: true
+        },
         beforeClose: Function
     },
     data() {
@@ -70,6 +74,9 @@ export default {
         }
     },
     computed: {
+        shouldRenderInDom() {
+            return this.value || this.keepAlive;
+        },
         className({value, transparent, autoDarkTheme}) {
             return {
                 'micro-modal': true,

resources/assets/js/store/mutations.js

@@ -311,6 +311,20 @@ export default {
         }
     },
 
+    'microApps/keepAlive': function(state, keepAliveNum) {
+        const keepAliveApps = state.microApps.filter(app => app.keep_alive)
+        if (keepAliveApps.length <= keepAliveNum) {
+            return
+        }
+        keepAliveApps
+            .sort((a, b) => a.lastOpenAt - b.lastOpenAt)
+            .slice(0, keepAliveApps.length - keepAliveNum)
+            .forEach(app => {
+                app.keepAliveBackup = true
+                app.keep_alive = false
+            })
+    },
+
     'microApps/splice': function(state, {index, data, count = 1}) {
         if (typeof data === "undefined") {
             state.microApps.splice(index, count)