refactor(系统设置): 调整ai助手样式

This commit is contained in:
wangjiahao 2024-04-28 12:47:21 +08:00
parent 2df0be043e
commit 48270d0a33
4 changed files with 124 additions and 4 deletions

View File

@ -89,7 +89,8 @@ export default {
}
}
.ai-main-active {
border: 1px solid #d9d9d9;
border: 1px solid rgba(239, 240, 241, 1);
box-shadow: 0px 6px 24px 0px #1f232914;
}
.ai-main-active-min {
min-width: 350px;

View File

@ -0,0 +1,95 @@
<script>
export default {
name: 'AiTips',
data() {
return {
visible: true
}
},
mounted() {
},
methods: {
confirm() {
this.$emit('confirm')
}
}
}
</script>
<template>
<el-popover
v-model="visible"
placement="bottom"
:width="288"
show-arrow
>
<div class="ai-popper-tips-content">
<p class="title">DataEase 智能客服</p>
<p class="constant">
你好我是 DataEase 智能客服<br />点击一下开启高效解答模式~<br />&nbsp;
</p>
<div class="bottom">
<el-button size="middle" @click="confirm"> 我知道了 </el-button>
</div>
</div>
<div slot="reference">
<div
style="height: 100%;padding: 0 8px;"
class="right-menu-item hover-effect"
>
<a style="font-size:24px;display: flex;height: 100%;width: 100%;justify-content: center;align-items: center;">
<svg-icon
icon-class="dv-ai"
/>
</a>
</div>
</div>
</el-popover>
</template>
<style lang="less">
.ai-popper-tips {
z-index: 10001 !important;
padding: 24px !important;
box-shadow: none !important;
background: var(--ed-color-primary) !important;
.ed-popper__arrow::before {
border: 1px solid var(--ed-color-primary) !important;
background: var(--ed-color-primary) !important;
}
}
.ai-popper-tips-content {
color: rgba(255, 255, 255, 1);
.title {
font-family: PingFang SC;
font-size: 20px;
font-weight: 500;
line-height: 28px;
}
.content {
font-family: PingFang SC;
font-size: 14px;
font-weight: 500;
line-height: 22px;
text-align: left;
}
.bottom {
line-height: 22px;
text-align: right;
button {
border-color: #ffffff !important;
font-weight: 500;
color: rgba(51, 112, 255, 1) !important;
}
}
}
.ai-popper-tips-icon {
margin: 0 8px;
z-index: 10003;
border-radius: 50%;
background: #ffffff;
width: 28px;
height: 28px;
}
</style>

View File

@ -125,6 +125,8 @@
</div>
<ExportExcel ref="ExportExcelRef" />
<ai-tips @confirm="aiTipsConfirm" v-if="showOverlay" class="ai-icon-tips"></ai-tips>
<div v-if="showOverlay" class="overlay"></div>
<ai-component
v-if="aiBaseUrl"
@ -165,9 +167,11 @@ import TemplateMarket from '@/views/panel/templateMarket'
import { changeFavicon, inOtherPlatform } from '@/utils/index'
import AiComponent from '@/layout/components/AiComponent'
import { findBaseParams } from '@/api/ai/aiComponent'
import AiTips from "@/layout/components/AiTips.vue";
export default {
name: 'Topbar',
components: {
AiTips,
AiComponent,
TemplateMarket,
AppLink,
@ -183,6 +187,7 @@ export default {
},
data() {
return {
showOverlay: false,
aiBaseUrl: null,
uiInfo: null,
logoUrl: null,
@ -308,10 +313,15 @@ export default {
})
},
methods: {
aiTipsConfirm(){
localStorage.setItem('DE1.0-AI-TIPS-CHECK', 'CHECKED')
this.showOverlay = false
},
dataExportCenter() {
this.downloadClick()
},
async initAiBase() {
const aiTipsCheck = localStorage.getItem('DE1.0-AI-TIPS-CHECK')
await findBaseParams().then(rsp => {
const params = rsp.data
if (params && params['ai.baseUrl']) {
@ -529,4 +539,19 @@ export default {
display: none;
}
.ai-icon-tips {
font-size: 24px !important;
z-index: 10001;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
z-index: 10000;
}
</style>

View File

@ -4,7 +4,6 @@
top: 0;
left: 0;
z-index: 1001;
overflow: hidden;
border-bottom: 1px solid var(--TopBG, #E6E6E6);
background-color: var(--TopBG, #f1f3f8);
.log {