perf: 优化抽屉窗口

resources/assets/js/pages/manage.vue

@@ -352,12 +352,12 @@
         </transition>
 
         <!--审批中心-->
-        <DrawerOverlay v-model="approveShow" placement="right" :size="1380" class="approve-drawer">
+        <DrawerOverlay v-model="approveShow" placement="right" :size="1380" class-name="approve-drawer">
             <Approve v-if="approveShow" @on-close="approveShow=false"/>
         </DrawerOverlay>
 
         <!--审批详情-->
-        <DrawerOverlay v-model="approveDetailsShow" placement="right" :size="600">
+        <DrawerOverlay v-model="approveDetailsShow" placement="right" :size="600" class-name="approve-drawer">
             <ApproveDetails v-if="approveDetailsShow" :data="approveDetails" @onBack="approveDetailsShow=false"/>
         </DrawerOverlay>
 

resources/assets/js/pages/manage/application.vue

@@ -127,11 +127,13 @@
 
         <!--AI BOT-->
         <DrawerOverlay v-model="aibotShow" placement="right" :size="720">
-            <div v-if="aibotShow" class="ivu-modal-wrap-apply">
+            <template v-if="aibotShow" #title>
-                <div class="ivu-modal-wrap-apply-title">
                 {{ $L('AI 列表') }}
-                    <p @click="applyClick({value: 'robot-setting'}, 'openai')" v-if="userIsAdmin">{{ $L('机器人设置') }}</p>
+            </template>
-                </div>
+            <template v-if="aibotShow" #more>
+                <a href="javascript:void(0)" @click="applyClick({value: 'robot-setting'}, 'openai')" v-if="userIsAdmin">{{ $L('机器人设置') }}</a>
+            </template>
+            <div v-if="aibotShow" class="ivu-modal-wrap-apply">
                 <div class="ivu-modal-wrap-apply-body full-body">
                     <ul class="ivu-modal-wrap-ul">
                         <li v-for="(item, key) in aibotList" :key="key">

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -575,7 +575,7 @@
         <DrawerOverlay
             v-model="replyListShow"
             placement="right"
-            modal-class="dialog-wrapper-modal-list"
+            class-name="dialog-wrapper-list"
             :size="500">
             <DialogWrapper
                 v-if="replyListShow"
@@ -591,6 +591,7 @@
         <DrawerOverlay
             v-model="respondShow"
             placement="right"
+            class-name="dialog-wrapper-list"
             :size="400">
             <DialogRespond v-if="respondShow" :respond-data="respondData" @on-close="respondShow=false"/>
         </DrawerOverlay>
@@ -599,6 +600,7 @@
         <DrawerOverlay
             v-model="sessionHistoryShow"
             placement="right"
+            class-name="dialog-wrapper-list"
             :size="500">
             <DialogSessionHistory
                 v-if="sessionHistoryShow"
@@ -611,7 +613,7 @@
         <DrawerOverlay
             v-model="todoViewShow"
             placement="right"
-            modal-class="dialog-wrapper-modal-list"
+            class-name="dialog-wrapper-list"
             :size="500">
             <div class="dialog-wrapper inde-list">
                 <div class="dialog-nav">

resources/assets/js/pages/manage/file.vue

@@ -415,8 +415,9 @@
         <!--查看/修改文件-->
         <DrawerOverlay
             v-model="fileShow"
-            class="page-file-drawer"
+            class-name="file-drawer"
-            :beforeClose="fileBeforeClose"
+            :before-close="fileBeforeClose"
+            :mask="true"
             :mask-closable="false">
             <FilePreview v-if="isPreview" :file="fileInfo"/>
             <FileContent v-else ref="fileContent" v-model="fileShow" :file="fileInfo"/>

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

