Merge pull request #9229 from dataease/pr@dev-v2@refactor_ai

refactor(工作台): Ai助手增加首次指引和样式修改

core/core-frontend/src/layout/components/AiComponent.vue

@@ -80,7 +80,7 @@ onMounted(() => {
   }
 }
 .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 {

core/core-frontend/src/layout/components/AiTips.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+const visible = ref(true)
+const emits = defineEmits(['confirm'])
+
+const confirm = () => {
+  emits('confirm')
+}
+
+onMounted(() => {
+  // do
+})
+</script>
+<template>
+  <el-popover
+    :visible="visible"
+    placement="bottom"
+    popper-class="ai-popper-tips"
+    :width="288"
+    show-arrow
+  >
+    <div class="ai-popper-tips-content">
+      <p class="title">DataEase 智能客服</p>
+      <p class="constant">你好，卧室DatEase智能客服<br />点击一下开，启高效解答模式~<br />&nbsp;</p>
+      <div class="bottom">
+        <el-button size="middle" @click="confirm"> 我知道了 </el-button>
+      </div>
+    </div>
+    <template #reference>
+      <div class="ai-popper-tips-icon">
+        <el-icon style="margin: 2px" class="ai-icon">
+          <Icon name="dv-ai" />
+        </el-icon>
+      </div>
+    </template>
+  </el-popover>
+</template>
+
+<style lang="less">
+.ai-popper-tips {
+  z-index: 10001 !important;
+  padding: 24px !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 {
+      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>

core/core-frontend/src/layout/components/Header.vue

@@ -17,6 +17,7 @@ import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 import AiComponent from '@/layout/components/AiComponent.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { findBaseParams } from '@/api/aiComponent'
+import AiTips from '@/layout/components/AiTips.vue'
 const appearanceStore = useAppearanceStoreWithOut()
 const { push } = useRouter()
 const route = useRoute()
@@ -43,6 +44,7 @@ const permissionStore = usePermissionStore()
 const routers: any[] = formatRoute(permissionStore.getRoutersNotHidden as AppCustomRouteRecordRaw[])
 const showSystem = ref(false)
 const showToolbox = ref(false)
+const showOverlay = ref(true)
 const handleSelect = (index: string) => {
   // 自定义事件
   if (isExternal(index)) {
@@ -61,6 +63,12 @@ const navigateBg = computed(() => appearanceStore.getNavigateBg)
 const navigate = computed(() => appearanceStore.getNavigate)
 
 const initAiBase = async () => {
+  const aiTipsCheck = localStorage.getItem('DE-AI-TIPS-CHECK')
+  if (aiTipsCheck === 'CHECKED') {
+    showOverlay.value = false
+  } else {
+    showOverlay.value = true
+  }
   await findBaseParams().then(rsp => {
     const params = rsp.data
     if (params && params['ai.baseUrl']) {
@@ -68,6 +76,11 @@ const initAiBase = async () => {
     }
   })
 }
+
+const aiTipsConfirm = () => {
+  localStorage.setItem('DE-AI-TIPS-CHECK', 'CHECKED')
+  showOverlay.value = false
+}
 onMounted(() => {
   initShowSystem()
   initShowToolbox()
@@ -96,19 +109,30 @@ onMounted(() => {
     </el-menu>
     <div class="operate-setting" v-if="!desktop">
       <XpackComponent jsname="c3dpdGNoZXI=" />
-      <el-icon style="margin: 0 10px" class="ai-icon" v-if="aiBaseUrl">
+      <el-icon style="margin: 0 10px" class="ai-icon" v-if="aiBaseUrl && !showOverlay">
         <Icon name="dv-ai" @click="handleAiClick" />
       </el-icon>
+      <ai-tips @confirm="aiTipsConfirm" v-if="showOverlay" class="ai-icon-tips"></ai-tips>
       <ToolboxCfg v-if="showToolbox" />
       <TopDoc />
       <SystemCfg v-if="showSystem" />
       <AccountOperator />
       <ai-component v-if="aiBaseUrl" :base-url="aiBaseUrl"></ai-component>
+      <div v-if="showOverlay" class="overlay"></div>
     </div>
   </el-header>
 </template>
 
 <style lang="less" scoped>
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
+  z-index: 10000;
+}
 .header-light {
   background-color: #ffffff !important;
   box-shadow: 0px 0.5px 0px 0px #1f232926 !important;
@@ -208,4 +232,9 @@ onMounted(() => {
 .ai-icon {
   font-size: 24px !important;
 }
+
+.ai-icon-tips {
+  font-size: 24px !important;
+  z-index: 10001;
+}
 </style>