更新Company页面的UI为FUI风格
This commit is contained in:
@@ -81,7 +81,7 @@ const DynamicNewsCardComponent = forwardRef(({
|
||||
// Refs
|
||||
const cardHeaderRef = useRef(null);
|
||||
const cardBodyRef = useRef(null);
|
||||
const virtualizedGridRef = useRef(null); // ⚡ VirtualizedFourRowGrid 的 ref（用于获取滚动位置）
|
||||
const mainlineRef = useRef(null); // MainlineTimelineView 的 ref
|
||||
|
||||
// 从 Redux 读取关注状态
|
||||
const eventFollowStatus = useSelector(selectEventFollowStatus);
|
||||
@@ -107,9 +107,9 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
||||
|
||||
// 根据模式选择数据源（使用 useMemo 缓存，避免重复计算）
|
||||
// 纵向模式：data 是页码映射 { 1: [...], 2: [...] }
|
||||
// 平铺模式 / 主线模式：data 是数组 [...] （共用 fourRowData）
|
||||
// 主线模式：使用独立 API，不需要 Redux 数据
|
||||
const modeData = useMemo(
|
||||
() => (currentMode === 'four-row' || currentMode === 'mainline') ? fourRowData : verticalData,
|
||||
() => currentMode === 'mainline' ? fourRowData : verticalData,
|
||||
[currentMode, fourRowData, verticalData]
|
||||
);
|
||||
const {
|
||||
@@ -128,7 +128,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
||||
[currentMode, data]
|
||||
);
|
||||
const allCachedEvents = useMemo(
|
||||
() => (currentMode === 'four-row' || currentMode === 'mainline') ? data : undefined,
|
||||
() => currentMode === 'mainline' ? data : undefined,
|
||||
[currentMode, data]
|
||||
);
|
||||
|
||||
@@ -243,14 +243,14 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
||||
} else {
|
||||
console.log(`[DynamicNewsCard] 纵向模式 + 第${state.currentPage}页 → 不刷新（避免打断用户）`);
|
||||
}
|
||||
} else if (mode === 'four-row' || mode === 'mainline') {
|
||||
// ========== 平铺模式 / 主线模式 ==========
|
||||
} else if (mode === 'mainline') {
|
||||
// ========== 主线模式 ==========
|
||||
// 检查滚动位置，只有在顶部时才刷新
|
||||
const scrollPos = virtualizedGridRef.current?.getScrollPosition();
|
||||
const scrollPos = mainlineRef.current?.getScrollPosition();
|
||||
|
||||
if (scrollPos?.isNearTop) {
|
||||
// 用户在顶部 10% 区域，安全刷新
|
||||
console.log(`[DynamicNewsCard] ${mode === 'mainline' ? '主线' : '平铺'}模式 + 滚动在顶部 → 刷新列表`);
|
||||
console.log(`[DynamicNewsCard] 主线模式 + 滚动在顶部 → 刷新列表`);
|
||||
handlePageChange(1); // 清空并刷新
|
||||
toast({
|
||||
title: '检测到新事件，已刷新',
|
||||
@@ -346,9 +346,9 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
||||
}
|
||||
}, [error, toast]);
|
||||
|
||||
// 四排模式的事件点击处理（打开弹窗）
|
||||
const handleFourRowEventClick = useCallback((event) => {
|
||||
console.log('%c🔲 [四排模式] 点击事件，打开详情弹窗', 'color: #8B5CF6; font-weight: bold;', { eventId: event.id, title: event.title });
|
||||
// 主线模式的事件点击处理（打开弹窗）
|
||||
const handleMainlineEventClick = useCallback((event) => {
|
||||
console.log('%c🔲 [主线模式] 点击事件，打开详情弹窗', 'color: #8B5CF6; font-weight: bold;', { eventId: event.id, title: event.title });
|
||||
|
||||
// 🎯 追踪事件详情打开
|
||||
if (trackingFunctions.trackNewsDetailOpened) {
|
||||
@@ -356,7 +356,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
||||
eventId: event.id,
|
||||
eventTitle: event.title,
|
||||
importance: event.importance,
|
||||
source: 'four_row_mode',
|
||||
source: 'mainline_mode',
|
||||
displayMode: 'modal',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
@@ -456,10 +456,13 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
||||
if (hasInitialized.current && isDataEmpty) {
|
||||
console.log(`%c🔄 [模式切换] ${mode} 模式数据为空，开始加载`, 'color: #8B5CF6; font-weight: bold;');
|
||||
|
||||
// 🔧 根据 mode 直接计算 per_page
|
||||
const modePageSize = mode === DISPLAY_MODES.FOUR_ROW
|
||||
? PAGINATION_CONFIG.FOUR_ROW_PAGE_SIZE // 30
|
||||
: PAGINATION_CONFIG.VERTICAL_PAGE_SIZE; // 10
|
||||
// 主线模式使用独立 API，不需要通过 Redux 加载
|
||||
if (mode === DISPLAY_MODES.MAINLINE) {
|
||||
console.log('%c 主线模式 - 由 MainlineTimelineView 自己加载数据', 'color: #8B5CF6;');
|
||||
return;
|
||||
}
|
||||
|
||||
const modePageSize = PAGINATION_CONFIG.VERTICAL_PAGE_SIZE; // 10
|
||||
|
||||
console.log(`%c 计算的 per_page: ${modePageSize} (mode: ${mode})`, 'color: #8B5CF6;');
|
||||
|
||||
@@ -468,8 +471,8 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
||||
per_page: modePageSize,
|
||||
pageSize: modePageSize,
|
||||
clearCache: true,
|
||||
...filters, // 先展开筛选条件
|
||||
page: PAGINATION_CONFIG.INITIAL_PAGE, // 然后覆盖 page 参数
|
||||
...filters,
|
||||
page: PAGINATION_CONFIG.INITIAL_PAGE,
|
||||
}));
|
||||
}
|
||||
}, [mode, currentMode, allCachedEventsByPage, allCachedEvents, dispatch, filters]); // 添加 filters 依赖
|
||||
@@ -664,11 +667,8 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
||||
{/* 列表内容 - 始终渲染 */}
|
||||
<EventScrollList
|
||||
events={currentPageEvents}
|
||||
displayEvents={displayEvents} // 累积显示的事件列表（平铺模式）
|
||||
filters={filters} // 筛选条件（主线模式用）
|
||||
loadNextPage={loadNextPage} // 加载下一页
|
||||
loadPrevPage={loadPrevPage} // 加载上一页
|
||||
onFourRowEventClick={handleFourRowEventClick} // 四排模式事件点击
|
||||
filters={filters}
|
||||
onMainlineEventClick={handleMainlineEventClick}
|
||||
selectedEvent={selectedEvent}
|
||||
onEventSelect={setSelectedEvent}
|
||||
borderColor={borderColor}
|
||||
@@ -680,8 +680,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
|
||||
mode={mode}
|
||||
eventFollowStatus={eventFollowStatus}
|
||||
onToggleFollow={handleToggleFollow}
|
||||
hasMore={hasMore}
|
||||
virtualizedGridRef={virtualizedGridRef} // ⚡ 传递 ref 给 VirtualizedFourRowGrid
|
||||
mainlineRef={mainlineRef}
|
||||
/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
|
||||
Reference in New Issue
Block a user