perf: 优化设置

This commit is contained in:
kuaifan 2025-02-22 00:34:36 +08:00
parent a14896307f
commit d0a0e77c44
2 changed files with 87 additions and 159 deletions

View File

@ -21,8 +21,7 @@
:sm="{ span: 6 }" :sm="{ span: 6 }"
:lg="{ span: 6 }" :lg="{ span: 6 }"
:xl="{ span: 6 }" :xl="{ span: 6 }"
:xxl="{ span: 3 }" :xxl="{ span: 3 }">
>
<div class="apply-col"> <div class="apply-col">
<div @click="applyClick(item)"> <div @click="applyClick(item)">
<div class="logo"> <div class="logo">
@ -46,26 +45,26 @@
<Report v-if="workReportShow" v-model="workReportTabs" @on-read="$store.dispatch('getReportUnread', 1000)" /> <Report v-if="workReportShow" v-model="workReportTabs" @on-read="$store.dispatch('getReportUnread', 1000)" />
</DrawerOverlay> </DrawerOverlay>
<!--AI 列表--> <!--AI-->
<DrawerOverlay v-model="aibotShow" placement="right" :size="720"> <DrawerOverlay v-model="aibotShow" placement="right" :size="720">
<div v-if="aibotShow" class="ivu-modal-wrap-apply"> <div v-if="aibotShow" class="ivu-modal-wrap-apply">
<div class="ivu-modal-wrap-apply-title"> <div class="ivu-modal-wrap-apply-title">
{{ $L('AI 列表') }} {{ $L('AI 列表') }}
<p @click="applyClick({value: 'robot-setting'}, 'openai')" v-if="userIsAdmin">{{$L('机器人设置')}}</p> <p @click="applyClick({value: 'robot-setting'}, 'openai')" v-if="userIsAdmin">{{$L('机器人设置')}}</p>
</div> </div>
<div class="ivu-modal-wrap-apply-body ai-body"> <div class="ivu-modal-wrap-apply-body full-body">
<ul class="ai-list"> <ul class="ivu-modal-wrap-ul">
<li v-for="(item, key) in aibotList" :key="key"> <li v-for="(item, key) in aibotList" :key="key">
<div class="ai-img"> <div class="modal-item-img">
<img :src="item.src"> <img :src="item.src">
</div> </div>
<div class="ai-info"> <div class="modal-item-info">
<h4>{{ item.label }}</h4> <h4>{{ item.label }}</h4>
<p class="ai-desc" @click="openDetail(item.desc)">{{ item.desc }}</p> <p class="modal-item-desc" @click="openDetail(item.desc)">{{ item.desc }}</p>
<ul v-if="item.tags.length > 0" class="ai-modal"> <ul v-if="item.tags.length > 0" class="modal-item-tags">
<li v-for="(tag, index) in item.tags" :key="index">{{ tag }}</li> <li v-for="(tag, index) in item.tags" :key="index">{{ tag }}</li>
</ul> </ul>
<div class="ai-btn"> <div class="modal-item-btns">
<Button icon="md-chatbubbles" :loading="aibotDialogSearchLoad == item.value" @click="onGoToChat(item.value)">{{ $L('开始聊天') }}</Button> <Button icon="md-chatbubbles" :loading="aibotDialogSearchLoad == item.value" @click="onGoToChat(item.value)">{{ $L('开始聊天') }}</Button>
<Button v-if="userIsAdmin" icon="md-settings" @click="applyClick({value: 'robot-setting'}, item.value)">{{ $L('设置') }}</Button> <Button v-if="userIsAdmin" icon="md-settings" @click="applyClick({value: 'robot-setting'}, item.value)">{{ $L('设置') }}</Button>
</div> </div>
@ -136,53 +135,85 @@
</DrawerOverlay> </DrawerOverlay>
<!--签到--> <!--签到-->
<DrawerOverlay v-model="signInShow" placement="right" :size="700"> <DrawerOverlay v-model="signInShow" placement="right" :size="500">
<div class="ivu-modal-wrap-apply"> <div v-if="signInShow" class="ivu-modal-wrap-apply">
<div class="ivu-modal-wrap-apply-title"> <div class="ivu-modal-wrap-apply-title">
{{ $L('签到管理') }} {{ $L('签到管理') }}
<p @click="signInType = signInType == 1 ? 2 : 1" v-if="userIsAdmin"> <p @click="signInSettingShow=true" v-if="userIsAdmin">{{ $L('签到设置') }}</p>
{{ signInType == 1 ? $L('签到设置') : $L('返回') }}
</p>
</div> </div>
<div class="ivu-modal-wrap-apply-body"> <div class="ivu-modal-wrap-apply-body">
<Checkin v-if="signInType == 1" /> <Checkin />
<SystemCheckin v-else />
</div> </div>
</div> </div>
</DrawerOverlay> </DrawerOverlay>
<!-- 会议 --> <!--签到设置-->
<DrawerOverlay v-model="meetingShow" placement="right" :size="600"> <DrawerOverlay v-model="signInSettingShow" placement="right" :size="720">
<div class="ivu-modal-wrap-apply"> <div v-if="signInSettingShow" class="ivu-modal-wrap-apply">
<div class="ivu-modal-wrap-apply-title"> <div class="ivu-modal-wrap-apply-title">
{{ $L('会议') }} {{ $L('签到设置') }}
<p @click="meetingType = meetingType == 1 ? 2 : 1"> <p @click="signInSettingShow=false">{{ $L('返回') }}</p>
{{ meetingType == 1 ? $L('会议设置') : $L('返回') }}
</p>
</div> </div>
<div class="ivu-modal-wrap-apply-body"> <div class="ivu-modal-wrap-apply-body">
<ul class="ivu-modal-wrap-ul" v-if="meetingType == 1"> <SystemCheckin/>
</div>
</div>
</DrawerOverlay>
<!--会议-->
<DrawerOverlay v-model="meetingShow" placement="right" :size="720">
<div v-if="meetingShow" class="ivu-modal-wrap-apply">
<div class="ivu-modal-wrap-apply-title">
{{ $L('会议') }}
<p @click="meetingSettingShow = true" v-if="userIsAdmin">{{ $L('会议设置') }}</p>
</div>
<div class="ivu-modal-wrap-apply-body full-body">
<ul class="ivu-modal-wrap-ul">
<li> <li>
<div class="apply-icon no-dark-content meeting"></div> <div class="modal-item-img">
<h4>{{ $L('新会议') }}</h4> <div class="apply-icon no-dark-content meeting"></div>
<p class="desc" @click="openDetail(meetingDescs.add)"> {{ meetingDescs.add }} </p> </div>
<p class="btn" @click="onMeeting('createMeeting')">{{ $L('新建会议') }}</p> <div class="modal-item-info">
<h4>{{ $L('新会议') }}</h4>
<p class="modal-item-desc" @click="openDetail(meetingDescs.add)"> {{ meetingDescs.add }} </p>
<div class="modal-item-btns">
<Button @click="onMeeting('createMeeting')">{{ $L('新建会议') }}</Button>
</div>
</div>
</li> </li>
<li> <li>
<div class="apply-icon no-dark-content meeting-join"></div> <div class="modal-item-img">
<h4>{{ $L('加入会议') }}</h4> <div class="apply-icon no-dark-content meeting-join"></div>
<p class="desc" @click="openDetail(meetingDescs.join)">{{ meetingDescs.join }}</p> </div>
<p class="btn" @click="onMeeting('joinMeeting')">{{ $L('加入会议') }}</p> <div class="modal-item-info">
<h4>{{ $L('加入会议') }}</h4>
<p class="modal-item-desc" @click="openDetail(meetingDescs.join)">{{ meetingDescs.join }}</p>
<div class="modal-item-btns">
<Button @click="onMeeting('joinMeeting')">{{ $L('加入会议') }}</Button>
</div>
</div>
</li> </li>
</ul> </ul>
<SystemMeeting v-else /> </div>
</div>
</DrawerOverlay>
<!--会议设置-->
<DrawerOverlay v-model="meetingSettingShow" placement="right" :size="600">
<div v-if="meetingSettingShow" class="ivu-modal-wrap-apply">
<div class="ivu-modal-wrap-apply-title">
{{ $L('会议设置') }}
<p @click="meetingSettingShow = false">{{ $L('返回') }}</p>
</div>
<div class="ivu-modal-wrap-apply-body full-body">
<SystemMeeting/>
</div> </div>
</div> </div>
</DrawerOverlay> </DrawerOverlay>
<!--LDAP--> <!--LDAP-->
<DrawerOverlay v-model="ldapShow" placement="right" :size="700"> <DrawerOverlay v-model="ldapShow" placement="right" :size="700">
<div class="ivu-modal-wrap-apply"> <div v-if="ldapShow" class="ivu-modal-wrap-apply">
<div class="ivu-modal-wrap-apply-title"> <div class="ivu-modal-wrap-apply-title">
{{ $L('LDAP 设置') }} {{ $L('LDAP 设置') }}
</div> </div>
@ -194,7 +225,7 @@
<!--邮件--> <!--邮件-->
<DrawerOverlay v-model="mailShow" placement="right" :size="700"> <DrawerOverlay v-model="mailShow" placement="right" :size="700">
<div class="ivu-modal-wrap-apply"> <div v-if="mailShow" class="ivu-modal-wrap-apply">
<div class="ivu-modal-wrap-apply-title"> <div class="ivu-modal-wrap-apply-title">
{{ $L('邮件通知') }} {{ $L('邮件通知') }}
</div> </div>
@ -206,7 +237,7 @@
<!--app推送--> <!--app推送-->
<DrawerOverlay v-model="appPushShow" placement="right" :size="700"> <DrawerOverlay v-model="appPushShow" placement="right" :size="700">
<div class="ivu-modal-wrap-apply"> <div v-if="appPushShow" class="ivu-modal-wrap-apply">
<div class="ivu-modal-wrap-apply-title"> <div class="ivu-modal-wrap-apply-title">
{{ $L('APP 推送') }} {{ $L('APP 推送') }}
</div> </div>
@ -289,10 +320,10 @@ export default {
aibotDialogSearchLoad: "", aibotDialogSearchLoad: "",
// //
signInShow: false, signInShow: false,
signInType: 1, signInSettingShow: false,
// //
meetingShow: false, meetingShow: false,
meetingType: 1, meetingSettingShow: false,
meetingDescs: { meetingDescs: {
add: this.$L('创建一个全新的会议视频会议,与会者可以在实时中进行面对面的视听交流。') + this.$L('通过视频会议平台,参与者可以分享屏幕、共享文档,并与其他与会人员进行讨论和协。'), add: this.$L('创建一个全新的会议视频会议,与会者可以在实时中进行面对面的视听交流。') + this.$L('通过视频会议平台,参与者可以分享屏幕、共享文档,并与其他与会人员进行讨论和协。'),
join: this.$L('加入视频会议,参与已经创建的会议,在会议过程中与其他参会人员进行远程实时视听交流和协作。'), join: this.$L('加入视频会议,参与已经创建的会议,在会议过程中与其他参会人员进行远程实时视听交流和协作。'),
@ -300,10 +331,8 @@ export default {
// //
ldapShow: false, ldapShow: false,
// //
mailType: 1,
mailShow: false, mailShow: false,
// //
appPushType: 1,
appPushShow: false, appPushShow: false,
// //
scanLoginShow: false, scanLoginShow: false,
@ -441,22 +470,18 @@ export default {
this.aibotSettingShow = true; this.aibotSettingShow = true;
break; break;
case 'signin': case 'signin':
this.signInType = 1;
this.signInShow = true; this.signInShow = true;
break; break;
case 'meeting': case 'meeting':
this.meetingType = 1;
this.meetingShow = true; this.meetingShow = true;
break; break;
case 'ldap': case 'ldap':
this.ldapShow = true; this.ldapShow = true;
break; break;
case 'mail': case 'mail':
this.mailType = 1;
this.mailShow = true; this.mailShow = true;
break; break;
case 'appPush': case 'appPush':
this.appPushType = 1;
this.appPushShow = true; this.appPushShow = true;
break; break;
case 'scan': case 'scan':
@ -603,22 +628,6 @@ export default {
openDetail(desc){ openDetail(desc){
$A.modalInfo({ $A.modalInfo({
content: desc, content: desc,
onOk: () => {
return new Promise((resolve, reject) => {
this.$store.dispatch("call", {
url: 'dialog/group/disband',
data: {
dialog_id: this.dialogId,
}
}).then(({msg}) => {
resolve(msg);
this.$store.dispatch("forgetDialog", this.dialogId);
this.goForward({name: 'manage-messenger'});
}).catch(({msg}) => {
reject(msg);
});
})
},
}); });
}, },
// //

View File

@ -241,11 +241,7 @@
max-width: 100vw; max-width: 100vw;
.ivu-modal-wrap-apply-title { .ivu-modal-wrap-apply-title {
position: sticky; padding: 12px 30px;
top: 0;
z-index: 10;
margin: 0 20px;
padding: 12px 10px;
background: #ffffff; background: #ffffff;
color: #303133; color: #303133;
font-size: 20px; font-size: 20px;
@ -261,14 +257,14 @@
} }
@media (max-width: 500px) { @media (max-width: 500px) {
padding: 10px 30px;
margin-right: 28px; margin-right: 28px;
} }
} }
.ivu-modal-wrap-apply-body { .ivu-modal-wrap-apply-body {
position: relative;
flex: 1; flex: 1;
position: relative;
padding: 8px 30px; padding: 8px 30px;
.setting-item, .setting-item,
@ -325,89 +321,6 @@
} }
.ivu-modal-wrap-ul { .ivu-modal-wrap-ul {
list-style-type: none;
overflow: hidden;
border-radius: 3px;
margin-right: -10px;
li {
float: left;
width: calc(50% - 10px);
border: 1px solid #eeeeee;
box-sizing: border-box;
padding: 28px 20px;
position: relative;
text-align: center;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 6px;
.apply-icon {
display: block;
width: 50px;
height: 50px;
border-radius: 16px;
margin: 0 auto 12px;
}
h4 {
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-style: normal;
max-width: 100%;
font-size: 16px;
font-weight: 500;
color: #1b1b1b;
line-height: 24px;
text-align: center;
padding: 0 12px;
margin-bottom: 6px;
}
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
@media (max-width: 510px) {
-webkit-line-clamp: 2;
}
&.btn {
-webkit-line-clamp: 1;
}
}
.desc {
cursor: pointer;
height: 84px;
@media (max-width: 510px) {
height: 42px;
}
}
.btn {
color: #2b85e4;
margin: 20px auto 0;
cursor: pointer;
padding: 5px 0;
}
.load {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #9797971c;
line-height: 300px;
}
}
}
.ai-list {
list-style-type: none; list-style-type: none;
overflow: hidden; overflow: hidden;
border-radius: 3px; border-radius: 3px;
@ -427,18 +340,19 @@
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
} }
.ai-img { .modal-item-img {
margin-right: 20px; margin-right: 20px;
flex-shrink: 0; flex-shrink: 0;
> img { > img,
.apply-icon {
width: 52px; width: 52px;
height: 52px; height: 52px;
border-radius: 26px; border-radius: 26px;
} }
} }
.ai-info { .modal-item-info {
flex: 1; flex: 1;
h4 { h4 {
@ -449,7 +363,7 @@
font-weight: 500; font-weight: 500;
} }
.ai-desc { .modal-item-desc {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
line-height: 1.6; line-height: 1.6;
@ -461,7 +375,7 @@
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.ai-modal { .modal-item-tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
@ -479,7 +393,7 @@
} }
} }
.ai-btn { .modal-item-btns {
button + button { button + button {
margin-left: 12px; margin-left: 12px;
} }
@ -518,14 +432,19 @@
} }
} }
&.ai-body { &.full-body {
height: 0;
overflow: auto;
@media (max-width: 500px) { @media (max-width: 500px) {
padding: 8px 0; padding: 8px 0;
.ai-list {
.ivu-modal-wrap-ul {
> li { > li {
border: 0; border: 0;
border-top: 1px solid #eeeeee; border-top: 1px solid #eeeeee;
border-radius: 0; border-radius: 0;
&:hover { &:hover {
box-shadow: none; box-shadow: none;
} }