From efb410b65763d7a8cc011f3caa72844a21c6642e Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Mon, 26 May 2025 18:57:02 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=86=8D=E6=AC=A1=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E4=BB=8E=E8=81=8A=E5=A4=A9app=E6=8E=A5=E5=85=A5=E7=9A=84?=
 =?UTF-8?q?=E6=8C=89=E6=9D=A1=E4=BB=B6=E6=9F=A5=E8=AF=A2=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=8E=BB=E9=99=A4?=
 =?UTF-8?q?=E4=BA=86=E6=8C=89=E7=BE=A4=E6=88=90=E5=91=98=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E3=80=81=E6=8C=89=E6=97=A5=E6=9C=9F=E6=9F=A5=E8=AF=A2=E7=9A=84?=
 =?UTF-8?q?=E7=89=B9=E5=BC=82=E5=8C=96=EF=BC=8C=E7=BB=9F=E4=B8=80=E8=B0=83?=
 =?UTF-8?q?=E7=94=A8history=E6=8E=A5=E5=8F=A3=EF=BC=8C=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E4=B8=8D=E5=90=8C=E7=9A=84=E5=9C=BA=E6=99=AF=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=EF=BC=8C=E5=B9=B6=E5=A4=84=E7=90=86=E7=A9=BA?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=92=8C=E5=88=86=E9=A1=B5=E7=AD=89=E3=80=82?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E4=B8=8D=E5=90=8C=E4=BA=A4=E4=BA=92=E5=9C=BA?=
 =?UTF-8?q?=E6=99=AF=E4=B8=8B=E9=9C=80=E8=A6=81=E9=87=8D=E7=BD=AE=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=9D=A1=E4=BB=B6=E7=9A=84=E6=83=85=E5=86=B5=E3=80=82?=
 =?UTF-8?q?=E7=9B=AE=E5=89=8D=E6=8C=89=E6=97=A5=E6=9C=9F=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E5=BE=85=E6=8E=A5=E5=85=A5=EF=BC=8C=E5=85=B6=E4=BB=96=E5=B7=B2?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                             |   1 +
 env/.env.test                               |   2 +
 src/components/group/GroupPanel.vue         |   2 +
 src/components/search/searchByCondition.vue | 280 ++++++++++++++------
 src/components/search/searchItem.vue        |   1 +
 src/hooks/useTalkRecord.ts                  |   8 +-
 src/store/modules/dialogue.js               |  14 +
 src/utils/auth.js                           |   2 +-
 src/utils/strings.js                        |   2 +-
 src/views/message/inner/IndexContent.vue    | 198 +++++++++++---
 10 files changed, 384 insertions(+), 126 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index d2dbebc..4ab0865 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -70,6 +70,7 @@ declare module 'vue' {
     RevokeMessage: typeof import('./src/components/talk/message/RevokeMessage.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SearchByCondition: typeof import('./src/components/search/searchByCondition.vue')['default']
     SearchItem: typeof import('./src/components/search/searchItem.vue')['default']
     SearchList: typeof import('./src/components/search/searchList.vue')['default']
     SysGroupAdminMessage: typeof import('./src/components/talk/message/system/SysGroupAdminMessage.vue')['default']
diff --git a/env/.env.test b/env/.env.test
index 6abdb34..d5060ef 100644
--- a/env/.env.test
+++ b/env/.env.test
@@ -3,6 +3,8 @@ ENV = 'development'
 VITE_BASE=/
 VUE_APP_PREVIEW=false
 VITE_BASE_API=http://114.218.158.24:8503
+# VITE_BASE_API=http://192.168.88.21:9503
 VITE_EPR_BASEURL=http://114.218.158.24:9020
 VITE_SOCKET_API=ws://114.218.158.24:8504
+# VITE_SOCKET_API=ws://192.168.88.21:9504
 VUE_APP_WEBSITE_NAME=""
\ No newline at end of file
diff --git a/src/components/group/GroupPanel.vue b/src/components/group/GroupPanel.vue
index 2c11bed..2642fd5 100644
--- a/src/components/group/GroupPanel.vue
+++ b/src/components/group/GroupPanel.vue
@@ -236,6 +236,8 @@ const handleModalConfirm = (closeLoading) => {
         closeLoading()
         window['$message'].error(err.message)
       })
+  } else if (state.chatSettingOperateType == 'quit'){
+    //退出群聊
   }
 }
 
diff --git a/src/components/search/searchByCondition.vue b/src/components/search/searchByCondition.vue
index 09b0824..7bda76c 100644
--- a/src/components/search/searchByCondition.vue
+++ b/src/components/search/searchByCondition.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="outer-layer search-by-condition-page">
-    <n-infinite-scroll style="height: 455px;" :distance="10">
+    <n-infinite-scroll style="height: 455px;" :distance="40" @load="loadMore">
       <div class="root">
         <div v-if="state.condition === 'dateTimePicker'" class="search-by-date">
           <n-date-picker
@@ -10,6 +10,7 @@
             :first-day-of-week="6"
             :is-date-disabled="dateDisabled"
             :actions="['clear', 'confirm']"
+            @confirm="onDatePickConfirm"
           />
           <!-- <tm-time-picker
           :show="state.showMonthPicker"
@@ -62,10 +63,17 @@
             state.condition === 'imgAndVideo' ||
             state.condition === 'file' ||
             state.condition === 'link' ||
-            state.condition === 'member'
+            state.condition === 'member' ||
+            state.condition === 'all' ||
+            state.condition === 'date'
           "
           :style="{
-            padding: state.condition === 'imgAndVideo' ? '20px 38px' : ''
+            padding:
+              state.searchResultList.length > 0
+                ? state.condition === 'imgAndVideo'
+                  ? '20px 38px'
+                  : ''
+                : '0'
           }"
         >
           <!-- <div
