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

feat: 全面支持deepseek

Browse Source
This commit is contained in:
橙子
2025-02-03 01:18:15 +08:00
parent 25929483c3
commit 9a73789788
6 changed files with 214 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,7 +41,7 @@ namespace Yi.Framework.ChatHub.Application.Services
var str = stringQueue.Dequeue(); var str = stringQueue.Dequeue();
currentStr.Append(str); currentStr.Append(str);
} }
await _userMessageManager.SendMessageAsync(MessageContext.CreateAi(currentStr.ToString(), CurrentUser.Id!.Value, contextId)); await _userMessageManager.SendMessageAsync(MessageContext.CreateAi(currentStr.ToString(), CurrentUser.Id!.Value, contextId),model);
} }
} }
@@ -51,7 +51,7 @@ namespace Yi.Framework.ChatHub.Application.Services
var str = stringQueue.Dequeue(); var str = stringQueue.Dequeue();
currentEndStr.Append(str); currentEndStr.Append(str);
} }
await _userMessageManager.SendMessageAsync(MessageContext.CreateAi(currentEndStr.ToString(), CurrentUser.Id!.Value, contextId)); await _userMessageManager.SendMessageAsync(MessageContext.CreateAi(currentEndStr.ToString(), CurrentUser.Id!.Value, contextId),model);
} }
} }
} }

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

