xtraderClient/docs/views/Home.md

Home.vue

路径：src/views/Home.vue

功能用途

首页，展示分类导航栏（三层级）、事件卡片列表。支持分类筛选、搜索、下拉刷新、触底加载更多。底部 Footer 已抽成独立组件 Footer.vue。

核心能力

• 分类导航：三层级分类选择（一级 Tab、二级图标、三级 Tab）
• 事件列表：卡片式展示，支持下拉刷新、触底加载
• 搜索：可按关键词搜索事件
• 分类筛选：选中分类后，自动提取所有层级节点的 tagIds 进行事件筛选
• Footer：使用 <Footer /> 组件，包含品牌、链接、语言选择、免责声明

数据流

PmTagCatalogItem.tagId = [1351]
    ↓ mapCatalogToTreeNode
CategoryTreeNode.tagIds = [1351]
    ↓ 用户选择分类（如：政治 → 特朗普）
activeTagIds = [1351, 1368]  // 合并所有选中层级的 tagIds
    ↓ getPmEventPublic
?tagIds=1351&tagIds=1368

核心计算属性

activeTagIds

收集所有选中层级节点的 tagIds（含父级），用于事件筛选：

const activeTagIds = computed(() => {
  const activeIds = layerActiveValues.value
  const tagIdSet = new Set<number>()
  
  // 遍历每一层选中的节点，收集所有 tagIds（含父级）
  let currentNodes = filterVisible(categoryTree.value)
  for (let i = 0; i < activeIds.length; i++) {
    const selectedId = activeIds[i]
    if (!selectedId) continue
    
    const node = currentNodes.find((n) => n.id === selectedId)
    if (node?.tagIds && node.tagIds.length > 0) {
      node.tagIds.forEach((id) => tagIdSet.add(id))
    }
    
    currentNodes = filterVisible(node?.children)
  }
  
  return Array.from(tagIdSet)  // 去重后的数组
})

示例：

• 选中「政治」（tagIds: [1351]）→ activeTagIds = [1351]
• 选中「政治 → 特朗普」（tagIds: [1351] + [1368]）→ activeTagIds = [1351, 1368]

使用方式

无需手动调用，路由 / 自动加载。

扩展方式

1. 新增分类层级：修改 MAX_LAYER 常量，调整模板渲染逻辑
2. 自定义筛选逻辑：修改 activeTagIds 计算属性
3. 列表缓存策略：调整 getEventListCache / setEventListCache