From f433d13a2f2ec33d9cd124d52fb8d5d6f2c56c33 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Thu, 25 Sep 2025 09:04:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=80=8F=E6=98=8E?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/components/MicroApps/index.vue |  7 +++++--
 resources/assets/js/components/MicroApps/modal.vue | 11 +++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/resources/assets/js/components/MicroApps/index.vue b/resources/assets/js/components/MicroApps/index.vue
index f8de2a952..2b2aea70e 100644
--- a/resources/assets/js/components/MicroApps/index.vue
+++ b/resources/assets/js/components/MicroApps/index.vue
@@ -7,6 +7,7 @@
             :ref="`ref-${app.name}`"
             :size="1200"
             :options="app"
+            :windowType="windowType"
             :beforeClose="onBeforeClose"
             @on-capsule-more="onCapsuleMore"
             @on-popout-window="onPopoutWindow"
@@ -72,8 +73,10 @@
 }
 
 .transparent-mode {
-    .micro-app-loader {
-        background-color: rgba(255, 255, 255, 0.6);
+    &:not(.popout-window) {
+        .micro-app-loader {
+            background-color: rgba(255, 255, 255, 0.6);
+        }
     }
 }
 
diff --git a/resources/assets/js/components/MicroApps/modal.vue b/resources/assets/js/components/MicroApps/modal.vue
index ca2a8d04c..bc81d036f 100644
--- a/resources/assets/js/components/MicroApps/modal.vue
+++ b/resources/assets/js/components/MicroApps/modal.vue
@@ -71,6 +71,10 @@ export default {
             type: Object,
             default: () => ({})
         },
+        windowType: {
+            type: String,
+            default: 'embed',
+        },
         beforeClose: Function
     },
     data() {
@@ -90,6 +94,7 @@ export default {
                 'micro-modal-hidden': !this.open,
                 'no-dark-content': !this.options.auto_dark_theme,
                 'transparent-mode': !!this.options.transparent,
+                [`${this.windowType}-window`]: true,
             }
         },
         transitions() {
@@ -430,6 +435,12 @@ body.dark-mode-reverse {
                 --modal-body-background-color: #000000;
             }
         }
+        &.popout-window {
+            &.no-dark-content {
+                --modal-dark-filter: invert(100%) hue-rotate(180deg) contrast(100%);
+                --modal-body-background-color: #000000;
+            }
+        }
     }
 }
 </style>