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

424 Commits

This Branch
This Branch
All Branches
Author SHA1 Message Date
zdl
31e5a4ee48 feat: 添加 RTK Query 集成用于事件数据获取（实验性）... 2025-11-06 01:25:44 +08:00
zdl
273ff5f72d feat: 相关概念添加 PRO 权限控制... 2025-11-06 01:20:33 +08:00
zdl
a5e001d975 refactor: 优化分页存储架构和缓存逻辑... 2025-11-06 01:20:07 +08:00
zdl
c5d6247f49 fix: 修复 MSW 接口和调试代码清理... 2025-11-06 01:17:06 +08:00
zdl
ad933e9fb2 feat: UI调整 2025-11-05 23:54:43 +08:00
zdl
adf6fc7780 feat:平铺模式 | ❌ 隐藏顶部分页控制器" 2025-11-05 22:34:07 +08:00
zdl
6930878ff6 refactor: 删除未使用的 lastUpdated 和 cachedCount 状态 
- 删除 initialState 中的 lastUpdated 和 cachedCount
  - 删除所有 reducer 中相关的设置代码
  - 更新 selectors 使用 .length 替代 cachedCount
  - 删除 shouldRefresh 工具函数

  简化理由：
  - lastUpdated 未被使用
  - cachedCount 可以通过 events.length 直接获取
 2025-11-05 22:33:25 +08:00
zdl
ed24a14fbf feat: 事件详情权限加上权限校验 2025-11-05 21:31:02 +08:00
zdl
25a6ff164b feat: 翻页bugfix 2025-11-05 19:28:17 +08:00
zdl
612b58c983 feat: feat: 优化事件卡片 UI 和交互体验 
修复 useColorModeValue 调用位置（提升到顶层）
优化分页和滚动逻辑
动态 indicatorSize 支持（detail/list 模式）
 2025-11-05 19:15:36 +08:00
zdl
27b68e928e feat: bugfix 2025-11-05 19:06:18 +08:00
zdl
e6ffb0dc74 Redux 相关修改 2025-11-05 19:01:56 +08:00
zdl
2355004dfb fix: refactor: 简化 Redux 数据管理逻辑并修复 bug 
修复 clearCache/clearSpecificCache 引用不存在的 state.dynamicNews bug
简化数据插入逻辑，移除复杂的 Append/Replace/Jump 模式（虚拟滚动接管）
添加空数据边界处理和 toast 提示
添加 mode 参数支持（vertical/four-row）
修复默认值解构避免 undefined 错误
修复 Redux slice 未使用参数的 TS 警告 仅 preloadData 和 toggleEventFollow.rejected 的参数修改 将未使用的 state 参数改为 _state 前缀，消除 TS6133 警告
 2025-11-05 19:00:53 +08:00
zdl
c5dcb4897d fix: 修复 CollapsibleHeader Box 组件导入缺失 2025-11-05 18:58:19 +08:00
zdl
dc0c8e2c60 feat: UI调整 2025-11-05 18:04:49 +08:00
zdl
2e89469d05 feat: 调整纵向列表UI 2025-11-05 17:50:33 +08:00
zdl
e617eddd46 feat: 添加mock数据 2025-11-05 17:49:15 +08:00
zdl
22186eb54a feat: 添加mock数据 2025-11-05 17:43:17 +08:00
zdl
c3ef837221 feat: 纵向详情列表高度控制 2025-11-05 17:33:28 +08:00
zdl
870b1f5996 feat: 多列布局ui调整 2025-11-05 17:30:21 +08:00
zdl
bc2a3b71c0 pref: 代码优化 2025-11-05 17:08:01 +08:00
zdl
ff7b8abe9d feat: 去除不相关逻辑 2025-11-05 17:02:49 +08:00
zdl
cb44c18e57 feat: 热门事件点击打开弹窗 2025-11-05 17:01:19 +08:00
zdl
623ec73c62 feat: 添加mock数据 2025-11-05 16:49:13 +08:00
zdl
4c08ef57ff feat: 股票涨跌幅指标组件 2025-11-05 16:49:04 +08:00
zdl
ca52d3bd87 feat: 纵向列表（HorizontalDynamicNewsEventCard.js:105-133） - 添加 Tooltip 提示 
平铺列表（DynamicNewsEventCard.js:232） - 修改行数限制
 2025-11-05 16:40:35 +08:00
