feat: 微应用支持iframe模式

docker-compose.yml

@@ -96,7 +96,7 @@ services:
   appstore:
     container_name: "dootask-appstore-${APP_ID}"
     privileged: true
-    image: "dootask/appstore:0.1.0"
+    image: "dootask/appstore:0.1.1"
     volumes:
       - shared_data:/usr/share/dootask
       - /var/run/docker.sock:/var/run/docker.sock

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

@@ -0,0 +1,67 @@
+<template>
+    <iframe
+        ref="iframe"
+        class="micro-app-iframe"
+        :src="src"
+        sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"/>
+</template>
+
+<style lang="scss" scoped>
+.micro-app-iframe {
+    border: none;
+    width: 100%;
+    height: 100%;
+}
+</style>
+<script>
+export default {
+    name: "MicroIFrame",
+    props: {
+        name: {
+            type: String,
+            default: ''
+        },
+        url: {
+            type: String,
+            default: ''
+        },
+    },
+
+    data() {
+        return {
+            src: this.url,
+        }
+    },
+
+    mounted() {
+        this.$refs.iframe.addEventListener('load', this.handleLoad.bind(this))
+        this.$refs.iframe.addEventListener('error', this.handleError.bind(this))
+    },
+
+    beforeDestroy() {
+        this.$refs.iframe.removeEventListener('load', this.handleLoad.bind(this))
+        this.$refs.iframe.removeEventListener('error', this.handleError.bind(this))
+    },
+
+    methods: {
+        handleLoad(e) {
+            this.$emit('mounted', {
+                ...e,
+                detail: {
+                    name: this.name,
+                }
+            })
+        },
+        
+        handleError(e) {
+            this.$emit('error', {
+                ...e,
+                detail: {
+                    name: this.name,
+                    error: e,
+                }
+            })
+        }
+    }
+}
+</script>

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

@@ -9,17 +9,20 @@
             :transparent="app.transparent"
             :autoDarkTheme="app.auto_dark_theme"
             :beforeClose="async () => { await onBeforeClose(app.name) }">
+            <MicroIFrame
+                v-if="app.url_type === 'iframe' && app.isOpen && app.url"
+                :name="app.name"
+                :url="app.url"
+                @mounted="mounted"
+                @error="error"/>
             <micro-app
-                v-if="app.isOpen && app.url"
+                v-else-if="app.isOpen && app.url"
                 :name="app.name"
                 :url="app.url"
                 :keep-alive="app.keep_alive"
                 :disable-scopecss="app.disable_scope_css"
                 :data="appData(app.name)"
-                @created="created"
-                @beforemount="beforemount"
                 @mounted="mounted"
-                @unmount="unmount"
                 @error="error"/>
             <div v-if="app.isLoading" class="micro-app-loader">
                 <Loading/>
@@ -86,11 +89,12 @@ import emitter from "../../store/events";
 import TransferDom from "../../directives/transfer-dom";
 import store from "../../store";
 import MicroModal from "./modal.vue";
+import MicroIFrame from "./iframe.vue";
 
 export default {
     name: "MicroApps",
     directives: {TransferDom},
-    components: {MicroModal, UserSelect},
+    components: {MicroModal, UserSelect, MicroIFrame},
 
     props: {
         windowType: {
@@ -149,26 +153,14 @@ export default {
     },
 
     methods: {
-        // 元素被创建
-        created() {
-        },
-
-        // 即将渲染
-        beforemount() {
-        },
-
         // 已经渲染完成
         mounted(e) {
-            this.finish(e)
+            this.finish(e.detail.name)
-        },
-
-        // 已经卸载
-        unmount() {
         },
 
         // 加载出错
         error(e) {
-            this.finish(e)
+            this.finish(e.detail.name)
             $A.modalError({
                 language: false,
                 title: this.$L('应用加载失败'),
@@ -180,8 +172,8 @@ export default {
         },
 
         // 加载结束
-        finish(e) {
+        finish(name) {
-            const app = this.apps.find(({name}) => name == e.detail.name);
+            const app = this.apps.find(app => app.name == name);
             if (app) {
                 app.isLoading = false
             }

resources/assets/js/store/actions.js

@@ -4675,11 +4675,15 @@ export default {
         if (!data.id || !data.name || !data.url) {
             return
         }
-        data.url = data.url.replace(/\{window[._]location[._](\w+)}/ig, (match, property) => {
+        data.url = data.url
-            if (property in window.location) {
+            .replace(/^\:(\d+)/ig, (_, port) => {
-                return window.location[property];
+                return window.location.protocol + '//' + window.location.hostname + ':' + port;
-            }
+            })
-        })
+            .replace(/\{window[._]location[._](\w+)}/ig, (_, property) => {
+                if (property in window.location) {
+                    return window.location[property];
+                }
+            })
         const config = {
             id: data.id,
             name: data.name,