vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
1,041 Commits 29 Branches 1 Tag
259b298ea63bece12c6dbf2c2a008c1ba2571c74
Commit Graph

555 Commits

Author SHA1 Message Date
zzlgreat
389a45fc0a 事件中心UI优化 2025-11-07 09:57:49 +08:00
zzlgreat
67c7fa49e8 事件中心UI优化 2025-11-07 09:45:42 +08:00
zdl
6271736969 fix: 修复重置按钮不生效问题 
问题描述：
- 用户选择所有筛选条件后，点击"重置"按钮无反应
- 筛选条件未被清空，事件列表未重新加载

根本原因：
- 当筛选条件从"有值"重置为"空值"或从"空值"重置为"空值"时
- 如果 filters 对象的字段值没有实质变化
- DynamicNewsCard 的 useEffect 依赖项检测不到变化，不会触发重新加载

解决方案：
1. UnifiedSearchBox.handleReset() 添加 _forceRefresh 时间戳标志
   - 每次重置都生成唯一的 Date.now() 时间戳
   - 确保 filters 对象每次重置都不同

2. DynamicNewsCard 筛选 useEffect 依赖数组添加 filters._forceRefresh
   - 监听强制刷新标志的变化
   - 即使其他筛选条件未变，也能触发重新加载

3. 增强调试日志
   - 添加完整的重置流程日志输出
   - 便于排查后续问题

修改文件：
- src/views/Community/components/UnifiedSearchBox.js (Line 505-536)
- src/views/Community/components/DynamicNewsCard.js (Line 264)

测试场景：
✅ 选择所有筛选条件后点击重置 - 清空并重新加载
✅ 未选择筛选条件时点击重置 - 强制刷新第1页
✅ 重置后 Redux 缓存被清空 (clearCache: true)

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 18:00:53 +08:00
zdl
319a78d34c fix: 修复分页、筛选和模式切换相关问题 
主要修复：
1. 修复模式切换时 per_page 参数错误
   - 在 useEffect 内直接根据 mode 计算 per_page
   - 避免使用可能过时的 pageSize prop

2. 修复 DISPLAY_MODES 未定义错误
   - 在 DynamicNewsCard.js 中导入 DISPLAY_MODES 常量

3. 添加空状态显示
   - VerticalModeLayout 添加无数据时的友好提示
   - 显示图标和提示文字，引导用户调整筛选条件

4. 修复无限请求循环问题
   - 移除模式切换 useEffect 中的 filters 依赖
   - 避免筛选和模式切换 useEffect 互相触发

5. 修复筛选参数传递问题
   - usePagination 使用 useRef 存储最新 filters
   - 避免 useCallback 闭包捕获旧值
   - 修复时间筛选参数丢失问题

6. 修复分页竞态条件
   - 允许用户在加载时切换到不同页面
   - 只阻止相同页面的重复请求

涉及文件：
- src/views/Community/components/DynamicNewsCard.js
- src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
- src/views/Community/components/DynamicNewsCard/hooks/usePagination.js
- src/views/Community/hooks/useEventFilters.js
- src/store/slices/communityDataSlice.js
- src/views/Community/components/UnifiedSearchBox.js

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 17:39:03 +08:00
zdl
8799964961 refactor: 恢复 TradingTimeFilter 到原版本 
- 移除 timeRange prop 及其同步逻辑
- 恢复原有的 value 同步逻辑
- 简化组件接口

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 15:33:54 +08:00
zdl
42808501b0 refactor: 删除 FilterModal 筛选弹窗组件 
- 移除 FilterModal.js 文件
- 简化组件结构，筛选功能保留在 CardHeader 的 UnifiedSearchBox 中

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 15:33:36 +08:00
zdl
291362b88d feat: VerticalModeLayout 详情/列表模式自动切换 
- 点击事件自动切换到详情模式
- 切换到列表模式时重置详情面板（通过 key 强制重新渲染）
- 添加独立滚动容器，支持左右两侧独立滚动
- 优化布局高度控制，使用 h="100%" 撑满父容器

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 14:13:06 +08:00
zdl
f5328ec3a1 fix: 修复 EventScrollList 和 EventDetailScrollPanel 布局问题 
- EventScrollList.js: 添加 h="100%" 和 data-scroll-container 属性，支持独立滚动
- EventDetailScrollPanel.js: 移除 maxHeight 限制，允许详情面板撑满容器高度
- 修复布局显示问题，优化滚动体验

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 14:12:05 +08:00
zdl
52cf950b21 feat: 创建 FilterModal 筛选弹窗组件 
- 新增 FilterModal.js 组件，用于在固定模式下显示筛选弹窗
- 复用 UnifiedSearchBox 组件实现筛选功能
- 支持 mode 和 pageSize 参数传递
- 添加 scrollBehavior="outside" 避免下拉菜单被遮挡

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 14:09:59 +08:00
zdl
8b25d5d91c feat: 时间筛选重置调整 2025-11-06 12:41:32 +08:00
zdl
c6b3b56cb8 feat: 搜索框布局调整 2025-11-06 12:40:58 +08:00
zdl
42f1b2f24e feat: 热门关键词展示一行，且不展示股票数量 2025-11-06 12:37:37 +08:00
zdl
935c933cb8 feat: 搜索框接入交易时间段筛选能力 2025-11-06 11:48:31 +08:00
zdl
f4b58b42cc feat: 添加交易时间段筛选组件 2025-11-06 11:46:31 +08:00
zdl
5ff8db8899 pref: UI优化 2025-11-06 11:35:10 +08:00
zdl
116594d9b1 pref: 去掉无用代码 2025-11-06 10:26:43 +08:00
zdl
ca5adb3ad2 feat: 从替换式渲染 → 蒙层式渲染 
之前的问题：

  - Loading 时替换整个列表组件
  - 组件频繁挂载/卸载，性能差
  - 切换模式时界面跳动明显

  现在的方案：

  - ✅ 列表组件始终渲染（避免频繁挂载卸载）
  - ✅ Loading 通过蒙层叠加显示
  - ✅ 旧数据保持可见直到新数据加载完成
  - ✅ 更平滑的视觉过渡
 2025-11-06 10:17:10 +08:00
zdl
ebb737427f fix: 优化模式切换体验和渲染逻辑 
## 问题修复
1. 模式切换时不再闪现"暂无事件数据"
2. 模式切换按钮始终可见，不会因加载状态而隐藏

## 技术改进
- 将控制栏（模式切换+分页）提取到 EventScrollList 外层
- 使用 mode（立即同步）而非 currentMode（延迟一帧）检查缓存
- 优化渲染顺序：loading → 数据 → 空状态，避免闪烁

## 文件修改
- DynamicNewsCard.js: 添加控制栏导入，优化渲染逻辑
- EventScrollList.js: 移除重复的控制栏代码

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-06 01:40:24 +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
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
e6ffb0dc74 Redux 相关修改 2025-11-05 19:01:56 +08:00
zdl
c5dcb4897d fix: 修复 CollapsibleHeader Box 组件导入缺失 2025-11-05 18:58:19 +08:00
zdl
2e89469d05 feat: 调整纵向列表UI 2025-11-05 17:50:33 +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
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
0765f8a800 feat: 纵向布局分页模式优化 2025-11-05 15:20:43 +08:00
zdl
aa1a93c65b feat: 重要性徽章样式优化（圆形设计） 2025-11-05 15:19:02 +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
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
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