no message

app/Module/Apps.php

@@ -479,7 +479,7 @@ class Apps
         ];
 
         // 处理可选的UI配置
-        $optionalConfigs = ['transparent', 'keepAlive'];
+        $optionalConfigs = ['transparent', 'autoDarkTheme', 'keepAlive', 'disableScopecss'];
         foreach ($optionalConfigs as $config) {
             if (isset($menu[$config])) {
                 $normalizedMenu[$config] = $menu[$config];

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

@@ -7,7 +7,7 @@
             :ref="`ref-${app.name}`"
             :size="1200"
             :transparent="app.transparent"
-            :inheritDarkMode="app.inheritDarkMode"
+            :autoDarkTheme="app.autoDarkTheme"
             :beforeClose="async () => { await onBeforeClose(app.name) }">
             <micro-app
                 v-if="app.isOpen"
@@ -331,9 +331,9 @@ export default {
          *  - url               应用地址
          *  - props             传递参数
          *  - transparent       是否透明模式 (true/false)，默认 false
+         *  - autoDarkTheme     是否自动适配深色主题 (true/false)，默认 true
          *  - keepAlive         是否开启微应用保活 (true/false)，默认 true
          *  - disableScopecss   是否禁用样式隔离 (true/false)，默认 false
-         *  - inheritDarkMode   是否继承暗黑模式 (true/false)，默认 false
          */
         observeMicroApp(config) {
             // 处理数据
@@ -341,9 +341,9 @@ export default {
             config.url = config.url || null
             config.props = $A.isJson(config.props) ? config.props : {}
             config.transparent = typeof config.transparent == 'boolean' ? config.transparent : false
+            config.autoDarkTheme = typeof config.autoDarkTheme == 'boolean' ? config.autoDarkTheme : true
             config.keepAlive = typeof config.keepAlive == 'boolean' ? config.keepAlive : true
             config.disableScopecss = typeof config.disableScopecss == 'boolean' ? config.disableScopecss : false
-            config.inheritDarkMode = typeof config.inheritDarkMode == 'boolean' ? config.inheritDarkMode : false
 
             // 判断处理
             const app = this.apps.find(({name}) => name == config.name);

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

@@ -1,5 +1,6 @@
 <template>
-    <div v-transfer-dom :data-transfer="true" :class="className">
+    <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>
             </transition>
@@ -25,6 +26,7 @@
                 </div>
             </transition>
         </div>
+    </div>
 </template>
 
 <script>
@@ -52,9 +54,9 @@ export default {
             type: Boolean,
             default: false
         },
-        inheritDarkMode: {
+        autoDarkTheme: {
             type: Boolean,
-            default: false
+            default: true
         },
         beforeClose: Function
     },
@@ -65,11 +67,11 @@ export default {
         }
     },
     computed: {
-        className({value, transparent, inheritDarkMode}) {
+        className({value, transparent, autoDarkTheme}) {
             return {
                 'micro-modal': true,
                 'micro-modal-hidden': !value,
-                'no-dark-content': !inheritDarkMode,
+                'no-dark-content': !autoDarkTheme,
                 'transparent-mode': transparent
             }
         },
@@ -146,7 +148,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .micro-modal {
     width: 100vw;
     height: 100vh;
@@ -177,10 +179,10 @@ export default {
     }
 
     &-hidden {
-        animation: hidden-animation 0s forwards;
+        animation: fade-hide 0s forwards;
         animation-delay: 300ms;
 
-        @keyframes hidden-animation {
+        @keyframes fade-hide {
             to {
                 display: none;
             }
@@ -286,14 +288,20 @@ export default {
         }
     }
 }
-</style>
 
-<style lang="scss">
 // 深色模式适配
 body.dark-mode-reverse {
-    .micro-modal:not(.no-dark-content):not(.transparent-mode) {
+    .micro-modal {
+        &:not(.transparent-mode) {
+            &:not(.no-dark-content) {
                 --modal-mask-bg: rgba(230, 230, 230, 0.6);
                 --modal-close-color: #323232;
             }
+            &.no-dark-content {
+                --modal-mask-bg: rgba(20, 20, 20, 0.6);
+                --modal-body-background-color: #000000;
+            }
+        }
+    }
 }
 </style>

resources/assets/js/store/actions.js

@@ -4676,7 +4676,7 @@ export default {
             event.name += `_${menuItem.key}`
         }
         for (let key in menuItem) {
-            if (['props', 'transparent', 'keepAlive', 'disableScopecss'].includes(key)) {
+            if (['transparent', 'autoDarkTheme', 'keepAlive', 'disableScopecss'].includes(key)) {
                 event[key] = menuItem[key]
             }
         }