feat: 支持多ai聊天

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Application/Services/AiChatService.cs

@@ -23,14 +23,13 @@ namespace Yi.Framework.ChatHub.Application.Services
         /// <param name="chatContext"></param>
         /// <returns></returns>
         [Authorize]
-        [HttpPost]
+        [HttpPost("ai-chat/chat/{model}")]
-
+        public async Task ChatAsync([FromRoute]string model, [FromBody] List<AiChatContextDto> chatContext)
-        public async Task ChatAsync([FromBody] List<AiChatContextDto> chatContext)
         {
             const int maxChar = 10;
             var contextId = Guid.NewGuid();
             Queue<string> stringQueue = new Queue<string>();
-            await foreach (var aiResult in _aiManager.ChatAsStreamAsync(chatContext))
+            await foreach (var aiResult in _aiManager.ChatAsStreamAsync(model,chatContext))
             {
                 stringQueue.Enqueue(aiResult);
 
@@ -53,8 +52,6 @@ namespace Yi.Framework.ChatHub.Application.Services
                 currentEndStr.Append(str);
             }
             await _userMessageManager.SendMessageAsync(MessageContext.CreateAi(currentEndStr.ToString(), CurrentUser.Id!.Value, contextId));
-
-            //await _userMessageManager.SendMessageAsync(MessageContext.CreateAi(null, CurrentUser.Id!.Value, contextId));
         }
     }
 }

Yi.Abp.Net8/module/chat-hub/Yi.Framework.ChatHub.Domain/Managers/AiManager.cs

@@ -24,19 +24,8 @@ namespace Yi.Framework.ChatHub.Domain.Managers
         }
         private OpenAIService OpenAIService { get; }
 
