vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
963 Commits 30 Branches 1 Tag
900aff17dfa2e401197b35ecdcca38c2404b2bbf
Commit Graph

65 Commits

Author SHA1 Message Date
zdl
a8d4245595 pref: 文案调整 2025-11-26 17:49:39 +08:00
zdl
e0b7f8c59d feat: 调整事件列表h5模式调整 2025-11-26 16:44:53 +08:00
zdl
990d1ca0bc perf: 使用 React.memo 优化社区组件渲染性能 
**优化目标**:
- 减少组件卸载次数：从 6 次/刷新 → 1-2 次/刷新（↓ 66-83%）
- 减少渲染次数：从 9 次/刷新 → 4-5 次/刷新（↓ 44-55%）

**优化组件**（共 7 个）:
1. ✅ ModeToggleButtons.js - 简单 UI 组件
2. ✅ DynamicNewsEventCard.js - 平铺模式卡片（被渲染 30+ 次）
3. ✅ HorizontalDynamicNewsEventCard.js - 纵向模式卡片（被渲染 10+ 次）
4. ✅ VerticalModeLayout.js - 布局组件
5. ✅ EventScrollList.js - 列表组件
6. ✅ VirtualizedFourRowGrid.js - 虚拟化网格（forwardRef）
7. ✅ DynamicNewsCard.js - 主组件（forwardRef）

**技术实现**:
- 普通组件：`React.memo(Component)`
- forwardRef 组件：`React.memo(forwardRef(...))`
- 所有回调函数已使用 useCallback 确保引用稳定

**预期效果**:
- 列表渲染的卡片组件收益最大（减少 90% 重渲染）
- 布局组件渲染次数从 9 次降到 1 次（减少 88%）
- 整体用户体验更流畅，无明显卡顿

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-17 15:00:46 +08:00
zdl
3cadd02492 fix: 修复 Socket 新事件通知后不刷新列表的问题 
问题描述：
- 用户在第1页时收到新事件 Socket 通知
- 系统调用 handlePageChange(1) 想要刷新列表
- 但列表未刷新，新事件不显示
- 控制台日志显示"⚠️ 重复点击当前页: 1"

根本原因：
- usePagination 的 handlePageChange 函数有"重复点击"检查
- 当 newPage === currentPage 时直接 return（第 169-174 行）
- Socket 新事件触发刷新时，当前在第1页，调用 handlePageChange(1)
- 函数误认为是"用户重复点击分页按钮"，阻止了刷新

设计冲突：
- 原始设计：防止用户重复点击分页按钮，避免不必要的 API 请求 ✅
- 副作用：阻止了 Socket 新事件触发的强制刷新逻辑 ❌

修复方案（添加 force 参数）：
1. 修改 handlePageChange 函数签名：(newPage, force = false)
   - force = true: 强制刷新（绕过"重复点击"检查）
   - force = false: 正常翻页（保留原有检查）

2. 修改边界检查逻辑（第 173-184 行）：
   - 只有在非强制模式下才检查重复点击
   - 强制模式下，即使页码相同也继续执行
   - 添加日志：🔄 [翻页] 强制刷新当前页

3. 修改 Socket 新事件刷新调用（DynamicNewsCard.js:231）：
   - 修改前：handlePageChange(1)
   - 修改后：handlePageChange(1, true)  // force = true

修改文件：
- src/views/Community/components/DynamicNewsCard/hooks/usePagination.js
  - 第 161 行：修改函数签名（添加 force 参数）
  - 第 173-184 行：修改边界检查逻辑（添加 force 判断）

- src/views/Community/components/DynamicNewsCard.js
  - 第 230-231 行：修改 handlePageChange 调用（传递 force: true）

修复效果：
- ✅ 收到新事件后，第1页强制刷新并显示新事件
- ✅ 保留原有的"重复点击"优化（普通翻页）
- ✅ 不影响其他页面的用户体验（第2页及以上不打断）
- ✅ 清晰的日志区分：
  - 🔄 [翻页] 强制刷新当前页: 1（强制刷新）
  - ⚠️ [翻页] 重复点击当前页: 2（阻止重复点击）

🤖 Generated with Claude Code
 2025-11-17 12:12:01 +08:00