@@ -1,3 +1,33 @@
+// 去除 modal 默认样式
+body {
+    .ivu-modal-wrap {
+        &.common-drawer {
+            overflow: hidden;
+
+            .ivu-modal {
+                .ivu-modal-content {
+                    margin-top: 0;
+                    margin-bottom: 0;
+                    background-color: transparent;
+                }
+
+                .ivu-modal-close {
+                    display: none;
+                }
+
+                .ivu-modal-body {
+                    padding: 0;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: flex-end;
+                    align-items: flex-end;
+                }
+            }
+        }
+    }
+}
+
+// 通用抽屉样式
 .common-drawer {
     --margin-top: 8px;
     --margin-left: 8px;
@@ -142,6 +172,7 @@
     }
 }
 
+// 全屏抽屉样式
 .drawer-fullscreen {
     --margin-top: 0px;
     --margin-left: 0px;
@@ -155,44 +186,26 @@
         --close-top: 20px;
         --close-right: 12px;
     }
-}
 
-body {
+    &.dialog-wrapper-list {
-    .ivu-modal-wrap {
+        --content-bg-color: #f8f8f8;
-        &.common-drawer {
-            overflow: hidden;
-
-            .ivu-modal {
-                .ivu-modal-content {
-                    margin-top: 0;
-                    margin-bottom: 0;
-                    background-color: transparent;
-                }
-
-                .ivu-modal-close {
-                    display: none;
-                }
-
-                .ivu-modal-body {
-                    padding: 0;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: flex-end;
-                    align-items: flex-end;
-                }
-            }
-        }
     }
 }
 
 body.dark-mode-reverse {
+    // 暗黑模式下的抽屉样式
     .common-drawer {
         &.file-drawer {
             --close-color: #000000;
         }
     }
+    // 暗黑模式下的全屏抽屉样式
+    .drawer-fullscreen {
+
+    }
 }
 
+// 抽屉动画样式
 .drawer-animation {
     &-fade {
         &-enter-active,

resources/assets/sass/components/report.scss

@@ -66,7 +66,7 @@
         flex-shrink: 0;
         font-size: 16px;
         font-weight: bold;
-        padding: 20px 24px;
+        padding: 16px 24px;
         border-bottom: 1px solid #eeeeee;
         @media (max-width: 500px) {
             padding-right: 50px;

resources/assets/sass/dark.scss

@@ -80,20 +80,6 @@ body.dark-mode-reverse {
         }
     }
 
-    .common-drawer-overlay {
-        .overlay-body {
-            .overlay-close {
-                > a {
-                    color: #323232;
-
-                    &:hover {
-                        color: #000;
-                    }
-                }
-            }
-        }
-    }
-
     .file-content,
     .file-preview {
         .content-body {

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -2492,12 +2492,6 @@ body:not(.window-touch) {
     }
 }
 
-.dialog-wrapper-modal-list {
-    .ivu-modal-fullscreen {
-        background-color: #f8f8f8;
-    }
-}
-
 @keyframes head-box-loading-animation {
     0% {
         box-shadow: 0 0, 0 0;
@@ -2547,8 +2541,8 @@ body.window-portrait {
         &.inde-list {
             .dialog-nav {
                 .drawer-title {
-                    height: 52px;
+                    height: 56px;
-                    line-height: 52px;
+                    line-height: 56px;
                     border-bottom: 0;
                 }
             }

resources/assets/sass/pages/page-approve.scss

@@ -15,7 +15,7 @@
             display: flex;
             align-items: center;
             padding-bottom: 16px;
-            margin: 20px 20px 5px;
+            margin: 20px 60px 5px 20px;
             border-bottom: 1px solid #F4F4F5;
             gap: 16px;
 
@@ -523,11 +523,3 @@
         border-width: 0;
     }
 }
-
-body.window-portrait {
-    .page-approve{
-        .approve-head {
-            margin: 24px 16px 6px 16px;
-        }
-    }
-}

resources/assets/sass/pages/page-file.scss

@@ -714,12 +714,6 @@
     }
 }
 
-.page-file-drawer {
-    .overlay-content {
-        border-radius: 20px 20px 0 0 !important;
-    }
-}
-
 body.window-portrait {
     .page-file {
         .file-wrapper {