Merge branch 'main' of http://172.16.100.91:3000/scout666/chat-pc

# Conflicts:
#	src/views/message/inner/panel/PanelFooter.vue   resolved by main version

src/api/chat.js

@@ -94,3 +94,8 @@ export const ServeConfirmVoteHandle = (data = {}) => {
 export const ServeEmptyMessage = (data) => {
   return post('/api/v1/talk/message/empty', data)
 }
+
+//获取消息已读未读详情
+export const ServeMessageReadDetail = (data) => {
+  return post('/api/v1/talk/my-records/read/condition', data)
+}

src/api/search.js

@@ -5,6 +5,16 @@ export const ServeSeachQueryAll = (data = {}) => {
   return post('/api/v1/elasticsearch/query-all', data)
 }
 
+// ES搜索用户数据
+export const ServeQueryUser = (data) => {
+  return post('/api/v1/elasticsearch/query-user', data)
+}
+
+// ES搜索群组数据
+export const ServeQueryGroup = (data) => {
+  return post('/api/v1/elasticsearch/query-group', data)
+}
+
 //ES搜索聊天记录-主页搜索什么都有、聊天记录
 export const ServeQueryTalkRecord = (data = {}) => {
   return post('/api/v1/elasticsearch/query-talk-record', data)

src/components/group/GroupPanel.vue

@@ -11,13 +11,14 @@ import {
   ServeSecedeGroup,
   ServeUpdateGroupCard,
   ServeGetGroupNotices,
-  ServeEditGroup
+  ServeEditGroup,
+  ServeDismissGroup
 } from '@/api/group'
 import { useInject } from '@/hooks'
 import customModal from '@/components/common/customModal.vue'
 import avatarModule from '@/components/avatar-module/index.vue'
 import UserCardModal from '@/components/user/UserCardModal.vue'
-import { ServeEmptyMessage } from '@/api/chat'
+import { ServeEmptyMessage, ServeTopTalkList, ServeSetNotDisturb } from '@/api/chat'
 import { parseTime } from '@/utils/datetime'
 
 const userStore = useUserStore()
@@ -48,6 +49,12 @@ const props = defineProps({
   }
 })
 
+const talkParams = reactive({
+  isTop: computed(() => talkStore.findItem(props.talkType + '_' + props.gid)?.is_top),
+  isDisturb: computed(() => talkStore.findItem(props.talkType + '_' + props.gid)?.is_disturb),
+  sessionId: computed(() => talkStore.findItem(props.talkType + '_' + props.gid)?.id)
+})
+
 watch(props, () => {
   if (props.talkType === 2) {
     loadDetail()
@@ -98,7 +105,8 @@ const state = reactive({
   }, //群公告信息
   editGroupName: false, //是否编辑群名称
   editGroupNameValue: '', //编辑中的群名称
-  chatSettingOperateType: '' //聊天设置操作类型
+  chatSettingOperateType: '', //聊天设置操作类型
+  isLastAdmin: false //是否是最后一个管理员
 })
 
 const members = ref<any[]>([])
@@ -177,17 +185,36 @@ const onClose = () => {
   emit('close')
 }
 
-const onSignOut = () => {
+const onSignOut = (closeLoading) => {
   ServeSecedeGroup({
     group_id: props.gid
-  }).then((res) => {
-    if (res.code == 200) {
-      window['$message'].success('已退出群聊')
-      onClose()
-    } else {
-      window['$message'].error(res.message)
-    }
   })
+    .then((res) => {
+      closeLoading()
+      if (res.code == 200) {
+        window['$message'].success('已退出群聊')
+        state.isShowModal = false
+        onClose()
+      } else {
+        window['$message'].error(res.message || res.msg)
+      }
+    })
+    .catch((err) => {
+      closeLoading()
+      window['$message'].error(err.message)
+    })
+}
+
+const onDismiss = async (closeLoading) => {
+  const { code, message } = await ServeDismissGroup({ group_id: props.gid })
+  closeLoading()
+  if (code === 200) {
+    onClose()
+    state.isShowModal = false
+    window['$message'].success('群聊已解散')
+  } else {
+    window['$message'].info(message)
+  }
 }
 
 const onChangeRemark = () => {
@@ -236,8 +263,18 @@ const handleModalConfirm = (closeLoading) => {
         closeLoading()
         window['$message'].error(err.message)
       })
-  } else if (state.chatSettingOperateType == 'quit'){
+  } else if (state.chatSettingOperateType == 'quit') {
     //退出群聊
+    if (state.isLastAdmin) {
+      //如果是最后一个管理员，则退出同时解散群聊
+      onDismiss(closeLoading)
+    } else {
+      //如果不是最后一个管理员，则退出群聊
+      onSignOut(closeLoading)
+    }
+  } else if (state.chatSettingOperateType == 'dismiss') {
+    //解散群聊
+    onDismiss(closeLoading)
   }
 }
 
@@ -256,12 +293,15 @@ const showChatSettingOperateModal = (type: string) => {
       break
     case 'quit':
       state.chatSettingOperateHint = '确定退出群聊'
-      const findAdmin = groupMemberList.value.find((item) => item.leader === 2 || item.leader === 1)
+      const findOtherAdmin = groupMemberList.value.find(
-      const isLastAdmin = findAdmin && findAdmin.user_id === userStore.uid
+        (item) => (item.leader === 2 || item.leader === 1) && item.user_id !== userStore.uid
-      if (isLastAdmin) {
+      )
-        state.chatSettingOperateSubHint = '退出后，本群将被解散'
+      if (findOtherAdmin) {
-      } else {
+        state.isLastAdmin = false
         state.chatSettingOperateSubHint = '退出后，聊天记录将被清空'
+      } else {
+        state.isLastAdmin = true
+        state.chatSettingOperateSubHint = '退出后，本群将被解散'
       }
       break
   }
@@ -380,6 +420,42 @@ const handleEditGroupNameConfirm = () => {
     }
   })
 }
+
+//设置会话置顶
+const onTopChange = (value: boolean) => {
+  ServeTopTalkList({
+    list_id: talkParams.sessionId,
+    type: value ? 1 : 2
+  }).then(({ code, message }) => {
+    if (code == 200) {
+      talkStore.updateItem({
+        index_name: props.talkType + '_' + props.gid,
+        is_top: talkParams.isTop == 0 ? 1 : 0
+      })
+    } else {
+      window['$message'].error(message)
+    }
+  })
+}
+
+//设置会话免打扰
+const onDisturbChange = (value: boolean) => {
+  ServeSetNotDisturb({
+    talk_type: props.talkType,
+    receiver_id: props.gid,
+    is_disturb: value ? 1 : 0
+  }).then(({ code, message }) => {
+    if (code == 200) {
+      window['$message'].success('设置成功!')
+      talkStore.updateItem({
+        index_name: props.talkType + '_' + props.gid,
+        is_disturb: value ? 1 : 0
+      })
+    } else {
+      window['$message'].error(message)
+    }
+  })
+}
 </script>
 <template>
   <section class="el-container is-vertical section">
