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

839 Commits

Author SHA1 Message Date
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
188783a8d2 feat: 实现动态新闻筛选功能并优化虚拟滚动 
## 主要改进

### 1. 修复筛选功能
- **问题**: 筛选触发了 API 请求但列表未更新
- **根因**: fetchDynamicNews 硬编码 sort: 'new'，未支持筛选参数
- **解决**:
  - Redux action 添加筛选参数支持 (sort, importance, q, date_range, industry_code)
  - DynamicNewsCard 监听 filters 变化并重新请求数据
  - 筛选时清空缓存并从第1页开始加载

### 2. 虚拟滚动优化
- 改造 VirtualizedFourRowGrid 支持多列布局
  - 添加 columnsPerRow prop (默认4列，传1实现单列)
  - 添加 CardComponent prop (支持不同卡片组件)
  - 单列模式使用更小的 gap 间距
- 纵向模式使用虚拟滚动 + 无限滚动
  - 左侧事件列表使用 VirtualizedFourRowGrid (columnsPerRow=1)
  - 使用 HorizontalDynamicNewsEventCard 横向卡片
  - 支持滚动到底部自动加载

### 3. UI 交互优化
- 默认模式改为纵向模式 (左侧列表 + 右侧详情)
- 四排/纵向模式不显示全局 loading 遮罩
- 四排模式弹窗在关闭时不渲染 (性能优化)
- 注释掉单排/双排按钮，只保留纵向和平铺模式

## 技术细节

**数据流**:
```
用户筛选 → updateFilters → filters state 更新
→ DynamicNewsCard useEffect 监听
→ dispatch(fetchDynamicNews({ ...filters, clearCache: true }))
→ API 请求（带筛选参数）
→ Redux state 更新 → 列表重新渲染
```

**虚拟滚动**:
- @tanstack/react-virtual 动态高度测量
- 80% 滚动深度触发无限加载
- 底部 loading 指示器（绝对定位）

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 09:09:03 +08:00
zdl
d7f27e428b feat: 去掉市场复盘相关代码 2025-11-05 09:06:02 +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
e7c495a8b1 feat: feat: 实现事件详情子模块懒加载useEventStocks添加 autoLoad 参数和分离加载函数 │ │ 
│ │   - DynamicNewsDetailPanel实现子模块折叠和懒加载
 2025-11-05 08:29:44 +08:00
zdl
e0cfa6fab2 feat: 创建纵向模式的横向卡片组件 2025-11-05 08:26:05 +08:00
zdl
8fe13c9fa4 feat: 概念股票列表支持滚动查看全部数据 2025-11-05 08:12:03 +08:00
zdl
e6c422887c feat:使用 ref 避免 filters 依赖导致回调重新创建 2025-11-05 08:11:30 +08:00
zdl
7e110111c4 feat: 添加 FOUR_ROW 和 VERTICAL 模式常量及页面大小配置 2025-11-05 08:09:44 +08:00
zdl
38d1b51af3 feat: 修改更新依赖 2025-11-04 20:19:01 +08:00
zdl
c7334191e5 feat: 调整mock数据 2025-11-04 20:17:56 +08:00
zdl
7fdc9e26af feat: 历史事件对比没数据数量展示0 2025-11-04 20:07:21 +08:00
zdl
7f01a391e0 feat: 关闭posthog日志 2025-11-04 19:51:41 +08:00
zdl
58db08ca22 feat: 历史事件添加涨幅字段 2025-11-04 19:50:32 +08:00
zdl
bf75f9b387 feat: 添加超预期的分提示 2025-11-04 19:39:46 +08:00
zdl
2a59e9edb2 feat: 添加合规提示 2025-11-04 19:26:18 +08:00
zdl
87476226c3 feat: 行业标签展示文字 2025-11-04 19:17:39 +08:00
zdl
76360102bb feat: 相关概念UI调整 2025-11-04 18:22:26 +08:00
zdl
1a3987afe0 feature: 重要性支持多选 2025-11-04 17:53:42 +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
6e5eaa9089 feat: 添加serverworker注册事件 2025-11-04 15:34:17 +08:00
zdl
8ed65b062b pref: 日志管理优化 2025-11-04 15:19:49 +08:00
zdl
868b4ccebc feat: 筛选添加收益率筛选 2025-11-04 15:19:24 +08:00
zdl
67981f21a2 feat:拆分 handlePageChange 为子函数（减少复杂度） 2025-11-04 15:05:25 +08:00
zdl
0a10270ab0 feat: 提取 usePagination Hook 2025-11-04 14:58:02 +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
012c13c49a fix: 修复微信扫码登录后页面跳转问题 
修改 iframe 显示条件,仅在 WAITING 状态时显示 iframe,
当状态变更为 SCANNED/AUTHORIZED 时立即移除 iframe,
防止微信页面执行父页面跳转操作。

