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

7 Commits

Author SHA1 Message Date
zdl
cc2777ae20 feat: 实现实时要闻服务端分页功能 
功能新增：
- 实时要闻组件支持服务端分页，每次切换页码重新请求数据
- 分页控制器组件，支持数字页码、上下翻页、快速跳转
- Mock 数据量从 100 条增加到 200 条，支持分页测试

技术实现：

1. Redux 状态管理（communityDataSlice.js）
   - fetchDynamicNews 接收分页参数 { page, per_page }
   - 返回数据结构调整为 { events, pagination }
   - initialState 新增 dynamicNewsPagination 字段
   - Reducer 分别存储 events 和 pagination 信息
   - Selector 返回完整的 pagination 数据

2. 组件层（index.js → DynamicNewsCard → EventScrollList）
   - Community/index.js: 获取并传递 pagination 信息
   - DynamicNewsCard.js: 管理分页状态，触发服务端请求
   - EventScrollList.js: 接收服务端 totalPages，渲染当前页数据
   - 页码切换时自动选中第一个事件

3. 分页控制器（PaginationControl.js）
   - 精简版设计：移除首页/末页按钮
   - 上一页/下一页按钮，边界状态自动禁用
   - 智能页码列表（最多5个，使用省略号）
   - 输入框跳转功能，支持回车键
   - Toast 提示非法输入
   - 全部使用 xs 尺寸，紧凑布局

4. Mock 数据（events.js）
   - 总事件数从 100 增加到 200 条
   - 支持服务端分页测试（40 页 × 5 条/页）

分页流程：
1. 初始加载：请求 page=1, per_page=5
2. 切换页码：dispatch(fetchDynamicNews({ page: 2, per_page: 5 }))
3. 后端返回：{ events: [5条], pagination: { page, total, total_pages } }
4. 前端更新：显示新页面数据，更新分页控制器状态

UI 优化：
- 紧凑的分页控制器布局
- 移除冗余元素（首页/末页/总页数提示）
- xs 尺寸按钮，减少视觉负担
- 保留核心功能（翻页、页码、跳转）

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 12:38:25 +08:00
zdl
bdea4209b2 feat: 添加 EventScrollList.js 组件 2025-11-03 11:42:04 +08:00
zdl
6cde2175db feat: 实现实时要闻事件卡片点击高亮效果 
功能新增：
- 点击事件卡片后显示高亮状态
- 当前选中的卡片有明显的视觉反馈

视觉效果：
- 选中状态：蓝色浅背景 (blue.50) + 蓝色粗边框 (2px, blue.500) + 大阴影 (lg)
- 未选中状态：原样式（白色/灰色交替背景 + 细边框 + 小阴影）
- 过渡动画：0.3s 平滑过渡
- 悬停效果：选中卡片悬停时边框变为 blue.600，阴影增强为 xl

技术实现：
1. DynamicNewsCard.js:
   - 传递 isSelected prop 给 DynamicNewsEventCard
   - 判断逻辑：isSelected={selectedEvent?.id === event.id}

2. DynamicNewsEventCard.js:
   - 添加 isSelected 参数（默认 false）
   - 根据 isSelected 动态调整 Card 样式：
     - 背景色：选中 blue.50 / 未选中 原样式
     - 边框：选中 2px blue.500 / 未选中 1px 原颜色
     - 阴影：选中 lg / 未选中 sm

用户体验提升：
- 清晰显示当前查看的事件
- 与下方详情面板形成呼应
- 视觉反馈明确，交互友好

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 11:28:03 +08:00
zdl
f432d72151 fix: 移除 DynamicNewsCard 点击事件时的弹窗触发 
问题描述：
- 点击新闻卡片时，既更新了详情组件，又触发了不需要的弹窗
- 用户只希望更新下方的详情面板，不需要弹窗

解决方案：
- 移除 onEventClick 和 onTitleClick 中对父组件回调的调用
- 保留 setSelectedEvent 更新逻辑
- 详情面板仍然正常更新显示

修改位置：
- src/views/Community/components/DynamicNewsCard.js 第226-235行

交互效果：
- 点击新闻卡片 → 只更新下方的 DynamicNewsDetailPanel
- 不再触发任何额外的弹窗
- 保持内联详情面板显示方式

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 11:19:10 +08:00
zdl
e1e82555bf feat: 事件滑动面板添加 详情面板 2025-10-31 18:14:05 +08:00
zdl
9fd9fcb731 feat: 添加事件详情面板 2025-10-31 14:38:43 +08:00
zdl
c372832f1f feat: 新增实时要闻·动态追踪与市场复盘功能，优化导航体验 
新增功能：
- 实时要闻·动态追踪横向滚动卡片（DynamicNewsCard）
- 动态新闻事件卡片组件（DynamicNewsEventCard）
- 市场复盘卡片组件（MarketReviewCard）
- 股票涨跌幅指标组件（StockChangeIndicators）
- 交易时间工具函数（tradingTimeUtils）
- Mock API 支持动态新闻数据生成

UI 优化：
- EventFollowButton 改用 react-icons 星星图标，实现真正的空心/实心效果
- 关注按钮添加半透明白色背景（whiteAlpha.500），悬停效果更明显
- 事件卡片标题添加右侧留白，防止关注按钮遮挡文字

性能优化：
- 禁用 Router v7_startTransition 特性，解决路由切换延迟 2 秒问题
- 调整导航菜单点击顺序（先跳转后关闭），提升响应速度

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

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