zdl
ddd6b2d4af feat: 实现 Socket 触发的智能列表自动刷新功能（带防抖） 
核心改动：
- 扩展 NotificationContext，添加事件更新回调注册机制
- VirtualizedFourRowGrid 添加 forwardRef 暴露 getScrollPosition 方法
- DynamicNewsCard 实现智能刷新逻辑（根据模式和滚动位置判断是否刷新）
- Community 页面注册 Socket 回调自动触发刷新
- 创建 TypeScript 通用防抖工具函数（debounce.ts）
- 集成防抖机制（2秒延迟），避免短时间内频繁请求

智能刷新策略：
- 纵向模式 + 第1页：自动刷新列表
- 纵向模式 + 其他页：不刷新（避免打断用户）
- 平铺模式 + 滚动在顶部：自动刷新列表
- 平铺模式 + 滚动不在顶部：仅显示 Toast 提示

防抖效果：
- 短时间内收到多个新事件，只执行最后一次刷新
- 减少服务器压力，提升用户体验

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-14 19:04:00 +08:00
zzlgreat
8c93606769 update ui 2025-11-14 07:42:18 +08:00
zzlgreat
eac3b09a95 update ui 2025-11-14 07:25:12 +08:00
zzlgreat
5e70f4443d update ui 2025-11-14 06:39:29 +08:00
zzlgreat
f0bb00a2ce update ui 2025-11-13 22:35:33 +08:00
zzlgreat
c6062efb00 update ui 2025-11-13 22:21:59 +08:00
zzlgreat
fbf6813615 事件中心有引用的相关详情样式调整 2025-11-10 10:18:55 +08:00
zdl
207701bbde feat: 修改列表默认状态 2025-11-07 20:05:14 +08:00
zdl
44b8c64907 feat(community): 列表模式事件卡片高度自适应 2025-11-07 19:25:10 +08:00
zdl
5ceffc53d6 feat: 事件中心详情面板Ui调整 2025-11-07 18:39:49 +08:00
zdl
fef9087c47 feat: 调整事件详情滑动不触发外部页面滑动 2025-11-07 15:11:18 +08:00
zdl
319a78d34c fix: 修复分页、筛选和模式切换相关问题 
主要修复：
1. 修复模式切换时 per_page 参数错误
   - 在 useEffect 内直接根据 mode 计算 per_page
   - 避免使用可能过时的 pageSize prop

2. 修复 DISPLAY_MODES 未定义错误
   - 在 DynamicNewsCard.js 中导入 DISPLAY_MODES 常量

3. 添加空状态显示
   - VerticalModeLayout 添加无数据时的友好提示
   - 显示图标和提示文字，引导用户调整筛选条件

4. 修复无限请求循环问题
   - 移除模式切换 useEffect 中的 filters 依赖
   - 避免筛选和模式切换 useEffect 互相触发

5. 修复筛选参数传递问题
   - usePagination 使用 useRef 存储最新 filters
   - 避免 useCallback 闭包捕获旧值
   - 修复时间筛选参数丢失问题

6. 修复分页竞态条件
   - 允许用户在加载时切换到不同页面
   - 只阻止相同页面的重复请求

