From a130c049bf8ccb577eaeedc65381b1e382cf38e6 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sat, 17 May 2025 13:53:07 +0800
Subject: [PATCH] no message

---
 app/Module/Apps.php                           |  2 +-
 .../assets/js/components/MicroApps/index.vue  |  6 +-
 .../assets/js/components/MicroApps/modal.vue  | 80 ++++++++++---------
 resources/assets/js/store/actions.js          |  2 +-
 4 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/app/Module/Apps.php b/app/Module/Apps.php
index 9fafc6f86..cd089b3e3 100644
--- a/app/Module/Apps.php
+++ b/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];
diff --git a/resources/assets/js/components/MicroApps/index.vue b/resources/assets/js/components/MicroApps/index.vue
index 734094860..1d774cee3 100644
--- a/resources/assets/js/components/MicroApps/index.vue
+++ b/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);
diff --git a/resources/assets/js/components/MicroApps/modal.vue b/resources/assets/js/components/MicroApps/modal.vue
index 35df27a4a..3d93c5582 100644
--- a/resources/assets/js/components/MicroApps/modal.vue
+++ b/resources/assets/js/components/MicroApps/modal.vue
@@ -1,29 +1,31 @@
 <template>
-    <div v-transfer-dom :data-transfer="true" :class="className">
-        <transition :name="transitions[0]">
-            <div v-if="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 class="micro-modal-close" @click="onClose">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" role="img" class="icon fill-current">
-                        <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>
-                    </svg>
+    <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>
+            <transition :name="transitions[1]">
+                <div v-if="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" fill="none" role="img" class="icon fill-current">
+                            <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>
+                        </svg>
+                    </div>
+                    <ResizeLine
+                        class="micro-modal-resize"
+                        v-model="dynamicSize"
+                        placement="right"
+                        :min="minSize"
+                        :max="0"
+                        :reverse="true"
+                        :beforeResize="beforeResize"
+                        @on-change="onChangeResize"/>
+                    <div ref="body" class="micro-modal-body">
+                        <slot></slot>
+                    </div>
                 </div>
-                <ResizeLine
-                    class="micro-modal-resize"
-                    v-model="dynamicSize"
-                    placement="right"
-                    :min="minSize"
-                    :max="0"
-                    :reverse="true"
-                    :beforeResize="beforeResize"
-                    @on-change="onChangeResize"/>
-                <div ref="body" class="micro-modal-body">
-                    <slot></slot>
-                </div>
-            </div>
-        </transition>
+            </transition>
+        </div>
     </div>
 </template>
 
@@ -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) {
-        --modal-mask-bg: rgba(230, 230, 230, 0.6);
-        --modal-close-color: #323232;
+    .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>
diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js
index 57c92c09c..b6d27bfee 100644
--- a/resources/assets/js/store/actions.js
+++ b/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]
             }
         }