From e51e8f7196240c9e15788b7ccb42ad3c1729b9fb Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 8 Aug 2025 17:20:34 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=8A=BD=E5=B1=89?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/js/components/MicroApps/modal.vue  | 22 ++++++---------
 .../sass/components/drawer-overlay.scss       | 27 +++++++++----------
 2 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/resources/assets/js/components/MicroApps/modal.vue b/resources/assets/js/components/MicroApps/modal.vue
index d5a36266c..07654a4c8 100644
--- a/resources/assets/js/components/MicroApps/modal.vue
+++ b/resources/assets/js/components/MicroApps/modal.vue
@@ -235,11 +235,11 @@ export default {
     --modal-resize-display: block;
     --modal-content-left: auto;
     --modal-content-min-width: auto;
-    --modal-body-margin: 8px;
-    --modal-body-border-radius: 16px;
+    --modal-body-margin: 0;
+    --modal-body-border-radius: 0;
     --modal-body-background-color: #ffffff;
     --modal-dark-filter: none;
-    --modal-slide-transform: translate(15%, 0) scale(0.98);
+    --modal-slide-transform: translate(15%, 0);
 
     --modal-capsule-bgcolor: rgba(255, 255, 255, 0.6);
     --modal-capsule-bor-color: rgba(229, 230, 235, 0.6);
@@ -266,7 +266,7 @@ export default {
         --modal-content-min-width: 100%;
         --modal-body-margin: 0;
         --modal-body-border-radius: 0;
-        --modal-slide-transform: translate(0, 15%) scale(0.98);
+        --modal-slide-transform: translate(0, 15%);
     }
 
     &-hidden {
@@ -389,12 +389,9 @@ export default {
     }
 
     &-fade {
-        &-enter-active {
-            transition: all .2s ease;
-        }
-
+        &-enter-active,
         &-leave-active {
-            transition: all .2s ease;
+            transition: opacity .5s cubic-bezier(0.32, 0.72, 0, 1);
         }
 
         &-enter,
@@ -404,12 +401,9 @@ export default {
     }
 
     &-slide {
-        &-enter-active {
-            transition: all .2s ease;
-        }
-
+        &-enter-active,
         &-leave-active {
-            transition: all .2s ease;
+            transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1), opacity .3s cubic-bezier(0.32, 0.72, 0, 1);
         }
 
         &-enter,
diff --git a/resources/assets/sass/components/drawer-overlay.scss b/resources/assets/sass/components/drawer-overlay.scss
index 6aaa253ff..273b88736 100644
--- a/resources/assets/sass/components/drawer-overlay.scss
+++ b/resources/assets/sass/components/drawer-overlay.scss
@@ -29,17 +29,17 @@ body {
 
 // 通用抽屉样式
 .common-drawer {
-    --margin-top: 8px;
-    --margin-left: 8px;
-    --margin-right: 8px;
-    --margin-bottom: 8px;
-    --close-top: 16px;
-    --close-right: 16px;
+    --margin-top: 0px;
+    --margin-left: 0px;
+    --margin-right: 0px;
+    --margin-bottom: 0px;
+    --close-top: 12px;
+    --close-right: 12px;
     --close-size: 40px;
     --close-color: #606266;
     --title-color: #303133;
     --content-bg-color: #ffffff;
-    --border-radius: 16px;
+    --border-radius: 0px;
 
     &.file-drawer {
         --margin-top: 40px;
@@ -155,6 +155,7 @@ body {
 
                 &-more {
                     flex-shrink: 0;
+                    margin: 0 8px;
                 }
             }
 
@@ -222,14 +223,12 @@ body.dark-mode-reverse {
     &-right {
         &-enter-active,
         &-leave-active {
-            touch-action: none;
-            will-change: transform, opacity;
-            transition: transform .2s cubic-bezier(0.32, 0.72, 0, 1), opacity .2s cubic-bezier(0.32, 0.72, 0, 1);
+            transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1), opacity .3s cubic-bezier(0.32, 0.72, 0, 1);
         }
 
         &-enter,
         &-leave-to {
-            transform: translate(15%, 0) scale(0.98);
+            transform: translate(15%, 0);
             opacity: 0;
         }
     }
@@ -237,14 +236,12 @@ body.dark-mode-reverse {
     &-bottom {
         &-enter-active,
         &-leave-active {
-            touch-action: none;
-            will-change: transform, opacity;
-            transition: transform .2s cubic-bezier(0.32, 0.72, 0, 1), opacity .2s cubic-bezier(0.32, 0.72, 0, 1);
+            transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1), opacity .3s cubic-bezier(0.32, 0.72, 0, 1);
         }
 
         &-enter,
         &-leave-to {
-            transform: translate(0, 15%) scale(0.98);
+            transform: translate(0, 15%);
             opacity: 0;
         }
     }