hookehuyr

refactor(消息列表): 优化搜索和过滤逻辑,移除前端过滤改为后端处理

- 添加搜索框清除事件处理
- 统一所有请求参数构建逻辑
- 移除前端过滤,完全依赖后端筛选
- 保持搜索条件不变时切换标签页
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 </nut-col> --> 8 </nut-col> -->
9 <nut-col span="24"> 9 <nut-col span="24">
10 <!-- Search Bar --> 10 <!-- Search Bar -->
11 - <nut-searchbar v-model="searchValue" placeholder="搜索消息" @blur="onBlurSearch" shape="round" 11 + <nut-searchbar v-model="searchValue" placeholder="搜索消息" @blur="onBlurSearch" @clear="onBlurSearch" shape="round"
12 background="transparent" input-background="#ffffff"> 12 background="transparent" input-background="#ffffff">
13 <template #leftin> 13 <template #leftin>
14 <Search2 /> 14 <Search2 />
...@@ -159,6 +159,7 @@ const mockMessages = ref([]) ...@@ -159,6 +159,7 @@ const mockMessages = ref([])
159 const pollMessages = async () => { 159 const pollMessages = async () => {
160 try { 160 try {
161 // 静默获取数据,不显示loading状态 161 // 静默获取数据,不显示loading状态
162 + // 构建查询参数,同时包含状态筛选和关键字搜索
162 const params = { 163 const params = {
163 page: 0, 164 page: 0,
164 limit: pageSize 165 limit: pageSize
...@@ -171,9 +172,9 @@ const pollMessages = async () => { ...@@ -171,9 +172,9 @@ const pollMessages = async () => {
171 params.type = 'system' // 系统消息 172 params.type = 'system' // 系统消息
172 } 173 }
173 174
174 - // 如果有搜索关键词 175 + // 同时添加搜索关键词(如果存在)
175 - if (searchValue.value) { 176 + if (searchValue.value && searchValue.value.trim()) {
176 - params.keyword = searchValue.value 177 + params.keyword = searchValue.value.trim()
177 } 178 }
178 179
179 const response = await getMessagesListAPI(params) 180 const response = await getMessagesListAPI(params)
...@@ -231,7 +232,7 @@ const initData = async () => { ...@@ -231,7 +232,7 @@ const initData = async () => {
231 try { 232 try {
232 loading.value = true 233 loading.value = true
233 234
234 - // 根据当前tab获取对应的消息类型和状态 235 + // 构建查询参数,同时包含状态筛选和关键字搜索
235 const params = { 236 const params = {
236 page: 0, 237 page: 0,
237 limit: pageSize 238 limit: pageSize
...@@ -244,9 +245,9 @@ const initData = async () => { ...@@ -244,9 +245,9 @@ const initData = async () => {
244 params.type = 'system' // 系统消息 245 params.type = 'system' // 系统消息
245 } 246 }
246 247
247 - // 如果有搜索关键词 248 + // 同时添加搜索关键词(如果存在)
248 - if (searchValue.value) { 249 + if (searchValue.value && searchValue.value.trim()) {
249 - params.keyword = searchValue.value 250 + params.keyword = searchValue.value.trim()
250 } 251 }
251 252
252 const response = await getMessagesListAPI(params) 253 const response = await getMessagesListAPI(params)
...@@ -287,25 +288,9 @@ const initData = async () => { ...@@ -287,25 +288,9 @@ const initData = async () => {
287 } 288 }
288 289
289 // 过滤后的对话列表 290 // 过滤后的对话列表
291 +// 由于API已经根据状态和关键字进行了后端筛选,这里直接返回conversations
290 const filteredConversations = computed(() => { 292 const filteredConversations = computed(() => {
291 - let filtered = conversations.value 293 + return conversations.value
292 -
293 - // 根据Tab过滤
294 - if (activeTab.value === 'unread') {
295 - filtered = filtered.filter(conv => conv.unread)
296 - } else if (activeTab.value === 'system') {
297 - filtered = filtered.filter(conv => conv.type === 'system')
298 - }
299 -
300 - // 根据搜索关键词过滤
301 - if (searchValue.value) {
302 - filtered = filtered.filter(conv =>
303 - conv.name.includes(searchValue.value) ||
304 - conv.lastMessage.includes(searchValue.value)
305 - )
306 - }
307 -
308 - return filtered
309 }) 294 })
310 295
311 // Tab点击事件 296 // Tab点击事件
...@@ -321,8 +306,7 @@ const setActiveTab = async (tabKey) => { ...@@ -321,8 +306,7 @@ const setActiveTab = async (tabKey) => {
321 306
322 setTimeout(async () => { 307 setTimeout(async () => {
323 activeTab.value = tabKey; 308 activeTab.value = tabKey;
324 - // 重置搜索条件 309 + // 保持搜索关键字,不重置搜索条件
325 - searchValue.value = '';
326 // 重置分页状态 310 // 重置分页状态
327 page.value = 1; 311 page.value = 1;
328 hasMore.value = true; 312 hasMore.value = true;
...@@ -357,7 +341,7 @@ const loadMore = async () => { ...@@ -357,7 +341,7 @@ const loadMore = async () => {
357 try { 341 try {
358 loading.value = true 342 loading.value = true
359 343
360 - // 构建请求参数 344 + // 构建请求参数,同时包含状态筛选和关键字搜索
361 const params = { 345 const params = {
362 page: page.value, 346 page: page.value,
363 limit: pageSize 347 limit: pageSize
...@@ -370,9 +354,9 @@ const loadMore = async () => { ...@@ -370,9 +354,9 @@ const loadMore = async () => {
370 params.type = 'system' // 系统消息 354 params.type = 'system' // 系统消息
371 } 355 }
372 356
373 - // 如果有搜索关键词 357 + // 同时添加搜索关键词(如果存在)
374 - if (searchValue.value) { 358 + if (searchValue.value && searchValue.value.trim()) {
375 - params.keyword = searchValue.value 359 + params.keyword = searchValue.value.trim()
376 } 360 }
377 361
378 const response = await getMessagesListAPI(params) 362 const response = await getMessagesListAPI(params)
......