xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 支持多ai聊天

Browse Source
This commit is contained in:
橙子
2025-02-02 00:22:27 +08:00
parent 0e90c54dbb
commit 25929483c3
5 changed files with 331 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,14 +23,13 @@ namespace Yi.Framework.ChatHub.Application.Services
/// <param name="chatContext"></param>
/// <returns></returns>
[Authorize]
[HttpPost]
public async Task ChatAsync([FromBody] List<AiChatContextDto> chatContext)
[HttpPost("ai-chat/chat/{model}")]
public async Task ChatAsync([FromRoute]string model, [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));
}
}
}

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

@@ -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;

BIN
Yi.Bbs.Vue3/src/assets/chat_images/deepSeekAi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

0
Yi.Bbs.Vue3/public/openAi.png → Yi.Bbs.Vue3/src/assets/chat_images/openAi.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

602
Yi.Bbs.Vue3/src/views/chathub/Index.vue
View File

@@ -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({ content: toMarkDownHtml(element.content), messageType: 'Ai', sendUserId: element.sendUserId, sendUserInfo: element.sendUserInfo });
tempHtml.push({
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) ||
(x.sendUserId == currentSelectUser.value.userId && x.receiveId == userStore.id);
return (x.receiveId === currentSelectUser.value.userId && x.sendUserId === 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) => {
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)
});
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,
});
let timerTip = null;
//倒计时显示tip
const startCountTip = () => {
timerTip = setInterval(() => {
if (isShowTipNumber.value > 0) {
isShowTipNumber.value--;
} else {
clearInterval(timerTip); // 倒计时结束
}
}, 1000);
};
//代码copy事件
const addCopyEvent = () => {
const copySpans = document.querySelectorAll('.copy');
@@ -226,205 +400,28 @@ copySpans.forEach(span => {
span.addEventListener('click', clickCopyEvent);
});
}
/*-----方法-----*/
//当前选择的是否为全部
const selectIsAll = () => {
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();
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: "当前会话清除成功",
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为OpenAi ChatGpt4，由于接口收费原因，还请各位手下留情</p>
<p>tip:当前支持多种AI模式，由于接口收费原因，还请各位手下留情</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-msg">{{ getLastMessage(null, 'all') }}</p>
<p class="font-name">{{item.name}}</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;