涉及文件：
- src/views/Community/components/DynamicNewsCard.js
- src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
- src/views/Community/components/DynamicNewsCard/hooks/usePagination.js
- src/views/Community/hooks/useEventFilters.js
- src/store/slices/communityDataSlice.js
- src/views/Community/components/UnifiedSearchBox.js

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 17:39:03 +08:00
zdl
42808501b0 refactor: 删除 FilterModal 筛选弹窗组件 
- 移除 FilterModal.js 文件
- 简化组件结构，筛选功能保留在 CardHeader 的 UnifiedSearchBox 中

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 15:33:36 +08:00
zdl
291362b88d feat: VerticalModeLayout 详情/列表模式自动切换 
- 点击事件自动切换到详情模式
- 切换到列表模式时重置详情面板（通过 key 强制重新渲染）
- 添加独立滚动容器，支持左右两侧独立滚动
- 优化布局高度控制，使用 h="100%" 撑满父容器

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 14:13:06 +08:00
zdl
f5328ec3a1 fix: 修复 EventScrollList 和 EventDetailScrollPanel 布局问题 
- EventScrollList.js: 添加 h="100%" 和 data-scroll-container 属性，支持独立滚动
- EventDetailScrollPanel.js: 移除 maxHeight 限制，允许详情面板撑满容器高度
- 修复布局显示问题，优化滚动体验

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 14:12:05 +08:00
zdl
52cf950b21 feat: 创建 FilterModal 筛选弹窗组件 
- 新增 FilterModal.js 组件，用于在固定模式下显示筛选弹窗
- 复用 UnifiedSearchBox 组件实现筛选功能
- 支持 mode 和 pageSize 参数传递
- 添加 scrollBehavior="outside" 避免下拉菜单被遮挡

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 14:09:59 +08:00
zdl
5ff8db8899 pref: UI优化 2025-11-06 11:35:10 +08:00
zdl
116594d9b1 pref: 去掉无用代码 2025-11-06 10:26:43 +08:00
zdl
ebb737427f fix: 优化模式切换体验和渲染逻辑 
## 问题修复
1. 模式切换时不再闪现"暂无事件数据"
2. 模式切换按钮始终可见，不会因加载状态而隐藏

## 技术改进
- 将控制栏（模式切换+分页）提取到 EventScrollList 外层
- 使用 mode（立即同步）而非 currentMode（延迟一帧）检查缓存
- 优化渲染顺序：loading → 数据 → 空状态，避免闪烁

## 文件修改
- DynamicNewsCard.js: 添加控制栏导入，优化渲染逻辑
- EventScrollList.js: 移除重复的控制栏代码

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 01:40:24 +08:00
zdl
a5e001d975 refactor: 优化分页存储架构和缓存逻辑... 2025-11-06 01:20:07 +08:00
zdl
adf6fc7780 feat:平铺模式 | ❌ 隐藏顶部分页控制器" 2025-11-05 22:34:07 +08:00
zdl
6930878ff6 refactor: 删除未使用的 lastUpdated 和 cachedCount 状态 
- 删除 initialState 中的 lastUpdated 和 cachedCount
  - 删除所有 reducer 中相关的设置代码
  - 更新 selectors 使用 .length 替代 cachedCount
  - 删除 shouldRefresh 工具函数

  简化理由：
  - lastUpdated 未被使用
  - cachedCount 可以通过 events.length 直接获取
 2025-11-05 22:33:25 +08:00
zdl
25a6ff164b feat: 翻页bugfix 2025-11-05 19:28:17 +08:00
zdl
612b58c983 feat: feat: 优化事件卡片 UI 和交互体验 
修复 useColorModeValue 调用位置（提升到顶层）
优化分页和滚动逻辑
动态 indicatorSize 支持（detail/list 模式）
 2025-11-05 19:15:36 +08:00
zdl
2e89469d05 feat: 调整纵向列表UI 2025-11-05 17:50:33 +08:00
zdl
c3ef837221 feat: 纵向详情列表高度控制 2025-11-05 17:33:28 +08:00
zdl
870b1f5996 feat: 多列布局ui调整 2025-11-05 17:30:21 +08:00
zdl
bc2a3b71c0 pref: 代码优化 2025-11-05 17:08:01 +08:00
zdl
0765f8a800 feat: 纵向布局分页模式优化 2025-11-05 15:20:43 +08:00
zdl
263ecd77b3 feat: 添加详情面板和事件详情切换按钮 2025-11-05 14:08:03 +08:00
zdl
b6862aff4f feat: 提取 EventDetailScrollPanel 2025-11-05 14:00:22 +08:00
zdl
327cfc09e2 feat: 提取VerticalModeLayout - 提升可读性，但耦合度中等 2025-11-05 13:57:05 +08:00
zdl
f5d340aa05 feat: 提取VerticalModeLayout - 提升可读性，但耦合度中等 2025-11-05 13:56:52 +08:00
zdl
0da18e868a refactor: 提取 ModeToggleButtons 为独立子组件 
问题：
- EventScrollList 组件中模式切换按钮代码内联（17行）
- 降低代码可读性和可维护性
- 按钮组无法在其他地方复用

