hookehuyr

fix(article): 文章列表页收藏状态与详情页同步

修复从文章详情页返回列表页时收藏状态未更新的问题。

- 在 material-list 页面添加 eventBus FAVORITES_UPDATE 事件监听
- 新增 handleFavoriteUpdate 函数处理来自详情页的收藏状态更新
- 使用 onMounted/onUnmounted 管理事件监听器生命周期
- 修复字段映射问题(metaId → id)

影响范围: src/pages/material-list/index.vue

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
......@@ -78,8 +78,8 @@
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { useLoad } from '@tarojs/taro'
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { useLoad, useDidShow } from '@tarojs/taro'
import NavHeader from '@/components/navigation/NavHeader.vue'
import SearchBar from '@/components/forms/SearchBar.vue'
import LoadMoreList from '@/components/list/LoadMoreList'
......@@ -89,6 +89,7 @@ import { listAPI } from '@/api/article'
import { mockArticleListAPI } from '@/utils/mockData'
import Taro from '@tarojs/taro'
import { USE_MOCK_DATA } from '@/config/app'
import eventBus, { Events } from '@/utils/eventBus'
// ⚠️ MOCK 数据开关 - 统一从 @/config/app 导入
// const USE_MOCK_DATA = process.env.NODE_ENV === 'development'
......@@ -663,14 +664,71 @@ const handleCollectChanged = (item, newStatus) => {
}
// 更新所有缓存中的收藏状态
categoryListCache.value.forEach((list, key) => {
categoryListCache.value.forEach((list) => {
const cachedArticle = list.find(a => a.id === item.id)
if (cachedArticle) {
cachedArticle.collected = newStatus.collected
}
})
}
</script>
/**
* 处理来自文章详情页的收藏更新事件
*
* @description 监听 eventBus 的 FAVORITES_UPDATE 事件,更新列表中的收藏状态
*/
const handleFavoriteUpdate = (payload) => {
console.log('[Article List] 收到收藏更新事件:', payload)
// eventBus 事件使用 metaId 字段,需要映射到 id
const metaId = payload.metaId
const collected = payload.collected
// 更新 allList 中的收藏状态
const article = allList.value.find(a => a.id === metaId)
if (article) {
article.collected = collected
console.log('[Article List] 已更新 allList 中的收藏状态:', article.title, collected)
}
// 更新 currentList 中的收藏状态(如果存在)
const currentArticle = currentList.value.find(a => a.id === metaId)
if (currentArticle) {
currentArticle.collected = collected
console.log('[Article List] 已更新 currentList 中的收藏状态:', currentArticle.title, collected)
}
// 更新所有缓存中的收藏状态
categoryListCache.value.forEach((list) => {
const cachedArticle = list.find(a => a.id === metaId)
if (cachedArticle) {
cachedArticle.collected = collected
}
})
}
/**
* 页面显示时刷新(从其他页面返回时)
*/
useDidShow(() => {
console.log('[Article List] 页面显示')
})
/**
* 组件挂载时注册事件监听器
*/
onMounted(() => {
console.log('[Article List] 注册收藏更新事件监听器')
eventBus.on(Events.FAVORITES_UPDATE, handleFavoriteUpdate)
})
/**
* 组件卸载时清理事件监听器
*/
onUnmounted(() => {
console.log('[Article List] 清理收藏更新事件监听器')
eventBus.off(Events.FAVORITES_UPDATE, handleFavoriteUpdate)
})</script>
<style lang="less">
// FilterTabs 风格的标签栏
......