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

545 Commits

Author SHA1 Message Date
zdl
fe9b3034a1 feat: 优化股票卡片布局和弹窗性能 
布局优化：
- 将分时图和K线图移至第二行公司名称后面
- 第二行布局：公司名称（左）+ 分时图 + K线图（右）
- 删除图表标题文字，使布局更紧凑
- 移除未使用的 SimpleGrid 导入

性能优化：
- 股票详情弹窗改为条件渲染
- 弹窗关闭时完全从 DOM 移除
- 减少不必要的组件渲染和内存占用
- 与四排模式弹窗保持一致的实现方式

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 11:09:53 +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
d95bd51206 feat: 导航栏关注事件弹窗增强显示信息 
- 添加热度显示（🔥 图标 + 分数）
  - ≥80 红色，≥60 橙色，<60 灰色
- 添加关注数显示（👥 图标 + 人数）
- 保留原有涨跌幅显示（日均、周涨）
- mock 数据补充涨跌幅字段（related_avg_chg, related_max_chg, related_week_chg）
- 智能显示：字段存在时才显示对应 Badge
- 优化 Badge 间距和布局

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 11:05:32 +08:00
zdl
69d4b8bae0 feat: k线图自适应 2025-11-05 10:10:22 +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
4e7fcaad5c fix: 修复详情面板"相关股票"重复标题的问题 
问题描述:
- 详情面板中出现两个"相关股票"标题
- 用户反馈截图显示标题重复渲染

根本原因:
- DynamicNewsDetailPanel 使用 CollapsibleSection 包裹 RelatedStocksSection
- RelatedStocksSection 内部又渲染了 CollapsibleHeader
- 导致双重标题渲染

解决方案:
1. RelatedStocksSection.js
   - 移除内部的 CollapsibleHeader 和 Collapse 组件
   - 只保留纯内容部分（股票网格）
   - 简化组件职责：仅负责渲染股票列表

2. DynamicNewsDetailPanel.js
   - 移除传递给 RelatedStocksSection 的 isOpen 和 onToggle props
   - 折叠逻辑由外层的 CollapsibleSection 统一管理

修改文件:
- RelatedStocksSection.js - 移除重复的标题和折叠逻辑
- DynamicNewsDetailPanel.js - 清理无用的 props 传递

影响范围:
- 事件详情面板的"相关股票"区块

测试建议:
1. 打开事件详情面板
2. 展开"相关股票"区块
3. 确认只有一个标题

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 09:54:50 +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
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