feat:接入讯飞星火AI客服

Author: Java-Edge

Diff for: src/App.vue

@@ -5,13 +5,15 @@
     <router-view class="body" />
     <QrCode></QrCode>
     <Footer />
+    <AiChatbot />
   </div>
 </template>
 
 <script>
 import Header from "./views/Header.vue";
 import Footer from "./views/Footer.vue";
 import QrCode from "./views/QrCode.vue";
+import AiChatbot from "./components/AiChatbot.vue";
 
 export default {
   name: "App",
@@ -20,6 +22,7 @@ export default {
     Header,
     Footer,
     QrCode,
+    AiChatbot,
   },
 };
 </script>

Diff for: src/components/AiChatbot.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="ai-chatbot">
+    <div class="chatbot-icon" @click="toggleChat">
+      <img src="https://www.svgrepo.com/show/306500/robot.svg" alt="AI" />
+    </div>
+    <div class="chatbot-dialog" v-show="isOpen">
+      <div class="dialog-header">
+        <span>AI</span>
+        <span class="close-btn" @click="toggleChat">×</span>
+      </div>
+      <iframe
+        src="http://localhost/chatbot/88n14yNFATs9MNtT"
+        frameborder="0"
+        allow="microphone"
+      ></iframe>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+const toggleChat = () => {
+  isOpen.value = !isOpen.value;
+};
+</script>
+
+<style scoped>
+.ai-chatbot {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 1000;
+}
+
+.chatbot-icon {
+  width: 60px;
+  height: 60px;
+  background: #32ca99;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.chatbot-icon:hover {
+  transform: scale(1.1);
+}
+
+.chatbot-icon img {
+  width: 32px;
+  height: 32px;
+  filter: brightness(0) invert(1);
+}
+
+.chatbot-dialog {
+  position: fixed;
+  right: 20px;
+  bottom: 100px;
+  width: 380px;
+  height: 600px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: #32ca99;
+  color: #fff;
+  font-size: 16px;
+}
+
+.close-btn {
+  cursor: pointer;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.close-btn:hover {
+  opacity: 0.8;
+}
+
+iframe {
+  width: 100%;
+  height: calc(100% - 44px);
+  border: none;
+}
+</style>