@@ -31,7 +31,14 @@ namespace Yi.Framework.ChatHub.Domain.Managers
private IRedisClient RedisClient => LazyServiceProvider.LazyGetRequiredService<IRedisClient>(); private IRedisClient RedisClient => LazyServiceProvider.LazyGetRequiredService<IRedisClient>();
private string CacheKeyPrefix => LazyServiceProvider.LazyGetRequiredService<IOptions<AbpDistributedCacheOptions>>().Value.KeyPrefix; private string CacheKeyPrefix => LazyServiceProvider.LazyGetRequiredService<IOptions<AbpDistributedCacheOptions>>().Value.KeyPrefix;
public async Task SendMessageAsync(MessageContext context)
/// <summary>
/// 发送消息
/// </summary>
/// <param name="context">消息内容</param>
/// <param name="relStr">关联字符</param>
/// <exception cref="NotImplementedException"></exception>
public async Task SendMessageAsync(MessageContext context,string relStr=null)
{ {
switch (context.MessageType) switch (context.MessageType)
{ {
@@ -39,20 +46,20 @@ namespace Yi.Framework.ChatHub.Domain.Managers
var userModel = await GetUserAsync(context.ReceiveId.Value); var userModel = await GetUserAsync(context.ReceiveId.Value);
if (userModel is not null) if (userModel is not null)
{ {
await _hubContext.Clients.Client(userModel.ClientId).SendAsync(ChatConst.ClientActionReceiveMsg, context.MessageType, context); await _hubContext.Clients.Client(userModel.ClientId).SendAsync(ChatConst.ClientActionReceiveMsg, context.MessageType,relStr, context);
} }
break; break;
case MessageTypeEnum.Group: case MessageTypeEnum.Group:
throw new NotImplementedException(); throw new NotImplementedException();
break; break;
case MessageTypeEnum.All: case MessageTypeEnum.All:
await _hubContext.Clients.All.SendAsync(ChatConst.ClientActionReceiveMsg, context.MessageType, context); await _hubContext.Clients.All.SendAsync(ChatConst.ClientActionReceiveMsg, context.MessageType,relStr, context);
break; break;
case MessageTypeEnum.Ai: case MessageTypeEnum.Ai:
var userModel2 = await GetUserAsync(context.ReceiveId.Value); var userModel2 = await GetUserAsync(context.ReceiveId.Value);
if (userModel2 is not null) if (userModel2 is not null)
{ {
await _hubContext.Clients.Client(userModel2.ClientId).SendAsync(ChatConst.ClientActionReceiveMsg, context.MessageType, context); await _hubContext.Clients.Client(userModel2.ClientId).SendAsync(ChatConst.ClientActionReceiveMsg, context.MessageType,relStr, context);
} }
break; break;

4
Yi.Bbs.Vue3/src/apis/chatMessageApi.js
View File

@@ -22,9 +22,9 @@ export function sendGroupMessage(data) {
}); });
} }
export function sendAiChat(data) { export function sendAiChat(data,model) {
return request({ return request({
url: "/ai-chat/chat", url: `/ai-chat/chat/${model}`,
method: "post", method: "post",
data data
}); });

8
Yi.Bbs.Vue3/src/hubs/chatHub.js
View File

@@ -12,18 +12,16 @@ const receiveMsg = (connection) => {
chatStore.delUser(userId); chatStore.delUser(userId);
}); });
//接受其他用户消息 //接受其他用户消息
connection.on("receiveMsg", (type, content) => { connection.on("receiveMsg", (type,relStr, content) => {
const letChatStore = useChatStore(); const letChatStore = useChatStore();
//如果是ai消息，还要进行流式显示 //如果是ai消息，还要进行流式显示
// alert(type) if (type === 3) {//（ai消息，还需要支持动态类型）
if (type == 3) { content.messageType ='ai@'+ relStr;
letChatStore.addOrUpdateMsg(content); letChatStore.addOrUpdateMsg(content);
} }
else { else {
letChatStore.addMsg(content); letChatStore.addMsg(content);
} }
}); });
//用户状态-正在输入中，无 //用户状态-正在输入中，无
connection.on("userStatus", (type) => { connection.on("userStatus", (type) => {

20
Yi.Bbs.Vue3/src/stores/chat.js
View File

@@ -5,16 +5,20 @@ const chatStore = defineStore("chat", {
msgList: [] msgList: []
}), }),
getters: { getters: {
allMsgContext: (state) => state.msgList.filter(x => x.messageType == "All"), allMsgContext: (state) => state.msgList.filter(x => x.messageType === "All"),
personalMsgContext: (state) => state.msgList.filter(x => x.messageType == "Personal"), personalMsgContext: (state) => state.msgList.filter(x => x.messageType === "Personal"),
aiMsgContext: (state) => state.msgList.filter(x => x.messageType == "Ai") // aiMsgContext: (state) => state.msgList.filter(x => x.messageType === "Ai"),
//获取msg，通过类型
getMsgContextFunc: (state) => (messageType) => {
return state.msgList.filter(item => item.messageType === messageType);
},
}, },
actions: actions:
{ {
addOrUpdateMsg(msg) { addOrUpdateMsg(msg) {
var currentMsg = this.msgList.filter(x => x.id == msg.id)[0]; var currentMsg = this.msgList.filter(x => x.id === msg.id)[0];
//当前没有包含,如果有相同的上下文id，只需要改变content即可 //当前没有包含,如果有相同的上下文id，只需要改变content即可
if (currentMsg == undefined) { if (currentMsg === undefined) {
this.addMsg(msg); this.addMsg(msg);
} }
else { else {
@@ -22,9 +26,9 @@ const chatStore = defineStore("chat", {
} }
}, },
clearAiMsg() clearTypeMsg(messageType)
{ {
this.msgList=this.msgList.filter(x => x.messageType != "Ai") this.msgList=this.msgList.filter(x => x.messageType !==messageType)
}, },
setMsgList(value) { setMsgList(value) {
this.msgList = value; this.msgList = value;
@@ -39,7 +43,7 @@ const chatStore = defineStore("chat", {
this.userList.push(user); this.userList.push(user);
}, },
delUser(userId) { delUser(userId) {
this.userList = this.userList.filter(obj => obj.userId != userId); this.userList = this.userList.filter(obj => obj.userId !== userId);
} }
}, },
}); });

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

@@ -38,10 +38,16 @@ const currentSelectUser = ref('all');
const currentInputValue = ref(""); const currentInputValue = ref("");
//临时存储的输入框，根据用户id及组name、all组为key，data为value //临时存储的输入框，根据用户id及组name、all组为key，data为value
const inputListDataStore = ref([ const inputListDataStore = ref([
{key: "all", name:"官方学习交流群",titleName:"官方学习交流群",logo:"yilogo.png", value: ""}, {key: "all", name: "官方学习交流群", titleName: "官方学习交流群", logo: "yilogo.png", value: ""},
{key: "ai@deepseek-chat",name:"DeepSeek聊天", titleName:"DeepSeek-聊天模式",logo:"deepSeekAi.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: ""}, key: "ai@DeepSeek-R1",
name: "DeepSeek思索",
titleName: "DeepSeek-思索模式",
logo: "deepSeekAi.png",
value: ""
},
{key: "ai@gpt-4o-mini", name: "ChatGpt聊天", titleName: "ChatGpt-聊天模式", logo: "openAi.png", value: ""},
]); ]);
//AI聊天临时存储 //AI聊天临时存储
const sendAiChatContext = ref([]); const sendAiChatContext = ref([]);
@@ -60,7 +66,9 @@ onMounted(async () => {
onclickClose(); onclickClose();
}, 3000); }, 3000);
} }
//all的聊天消息
chatStore.setMsgList((await getChatAccountMessageList()).data); chatStore.setMsgList((await getChatAccountMessageList()).data);
//在线用户列表
chatStore.setUserList((await getChatUserList()).data); chatStore.setUserList((await getChatUserList()).data);
startCountTip(); startCountTip();
}) })
@@ -83,11 +91,9 @@ const currentMsgContext = computed(() => {
//选择ai //选择ai
else if (selectIsAi()) { else if (selectIsAi()) {
//如果是ai的值，还行经过markdown处理 //如果是ai的值，还行经过markdown处理
// console.log(chatStore.aiMsgContext, "chatStore.aiMsgContext");
// return chatStore.aiMsgContext;
let tempHtml = []; let tempHtml = [];
codeCopyDic = []; codeCopyDic = [];
chatStore.aiMsgContext.forEach(element => { chatStore.getMsgContextFunc(currentSelectUser.value).forEach(element => {
tempHtml.push({ tempHtml.push({
content: toMarkDownHtml(element.content), content: toMarkDownHtml(element.content),
messageType: 'Ai', messageType: 'Ai',
@@ -109,19 +115,17 @@ const currentMsgContext = computed(() => {
}); });
} }
}); });
//图片 //获取聊天内容的头像
const getChatUrl = (url, position) => { const getChatUrl = (url, position) => {
if (position === "left" && selectIsAi()) { if (position === "left" && (selectIsAi()||selectIsAll())) {
return "/openAi.png" return imageSrc(inputListDataStore.value.find(x=>x.key===currentSelectUser.value).logo)
} }
return getUrl(url); return getUrl(url);
} }
//当前聊天框显示的名称 //当前聊天框显示的名称
const currentHeaderName = computed(() => { const currentHeaderName = computed(() => {
if (selectIsAll()) { if (selectIsAll()||selectIsAi()) {
return "官方学习交流群"; return inputListDataStore.value.find(x=>x.key===currentSelectUser.value).name;
} else if (selectIsAi()) {
return "Ai-ChatGpt4.0(你的私人ai小助手)"
} else { } else {
return currentSelectUser.value.userName; return currentSelectUser.value.userName;
} }
@@ -138,8 +142,13 @@ const selectIsAll = () => {
}; };
//当前选择的是否为Ai //当前选择的是否为Ai
const selectIsAi = () => { const selectIsAi = () => {
return currentSelectUser.value === 'ai'; //以ai@开头
return /^ai@/.test(currentSelectUser.value);
}; };
//是否为公共的类型
const isPublicType=(itemType)=>{
return itemType==='all'||/^ai@/.test(itemType);
}
//输入框的值被更改（同时保存到store中） //输入框的值被更改（同时保存到store中）
const changeInputValue = (inputValue) => { const changeInputValue = (inputValue) => {
@@ -149,7 +158,7 @@ const changeInputValue = (inputValue) => {
if (selectIsAll()) { if (selectIsAll()) {
findKey = 'all'; findKey = 'all';
} else if (selectIsAi()) { } else if (selectIsAi()) {
findKey = 'ai'; findKey = currentSelectUser.value;
} }
index = inputListDataStore.value.findIndex(obj => obj.key === findKey); index = inputListDataStore.value.findIndex(obj => obj.key === findKey);
inputListDataStore.value[index].value = currentInputValue.value; inputListDataStore.value[index].value = currentInputValue.value;
@@ -160,11 +169,11 @@ const getCurrentInputValue = () => {
if (selectIsAll()) { if (selectIsAll()) {
return inputListDataStore.value.filter(x => x.key === "all")[0].value; return inputListDataStore.value.filter(x => x.key === "all")[0].value;
} else if (selectIsAi()) { } else if (selectIsAi()) {
return inputListDataStore.value.filter(x => x.key === "ai")[0].value; return inputListDataStore.value.filter(x => x.key === currentSelectUser.value)[0].value;
} else { } else {
//如果不存在初始存储值 //如果不存在初始存储值
if (!inputListDataStore.value.some(x => x.key === currentSelectUser.value.userId)) { if (!inputListDataStore.value.some(x => x.key === currentSelectUser.value.userId)) {
inputListDataStore.value.push({key: currentSelectUser.value.userId, value: ""}); inputListDataStore.value.push({key: currentSelectUser.value.userId, value: "",type:'user'});
return ""; return "";
} }
return inputListDataStore.value.filter(x => x.key === currentSelectUser.value.userId)[0].value; return inputListDataStore.value.filter(x => x.key === currentSelectUser.value.userId)[0].value;
@@ -173,11 +182,12 @@ const getCurrentInputValue = () => {
//点击用户列表, //点击用户列表,
const onclickUserItem = (userInfo, itemType) => { const onclickUserItem = (userInfo, itemType) => {
if (itemType === "all") { //公共
currentSelectUser.value = 'all'; if (isPublicType(itemType)) {
} else if (itemType === "ai") { currentSelectUser.value = itemType;
currentSelectUser.value = 'ai'; }
} else { //个人
else {
currentSelectUser.value = userInfo; currentSelectUser.value = userInfo;
} }
//填充临时存储的输入框 //填充临时存储的输入框
@@ -188,6 +198,7 @@ const onclickUserItem = (userInfo, itemType) => {
//点击发送按钮 //点击发送按钮
const onclickSendMsg = () => { const onclickSendMsg = () => {
//发送空消息
if (currentInputValue.value === "") { if (currentInputValue.value === "") {
msgIsNullShow.value = true; msgIsNullShow.value = true;
setTimeout(() => { setTimeout(() => {
@@ -204,18 +215,24 @@ const onclickSendMsg = () => {
sendAiChatContext.value.push({ sendAiChatContext.value.push({
answererType: 'User', answererType: 'User',
message: currentInputValue.value, message: currentInputValue.value,
number: sendAiChatContext.value.length number: sendAiChatContext.value.length,
messageType: currentSelectUser.value
}) })
//离线前端存储 //离线前端存储
chatStore.addMsg({ chatStore.addMsg({
messageType: "Ai", messageType: currentSelectUser.value,
content: currentInputValue.value, content: currentInputValue.value,
sendUserId: userStore.id, sendUserId: userStore.id,
sendUserInfo: {user: {icon: userStore.icon}} sendUserInfo: {user: {icon: userStore.icon}}
}) })
//ai模型，去掉key的ai@开头的字符串
const model=currentSelectUser.value.replace(/^ai@/, '');
//上下文内容，当前ai进行隔离
const content= sendAiChatContext.value.filter(x=>x.messageType===currentSelectUser.value)
//发送ai消息 //发送ai消息
sendAiChat(sendAiChatContext.value); sendAiChat(content,model);
} else { } else {
onclickSendPersonalMsg(currentSelectUser.value.userId, currentInputValue.value); onclickSendPersonalMsg(currentSelectUser.value.userId, currentInputValue.value);
} }
@@ -247,11 +264,11 @@ const onclickSendGroupMsg = (groupName, msg) => {
//获取当前最后一条信息（显示在左侧菜单） //获取当前最后一条信息（显示在左侧菜单）
const getLastMessage = ((receiveId, itemType) => { const getLastMessage = ((receiveId, itemType) => {
if (itemType === "all") { if (isPublicType(itemType)) {
return chatStore.allMsgContext[chatStore.allMsgContext.length - 1]?.content.substring(0, 15); const message = chatStore.getMsgContextFunc(itemType);
} else if (itemType === "ai") { return message[message.length - 1]?.content.substring(0, 15);
return chatStore.aiMsgContext[chatStore.aiMsgContext.length - 1]?.content.substring(0, 15); }
} else { else {
const messageContext = chatStore.personalMsgContext.filter(x => { const messageContext = chatStore.personalMsgContext.filter(x => {
//两个条件 //两个条件
//接收用户者id为对面id（我发给他） //接收用户者id为对面id（我发给他）
@@ -266,151 +283,151 @@ const getLastMessage = ((receiveId, itemType) => {
/*----------以下方法是对内容通用处理，没有业务逻辑，无需变化----------*/ /*----------以下方法是对内容通用处理，没有业务逻辑，无需变化----------*/
const imageSrc=(imageName)=> { const imageSrc = (imageName) => {
// 动态拼接路径 // 动态拼接路径
return new URL(`../../assets/chat_images/${imageName}`, import.meta.url).href; 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,
});
//绑定的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.clearTypeMsg(currentSelectUser.value);
ElMessage({
message: "当前Ai会话清除成功",
type: "success",
duration: 2000,
});
}
//转换markdown //转换markdown
const toMarkDownHtml = (text) => { const toMarkDownHtml = (text) => {
marked.setOptions({ marked.setOptions({
renderer: new marked.Renderer(), renderer: new marked.Renderer(),
highlight: function (code, language) { highlight: function (code, language) {
return codeHandler(code, language); return codeHandler(code, language);
}, },
pedantic: false, pedantic: false,
gfm: true,//允许 Git Hub标准的markdown gfm: true,//允许 Git Hub标准的markdown
tables: true,//支持表格 tables: true,//支持表格
breaks: true, breaks: true,
sanitize: false, sanitize: false,
smartypants: false, smartypants: false,
xhtml: false, xhtml: false,
smartLists: true, smartLists: true,
} }
); );
//需要注意代码块样式 //需要注意代码块样式
const soureHtml = marked(text); const soureHtml = marked(text);
nextTick(() => { nextTick(() => {
addCopyEvent(); addCopyEvent();
}) })
return soureHtml; return soureHtml;
} }
//code部分处理、高亮 //code部分处理、高亮
const codeHandler = (code, language) => { const codeHandler = (code, language) => {
const codeIndex = parseInt(Date.now() + "") + Math.floor(Math.random() * 10000000); const codeIndex = parseInt(Date.now() + "") + Math.floor(Math.random() * 10000000);
//console.log(codeIndex,"codeIndex"); //console.log(codeIndex,"codeIndex");
// 格式化第一行是右侧language和 “复制” 按钮； // 格式化第一行是右侧language和 “复制” 按钮；
if (code) { if (code) {
const navCode = navHandler(code) const navCode = navHandler(code)
try { try {
// 使用 highlight.js 对代码进行高亮显示 // 使用 highlight.js 对代码进行高亮显示
const preCode = hljs.highlightAuto(code).value; const preCode = hljs.highlightAuto(code).value;
// 将代码包裹在 textarea 中，由于防止textarea渲染出现问题，这里将 "<" 用 "&lt;" 代替，不影响复制功能 // 将代码包裹在 textarea 中，由于防止textarea渲染出现问题，这里将 "<" 用 "&lt;" 代替，不影响复制功能
let html = `<pre class='hljs pre'><div class="header"><span class="language">${language}</span><span class="copy" id="${codeIndex}">复制代码</span></div><div class="code-con"><div class="nav">${navCode}</div><code class="code">${preCode}</code></div></pre>`; let html = `<pre class='hljs pre'><div class="header"><span class="language">${language}</span><span class="copy" id="${codeIndex}">复制代码</span></div><div class="code-con"><div class="nav">${navCode}</div><code class="code">${preCode}</code></div></pre>`;
codeCopyDic.push({id: codeIndex, code: code}); codeCopyDic.push({id: codeIndex, code: code});
// console.log(codeCopyDic.length); // console.log(codeCopyDic.length);
return html; return html;
//<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${code.replace(/<\/textarea>/g, "&lt;/textarea>")}</textarea> //<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${code.replace(/<\/textarea>/g, "&lt;/textarea>")}</textarea>
} catch (error) { } catch (error) {
console.log(error); console.log(error);
}
} }
} }
}
//左侧导航栏处理 //左侧导航栏处理
const navHandler = (code) => { const navHandler = (code) => {
//获取行数 //获取行数
var linesCount = getLinesCount(code); var linesCount = getLinesCount(code);
var currentLine = 1; var currentLine = 1;
var liHtml = ``; var liHtml = ``;
while (linesCount + 1 >= currentLine) { while (linesCount + 1 >= currentLine) {
liHtml += `<li class="nav-li">${currentLine}</li>` liHtml += `<li class="nav-li">${currentLine}</li>`
currentLine++ currentLine++
}
let html = `<ul class="nav-ul">${liHtml}</ul>`
return html;
}
const BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
const getLinesCount = (text) => {
return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
} }
let timerTip = null; let html = `<ul class="nav-ul">${liHtml}</ul>`
return html;
}
const BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
const getLinesCount = (text) => {
return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
}
let timerTip = null;
//倒计时显示tip //倒计时显示tip
const startCountTip = () => { const startCountTip = () => {
timerTip = setInterval(() => { timerTip = setInterval(() => {
if (isShowTipNumber.value > 0) { if (isShowTipNumber.value > 0) {
isShowTipNumber.value--; isShowTipNumber.value--;
} else { } else {
clearInterval(timerTip); // 倒计时结束 clearInterval(timerTip); // 倒计时结束
} }
}, 1000); }, 1000);
}; };
//代码copy事件 //代码copy事件
const addCopyEvent = () => { const addCopyEvent = () => {
const copySpans = document.querySelectorAll('.copy'); const copySpans = document.querySelectorAll('.copy');
// 为每个 copy span 元素添加点击事件 // 为每个 copy span 元素添加点击事件
copySpans.forEach(span => { copySpans.forEach(span => {
//先移除，再新增 //先移除，再新增
span.removeEventListener('click', clickCopyEvent); span.removeEventListener('click', clickCopyEvent);
span.addEventListener('click', clickCopyEvent); span.addEventListener('click', clickCopyEvent);
}); });
} }
const clickCopyEvent = async function (event) { const clickCopyEvent = async function (event) {
const spanId = event.target.id; const spanId = event.target.id;
console.log(codeCopyDic, "codeCopyDic") console.log(codeCopyDic, "codeCopyDic")
console.log(spanId, "spanId") console.log(spanId, "spanId")
await navigator.clipboard.writeText(codeCopyDic.filter(x => x.id === spanId)[0].code); await navigator.clipboard.writeText(codeCopyDic.filter(x => x.id === spanId)[0].code);
ElMessage({ ElMessage({
message: "代码块复制成功", message: "代码块复制成功",
type: "success", type: "success",
duration: 2000, duration: 2000,
}); });
} }
</script> </script>
<template> <template>
@@ -447,7 +464,6 @@ const getLastMessage = ((receiveId, itemType) => {
<li><img src="@/assets/chat_images/phone.png"/></li> <li><img src="@/assets/chat_images/phone.png"/></li>
<li><img src="@/assets/chat_images/other.png"/></li> <li><img src="@/assets/chat_images/other.png"/></li>
</ul> </ul>
</div> </div>
<div class="middle"> <div class="middle">
@@ -461,16 +477,13 @@ const getLastMessage = ((receiveId, itemType) => {
</div> </div>
</div> </div>
<div class="user-list"> <div class="user-list">
<div v-for="item in inputListDataStore.filter(x=>x.type!=='user')" :key="item.key" class="user-div"
@click="onclickUserItem(null, item.key)"
<div v-for="item in inputListDataStore" :key="item.key" class="user-div"
@click="onclickUserItem(null, item.key)"
:class="{ 'select-user-item': currentSelectUser === item.key }"> :class="{ 'select-user-item': currentSelectUser === item.key }">
<div class="user-div-left"> <div class="user-div-left">
<img style="height: 48px;width: 48px; " :src="imageSrc(item.logo)" /> <img style="height: 48px;width: 48px; " :src="imageSrc(item.logo)"/>
<div class="user-name-msg"> <div class="user-name-msg">
<p class="font-name">{{item.name}}</p> <p class="font-name">{{ item.name }}</p>
<p class="font-msg">{{ getLastMessage(null, item.key) }}</p> <p class="font-msg">{{ getLastMessage(null, item.key) }}</p>
</div> </div>
</div> </div>
@@ -478,12 +491,10 @@ const getLastMessage = ((receiveId, itemType) => {
10:28 10:28
</div> </div>
</div> </div>
<div v-for="(item, i) in currentUserItem" :key="i" @click="onclickUserItem(item, 'user')" class="user-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"> <div class="user-div-left">
<img :src="getChatUrl(item.userIcon)"/> <img :src="getChatUrl(item.userIcon)"/>
<div class="user-name-msg"> <div class="user-name-msg">
<p class="font-name">{{ item.userName }}</p> <p class="font-name">{{ item.userName }}</p>