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

更新Company页面的UI为FUI风格

Browse Source
This commit is contained in:
zzlgreat
2025-12-21 23:40:02 +08:00
parent d9b804c46c
commit 54b7d9fc89
5 changed files with 1042 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/Community/components/DynamicNews/DynamicNewsCard.js
View File

@@ -377,14 +377,18 @@ const [currentMode, setCurrentMode] = useState('vertical');
// 添加防抖：如果已经初始化，不再执行
if (hasInitialized.current) return;
// mainline 模式使用 four-row 的 API 模式（共用数据）
const apiMode = mode === DISPLAY_MODES.MAINLINE ? DISPLAY_MODES.FOUR_ROW : mode;
// ⚡ mainline 模式使用独立 API，不需要通过 Redux 获取数据
if (mode === DISPLAY_MODES.MAINLINE) {
hasInitialized.current = true;
console.log('%c🚀 [初始加载] 主线模式 - 组件自己调用 /api/events/mainline', 'color: #10B981; font-weight: bold;');
return;
}
// ⚡ 始终获取最新数据，确保用户每次进入页面看到最新事件
hasInitialized.current = true;
console.log('%c🚀 [初始加载] 获取最新事件数据', 'color: #10B981; font-weight: bold;', { mode, apiMode, pageSize });
console.log('%c🚀 [初始加载] 获取最新事件数据', 'color: #10B981; font-weight: bold;', { mode, pageSize });
dispatch(fetchDynamicNews({
mode: apiMode, // 传递 API 模式（mainline 映射为 four-row）
mode,
per_page: pageSize,
pageSize: pageSize, // 传递 pageSize 确保索引计算一致
clearCache: true,
@@ -412,14 +416,17 @@ const [currentMode, setCurrentMode] = useState('vertical');
return;
}
// mainline 模式使用 four-row 的 API 模式（共用数据）
const apiMode = mode === DISPLAY_MODES.MAINLINE ? DISPLAY_MODES.FOUR_ROW : mode;
// ⚡ mainline 模式使用独立 API，筛选条件变化由 MainlineTimelineView 自己监听
if (mode === DISPLAY_MODES.MAINLINE) {
console.log('%c🔍 [筛选] 主线模式 - 筛选条件变化由组件自己处理', 'color: #8B5CF6; font-weight: bold;', { filters });
return;
}
console.log('%c🔍 [筛选] 筛选条件改变，重新请求数据', 'color: #8B5CF6; font-weight: bold;', { filters, mode, apiMode });
console.log('%c🔍 [筛选] 筛选条件改变，重新请求数据', 'color: #8B5CF6; font-weight: bold;', { filters, mode });
// 筛选条件改变时，清空对应模式的缓存并从第1页开始加载
dispatch(fetchDynamicNews({
mode: apiMode, // 传递 API 模式（mainline 映射为 four-row）
mode,
per_page: pageSize,
pageSize: pageSize,
clearCache: true, // 清空缓存
@@ -442,6 +449,12 @@ const [currentMode, setCurrentMode] = useState('vertical');
// 监听模式切换 - 如果新模式数据为空，请求数据
useEffect(() => {
// ⚡ mainline 模式使用独立 API，不需要通过 Redux 加载数据
if (mode === DISPLAY_MODES.MAINLINE) {
console.log('%c🔄 [模式切换] 主线模式 - 由 MainlineTimelineView 组件自己加载数据', 'color: #8B5CF6; font-weight: bold;');
return;
}
const isDataEmpty = currentMode === 'vertical'
? Object.keys(allCachedEventsByPage || {}).length === 0
: (allCachedEvents?.length || 0) === 0;
@@ -449,20 +462,16 @@ const [currentMode, setCurrentMode] = useState('vertical');
if (hasInitialized.current && isDataEmpty) {
console.log(`%c🔄 [模式切换] ${mode} 模式数据为空，开始加载`, 'color: #8B5CF6; font-weight: bold;');
// 🔧 根据 mode 直接计算 per_page，避免使用可能过时的 pageSize prop
// mainline 模式复用 four-row 的分页大小
const modePageSize = (mode === DISPLAY_MODES.FOUR_ROW || mode === DISPLAY_MODES.MAINLINE)
// 🔧 根据 mode 直接计算 per_page
const modePageSize = mode === DISPLAY_MODES.FOUR_ROW
? PAGINATION_CONFIG.FOUR_ROW_PAGE_SIZE // 30
: PAGINATION_CONFIG.VERTICAL_PAGE_SIZE; // 10
// mainline 模式使用 four-row 的 API 模式（共用数据）
const apiMode = mode === DISPLAY_MODES.MAINLINE ? DISPLAY_MODES.FOUR_ROW : mode;
console.log(`%c 计算的 per_page: ${modePageSize}, apiMode: ${apiMode} (mode: ${mode})`, 'color: #8B5CF6;');
console.log(`%c 计算的 per_page: ${modePageSize} (mode: ${mode})`, 'color: #8B5CF6;');
dispatch(fetchDynamicNews({
mode: apiMode, // 使用映射后的 API 模式
per_page: modePageSize, // 使用计算的值，不是 pageSize prop
mode,
per_page: modePageSize,
pageSize: modePageSize,
clearCache: true,
...filters, // 先展开筛选条件
@@ -662,6 +671,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
<EventScrollList
events={currentPageEvents}
displayEvents={displayEvents} // 累积显示的事件列表（平铺模式）
filters={filters} // 筛选条件（主线模式用）
loadNextPage={loadNextPage} // 加载下一页
loadPrevPage={loadPrevPage} // 加载上一页
onFourRowEventClick={handleFourRowEventClick} // 四排模式事件点击