# Home.vue
**路径**:`src/views/Home.vue`
## 功能用途
首页,展示分类导航栏(三层级)、事件卡片列表。支持分类筛选、搜索、下拉刷新、触底加载更多。底部 Footer 已抽成独立组件 `Footer.vue`。
## 核心能力
- **分类导航**:三层级分类选择(一级 Tab、二级文字标签、三级 Tab)
- **事件列表**:卡片式展示,支持下拉刷新、触底加载
- **搜索**:可按关键词搜索事件
- **分类筛选**:选中分类后,自动提取所有层级节点的 `tagIds` 进行事件筛选;切换语言时重新请求分类接口并刷新列表
- **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()
// 遍历每一层选中的节点,收集所有 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`