修改：
1. 新建 ModeToggleButtons.js 独立组件
   - 接收 mode 和 onModeChange 两个 props
   - 包含完整的 JSDoc 注释
   - 支持 vertical（纵向）和 four-row（平铺）两种模式

2. 重构 EventScrollList.js
   - 删除未使用的 import（Button, ButtonGroup）
   - 导入 ModeToggleButtons 组件
   - 替换 17 行内联代码为 1 行组件调用
   - 代码净减少 14 行

效果：
- ✅ 职责分离：模式切换逻辑独立封装
- ✅ 可复用性：其他页面可直接导入使用
- ✅ 易维护性：修改按钮样式只需改一个文件
- ✅ 易测试性：可单独编写单元测试
- ✅ 代码简洁：EventScrollList 更简洁易读

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 13:44:34 +08:00
zdl
0f7693939a refactor: 删除单排和双排模式，简化事件列表展示 
问题：
- 事件列表组件包含4种模式（单排/双排/纵向/平铺）
- 单排（carousel）和双排（grid）模式代码已被注释，未实际使用
- 保留未使用代码增加维护成本和代码复杂度

修改：
1. 删除未使用的 import（DynamicNewsEventCard, CompactEventCard, Spinner, HStack）
2. 删除加载遮罩相关代码（仅单排/双排模式使用）
3. 删除已注释的单排/双排切换按钮代码
4. 删除单排轮播模式完整实现（~32行）
5. 删除双排网格模式完整实现（~33行）
6. 更新组件注释：明确只支持纵向和平铺两种模式
7. 更新默认模式：carousel → vertical
8. 简化条件判断（overflowX/overflowY/maxH）

效果：
- 代码从 361 行缩减到 254 行（删除 ~107 行）
- 只保留两种实际使用的模式：纵向（vertical）和平铺（four-row）
- 降低代码复杂度，提升可维护性

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 13:37:18 +08:00
zdl
8bd7801753 feat: 平铺模式隐藏分页控制，改用无限滚动 
问题：
- 平铺模式使用虚拟滚动+无限滚动加载数据
- 但仍显示传统分页控制器和翻页按钮
- 分页控制与无限滚动机制冲突，用户体验不一致

修复：
- 平铺模式下隐藏 PaginationControl（分页控制器）
- 平铺模式下隐藏 PageNavigationButton（左右翻页按钮）
- 添加注释说明：平铺模式使用无限滚动

效果：
- 平铺模式：✅ 仅显示模式切换按钮，使用无限滚动
- 其他模式（纵向/单排/双排）：✅ 保持分页控制器和翻页按钮

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 13:22:10 +08:00
zdl
ea0428321b fix: 修复纵向模式右侧详情面板滚动问题 
问题描述：
- 纵向模式下，展开"相关股票"等内容后，整个页面滚动而不是右侧详情面板内部滚动
- 右侧详情面板没有独立的滚动条

根本原因：
- 外层容器没有高度限制，随内容无限增长
- Grid 使用 minH/maxH 而非固定高度
- 内层 Box 的 overflow 样式被 Chakra UI 默认样式覆盖

解决方案：
1. 外层容器（line 160）：添加纵向模式的最大高度限制 820px
2. Grid（line 293）：使用固定高度 h="800px" 替代 minH/maxH
3. 右侧 Box（line 315-337）：
   - 使用 sx prop + !important 强制应用 overflow 和 height 样式
   - 滚动条宽度优化为 3px（原 1px 太细，临时 8px 太粗）
   - 使用动态颜色变量保持主题一致性

修改文件：
- src/views/Community/components/DynamicNewsCard/EventScrollList.js

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 11:07:41 +08:00
zdl
bf89c0e13e fix: 修复纵向模式右侧详情折叠展开后无法滑动的问题 
问题描述:
- 纵向模式下，右侧详情面板中的折叠区块（相关股票、历史事件等）展开后
- 右侧面板无法滚动，用户无法查看完整内容

根本原因:
- Chakra UI Collapse 组件在动画过程中设置 overflow: hidden
- 动画结束后可能没有正确恢复，影响父容器的滚动功能
- 嵌套滚动容器之间存在冲突

解决方案:

