添加AI客服

README.md

@@ -25,6 +25,7 @@ npm run prod:ssr 生产环境服务端渲染
 1. npm run prod:ssr&
 ```
 
+# node版本20.15.0
 
 
 

package.json

@@ -38,7 +38,7 @@
         "typescript": "^5.3.3",
         "unplugin-auto-import": "^0.17.5",
         "unplugin-vue-components": "^0.26.0",
-        "vite": "^5.1.4",
+        "vite": "^5.4.21",
         "vue-tsc": "^1.8.27"
     }
 }

src/assets/styles/common/style.css

@@ -6633,6 +6633,65 @@
             .feedBackBox .contactQr:hover div {
                 display: block
             }
+
+            
+
+
+            
+            .feedBackBox .contactAi {
+                position: relative;
+            }
+            .feedBackBox .contactAi .aiMask {
+                width:200px;
+                height:40px;
+                position: absolute;
+                left:-505px;
+                bottom:-215px;
+                background: #fff;
+                /* display: none; */
+            }
+            .feedBackBox .contactAi .aiMask img{
+                width:150px;
+                margin:10px auto;
+            }
+            .feedBackBox .contactAi .content {
+                width: 500px;
+                height:500px;
+                padding:10px;
+                border-radius: 20px;
+                background: #fff;
+                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); 
+                /* display: none; */
+                position: absolute;
+                right: 58px;
+                bottom: -230px
+            }
+            /* .feedBackBox .contactAi:hover div {
+                display: block
+            } */
+           
+            /* 右侧三角箭头（用::after实现，不占用DOM） */
+            .feedBackBox .contactAi .content::after {
+                content: '';        /* 伪元素必备，空值即可 */
+                position: absolute; /* 脱离文档流，自由定位 */
+                top: 50%;           /* 垂直方向居中 */
+                right: -10px;       /* 贴紧容器右侧（数值=箭头大小，关键） */
+                transform: translateY(-50%); /* 精准垂直居中，抵消自身高度 */
+                width: 0;
+                height: 0;
+                border: solid transparent;   /* 透明基础边框 */
+                /* 核心：右边界显示，颜色与容器背景一致，覆盖边框 */
+                border-left: 10px solid #ffffff; /* 左边界：与容器背景一致，覆盖容器边框 */
+                border-top: 10px solid transparent;
+                border-bottom: 10px solid transparent;
+                border-left-color: #ffffff;/* 与容器背景色完全一致 */
+                /* 箭头加轻微阴影，与容器阴影衔接（可选，增强立体感） */
+                box-shadow: 0px 0 0px 0px rgba(0, 0, 0, 0.05);
+            }
+            
+            /* .feedBackBox .contactAi:hover div {
+                display: block
+            } */
             
             .feedBackBox .contactInner {
                 display: none;

src/components/layout/feedFix.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 const router = useRouter()
-
+const aiIframeState = ref(false)//是否显示aiIframe
 if (typeof window !== 'undefined' && typeof window.globalThis.addEventListener === 'function') {
     globalThis.scrollTo(0, 0)
     globalThis.addEventListener('scroll', function() {
@@ -21,6 +22,9 @@ function scrollToTop() {
         behavior: "smooth"
     })
 }
+function showAiIframe(){
+    aiIframeState.value = !aiIframeState.value
+}
 </script>
 <template>
 <div class="feedBackBox">
@@ -54,11 +58,23 @@ function scrollToTop() {
             <img src="@/assets/img/qr_codeF1.png" alt="">
         </div>
     </div>
+    <div class="contactAi">
+        <img src="@/assets/img/ai.png" alt="" @click="showAiIframe">
+        <div class="content" v-if="aiIframeState">
+            <iframe
+            src="https://ai.usky.cn/chatbot/KwhqwXmI5KFHOP5v"
+            style="width: 100%; height: 100%; margin:0 0;"
+            frameborder="0"
+            id="aiIframe"
+            allow="microphone">
+            </iframe>
+        </div>
+        <div class="aiMask" v-if="aiIframeState">
+            <img src="@/assets/img/logo-text.png" alt="">
+        </div>
+    </div>
     <div @click="scrollToTop" id="scroll-up" style="opacity:0">
         <img src="@/assets/img/home/f_top.png" alt="">
     </div>
 </div>
-</template>
-<style lang="scss" scoped>
-
-</style>
+</template>

src/utils/request.ts

@@ -15,7 +15,7 @@ const service: any = axios.create({
     // axios中请求配置有baseURL选项，表示请求URL公共部分
     baseURL: url,
     // 超时
-    timeout: 300000
+    timeout: 5000
 })
 
 // request拦截器