@@ -117,7 +125,14 @@
                       padding: state.condition === 'imgAndVideo' ? '' : ''
                     }"
                   >
-                    <div class="condition-result-member" v-if="state.condition === 'member'">
+                    <div
+                      class="condition-result-member"
+                      v-if="
+                        state.condition === 'member' ||
+                        state.condition === 'all' ||
+                        state.condition === 'date'
+                      "
+                    >
                       <searchItem
                         @click="toDialogueByMember(item)"
                         :searchResultKey="'search_by_member_condition'"
@@ -216,7 +231,7 @@
                           <span
                             class="text-[14px] font-regular"
                             v-if="state.condition === 'file'"
-                            style="color: #999999;"
+                            style="color: #999999; flex-shrink: 0; margin: 0 0 0 20px;"
                           >
                             {{ item.dateTime }}
                           </span>
@@ -236,7 +251,11 @@
                           <span class="text-[12px] font-regular" v-if="state.condition === 'file'">
                             {{ item?.nickname }}
                           </span>
-                          <span class="text-[12px] font-regular" v-if="state.condition === 'file'">
+                          <span
+                            class="text-[12px] font-regular"
+                            v-if="state.condition === 'file'"
+                            style="flex-shrink: 0; margin: 0 0 0 20px;"
+                          >
                             {{ item?.extra?.fileSize }}
                           </span>
                         </div>
@@ -278,6 +297,10 @@
           </div>
         </teleport>
       </div>
+      <div class="search-record-empty" v-if="state.searchResultList.length === 0">
+        <img src="@/assets/image/chatList/search-empty.png" alt="" />
+        <span>无内容</span>
+      </div>
     </n-infinite-scroll>
   </div>
 </template>
@@ -304,6 +327,8 @@ import { parseTime } from '@/utils/datetime'
 import { fileFormatSize, fileSuffix } from '@/utils/strings'
 import { NImage, NInfiniteScroll, NScrollbar, NIcon, NDatePicker } from 'naive-ui'
 
