# 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`（含父级），用于事件筛选：

```typescript
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`