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
|
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
|
95134d526d
|
feat(HistoricalEvents): 优化历史事件列表 UI 和相关股票弹窗
主要改进:
1. 历史事件列表改为卡片式网格布局
- 移除时间轴样式(垂直线 + 节点图标)
- 使用 SimpleGrid 响应式布局(1列/2列/3列)
- 卡片显示:事件名称、日期、相关度、重要性、描述
- 点击"相关股票"按钮打开 Modal 弹窗
2. 历史事件对比默认展开
- DynamicNewsDetailPanel: isHistoricalOpen 初始值改为 true
- 用户打开事件详情面板时,历史事件对比区域默认展开
3. 相关股票弹窗改为卡片式布局
- StocksList 组件从 Table 表格改为 SimpleGrid 卡片
- 显示 6 个字段:代码、名称、板块、相关度、涨幅、关联原因
- 关联原因支持展开/收起(startingHeight: 40px)
- 响应式网格布局(base: 1列, md: 2列, lg: 3列)
4. 修复字段映射兼容性
- 添加 getEventDate() 兼容多种日期字段
- 添加 getEventContent() 兼容多种内容字段
- 支持字段:event_date/created_at/date、content/description/summary
- 添加 Debug 日志输出实际数据结构
5. 修复弹窗关闭问题
- 添加 handleCloseModal() 同时清空两个状态
- 使用条件渲染 {stocksModalOpen && <Modal>}
- 关闭时完全卸载 Modal 组件,避免状态残留
技术细节:
- 移除未使用的导入(Table, Thead, Tbody, Tr, Th, Td 等)
- 新增工具函数:formatChange, getChangeColor, getCorrelationColor
- 卡片 hover 效果:boxShadow + borderColor 变化
- 涨跌幅颜色:红色(上涨)/ 绿色(下跌)
- 相关度颜色梯度:>=80% 红色, >=60% 橙色, <60% 绿色
代码统计:
- HistoricalEvents.js: -402 行, +344 行(净减少 58 行)
- 移除时间轴复杂逻辑,简化组件结构
- 提升代码可维护性和可读性
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-11-03 12:41:02 +08:00 |
|