-        public async IAsyncEnumerable<string> ChatAsStreamAsync(List<AiChatContextDto> aiChatContextDtos)
+        public async IAsyncEnumerable<string> ChatAsStreamAsync(string model, List<AiChatContextDto> aiChatContextDtos)
         {
-            //var temp = "站长正在接入ChatGpt,敬请期待~";
-
-            //for (var i = 0; i < temp.Length; i++)
-            //{
-            //    await Task.Delay(200);
-            //    yield return temp[i].ToString();
-            //}
-
-
-
-
             if (aiChatContextDtos.Count == 0)
             {
                 yield return null;
@@ -56,7 +45,7 @@ namespace Yi.Framework.ChatHub.Domain.Managers
             var completionResult = OpenAIService.ChatCompletion.CreateCompletionAsStream(new ChatCompletionCreateRequest
             {
                 Messages = messages,
-                Model = Models.Gpt_4o_mini
+                Model =model 
             });
 
             HttpStatusCode? error = null;

Yi.Bbs.Vue3/src/views/chathub/Index.vue

@@ -3,9 +3,15 @@ import { nextTick,onMounted, ref, computed, onUnmounted } from 'vue';
 import {storeToRefs} from 'pinia'
 import useAuths from '@/hooks/useAuths.js';
 import {getList as getChatUserList} from '@/apis/chatUserApi'
-import { sendPersonalMessage, sendGroupMessage, getAccountList as getChatAccountMessageList, sendAiChat } from '@/apis/chatMessageApi'
+import {
+  sendPersonalMessage,
+  sendGroupMessage,
+  getAccountList as getChatAccountMessageList,
+  sendAiChat
+} from '@/apis/chatMessageApi'
 import useChatStore from "@/stores/chat";
 import useUserStore from "@/stores/user";
+
 const {isLogin} = useAuths();
 import {useRouter} from 'vue-router'
 import {getUrl} from '@/utils/icon'
@@ -31,28 +37,50 @@ const currentSelectUser = ref('all');
 //当前输入框的值
 const currentInputValue = ref("");
 //临时存储的输入框，根据用户id及组name、all组为key，data为value
-const inputListDataStore = ref([{ key: "all", value: "" }, { key: "ai", value: "" }]);
+const inputListDataStore = ref([
+    {key: "all", name:"官方学习交流群",titleName:"官方学习交流群",logo:"yilogo.png",  value: ""},
+    {key: "ai@deepseek-chat",name:"DeepSeek聊天", titleName:"DeepSeek-聊天模式",logo:"deepSeekAi.png",value: ""},
+    {key: "ai@deepseek-reasoner",name:"DeepSeek思索",titleName:"DeepSeek-思索模式",logo:"deepSeekAi.png", value: ""},
+    {key: "ai@gpt-4o-mini",name:"ChatGpt聊天",titleName:"ChatGpt-聊天模式",logo:"openAi.png", value: ""},
+]);
 //AI聊天临时存储
 const sendAiChatContext = ref([]);
+var timer = null;
 
-let timerTip=null;
-//倒计时显示tip
-const startCountTip = () => {
-      timerTip = setInterval(() => {
-        if (isShowTipNumber.value > 0) {
-          isShowTipNumber.value--;
-        } else {
-          clearInterval(timerTip); // 倒计时结束
-        }
-      }, 1000);
-    };
 let codeCopyDic = [];
-//当前聊天框显示的消息
-const currentMsgContext = computed(() => {
 
+//初始化
+onMounted(async () => {
+  if (!isLogin.value) {
+    ElMessage({
+      message: '该功能，请登录后使用！即将自动跳转',
+      type: 'warning',
+    })
+    timer = setTimeout(function () {
+      onclickClose();
+    }, 3000);
+  }
+  chatStore.setMsgList((await getChatAccountMessageList()).data);
+  chatStore.setUserList((await getChatUserList()).data);
+  startCountTip();
+})
+onUnmounted(() => {
+  if (timer != null) {
+    clearInterval(timer)
+  }
+  if (timerTip != null) {
+    clearInterval(timerTip)
+  }
+})
+
+/*-----计算属性-----*/
+//当前聊天框内容显示的消息
+const currentMsgContext = computed(() => {
+  //选择全部人
   if (selectIsAll()) {
     return chatStore.allMsgContext;
   }
+  //选择ai
   else if (selectIsAi()) {
     //如果是ai的值，还行经过markdown处理
     // console.log(chatStore.aiMsgContext, "chatStore.aiMsgContext");
@@ -60,22 +88,231 @@ const currentMsgContext = computed(() => {
     let tempHtml = [];
     codeCopyDic = [];
     chatStore.aiMsgContext.forEach(element => {
-     
+      tempHtml.push({
-      tempHtml.push({ content: toMarkDownHtml(element.content), messageType: 'Ai', sendUserId: element.sendUserId, sendUserInfo: element.sendUserInfo });
+        content: toMarkDownHtml(element.content),
+        messageType: 'Ai',
+        sendUserId: element.sendUserId,
+        sendUserInfo: element.sendUserInfo
+      });
     });
 
     return tempHtml;
   }
+  //选择个人
   else {
     return chatStore.personalMsgContext.filter(x => {
       //两个条件
       //接收用户者id为对面id（我发给他）
       //或者，发送用户id为对面（他发给我）
-      return (x.receiveId == currentSelectUser.value.userId && x.sendUserId == userStore.id) ||
+      return (x.receiveId === currentSelectUser.value.userId && x.sendUserId === userStore.id) ||
-        (x.sendUserId == currentSelectUser.value.userId && x.receiveId == userStore.id);
+          (x.sendUserId === currentSelectUser.value.userId && x.receiveId === userStore.id);
     });
   }
 });
+//图片
+const getChatUrl = (url, position) => {
+  if (position === "left" && selectIsAi()) {
+    return "/openAi.png"
+  }
+  return getUrl(url);
+}
+//当前聊天框显示的名称
+const currentHeaderName = computed(() => {
+  if (selectIsAll()) {
+    return "官方学习交流群";
+  } else if (selectIsAi()) {
+    return "Ai-ChatGpt4.0(你的私人ai小助手)"
+  } else {
+    return currentSelectUser.value.userName;
+  }
+});
+//当前在线的用户项
+const currentUserItem = computed(() => {
+  return userList.value.filter(x => x.userId !== useUserStore().id)
+});
+
+/*-----方法-----*/
+//当前选择的是否为全部
+const selectIsAll = () => {
+  return currentSelectUser.value === 'all';
+};
+//当前选择的是否为Ai
+const selectIsAi = () => {
+  return currentSelectUser.value === 'ai';
+};
+
+//输入框的值被更改（同时保存到store中）
+const changeInputValue = (inputValue) => {
+  currentInputValue.value = inputValue;
+  let index = -1;
+  let findKey = currentSelectUser.value?.userId
+  if (selectIsAll()) {
+    findKey = 'all';
+  } else if (selectIsAi()) {
+    findKey = 'ai';
+  }
+  index = inputListDataStore.value.findIndex(obj => obj.key === findKey);
+  inputListDataStore.value[index].value = currentInputValue.value;
+}
+
+//获取输入框的值（切换左侧菜单的时候，给输入框补充之前没发送的值）
+const getCurrentInputValue = () => {
+  if (selectIsAll()) {
+    return inputListDataStore.value.filter(x => x.key === "all")[0].value;
+  } else if (selectIsAi()) {
+    return inputListDataStore.value.filter(x => x.key === "ai")[0].value;
+  } else {
+    //如果不存在初始存储值
+    if (!inputListDataStore.value.some(x => x.key === currentSelectUser.value.userId)) {
+      inputListDataStore.value.push({key: currentSelectUser.value.userId, value: ""});
+      return "";
+    }
+    return inputListDataStore.value.filter(x => x.key === currentSelectUser.value.userId)[0].value;
+  }
+};
+
+//点击用户列表,
+const onclickUserItem = (userInfo, itemType) => {
+  if (itemType === "all") {
+    currentSelectUser.value = 'all';
+  } else if (itemType === "ai") {
+    currentSelectUser.value = 'ai';
+  } else {
+    currentSelectUser.value = userInfo;
+  }
+  //填充临时存储的输入框
+  var value = getCurrentInputValue();
+  //更新当前的输入框
+  changeInputValue(value);
+}
+
+//点击发送按钮
+const onclickSendMsg = () => {
+  if (currentInputValue.value === "") {
+    msgIsNullShow.value = true;
+    setTimeout(() => {
+      // 这里写上你想要3秒后执行的代码
+      msgIsNullShow.value = false;
+    }, 3000);
+    return;
+  }
+
+  if (selectIsAll()) {
+    onclickSendGroupMsg("all", currentInputValue.value);
+  } else if (selectIsAi()) {
+    //ai消息需要将上下文存储
+    sendAiChatContext.value.push({
+      answererType: 'User',
+      message: currentInputValue.value,
+      number: sendAiChatContext.value.length
+    })
+
+    //离线前端存储
+    chatStore.addMsg({
+      messageType: "Ai",
+      content: currentInputValue.value,
+      sendUserId: userStore.id,
+      sendUserInfo: {user: {icon: userStore.icon}}
+    })
+    //发送ai消息
+    sendAiChat(sendAiChatContext.value);
+  } else {
+    onclickSendPersonalMsg(currentSelectUser.value.userId, currentInputValue.value);
+  }
+  changeInputValue("");
+}
+
+//点击发送个人消息
+const onclickSendPersonalMsg = (receiveId, msg) => {
+  //添加到本地存储
+  chatStore.addMsg({
+    messageType: "Personal",
+    sendUserId: userStore.id,
+    content: msg,
+    receiveId: receiveId
+  });
+  sendPersonalMessage({userId: receiveId, content: msg});
+  //调用接口发送消息
+}
+
+//点击发送群组消息按钮
+const onclickSendGroupMsg = (groupName, msg) => {
+  //组还需区分是否给全部成员组
+  if (selectIsAll) {
+    sendGroupMessage({content: msg});
+  } else {
+    alert("暂未实现");
+  }
+}
+
+//获取当前最后一条信息（显示在左侧菜单）
+const getLastMessage = ((receiveId, itemType) => {
+  if (itemType === "all") {
+    return chatStore.allMsgContext[chatStore.allMsgContext.length - 1]?.content.substring(0, 15);
+  } else if (itemType === "ai") {
+    return chatStore.aiMsgContext[chatStore.aiMsgContext.length - 1]?.content.substring(0, 15);
+  } else {
+    const messageContext = chatStore.personalMsgContext.filter(x => {
+      //两个条件
+      //接收用户者id为对面id（我发给他）
+      //或者，发送用户id为对面（他发给我）
+      return (x.receiveId === receiveId && x.sendUserId === userStore.id) ||
+          (x.sendUserId === receiveId && x.receiveId === userStore.id);
+    });
+    return messageContext[messageContext.length - 1]?.content.substring(0, 15);
+  }
+
+})
+
+
+/*----------以下方法是对内容通用处理，没有业务逻辑，无需变化----------*/
+  const imageSrc=(imageName)=> {
+    // 动态拼接路径
+    return new URL(`../../assets/chat_images/${imageName}`, import.meta.url).href;
+  }
+  
+  //绑定的input改变事件
+  const updateInputValue = (event) => {
+    changeInputValue(event.target.value);
+  }
+  
+  //输入框按键事件
+  const handleKeydownInput = () => {
+    // 检查是否按下 Shift + Enter
+    if (event.key === 'Enter' && event.shiftKey) {
+      // 允许输入换行
+      return; // 让默认行为继续
+    }
+    // 如果只按下 Enter，则阻止默认的提交行为，比如在表单中
+    if (event.key === 'Enter') {
+      // 阻止默认行为
+      event.preventDefault();
+      onclickSendMsg();
+      return;
+    }
+  }
+  
+  //关闭聊天框
+  const onclickClose = () => {
+    router.push({path: "/index"})
+        .then(() => {
+          // 重新刷新页面
+          location.reload()
+        })
+  }
+  
+//清除ai对话
+  const clearAiMsg = () => {
+    sendAiChatContext.value = [];
+    chatStore.clearAiMsg();
+    ElMessage({
+      message: "当前会话清除成功",
+      type: "success",
+      duration: 2000,
+    });
+
+  }
+
 
 //转换markdown
   const toMarkDownHtml = (text) => {
@@ -83,7 +320,6 @@ const toMarkDownHtml = (text) => {
           renderer: new marked.Renderer(),
           highlight: function (code, language) {
             return codeHandler(code, language);
-      //return hljs.highlightAuto(code).value;
           },
           pedantic: false,
           gfm: true,//允许 Git Hub标准的markdown
@@ -102,8 +338,6 @@ const toMarkDownHtml = (text) => {
     })
     return soureHtml;
   }
-
-
 //code部分处理、高亮
   const codeHandler = (code, language) => {
     const codeIndex = parseInt(Date.now() + "") + Math.floor(Math.random() * 10000000);
@@ -126,12 +360,10 @@ const codeHandler = (code, language) => {
     }
 
   }
-
 //左侧导航栏处理
   const navHandler = (code) => {
     //获取行数
     var linesCount = getLinesCount(code);
-
     var currentLine = 1;
     var liHtml = ``;
     while (linesCount + 1 >= currentLine) {
@@ -140,8 +372,6 @@ const navHandler = (code) => {
     }
 
     let html = `<ul class="nav-ul">${liHtml}</ul>`
-
-
     return html;
   }
   const BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
@@ -149,73 +379,17 @@ const getLinesCount = (text) => {
     return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
   }
 
-const getChatUrl = (url, position) => {
+  let timerTip = null;
-  if (position == "left" && selectIsAi()) {
+//倒计时显示tip
-    return "/openAi.png"
+  const startCountTip = () => {
-  }
+    timerTip = setInterval(() => {
-
+      if (isShowTipNumber.value > 0) {
-  return getUrl(url);
+        isShowTipNumber.value--;
-
+      } else {
-}
+        clearInterval(timerTip); // 倒计时结束
-
-//当前聊天框显示的名称
-const currentHeaderName = computed(() => {
-  if (selectIsAll()) {
-    return "官方学习交流群";
-  }
-  else if
-    (selectIsAi()) {
-    return "Ai-ChatGpt4.0(你的私人ai小助手)"
-  }
-  else {
-
-  return  currentSelectUser.value.userName;
-  }
-
-});
-const currentUserItem = computed(() => {
-  return userList.value.filter(x => x.userId != useUserStore().id)
-});
-var timer = null;
-
-//初始化
-onMounted(async () => {
-  if (!isLogin.value) {
-    ElMessage({
-      message: '该功能，请登录后使用！即将自动跳转',
-      type: 'warning',
-    })
-    timer = setTimeout(function () {
-      onclickClose();
-    }, 3000);
-
-
-  }
-  chatStore.setMsgList((await getChatAccountMessageList()).data);
-  chatStore.setUserList((await getChatUserList()).data);
-  startCountTip(); 
-})
-onUnmounted(() => {
-  if (timer != null) {
-    clearInterval(timer)
-  }
-  if (timerTip != null) {
-    clearInterval(timerTip)
-  }
-  
-})
-
-const clickCopyEvent=async function(event) {
-  const spanId=event.target.id;
-  console.log(codeCopyDic,"codeCopyDic")
-  console.log(spanId,"spanId")
-   await navigator.clipboard.writeText(codeCopyDic.filter(x=>x.id==spanId)[0].code);
-  ElMessage({
-    message: "代码块复制成功",
-    type: "success",
-    duration: 2000,
-  });
       }
+    }, 1000);
+  };
 //代码copy事件
   const addCopyEvent = () => {
     const copySpans = document.querySelectorAll('.copy');
@@ -226,205 +400,28 @@ copySpans.forEach(span => {
       span.addEventListener('click', clickCopyEvent);
     });
   }
-
+  const clickCopyEvent = async function (event) {
-
+    const spanId = event.target.id;
-/*-----方法-----*/
+    console.log(codeCopyDic, "codeCopyDic")
-//当前选择的是否为全部
+    console.log(spanId, "spanId")
-const selectIsAll = () => {
+    await navigator.clipboard.writeText(codeCopyDic.filter(x => x.id === spanId)[0].code);
-  return currentSelectUser.value == 'all';
-};
-//当前选择的是否为Ai
-const selectIsAi = () => {
-  return currentSelectUser.value == 'ai';
-};
-
-
-//输入框的值被更改
-const changeInputValue = (inputValue) => {
-  currentInputValue.value = inputValue;
-  let index = -1;
-  let findKey = currentSelectUser.value?.userId
-  if (selectIsAll()) {
-    findKey = 'all';
-  }
-  else if (selectIsAi()) {
-    findKey = 'ai';
-  }
-  index = inputListDataStore.value.findIndex(obj => obj.key == findKey);
-  inputListDataStore.value[index].value = currentInputValue.value;
-}
-//绑定的input改变事件
-const updateInputValue = (event) => {
-  changeInputValue(event.target.value);
-}
-//获取输入框的值
-const getCurrentInputValue = () => {
-
-  if (selectIsAll()) {
-    return inputListDataStore.value.filter(x => x.key == "all")[0].value;
-  }
-  else if (selectIsAi()) {
-    return inputListDataStore.value.filter(x => x.key == "ai")[0].value;
-  }
-
-  else {
-    //如果不存在初始存储值
-    if (!inputListDataStore.value.some(x => x.key == currentSelectUser.value.userId)) {
-      inputListDataStore.value.push({ key: currentSelectUser.value.userId, value: "" });
-      return "";
-    }
-    return inputListDataStore.value.filter(x => x.key == currentSelectUser.value.userId)[0].value;
-  }
-};
-
-//点击用户列表,
-const onclickUserItem = (userInfo, itemType) => {
-  if (itemType == "all") {
-    currentSelectUser.value = 'all';
-  }
-  else if (itemType == "ai") {
-    currentSelectUser.value = 'ai';
-  }
-  else {
-    currentSelectUser.value = userInfo;
-  }
-  //填充临时存储的输入框
-  var value = getCurrentInputValue();
-  //更新当前的输入框
-  changeInputValue(value);
-}
-
-//输入框按键事件
-const handleKeydownInput=()=>{
- // 检查是否按下 Shift + Enter
- if (event.key === 'Enter' && event.shiftKey) {
-        // 允许输入换行
-        return; // 让默认行为继续
-      }
-
-      // 如果只按下 Enter，则阻止默认的提交行为，比如在表单中
-      if (event.key === 'Enter') {
-        // 阻止默认行为
-        event.preventDefault();
-        onclickSendMsg();
-        return;
-      }
-}
-
-//点击发送按钮
-const onclickSendMsg = () => {
-  if (currentInputValue.value == "") {
-    msgIsNullShow.value = true;
-    setTimeout(() => {
-      // 这里写上你想要3秒后执行的代码
-      msgIsNullShow.value = false;
-    }, 3000);
-    return;
-  }
-
-  if (selectIsAll()) {
-    onclickSendGroupMsg("all", currentInputValue.value);
-  }
-  else if (selectIsAi()) {
-    //ai消息需要将上下文存储
-    sendAiChatContext.value.push({ answererType: 'User', message: currentInputValue.value, number: sendAiChatContext.value.length })
-
-    //离线前端存储
-    chatStore.addMsg({ messageType: "Ai", content: currentInputValue.value, sendUserId: userStore.id, sendUserInfo: { user: { icon: userStore.icon } } })
-    //发送ai消息
-    sendAiChat(sendAiChatContext.value);
-
-
-  }
-  else {
-    onclickSendPersonalMsg(currentSelectUser.value.userId, currentInputValue.value);
-  }
-  changeInputValue("");
-}
-
-//点击发送个人消息
-const onclickSendPersonalMsg = (receiveId, msg) => {
-  //添加到本地存储
-  chatStore.addMsg({
-    messageType: "Personal",
-    sendUserId: userStore.id,
-    content: msg,
-    receiveId: receiveId
-  });
-  sendPersonalMessage({ userId: receiveId, content: msg });
-  //调用接口发送消息
-}
-
-const onclickClose = () => {
-  router.push({ path: "/index" })
-    .then(() => {
-      // 重新刷新页面
-      location.reload()
-    })
-}
-
-//点击发送群组消息按钮
-const onclickSendGroupMsg = (groupName, msg) => {
-  //组还需区分是否给全部成员组
-  if (selectIsAll) {
-    //添加到本地存储,不需要，因为广播自己能够接收
-    // chatStore.addMsg({
-    //   messageType: "All",
-    //   sendUserId: userStore.id,
-    //   content: msg
-    // });
-    //调用接口发送消息
-    sendGroupMessage({ content: msg });
-  }
-  else {
-    alert("暂未实现");
-  }
-}
-//清除ai对话
-const clearAiMsg = () => {
-  sendAiChatContext.value = [];
-  chatStore.clearAiMsg();
     ElMessage({
-    message: "当前会话清除成功",
+      message: "代码块复制成功",
       type: "success",
       duration: 2000,
     });
-  
   }
-
-//获取当前最后一条信息
-const getLastMessage = ((receiveId, itemType) => {
-  if (itemType == "all") {
-    return chatStore.allMsgContext[chatStore.allMsgContext.length - 1]?.content.substring(0, 15);
-  }
-  else if (itemType == "ai") {
-    return chatStore.aiMsgContext[chatStore.aiMsgContext.length - 1]?.content.substring(0, 15);
-  }
-
-  else {
-    const messageContext = chatStore.personalMsgContext.filter(x => {
-      //两个条件
-      //接收用户者id为对面id（我发给他）
-      //或者，发送用户id为对面（他发给我）
-      return (x.receiveId == receiveId && x.sendUserId == userStore.id) ||
-        (x.sendUserId == receiveId && x.receiveId == userStore.id);
-    });
-    return messageContext[messageContext.length - 1]?.content.substring(0, 15);
-  }
-
-})
 </script>
 
 <template>
 
   <div style="position: absolute; top: 0;left: 0;" v-show="isShowTipNumber>0">
-    <p>当前版本：1.6.2</p>
+    <p>当前版本：2.0.0</p>
     <p>tip:官方学习交流群每次发送消息消耗 1 钱钱</p>
     <p>tip:点击聊天窗口右上角“X”可退出</p>
     <p>tip:多人同时在聊天室时，左侧可显示其他成员</p>
 
-    <p>Ai聊天：当前Ai为 OpenAi ChatGpt4</p>
+    <p>tip:当前支持多种AI模式，由于接口收费原因，还请各位手下留情</p>
-    <p>tip:当前Ai为OpenAi ChatGpt4，由于接口收费原因，还请各位手下留情</p>
     <p>tip:ai对话为持续对话，已优化输出速度</p>
     <p>tip:ai对话只有本地存储了记录，可点击清除或刷新</p>
     <p>即将自动隐藏tip：{{ isShowTipNumber }}</p>
@@ -464,41 +461,27 @@ const getLastMessage = ((receiveId, itemType) => {
         </div>
       </div>
       <div class="user-list">
-        <div class="user-div" @click="onclickUserItem(null, 'all')"
+        
-          :class="{ 'select-user-item': currentSelectUser == 'all' }">
+        
+        
+        <div  v-for="item in inputListDataStore" :key="item.key" class="user-div" 
+              @click="onclickUserItem(null, item.key)"
+             :class="{ 'select-user-item': currentSelectUser === item.key }">
           <div class="user-div-left">
-            <img src="@/assets/chat_images/yilogo.png" />
+            <img style="height: 48px;width: 48px;  " :src="imageSrc(item.logo)" />
             <div class="user-name-msg">
-              <p class="font-name">官方学习交流群</p>
+              <p class="font-name">{{item.name}}</p>
-              <p class="font-msg">{{ getLastMessage(null, 'all') }}</p>
+              <p class="font-msg">{{ getLastMessage(null, item.key) }}</p>
             </div>
           </div>
           <div class=" user-div-right">
             10:28
           </div>
-
         </div>
 
-        <div class="user-div" @click="onclickUserItem(null, 'ai')"
-          :class="{ 'select-user-item': currentSelectUser == 'ai' }">
-          <div class="user-div-left">
-            <img src="/openAi.png" />
-            <div class="user-name-msg">
-              <p class="font-name">Ai-ChatGpt</p>
-              <p class="font-msg">{{ getLastMessage(null, 'ai') }}</p>
-            </div>
-          </div>
-          <div class=" user-div-right">
-            10:28
-          </div>
-
-        </div>
-
-
-
 
         <div v-for="(item, i) in currentUserItem" :key="i" @click="onclickUserItem(item, 'user')" class="user-div"
-          :class="{ 'select-user-item': currentSelectUser?.userId == item.userId }">
+             :class="{ 'select-user-item': currentSelectUser?.userId === item.userId }">
           <div class="user-div-left">
 
             <img :src="getChatUrl(item.userIcon)"/>
@@ -516,7 +499,8 @@ const getLastMessage = ((receiveId, itemType) => {
 
     <div class="right">
       <div class="header">
-        <div class="header-left">{{ currentHeaderName }} <span class="clear-msg" v-show="selectIsAi()" @click="clearAiMsg">点击此处清空当前对话</span>
+        <div class="header-left">{{ currentHeaderName }} <span class="clear-msg" v-show="selectIsAi()"
+                                                               @click="clearAiMsg">点击此处清空当前对话</span>
         </div>
 
         <div class="header-right">
@@ -539,7 +523,7 @@ const getLastMessage = ((receiveId, itemType) => {
 
 
           <!-- 对话框右侧 -->
-          <div class="content-myself content-common" v-if="item.sendUserId == userStore.id">
+          <div class="content-myself content-common" v-if="item.sendUserId === userStore.id">
             <div class="content-myself-msg content-msg-common " v-html="item.content"></div>
 
             <img :src="getChatUrl(item.sendUserInfo?.user.icon, 'right')"/>
@@ -599,6 +583,10 @@ const getLastMessage = ((receiveId, itemType) => {
   </div>
 </template>
 <style scoped lang="scss">
+ul {
+  list-style-type: none;
+}
+
 .body {
   height: 790px;
   width: 1400px;
@@ -912,7 +900,6 @@ const getLastMessage = ((receiveId, itemType) => {
 }
 
 
-
 .content-common {
   display: flex;
   margin-bottom: 18px;
@@ -1068,6 +1055,7 @@ const getLastMessage = ((receiveId, itemType) => {
   margin-bottom: 0;
   //overflow-x: hidden;
   overflow-x: scroll;
+
   .header {
     background-color: #409eff;
     color: white;
@@ -1077,7 +1065,8 @@ const getLastMessage = ((receiveId, itemType) => {
     padding-top: 5px;
 
 
-    .language {}
+    .language {
+    }
 
     .copy:hover {
       cursor: pointer;
@@ -1111,15 +1100,18 @@ const getLastMessage = ((receiveId, itemType) => {
 
 
 }
+
 .clear-msg {
   font-size: large;
   margin-left: 10px;
   cursor: pointer; /* 设置为手型 */
 }
+
 .clear-msg:hover {
   color: red;
   cursor: pointer; /* 设置鼠标悬浮为手型 */
 }
+
 ::v-deep(.nav-ul) {
   border-right: 1px solid #FFFFFF;
   margin-top: 12px;