70 lines
2.0 KiB
Markdown
70 lines
2.0 KiB
Markdown
# Home.vue
|
||
|
||
**路径**：`src/views/Home.vue`
|
||
|
||
## 功能用途
|
||
|
||
首页，展示分类导航栏（三层级）、事件卡片列表。支持分类筛选、搜索、下拉刷新、触底加载更多。
|
||
|
||
## 核心能力
|
||
|
||
- **分类导航**：三层级分类选择（一级 Tab、二级图标、三级 Tab）
|
||
- **事件列表**：卡片式展示，支持下拉刷新、触底加载
|
||
- **搜索**：可按关键词搜索事件
|
||
- **分类筛选**：选中分类后，自动提取所有层级节点的 `tagIds` 进行事件筛选
|
||
|
||
## 数据流
|
||
|
||
```
|
||
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`
|