1. CollapsibleSection.js
   - 为 Collapse 组件添加 unmountOnExit={false}
   - 添加 startingHeight={0} 确保动画从 0 开始
   - 防止 Collapse 动画干扰父容器的 overflow 属性

2. EventScrollList.js
   - 为右侧详情 Box 添加 position="relative"
   - 使用 overflow: auto !important 强制保持滚动功能
   - 确保即使子元素有 overflow 设置也不受影响

技术细节:
- unmountOnExit={false} 保持 DOM 节点存在，避免频繁挂载/卸载
- startingHeight={0} 确保折叠动画的起始高度一致
- !important 提高 CSS 优先级，覆盖子元素的 overflow 设置
- position: relative 创建新的层叠上下文，隔离滚动行为

影响范围:
- 纵向模式右侧详情面板
- 所有使用 CollapsibleSection 的区块

测试建议:
1. 切换到纵向模式
2. 展开"相关股票"或其他折叠区块
3. 尝试滚动右侧详情面板
4. 确认可以正常查看所有内容

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 09:58:52 +08:00
zdl
41baf16d45 fix: 纵向模式右侧详情滚动条改为常显 
- 从 hover 显示改为始终显示 (1px)
- 用户反馈更倾向于始终可见的滚动条
- 提供持续的滚动位置反馈

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 09:51:13 +08:00
zdl
c5b8fe91c3 feat: 实现纵向模式和平铺模式的双向无限滚动 
问题描述:
- 纵向模式下，用户向上滑动触发懒加载后，向下滑动无法回到之前的内容
- 原因：纵向模式未启用累积模式，且缺少向上滚动加载上一页的功能

解决方案:
实现类似社交媒体的双向无限滚动机制：
- 向下滚动到 60% 时自动加载下一页（新内容）
- 向上滚动到顶部 10% 时自动加载上一页（旧内容）
- 加载上一页后自动调整滚动位置，保持用户视图不跳动

技术实现:

1. usePagination.js
   - 将 VERTICAL 模式加入累积模式判断 (line 57)
   - 实现 loadPrevPage 方法，支持加载上一页 (lines 285-306)
   - 导出 loadPrevPage 供组件使用 (line 364)

2. VirtualizedFourRowGrid.js
   - 添加 loadPrevPage prop 和 previousScrollHeight ref
   - 合并双向滚动检测逻辑 (lines 67-102):
     * 向下滚动: scrollPercentage > 0.6 触发 loadNextPage
     * 向上滚动: scrollTop < clientHeight * 0.1 触发 loadPrevPage
   - 实现滚动位置保持机制 (lines 133-161):
     * 记录加载前的 scrollHeight
     * 加载完成后计算高度差
     * 调整 scrollTop += heightDifference 保持视图位置

3. DynamicNewsCard.js
   - 从 usePagination 获取 loadPrevPage
   - 传递给 EventScrollList 组件

4. EventScrollList.js
   - 接收并传递 loadPrevPage 到 VirtualizedFourRowGrid
   - 四排模式和纵向模式均支持双向滚动

影响范围:
- 纵向模式 (vertical mode)
- 平铺模式 (four-row mode)

测试建议:
1. 切换到纵向模式
2. 向下滚动观察是否自动加载下一页
3. 向上滚动到顶部观察是否：
   - 自动加载上一页
   - 滚动位置保持不变，内容不跳动
4. 切换到平铺模式验证双向滚动同样生效

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 09:48:01 +08:00
zdl
f919ce255a feat: 优化平铺模式的无限滚动触发机制 
问题描述:
- 平铺模式下，当容器高度为 800px 但首页内容不足 800px 时
- 无法生成滚动条，导致无限滚动条件永远无法触发
- 用户需要手动翻页才能看到第二页内容

优化方案:
1. 降低滚动触发阈值
   - 从 80% 降低到 60%，更早触发下一页加载
   - 提升用户滚动体验，减少等待时间

2. 新增主动内容检测机制
   - 延迟 500ms 检测虚拟滚动渲染完成后的实际内容高度
   - 如果内容高度 ≤ 容器高度（无滚动条），自动加载下一页
   - 使用 isLoadingMore ref 防止重复触发

