perf: 优化应用商城

- 支持 background 参数
- iframe 模式添加安全距离
- iframe 支持 dootask/tools

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

@@ -3,7 +3,8 @@
         ref="iframe"
         class="micro-app-iframe"
         :src="src"
-        sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"/>
+        sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox">
+    </iframe>
 </template>
 
 <style lang="scss" scoped>
@@ -11,6 +12,8 @@
     border: none;
     width: 100%;
     height: 100%;
+    padding-top: var(--status-bar-height);
+    padding-bottom: var(--navigation-bar-height);
 }
 </style>
 <script>
@@ -25,6 +28,10 @@ export default {
             type: String,
             default: ''
         },
+        data: {
+            type: Object,
+            default: null
+        }
     },
 
     data() {
@@ -34,17 +41,22 @@ export default {
     },
 
     mounted() {
+        this.injectMicroApp()
         this.$refs.iframe.addEventListener('load', this.handleLoad.bind(this))
         this.$refs.iframe.addEventListener('error', this.handleError.bind(this))
     },
 
     beforeDestroy() {
+        this.cleanupMicroApp()
         this.$refs.iframe.removeEventListener('load', this.handleLoad.bind(this))
         this.$refs.iframe.removeEventListener('error', this.handleError.bind(this))
     },
 
     methods: {
+        // 处理 iframe 加载完成
         handleLoad(e) {
+            this.injectMicroApp()
+
             this.$emit('mounted', {
                 ...e,
                 detail: {
@@ -52,7 +64,8 @@ export default {
                 }
             })
         },
-        
+
+        // 处理 iframe 加载错误
         handleError(e) {
             this.$emit('error', {
                 ...e,
@@ -61,7 +74,33 @@ export default {
                     error: e,
                 }
             })
-        }
+        },
+
+        // 注入 microApp 对象到 iframe
+        injectMicroApp() {
+            try {
+                const iframeWindow = this.$refs.iframe.contentWindow
+                if (iframeWindow && this.data) {
+                    iframeWindow.microApp = {
+                        getData: () => this.data
+                    }
+                }
+            } catch (error) {
+                console.error('Failed to inject microApp object:', error)
+            }
+        },
+
+        // 清理注入的 microApp 对象
+        cleanupMicroApp() {
+            try {
+                const iframeWindow = this.$refs.iframe.contentWindow
+                if (iframeWindow && iframeWindow.microApp) {
+                    delete iframeWindow.microApp
+                }
+            } catch (error) {
+                console.error('Failed to cleanup microApp object:', error)
+            }
+        },
     }
 }
-</script>
+</script>

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

@@ -6,6 +6,7 @@
             v-model="app.isOpen"
             :ref="`ref-${app.name}`"
             :size="1200"
+            :background="app.background"
             :transparent="app.transparent"
             :autoDarkTheme="app.auto_dark_theme"
             :beforeClose="async () => { await onBeforeClose(app.name) }">
@@ -13,6 +14,7 @@
                 v-if="app.url_type === 'iframe' && app.isOpen && app.url"
                 :name="app.name"
                 :url="app.url"
+                :data="appData(app.name)"
                 @mounted="mounted"
                 @error="error"/>
             <micro-app
@@ -206,6 +208,10 @@ export default {
                 props: {
                     ...app.props,
 
+                    name: app.name,
+                    url: app.url,
+                    urlType: app.url_type,
+
                     userId: this.userId,
                     userToken: this.userToken,
                     userInfo: this.userInfo,

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

@@ -20,7 +20,7 @@
                         :reverse="true"
                         :beforeResize="beforeResize"
                         @on-change="onChangeResize"/>
-                    <div ref="body" class="micro-modal-body">
+                    <div ref="body" class="micro-modal-body" :style="bodyStyle">
                         <slot></slot>
                     </div>
                 </div>
@@ -50,6 +50,9 @@ export default {
             type: Number,
             default: 300
         },
+        background: {
+            default: null
+        },
         transparent: {
             type: Boolean,
             default: false
@@ -81,6 +84,15 @@ export default {
             }
             return ['micro-modal-fade', 'micro-modal-slide']
         },
+        bodyStyle() {
+            const styleObject = {}
+            if ($A.isJson(this.background)) {
+                styleObject.background = this.background
+            } else if (this.background) {
+                styleObject.backgroundColor = this.background;
+            }
+            return styleObject;
+        },
         maskStyle({zIndex}) {
             return {zIndex}
         },

resources/assets/js/store/actions.js

@@ -4665,7 +4665,8 @@ export default {
      *  - id                应用ID（必须）
      *  - name              应用名称（必须）
      *  - url               应用地址（必须）
-     *  - url_type          地址类型
+     *  - url_type          地址类型（可选）
+     *  - background        背景颜色（可选）
      *  - transparent       是否透明模式 (true/false)，默认 false
      *  - disable_scope_css 是否禁用样式隔离 (true/false)，默认 false
      *  - auto_dark_theme   是否自动适配深色主题 (true/false)，默认 true
@@ -4695,6 +4696,7 @@ export default {
             name: data.name,
             url: $A.mainUrl(data.url),
             url_type: data.url_type || 'inline',
+            background: data.background || null,
             transparent: typeof data.transparent == 'boolean' ? data.transparent : false,
             disable_scope_css: typeof data.disable_scope_css == 'boolean' ? data.disable_scope_css : false,
             auto_dark_theme: typeof data.auto_dark_theme == 'boolean' ? data.auto_dark_theme : true,