vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: feat: 优化事件卡片 UI 和交互体验

Browse Source 
修复 useColorModeValue 调用位置（提升到顶层）
优化分页和滚动逻辑
动态 indicatorSize 支持（detail/list 模式）
This commit is contained in:
zdl
2025-11-05 19:15:36 +08:00
parent 27b68e928e
commit 612b58c983
4 changed files with 66 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/views/Community/components/DynamicNewsCard/hooks/usePagination.js
View File

@@ -34,16 +34,12 @@ export const usePagination = ({ allCachedEvents, total, cachedCount, dispatch, t
// 根据模式决定每页显示数量
const pageSize = (() => {
switch (mode) {
case DISPLAY_MODES.CAROUSEL:
return PAGINATION_CONFIG.CAROUSEL_PAGE_SIZE;
case DISPLAY_MODES.GRID:
return PAGINATION_CONFIG.GRID_PAGE_SIZE;
case DISPLAY_MODES.FOUR_ROW:
return PAGINATION_CONFIG.FOUR_ROW_PAGE_SIZE;
case DISPLAY_MODES.VERTICAL:
return PAGINATION_CONFIG.VERTICAL_PAGE_SIZE;
default:
return PAGINATION_CONFIG.CAROUSEL_PAGE_SIZE;
return PAGINATION_CONFIG.VERTICAL_PAGE_SIZE;
}
})();
@@ -126,20 +122,37 @@ export const usePagination = ({ allCachedEvents, total, cachedCount, dispatch, t
try {
console.log(`%c🟢 [API请求] 开始加载第${targetPage}页数据`, 'color: #16A34A; font-weight: bold;');
console.log(`%c 请求参数: page=${targetPage}, per_page=${pageSize}`, 'color: #16A34A;');
console.log(`%c 请求参数: page=${targetPage}, per_page=${pageSize}, mode=${mode}`, 'color: #16A34A;');
console.log(`%c 筛选条件:`, 'color: #16A34A;', filters);
logger.debug('DynamicNewsCard', '开始加载页面数据', {
targetPage,
pageSize
pageSize,
mode,
filters
});
await dispatch(fetchDynamicNews({
// 🔍 调试：dispatch 前
console.log(`%c🔵 [dispatch] 准备调用 fetchDynamicNews`, 'color: #3B82F6; font-weight: bold;', {
mode,
page: targetPage,
per_page: pageSize,
pageSize,
clearCache: false,
filters
});
const result = await dispatch(fetchDynamicNews({
mode: mode, // 传递 mode 参数
per_page: pageSize,
pageSize: pageSize,
clearCache: false
clearCache: false,
...filters, // 先展开筛选条件
page: targetPage, // 然后覆盖 page 参数（避免被 filters.page 覆盖）
})).unwrap();
// 🔍 调试：dispatch 后
console.log(`%c🔵 [dispatch] fetchDynamicNews 返回结果`, 'color: #3B82F6; font-weight: bold;', result);
console.log(`%c🟢 [API请求] 第${targetPage}页加载完成`, 'color: #16A34A; font-weight: bold;');
logger.debug('DynamicNewsCard', `第 ${targetPage} 页加载完成`);
@@ -185,10 +198,12 @@ export const usePagination = ({ allCachedEvents, total, cachedCount, dispatch, t
logger.debug('DynamicNewsCard', '返回第一页，清空缓存重新加载');
setCurrentPage(1);
dispatch(fetchDynamicNews({
page: 1,
mode: mode, // 传递 mode 参数
per_page: pageSize,
pageSize: pageSize,
clearCache: true // 清空缓存
clearCache: true, // 清空缓存
...filters, // 先展开筛选条件
page: 1, // 然后覆盖 page 参数
}));
return;
}
@@ -305,7 +320,7 @@ export const usePagination = ({ allCachedEvents, total, cachedCount, dispatch, t
}
}, [currentPage, loadingPage, handlePageChange]);
// 模式切换处理
// 模式切换处理（简化版 - 模式切换时始终请求数据，因为两种模式使用独立存储）
const handleModeToggle = useCallback((newMode) => {
if (newMode === mode) return;
@@ -314,36 +329,15 @@ export const usePagination = ({ allCachedEvents, total, cachedCount, dispatch, t
const newPageSize = (() => {
switch (newMode) {
case DISPLAY_MODES.CAROUSEL:
return PAGINATION_CONFIG.CAROUSEL_PAGE_SIZE;
case DISPLAY_MODES.GRID:
return PAGINATION_CONFIG.GRID_PAGE_SIZE;
case DISPLAY_MODES.FOUR_ROW:
return PAGINATION_CONFIG.FOUR_ROW_PAGE_SIZE;
case DISPLAY_MODES.VERTICAL:
return PAGINATION_CONFIG.VERTICAL_PAGE_SIZE;
default:
return PAGINATION_CONFIG.CAROUSEL_PAGE_SIZE;
return PAGINATION_CONFIG.VERTICAL_PAGE_SIZE;
}
})();
// 检查第1页的数据是否完整（排除 null）
const firstPageData = allCachedEvents.slice(0, newPageSize);
const validFirstPageCount = firstPageData.filter(e => e !== null).length;
const needsRefetch = validFirstPageCount < Math.min(newPageSize, total);
if (needsRefetch) {
// 第1页数据不完整，清空缓存重新请求
dispatch(fetchDynamicNews({
page: 1,
per_page: newPageSize,
pageSize: newPageSize, // 传递 pageSize 确保索引计算一致
clearCache: true,
...filters // 应用筛选条件
}));
}
// 如果第1页数据完整，不发起请求，直接切换
}, [mode, allCachedEvents, total, dispatch, filters]);
}, [mode]);
return {
// 状态