vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
473 Commits 29 Branches 1 Tag
44b8c64907b5bd224f331e119be171dca20a26ec
Commit Graph

53 Commits

Author SHA1 Message Date
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
zdl
d96ebd6b8c feat: 创建无限滚动Hook │ │ 
│ │                                                                                                                                                   │ │
│ │ - 监听容器滚动事件                                                                                                                                │ │
│ │ - 距离底部阈值可配置（默认200px）                                                                                                                 │ │
│ │ - 自动触发onLoadMore回调                                                                                                                          │ │
│ │ - 支持加载状态管理
 2025-11-05 08:39:28 +08:00
zdl
67127aa615 feat: 创建虚拟化四排网格组件 2025-11-05 08:32:54 +08:00
zdl
7e110111c4 feat: 添加 FOUR_ROW 和 VERTICAL 模式常量及页面大小配置 2025-11-05 08:09:44 +08:00
zdl
ffa6c2f761 pref: 优化 useEffect 依赖和清理逻辑 2025-11-04 16:01:56 +08:00
zdl
5b9155a30c feat: 提取常量和 Hooks 到独立文件（已完成） 2025-11-04 15:38:54 +08:00
zdl
ce46820105 feat: 优化社区动态新闻分页和预加载策略 
## 主要改动

### 1. 修复分页显示问题
- 修复总页数计算错误（使用服务端 total 而非缓存 cachedCount）
- 修复目标页数据检查逻辑（排除 null 占位符）

### 2. 实现请求拆分策略 (Critical Fix)
- 将合并请求（per_page: 15）拆分为单页循环请求（per_page: 5）
- 解决后端无法处理动态 per_page 导致返回空数据的问题
- 后台预加载和显示 loading 两个场景均已拆分

### 3. 优化智能预加载逻辑
- 连续翻页（上/下页）：预加载前后各 2 页
- 跳转翻页（点页码）：只加载当前页
- 目标页已缓存时立即切换，后台静默预加载其他页

### 4. Redux 状态管理优化
- 添加 pageSize 参数用于正确计算索引
- 重写 reducer 插入逻辑（append/replace/jump 三种模式）
- 只在 append 模式去重，避免替换和跳页时数据丢失
- 修复 selector 计算有效数量（排除 null）

### 5. 修复 React Hook 规则违规
- 将所有 useColorModeValue 移至组件顶层
- 添加缺失的 HStack 导入

## 影响范围
- 仅影响社区页面动态新闻分页功能
- 无后端变更，向后兼容

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-04 11:43:54 +08:00
zdl
f17a8fbd87 feat: 实现 Redux 全局状态管理事件关注功能 
本次提交实现了滚动列表和事件详情的关注按钮状态同步：

✅ Redux 状态管理
- communityDataSlice.js: 添加 eventFollowStatus state
- 新增 toggleEventFollow AsyncThunk（复用 EventList.js 逻辑）
- 新增 setEventFollowStatus reducer 和 selectEventFollowStatus selector

✅ 组件集成
- DynamicNewsCard.js: 从 Redux 读取关注状态并传递给子组件
- EventScrollList.js: 接收并传递关注状态给事件卡片
- DynamicNewsDetailPanel.js: 移除本地 state，使用 Redux 状态

✅ Mock API 支持
- event.js: 添加 POST /api/events/:eventId/follow 处理器
- 返回 { is_following, follower_count } 模拟数据

✅ Bug 修复
- EventDetail/index.js: 添加 useRef 导入
- concept.js: 导出 generatePopularConcepts 函数
- event.js: 添加 /api/events/:eventId/concepts 处理器

功能：
- 点击滚动列表的关注按钮，详情面板的关注状态自动同步
- 点击详情面板的关注按钮，滚动列表的关注状态自动同步
- 关注人数实时更新
- 状态在整个应用中保持一致

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 17:40:09 +08:00
zdl
8ebfad9992 feat: 单排/双排列表模式切换 2025-11-03 17:21:07 +08:00
zdl
26dcfd061c feat: 优化 EventScrollList 分页控制器位置和样式 
本次提交包含以下优化：

✅ 分页控制器位置调整
- 从底部移至顶部右对齐
- 使用相对定位 (Flex justify="flex-end")
- 移除 CardBody 顶部 padding (pt={0})
- 确保分页控制器紧贴顶部，无任何间距

✅ 箭头样式优化
- 调整箭头大小和颜色
- 使用毛玻璃效果背景
- 改善视觉层次和交互体验

修改文件：
- src/views/Community/components/DynamicNewsCard.js (CardBody pt={0})
- 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-03 15:56:19 +08:00
zdl
9274323151 fix: 完全移除 EventScrollList 顶部间距 
问题：
- EventScrollList 顶部间距 (pt={2}, 8px) 仍然过大
- 用户期望事件列表紧贴搜索框，无顶部间距

修改：
- pt={2} 改为 pt={0}
- 顶部间距从 8px 完全移除为 0px
- 保持底部 pb={4} (16px) 和左右 px={2} (8px) 不变

视觉效果：
- EventScrollList 紧贴 CardHeader，更加紧凑
- 其他方向间距保持不变

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 14:41:05 +08:00
zdl
cedfd3978d fix: 减少 EventScrollList 顶部间距 
问题：
- EventScrollList 的 Flex 容器设置了 py={4}（上下各 16px padding）
- 导致顶部间距过大，视觉不够紧凑

修改：
- py={4} 改为 pt={2} pb={4}
- 顶部间距从 16px 减少到 8px
- 保持底部 16px 间距，为滚动条留出足够空间

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 14:32:28 +08:00
zdl
89fe0cd10b fix: 修改 EventScrollList 左右箭头为翻页功能 
问题：
- 左边箭头位置 (left: -4) 超出容器，看不到
- 右边箭头点击只是滚动 400px，而不是切换页面
- 用户期望左右箭头用于翻页，而不是横向滚动

修改内容：
1. 删除滚动相关函数和状态
   - 删除 scrollLeft()、scrollRight() 函数
   - 删除 handleScroll() 监听函数
   - 删除 showLeftArrow、showRightArrow state
   - 删除 useEffect 重置滚动位置逻辑
   - 移除 useState、useEffect 导入

2. 修改箭头功能从"滚动"改为"翻页"
   - 左箭头: onClick={scrollLeft} → onClick={() => onPageChange(currentPage - 1)}
   - 右箭头: onClick={scrollRight} → onClick={() => onPageChange(currentPage + 1)}

3. 修改箭头显隐逻辑为基于页码
   - 左箭头: showLeftArrow → currentPage > 1
   - 右箭头: showRightArrow → currentPage < totalPages

4. 优化箭头位置和样式
   - 位置: left/right: "-4" → "2" (在容器内部边缘)
   - 图标尺寸: boxSize={6} → boxSize={8}
   - 按钮尺寸: size="md" → size="lg"
   - 阴影: shadow="md" → shadow="lg"
   - 明确背景色: bg="blue.500"
   - 增强 hover 效果: 放大 scale(1.1) + 加深颜色
   - 更新说明文字: "向左/右滚动" → "上一页/下一页"

预期效果：
- 左箭头点击后加载上一页数据
- 右箭头点击后加载下一页数据
- 第1页时左箭头隐藏，最后一页时右箭头隐藏
- 箭头位置清晰可见，视觉效果突出

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 14:29:44 +08:00