🤖 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
0e9a0d9123 feat: 恢复bugfix 2025-11-04 11:43:54 +08:00
zdl
ce495ed6fa feat: bugfix 2025-11-03 19:45:32 +08:00
zdl
82cb0b4034 feat: bugfix 2025-11-03 18:26:59 +08:00
zdl
78e7001372 feat: bugfix 2025-11-03 18:20:57 +08:00
zdl
26ad017d32 feat: bugfix 2025-11-03 18:11:21 +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
6a0a8e8e2b feat: 添加mock接口 2025-11-03 17:31:25 +08:00
zdl
8ebfad9992 feat: 单排/双排列表模式切换 2025-11-03 17:21:07 +08:00
zdl
c208ba36b7 feat: bug修复 2025-11-03 17:12:01 +08:00
zdl
b14eb175f5 fix: 修复 Mock 环境相关概念返回空结果问题 
问题分析：
- Mock handler 的过滤逻辑过于严格
- 只保留概念名包含查询关键词的结果
- 导致大部分查询返回空数组

解决方案：
✅ 移除字符串匹配过滤逻辑
- Mock 环境直接返回热门概念
- 模拟真实 API 的语义搜索行为
- 确保每次搜索都有结果展示

✅ 添加详细调试日志
- RelatedConceptsSection 组件渲染日志
- useEffect 触发和参数日志
- 请求发送和响应详情
- 数据处理过程追踪

✅ 完善 Mock 数据结构
- 添加 score, match_type, happened_times, stocks
- 支持详细卡片展示
- 数据结构与线上完全一致

修改文件：
- src/mocks/handlers/concept.js
- src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/index.js

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 16:40:25 +08:00
zdl
b95607e9b4 refactor: 优化 StockChangeIndicators 颜色层次和视觉对比度 
优化：
- 背景色统一使用 50 最浅色 (red.50/orange.50/green.50/teal.50)
- 边框色根据涨跌幅大小动态调整 (100-200 级别)
- 确保背景 < 边框 < 文字的颜色深度层次
- 提升视觉对比度和可读性
- 更新注释说明颜色逻辑

修改文件：
- src/components/StockChangeIndicators.js

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 16:01:42 +08:00
zdl
462933f4af feat: 统一事件详情和滚动列表的重要性颜色样式 
优化：
- 事件详情页面的重要性标签从固定橙色改为动态红色渐变
- 背景色使用 importance.bgColor (red.50)
- 文字和边框颜色使用 importance.badgeBg (red.800/600/500/400)
- 添加 2px 边框以保持视觉一致性
- 与滚动事件列表的重要性角标样式保持统一

修改文件：
- src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 15:59:12 +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
7e32dda2df feat本次提交包含的优化 
✅ StockChangeIndicators 组件优化

  - 调整 padding 使布局更紧凑
  - 修复窄卡片中的折行问题
  - 自动根据内容调整宽度

  ✅ 重要性等级视觉优化

  - 统一使用红色系（S→A→B→C：从深红到浅红）
  - 添加 badgeBg 字段支持新的角标样式

  ✅ DynamicNewsEventCard 卡片改版

  - 左上角矩形角标显示重要性（镂空边框样式）
  - 悬浮显示所有等级说明
  - 标题限制两行显示

  ✅ Mock 数据完整性

  - 添加缺失的 related_week_chg 字段
  - 确保三个涨跌幅指标数据完整
 2025-11-03 15:38:30 +08:00