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) }"> 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; + } } } 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 @@
-
+
-
+
@@ -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)