zdl
62ae2e0803 feat: 提取 ImportanceBadge 组件 2025-11-05 16:15:18 +08:00
zdl
7e781731c4 feat: mock数据添加 2025-11-05 15:20:59 +08:00
zdl
0765f8a800 feat: 纵向布局分页模式优化 2025-11-05 15:20:43 +08:00
zdl
70dbf3b492 feat: StockChangeIndicators 组件优化 2025-11-05 15:19:48 +08:00
zdl
aa1a93c65b feat: 重要性徽章样式优化（圆形设计） 2025-11-05 15:19:02 +08:00
zdl
f9e4265dd6 feat: 配置完全mock环境 2025-11-05 15:00:11 +08:00
zdl
263ecd77b3 feat: 添加详情面板和事件详情切换按钮 2025-11-05 14:08:03 +08:00
zdl
b6862aff4f feat: 提取 EventDetailScrollPanel 2025-11-05 14:00:22 +08:00
zdl
327cfc09e2 feat: 提取VerticalModeLayout - 提升可读性，但耦合度中等 2025-11-05 13:57:05 +08:00
zdl
f5d340aa05 feat: 提取VerticalModeLayout - 提升可读性，但耦合度中等 2025-11-05 13:56:52 +08:00
zdl
0da18e868a refactor: 提取 ModeToggleButtons 为独立子组件 
问题：
- EventScrollList 组件中模式切换按钮代码内联（17行）
- 降低代码可读性和可维护性
- 按钮组无法在其他地方复用

修改：
1. 新建 ModeToggleButtons.js 独立组件
   - 接收 mode 和 onModeChange 两个 props
   - 包含完整的 JSDoc 注释
   - 支持 vertical（纵向）和 four-row（平铺）两种模式

2. 重构 EventScrollList.js
   - 删除未使用的 import（Button, ButtonGroup）
   - 导入 ModeToggleButtons 组件
   - 替换 17 行内联代码为 1 行组件调用
   - 代码净减少 14 行

效果：
- ✅ 职责分离：模式切换逻辑独立封装
- ✅ 可复用性：其他页面可直接导入使用
- ✅ 易维护性：修改按钮样式只需改一个文件
- ✅ 易测试性：可单独编写单元测试
- ✅ 代码简洁：EventScrollList 更简洁易读

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 13:44:34 +08:00
zdl
0f7693939a refactor: 删除单排和双排模式，简化事件列表展示 
问题：
- 事件列表组件包含4种模式（单排/双排/纵向/平铺）
- 单排（carousel）和双排（grid）模式代码已被注释，未实际使用
- 保留未使用代码增加维护成本和代码复杂度

修改：
1. 删除未使用的 import（DynamicNewsEventCard, CompactEventCard, Spinner, HStack）
2. 删除加载遮罩相关代码（仅单排/双排模式使用）
3. 删除已注释的单排/双排切换按钮代码
4. 删除单排轮播模式完整实现（~32行）
5. 删除双排网格模式完整实现（~33行）
6. 更新组件注释：明确只支持纵向和平铺两种模式
7. 更新默认模式：carousel → vertical
8. 简化条件判断（overflowX/overflowY/maxH）

效果：
- 代码从 361 行缩减到 254 行（删除 ~107 行）
- 只保留两种实际使用的模式：纵向（vertical）和平铺（four-row）
- 降低代码复杂度，提升可维护性

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 13:37:18 +08:00
zdl
becd0268a6 refactor: 调整事件详情面板中相关股票和相关概念的显示顺序 
修改内容：
- 将"相关股票"移到"相关概念"之前显示
- 优化用户体验，优先展示用户更关心的股票信息

新的显示顺序：
1. 事件描述
2. 相关股票 ← 现在排在前面
3. 相关概念 ← 现在排在后面
4. 历史事件对比
5. 传导链分析

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 13:24:01 +08:00
zdl
8bd7801753 feat: 平铺模式隐藏分页控制，改用无限滚动 
问题：
- 平铺模式使用虚拟滚动+无限滚动加载数据
- 但仍显示传统分页控制器和翻页按钮
- 分页控制与无限滚动机制冲突，用户体验不一致

修复：
- 平铺模式下隐藏 PaginationControl（分页控制器）
- 平铺模式下隐藏 PageNavigationButton（左右翻页按钮）
- 添加注释说明：平铺模式使用无限滚动

效果：
- 平铺模式：✅ 仅显示模式切换按钮，使用无限滚动
- 其他模式（纵向/单排/双排）：✅ 保持分页控制器和翻页按钮

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 13:22:10 +08:00
zdl
d4c731730f fix: 修复 Mock 模式下 webpack proxy 配置和优化构建配置 
问题：
1. Mock 模式下 webpack devServer proxy 在服务器层转发请求，导致 MSW 无法拦截
2. Chakra UI 和 Ant Design 的 cacheGroups priority 相同（22），可能导致分割冲突
3. maxSize 限制 244KB 过小，导致中型库过度分割
4. 缺少 Mock 模式调试日志

修复：
1. 添加 isMockMode() 工具函数（与 apiConfig.js 保持一致）
2. Mock 模式下禁用 proxy，让 MSW 在浏览器层拦截请求
3. 添加 onListening 钩子打印 Mock 模式和 Proxy 状态
4. 修复 Chakra UI priority: 22 → 23（避免与 Ant Design 冲突）
5. 优化 maxSize: 244KB → 512KB（与 performance.maxAssetSize 一致）

效果：
- Mock 模式：proxy 禁用 → MSW 拦截 → 返回 mock 数据 ✅
- 真实后端：proxy 启用 → 转发到后端服务器 ✅
- 减少过度分割，降低 HTTP 请求数，提升加载性能

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-05 13:12:51 +08:00
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