修复:点击标签多次请求问题,加入防抖机制

This commit is contained in:
马丁 2026-04-16 00:08:07 +08:00
parent 2ceb735d48
commit 07291abcf7

View File

@ -216,7 +216,7 @@ const props = withDefaults(
{ initialSearchExpanded: false },
)
defineOptions({ name: 'Home' })
defineOptions({ name: 'HomePage' })
import {
ref,
onMounted,
@ -320,24 +320,6 @@ function filterVisible(nodes: CategoryTreeNode[] | undefined): CategoryTreeNode[
return nodes.filter((n) => n.forceShow !== false && !n.forceHide)
}
/** 第三层区块标题:取当前选中的第一层节点的 sectionTitle 或 label */
const selectedLayer0SectionTitle = computed(() => {
const root = filterVisible(categoryTree.value)
const id = layerActiveValues.value[0]
const node = id ? root.find((n) => n.id === id) : root[0]
return node?.sectionTitle ?? node?.label ?? ''
})
/** 从树中递归查找节点 */
function findNodeById(nodes: CategoryTreeNode[], id: string): CategoryTreeNode | undefined {
for (const n of nodes) {
if (n.id === id) return n
const found = n.children ? findNodeById(n.children, id) : undefined
if (found) return found
}
return undefined
}
/** 当前选中分类的 tagIds收集所有选中层级节点的 tagId 数组(含父级),用于事件筛选 */
const activeTagIds = computed(() => {
const activeIds = layerActiveValues.value
@ -384,6 +366,14 @@ const categoryLayers = computed(() => {
/** 分类选中时:若有 children 则展开下一层并默认选中第一个,并重新加载列表 */
function onCategorySelect(layerIndex: number, selectedId: string) {
if (!selectedId || layerActiveValues.value[layerIndex] === selectedId) {
return
}
if (categorySelectTimer) {
clearTimeout(categorySelectTimer)
}
const nextValues = [...layerActiveValues.value]
nextValues[layerIndex] = selectedId
nextValues.length = layerIndex + 1
@ -401,7 +391,11 @@ function onCategorySelect(layerIndex: number, selectedId: string) {
clearEventListCache()
eventPage.value = 1
loadEvents(1, false)
categorySelectTimer = setTimeout(() => {
categorySelectTimer = null
loadEvents(1, false)
}, 100)
}
/** 初始化分类选中:默认选中第一个,若有 children 则递归展开 */
@ -424,6 +418,9 @@ function initCategorySelection() {
const PAGE_SIZE = 10
/** 分类切换时的防抖状态,防止重复请求 */
let categorySelectTimer: ReturnType<typeof setTimeout> | null = null
/** 接口返回的列表(已映射为卡片所需结构) */
const eventList = ref<EventCardItem[]>([])
/** 当前页码(从 1 开始) */
@ -613,6 +610,7 @@ async function loadEvents(page: number, append: boolean, keyword?: string) {
pageSize: eventPageSize.value,
})
} catch (e) {
console.log(e)
if (!append) eventList.value = []
} finally {
if (!append) eventListLoading.value = false