技术实现:
- VirtualizedFourRowGrid.js
  - 修改滚动阈值: scrollPercentage > 0.6 (line 78)
  - 新增 useEffect 监听 events.length 变化 (lines 90-117)
  - 条件判断: scrollHeight <= clientHeight 时主动加载

影响范围:
- 平铺模式 (four-row mode)

测试建议:
1. 切换到平铺模式
2. 观察首页数据少于 6 条时，是否自动加载第二页
3. 验证有足够数据时，滚动到 60% 是否正常触发加载

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 09:36:21 +08:00
zdl
64de7d055b fix: 修复模式切换时丢失筛选条件的问题 
问题描述:
- 用户在单排/双排/纵向模式下应用筛选条件后，切换到平铺模式时筛选条件丢失
- usePagination hook 在模式切换时重新请求数据，但未传递筛选参数

修复内容:
1. usePagination.js
   - 新增 filters 参数接收筛选条件
   - handleModeToggle 函数在发起请求时应用 ...filters
   - 将 filters 添加到依赖数组，确保筛选条件变化时重新执行

2. DynamicNewsCard.js
   - 将 filters 传递给 usePagination hook
   - 确保筛选条件在模式切换时保持一致

影响范围:
- 所有展示模式切换（单排、双排、纵向、平铺）

测试建议:
1. 应用任意筛选条件（如排序、重要性、关键词）
2. 切换到平铺模式
3. 验证筛选条件是否保持生效

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 09:35:35 +08:00
zdl
b223be2f01 refactor: 提取翻页按钮为可复用组件 
- 创建 PageNavigationButton 组件
  · 通过 direction 参数区分上一页/下一页
  · 内置主题适配和模式判断逻辑
  · 自动处理显示条件（只在单排/双排模式显示）

- 重构 EventScrollList
  · 删除重复的翻页按钮代码（减少 66 行）
  · 使用 PageNavigationButton 组件替换原有按钮
  · 移除未使用的导入（IconButton, ChevronLeftIcon, ChevronRightIcon）
  · 移除翻页按钮主题色定义（已移至子组件）

优点：
- 消除重复代码，提升可维护性
- 职责分离，逻辑更清晰
- 易于扩展（可添加首页/末页按钮）
 2025-11-05 09:15:33 +08:00
zdl
f9387ffbd9 feat: 集成四排/纵向模式UI和优化交互逻辑 
VirtualizedFourRowGrid:
- 组件通用化，支持多列布局（通过 columnsPerRow 参数配置）
- 支持自定义卡片组件（通过 CardComponent 参数传入）
- 根据列数动态调整间距

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

DynamicNewsCard:
- 添加 Modal 弹窗显示四排模式详情
- 优化自动选中逻辑：
  · 首次加载时自动选中第一个事件
  · 翻页时，单排/双排/纵向模式自动选中当前页第一个事件（保持详情显示）
  · 翻页时，四排模式清空选中状态（通过弹窗显示详情）
- 传递新 props 到 EventScrollList
- 添加调试日志
 2025-11-05 08:56:44 +08:00
zdl
be0c53b588 feat: 虚拟化网格组件通用化 │ │ 
│ │                                                                                                                                                   │ │
│ │ - 支持多列布局（columnsPerRow 参数，默认4列）                                                                                                     │ │
│ │ - 支持自定义卡片组件（CardComponent 参数）                                                                                                        │ │
│ │ - 根据列数动态调整间距（单列 gap=3，多列 gap=4）                                                                                                  │ │
│ │ - 更新注释和文档
 2025-11-05 08:53:07 +08:00
zdl
de1b31c70e feat: git commit -m "feat: 简化分页逻辑并添加累积模式支持 │ │ 
│ │                                                                                                                                                   │ │
│ │ - 移除复杂的预加载逻辑（calculatePreloadRange、findMissingPages）                                                                                 │ │
│ │ - 添加累积显示模式（accumulatedEvents、isAccumulateMode）                                                                                         │ │
│ │ - 添加 displayEvents（累积或分页二选一）                                                                                                          │ │
│ │ - 添加 loadNextPage 方法用于无限滚动                                                                                                              │ │
│ │ - 支持4种显示模式的pageSize计算                                                                                                                   │ │
│ │ - 简化 handlePageChange 逻辑"
 2025-11-05 08:42:10 +08:00