zdl
|
78fac38f3b
|
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 |
|
