feat: 集成四排/纵向模式UI和优化交互逻辑

VirtualizedFourRowGrid:
- 组件通用化,支持多列布局(通过 columnsPerRow 参数配置)
- 支持自定义卡片组件(通过 CardComponent 参数传入)
- 根据列数动态调整间距

EventScrollList:
- 添加四排和纵向模式切换按钮
- 集成 VirtualizedFourRowGrid 组件(四排模式使用4列,纵向模式使用1列)
- 添加纵向分栏布局(1:2 比例,左侧列表+右侧详情)
- 启用纵向滚动和统一滚动条样式
- 接收新 props: displayEvents, isAccumulateMode, loadNextPage, onFourRowEventClick

DynamicNewsCard:
- 添加 Modal 弹窗显示四排模式详情
- 优化自动选中逻辑:
  · 首次加载时自动选中第一个事件
  · 翻页时,单排/双排/纵向模式自动选中当前页第一个事件(保持详情显示)
  · 翻页时,四排模式清空选中状态(通过弹窗显示详情)
- 传递新 props 到 EventScrollList
- 添加调试日志
This commit is contained in:
zdl
2025-11-05 08:56:44 +08:00
parent be0c53b588
commit f9387ffbd9
3 changed files with 198 additions and 21 deletions

View File

@@ -19,7 +19,7 @@ export const DISPLAY_MODES = {
VERTICAL: 'vertical', // 纵向分栏模式
};
export const DEFAULT_MODE = DISPLAY_MODES.CAROUSEL;
export const DEFAULT_MODE = DISPLAY_MODES.VERTICAL;
// ========== Toast 提示配置 ==========
export const TOAST_CONFIG = {