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

531 Commits

Author SHA1 Message Date
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
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
zdl
d027071e98 feat: 优化社区页面滚动和分页交互体验…) 
⎿  [feature_2025/1028_event 5dedbb3] feat: 优化社区页面滚动和分页交互体验
      6 files changed, 1355 insertions(+), 49 deletions(-)
      create mode 100644 docs/test-cases/Community351241265351235242346265213350257225347224250344276213.md
 2025-11-03 14:24:41 +08:00
zdl
e31e4118a0 fix: 修改相关概念组件以匹配真实API数据结构 
修改内容：
- SimpleConceptCard.js: 改用 concept.concept 和 concept.score 字段
- DetailedConceptCard.js: 改用 concept.concept、concept.score 和 concept.price_info.avg_change_pct
- RelatedConceptsSection/index.js: 导航时使用 concept.concept 字段
- events.js mock数据: 更新keywords生成函数，使用concept/score/price_info结构

数据结构变更：
- name → concept (概念名称)
- relevance (0-100) → score (0-1)
- avg_change_pct → price_info.avg_change_pct (嵌套结构)

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 14:18:17 +08:00
zdl
5611c06991 refactor: 移除 RelatedConcepts 组件中的 API_BASE_URL 配置 
移除硬编码的 API 基础地址配置，改为直接使用 API 路径：
- 删除 API_BASE_URL 常量定义
- 修改 fetch 请求直接使用 '/concept-api/search'
- 依赖项目的环境配置文件进行代理配置

优点：
- 代码更简洁，不需要环境判断
- 统一使用项目级别的代理配置
- 便于维护和部署

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 13:55:32 +08:00
zdl
784202025c feat: 增强历史事件对比卡片交互，支持点击跳转事件详情 
功能新增：
- 点击事件卡片跳转到事件详情页（/event-detail/:eventId）
- 点击事件标题跳转到事件详情页（带下划线 hover 效果）
- "相关股票"按钮独立触发弹窗，不影响卡片跳转

组件修改：
- HistoricalEvents.js:
  * 导入 useNavigate hook 用于路由跳转
  * 添加 handleCardClick 函数处理跳转逻辑
  * 事件卡片添加 cursor="pointer" 和 onClick 事件
  * 优化卡片 hover 效果（阴影、边框色、上浮动画）
  * 标题添加独立的点击事件和下划线 hover 效果
  * "相关股票"按钮添加 stopPropagation 阻止事件冒泡

交互优化：
- 卡片 hover: boxShadow 从 md → lg，边框从 blue.300 → blue.400
- 卡片 hover: 添加 translateY(-2px) 上浮效果
- 标题 hover: 添加下划线提示可点击
- 光标样式: 卡片和标题都显示 pointer

事件冒泡控制：
- 标题点击: stopPropagation 后再触发跳转（保持一致性）
- 相关股票按钮: stopPropagation 防止触发卡片跳转
- 确保各个点击区域互不干扰

用户体验提升：
- 多种点击方式提供便利性（整个卡片、标题）
- 更明显的视觉反馈（hover 效果、光标变化）
- 精确的交互控制，避免误触发

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 13:08:07 +08:00
zdl
daf7372bab feat: 修复相关概念卡片跳转逻辑，支持跳转至概念中心 
功能优化：
- 相关概念卡片点击跳转至概念中心（/concepts）并自动搜索该概念
- 概念相关股票支持点击跳转至公司详情页

组件修改：
- RelatedConceptsSection/index.js:
  * 修复 handleConceptClick 函数跳转路径
  * 从错误的 /concept/:name 改为正确的 /concepts?q=:name
  * 使用 encodeURIComponent 确保中文概念名称正确编码

- RelatedConceptsSection/ConceptStockItem.js:
  * 新增 handleStockClick 点击处理函数
  * 点击股票跳转至公司详情页（valuefrontier.cn/company）
  * 添加 hover 效果和过渡动画
  * 使用 stopPropagation 防止事件冒泡到概念卡片

跳转行为：
- 简单概念卡片（横向）→ 点击跳转到概念中心搜索结果页
- 详细概念卡片（展开后）→ 点击跳转到概念中心搜索结果页
- 概念相关股票 → 点击跳转到公司详情页（新标签页）

URL示例：
- 点击"人工智能"概念 → /concepts?q=人工智能
- 点击股票"000001.SZ" → valuefrontier.cn/company?scode=000001

用户体验提升：
- 概念卡片跳转逻辑符合用户预期
- 股票点击可查看公司详情，提供更多信息
- 事件冒泡控制正确，避免误触发

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-03 12:58:21 +08:00