diff --git a/src/views/pk-mini/Message.vue b/src/views/pk-mini/Message.vue
index 815306d..3553c77 100644
--- a/src/views/pk-mini/Message.vue
+++ b/src/views/pk-mini/Message.vue
@@ -50,6 +50,9 @@
+
+ {{ msg.read ? '已读' : '未读' }}
+
@@ -276,6 +279,7 @@ onMounted(() => {
if (goeasy) {
goeasy.im.on(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, onMessageReceived)
goeasy.im.on(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, onConversationsUpdated)
+ goeasy.im.on(GoEasy.IM_EVENT.MESSAGE_READ, onMessageRead)
}
}
// 切换回消息页面时,滚到聊天记录最底部
@@ -297,6 +301,16 @@ function onConversationsUpdated(conversations) {
console.log("chatList返回",chatList.value)
}
+function onMessageRead(messages) {
+ // 收到对方已读回执,更新本地消息的 read 状态
+ messages.forEach(readMsg => {
+ const target = messagesList.value.find(m => m.messageId === readMsg.messageId)
+ if (target) {
+ target.read = true
+ }
+ })
+}
+
function onMessageReceived(message) {
if (!isGoEasyEnabled()) return
// 始终累加会话未读数和更新最后一条消息(全局 unreadStore 由 PkAppaside 统一维护)
@@ -319,6 +333,7 @@ onUnmounted(() => {
try {
goeasy.im.off(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, onMessageReceived)
goeasy.im.off(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, onConversationsUpdated)
+ goeasy.im.off(GoEasy.IM_EVENT.MESSAGE_READ, onMessageRead)
} catch (e) {
console.warn('清理 GoEasy 监听器失败', e)
}
@@ -565,6 +580,17 @@ onUnmounted(() => {
}
}
+.read-status {
+ font-size: 11px;
+ color: #94a3b8;
+ text-align: right;
+ margin-top: 4px;
+}
+
+.message-item.mine .read-status {
+ color: #60a5fa;
+}
+
.empty-tip {
text-align: center;
padding: 50px;
diff --git a/src/views/pk-mini/PkHall.vue b/src/views/pk-mini/PkHall.vue
index 00d1faf..e792dd0 100644
--- a/src/views/pk-mini/PkHall.vue
+++ b/src/views/pk-mini/PkHall.vue
@@ -121,7 +121,10 @@
-
+
{})
+ unreadStore.decrease(1)
} catch (e) {
console.error('发送消息失败', e)
if(e =='Error: id can not be the same as your id'){
@@ -909,13 +919,20 @@ onUnmounted(() => {
.chat-header {
height: 50px;
- text-align: center;
- line-height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
font-weight: bold;
color: #666;
border-bottom: 1px solid #eee;
}
+.chat-header-name {
+ color: #2563eb;
+ font-size: 14px;
+}
+
.chat-messages {
flex: 1;
overflow: auto;