初始化版本，引入智慧食堂模块，第三方模块

src/components/Chat/chat.ts

@@ -0,0 +1,9 @@
+import request from "/@/utils/request";
+
+export const turbo = (content: string) => {
+    return request({
+        url: '/admin/chat/msg',
+        method: 'post',
+        data: {content: content},
+    });
+};

src/components/Chat/i18n/en.ts

@@ -0,0 +1,6 @@
+export default {
+	chat: {
+		send: 'Send',
+		inputPlaceholder: 'Type a message...'
+	}
+};

src/components/Chat/i18n/zh-cn.ts

@@ -0,0 +1,6 @@
+export default {
+	chat: {
+		send: '发送',
+		inputPlaceholder: '请输入消息...'
+	},
+};

src/components/Chat/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="z-[1000]" v-if="getThemeConfig.isChat">
+    <button id="open-chat"
+            @click="chatContainer = !chatContainer"
+            class="fixed mb-16 mr-4 bottom-4 right-4 inline-flex bg-primary items-center justify-center text-sm font-medium disabled:pointer-events-none disabled:opacity-50 border rounded-full w-16 h-16 hover:bg-gray-700 m-0 cursor-pointer border-gray-200 bg-none p-0 normal-case leading-5 hover:text-gray-900"
+            type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed">
+      <svg xmlns=" http://www.w3.org/2000/svg" width="30" height="40" viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+           class="text-white block border-gray-200 align-middle">
+        <path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z" class="border-gray-200">
+        </path>
+      </svg>
+    </button>
+    <div v-show="chatContainer" class="fixed bottom-24 right-4 w-96 mb-12">
+      <div class="bg-gray-100 shadow-md rounded-lg max-w-lg w-full">
+        <div class="p-4 border-b bg-primary text-white rounded-t-lg flex justify-between items-center">
+          <p class="text-lg font-semibold">AI 助手</p>
+          <button @click="chatContainer = false"
+                  class="text-gray-300 hover:text-gray-400 focus:outline-none focus:text-gray-400">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
+                 stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <div ref="chatboxRef" class="p-4 h-96 overflow-y-auto">
+          <!-- Chat messages will be displayed here -->
+          <div v-for="message in messageList">
+            <div class="mb-2 text-right" v-if="message.inputMessage">
+              <p class="bg-blue-500 text-white rounded-lg py-2 px-4 inline-block">{{ message.inputMessage }}</p>
+            </div>
+            <div class="mb-2" v-if="message.botMessage">
+              <p class="bg-gray-200 text-gray-700 rounded-lg py-2 px-4 inline-block">{{ message.botMessage }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="p-4 border-t flex">
+          <input v-model="userInput" ref="userInputRef" type="text" :placeholder="$t('chat.inputPlaceholder')"
+                 :readonly="readonly"
+                 class="w-full px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+          <button @click="sendMessage"
+                  class="bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 transition duration-300">{{ $t('chat.send') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts" name="chat">
+import {onKeyStroke} from '@vueuse/core'
+import {turbo} from "/@/components/Chat/chat";
+import {useThemeConfig} from "/@/stores/themeConfig";
+import {AxiosResponse} from "axios";
+
+// 定义变量内容
+const storesThemeConfig = useThemeConfig();
+const {themeConfig} = storeToRefs(storesThemeConfig);
+
+// 获取布局配置信息
+const getThemeConfig = computed(() => {
+  return themeConfig.value;
+});
+
+interface Message {
+  inputMessage?: string;
+  botMessage?: string;
+}
+
+const messageList = ref<Message[]>([{botMessage: '您好！我是通用大模型，请问有什么可以帮助您？'}]);
+const chatContainer = ref(false)
+const userInput = ref("")
+const userInputRef = ref()
+const chatboxRef = ref()
+const readonly = ref(false)
+
+// watch 判断 messageList 长度是否变化
+watch(() => messageList.value.length, (newLength, oldLength) => {
+  if (newLength !== oldLength) {
+    setTimeout(() => {
+      chatboxRef.value.scrollTop = chatboxRef.value.scrollHeight;
+    }, 500);
+  }
+});
+
+// 发送消息
+const sendMessage = () => {
+  const userMessage = userInput.value;
+  if (userMessage.trim() !== "") {
+    readonly.value = true
+    messageList.value.push({inputMessage: userMessage, botMessage: "正在处理，请等待..."});
+    turbo(userInput.value).then((response: any) => {
+      if (response) {
+        messageList.value[messageList.value.length - 1].botMessage = response
+      } else {
+        messageList.value[messageList.value.length - 1].botMessage = "输出数据可能包含不适当内容"
+      }
+    }).finally(() => {
+      readonly.value = false
+    })
+    userInput.value = "";
+  }
+};
+
+// 监听回车键事件
+onKeyStroke('Enter', (e) => {
+  sendMessage()
+}, {target: userInputRef})
+</script>