hookehuyr

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

- 添加搜索框清除事件处理
- 统一所有请求参数构建逻辑
- 移除前端过滤,完全依赖后端筛选
- 保持搜索条件不变时切换标签页
......@@ -8,7 +8,7 @@
</nut-col> -->
<nut-col span="24">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索消息" @blur="onBlurSearch" shape="round"
<nut-searchbar v-model="searchValue" placeholder="搜索消息" @blur="onBlurSearch" @clear="onBlurSearch" shape="round"
background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
......@@ -159,6 +159,7 @@ const mockMessages = ref([])
const pollMessages = async () => {
try {
// 静默获取数据,不显示loading状态
// 构建查询参数,同时包含状态筛选和关键字搜索
const params = {
page: 0,
limit: pageSize
......@@ -171,9 +172,9 @@ const pollMessages = async () => {
params.type = 'system' // 系统消息
}
// 如果有搜索关键词
if (searchValue.value) {
params.keyword = searchValue.value
// 同时添加搜索关键词(如果存在)
if (searchValue.value && searchValue.value.trim()) {
params.keyword = searchValue.value.trim()
}
const response = await getMessagesListAPI(params)
......@@ -231,7 +232,7 @@ const initData = async () => {
try {
loading.value = true
// 根据当前tab获取对应的消息类型和状态
// 构建查询参数,同时包含状态筛选和关键字搜索
const params = {
page: 0,
limit: pageSize
......@@ -244,9 +245,9 @@ const initData = async () => {
params.type = 'system' // 系统消息
}
// 如果有搜索关键词
if (searchValue.value) {
params.keyword = searchValue.value
// 同时添加搜索关键词(如果存在)
if (searchValue.value && searchValue.value.trim()) {
params.keyword = searchValue.value.trim()
}
const response = await getMessagesListAPI(params)
......@@ -287,25 +288,9 @@ const initData = async () => {
}
// 过滤后的对话列表
// 由于API已经根据状态和关键字进行了后端筛选,这里直接返回conversations
const filteredConversations = computed(() => {
let filtered = conversations.value
// 根据Tab过滤
if (activeTab.value === 'unread') {
filtered = filtered.filter(conv => conv.unread)
} else if (activeTab.value === 'system') {
filtered = filtered.filter(conv => conv.type === 'system')
}
// 根据搜索关键词过滤
if (searchValue.value) {
filtered = filtered.filter(conv =>
conv.name.includes(searchValue.value) ||
conv.lastMessage.includes(searchValue.value)
)
}
return filtered
return conversations.value
})
// Tab点击事件
......@@ -321,8 +306,7 @@ const setActiveTab = async (tabKey) => {
setTimeout(async () => {
activeTab.value = tabKey;
// 重置搜索条件
searchValue.value = '';
// 保持搜索关键字,不重置搜索条件
// 重置分页状态
page.value = 1;
hasMore.value = true;
......@@ -357,7 +341,7 @@ const loadMore = async () => {
try {
loading.value = true
// 构建请求参数
// 构建请求参数,同时包含状态筛选和关键字搜索
const params = {
page: page.value,
limit: pageSize
......@@ -370,9 +354,9 @@ const loadMore = async () => {
params.type = 'system' // 系统消息
}
// 如果有搜索关键词
if (searchValue.value) {
params.keyword = searchValue.value
// 同时添加搜索关键词(如果存在)
if (searchValue.value && searchValue.value.trim()) {
params.keyword = searchValue.value.trim()
}
const response = await getMessagesListAPI(params)
......