新增历史聊天记录查询弹窗；接入erp的v-loadmore指令，用于实现PC端的触底加载更多;继续优化搜索模块的联动逻辑

env/.env.test

@@ -3,6 +3,8 @@ ENV = 'development'
 VITE_BASE=/
 VUE_APP_PREVIEW=false
 VITE_BASE_API=http://172.16.100.93:8503
+# VITE_BASE_API=http://192.168.88.21:9503
 VITE_EPR_BASEURL=http://114.218.158.24:9020
 VITE_SOCKET_API=ws://172.16.100.93:8504
+# VITE_SOCKET_API=ws://192.168.88.21:9504
 VUE_APP_WEBSITE_NAME="Lumen IM"

src/components/group/GroupPanel.vue

@@ -17,7 +17,7 @@ import customModal from '@/components/common/customModal.vue'
 const userStore = useUserStore()
 const { showUserInfoModal } = useInject()
 
-const emit = defineEmits(['close', 'to-talk'])
+const emit = defineEmits(['close', 'to-talk', 'handleSearchRecordByConditionModalShow'])
 const props = defineProps({
   gid: {
     type: Number,
@@ -200,6 +200,10 @@ const showChatSettingOperateModal = (type: string) => {
       break
   }
 }
+
+const showSearchRecordByConditionModal = () => {
+  emit('handleSearchRecordByConditionModalShow', true)
+}
 </script>
 <template>
   <section class="el-container is-vertical section">
@@ -220,7 +224,7 @@ const showChatSettingOperateModal = (type: string) => {
 
     <main class="el-main main me-scrollbar me-scrollbar-thumb">
       <div class="info-box" v-if="talkType === 1">
-        <div class="b-box b-box-bottomBorder">
+        <div class="b-box b-box-bottomBorder" @click="showSearchRecordByConditionModal">
           <div class="block">
             <div class="title">查找聊天记录</div>
             <img class="icon-right" src="@/assets/image/icon/arrow-right-grey.png" alt="" />

src/components/search/searchItem.vue

@@ -3,7 +3,10 @@
     class="search-item"
     :class="props?.conditionType ? 'search-item-condition' : ''"
     v-if="resultName"
-    :style="props.searchResultKey === 'talk_record_infos_receiver' ? 'margin: 12px 0 0' : ''"
+    :style="{
+      'margin': props.searchResultKey === 'talk_record_infos_receiver' ? '12px 0 0' : '',
+      'background-color': props.isClickStay ? '#EEE9F8' : ''
+    }"
   >
     <div class="search-item-avatar">
       <avatarModule
@@ -101,7 +104,11 @@ const props = defineProps({
   conditionType: {
     type: Number,
     default: 0
-  } //搜索类型
+  }, //搜索类型
+  isClickStay: {
+    type: Boolean,
+    default: false
+  } //是否点击停留
 })
 // 映射表-查找对应结构下的属性名
 const keyMapping = {
@@ -259,9 +266,9 @@ const resultDetail = computed(() => {
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  padding: 11px 0 12px;
+  padding: 11px 10px 12px;
-  border-bottom: 1px solid #f8f8f8;
   cursor: pointer;
+  position: relative;
 
   .search-item-avatar{
     position: relative;
@@ -332,6 +339,17 @@ const resultDetail = computed(() => {
     }
   }
 }
+.search-item::after{
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1px;
+  position: absolute;
+  bottom: 0;
+  left: 10px;
+  width: calc(100% - 20px);
+  background-color: #f8f8f8;
+}
 .search-item-condition {
   border: 0;
 }

src/components/search/searchList.vue

@@ -34,6 +34,11 @@
                   :searchItem="item"
                   :searchText="state.searchText"
                   :searchRecordDetail="props.searchRecordDetail"
+                  :isClickStay="
+                    props.useClickStay &&
+                    typeof state.clickStayItem === 'string' &&
+                    state.clickStayItem === `${item.talk_type}_${item.receiver_id}`
+                  "
                 ></searchItem>
               </div>
             </div>
@@ -129,14 +134,21 @@
 import searchItem from './searchItem.vue'
 import { ref, reactive, defineEmits, defineProps, onMounted, watch } from 'vue'
 
-const emits = defineEmits(['toMoreResultPage', 'lastIdChange', 'clickSearchItem'])
+const emits = defineEmits([
+  'toMoreResultPage',
+  'lastIdChange',
+  'clickSearchItem',
+  'clickStayItemChange',
+  'doLoadMore'
+])
 
 const state = reactive({
   searchText: '', //搜索内容
   searchResultList: [], //搜素结果列表
   searchResult: null, //搜索结果
   pageNum: 1, //当前请求数据页数
-  uid: 1496 //当前用户id
+  uid: 12303, //当前用户id
+  clickStayItem: '' //点击停留的item
 })
 
 const props = defineProps({
@@ -174,23 +186,35 @@ const props = defineProps({
   hideFirstRecord: {
     type: Boolean,
     default: false
-  } //是否隐藏前缀及搜索群/用户主体信息
+  }, //是否隐藏前缀及搜索群/用户主体信息
+  useClickStay: {
+    type: Boolean,
+    default: false
+  } //是否使用点击停留样式
 })
 
 onMounted(() => {
   if (props.searchText) {
     state.searchText = props.searchText
-    queryAllSearch(1, 10)
+    queryAllSearch()
   }
 })
 
+// 监听每页数量变化
 watch(
-  () => [props.searchResultPageSize, props.searchText],
+  () => props.searchResultPageSize,
-  ([newPageSize, newText], [oldPageSize, oldText]) => {
+  (newVal, oldVal) => {
-    console.log(newPageSize, newText, oldPageSize, oldText)
+    queryAllSearch()
-    if (newPageSize !== oldPageSize || newText !== oldText) {
+  }
-      queryAllSearch(1, newPageSize)
+)
-    }
+
+// 监听搜索文本变化
+watch(
+  () => props.searchText,
+  (newVal, oldVal) => {
+    queryAllSearch()
+    state.clickStayItem = ''
+    emits('clickStayItemChange', state.clickStayItem)
   }
 )
 
@@ -199,380 +223,166 @@ const inputSearchText = (e) => {
   if (e.trim() != state.searchText.trim()) {
     state.pageNum = 1
     state.searchResult = null // 清空搜索结果
-    emits('lastIdChange', 0, 0, 0)
+    emits('lastIdChange', 0, 0, 0, '', '')
   }
   state.searchText = e.trim()
   if (!e.trim()) {
     state.searchResult = null // 清空搜索结果
-    emits('lastIdChange', 0, 0, 0)
+    emits('lastIdChange', 0, 0, 0, '', '')
   }
   // zPaging.value?.reload()
+  queryAllSearch()
 }
 
 // ES搜索聊天记录-主页搜索什么都有、指定用户、指定群、群与用户概览
-const queryAllSearch = (pageNum, searchResultPageSize) => {
+const queryAllSearch = () => {
   let params = {
     key: state.searchText, //关键字
-    size: searchResultPageSize
+    size: props.searchResultPageSize
   }
   if (props.apiParams) {
     let apiParams = JSON.parse(decodeURIComponent(props.apiParams))
     params = Object.assign({}, params, apiParams)
   }
-  const data = {
-    user_infos: [
-      {
-        id: 127,
-        mobile: '17706200252',
-        nickname: '测试-王溢韬',
-        avatar:
-          'https://dci-file-new.bj.bcebos.com/fonchain-main/test/runtime/image/avatar/40/b8ed6fea-6662-416d-8bb3-1fd8a8197061.jpg',
-        created_at: '2025-03-28 11:33:13',
-        erp_user_id: 18282
-      },
-      {
-        id: 103,
-        mobile: '13814969538',
-        nickname: '王静测试',
-        avatar: '',
-        created_at: '2025-03-27 14:44:23',
-        erp_user_id: 2639
-      },
-      {
-        id: 57,
-        mobile: '13862027511',
-        nickname: '王西',
-        avatar:
-          'https://dci-file-new.bj.bcebos.com/fonchain-main/test/runtime/image/avatar/40/b8ed6fea-6662-416d-8bb3-1fd8a8197061.jpg',
-        created_at: '2025-03-27 14:44:23',
-        erp_user_id: 18229
-      }
-    ],
-    user_count: 9,
-    group_infos: null,
-    group_member_infos: [
-      {
-        id: 79,
-        group_id: 1,
-        group_name: '泰丰国际',
-        group_type: 4,
-        group_avatar: '',
-        group_num: 103,
-        user_id: 103,
-        user_name: '王静',
-        user_card: '',
-        created_at: '2025-03-27 14:44:24'
-      },
-      {
-        id: 55,
-        group_id: 1,
-        group_name: '泰丰国际',
-        group_type: 4,
-        group_avatar: '',
-        group_num: 103,
-        user_id: 57,
-        user_name: '王西',
-        user_card: '',
-        created_at: '2025-03-27 14:44:24'
-      },
-      {
-        id: 35,
-        group_id: 1,
-        group_name: '泰丰国际',
-        group_type: 4,
-        group_avatar: '',
-        group_num: 103,
-        user_id: 37,
-        user_name: '王雯婷',
-        user_card: '',
-        created_at: '2025-03-27 14:44:24'
-      }
-    ],
-    group_count: 9,
-    general_infos: [
-      {
-        receiver_id: 40,
-        receiver_name: '孙志远',
-        receiver_avatar:
-          'https://dci-file-new.bj.bcebos.com/fonchain-main/test/runtime/image/avatar/40/b8ed6fea-6662-416d-8bb3-1fd8a8197061.jpg',
-        group_num: 0,
-        talk_type: 1,
-        count: 3,
-        group_type: 0
-      },
-      {
-        receiver_id: 2,
-        receiver_name: '吹牛个人群',
-        receiver_avatar: '',
-        group_num: 4,
-        talk_type: 2,
-        count: 2,
-        group_type: 3
-      },
-      {
-        receiver_id: 3,
-        receiver_name: '丰链30自己人',
-        receiver_avatar:
-          'https://e-cdn.fontree.cn/fonchain-main/prod/image/default/fonchain-chat/3d273326-d2a5-4ad4-a974-32d020c6b3f9.jpg?width=1080&height=2412',
-        group_num: 8,
-        talk_type: 2,
-        count: 2,
-        group_type: 3
-      }
-    ],
-    record_count: 3
-  }
-  if ((data.user_infos || []).length > 0) {
-    ;(data.user_infos || []).forEach((item) => {
-      item.group_type = 0
-    })
-  }
-  if ((data.group_infos || []).length > 0) {
-    ;(data.group_infos || []).forEach((item) => {
-      item.group_type = item.type
-      item.groupTempType = 'group_infos'
-    })
-  }
-  if ((data.group_member_infos || []).length > 0) {
-    ;(data.group_member_infos || []).forEach((item) => {
-      item.groupTempType = 'group_member_infos'
-    })
-  }
-  if ((data.talk_record_infos || []).length > 0) {
-    let receiverInfo = JSON.parse(JSON.stringify(data.talk_record_infos[0]))
-    if (receiverInfo.talk_type === 1) {
-      //单聊才需此判断
-      if (receiverInfo.user_id === state.uid) {
-        //发送人是自己，接收人不需要变
-      }
-      if (receiverInfo.receiver_id === state.uid) {
-        //接收人是自己，这里需要变成对方
-        let temp_id = receiverInfo.receiver_id
-        let temp_name = receiverInfo.receiver_name
-        let temp_avatar = receiverInfo.receiver_avatar
-        receiverInfo.receiver_id = receiverInfo.user_id
-        receiverInfo.receiver_name = receiverInfo.user_name
-        receiverInfo.receiver_avatar = receiverInfo.user_avatar
-        receiverInfo.user_id = temp_id
-        receiverInfo.user_name = temp_name
-        receiverInfo.user_avatar = temp_avatar
-      }
-    }
-    state.first_talk_record_infos = Object.assign({}, state.first_talk_record_infos, receiverInfo)
-    ;(data.talk_record_infos || []).forEach((item) => {
-      item.group_type = 0
-    })
-  }
 
-  let tempGeneral_infos = Array.isArray(data.general_infos)
+  const resp = props.apiRequest(params)
-    ? [...data.general_infos]
+  resp.then(({ code, data }) => {
-    : data.general_infos
+    console.log(data)
-  delete data.general_infos
+    if (code == 200) {
-  data.combinedGroup = (data.group_infos || []).concat(data.group_member_infos || [])
+      if ((data.user_infos || []).length > 0) {
-  data.general_infos = tempGeneral_infos
+        ;(data.user_infos || []).forEach((item) => {
+          item.group_type = 0
+        })
+      }
+      if ((data.group_infos || []).length > 0) {
+        ;(data.group_infos || []).forEach((item) => {
+          item.group_type = item.type
+          item.groupTempType = 'group_infos'
+        })
+      }
+      if ((data.group_member_infos || []).length > 0) {
+        ;(data.group_member_infos || []).forEach((item) => {
+          item.groupTempType = 'group_member_infos'
+        })
+      }
+      if ((data.talk_record_infos || []).length > 0) {
+        let receiverInfo = JSON.parse(JSON.stringify(data.talk_record_infos[0]))
+        if (receiverInfo.talk_type === 1) {
+          //单聊才需此判断
+          if (receiverInfo.user_id === state.uid) {
+            //发送人是自己，接收人不需要变
+          }
+          if (receiverInfo.receiver_id === state.uid) {
+            //接收人是自己，这里需要变成对方
+            let temp_id = receiverInfo.receiver_id
+            let temp_name = receiverInfo.receiver_name
+            let temp_avatar = receiverInfo.receiver_avatar
+            receiverInfo.receiver_id = receiverInfo.user_id
+            receiverInfo.receiver_name = receiverInfo.user_name
+            receiverInfo.receiver_avatar = receiverInfo.user_avatar
+            receiverInfo.user_id = temp_id
+            receiverInfo.user_name = temp_name
+            receiverInfo.user_avatar = temp_avatar
+          }
+        }
+        state.first_talk_record_infos = Object.assign(
+          {},
+          state.first_talk_record_infos,
+          receiverInfo
+        )
+        ;(data.talk_record_infos || []).forEach((item) => {
+          item.group_type = 0
+        })
+      }
 
-  // 检查数据是否为空
+      let tempGeneral_infos = Array.isArray(data.general_infos)
-  let isEmpty = true
+        ? [...data.general_infos]
-  let dataKeys = Object.keys(data)
+        : data.general_infos
-  let paginationKey = ''
+      delete data.general_infos
-  dataKeys.forEach((item) => {
+      data.combinedGroup = (data.group_infos || []).concat(data.group_member_infos || [])
-    if (Array.isArray(data[item]) && data[item].length > 0) {
+      data.general_infos = tempGeneral_infos
-      paginationKey = item
+
-      isEmpty = false
+      // 检查数据是否为空
+      let isEmpty = true
+      let dataKeys = Object.keys(data)
+      let paginationKey = ''
+      dataKeys.forEach((item) => {
+        if (Array.isArray(data[item]) && data[item].length > 0) {
+          paginationKey = item
+          isEmpty = false
+        }
+      })
+
+      if (isEmpty) {
+        if (state.pageNum === 1) {
+          // 第一页请求且为空，清空结果
+          state.searchResult = null
+          // zPaging.value?.complete([])
+        } else {
+          // 加载更多且为空，保持原列表不变
+          // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
+        }
+      } else {
+        if (props.isPagination) {
+          if (state.pageNum === 1) {
+            // 第一页请求，直接设置新数据
+            state.searchResult = data
+          } else {
+            // 加载更多，合并数据
+            if (
+              paginationKey &&
+              Array.isArray((state?.searchResult && state?.searchResult[paginationKey]) || [])
+            ) {
+              data[paginationKey] = state.searchResult[paginationKey].concat(data[paginationKey])
+            }
+            state.searchResult = data
+          }
+
+          emits(
+            'lastIdChange',
+            data.last_id,
+            data.last_group_id,
+            data.last_member_id,
+            data.last_receiver_user_name,
+            data.last_receiver_group_name
+          )
+          let total = data.count
+          if (props.searchRecordDetail) {
+            if (state?.first_talk_record_infos?.talk_type === 1) {
+              total = data.user_record_count
+            } else if (state?.first_talk_record_infos?.talk_type === 2) {
+              total = data.group_record_count
+            }
+          }
+          // zPaging.value?.completeByTotal([data], total)
+        } else {
+          state.searchResult = data
+          // zPaging.value?.complete([data])
+        }
+      }
+      state.pageNum = state.pageNum + 1
+    } else {
+      if (state.pageNum === 1) {
+        // 第一页请求失败，清空结果
+        state.searchResult = null
+        // zPaging.value?.complete([])
+      } else {
+        // 加载更多失败，保持原列表不变
+        // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
+      }
     }
   })
 
-  if (isEmpty) {
+  resp.catch(() => {
-    if (pageNum === 1) {
+    if (state.pageNum === 1) {
-      // 第一页请求且为空，清空结果
+      // 第一页请求异常，清空结果
       state.searchResult = null
       // zPaging.value?.complete([])
     } else {
-      // 加载更多且为空，保持原列表不变
+      // 加载更多异常，保持原列表不变
       // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
     }
-  } else {
+  })
-    if (props.isPagination) {
-      if (pageNum === 1) {
-        // 第一页请求，直接设置新数据
-        state.searchResult = data
-      } else {
-        // 加载更多，合并数据
-        if (
-          paginationKey &&
-          Array.isArray((state?.searchResult && state?.searchResult[paginationKey]) || [])
-        ) {
-          data[paginationKey] = state.searchResult[paginationKey].concat(data[paginationKey])
-        }
-        state.searchResult = data
-      }
-
-      emits(
-        'lastIdChange',
-        data.last_id,
-        data.last_group_id,
-        data.last_member_id,
-        data.last_receiver_user_name,
-        data.last_receiver_group_name
-      )
-      let total = data.count
-      if (props.searchRecordDetail) {
-        if (state?.first_talk_record_infos?.talk_type === 1) {
-          total = data.user_record_count
-        } else if (state?.first_talk_record_infos?.talk_type === 2) {
-          total = data.group_record_count
-        }
-      }
-      // zPaging.value?.completeByTotal([data], total)
-    } else {
-      state.searchResult = data
-      // zPaging.value?.complete([data])
-    }
-  }
-
-  // const resp = props.apiRequest(params)
-  // resp.then(({ code, data }) => {
-  //   console.log(data)
-  //   if (code == 200) {
-  //     if ((data.user_infos || []).length > 0) {
-  //       ;(data.user_infos || []).forEach((item) => {
-  //         item.group_type = 0
-  //       })
-  //     }
-  //     if ((data.group_infos || []).length > 0) {
-  //       ;(data.group_infos || []).forEach((item) => {
-  //         item.group_type = item.type
-  //         item.groupTempType = 'group_infos'
-  //       })
-  //     }
-  //     if ((data.group_member_infos || []).length > 0) {
-  //       ;(data.group_member_infos || []).forEach((item) => {
-  //         item.groupTempType = 'group_member_infos'
-  //       })
-  //     }
-  //     if ((data.talk_record_infos || []).length > 0) {
-  //       let receiverInfo = JSON.parse(JSON.stringify(data.talk_record_infos[0]))
-  //       if (receiverInfo.talk_type === 1) {
-  //         //单聊才需此判断
-  //         if (receiverInfo.user_id === state.uid) {
-  //           //发送人是自己，接收人不需要变
-  //         }
-  //         if (receiverInfo.receiver_id === state.uid) {
-  //           //接收人是自己，这里需要变成对方
-  //           let temp_id = receiverInfo.receiver_id
-  //           let temp_name = receiverInfo.receiver_name
-  //           let temp_avatar = receiverInfo.receiver_avatar
-  //           receiverInfo.receiver_id = receiverInfo.user_id
-  //           receiverInfo.receiver_name = receiverInfo.user_name
-  //           receiverInfo.receiver_avatar = receiverInfo.user_avatar
-  //           receiverInfo.user_id = temp_id
-  //           receiverInfo.user_name = temp_name
-  //           receiverInfo.user_avatar = temp_avatar
-  //         }
-  //       }
-  //       state.first_talk_record_infos = Object.assign(
-  //         {},
-  //         state.first_talk_record_infos,
-  //         receiverInfo,
-  //       )
-  //       ;(data.talk_record_infos || []).forEach((item) => {
-  //         item.group_type = 0
-  //       })
-  //     }
-
-  //     let tempGeneral_infos = Array.isArray(data.general_infos)
-  //       ? [...data.general_infos]
-  //       : data.general_infos
-  //     delete data.general_infos
-  //     data.combinedGroup = (data.group_infos || []).concat(
-  //       data.group_member_infos || [],
-  //     )
-  //     data.general_infos = tempGeneral_infos
-
-  //     // 检查数据是否为空
-  //     let isEmpty = true
-  //     let dataKeys = Object.keys(data)
-  //     let paginationKey = ''
-  //     dataKeys.forEach((item) => {
-  //       if (Array.isArray(data[item]) && data[item].length > 0) {
-  //         paginationKey = item
-  //         isEmpty = false
-  //       }
-  //     })
-
-  //     if (isEmpty) {
-  //       if (pageNum === 1) {
-  //         // 第一页请求且为空，清空结果
-  //         state.searchResult = null
-  //         // zPaging.value?.complete([])
-  //       } else {
-  //         // 加载更多且为空，保持原列表不变
-  //         // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
-  //       }
-  //     } else {
-  //       if (props.isPagination) {
-  //         if (pageNum === 1) {
-  //           // 第一页请求，直接设置新数据
-  //           state.searchResult = data
-  //         } else {
-  //           // 加载更多，合并数据
-  //           if (
-  //             paginationKey &&
-  //             Array.isArray(
-  //               (state?.searchResult && state?.searchResult[paginationKey]) || [],
-  //             )
-  //           ) {
-  //             data[paginationKey] = state.searchResult[paginationKey].concat(
-  //               data[paginationKey],
-  //             )
-  //           }
-  //           state.searchResult = data
-  //         }
-
-  //         emits(
-  //           'lastIdChange',
-  //           data.last_id,
-  //           data.last_group_id,
-  //           data.last_member_id,
-  //           data.last_receiver_user_name,
-  //           data.last_receiver_group_name,
-  //         )
-  //         let total = data.count
-  //         if (props.searchRecordDetail) {
-  //           if (state?.first_talk_record_infos?.talk_type === 1) {
-  //             total = data.user_record_count
-  //           } else if (state?.first_talk_record_infos?.talk_type === 2) {
-  //             total = data.group_record_count
-  //           }
-  //         }
-  //         // zPaging.value?.completeByTotal([data], total)
-  //       } else {
-  //         state.searchResult = data
-  //         // zPaging.value?.complete([data])
-  //       }
-  //     }
-  //   } else {
-  //     if (pageNum === 1) {
-  //       // 第一页请求失败，清空结果
-  //       state.searchResult = null
-  //       // zPaging.value?.complete([])
-  //     } else {
-  //       // 加载更多失败，保持原列表不变
-  //       // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
-  //     }
-  //   }
-  // })
-
-  // resp.catch(() => {
-  //   if (pageNum === 1) {
-  //     // 第一页请求异常，清空结果
-  //     state.searchResult = null
-  //     // zPaging.value?.complete([])
-  //   } else {
-  //     // 加载更多异常，保持原列表不变
-  //     // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
-  //   }
-  // })
 }
 
 //点击取消搜索
@@ -659,6 +469,12 @@ const toMoreResultPage = (searchResultKey) => {
 //点击了搜索结果项
 const clickSearchItem = (searchResultKey, searchItem) => {
   console.log(searchResultKey, searchItem)
+  if (props.useClickStay) {
+    state.clickStayItem = searchItem.talk_type + '_' + searchItem.receiver_id
+  } else {
+    state.clickStayItem = ''
+  }
+  emits('clickStayItemChange', state.clickStayItem)
   let talk_type = searchItem.talk_type
   let receiver_id = searchItem.receiver_id
   if (searchResultKey === 'user_infos') {
@@ -695,6 +511,16 @@ const clickSearchItem = (searchResultKey, searchItem) => {
     encodeURIComponent(JSON.stringify(searchItem))
   )
 }
+
+//加载更多数据
+const doLoadMore = () => {
+  queryAllSearch()
+}
+
+// 暴露doLoadMore方法给父组件
+defineExpose({
+  doLoadMore
+})
 </script>
 <style lang="scss" scoped>
 .search-list {
@@ -717,7 +543,7 @@ const clickSearchItem = (searchResultKey, searchItem) => {
   }
   .search-result {
     width: 100%;
-    padding: 0 10px;
+    // padding: 0 10px;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -726,13 +552,13 @@ const clickSearchItem = (searchResultKey, searchItem) => {
 
     .search-result-list {
       width: 100%;
-      // padding: 0 9px;
+      // padding: 0 10px;
 
       .search-result-part {
         margin: 18px 0 0;
 
         .result-title {
-          padding: 0 0 5px;
+          padding: 0 10px 5px;
           border-bottom: 1px solid #f8f8f8;
           span {
             line-height: 20px;
@@ -740,7 +566,7 @@ const clickSearchItem = (searchResultKey, searchItem) => {
           }
         }
         .result-has-more {
-          padding: 10px 0;
+          padding: 10px;
           border-bottom: 1px solid #f8f8f8;
           cursor: pointer;
           span {

src/directive/index.ts

@@ -1,6 +1,6 @@
-import dropsize from './dropsize'
+import dropsize from './dropsize.js'
-import focus from './focus'
+import focus from './focus.js'
-import loading from './loading'
+import loading from './loading.js'
 
 const directives = {
   dropsize,

src/plugins/directive/index.js

@@ -0,0 +1,118 @@
+import { Local } from "@/utils/erpStorage.js";
+import {debounce} from 'lodash-es'
+import { setupDirective as setupCustomDirectives } from '@/directive/index.ts'
+// 缓存按钮权限列表的key
+const BTN_PERMISSION_KEY = 'ruleBtn';
+
+// 工具函数: 获取权限列表
+const getPermissionList = () => Local.get(BTN_PERMISSION_KEY) || [];
+
+// 工具函数: 安全地移除DOM元素
+const safeRemoveElement = (el) => {
+  el.style.display = 'none';
+  requestAnimationFrame(() => el.parentNode?.removeChild(el));
+};
+
+export default (app) => {
+  // 防抖函数
+  const directives = {
+    // 禁止输入空格
+    'no-space': {
+      mounted(el) {
+        const input = el.tagName === 'INPUT' ? el : el.querySelector('input');
+        if (!input) return;
+        const handleInput = debounce((e) => {
+          const value = e.target.value;
+          const trimmedValue = value.replace(/\s/g, '');
+          if (value !== trimmedValue) {
+            e.target.value = trimmedValue;
+            // 创建一次性的input事件
+            const inputEvent = new InputEvent('input', { bubbles: true });
+            e.target.dispatchEvent(inputEvent);
+          }
+        }, 100);
+
+        input.addEventListener('input', handleInput);
+
+        // 存储清理函数
+        el._cleanup = () => input.removeEventListener('input', handleInput);
+      },
+      unmounted(el) {
+        // 清理事件监听
+        el._cleanup?.();
+      }
+    },
+
+    // 上拉加载更多
+    'loadmore': {
+      mounted(el, binding) {
+        const handleScroll = debounce(() => {
+          const { scrollHeight, scrollTop, clientHeight } = el;
+          const threshold = 50; // 提前触发的距离
+          const isNearBottom = scrollHeight - scrollTop - clientHeight <= threshold;
+
+          if (isNearBottom && typeof binding.value === 'function') {
+            binding.value();
+          }
+        }, 200);
+
+        el.addEventListener('scroll', handleScroll, { passive: true });
+
+        el._cleanup = () => el.removeEventListener('scroll', handleScroll);
+      },
+      unmounted(el) {
+        el._cleanup?.();
+      }
+    },
+
+    // 按钮权限控制
+    'permission': {
+      mounted(el, binding) {
+        if (!binding.value) return;
+        const btnList = getPermissionList();
+        const hasPermission = btnList.includes(binding.value);
+
+        if (!hasPermission) {
+          safeRemoveElement(el);
+        }
+      }
+    }
+  };
+
+  // 注册指令
+  Object.entries(directives).forEach(([name, directive]) => {
+    app.directive(name, directive);
+  });
+
+  // 权限检查函数
+  const hasPermission = (permissions) => {
+    const permissionList = getPermissionList();
+    if (!permissionList.length) return false;
+
+    const requiredPermissions = Array.isArray(permissions) ? permissions : [permissions];
+    return requiredPermissions.some(permission => permissionList.includes(permission));
+  };
+  // 缓存代理以提高性能
+  // 注册全局权限检查方法
+  app.config.globalProperties.$hadRule = new Proxy(hasPermission, {
+    // 创建缓存Map
+    cache: new Map(),
+    // 代理函数调用
+    apply(target, thisArg, args) {
+      // 将参数序列化作为缓存key
+      const key = JSON.stringify(args);
+      // 如果缓存中存在，直接返回缓存结果
+      if (this.cache.has(key)) {
+        return this.cache.get(key);
+      }
+
+      // 如果缓存中不存在，执行原函数并缓存结果
+      const result = target.apply(thisArg, args);
+      this.cache.set(key, result);
+      return result;
+    }
+  });
+
+  // 注册 src/directive 里的 loading、dropsize、focus 等指令
+  setupCustomDirectives(app)
+};

src/plugins/index.ts

@@ -5,3 +5,8 @@ export * from './naive-ui'
 export * from './sms-lock'
 export * from './ws-socket'
 export * from './pinia'
+import directive from './directive'
+
+export function setupDirective(app) {
+  directive(app)
+}

src/utils/auth.js

@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b89642c979f5ab2d142ebbcb209ce7e7964c143edb27ba9be09900f4f4af311e8f5edee6f6b05af86d24daae9a9fd1d1cf686b1ac565663e192e2598c14c35470c9d760c4badd3a54f9c46c7b779684c7d0'
+  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b896fc262d304ff89c0c77d33d884b0d50cb245a5ce4e0a66c9b041b7859ba0c0c9d942cd23551c1e1259cc5b726b936bffd334ead575db2f7cfd9f3316b61487d115c4cf634d764124b986a7dc71dec603'
 }
 
 /**

src/views/message/inner/IndexContent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { reactive, computed, watch } from 'vue'
-import { NDrawer } from 'naive-ui'
+import { NDrawer, NCard } from 'naive-ui'
 import { useUserStore, useDialogueStore, useUploadsStore } from '@/store'
 import PanelHeader from './panel/PanelHeader.vue'
 import PanelContent from './panel/PanelContent.vue'
@@ -8,6 +8,7 @@ import PanelFooter from './panel/PanelFooter.vue'
 import GroupPanel from '@/components/group/GroupPanel.vue'
 import GroupNotice from '@/components/group/GroupNotice.vue'
 import UploadsModal from '@/components/base/UploadsModal.vue'
+import customModal from '@/components/common/customModal.vue'
 
 const userStore = useUserStore()
 const dialogueStore = useDialogueStore()
@@ -31,8 +32,14 @@ const talkParams = reactive({
 const state = reactive({
   // 是否显示群面板
   isShowGroupAside: false,
-
+  isShowGroupNotice: false,
-  isShowGroupNotice: false
+  isShowSearchRecordByConditionModal: false,//是否显示按条件搜索记录弹窗
+  customSearchRecordByConditionModalStyle: {
+    width: '997px',
+    height: '740px',
+    backgroundColor: '#F9F9FD'
+  },//按条件搜索记录弹窗样式
+  searchRecordByConditionText: ''//按条件搜索记录文本
 })
 
 const events = {
@@ -137,12 +144,123 @@ const onPanelHeaderEvent = (eventType: string) => {
       :gid="talkParams.receiver_id"
       @close="state.isShowGroupAside = false"
       :talkType="talkParams.type"
+      @handleSearchRecordByConditionModalShow="state.isShowSearchRecordByConditionModal = true"
     />
   </n-drawer>
+
+  <customModal
+    v-model:show="state.isShowSearchRecordByConditionModal"
+    title="与“{{ talkParams.username }}”的聊天记录"
+    :style="state.customSearchRecordByConditionModalStyle"
+    :customCloseBtn="true"
+    :closable="false"
+  >
+    <template #content>
+      <div class="search-record-modal-searchArea">
+        <n-card style="padding: 0 12px;">
+          <div class="search-record-input">
+            <span class="search-record-input-title">搜索</span>
+            <n-input
+              type="text"
+              v-model:value="state.searchRecordByConditionText"
+              placeholder="请输入"
+              clearable
+            >
+              <template #clear-icon>
+                <img src="@/assets/image/icon/close-btn-grey-line.png" alt="close" />
+              </template>
+            </n-input>
+          </div>
+          <div class="search-area-condition">
+            <span>文件</span>
+            <span>图片与视频</span>
+            <span>日期</span>
+            <span>群成员</span>
+          </div>
+        </n-card>
+      </div>
+      <div class="search-record-modal-content">
+        <n-card style="padding: 0 12px;">
+          <div class="search-record-card" v-if="state.searchRecordByConditionText">
+            
+          </div>
+          <div class="search-record-empty" v-if="!state.searchRecordByConditionText">
+            <img src="@/assets/image/chatList/search-empty.png" alt="" />
+            <span>无内容</span>
+          </div>
+        </n-card>
+      </div>
+    </template>
+  </customModal>
 </template>
 
 <style lang="less" scoped>
 .drawer-target {
   overflow: hidden;
 }
+.search-record-modal-searchArea{
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 12px;
+  :deep(.n-card) {
+    border: 0;
+    box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
+  }
+  :deep(.n-card__content){
+    padding: 27px 12px 0;
+  }
+  .search-record-input {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .search-record-input-title {
+      width: 78px;
+    }
+  }
+  .search-area-condition {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 22px 0 11px;
+    span{
+      font-size: 14px;
+      color: #46299D;
+      font-weight: 400;
+      line-height: 20px;
+      margin: 0 62px 0 0;
+      cursor: pointer;
+    }
+  }
+}
+.search-record-modal-content {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 12px;
+  margin: 18px 0 0;
+  :deep(.n-card) {
+    border: 0;
+    box-shadow: 0 3px 6px 1px rgba(188, 188, 188, 0.18);
+  }
+  .search-record-card {
+    
+  }
+  .search-record-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 455px;
+    box-sizing: border-box;
+    img {
+      width: 160px;
+      height: 104px;
+    }
+    span {
+      font-size: 14px;
+      color: #999;
+      font-weight: 400;
+      margin: 13px 0 0;
+    }
+  }
+}
 </style>

src/views/message/inner/IndexSider.vue

@@ -93,14 +93,6 @@ const renderChatAppSearch = () => {
               last_receiver_group_name: '' //最后一条群名
             })
           )
-          state.ServeQueryTalkRecordDetailParams = encodeURIComponent(
-            JSON.stringify({
-              last_group_id: 0,
-              last_member_id: 0,
-              receiver_id: 40,
-              talk_type: 1
-            })
-          )
           state.isShowSearchRecordModal = true
         }
         console.log(searchResultKey, searchText)
@@ -247,7 +239,8 @@ const state = reactive({
   }, //自定义模态框样式
   searchRecordText: '', // 搜索聊天记录文本
   ServeQueryTalkRecordParams: '', // 搜索聊天记录参数
-  ServeQueryTalkRecordDetailParams: '' // 搜索聊天记录详情参数
+  ServeQueryTalkRecordDetailParams: '', // 搜索聊天记录详情参数
+  isShowSearchRecordDetailInfo: false // 是否显示搜索聊天记录详情
 })
 
 const items = computed((): ISession[] => {
@@ -460,6 +453,85 @@ const handleGroupChatListPaginationSize = (value) => {
   console.log(value, 'value')
   state.groupChatListPageSize = value
 }
+//处理搜索聊天记录点击
+const handleClickSearchItem = (searchText, searchResultKey, talk_type, receiver_id, res) => {
+  console.log(searchText, searchResultKey, talk_type, receiver_id)
+  const result = JSON.parse(decodeURIComponent(res))
+  console.log(result)
+  if (searchResultKey === 'general_infos') {
+    state.ServeQueryTalkRecordDetailParams = encodeURIComponent(
+      JSON.stringify({
+        last_group_id: 0, //最后一条群id
+        last_member_id: 0, //最后一条用户id
+        receiver_id: receiver_id, //查详情的时候需传入
+        talk_type: talk_type //1私聊2群聊
+      })
+    )
+    searchDetailListRef.value?.doLoadMore()
+  }
+}
+//处理点击停留item变化
+const handleClickStayItemChange = (item) => {
+  if (item) {
+    state.isShowSearchRecordDetailInfo = true
+  } else {
+    state.isShowSearchRecordDetailInfo = false
+  }
+}
+
+// 定义搜索列表组件的ref
+const searchListRef = ref()
+
+// 定义搜索详情列表组件的ref
+const searchDetailListRef = ref()
+
+//搜索聊天记录列表加载更多
+const loadMoreRecordList = () => {
+  searchListRef.value?.doLoadMore()
+}
+
+// 搜索聊天记录详情列表加载更多
+const loadMoreRecordDetail = () => {
+  searchDetailListRef.value?.doLoadMore()
+}
+
+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>
 
 <template>
@@ -692,26 +764,34 @@ const handleGroupChatListPaginationSize = (value) => {
             </n-input>
           </div>
           <div class="search-record-card" v-if="state.searchRecordText">
-            <div class="search-record-list">
+            <div class="search-record-list" v-loadmore="loadMoreRecordList">
               <chatAppSearchList
+                ref="searchListRef"
                 :searchResultPageSize="10"
                 :listLimit="false"
                 :apiRequest="ServeQueryTalkRecord"
                 :apiParams="state.ServeQueryTalkRecordParams"
-                :searchText="state.searchRecordText || '王'"
+                :searchText="state.searchRecordText"
                 :isPagination="true"
                 searchResultKey="general_infos"
+                @clickSearchItem="handleClickSearchItem"
+                :useClickStay="true"
+                @clickStayItemChange="handleClickStayItemChange"
+                @lastIdChange="handleMoreRecordLastIdChange"
               ></chatAppSearchList>
             </div>
-            <div class="search-record-detail">
+            <div class="search-record-detail" v-loadmore="loadMoreRecordDetail">
               <chatAppSearchList
+                ref="searchDetailListRef"
+                v-if="state.isShowSearchRecordDetailInfo"
                 :searchResultPageSize="10"
                 :listLimit="false"
                 :apiRequest="ServeQueryTalkRecord"
                 :apiParams="state.ServeQueryTalkRecordDetailParams"
-                :searchText="state.searchRecordText || '王'"
+                :searchText="state.searchRecordText"
                 :isPagination="true"
                 :searchRecordDetail="true"
+                @lastIdChange="handleRecordDetailLastIdChange"
               ></chatAppSearchList>
             </div>
           </div>