处理解散群聊、退出群聊按钮的可视权限；使用naiveUI的infiniteScroll组件代替overflowY，并用自带的load事件代替v-loadmore指令，重新整理复用的搜索列表组件，整理传参、数据处理等，解决参数混乱、数据处理混乱问题

components.d.ts

@@ -62,6 +62,7 @@ declare module 'vue' {
     NotificationApi: typeof import('./src/components/common/NotificationApi.vue')['default']
     NPopover: typeof import('naive-ui')['NPopover']
     NRadio: typeof import('naive-ui')['NRadio']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpin: typeof import('naive-ui')['NSpin']
     NTag: typeof import('naive-ui')['NTag']
     NVirtualList: typeof import('naive-ui')['NVirtualList']

src/components/group/GroupPanel.vue

@@ -663,7 +663,10 @@ const handleEditGroupNameConfirm = () => {
           清空聊天记录
         </n-button>
         <n-button
-          v-if="isAdmin || isLeader"
+          v-if="
+            (isAdmin || isLeader) &&
+            (state.detail.group_type === 1 || state.detail.group_type === 3)
+          "
           class="btn"
           type="error"
           ghost
@@ -671,7 +674,13 @@ const handleEditGroupNameConfirm = () => {
         >
           解散该群
         </n-button>
-        <n-button class="btn" type="error" ghost @click="showChatSettingOperateModal('quit')">
+        <n-button
+          class="btn"
+          type="error"
+          ghost
+          @click="showChatSettingOperateModal('quit')"
+          v-if="state.detail.group_type === 1 || state.detail.group_type === 3"
+        >
           退出群聊
         </n-button>
       </div>

src/components/search/searchList.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="search-list">
+    <n-infinite-scroll
+      :style="{ maxHeight: props.searchResultMaxHeight }"
+      @load="doLoadMore"
+    >
       <div class="search-result">
         <div class="search-result-list">
           <div
@@ -55,6 +59,7 @@
           </div>
         </div>
       </div>
+    </n-infinite-scroll>
     <!-- <ZPaging
       ref="zPaging"
       :show-scrollbar="false"
@@ -131,6 +136,7 @@
 // const zPaging = ref()
 // useZPaging(zPaging)
 
+import { NInfiniteScroll } from 'naive-ui'
 import searchItem from './searchItem.vue'
 import { ref, reactive, defineEmits, defineProps, onMounted, watch } from 'vue'
 
@@ -138,8 +144,7 @@ const emits = defineEmits([
   'toMoreResultPage',
   'lastIdChange',
   'clickSearchItem',
-  'clickStayItemChange',
+  'clickStayItemChange'
-  'doLoadMore'
 ])
 
 const state = reactive({
@@ -148,7 +153,9 @@ const state = reactive({
   searchResult: null, //搜索结果
   pageNum: 1, //当前请求数据页数
   uid: 12303, //当前用户id
-  clickStayItem: '' //点击停留的item
+  clickStayItem: '', //点击停留的item
+  hasMore: true, //是否还有更多数据
+  loading: false //加载锁
 })
 
 const props = defineProps({
@@ -190,7 +197,11 @@ const props = defineProps({
   useClickStay: {
     type: Boolean,
     default: false
-  } //是否使用点击停留样式
+  }, //是否使用点击停留样式
+  searchResultMaxHeight: {
+    type: String,
+    default: '677px'
+  } //搜索结果最大高度
 })
 
 onMounted(() => {
@@ -212,9 +223,12 @@ watch(
 watch(
   () => props.searchText,
   (newVal, oldVal) => {
-    queryAllSearch()
+    //重置点击停留列表项
     state.clickStayItem = ''
     emits('clickStayItemChange', state.clickStayItem)
+    //重置搜索条件
+    emits('lastIdChange', 0, 0, 0, '', '')
+    queryAllSearch()
   }
 )
 
@@ -223,15 +237,11 @@ const inputSearchText = (e) => {
   if (e.trim() != state.searchText.trim()) {
     state.pageNum = 1
     state.searchResult = null // 清空搜索结果
-    emits('lastIdChange', 0, 0, 0, '', '')
   }
   state.searchText = e.trim()
   if (!e.trim()) {
     state.searchResult = null // 清空搜索结果
-    emits('lastIdChange', 0, 0, 0, '', '')
   }
-  // zPaging.value?.reload()
-  queryAllSearch()
 }
 
 // ES搜索聊天记录-主页搜索什么都有、指定用户、指定群、群与用户概览
@@ -354,6 +364,11 @@ const queryAllSearch = (doClearSearchResult) => {
               total = data.group_record_count
             }
           }
+          if (total < props.searchResultPageSize) {
+            state.hasMore = false
+          } else {
+            state.hasMore = true
+          }
           // zPaging.value?.completeByTotal([data], total)
         } else {
           state.searchResult = data
@@ -383,6 +398,7 @@ const queryAllSearch = (doClearSearchResult) => {
       // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
     }
   })
+  return resp
 }
 
 //点击取消搜索
@@ -514,13 +530,15 @@ const clickSearchItem = (searchResultKey, searchItem) => {
 
 //加载更多数据
 const doLoadMore = (doClearSearchResult) => {
-  queryAllSearch(doClearSearchResult)
+  if (!state.hasMore || state.loading) {
+    return
   }
-
+  state.loading = true
-// 暴露doLoadMore方法给父组件
+  queryAllSearch(doClearSearchResult)
-defineExpose({
+    .finally(() => {
-  doLoadMore
+      state.loading = false
     })
+}
 </script>
 <style lang="scss" scoped>
 .search-list {

src/views/message/inner/IndexSider.vue

@@ -254,7 +254,18 @@ const state = reactive({
   searchRecordText: '', // 搜索聊天记录文本
   ServeQueryTalkRecordParams: '', // 搜索聊天记录参数
   ServeQueryTalkRecordDetailParams: '', // 搜索聊天记录详情参数
-  isShowSearchRecordDetailInfo: false // 是否显示搜索聊天记录详情
+  isShowSearchRecordDetailInfo: false, // 是否显示搜索聊天记录详情
+  // 拆分 searchList 和 searchDetailList 独立状态
+  searchList: {
+    searchText: '',
+    apiParams: '',
+    lastId: undefined as any
+  },
+  searchDetailList: {
+    searchText: '',
+    apiParams: '',
+    lastId: undefined as any
+  }
 })
 
 const items = computed((): ISession[] => {
@@ -303,22 +314,29 @@ watch(
   }
 )
 
-// watch(
+// 监听搜索关键字变化，重置所有相关状态
-//   () => state.searchRecordText,
+watch(
-//   (newValue, oldValue) => {
+  () => state.searchRecordText,
-//     console.log(newValue, 'newValue')
+  (newVal, oldVal) => {
-//     state.ServeQueryTalkRecordParams = encodeURIComponent(
+    // 重置左侧
-//       JSON.stringify({
+    state.searchList.searchText = newVal
-//         talk_type: 0, //1私聊2群聊
+    state.searchList.apiParams = encodeURIComponent(JSON.stringify({
-//         receiver_id: 0, //查详情的时候需传入
+      talk_type: 0,
-//         last_group_id: 0, //最后一条群id
+      receiver_id: 0,
-//         last_member_id: 0, //最后一条用户id
+      last_group_id: 0,
-//         last_receiver_user_name: '', //最后一条用户名
+      last_member_id: 0,
-//         last_receiver_group_name: '' //最后一条群名
+      last_receiver_user_name: '',
-//       })
+      last_receiver_group_name: ''
-//     )
+    }))
-//   }
+    state.searchList.lastId = undefined
-// )
+    // 重置右侧
+    state.searchDetailList.searchText = newVal
+    state.searchDetailList.apiParams = ''
+    state.searchDetailList.lastId = undefined
+    // 关闭右侧详情
+    state.isShowSearchRecordDetailInfo = false
+  }
+)
 
 // 列表加载状态
 const loadStatus = computed(() => talkStore.loadStatus)
@@ -558,16 +576,19 @@ const handleClickSearchItem = (searchText, searchResultKey, talk_type, receiver_
   const result = JSON.parse(decodeURIComponent(res))
   console.log(result)
   if (searchResultKey === 'general_infos') {
-    state.ServeQueryTalkRecordDetailParams = encodeURIComponent(
+    // 先清空右侧
-      JSON.stringify({
+    state.isShowSearchRecordDetailInfo = false
-        last_group_id: 0, //最后一条群id
+    state.searchDetailList.apiParams = encodeURIComponent(JSON.stringify({
-        last_member_id: 0, //最后一条用户id
+      last_group_id: 0,
-        receiver_id: receiver_id, //查详情的时候需传入
+      last_member_id: 0,
-        talk_type: talk_type //1私聊2群聊
+      receiver_id: receiver_id,
-      })
+      talk_type: talk_type
-    )
+    }))
+    state.searchDetailList.searchText = state.searchRecordText
+    state.searchDetailList.lastId = undefined
+    // 再显示
     nextTick(() => {
-      searchDetailListRef.value?.doLoadMore(true)
+      state.isShowSearchRecordDetailInfo = true
     })
   }
 }
@@ -586,52 +607,20 @@ const searchListRef = ref()
 // 定义搜索详情列表组件的ref
 const searchDetailListRef = ref()
 
-//搜索聊天记录列表加载更多
+// lastIdChange 事件区分来源
-const loadMoreRecordList = () => {
+const handleSearchListLastIdChange = (last_id, last_group_id, last_member_id, last_receiver_user_name, last_receiver_group_name) => {
-  searchListRef.value?.doLoadMore()
+  state.searchList.lastId = { last_id, last_group_id, last_member_id, last_receiver_user_name, last_receiver_group_name }
+  state.searchList.apiParams = encodeURIComponent(JSON.stringify({
+    ...JSON.parse(decodeURIComponent(state.searchList.apiParams)),
+    last_id, last_group_id, last_member_id, last_receiver_user_name, last_receiver_group_name
+  }))
 }
-
+const handleSearchDetailListLastIdChange = (last_id, last_group_id, last_member_id) => {
-// 搜索聊天记录详情列表加载更多
+  state.searchDetailList.lastId = { last_id, last_group_id, last_member_id }
-const loadMoreRecordDetail = () => {
+  state.searchDetailList.apiParams = encodeURIComponent(JSON.stringify({
-  searchDetailListRef.value?.doLoadMore()
+    ...JSON.parse(decodeURIComponent(state.searchDetailList.apiParams)),
-}
+    last_id, last_group_id, last_member_id
-
+  }))
-const handleMoreRecordLastIdChange = (
-  last_id,
-  last_group_id,
-  last_member_id,
-  last_receiver_user_name,
-  last_receiver_group_name
-) => {
-  let idChanges = {
-    last_id,
-    last_group_id,
-    last_member_id,
-    last_receiver_user_name,
-    last_receiver_group_name
-  }
-  state.ServeQueryTalkRecordParams = encodeURIComponent(
-    JSON.stringify(
-      Object.assign({}, JSON.parse(decodeURIComponent(state.ServeQueryTalkRecordParams)), idChanges)
-    )
-  )
-}
-
-const handleRecordDetailLastIdChange = (last_id, last_group_id, last_member_id) => {
-  let idChanges = {
-    last_id,
-    last_group_id,
-    last_member_id
-  }
-  state.ServeQueryTalkRecordDetailParams = encodeURIComponent(
-    JSON.stringify(
-      Object.assign(
-        {},
-        JSON.parse(decodeURIComponent(state.ServeQueryTalkRecordDetailParams)),
-        idChanges
-      )
-    )
-  )
 }
 </script>
 
@@ -653,7 +642,7 @@ const handleRecordDetailLastIdChange = (last_id, last_group_id, last_member_id)
       <n-dropdown
         trigger="click"
         :options="state.chatSearchOptions"
-        style="width: 248px; height: 677px; overflow-y: scroll;"
+        style="width: 248px; height: 677px;"
       >
         <n-input
           placeholder="搜索好友 / 群聊"
@@ -865,34 +854,36 @@ const handleRecordDetailLastIdChange = (last_id, last_group_id, last_member_id)
             </n-input>
           </div>
           <div class="search-record-card" v-if="state.searchRecordText">
-            <div class="search-record-list" v-loadmore="loadMoreRecordList">
+            <div class="search-record-list">
               <chatAppSearchList
                 ref="searchListRef"
                 :searchResultPageSize="10"
                 :listLimit="false"
                 :apiRequest="ServeQueryTalkRecord"
-                :apiParams="state.ServeQueryTalkRecordParams"
+                :apiParams="state.searchList.apiParams"
-                :searchText="state.searchRecordText"
+                :searchText="state.searchList.searchText"
                 :isPagination="true"
                 searchResultKey="general_infos"
                 @clickSearchItem="handleClickSearchItem"
                 :useClickStay="true"
                 @clickStayItemChange="handleClickStayItemChange"
-                @lastIdChange="handleMoreRecordLastIdChange"
+                @lastIdChange="handleSearchListLastIdChange"
+                :searchResultMaxHeight="'517px'"
               ></chatAppSearchList>
             </div>
-            <div class="search-record-detail" v-loadmore="loadMoreRecordDetail">
+            <div class="search-record-detail">
               <chatAppSearchList
                 ref="searchDetailListRef"
                 v-if="state.isShowSearchRecordDetailInfo"
                 :searchResultPageSize="10"
                 :listLimit="false"
                 :apiRequest="ServeQueryTalkRecord"
-                :apiParams="state.ServeQueryTalkRecordDetailParams"
+                :apiParams="state.searchDetailList.apiParams"
-                :searchText="state.searchRecordText"
+                :searchText="state.searchDetailList.searchText"
                 :isPagination="true"
                 :searchRecordDetail="true"
-                @lastIdChange="handleRecordDetailLastIdChange"
+                @lastIdChange="handleSearchDetailListLastIdChange"
+                :searchResultMaxHeight="'517px'"
               ></chatAppSearchList>
             </div>
           </div>
@@ -1087,13 +1078,11 @@ html[theme-mode='dark'] {
       width: 260px;
       height: 517px;
       border: 1px solid #efeff5;
-      overflow-y: scroll;
     }
     .search-record-detail {
       width: 578px;
       height: 517px;
       border: 1px solid #efeff5;
-      overflow-y: scroll;
     }
   }
   .search-record-empty {