+const emits = defineEmits(['clearSearchMemberByAlphabet'])
+
 const dialogueStore = useDialogueStore()
 // 当前对话参数
 const dialogueParams = reactive({
@@ -318,6 +343,16 @@ const props = defineProps({
     //搜索条件
     type: String,
     default: ''
+  },
+  searchMemberItem: {
+    //搜索的群成员
+    type: String,
+    default: ''
+  },
+  searchRecordByConditionText: {
+    //搜索关键字文本
+    type: String,
+    default: ''
   }
 })
 
@@ -338,7 +373,10 @@ const state = reactive({
   cursor: 0, //上次查询的游标
   msg_type: 0, //查询的消息类型
   group_member_id: 0, //群成员id
-  flatList: [] // 用于存储扁平化的数据
+  flatList: [], // 用于存储扁平化的数据
+  selectedDateTime: '', //选中的日期时间戳格式
+  isLoadingChatRecord: false, // 添加加载状态标志
+  hasNoMoreResults: false // 是否没有更多结果
 })
 
 const videoContext = ref()
@@ -518,8 +556,6 @@ const getDArray = (selectedMonth) => {
 //输入搜索内容
 const inputSearchText = (e) => {
   state.searchText = e
-  state.cursor = 0
-  queryAllSearch()
 }
 
 //点击取消搜索
@@ -546,83 +582,93 @@ const queryAllSearch = () => {
     limit: 10, //数据行数
     no_limit: '', //1不限制
     direction: 'up', //down向下查最新，up向上查老数据
-    start_time: '',
-    end_time: '',
+    start_time: state.selectedDateTime
+      ? parseTime(new Date(state.selectedDateTime), '{y}-{m}-{d}')
+      : '',
+    end_time: state.selectedDateTime
+      ? parseTime(new Date(state.selectedDateTime), '{y}-{m}-{d}')
+      : '',
     group_member_user_id: state.group_member_id, //群成员id，当查询群历史消息的时候，需要指定群成员的时候送
-    file_name: state.msg_type === 6 ? state.searchText : ''
+    file_name: props?.searchRecordByConditionText
   }
   console.log(params)
   const resp = ServeFindTalkRecords(params)
   console.log(resp)
-  resp.then(({ code, data }) => {
-    console.log(data)
-    if (code == 200) {
-      // 当cursor为0时，清空searchResultList
-      let dateList = state.cursor === 0 ? [] : state.searchResultList
-      let noMore = false
-      if (data?.items?.length > 0) {
-        data.items.forEach((item) => {
-          item.dateTime = parseTime(item?.created_at, '{m}/{d}')
-          if (item?.extra) {
-            item.extra.fileSize = fileFormatSize(item?.extra?.size)
-            item.extra.typeText = item?.extra?.name ? fileSuffix(item?.extra?.name) : ''
-            item.extra.file_avatar = fileTypeAvatar(item?.extra?.typeText)
-            console.log(item.extra.type)
-          }
-          let year = new Date(item.created_at).getFullYear()
-          let month = new Date(item.created_at).getMonth() + 1
-          let dateMonth =
-            year == state.nowDate.getFullYear() && month == state.nowDate.getMonth() + 1
-              ? '这个月'
-              : year + '年' + month + '月'
-          if (dateList.length > 0) {
-            let hasAdd = false
-            dateList.forEach((dateItem) => {
-              if (dateItem.dateMonth === dateMonth) {
-                dateItem.monthResultList.push(item)
-                hasAdd = true
+  resp
+    .then(({ code, data }) => {
+      console.log(data)
+      if (code == 200) {
+        // 当cursor为0时，清空searchResultList
+        let dateList = state.cursor === 0 ? [] : state.searchResultList
+        if (data?.items?.length > 0) {
+          data.items.forEach((item) => {
+            item.dateTime = parseTime(item?.created_at, '{m}/{d}')
+            if (item?.extra && typeof item.extra === 'object') {
+              item.extra.fileSize = fileFormatSize(item?.extra?.size)
+              item.extra.typeText = item?.extra?.name ? fileSuffix(item?.extra?.name) : ''
+              item.extra.file_avatar = fileTypeAvatar(item?.extra?.typeText)
+              // console.log(item.extra.type)
+            }
+            let year = new Date(item.created_at).getFullYear()
+            let month = new Date(item.created_at).getMonth() + 1
+            let dateMonth =
+              year == state.nowDate.getFullYear() && month == state.nowDate.getMonth() + 1
+                ? '这个月'
+                : year + '年' + month + '月'
+            if (dateList.length > 0) {
+              let hasAdd = false
+              dateList.forEach((dateItem) => {
+                if (dateItem.dateMonth === dateMonth) {
+                  dateItem.monthResultList.push(item)
+                  hasAdd = true
+                }
+              })
+              if (!hasAdd) {
+                console.log(dateList)
+                dateList.push({
+                  dateMonth: dateMonth,
+                  monthResultList: [item]
+                })
               }
-            })
-            if (!hasAdd) {
-              console.log(dateList)
+            } else {
               dateList.push({
                 dateMonth: dateMonth,
                 monthResultList: [item]
               })
             }
-          } else {
-            dateList.push({
-              dateMonth: dateMonth,
-              monthResultList: [item]
-            })
-          }
-        })
+          })
+        }
+
+        // 保存分组数据用于显示
+        state.searchResultList = dateList
+
+        // 将分组数据扁平化，用于z-paging分页
+        state.flatList = dateList.reduce((acc, group) => {
+          return acc.concat(group.monthResultList)
+        }, [])
+
+        if (state.cursor === 0) {
+          // zPaging.value?.complete(state.flatList)
+        } else {
+          // zPaging.value?.completeByNoMore(state.flatList, noMore)
+        }
+        state.cursor = data?.cursor
+        if (data?.cursor === 0) {
+          state.hasNoMoreResults = true
+        } else {
+          state.hasNoMoreResults = false
+        }
       } else {
-        noMore = true
+        if (state.cursor === 0) {
+          state.searchResultList = []
+          state.flatList = []
+        }
+        // zPaging.value?.complete([])
       }
-
-      // 保存分组数据用于显示
-      state.searchResultList = dateList
-
-      // 将分组数据扁平化，用于z-paging分页
-      state.flatList = dateList.reduce((acc, group) => {
-        return acc.concat(group.monthResultList)
-      }, [])
-
-      if (state.cursor === 0) {
-        // zPaging.value?.complete(state.flatList)
-      } else {
-        // zPaging.value?.completeByNoMore(state.flatList, noMore)
-      }
-      state.cursor = data?.cursor
-    } else {
-      if (state.cursor === 0) {
-        state.searchResultList = []
-        state.flatList = []
-      }
-      // zPaging.value?.complete([])
-    }
-  })
+    })
+    .finally(() => {
+      state.isLoadingChatRecord = false // 无论成功失败，都重置加载状态
+    })
 
   resp.catch(() => {
     if (state.cursor === 0) {
@@ -630,6 +676,7 @@ const queryAllSearch = () => {
       state.flatList = []
     }
     // zPaging.value?.complete([])
+    state.isLoadingChatRecord = false // 发生错误时也要重置加载状态
   })
 }
 
@@ -699,22 +746,56 @@ const toDialogueByMember = async (msgInfo) => {
   })
 }
 
+//点击选择日期确认
+const onDatePickConfirm = (datePicker) => {
+  console.log(datePicker)
+  state.selectedDateTime = datePicker
+  resetSearchConditions('dateTimePicker')
+  queryAllSearch()
+}
+
+//重置部分搜索条件
+const resetSearchConditions = (newVal) => {
+  state.cursor = 0
+  state.searchResultList = []
+  state.flatList = []
+  if (newVal !== 'member') {
+    state.group_member_id = 0
+    emits('clearSearchMemberByAlphabet')
+  }
+}
+
+//触底加载更多数据
+const loadMore = () => {
+  if (state.isLoadingChatRecord || state.hasNoMoreResults) return // 如果正在加载中，或者没有更多结果，直接返回
+  state.isLoadingChatRecord = true
+  queryAllSearch()
+}
+
 watch(
   () => props?.conditionType,
   (newVal, oldVal) => {
     console.log(newVal, oldVal)
     state.condition = newVal
     if (newVal) {
+      resetSearchConditions(newVal)
       if (newVal === 'member') {
+        //没选日期前，也等同于倒序查询全部
         state.showPageTitle = true
         state.pageTitle = '按群成员查找'
-        // state.group_member_id = options.groupMemberId
+        state.msg_type = 0
         queryAllSearch()
       } else if (newVal === 'dateTimePicker') {
         state.showPageTitle = true
         state.pageTitle = '按日期查找'
+        state.msg_type = 0
         ServeQueryTalkDate(parseTime(state.nowDate, '{y}{m}'))
         getDArray(parseTime(state.nowDate, '{y}-{m}'))
+        queryAllSearch()
+      } else if (newVal === 'date') {
+        //没选日期前，也等同于倒序查询全部
+        state.msg_type = 0
+        queryAllSearch()
       } else if (newVal === 'imgAndVideo') {
         state.showPageTitle = true
         state.pageTitle = '图片与视频'
@@ -744,6 +825,10 @@ watch(
         )
         state.msg_type = 14
         queryAllSearch()
+      } else if (newVal === 'all') {
+        //查询全部，即重置所有条件
+        state.msg_type = 0
+        queryAllSearch()
       }
     }
   },
@@ -752,6 +837,29 @@ watch(
     deep: true
   }
 )
+
+watch(
+  () => props?.searchMemberItem,
+  (newVal, oldVal) => {
+    const memberItem = newVal ? JSON.parse(decodeURIComponent(newVal)) : ''
+    state.group_member_id = memberItem?.user_id
+    resetSearchConditions('member')
+    queryAllSearch()
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => props?.searchRecordByConditionText,
+  (newVal, oldVal) => {
+    console.log(newVal, oldVal)
+    resetSearchConditions(state.condition)
+    queryAllSearch()
+  }
+)
 </script>
 <style scoped lang="scss">
 .search-by-date {
@@ -963,11 +1071,6 @@ body:deep(.round-3) {
           }
         }
       }
-      .condition-dimensionality-each:nth-child(1) {
-        .condition-each-result-attachments {
-          padding: 0 0 14px !important;
-        }
-      }
     }
   }
 }
