tonghuashun_CardDemo/doc/market-ranking-design.md

市场排名卡片设计

市场排名卡片采用视图、HTTP 数据和行情订阅分层设计：

• MarketRankingNodeComponent：负责 UI、Tab 切换、页面可见性和订阅生命周期。
• MarketRankingDataFetcher：根据当前排名类型获取 contracts，确定展示的合约及顺序。
• MarketRankingHqRequestClient：使用 contracts 构建 4106 参数并订阅行情。
• MarketRankingTableData：对齐真实行情返回结构，通过 tableRows 和 row.get(fieldId) 读取字段。
• HqFieldId：统一维护行情字段 ID，避免业务代码硬编码。

数据流

切换 Tab
→ HTTP 获取 contracts
→ 生成合约占位列表
→ 发起 4106 行情订阅
→ TableData 转换为 CardData
→ 更新 UI

HTTP 只负责返回 contracts；最新价、涨跌幅、成交额等动态字段由行情订阅补充。

生命周期

• 页面可见时获取数据并订阅行情。
• 页面隐藏时停止行情订阅。
• refreshTrigger 变化或 Tab 切换时重新获取 contracts，并在可见时重新订阅。
• TCP 重连且页面可见时，停止旧订阅并重新订阅行情。
• 组件消失时解绑 TCP 事件并释放行情订阅。

当前 HTTP 和行情连接均为 Mock。接入真实环境时，主要替换 MarketRankingDataFetcher 和 MarketRankingHqRequestClient 的内部实现，视图层数据结构和生命周期保持不变。 真实 HTTP 接入后还应增加请求版本校验或取消机制，避免快速切换 Tab 时较早的响应覆盖当前状态。

具体 HTTP 与 4106 参数见 市场排名接口文档。