perf: 优化抽屉窗口

This commit is contained in:
kuaifan 2025-08-07 14:27:00 +08:00
parent d5a75f887d
commit 8e084d2362
10 changed files with 58 additions and 74 deletions

View File

@ -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>

View File

@ -127,11 +127,13 @@
<!--AI BOT-->
<DrawerOverlay v-model="aibotShow" placement="right" :size="720">
<div v-if="aibotShow" class="ivu-modal-wrap-apply">
<div class="ivu-modal-wrap-apply-title">
<template v-if="aibotShow" #title>
{{ $L('AI 列表') }}
<p @click="applyClick({value: 'robot-setting'}, 'openai')" v-if="userIsAdmin">{{ $L('机器人设置') }}</p>
</div>
</template>
<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">

View File

@ -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">

View File

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

View File

@ -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 {
.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;
}
}
}
&.dialog-wrapper-list {
--content-bg-color: #f8f8f8;
}
}
body.dark-mode-reverse {
// 暗黑模式下的抽屉样式
.common-drawer {
&.file-drawer {
--close-color: #000000;
}
}
// 暗黑模式下的全屏抽屉样式
.drawer-fullscreen {
}
}
// 抽屉动画样式
.drawer-animation {
&-fade {
&-enter-active,

View File

@ -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;

View File

@ -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 {

View File

@ -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;
line-height: 52px;
height: 56px;
line-height: 56px;
border-bottom: 0;
}
}

View File

@ -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;
}
}
}

View File

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