@@ -990,4 +1093,23 @@ body:deep(.round-3) {
   height: 100%;
   object-fit: contain;
 }
+
+.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>
diff --git a/src/components/search/searchItem.vue b/src/components/search/searchItem.vue
index c88a52e..f38dfca 100644
--- a/src/components/search/searchItem.vue
+++ b/src/components/search/searchItem.vue
@@ -334,6 +334,7 @@ const resultDetail = computed(() => {
       .searchRecordDetail-fastLocal {
         display: none;
         line-height: 20px;
+        flex-shrink: 0;
         span {
           color: #46299d;
           font-size: 12px;
diff --git a/src/hooks/useTalkRecord.ts b/src/hooks/useTalkRecord.ts
index b72e0f8..e2af558 100644
--- a/src/hooks/useTalkRecord.ts
+++ b/src/hooks/useTalkRecord.ts
@@ -14,7 +14,8 @@ interface Params {
 interface SpecialParams extends Params {
   msg_id?: string
   cursor?: number
-  direction?: 'up' | 'down'
+  direction?: 'up' | 'down',
+  sort_sequence?: string
 }
 
 interface LoadOptions {
@@ -201,9 +202,9 @@ export const useTalkRecord = (uid: number) => {
           loadConfig.status = 2
           return
         }
-        dialogueStore.clearDialogueRecord()
+        // dialogueStore.clearDialogueRecord()
         const items = (data.items || []).map((item: ITalkRecord) => formatTalkRecord(uid, item))
-        dialogueStore.unshiftDialogueRecord(items.reverse())
+        dialogueStore.unshiftDialogueRecord(contextParams.direction === 'down' ? items : items.reverse())
         loadConfig.status = items.length >= contextParams.limit ? 1 : 2
         loadConfig.cursor = data.cursor
         nextTick(() => {
@@ -255,6 +256,7 @@ export const useTalkRecord = (uid: number) => {
               specifiedMsg: {
                 ...loadConfig.specialParams,
                 direction: 'up',
+                sort_sequence: '',
                 cursor: getMinSequence()
               }
             }
diff --git a/src/store/modules/dialogue.js b/src/store/modules/dialogue.js
index 880b9e3..ea52aca 100644
--- a/src/store/modules/dialogue.js
+++ b/src/store/modules/dialogue.js
@@ -54,6 +54,8 @@ export const useDialogueStore = defineStore('dialogue', {
       groupInfo: {} ,
       // 群成员列表
       members: [],
+      // 群成员列表按字母分组
+      membersByAlphabet: {},
 
       // 对话记录
       items: {
@@ -101,6 +103,7 @@ export const useDialogueStore = defineStore('dialogue', {
       // }
 
       this.members = []
+      this.membersByAlphabet = []
       if (data.talk_type == 2) {
         this.updateGroupMembers()
         this.getGroupInfo()
@@ -126,6 +129,17 @@ export const useDialogueStore = defineStore('dialogue', {
         online: false,
         value: o.nickname
       }))
+      const groupMap = {};
+      data.sortItems.forEach(member => {
+        const alpha = (member.key || member.nickname?.[0] || '#').toUpperCase();
+        if (!groupMap[alpha]) groupMap[alpha] = [];
+        groupMap[alpha].push(member);
+      });
+      const alphabets = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+      this.membersByAlphabet = alphabets.map(alpha => ({
+        alphabet: alpha,
+        members: groupMap[alpha] || []
+      })).filter(group => group.members.length > 0);
     },
 
     // 清空对话记录
diff --git a/src/utils/auth.js b/src/utils/auth.js
index ffba221..44cd18b 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b89eb1ea28c6224649ca60080b7243593f7462085111e3bd3868564aa9a65a16e171ba833d4955a4555f3376cb64b66eb2304dafb03f182fe1719d09e84d345954edbf75b17358196e1378893c8c97b56a6'
+  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b895d12a77cebc3f489ae40e22c7fcd041709d942706b8ab6959f87300e0708cf1f6267ffc75eec184c873b180677744fb7af1a18227c61e570dd36542a83d608f51f3a124414eee16ad11c8b5d3aefd6bc'
 }
 
 /**
diff --git a/src/utils/strings.js b/src/utils/strings.js
index 51f6758..bba4767 100644
--- a/src/utils/strings.js
+++ b/src/utils/strings.js
@@ -58,7 +58,7 @@ export function fileFormatSize(value) {
     return '0'
   }
 
-  let unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  let unitArr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
   let index = 0
   let srcsize = parseFloat(value)
   index = Math.floor(Math.log(srcsize) / Math.log(1000))
diff --git a/src/views/message/inner/IndexContent.vue b/src/views/message/inner/IndexContent.vue
index 03fd8a5..a8cc579 100644
--- a/src/views/message/inner/IndexContent.vue
+++ b/src/views/message/inner/IndexContent.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { reactive, computed, watch } from 'vue'
-import { NDrawer, NCard, NTag } from 'naive-ui'
+import { NDrawer, NCard, NTag, NInput } from 'naive-ui'
 import { useUserStore, useDialogueStore, useUploadsStore } from '@/store'
 import PanelHeader from './panel/PanelHeader.vue'
 import PanelContent from './panel/PanelContent.vue'
@@ -16,9 +16,31 @@ import avatarModule from '@/components/avatar-module/index.vue'
 const userStore = useUserStore()
 const dialogueStore = useDialogueStore()
 const uploadsStore = useUploadsStore()
-console.log('dialogueStore',dialogueStore);
+console.log('dialogueStore', dialogueStore)
 
 const members = computed(() => dialogueStore.members)
+const membersByAlphabet = computed(() => {
+  if (state.searchMemberByAlphabet) {
+    // 过滤分组，并且只保留匹配成员
+    return (
+      (dialogueStore.membersByAlphabet as any)
+        .map((group: any) => {
+          // 只保留匹配的成员
+          const filteredMembers = group.members.filter(
+            (member) => member.nickname && member.nickname.includes(state.searchMemberByAlphabet)
+          )
+          return {
+            ...group,
+            members: filteredMembers
+          }
+        })
+        // 只保留有成员的分组
+        .filter((group) => group.members.length > 0)
+    )
+  }
+  return dialogueStore.membersByAlphabet
+})
+
 const isShowEditor = computed(() => dialogueStore.isShowEditor)
 
 // 当前对话参数
@@ -31,7 +53,7 @@ const talkParams = reactive({
   online: computed(() => dialogueStore.online),
   keyboard: computed(() => dialogueStore.keyboard),
   num: computed(() => dialogueStore.members.length),
-  avatar:computed(() => dialogueStore.talk.avatar),
+  avatar: computed(() => dialogueStore.talk.avatar),
   specifiedMsg: computed(() => dialogueStore.specifiedMsg)
 })
 
@@ -46,8 +68,8 @@ const state = reactive({
     backgroundColor: '#F9F9FD'
   }, //按条件搜索记录弹窗样式
   searchRecordByConditionText: '', //按条件搜索记录文本
-  conditionTag: '', //当前条件标签
-  conditionType: '', //当前条件类型
+  conditionTag: 'all', //当前条件标签
+  conditionType: 'all', //当前条件类型
   isShowGroupNoticeModal: false, //是否显示群公告模态框
   customGroupNoticeModalStyle: {
     width: '997px',
@@ -81,7 +103,10 @@ const state = reactive({
     content: ''
   }, //群公告信息
   isAdmin: false, //当前登录用户是否是该群管理员
-  groupNoticeContentChange: '' //群公告内容变化
+  groupNoticeContentChange: '', //群公告内容变化
+  searchMemberByAlphabet: '', //群成员搜索文本
+  searchMemberItem: '', //群成员搜索item
+  showMemberListByAlphabetPopover: false // 控制群成员弹窗显示
 })
 
 const events = {
@@ -118,7 +143,7 @@ const changeConditionTag = (tag) => {
   } else if (tag === 'member') {
     state.conditionTag = '群成员'
   } else {
-    state.conditionTag = ''
+    state.conditionTag = 'all'
   }
 }
 
@@ -370,13 +395,38 @@ const handleGroupNoticeModalShow = (isAdmin) => {
   state.isShowGroupNoticeModal = true
   getGroupNotices()
 }
+//点击群成员类型搜索聊天记录下的群成员item
+const handleMemberItemClick = (memberItem) => {
+  state.searchMemberItem = encodeURIComponent(JSON.stringify(memberItem))
+  state.showMemberListByAlphabetPopover = false // 关闭弹窗
+  state.searchMemberByAlphabet = ''
+}
+//清空按A-Z排序下搜索群成员关键字
+const clearSearchMemberByAlphabet = () => {
+  state.searchMemberByAlphabet = ''
+}
+
+// 搜索记录模态框关闭事件
+const handleSearchRecordByConditionModalClose = () => {
+  state.isShowSearchRecordByConditionModal = false
+  resetSearchRecordByCondition()
+}
+
+// 重置搜索记录模态框
+const resetSearchRecordByCondition = () => {
+  state.searchRecordByConditionText = ''
+  state.conditionType = 'all'
+  state.conditionTag = 'all'
+  state.searchMemberItem = ''
+  state.showMemberListByAlphabetPopover = false
+  state.searchMemberByAlphabet = ''
+}
 </script>
 
 <template>
   <section id="drawer-container" class="el-container is-vertical">
     <!-- 头部区域 -->
     <header class="el-header bdr-b">
-      
       <PanelHeader
         :type="talkParams.type"
         :username="talkParams.username"
@@ -468,6 +518,8 @@ const handleGroupNoticeModalShow = (isAdmin) => {
     :style="state.customSearchRecordByConditionModalStyle"
     :customCloseBtn="true"
     :closable="false"
+    :customCloseEvent="true"
+    @customCloseModal="handleSearchRecordByConditionModalClose"
   >
     <template #content>
       <div class="search-record-modal-searchArea">
@@ -484,7 +536,11 @@ const handleGroupNoticeModalShow = (isAdmin) => {
                 <img src="@/assets/image/icon/close-btn-grey-line.png" alt="close" />
               </template>
               <template #prefix>
-                <n-tag closable v-if="state.conditionTag" @close="changeConditionTag('')">
+                <n-tag
+                  closable
+                  v-if="state.conditionTag && state.conditionTag !== 'all'"
+                  @close="changeConditionTag('all')"
+                >
                   {{ state.conditionTag }}
                 </n-tag>
               </template>
@@ -500,16 +556,58 @@ const handleGroupNoticeModalShow = (isAdmin) => {
               <historyRecord conditionType="dateTimePicker" v-if="state.conditionType === 'date'" />
             </n-popover>
             <n-popover
+              v-model:show="state.showMemberListByAlphabetPopover"
               trigger="click"
               placement="bottom-start"
-              style="height: 505px; padding: 0;"
+              style="width: 290px; height: 505px; padding: 0;"
               v-if="talkParams.type === 2"
             >
               <template #trigger>
                 <span @click="changeConditionTag('member')">群成员</span>
               </template>
-              <div>
-                <text>这里是memberList</text>
+              <div class="member-list-by-alphabet-container">
+                <n-input
+                  placeholder="请输入群成员"
+                  style="margin: 0 0 17px;"
+                  v-model:value="state.searchMemberByAlphabet"
+                />
+                <n-scrollbar style="height: 430px;">
+                  <div
+                    class="member-list-by-alphabet"
+                    v-for="(alphabetMembersItem, alphabetMembersIndex) in membersByAlphabet"
+                    :key="alphabetMembersIndex"
+                  >
+                    <div class="member-list-each-alphabet-header">
+                      <span>{{ (alphabetMembersItem as any).alphabet }}</span>
+                    </div>
+                    <div class="member-list-each-alphabet">
+                      <div
+                        class="member-item-each-alphabet"
+                        v-for="(memberItem, memberItemIndex) in (alphabetMembersItem as any).members"
+                        :key="memberItemIndex"
+                        @click="handleMemberItemClick(memberItem)"
+                      >
+                        <avatarModule
+                          :mode="1"
+                          :avatar="memberItem.avatar"
+                          :userName="memberItem.nickname"
+                          :groupType="0"
+                          :customStyle="{
+                            width: '38px',
+                            height: '38px'
+                          }"
+                          :customTextStyle="{
+                            fontSize: '12px',
+                            fontWeight: 'bold',
+                            color: '#fff',
+                            lineHeight: '17px'
+                          }"
+                        ></avatarModule>
+                        <span>{{ memberItem.nickname }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </n-scrollbar>
               </div>
             </n-popover>
           </div>
@@ -517,18 +615,13 @@ const handleGroupNoticeModalShow = (isAdmin) => {
       </div>
       <div class="search-record-modal-content">
         <n-card>
-          <div
-            class="search-record-card"
-            v-if="state.searchRecordByConditionText || state.conditionType"
-          >
-            <historyRecord :conditionType="state.conditionType" />
-          </div>
-          <div
-            class="search-record-empty"
-            v-if="!state.searchRecordByConditionText && !state.conditionType"
-          >
-            <img src="@/assets/image/chatList/search-empty.png" alt="" />
-            <span>无内容</span>
+          <div class="search-record-card">
+            <historyRecord
+              :conditionType="state.conditionType"
+              :searchMemberItem="state.searchMemberItem"
+              @clearSearchMemberByAlphabet="clearSearchMemberByAlphabet"
+              :searchRecordByConditionText="state.searchRecordByConditionText"
+            />
           </div>
         </n-card>
       </div>
@@ -677,24 +770,6 @@ const handleGroupNoticeModalShow = (isAdmin) => {
   }
   .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;
-    }
-  }
 }
 .group-notice-modal-content {
   .group-notice-text-area {
@@ -772,4 +847,43 @@ const handleGroupNoticeModalShow = (isAdmin) => {
     color: #1f2225;
   }
 }
+
+.member-list-by-alphabet-container {
+  padding: 12px;
+  width: 290px;
+  .member-list-by-alphabet {
+    .member-list-each-alphabet-header {
+      border-bottom: 1px solid #e5e5e5;
+      span {
+        font-size: 14px;
+        color: #999;
+        font-weight: 400;
+        line-height: 20px;
+      }
+    }
+    .member-list-each-alphabet {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      gap: 10px;
+      padding: 12px 0;
+      .member-item-each-alphabet {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10px;
+        width: 100%;
+        cursor: pointer;
+        span {
+          font-size: 12px;
+          color: #000;
+          font-weight: 400;
+          line-height: 17px;
+        }
+      }
+    }
+  }
+}
 </style>

From 8ecee151806ad17868b8c42780f8638c05d2f07f Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Tue, 27 May 2025 11:21:55 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95=E6=8C=89=E6=97=A5=E6=9C=9F=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                             |   1 +
 src/components/search/searchByCondition.vue | 102 ++++++++++----------
 src/utils/auth.js                           |   2 +-
 src/views/message/inner/IndexContent.vue    | 100 ++++++++++++++++++-
 4 files changed, 148 insertions(+), 57 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 4ab0865..46f50dd 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -52,6 +52,7 @@ declare module 'vue' {
     NAvatar: typeof import('naive-ui')['NAvatar']
     NButton: typeof import('naive-ui')['NButton']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NIcon: typeof import('naive-ui')['NIcon']
diff --git a/src/components/search/searchByCondition.vue b/src/components/search/searchByCondition.vue
index 7bda76c..0fe4f4f 100644
--- a/src/components/search/searchByCondition.vue
+++ b/src/components/search/searchByCondition.vue
@@ -2,8 +2,8 @@
   <div class="outer-layer search-by-condition-page">
     <n-infinite-scroll style="height: 455px;" :distance="40" @load="loadMore">
       <div class="root">
-        <div v-if="state.condition === 'dateTimePicker'" class="search-by-date">
-          <n-date-picker
+        <!-- <div v-if="state.condition === 'date'" class="search-by-date"> -->
+        <!-- <n-date-picker
             :panel="true"
             type="datetime"
             :clearable="true"
@@ -11,8 +11,8 @@
             :is-date-disabled="dateDisabled"
             :actions="['clear', 'confirm']"
             @confirm="onDatePickConfirm"
-          />
-          <!-- <tm-time-picker
+          /> -->
+        <!-- <tm-time-picker
           :show="state.showMonthPicker"
           :showDetail="{
             year: true,
@@ -42,7 +42,7 @@
             <img src="@/static/image/search/down-pointer.png" />
           </div>
         </tm-time-picker> -->
-          <!-- <tm-calendar-view
+        <!-- <tm-calendar-view
           :show="true"
           :hideTool="true"
           :hideButton="true"
@@ -56,7 +56,7 @@
           @getDArray="getDArray"
           :showDefault="false"
         ></tm-calendar-view> -->
-        </div>
+        <!-- </div> -->
         <div
           class="search-by-condition-input-list"
           v-if="
@@ -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'])
+const emits = defineEmits(['clearSearchMemberByAlphabet', 'getDisabledDateArray'])
 
 const dialogueStore = useDialogueStore()
 // 当前对话参数
@@ -353,6 +353,16 @@ const props = defineProps({
     //搜索关键字文本
     type: String,
     default: ''
+  },
+  selectedDateTime: {
+    //选中的日期时间戳格式
+    type: [Number, null],
+    default: null
+  },
+  nowDateTime: {
+    //当前日期时间
+    type: Date,
+    default: new Date()
   }
 })
 
@@ -374,7 +384,7 @@ const state = reactive({
   msg_type: 0, //查询的消息类型
   group_member_id: 0, //群成员id
   flatList: [], // 用于存储扁平化的数据
-  selectedDateTime: '', //选中的日期时间戳格式
+  selectedDateTime: null, //选中的日期时间戳格式
   isLoadingChatRecord: false, // 添加加载状态标志
   hasNoMoreResults: false // 是否没有更多结果
 })
@@ -447,6 +457,7 @@ const ServeQueryTalkDate = (month) => {
       } else {
         state.disabledDateArray = state.dArray
       }
+      emits('getDisabledDateArray', state.disabledDateArray)
     } else {
     }
   })
@@ -454,16 +465,6 @@ const ServeQueryTalkDate = (month) => {
   resp.catch(() => {})
 }
 
-//禁用的日期
-const dateDisabled = (e) => {
-  const date = new Date(e)
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  const formattedDate = `${year}/${month}/${day}`
-  return state.disabledDateArray.includes(formattedDate)
-}
-
 //点击选择日期
 const selectDate = async (e) => {
   if (e == parseTime(state.nowDate, '{y}/{m}/{d}')) {
@@ -746,14 +747,6 @@ const toDialogueByMember = async (msgInfo) => {
   })
 }
 
-//点击选择日期确认
-const onDatePickConfirm = (datePicker) => {
-  console.log(datePicker)
-  state.selectedDateTime = datePicker
-  resetSearchConditions('dateTimePicker')
-  queryAllSearch()
-}
-
 //重置部分搜索条件
 const resetSearchConditions = (newVal) => {
   state.cursor = 0
@@ -785,17 +778,14 @@ watch(
         state.pageTitle = '按群成员查找'
         state.msg_type = 0
         queryAllSearch()
-      } else if (newVal === 'dateTimePicker') {
+      } else if (newVal === 'date') {
+        //没选日期前，也等同于倒序查询全部
         state.showPageTitle = true
         state.pageTitle = '按日期查找'
         state.msg_type = 0
         ServeQueryTalkDate(parseTime(state.nowDate, '{y}{m}'))
         getDArray(parseTime(state.nowDate, '{y}-{m}'))
         queryAllSearch()
-      } else if (newVal === 'date') {
-        //没选日期前，也等同于倒序查询全部
-        state.msg_type = 0
-        queryAllSearch()
       } else if (newVal === 'imgAndVideo') {
         state.showPageTitle = true
         state.pageTitle = '图片与视频'
@@ -855,35 +845,45 @@ watch(
 watch(
   () => props?.searchRecordByConditionText,
   (newVal, oldVal) => {
-    console.log(newVal, oldVal)
     resetSearchConditions(state.condition)
     queryAllSearch()
   }
 )
+
+watch(
+  () => props?.selectedDateTime,
+  (newVal, oldVal) => {
+    state.selectedDateTime = newVal
+    resetSearchConditions('date')
+    queryAllSearch()
+  }
+)
+
+watch(
+  () => props?.nowDateTime,
+  (newVal, oldVal) => {
+    ServeQueryTalkDate(parseTime(newVal, '{y}{m}'))
+    getDArray(parseTime(newVal, '{y}-{m}'))
+  }
+)
 </script>
 <style scoped lang="scss">
-.search-by-date {
-  :deep(.n-date-panel-header) {
-    display: none;
+.search-date-picker {
+  padding: 10px 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  span {
+    line-height: 20px;
+    color: #999999;
   }
-  .search-date-picker {
-    padding: 10px 16px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    span {
-      line-height: 20px;
-      color: #999999;
-    }
-    img {
-      width: 9px;
-      height: 6px;
-      margin: 0 0 0 13px;
-    }
+  img {
+    width: 9px;
+    height: 6px;
+    margin: 0 0 0 13px;
   }
 }
-
 body:deep(.text-overflow-1) {
   color: #666666 !important;
   line-height: 22px !important;
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 44cd18b..b65a600 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b895d12a77cebc3f489ae40e22c7fcd041709d942706b8ab6959f87300e0708cf1f6267ffc75eec184c873b180677744fb7af1a18227c61e570dd36542a83d608f51f3a124414eee16ad11c8b5d3aefd6bc'
+  return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b8920ba7848670d6635bc65bc81e459c2d265c727a7b12d1bef76bc3ef2db21c5321a0369a434ada2629282bf55674fe5b6052fa62f66e10cdd8652c28aa0f4afd42fdc72282e2e591e7b7c0c17a3b85eca'
 }
 
 /**
diff --git a/src/views/message/inner/IndexContent.vue b/src/views/message/inner/IndexContent.vue
index a8cc579..f744553 100644
--- a/src/views/message/inner/IndexContent.vue
+++ b/src/views/message/inner/IndexContent.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { reactive, computed, watch } from 'vue'
-import { NDrawer, NCard, NTag, NInput } from 'naive-ui'
+import { reactive, computed, watch, ref } from 'vue'
+import { NDrawer, NCard, NTag, NInput, NDatePicker } from 'naive-ui'
 import { useUserStore, useDialogueStore, useUploadsStore } from '@/store'
 import PanelHeader from './panel/PanelHeader.vue'
 import PanelContent from './panel/PanelContent.vue'
@@ -106,7 +106,11 @@ const state = reactive({
   groupNoticeContentChange: '', //群公告内容变化
   searchMemberByAlphabet: '', //群成员搜索文本
   searchMemberItem: '', //群成员搜索item
-  showMemberListByAlphabetPopover: false // 控制群成员弹窗显示
+  showMemberListByAlphabetPopover: false, // 控制群成员弹窗显示
+  disabledDateArray: [] as string[], // 被禁用的日期数组
+  selectedDateTime: null, // 选中的日期时间戳格式
+  nowDateTime: new Date(), // 当前日期时间
+  showDateConditionPopover: false // 控制日期条件弹窗显示
 })
 
 const events = {
@@ -421,6 +425,62 @@ const resetSearchRecordByCondition = () => {
   state.showMemberListByAlphabetPopover = false
   state.searchMemberByAlphabet = ''
 }
+
+//禁用的日期
+const dateDisabled = (e) => {
+  const date = new Date(e)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const formattedDate = `${year}/${month}/${day}`
+  return state.disabledDateArray.includes(formattedDate)
+}
+
+// 获取禁用日期
+const getDisabledDateArray = (disabledDateArray) => {
+  state.disabledDateArray = disabledDateArray
+}
+
+// 日期选择器确认事件
+const onDatePickConfirm = (datePicker) => {
+  console.log(datePicker)
+  state.selectedDateTime = datePicker
+  state.showDateConditionPopover = false
+}
+
+// 日期选择器清除事件
+const onDatePickClear = () => {
+  state.selectedDateTime = null
+  state.showDateConditionPopover = false
+  state.nowDateTime = new Date()
+}
+
+// 日期选择器前一个月事件
+const onPrevMonth = () => {
+  state.nowDateTime = new Date(state.nowDateTime.getFullYear(), state.nowDateTime.getMonth() - 1, 1)
+}
+
+// 日期选择器后一个月事件
+const onNextMonth = () => {
+  state.nowDateTime = new Date(state.nowDateTime.getFullYear(), state.nowDateTime.getMonth() + 1, 1)
+}
+
+// 日期选择器前一年事件
+const onPrevYear = () => {
+  state.nowDateTime = new Date(state.nowDateTime.getFullYear() - 1, state.nowDateTime.getMonth(), 1)
+}
+
+// 日期选择器后一年事件
+const onNextYear = () => {
+  state.nowDateTime = new Date(state.nowDateTime.getFullYear() + 1, state.nowDateTime.getMonth(), 1)
+}
+
+// 日期选择器显示事件（其实是popover显示事件）
+const onDatePickShow = (show) => {
+  if (show) {
+    // state.nowDateTime = new Date()
+  }
+}
 </script>
 
 <template>
@@ -549,11 +609,33 @@ const resetSearchRecordByCondition = () => {
           <div class="search-area-condition">
             <span @click="changeConditionTag('file')">文件</span>
             <span @click="changeConditionTag('imgAndVideo')">图片与视频</span>
-            <n-popover trigger="click" placement="bottom-start" style="height: 312px; padding: 0;">
+            <n-popover
+              v-model:show="state.showDateConditionPopover"
+              trigger="click"
+              placement="bottom-start"
+              style="height: 312px; padding: 0;"
+              @update:show="onDatePickShow"
+            >
               <template #trigger>
                 <span id="date-condition" @click="changeConditionTag('date')">日期</span>
               </template>
-              <historyRecord conditionType="dateTimePicker" v-if="state.conditionType === 'date'" />
+              <div class="search-by-date">
+                <n-date-picker
+                  :panel="true"
+                  type="datetime"
+                  :clearable="true"
+                  :first-day-of-week="6"
+                  :is-date-disabled="dateDisabled"
+                  :actions="['clear', 'confirm']"
+                  @confirm="onDatePickConfirm"
+                  @clear="onDatePickClear"
+                  @prev-month="onPrevMonth"
+                  @next-month="onNextMonth"
+                  @prev-year="onPrevYear"
+                  @next-year="onNextYear"
+                  v-model:value="state.selectedDateTime"
+                />
+              </div>
             </n-popover>
             <n-popover
               v-model:show="state.showMemberListByAlphabetPopover"
@@ -621,6 +703,9 @@ const resetSearchRecordByCondition = () => {
               :searchMemberItem="state.searchMemberItem"
               @clearSearchMemberByAlphabet="clearSearchMemberByAlphabet"
               :searchRecordByConditionText="state.searchRecordByConditionText"
+              @getDisabledDateArray="getDisabledDateArray"
+              :selectedDateTime="state.selectedDateTime"
+              :nowDateTime="state.nowDateTime"
             />
           </div>
         </n-card>
@@ -756,6 +841,11 @@ const resetSearchRecordByCondition = () => {
     }
   }
 }
+.search-by-date {
+  :deep(.n-date-panel-header) {
+    display: none;
+  }
+}
 .search-record-modal-content {
   box-sizing: border-box;
   width: 100%;