From cc1df8d7d0405f7a7897954da42bac891015da4d Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Tue, 15 Jul 2025 19:58:08 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=BA=94=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/js/components/MicroApps/index.vue  | 30 +++++++++++++++++--
 .../assets/js/components/MicroApps/modal.vue  | 11 +++++--
 resources/assets/js/store/mutations.js        | 14 +++++++++
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/resources/assets/js/components/MicroApps/index.vue b/resources/assets/js/components/MicroApps/index.vue
index 3f4b36710..207ec558f 100644
--- a/resources/assets/js/components/MicroApps/index.vue
+++ b/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>
diff --git a/resources/assets/js/components/MicroApps/modal.vue b/resources/assets/js/components/MicroApps/modal.vue
index 736eb4956..51c478ab6 100644
--- a/resources/assets/js/components/MicroApps/modal.vue
+++ b/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,
diff --git a/resources/assets/js/store/mutations.js b/resources/assets/js/store/mutations.js
index 3c6e8d0d7..97925db3a 100644
--- a/resources/assets/js/store/mutations.js
+++ b/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)