feat: 更新抽屉样式以支持横屏模式下的最大宽度设置

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

@@ -239,6 +239,7 @@ export default {
     --modal-resize-display: block;
     --modal-content-left: auto;
     --modal-content-min-width: auto;
+    --modal-content-max-width: 100%;
     --modal-body-margin: 0;
     --modal-body-border-radius: 0;
     --modal-body-background-color: #ffffff;
@@ -380,7 +381,7 @@ export default {
         flex-direction: column;
         height: 100%;
         min-width: var(--modal-content-min-width);
-        max-width: 100%;
+        max-width: var(--modal-content-max-width);
     }
 
     &-body {
@@ -419,6 +420,19 @@ export default {
     }
 }
 
+// 横屏模式适配
+body.window-landscape {
+    .micro-modal {
+        --modal-content-max-width: calc(100% - 80px);
+    }
+    &.transparent-mode {
+        --modal-content-max-width: 100%;
+    }
+    @media (width < 768px) {
+        --modal-content-max-width: 100%;
+    }
+}
+
 // 深色模式适配
 body.dark-mode-reverse {
     .micro-modal {

resources/assets/sass/components/drawer-overlay.scss

@@ -40,6 +40,7 @@ body {
     --title-color: #303133;
     --content-bg-color: #ffffff;
     --border-radius: 0px;
+    --body-max-width: 100%;
 
     &.file-drawer {
         --margin-top: 40px;
@@ -62,7 +63,7 @@ body {
         flex-direction: column;
         width: 100%;
         height: 100%;
-        max-width: 100%;
+        max-width: var(--body-max-width);
         max-height: 100%;
         position: relative;
 
@@ -189,6 +190,16 @@ body {
     }
 }
 
+body.window-landscape {
+    // 横屏模式下的抽屉样式
+    .common-drawer {
+        --body-max-width: calc(100% - 80px);
+    }
+    // 横屏模式下的全屏抽屉样式
+    .drawer-fullscreen {
+        --body-max-width: 100%;
+    }
+}
 body.dark-mode-reverse {
     // 暗黑模式下的抽屉样式
     .common-drawer {
@@ -196,10 +207,6 @@ body.dark-mode-reverse {
             --close-color: #000000;
         }
     }
-    // 暗黑模式下的全屏抽屉样式
-    .drawer-fullscreen {
-
-    }
 }
 
 // 抽屉动画样式