模块知识库/Vibe-Trading 量化交易智能体平台/Vibe-Trading 前端应用/相关性分析与回测对比仪表盘/编码规范
- 图表组件统一采用
useRef<HTMLDivElement> 持有容器 ref，在 useEffect 中用 echarts.init 创建实例并通过 chart.setOption 配置，依赖变更时重建图表。
- 所有图表通过
getChartTheme() 读取主题对象，并将 tooltipBg、textColor、axisColor、gridColor 等字段应用到 ECharts 配置，确保明暗主题一致。
- 图表容器使用
ResizeObserver 监听尺寸变化，并以 requestAnimationFrame 节流调用 chart.resize()，在清理函数中 ro.disconnect() 并 chart.dispose()。
- 页面级异步请求使用
useRef<number> 记录请求 generation，在 finally/catch 分支中比对当前 generation 后再 setState，避免竞态导致的旧响应覆盖新状态。
- 可复用的 UI 文案全部走
i18n.t(...) 或 useTranslation().t(...)，键名按页面命名空间组织（如 correlation.*、compare.*、charts.*）。
- 指标对比通过声明式
METRICS 数组驱动表格行渲染，每行包含 key、label、type（pct/num/int/days）、higherIsBetter 四元组，并用 resolveMetric 兼容后端字段别名。