From 48270d0a333109cfc797afc0b3b84a4dfe25186b Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Sun, 28 Apr 2024 12:47:21 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):?=
 =?UTF-8?q?=20=E8=B0=83=E6=95=B4ai=E5=8A=A9=E6=89=8B=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layout/components/AiComponent.vue     |  3 +-
 .../frontend/src/layout/components/AiTips.vue | 95 +++++++++++++++++++
 .../frontend/src/layout/components/Topbar.vue | 25 +++++
 core/frontend/src/styles/topbar.scss          |  5 +-
 4 files changed, 124 insertions(+), 4 deletions(-)
 create mode 100644 core/frontend/src/layout/components/AiTips.vue

diff --git a/core/frontend/src/layout/components/AiComponent.vue b/core/frontend/src/layout/components/AiComponent.vue
index 5f342b59a5..9736251a05 100644
--- a/core/frontend/src/layout/components/AiComponent.vue
+++ b/core/frontend/src/layout/components/AiComponent.vue
@@ -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;
diff --git a/core/frontend/src/layout/components/AiTips.vue b/core/frontend/src/layout/components/AiTips.vue
new file mode 100644
index 0000000000..acd74e3c2d
--- /dev/null
+++ b/core/frontend/src/layout/components/AiTips.vue
@@ -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>
diff --git a/core/frontend/src/layout/components/Topbar.vue b/core/frontend/src/layout/components/Topbar.vue
index 60349c50a3..4134bb3824 100644
--- a/core/frontend/src/layout/components/Topbar.vue
+++ b/core/frontend/src/layout/components/Topbar.vue
@@ -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>
diff --git a/core/frontend/src/styles/topbar.scss b/core/frontend/src/styles/topbar.scss
index 964fd870ac..788f3eb55b 100644
--- a/core/frontend/src/styles/topbar.scss
+++ b/core/frontend/src/styles/topbar.scss
@@ -4,9 +4,8 @@
   top: 0;
   left: 0;
   z-index: 1001;
-  overflow: hidden;
   border-bottom: 1px solid var(--TopBG, #E6E6E6);
-  background-color: var(--TopBG, #f1f3f8); 
+  background-color: var(--TopBG, #f1f3f8);
   .log {
     padding: 0 16px;
     line-height: 56px;
@@ -71,7 +70,7 @@
       padding: 10px 8px;
       height: 100%;
       font-size: 18px;
-      
+
       vertical-align: text-bottom;
 
       &.hover-effect {