vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
966 Commits 32 Branches 1 Tag
eb3021397a2e63ca107b0b7c9992453fdcc27d0d
Commit Graph

19 Commits

Author SHA1 Message Date
zdl
eb3021397a fix: 事件详情弹窗UI调整 2025-11-27 15:08:14 +08:00
zdl
349b6613dc 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
zzlgreat
e635fd0309 update ui 2025-11-14 07:42:18 +08:00
zzlgreat
c412aeceee update ui 2025-11-14 07:25:12 +08:00
zzlgreat
6ddcbf80d7 update ui 2025-11-14 06:39:29 +08:00
zzlgreat
bd9c860746 update ui 2025-11-13 22:35:33 +08:00
zzlgreat
316eb5f172 update ui 2025-11-13 22:21:59 +08:00
zdl
cb96fa4669 feat: 修改列表默认状态 2025-11-07 20:05:14 +08:00
zdl
7998575b36 feat(community): 列表模式事件卡片高度自适应 2025-11-07 19:25:10 +08:00
zdl
d8fd86a04d feat: 事件中心详情面板Ui调整 2025-11-07 18:39:49 +08:00
zdl
ed16789221 feat: 调整事件详情滑动不触发外部页面滑动 2025-11-07 15:11:18 +08:00
zdl
22b29bf727 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
570722ce7c 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
d0e66d2e62 pref: UI优化 2025-11-06 11:35:10 +08:00
zdl
504178519d feat: 调整纵向列表UI 2025-11-05 17:50:33 +08:00
zdl
77865434a3 feat: 纵向布局分页模式优化 2025-11-05 15:20:43 +08:00
zdl
bf8587828d feat: 添加详情面板和事件详情切换按钮 2025-11-05 14:08:03 +08:00
zdl
b0626e0a7b feat: 提取 EventDetailScrollPanel 2025-11-05 14:00:22 +08:00
zdl
ce7b1d3d63 feat: 提取VerticalModeLayout - 提升可读性，但耦合度中等 2025-11-05 13:56:52 +08:00