@@ -602,14 +678,14 @@ const handleEditGroupNameConfirm = () => {
         <div class="b-box" style="margin: 16px 0 32px;">
           <div class="block">
             <div class="title">置顶会话</div>
-            <n-switch />
+            <n-switch :value="talkParams.isTop === 1" @update:value="onTopChange" />
           </div>
         </div>
 
         <div class="b-box" style="margin: 32px 0 20px;">
           <div class="block">
             <div class="title">消息免打扰</div>
-            <n-switch />
+            <n-switch :value="talkParams.isDisturb === 1" @update:value="onDisturbChange" />
           </div>
         </div>
       </div>
@@ -733,9 +809,11 @@ const handleEditGroupNameConfirm = () => {
     <template #content>
       <div class="custom-modal-content">
         <text>{{ state.chatSettingOperateHint }}</text>
-        <text style="font-size: 16px; color: #999999; margin: 0; line-height: 22px;">{{
+        <text
-          state.chatSettingOperateSubHint
+          style="font-size: 16px; color: #999999; margin: 0; line-height: 22px;"
-        }}</text>
+          :style="{ color: state.isLastAdmin ? '#CF3050' : '' }"
+          >{{ state.chatSettingOperateSubHint }}</text
+        >
       </div>
     </template>
   </customModal>

src/components/search/searchByCondition.vue

@@ -327,7 +327,7 @@ import { parseTime } from '@/utils/datetime'
 import { fileFormatSize, fileSuffix } from '@/utils/strings'
 import { NImage, NInfiniteScroll, NScrollbar, NIcon, NDatePicker } from 'naive-ui'
 
-const emits = defineEmits(['clearSearchMemberByAlphabet', 'getDisabledDateArray'])
+const emits = defineEmits(['clearSearchMemberByAlphabet', 'getDisabledDateArray', 'hideSearchResultModal'])
 
 const dialogueStore = useDialogueStore()
 // 当前对话参数
@@ -736,15 +736,29 @@ const downloadAndOpenFile = (item) => {
 
 //跳转到对应的记录位置
 const toDialogueByMember = async (msgInfo) => {
-  const sessionId = await getSessionId(dialogueParams.talk_type, dialogueParams.receiver_id)
+  console.error('====跳转到对应的记录位置====', msgInfo)
-  uni.navigateTo({
+  // 根据搜索结果, 指定用于查询指定消息上下文的sequence
-    url:
+  dialogueStore.specifiedMsg = encodeURIComponent(
-      '/pages/dialog/index?sessionId=' +
+    JSON.stringify({
-      sessionId +
+      talk_type: msgInfo.talk_type,
-      '&keepDialogInfo=1' +
+      receiver_id: msgInfo.receiver_id,
-      '&msgInfo=' +
+      msg_id: msgInfo.msg_id,
-      encodeURIComponent(JSON.stringify(msgInfo))
+      cursor: msgInfo.sequence - 15 > 0 ? msgInfo.sequence - 15 : 0,
-  })
+      direction: 'down',
+      sort_sequence: 'asc',
+      create_time: msgInfo.created_at
+    })
+  )
+  emits('hideSearchResultModal')
+  // const sessionId = await getSessionId(dialogueParams.talk_type, dialogueParams.receiver_id)
+  // uni.navigateTo({
+  //   url:
+  //     '/pages/dialog/index?sessionId=' +
+  //     sessionId +
+  //     '&keepDialogInfo=1' +
+  //     '&msgInfo=' +
+  //     encodeURIComponent(JSON.stringify(msgInfo))
+  // })
 }
 
 //重置部分搜索条件

src/components/search/searchList.vue

@@ -41,7 +41,13 @@
                 >
                   <searchItem
                     @click="clickSearchItem(searchResultKey, item)"
-                    v-if="(props.listLimit && index < 3) || !props.listLimit"
+                    v-if="(
+                      searchResultKey === 'user_infos'
+                        ? (state.userInfosShowAll || (props.listLimit && index < 3))
+                        : searchResultKey === 'combinedGroup'
+                          ? (state.groupInfosShowAll || (props.listLimit && index < 3))
+                          : (props.listLimit && index < 3)
+                    ) || !props.listLimit"
                     :searchResultKey="searchResultKey"
                     :searchItem="item"
                     :searchText="state.searchText"
@@ -56,8 +62,14 @@
               </div>
               <div
                 class="result-has-more"
-                v-if="getHasMoreResult(searchResultKey)"
+                v-if="
-                @click="toMoreResultPage(searchResultKey)"
+                  getHasMoreResult(searchResultKey) &&
+                  !(
+                    (searchResultKey === 'user_infos' && state.userInfosExpand) ||
+                    (searchResultKey === 'combinedGroup' && state.groupInfosExpand)
+                  )
+                "
+                @click="onMoreResultClick(searchResultKey)"
               >
                 <span class="text-[14px] font-regular">
                   {{ getHasMoreResult(searchResultKey) }}
@@ -147,6 +159,7 @@
 import { NInfiniteScroll } from 'naive-ui'
 import searchItem from './searchItem.vue'
 import { ref, reactive, defineEmits, defineProps, onMounted, watch } from 'vue'
+import { ServeQueryUser, ServeQueryGroup } from '@/api/search'
 
 const emits = defineEmits([
   'toMoreResultPage',
@@ -164,7 +177,16 @@ const state = reactive({
   uid: 12303, //当前用户id
   clickStayItem: '', //点击停留的item
   hasMore: true, //是否还有更多数据
-  loading: false //加载锁
+  loading: false, //加载锁
+  userInfosExpand: false, // 控制通讯录全部加载完
+  userInfosLoading: false, // 控制通讯录加载更多状态
+  userInfosLastId: undefined, // 记录通讯录分页的 last_id
+  userInfosShowAll: false, // 只要点过"更多通讯录"就为 true
+  groupInfosExpand: false, // 控制群聊全部加载完
+  groupInfosLoading: false, // 控制群聊加载更多状态
+  groupInfosLastGroupId: 0, // 记录群聊分页的 last_group_id
+  groupInfosLastMemberId: 0, // 记录群聊分页的 last_member_id
+  groupInfosShowAll: false // 只要点过"更多群聊"就为 true
 })
 
 const props = defineProps({
@@ -214,7 +236,11 @@ const props = defineProps({
   useCustomTitle: {
     type: Boolean,
     default: false
-  } //是否使用自定义标题
+  }, //是否使用自定义标题
+  selectItemInList: {
+    type: String,
+    default: ''
+  } //在列表选中的聊天记录搜索项
 })
 
 onMounted(() => {
@@ -247,6 +273,13 @@ watch(
     emits('clickStayItemChange', state.clickStayItem)
     //重置搜索条件
     emits('lastIdChange', 0, 0, 0, '', '')
+    state.userInfosExpand = false
+    state.userInfosShowAll = false
+    state.userInfosLastId = undefined
+    state.groupInfosExpand = false
+    state.groupInfosShowAll = false
+    state.groupInfosLastGroupId = 0
+    state.groupInfosLastMemberId = 0
     queryAllSearch()
   }
 )
@@ -384,6 +417,12 @@ const queryAllSearch = (doClearSearchResult) => {
         }
       }
       state.pageNum = state.pageNum + 1
+      // 同步 userInfosLastId
+      if (typeof data.last_id !== 'undefined') {
+        state.userInfosLastId = data.last_id
+      } else {
+        state.userInfosLastId = undefined
+      }
     } else {
       if (state.pageNum === 1) {
         // 第一页请求失败，清空结果
@@ -538,6 +577,13 @@ const clickSearchItem = (searchResultKey, searchItem) => {
 
 //加载更多数据
 const doLoadMore = (doClearSearchResult) => {
+  if (
+    state.userInfosLoading ||
+    state.userInfosShowAll ||
+    state.groupInfosShowAll // 新增判断，群聊展开后不再触发 queryAllSearch
+  ) {
+    return
+  }
   if (!state.hasMore || state.loading) {
     return
   }
@@ -546,6 +592,134 @@ const doLoadMore = (doClearSearchResult) => {
     state.loading = false
   })
 }
+
+watch(
+  () => props.selectItemInList,
+  (newVal, oldVal) => {
+    if (newVal) {
+      const selectedItem = JSON.parse(decodeURIComponent(newVal))
+      clickSearchItem('general_infos', selectedItem)
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+// 单独维护通讯录加载更多逻辑，基于 last_id 分页
+async function loadMoreUserInfos() {
+  if (state.userInfosLoading) return
+  state.userInfosLoading = true
+  try {
+    let params = {
+      key: state.searchText,
+      last_id: state.userInfosLastId,
+      size: 10
+    }
+    const resp = await ServeQueryUser(params)
+    if (resp.code === 200 && Array.isArray(resp.data.user_infos)) {
+      if (!state.userInfosLastId) {
+        // 第一次加载，直接替换
+        state.searchResult = {
+          ...state.searchResult,
+          user_infos: resp.data.user_infos
+        }
+      } else {
+        // 后续加载，追加
+        state.searchResult = {
+          ...state.searchResult,
+          user_infos: (state.searchResult.user_infos || []).concat(resp.data.user_infos)
+        }
+      }
+      state.userInfosLastId = resp.data.last_id
+      // 判断是否全部加载完
+      if (
+        !resp.data.last_id ||
+        (Array.isArray(resp.data.user_infos) && resp.data.user_infos.length < 10)
+      ) {
+        state.userInfosExpand = true
+      }
+    }
+  } finally {
+    state.userInfosLoading = false
+  }
+}
+
+// 处理"更多通讯录"、 "更多群聊"点击，调用新方法
+function onMoreResultClick(searchResultKey) {
+  if (searchResultKey === 'user_infos') {
+    state.userInfosShowAll = true
+    loadMoreUserInfos()
+  } else if (searchResultKey === 'combinedGroup') {
+    state.groupInfosShowAll = true
+    loadMoreGroupInfos()
+  } else {
+    emits('toMoreResultPage', searchResultKey, state.searchText)
+  }
+}
+
+// 单独维护群聊加载更多逻辑，基于 last_id 分页
+async function loadMoreGroupInfos() {
+  if (state.groupInfosLoading) return
+  state.groupInfosLoading = true
+  try {
+    let params = {
+      key: state.searchText,
+      last_group_id: state.groupInfosLastGroupId,
+      last_member_id: state.groupInfosLastMemberId,
+      size: 10
+    }
+    const resp = await ServeQueryGroup(params)
+    if (resp.code === 200) {
+      const groupInfos = Array.isArray(resp.data.group_infos) ? resp.data.group_infos : []
+      const groupMemberInfos = Array.isArray(resp.data.group_member_infos) ? resp.data.group_member_infos : []
+
+      // 给新数据加上 groupTempType
+      groupInfos.forEach(item => {
+        item.groupTempType = 'group_infos'
+        item.group_type = item.type // 保持一致性
+      })
+      groupMemberInfos.forEach(item => {
+        item.groupTempType = 'group_member_infos'
+      })
+
+      const isFirstLoad = (!state.groupInfosLastGroupId && !state.groupInfosLastMemberId) ||
+        (state.groupInfosLastGroupId === 0 && state.groupInfosLastMemberId === 0)
+      if (isFirstLoad) {
+        // 第一次加载，直接替换
+        state.searchResult = {
+          ...state.searchResult,
+          group_infos: groupInfos,
+          group_member_infos: groupMemberInfos,
+          combinedGroup: groupInfos.concat(groupMemberInfos)
+        }
+      } else {
+        // 后续加载，追加
+        const allGroupInfos = (state.searchResult.group_infos || []).concat(groupInfos)
+        const allGroupMemberInfos = (state.searchResult.group_member_infos || []).concat(groupMemberInfos)
+        state.searchResult = {
+          ...state.searchResult,
+          group_infos: allGroupInfos,
+          group_member_infos: allGroupMemberInfos,
+          combinedGroup: allGroupInfos.concat(allGroupMemberInfos)
+        }
+      }
+      state.groupInfosLastGroupId = resp.data.last_group_id
+      state.groupInfosLastMemberId = resp.data.last_member_id
+      // 判断是否全部加载完
+      const noMoreData = (
+        (!groupInfos.length && !groupMemberInfos.length) ||
+        (resp.data.last_group_id === 0 && resp.data.last_member_id === 0)
+      )
+      if (noMoreData) {
+        state.groupInfosExpand = true
+      }
+    }
+  } finally {
+    state.groupInfosLoading = false
+  }
+}
 </script>
 <style lang="scss" scoped>
 .search-list {

src/components/talk/message/system/SysGroupMemberKickedMessage.vue

@@ -24,7 +24,7 @@ const { showUserInfoModal } = useInject()
         <em v-show="index < extra.members.length - 1">、</em>
       </template>
 
-      <span>踢出群聊</span>
+      <span>移出群聊</span>
     </div>
   </div>
 </template>

src/connect.ts

@@ -7,6 +7,7 @@ import EventTalk from './event/talk'
 import EventKeyboard from './event/keyboard'
 import EventLogin from './event/login'
 import EventRevoke from './event/revoke'
+import EventRead from './event/read'
 import { getAccessToken, isLoggedIn } from './utils/auth'
 
 const urlCallback = () => {
@@ -85,6 +86,8 @@ class Connect {
     this.onImContactStatus()
     this.onImMessageRevoke()
     this.onImMessageKeyboard()
+    this.onImMessageListenRead()
+    this.onImMessageListenReadIncr()
   }
 
   onPing() {
@@ -131,6 +134,16 @@ class Connect {
     this.conn.on('im.message.revoke', (data: any) => new EventRevoke(data))
   }
 
+  onImMessageListenRead() {
+    // 消息已读回执监听事件（全量）
+    this.conn.on('im.message.listen.read', (data: any) => new EventRead(data, 'total'))
+  }
+
+  onImMessageListenReadIncr() {
+    // 消息已读回执监听事件(增量)
+    this.conn.on('im.message.listen.read.incr', (data: any) => new EventRead(data, 'incr'))
+  }
+
   onImContactApply() {
     // 好友申请事件
     this.conn.on('im.contact.apply', (data: any) => {

src/event/read.js

@@ -0,0 +1,54 @@
+import Base from './base'
+import { useTalkStore, useDialogueStore } from '@/store'
+import ws from '@/connect'
+import { bus } from '@/utils/event-bus'
+
+/**
+ * 已读回执事件
+ */
+class Read extends Base {
+  /**
+   * @var resource 资源
+   */
+  resource
+
+  /**
+   * 场景类型
+   */
+  type
+
+  /**
+   * 初始化构造方法
+   *
+   * @param {Object} resource Socket消息
+   */
+  constructor(resource, type) {
+    super()
+
+    this.resource = resource
+    this.type = type
+    this.handle()
+  }
+
+  handle() {
+    if (this.type == 'total') {
+      console.error('====接收到了新版已读回执全量=====', this.resource)
+      const readList = this.resource.result
+      if (readList.length > 0) {
+        readList.forEach((item) => {
+          useDialogueStore().updateDialogueRecord({
+            msg_id: item.msg_id,
+            read_total_num: item.read_total_num
+          })
+        })
+      }
+    } else if (this.type == 'incr') {
+      console.error('====接收到了新版已读回执增量=====', this.resource)
+      // 由于直接使用增量的数值，会导致消息列表的已读回执数量不准确，可能多可能少
+      // 所以收到增量消息后，直接手动触发一次查询全量
+      bus.emit('check-visible-out-elements', 'incr')
+    }
+  }
+}
+
+export default Read

src/event/talk.js

@@ -94,7 +94,7 @@ class Talk extends Base {
     useSettingsStore().isPromptTone && palyMusic()
   }
 
-  handle() {
+  async handle() {
     // 不是自己发送的消息则需要播放提示音
     if (!this.isCurrSender()) {
       this.play()
@@ -102,7 +102,18 @@ class Talk extends Base {
 
     // 判断会话列表是否存在，不存在则创建
     if (useTalkStore().findTalkIndex(this.getIndexName()) == -1) {
-      return this.addTalkItem()
+      if (this.resource.msg_type == 1102) {
+        //被邀请进入群聊时，需要热更新会话列表
+        await useTalkStore().loadTalkList()
+      } else if (this.resource.msg_type == 1106) {
+        //群解散时，需要热更新会话列表
+        await useTalkStore().loadTalkList()
+      } else if (this.resource.msg_type == 1104 || this.resource.msg_type == 1115) {
+        //群成员被移出时，需要热更新会话列表
+        await useTalkStore().loadTalkList()
+      } else {
+        return this.addTalkItem()
+      }
     }
 
     // 判断当前是否正在和好友对话
@@ -169,10 +180,42 @@ class Talk extends Base {
     let record = this.resource
 
     // 群成员变化的消息，需要更新群成员列表
-    if ([1102, 1103, 1104].includes(record.msg_type)) {
+    if ([1102, 1103, 1104, 1115].includes(record.msg_type)) {
       useDialogueStore().updateGroupMembers()
     }
 
+    //群解散时，需要更新群成员权限
+    if ([1106].includes(record.msg_type)) {
+      useDialogueStore().updateDismiss(true)
+    }
+
+    //群成员被移出时，需要更新群成员权限
+    if ([1104, 1115].includes(record.msg_type)) {
+      if (this.resource?.extra?.members?.length > 0) {
+        const isMeQuit = this.resource.extra.members.find(
+          (item) => item.user_id === this.getAccountId()
+        )
+        if (isMeQuit) {
+          useDialogueStore().updateQuit(true)
+        }
+      }
+    }
+
+    // 群信息变更时，需要更新群信息
+    if ([1116].includes(record.msg_type)) {
+      // 更新会话信息
+      useDialogueStore().updateDialogueTalk({
+        username: record.extra.group_name,
+        avatar: record.extra.group_avatar
+      })
+      //更新会话列表中的会话信息
+      useTalkStore().updateItem({
+        index_name: this.getIndexName(),
+        name: record.extra.group_name,
+        avatar: record.extra.group_avatar
+      })
+    }
+
     useDialogueStore().addDialogueRecord(formatTalkRecord(this.getAccountId(), this.resource))
 
     if (!this.isCurrSender()) {
@@ -221,6 +264,21 @@ class Talk extends Base {
       msg_text: this.getTalkText(),
       updated_at: parseTime(new Date())
     })
+    //收到新消息时，同时判断是否有人@我
+    if (this.resource.msg_type === 1 && this.resource?.extra?.mentions?.length > 0) {
+      const findMention = this.resource?.extra?.mentions?.find(
+        (mention) => mention === this.getAccountId()
+      )
+      //有人@我或者@所有人，则更新会话列表
+      if (findMention || this.resource?.extra?.mentions?.includes(0)) {
+        // useTalkStore().loadTalkList()
+        useTalkStore().updateItem({
+          index_name: this.getIndexName(),
+          msg_text: this.getTalkText(),
+          atsign_num: 1
+        })
+      }
+    }
   }
 }
 

src/hooks/useTalkRecord.ts

@@ -14,8 +14,9 @@ interface Params {
 interface SpecialParams extends Params {
   msg_id?: string
   cursor?: number
-  direction?: 'up' | 'down',
+  direction?: 'up' | 'down'
   sort_sequence?: string
+  type?: 'loadMore'
 }
 
 interface LoadOptions {
@@ -38,7 +39,11 @@ export const useTalkRecord = (uid: number) => {
     talk_type: 0,
     status: 0,
     cursor: 0,
-    specialParams: undefined as SpecialParams | undefined
+    specialParams: undefined as SpecialParams | undefined,
+    isLocatingMessage: false,
+    isLoadingMore: false,
+    lastLoadMoreTime: 0,
+    targetMessagePosition: 0
   })
 
   // 重置 loadConfig
@@ -137,6 +142,11 @@ export const useTalkRecord = (uid: number) => {
 
       if (el) {
         if (request.cursor == 0) {
+          // el.scrollTop = el.scrollHeight
+          
+          // setTimeout(() => {
+          //   el.scrollTop = el.scrollHeight + 1000
+          // }, 500)
           scrollToBottom()
         } else {
           el.scrollTop = el.scrollHeight - scrollHeight
@@ -153,13 +163,13 @@ export const useTalkRecord = (uid: number) => {
   const getMinSequence = () => {
     console.error('records.value', records.value)
     if (!records.value.length) return 0
-    console.error(Math.min(...records.value.map(item => item.sequence)))
+    console.error(Math.min(...records.value.map((item) => item.sequence)))
-    return Math.min(...records.value.map(item => item.sequence))
+    return Math.min(...records.value.map((item) => item.sequence))
   }
   // 获取当前消息的最大 sequence
   const getMaxSequence = () => {
     if (!records.value.length) return 0
-    return Math.max(...records.value.map(item => item.sequence))
+    return Math.max(...records.value.map((item) => item.sequence))
   }
 
   /**
@@ -169,7 +179,10 @@ export const useTalkRecord = (uid: number) => {
    */
   const onLoad = (params: Params, options?: LoadOptions) => {
     // 如果会话切换，重置所有状态
-    if (params.talk_type !== loadConfig.talk_type || params.receiver_id !== loadConfig.receiver_id) {
+    if (
+      params.talk_type !== loadConfig.talk_type ||
+      params.receiver_id !== loadConfig.receiver_id
+    ) {
       resetLoadConfig()
     }
 
@@ -189,34 +202,68 @@ export const useTalkRecord = (uid: number) => {
         ...params,
         ...options.specifiedMsg
       }
+      //msg_id是用来做定位的，不做参数，所以这里清空
+      contextParams.msg_id = ''
       ServeTalkRecords(contextParams).then(({ data, code }) => {
         if (code !== 200) {
           loadConfig.status = 2
           return
         }
-        // dialogueStore.clearDialogueRecord()
+        // 记录当前滚动高度
+        const el = document.getElementById('imChatPanel')
+        const scrollHeight = el?.scrollHeight || 0
+
+        if (contextParams.direction === 'down' && !contextParams.type) {
+          dialogueStore.clearDialogueRecord()
+        }
         const items = (data.items || []).map((item: ITalkRecord) => formatTalkRecord(uid, item))
-        dialogueStore.unshiftDialogueRecord(contextParams.direction === 'down' ? items : items.reverse())
+        if (contextParams.type && contextParams.type === 'loadMore') {
-        loadConfig.status = items.length >= contextParams.limit ? 1 : 2
+          dialogueStore.addDialogueRecordForLoadMore(items)
+        } else {
+          dialogueStore.unshiftDialogueRecord(
+            contextParams.direction === 'down' ? items : items.reverse()
+          )
+        }
+        if (
+          contextParams.direction === 'up' ||
+          (contextParams.direction === 'down' && !contextParams.type)
+        ) {
+          loadConfig.status = items[0].sequence == 1 || data.length === 0 ? 2 : 1
+        }
         loadConfig.cursor = data.cursor
-        nextTick(() => {
+
-          setTimeout(() => {
+        // 使用 requestAnimationFrame 来确保在下一帧渲染前设置滚动位置
-            const el = document.getElementById('imChatPanel')
+        requestAnimationFrame(() => {
-            const target = document.getElementById(options.specifiedMsg?.msg_id || '')
+          const el = document.getElementById('imChatPanel')
-            if (el && target) {
+          const target = document.getElementById(options.specifiedMsg?.msg_id || '')
+          if (el && target) {
+            // 如果是向上加载更多，保持原有内容位置
+            if (contextParams.direction === 'up') {
+              el.scrollTop = el.scrollHeight - scrollHeight
+            } else if (contextParams.type && contextParams.type === 'loadMore') {
+              // 如果是向下加载更多，保持目标消息在可视区域底部
+              // 使用可视区域高度来调整，而不是新内容的总高度
+              nextTick(() => {
+                if (el) {
+                  el.scrollTop = scrollHeight - el.clientHeight
+                }
+              })
+            } else {
+              // 如果是定位到特定消息，计算并滚动到目标位置
               const containerRect = el.getBoundingClientRect()
               const targetRect = target.getBoundingClientRect()
               const offset = targetRect.top - containerRect.top
+              loadConfig.isLocatingMessage = true
               // 居中
               const scrollTo = el.scrollTop + offset - el.clientHeight / 2 + target.clientHeight / 2
               el.scrollTo({ top: scrollTo, behavior: 'smooth' })
-
               addClass(target, 'border')
               setTimeout(() => removeClass(target, 'border'), 3000)
-            } else if (el) {
-              scrollToBottom()
             }
-          }, 50)
+          } else if (el) {
+            // el.scrollTop = el.scrollHeight
+            scrollToBottom()
+          }
         })
       })
       return
@@ -235,8 +282,10 @@ export const useTalkRecord = (uid: number) => {
       // 判断是否是特殊参数模式
       if (loadConfig.specialParams && typeof loadConfig.specialParams === 'object') {
         // 检查特殊参数是否与当前会话匹配
-        if (loadConfig.specialParams.talk_type === loadConfig.talk_type && 
+        if (
-            loadConfig.specialParams.receiver_id === loadConfig.receiver_id) {
+          loadConfig.specialParams.talk_type === loadConfig.talk_type &&
+          loadConfig.specialParams.receiver_id === loadConfig.receiver_id
+        ) {
           // 特殊参数模式下，direction: 'up'，cursor: 当前最小 sequence
           onLoad(
             {
@@ -249,7 +298,11 @@ export const useTalkRecord = (uid: number) => {
                 ...loadConfig.specialParams,
                 direction: 'up',
                 sort_sequence: '',
-                cursor: getMinSequence()
+                cursor: getMinSequence(),
+                msg_id:
+                  records.value.find((item) =>
+                    item.sequence === getMinSequence() ? item.msg_id : ''
+                  )?.msg_id || ''
               }
             }
           )
@@ -273,13 +326,33 @@ export const useTalkRecord = (uid: number) => {
     }
   }
 
-  // 向下加载更多（兼容特殊参数模式）
+  // 向下加载更多（特殊参数模式才生效，普通模式无效，因为普通模式的数据就是从最新开始加载历史的，所以不需要加载更新的数据）
   const onLoadMoreDown = () => {
     // 判断是否是特殊参数模式
     if (loadConfig.specialParams && typeof loadConfig.specialParams === 'object') {
+      if (loadConfig.isLocatingMessage) {
+        loadConfig.isLocatingMessage = false
+        return
+      }
+      // 添加时间间隔限制，至少间隔 500ms 才能触发下一次加载
+      const now = Date.now()
+      if (now - loadConfig.lastLoadMoreTime < 500) {
+        return
+      }
+      loadConfig.lastLoadMoreTime = now
+
+      // 记录当前目标消息的位置
+      const el = document.getElementById('imChatPanel')
+      if (el) {
+        loadConfig.targetMessagePosition = el.scrollHeight - el.scrollTop
+      }
+
+      console.log('onLoadMoreDown 特殊模式触底了')
       // 检查特殊参数是否与当前会话匹配
-      if (loadConfig.specialParams.talk_type === loadConfig.talk_type && 
+      if (
-          loadConfig.specialParams.receiver_id === loadConfig.receiver_id) {
+        loadConfig.specialParams.talk_type === loadConfig.talk_type &&
+        loadConfig.specialParams.receiver_id === loadConfig.receiver_id
+      ) {
         onLoad(
           {
             receiver_id: loadConfig.receiver_id,
@@ -290,27 +363,23 @@ export const useTalkRecord = (uid: number) => {
             specifiedMsg: {
               ...loadConfig.specialParams,
               direction: 'down',
-              cursor: getMaxSequence()
+              sort_sequence: 'asc',
+              cursor: getMaxSequence(),
+              type: 'loadMore'
             }
           }
         )
-      } else {
-        // 如果不匹配，重置为普通模式
-        resetLoadConfig()
-        load({
-          receiver_id: loadConfig.receiver_id,
-          talk_type: loadConfig.talk_type,
-          limit: 30
-        })
       }
-    } else {
-      load({
-        receiver_id: loadConfig.receiver_id,
-        talk_type: loadConfig.talk_type,
-        limit: 30
-      })
     }
   }
 
-  return { loadConfig, records, onLoad, onRefreshLoad, onLoadMoreDown, onJumpMessage, resetLoadConfig }
+  return {
+    loadConfig,
+    records,
+    onLoad,
+    onRefreshLoad,
+    onLoadMoreDown,
+    onJumpMessage,
+    resetLoadConfig
+  }
 }

src/store/modules/dialogue.js

@@ -49,6 +49,12 @@ export const useDialogueStore = defineStore('dialogue', {
       // 是否显示编辑器
       isShowEditor: false,
 
+      //是否已被解散
+      isDismiss: false,
+
+      //是否退群/移出群
+      isQuit: false,
+
       // 是否显示会话列表
       isShowSessionList: true,
       groupInfo: {} ,
@@ -80,6 +86,16 @@ export const useDialogueStore = defineStore('dialogue', {
       this.online = status
     },
 
+    // 更新群解散状态
+    updateDismiss(isDismiss) {
+      this.isDismiss = isDismiss
+    },
+
+    // 更新群成员退出状态
+    updateQuit(isQuit) {
+      this.isQuit = isQuit
+    },
+
     // 更新对话信息
     setDialogue(data = {}) {
       this.online = data.is_online == 1
@@ -95,6 +111,9 @@ export const useDialogueStore = defineStore('dialogue', {
       this.records = []
       this.unreadBubble = 0
       this.isShowEditor = data?.is_robot === 0
+
+      this.isDismiss = data?.is_dismiss === 1 ? true : false
+      this.isQuit = data?.is_quit === 1 ? true : false
       
       // 只在手动切换会话时清空 specifiedMsg
       // if (this.isManualSwitch) {
@@ -151,6 +170,10 @@ export const useDialogueStore = defineStore('dialogue', {
     unshiftDialogueRecord(records) {
       this.records.unshift(...records)
     },
+    //数组尾部加入更多对话记录
+    addDialogueRecordForLoadMore(records){
+      this.records.push(...records)
+    },
     async getGroupInfo(){
       const { code, data } = await ServeGroupDetail({
         group_id: this.talk.receiver_id
@@ -288,6 +311,11 @@ export const useDialogueStore = defineStore('dialogue', {
         record.extra.url = videoInfo.url
         // record.extra.cover = videoInfo.cover
       }
+    },
+
+    // 更新会话信息
+    updateDialogueTalk(params){
+      Object.assign(this.talk, params)
     }
   }
 })

src/types/chat.ts

@@ -49,8 +49,8 @@ export interface ITalkRecord {
   send_status: number
   float: string,
   is_convert_text?:number//语音记录的 是否是在展示转文本状态 1：是 0：否,
-  erp_user_id:number
+  erp_user_id:number,
-  
+  read_total_num:number
 }
 
 export interface ITalkRecordExtraText {

src/utils/talk.js

@@ -39,6 +39,8 @@ export function formatTalkItem(params) {
     is_top: 0,
     is_online: 0,
     is_robot: 0,
+    is_dismiss: 0,
+    is_quit: 0,
     unread_num: 0,
     content: '......',
     draft_text: '',

src/views/message/inner/IndexContent.vue

@@ -481,6 +481,12 @@ const onDatePickShow = (show) => {
     // state.nowDateTime = new Date()
   }
 }
+
+// 隐藏搜索结果模态框
+const hideSearchResultModal = () => {
+  handleSearchRecordByConditionModalClose()
+  state.isShowGroupAside = false
+}
 </script>
 
 <template>
@@ -506,6 +512,7 @@ const onDatePickShow = (show) => {
         :receiver_id="talkParams.receiver_id"
         :index_name="talkParams.index_name"
         :specifiedMsg="talkParams.specifiedMsg"
+        :num="talkParams.num"
       />
     </main>
 
@@ -706,6 +713,7 @@ const onDatePickShow = (show) => {
               @getDisabledDateArray="getDisabledDateArray"
               :selectedDateTime="state.selectedDateTime"
               :nowDateTime="state.nowDateTime"
+              @hideSearchResultModal="hideSearchResultModal"
             />
           </div>
         </n-card>

src/views/message/inner/IndexSider.vue

@@ -74,6 +74,24 @@ const renderChatAppSearch = () => {
         console.log(searchText, searchResultKey, talk_type, receiver_id)
         const result = JSON.parse(decodeURIComponent(res))
         console.log(result)
+        if (searchResultKey === 'general_infos') {
+          state.ServeQueryTalkRecordParams = encodeURIComponent(
+            JSON.stringify({
+              talk_type: 0, //1私聊2群聊
+              receiver_id: 0, //查详情的时候需传入
+              last_group_id: 0, //最后一条群id
+              last_member_id: 0, //最后一条用户id
+              last_receiver_user_name: '', //最后一条用户名
+              last_receiver_group_name: '' //最后一条群名
+            })
+          )
+          state.isShowSearchRecordModal = true
+          state.searchRecordText = searchText
+          state.selectItemInList = res
+        } else {
+          talkStore.toTalk(talk_type, receiver_id, router)
+        }
+        state.showSearchDropdown = false
       },
       onToMoreResultPage: (searchResultKey, searchText) => {
         if (searchResultKey === 'general_infos') {
@@ -88,8 +106,10 @@ const renderChatAppSearch = () => {
             })
           )
           state.isShowSearchRecordModal = true
+          state.searchRecordText = searchText
         }
         console.log(searchResultKey, searchText)
+        state.showSearchDropdown = false
       }
     },
     {
@@ -277,7 +297,9 @@ const state = reactive({
     apiParams: '',
     lastId: undefined as any,
     total: 0
-  }
+  },
+  showSearchDropdown: false, // 是否显示搜索下拉框
+  selectItemInList: '' // 在列表选中的聊天记录搜索项
 })
 
 const items = computed((): ISession[] => {
@@ -292,9 +314,9 @@ const items = computed((): ISession[] => {
 
   // 置顶和非置顶分组
   const topItems = filtered
-    .filter(item => item.is_top === 1)
+    .filter((item) => item.is_top === 1)
     .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
-  const normalItems = filtered.filter(item => item.is_top !== 1)
+  const normalItems = filtered.filter((item) => item.is_top !== 1)
 
   return [...topItems, ...normalItems]
 })
@@ -379,7 +401,8 @@ const onTabTalk = (item: ISession, follow = false) => {
     }).then(() => {
       talkStore.updateItem({
         index_name: item.index_name,
-        unread_num: 0
+        unread_num: 0,
+        atsign_num: 0
       })
     })
   }
@@ -589,8 +612,8 @@ const handleGroupChatListPaginationSize = (value) => {
 //处理搜索聊天记录点击
 const handleClickSearchItem = (searchText, searchResultKey, talk_type, receiver_id, res) => {
   console.log(searchText, searchResultKey, talk_type, receiver_id)
-  const result = JSON.parse(decodeURIComponent(res))
+  // const result = JSON.parse(decodeURIComponent(res))
-  console.log(result)
+  // console.log(result)
   if (searchResultKey === 'general_infos') {
     // 先清空右侧
     state.isShowSearchRecordDetailInfo = false
@@ -628,6 +651,9 @@ const handleClickSearchResultItem = (searchText, searchResultKey, talk_type, rec
   )
   console.error(dialogueStore.specifiedMsg, 'dialogueStore.specifiedMsg')
   talkStore.toTalk(talk_type, receiver_id, router)
+  state.isShowSearchRecordModal = false
+  state.searchRecordText = ''
+  searchKeyword.value = ''
 }
 //处理点击停留item变化
 const handleClickStayItemChange = (item) => {
@@ -722,24 +748,26 @@ const handleEnterSearchResultChat = () => {
         trigger="click"
         :options="state.chatSearchOptions"
         style="width: 248px; height: 677px;"
+        :show="state.showSearchDropdown"
+        @clickoutside="state.showSearchDropdown = false"
       >
         <n-input
           placeholder="搜索好友 / 群聊"
           v-model:value.trim="searchKeyword"
-          round
           clearable
           style="width: 78%;"
+          @click="state.showSearchDropdown = true"
         >
-          <template #prefix>
+          <!-- <template #prefix>
             <n-icon :component="Search" />
-          </template>
+          </template> -->
         </n-input>
       </n-dropdown>
-      <n-button circle @click="isShowGroup = true">
+      <!-- <n-button circle @click="isShowGroup = true">
         <template #icon>
           <n-icon :component="Plus" />
         </template>
-      </n-button>
+      </n-button> -->
       <img
         style="width: 19px; height: 20px; cursor: pointer;"
         src="@/assets/image/chatList/addressBook.png"
@@ -950,6 +978,7 @@ const handleEnterSearchResultChat = () => {
                 @clickStayItemChange="handleClickStayItemChange"
                 @lastIdChange="handleSearchListLastIdChange"
                 :searchResultMaxHeight="'517px'"
+                :selectItemInList="state.selectItemInList"
               ></chatAppSearchList>
             </div>
             <div class="search-record-detail">

src/views/message/inner/TalkItem.vue

@@ -51,6 +51,7 @@ const labelColor=[
             <span class="detail" v-html="data.draft_text" />
           </template>
           <template v-else>
+            <span class="draft" v-show="data.talk_type == 2 && data.atsign_num"> [有人@你] </span>
             <span class="online" v-show="data.talk_type == 1 && data.is_online == 1"> [在线] </span>
             <span class="detail" v-html="data.msg_text" />
           </template>

src/views/message/inner/panel/PanelContent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { watch, onMounted, ref, nextTick } from 'vue'
+import { watch, onMounted, ref, nextTick, onUnmounted } from 'vue'
-import { NDropdown, NCheckbox } from 'naive-ui'
+import { NDropdown, NCheckbox, NPopover, NInfiniteScroll } from 'naive-ui'
 import { Loading, MoreThree, ToTop } from '@icon-park/vue-next'
 import { bus } from '@/utils/event-bus'
 import { useDialogueStore } from '@/store'
@@ -14,10 +14,42 @@ import { ITalkRecord } from '@/types/chat'
 import { EditorConst } from '@/constant/event-bus'
 import { useInject, useTalkRecord, useUtil } from '@/hooks'
 import { ExclamationCircleFilled } from '@ant-design/icons-vue'
-import { useUserStore ,useUploadsStore} from '@/store'
+import { useUserStore, useUploadsStore } from '@/store'
 import RevokeMessage from '@/components/talk/message/RevokeMessage.vue'
-import { voiceToText } from '@/api/chat.js'
+import { voiceToText, ServeMessageReadDetail } from '@/api/chat.js'
-import {confirmBox} from '@/components/confirm-box/service.js'
+import { confirmBox } from '@/components/confirm-box/service.js'
+import ws from '@/connect'
+import avatarModule from '@/components/avatar-module/index.vue'
+
+// 定义消息已读状态接口
+interface ReadStatus {
+  msg_ids: string[]
+  talk_type: number
+  receiver_id: number
+  user_id?: number
+}
+
+// 定义状态接口
+interface State {
+  visibleElements: Set<HTMLElement>
+  visibleOutElements: Set<HTMLElement>
+  tempWaitDoRead: ReadStatus[]
+  tempWaitDoCheck: ReadStatus[]
+  setMessageReadInterval: number | null
+  setOutMessageReadInterval: number | null
+  lastUpdateTime: number
+  isScrolling: boolean
+  scrollTimer: number | null
+  lastTriggerTime: number
+  talkReadListDetail: any[]
+  readDetailIsUnread: number
+  currentMsgReadDetail: any | null
+  currentReadDetailPage: number
+  hasMoreReadListDetail: boolean
+  loadingReadListDetail: boolean
+  lastScrollTop: number
+}
+
 const props = defineProps({
   uid: {
     type: Number,
@@ -38,10 +70,14 @@ const props = defineProps({
   specifiedMsg: {
     type: String,
     default: ''
+  },
+  num: {
+    type: Number,
+    default: 0
   }
 })
 
-const { loadConfig, records, onLoad, onRefreshLoad, onJumpMessage } = useTalkRecord(props.uid)
+const { loadConfig, records, onLoad, onRefreshLoad, onJumpMessage, onLoadMoreDown } = useTalkRecord(props.uid)
 const uploadsStore = useUploadsStore()
 const { useMessage } = useUtil()
 const { dropdown, showDropdownMenu, closeDropdownMenu } = useMenu()
@@ -90,11 +126,33 @@ const onPanelScroll = (e: any) => {
   }
 
   const height = e.target.scrollTop + e.target.clientHeight
+  const scrollHeight = e.target.scrollHeight
+  const isScrollingDown = e.target.scrollTop > state.value.lastScrollTop
+  state.value.lastScrollTop = e.target.scrollTop
 
-  skipBottom.value = height < e.target.scrollHeight - 200
+  // 触底且必须是向下滚动
+  if (height === scrollHeight && isScrollingDown) {
+    onLoadMoreDown()
+  }
+
+  skipBottom.value = height < scrollHeight - 200
   if (!skipBottom.value && dialogueStore.unreadBubble) {
     dialogueStore.setUnreadBubble(0)
   }
+
+  // 设置滚动状态
+  state.value.isScrolling = true
+  if (state.value.scrollTimer) {
+    clearTimeout(state.value.scrollTimer)
+  }
+  state.value.scrollTimer = window.setTimeout(() => {
+    state.value.isScrolling = false
+    // 滚动停止，强制触发一次
+    checkVisibleOutElements()
+    // 重置节流时间戳，保证下一次变化能立刻触发
+    lastVisibleOutTriggerTime = Date.now()
+  }, 300) // 300ms 的防抖时间
+
   // 检测是否到达底部
   if (skipBottom.value == false) {
     let len = dialogueStore.records.length
@@ -231,7 +289,6 @@ const onClickNickname = (data: ITalkRecord) => {
 
 // 会话列表右键显示菜单
 const onContextMenu = (e: any, item: ITalkRecord) => {
-
   if (!dialogueStore.isShowEditor || dialogueStore.isOpenMultiSelect) {
     return e.preventDefault()
   }
@@ -294,7 +351,10 @@ watch(
       try {
         const parsed = JSON.parse(decodeURIComponent(newProps.specifiedMsg))
         // 只有会话id和参数都匹配才进入特殊模式
-        if (parsed.talk_type === newProps.talk_type && parsed.receiver_id === newProps.receiver_id) {
+        if (
+          parsed.talk_type === newProps.talk_type &&
+          parsed.receiver_id === newProps.receiver_id
+        ) {
           specialParams = parsed
         }
       } catch (e) {}
@@ -312,26 +372,350 @@ watch(
 )
 
 // onMounted(() => {
-  // onLoad({ ...props, limit: 30 })
+// onLoad({ ...props, limit: 30 })
 // })
-const retry=(item:any)=>{
+const retry = (item: any) => {
   confirmBox({
-    content:'确定重发吗'
+    content: '确定重发吗'
-  }).then(()=>{
+  }).then(() => {
-   uploadsStore.retryCommonUpload(item.extra.upload_id)
+    uploadsStore.retryCommonUpload(item.extra.upload_id)
   })
 }
 
-const onContextMenuAvatar=(e:any,item:any)=>{
+const onContextMenuAvatar = (e: any, item: any) => {
   e.preventDefault()
-  if(item.float!=='right'){
+  if (item.float !== 'right') {
-  bus.emit(EditorConst.Mention, {
+    bus.emit(EditorConst.Mention, {
-    id: item.user_id,
+      id: item.user_id,
-    value: item.nickname
+      value: item.nickname
-  })
+    })
-}
+  }
 }
 
+const state = ref<State>({
+  visibleElements: new Set(),
+  visibleOutElements: new Set(),
+  tempWaitDoRead: [],
+  tempWaitDoCheck: [],
+  setMessageReadInterval: null,
+  setOutMessageReadInterval: null,
+  lastUpdateTime: 0,
+  isScrolling: false,
+  scrollTimer: null,
+  lastTriggerTime: 0,
+  talkReadListDetail: [],
+  readDetailIsUnread: 1,
+  currentMsgReadDetail: null,
+  currentReadDetailPage: 1,
+  hasMoreReadListDetail: true,
+  loadingReadListDetail: false,
+  lastScrollTop: 0
+})
+
+// 定义观察者变量
+let observer: IntersectionObserver | null = null
+
+// 检查需要发送已读回执的元素
+const checkVisibleElements = () => {
+  if (state.value.visibleElements.size > 0) {
+    let waitDoRead: ReadStatus[] = []
+    state.value.visibleElements.forEach((el: HTMLElement) => {
+      const msgId = el.dataset.msgid
+      const talkType = Number(el.dataset.talktype)
+      const receiverId = Number(el.dataset.receiverid)
+
+      if (!msgId) return
+
+      if (waitDoRead.length === 0) {
+        waitDoRead.push({
+          msg_ids: [msgId],
+          talk_type: talkType,
+          receiver_id: receiverId
+        })
+      } else {
+        const existingItem = waitDoRead.find(
+          (item) => item.talk_type === talkType && item.receiver_id === receiverId
+        )
+        if (existingItem) {
+          existingItem.msg_ids.push(msgId)
+        } else {
+          waitDoRead.push({
+            msg_ids: [msgId],
+            talk_type: talkType,
+            receiver_id: receiverId
+          })
+        }
+      }
+    })
+    if (waitDoRead.length > 0) {
+      waitDoRead.forEach((doReadItem) => {
+        const prevItem = state.value.tempWaitDoRead.find(
+          (prev) =>
+            prev.talk_type === doReadItem.talk_type && prev.receiver_id === doReadItem.receiver_id
+        )
+        if (!prevItem || !doReadItem.msg_ids.every((id) => prevItem.msg_ids.includes(id))) {
+          console.error('====发送了新版已读回执=====', doReadItem)
+          ws.emit('im.message.new.read', doReadItem)
+        }
+      })
+    }
+    state.value.tempWaitDoRead = JSON.parse(JSON.stringify(waitDoRead))
+  }
+}
+
+// 检查需要获取别人发送的已读回执列表的元素
+const checkVisibleOutElements = () => {
+  if (state.value.visibleOutElements.size > 0) {
+    let waitDoCheck: ReadStatus[] = []
+    state.value.visibleOutElements.forEach((el: HTMLElement) => {
+      const msgId = el.dataset.msgid
+      const talkType = Number(el.dataset.talktype)
+      const receiverId = Number(el.dataset.receiverid)
+
+      if (!msgId) return
+
+      if (waitDoCheck.length === 0) {
+        waitDoCheck.push({
+          msg_ids: [msgId],
+          talk_type: talkType,
+          receiver_id: receiverId,
+          user_id: props.uid
+        })
+      } else {
+        const existingItem = waitDoCheck.find(
+          (item) => item.talk_type === talkType && item.receiver_id === receiverId
+        )
+        if (existingItem) {
+          existingItem.msg_ids.push(msgId)
+        } else {
+          waitDoCheck.push({
+            msg_ids: [msgId],
+            talk_type: talkType,
+            receiver_id: receiverId,
+            user_id: props.uid
+          })
+        }
+      }
+    })
+    if (waitDoCheck.length > 0) {
+      waitDoCheck.forEach((doCheckItem) => {
+        console.error('====组装了新版已读回执参数，需要发送socket=====', doCheckItem)
+        ws.emit('im.message.listen.read', doCheckItem)
+      })
+    }
+    state.value.tempWaitDoCheck = JSON.parse(JSON.stringify(waitDoCheck))
+  }
+}
+
+// 定义节流时间戳
+let lastVisibleOutTriggerTime = 0
+
+//新版采用socket监听已读回执，不轮询接口
+watch(
+  () => state.value.visibleOutElements,
+  (newVal) => {
+    const now = Date.now()
+    if (now - lastVisibleOutTriggerTime < 1000) {
+      return
+    }
+    lastVisibleOutTriggerTime = now
+    checkVisibleOutElements()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+// 观察者函数
+const handleIntersection = (entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+      let elData = entry.target.dataset
+      const msgType = elData.msgtype
+      const userId = elData.userid
+      if (Number(msgType) < 1000 && Number(userId) !== Number(props.uid)) {
+        //我读别人发的消息，需要发送已读回执
+        state.value.visibleElements.add(entry.target)
+      }
+      if (Number(msgType) < 1000 && Number(userId) === Number(props.uid)) {
+        //我发的消息，需要获取别人发送的已读回执列表
+        state.value.visibleOutElements.add(entry.target)
+      }
+    } else {
+      // 元素离开视口，从集合中移除
+      state.value.visibleElements.delete(entry.target)
+      state.value.visibleOutElements.delete(entry.target)
+    }
+  })
+}
+
+// 监听消息列表变化
+watch(
+  () => records.value,
+  () => {
+    nextTick(() => {
+      // 断开旧的观察者
+      if (observer) {
+        observer.disconnect()
+      }
+
+      // 重新初始化观察者
+      const options = {
+        root: null,
+        threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+        rootMargin: '50px 0px'
+      }
+      observer = new IntersectionObserver(handleIntersection, options)
+
+      // 重新观察所有消息元素
+      const messageElements = document.querySelectorAll('.message-item')
+      messageElements.forEach((el) => {
+        if (observer) {
+          observer.observe(el)
+        }
+      })
+    })
+  },
+  { deep: true }
+)
+
+// 事件总线防抖处理
+let eventBusDebounceTimer: number | null = null
+
+onMounted(() => {
+  // 事件总线监听
+  bus.subscribe('check-visible-out-elements', (type) => {
+    if (eventBusDebounceTimer) {
+      clearTimeout(eventBusDebounceTimer)
+    }
+    eventBusDebounceTimer = window.setTimeout(() => {
+      checkVisibleOutElements()
+      eventBusDebounceTimer = null
+    }, 500)
+  })
+  //设置观察者前设置定时器
+  if (state.value.setMessageReadInterval) {
+    clearInterval(state.value.setMessageReadInterval)
+    state.value.setMessageReadInterval = null
+  }
+  state.value.setMessageReadInterval = setInterval(() => {
+    checkVisibleElements()
+  }, 2000)
+
+  if (state.value.setOutMessageReadInterval) {
+    clearInterval(state.value.setOutMessageReadInterval)
+    state.value.setOutMessageReadInterval = null
+  }
+  // 旧版采用定时器来轮询已读回执，新版采用socket监听已读回执
+  // state.value.setOutMessageReadInterval = setInterval(() => {
+  //   checkVisibleOutElements()
+  // }, 2000)
+
+  //初始化设置观察者
+  const options = {
+    root: null,
+    threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+    rootMargin: '50px 0px'
+  }
+  observer = new IntersectionObserver(handleIntersection, options)
+
+  // 观察所有消息元素
+  nextTick(() => {
+    const messageElements = document.querySelectorAll('.message-item')
+    messageElements.forEach((el) => {
+      if (observer) {
+        observer.observe(el)
+      }
+    })
+  })
+})
+
+onUnmounted(() => {
+  if (observer) {
+    observer.disconnect()
+  }
+  if (state.value.setMessageReadInterval) {
+    clearInterval(state.value.setMessageReadInterval)
+    state.value.setMessageReadInterval = null
+    checkVisibleElements()
+  }
+  if (state.value.setOutMessageReadInterval) {
+    clearInterval(state.value.setOutMessageReadInterval)
+    state.value.setOutMessageReadInterval = null
+    checkVisibleOutElements()
+  }
+  // 清理事件总线防抖定时器
+  if (eventBusDebounceTimer) {
+    clearTimeout(eventBusDebounceTimer)
+    eventBusDebounceTimer = null
+  }
+  // 事件总线移除监听
+  bus.unsubscribe('check-visible-out-elements', checkVisibleOutElements)
+})
+
+//点击显示对应消息的已读回执详情
+const toShowMessageReadDetail = async (item?: ITalkRecord) => {
+  if (item) {
+    state.value.currentMsgReadDetail = item
+    onReadTabChange('unread-tab')
+    return
+  }
+  let params = {
+    page: state.value.currentReadDetailPage,
+    pageSize: 10,
+    type: 'detail', //list是列表，detail是详情
+    talkType: state?.value?.currentMsgReadDetail?.talk_type, //1私聊2群聊
+    receiverId: state?.value?.currentMsgReadDetail?.receiver_id, //私聊的时候是对方用户id，群聊的时候是对方群id
+    msgId: state?.value?.currentMsgReadDetail?.msg_id,
+    isUnread: state?.value?.readDetailIsUnread //不送或者送0代表看已读，送1看未读
+  }
+  console.log(params)
+  const resp = await ServeMessageReadDetail(params)
+  console.log(resp)
+  if (resp.code === 200) {
+    console.log(resp?.data?.data?.length)
+    if (resp?.data?.data?.length > 0) {
+      state.value.hasMoreReadListDetail = true
+      if (state.value.currentReadDetailPage === 1) {
+        state.value.talkReadListDetail = resp.data.data
+      } else {
+        state.value.talkReadListDetail = [...state.value.talkReadListDetail, ...resp.data.data]
+      }
+    } else {
+      if (state.value.currentReadDetailPage === 1) {
+        state.value.talkReadListDetail = []
+      }
+      state.value.hasMoreReadListDetail = false
+    }
+  }
+}
+
+//已读回执tab切换
+const onReadTabChange = (value) => {
+  if (value === 'unread-tab') {
+    //未读
+    state.value.readDetailIsUnread = 1
+  } else if (value === 'read-tab') {
+    //已读
+    state.value.readDetailIsUnread = 0
+  }
+  state.value.currentReadDetailPage = 1
+  toShowMessageReadDetail()
+}
+
+//加载更多已读回执
+const loadMoreReadListDetail = () => {
+  console.log('loadMoreReadListDetail')
+  if (!state.value.hasMoreReadListDetail || state.value.loadingReadListDetail) {
+    return
+  }
+  state.value.loadingReadListDetail = true
+  state.value.currentReadDetailPage++
+  toShowMessageReadDetail().finally(() => {
+    state.value.loadingReadListDetail = false
+  })
+}
 </script>
 
 <template>
@@ -353,6 +737,11 @@ const onContextMenuAvatar=(e:any,item:any)=>{
         v-for="(item, index) in records"
         :key="item.msg_id"
         :id="item.msg_id"
+        :data-msgid="item.msg_id"
+        :data-msgtype="item.msg_type"
+        :data-userid="item.user_id"
+        :data-talktype="props?.talk_type"
+        :data-receiverid="props?.receiver_id"
       >
         <!-- 系统消息 -->
         <div v-if="item.msg_type >= 1000" class="message-box">
@@ -386,7 +775,11 @@ const onContextMenuAvatar=(e:any,item:any)=>{
         >
           <!-- 多选按钮 -->
           <aside v-if="dialogueStore.isOpenMultiSelect" class="checkbox-column shrink-0">
-            <n-checkbox size="small" :checked="item.isCheck" @update:checked="item.isCheck = !item.isCheck" />
+            <n-checkbox
+              size="small"
+              :checked="item.isCheck"
+              @update:checked="item.isCheck = !item.isCheck"
+            />
           </aside>
           <!-- 头像信息 -->
 
@@ -414,10 +807,8 @@ const onContextMenuAvatar=(e:any,item:any)=>{
               <span>{{ parseTime(item.created_at, '{y}/{m}/{d} {h}:{i}') }}</span>
             </div> -->
             <div class="talk-title">
-              <span class="mr-7px"
+              <span class="mr-7px" v-show="talk_type == 2 && item.float == 'left'"
-                v-show="talk_type == 2 && item.float == 'left'"
+                >{{ item.nickname }}
-                
-              >{{ item.nickname }}
               </span>
               <span>{{ parseTime(item.created_at, '{y}/{m}/{d} {h}:{i}') }}</span>
             </div>
@@ -476,6 +867,72 @@ const onContextMenuAvatar=(e:any,item:any)=>{
                 {{ item.extra?.reply?.content }}
               </span>
             </div>
+
+            <!-- 已读回执 -->
+            <div class="talk_read_num" v-if="item.user_id === props.uid">
+              <n-popover trigger="click" placement="bottom-end" style="height: 382px; padding: 0;">
+                <template #trigger>
+                  <span v-if="props.talk_type === 1">{{
+                    item.read_total_num > 0 ? '已读' : '未读'
+                  }}</span>
+                  <span v-if="props.talk_type === 2" @click="toShowMessageReadDetail(item)">
+                    已读 ({{ item?.read_total_num || 0 }}/{{
+                      props.num - 1 > 0 ? props.num - 1 : 0
+                    }})
+                  </span>
+                </template>
+                <div class="talk-read-list-detail">
+                  <n-tabs
+                    type="line"
+                    animated
+                    justify-content="space-around"
+                    @update:value="onReadTabChange"
+                  >
+                    <n-tab name="unread-tab">
+                      {{ `未读(${props.num - 1 - (item.read_total_num || 0) || 0})` }}
+                    </n-tab>
+                    <n-tab name="read-tab">
+                      {{ `已读(${item.read_total_num || 0})` }}
+                    </n-tab>
+                  </n-tabs>
+                  <div class="talk-read-list">
+                    <n-infinite-scroll style="height: 340px;" @load="loadMoreReadListDetail">
+                      <div
+                        class="talk-read-list-item"
+                        v-for="(talkReadDetailItem,
+                        talkReadDetailIndex) in state.talkReadListDetail"
+                        :key="talkReadDetailIndex"
+                      >
+                        <avatarModule
+                          :mode="1"
+                          :avatar="talkReadDetailItem.avatar"
+                          :userName="talkReadDetailItem.nickName"
+                          :groupType="0"
+                          :customStyle="{
+                            width: '36px',
+                            height: '36px'
+                          }"
+                          :customTextStyle="{
+                            fontSize: '12px',
+                            fontWeight: 'bold',
+                            color: '#fff',
+                            lineHeight: '17px'
+                          }"
+                        ></avatarModule>
+                        <div class="talk-read-list-item-info">
+                          <span style="font-size: 12px; font-weight: 600; line-height: 17px;">{{
+                            talkReadDetailItem.nickName
+                          }}</span>
+                          <span style="font-size: 12px; color: #999; line-height: 14px;">{{
+                            talkReadDetailItem.jobNum
+                          }}</span>
+                        </div>
+                      </div>
+                    </n-infinite-scroll>
+                  </div>
+                </div>
+              </n-popover>
+            </div>
           </main>
         </div>
 
@@ -674,6 +1131,18 @@ const onContextMenuAvatar=(e:any,item:any)=>{
         }
       }
 
+      .talk_read_num {
+        text-align: right;
+        color: #7a58de;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 17px;
+        margin: 5px 0 0;
+        span {
+          cursor: pointer;
+        }
+      }
+
       &:hover {
         .talk-title {
           opacity: 1;
@@ -722,4 +1191,31 @@ const onContextMenuAvatar=(e:any,item:any)=>{
     }
   }
 }
+
+.talk-read-list-detail {
+  width: 341px;
+  padding: 0 14px;
+
+  .talk-read-list {
+    .talk-read-list-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 10px;
+      padding: 10px 0;
+      border-bottom: 1px solid #f1f1f1;
+
+      .talk-read-list-item-info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+
+        span {
+        }
+      }
+    }
+  }
+}
 </style>

src/views/message/inner/panel/PanelHeader.vue

@@ -19,7 +19,7 @@ defineProps({
     type: Boolean,
     default: false
   },
-  avatar:{
+  avatar: {
     type: String,
     default: ''
   },
@@ -46,19 +46,22 @@ const onSetMenu = () => {
       />
     </div> -->
     <div class="flex items-center">
-      <avatarModule class="mr-10px"   :mode="dialogueStore.talk.talk_type"
+      <avatarModule
-              :avatar="avatar"
+        class="mr-10px"
-              :groupType="dialogueStore.talk?.group_type"
+        :mode="dialogueStore.talk.talk_type"
-              :userName="username" :customStyle="{width:'42px',height:'42px'}"></avatarModule>
+        :avatar="avatar"
+        :groupType="dialogueStore.talk?.group_type"
+        :userName="username"
+        :customStyle="{ width: '42px', height: '42px' }"
+      ></avatarModule>
       <div class="module left-module">
-      <!-- <span class="tag" :class="{ red: type == 1 }">
+        <!-- <span class="tag" :class="{ red: type == 1 }">
         {{ type == 1 ? '好友' : '群聊' }}
       </span> -->
-      <span class="nickname">{{ username }}</span>
+        <span class="nickname">{{ username }}</span>
-      <span class="num" v-show="type == 2 && num">({{ num }})</span>
+        <span class="num" v-show="type == 2 && num">({{ num }})</span>
+      </div>
     </div>
-    </div>
-  
 
     <div class="module center-module" v-if="type == 1">
       <p class="online">
@@ -80,8 +83,13 @@ const onSetMenu = () => {
         :size="18"
         class="icon"
         @click="emit('evnet', 'group')"
+        v-show="!dialogueStore.isDismiss && !dialogueStore.isQuit"
       >
-        <img style="width: 20px; height: 20px;" src="@/assets/image/chatList/chat-settings.png" alt="" />
+        <img
+          style="width: 20px; height: 20px;"
+          src="@/assets/image/chatList/chat-settings.png"
+          alt=""
+        />
       </n-icon>
     </div>
   </header>
@@ -156,7 +164,7 @@ const onSetMenu = () => {
       text-align: center;
 
       &.color {
-        color: #462AA0;
+        color: #462aa0;
       }
 
       .online-status {
@@ -168,7 +176,7 @@ const onSetMenu = () => {
         vertical-align: middle;
         border-radius: 50%;
         position: relative;
-        background-color: #462AA0;
+        background-color: #462aa0;
         margin-right: 5px;
 
         &:after {
@@ -177,7 +185,7 @@ const onSetMenu = () => {
           left: -1px;
           width: 100%;
           height: 100%;
-          border: 1px solid #462AA0;
+          border: 1px solid #462aa0;
           border-radius: 50%;
           -webkit-animation: antStatusProcessing 1.2s ease-in-out infinite;
           animation: antStatusProcessing 1.2s ease-in-out infinite;