第三章 侧边栏模块

3.1 侧边栏要解决什么问题

操盘手张三负责英超和西甲，每天上班后他面对的是所有联赛的赛事混在一起。他需要快速回答两个问题：

1. "我负责的联赛今天有多少场比赛？" —— 需要按联赛筛选
2. "数据源正常吗？" —— 如果数据源挂了，操盘就没意义了

侧边栏就是为这两个问题设计的。它包含两个区域：

┌─────────────────┐
│ 🎯 运动分类  ◀ │ ← 页面标识 + 折叠按钮
├─────────────────┤
│ 📊 全部 156     │
│ ⚽ 足球 98▼    │
│   └ 英超 12    │ ← 联赛树（核心筛选功能）
│   └ 西甲 10    │
│   └ 德甲 9     │
│ 🏀 篮球 32▶    │
│ 🎾 网球 18▶    │
│ ...            │
└─────────────────┘

注意：数据源状态已移至顶部导航栏统一展示，搜索功能也已移至顶部导航栏的全局搜索框中。

---

3.2 数据源状态区

v1.3 变更说明：数据源状态已从侧边栏移至顶部导航栏统一展示，详见第4章顶部栏模块。此处保留状态判定规则作为参考。

状态判定规则

数据源状态根据距离上次成功更新的时间判定。由于IM数据源采用Delta轮询机制（滚球10秒、今日1分钟、早盘5分钟），延迟判断需要匹配实际刷新周期：以下阈值基于IM Delta API文档v1.14定义的轮询周期，如IM调整轮询策略需同步更新

场景	预期刷新周期	警告阈值	异常阈值	说明
滚球赛事	10秒	>20秒	>60秒	滚球对实时性要求最高
今日赛事	1分钟	>2分钟	>5分钟	今日赛事允许较大延迟
早盘赛事	5分钟	>10分钟	>30分钟	早盘变化慢，容忍度高

状态展示：

状态	判定条件	样式	操盘手该怎么做
正常	在预期刷新周期内收到更新	绿色圆点 + "正常"	正常操盘
延迟	超过警告阈值但未达异常阈值	橙色圆点 + "延迟" + 延迟秒数	可以操盘，但要注意赔率存在滞后
异常	超过异常阈值或无响应	红色圆点 + "异常"	暂停操作，等待恢复或联系技术支持

配置说明：以上阈值可在联赛管理中调整，但不建议普通操盘手修改。阈值设置需考虑IM数据源的实际轮询频率。

---

3.3 联赛筛选树——按运动→联赛两级展示

为什么用树形结构而不是下拉框

操盘手需要同时看到多个联赛的赛事数量，以便判断今天的工作量分布。下拉框一次只能看到一个选项，不符合这个需求。

树形结构的好处：

1. 一眼看到所有运动类型和联赛
2. 每个联赛后面显示赛事数量，快速评估工作量
3. 支持展开/折叠，不关心的运动可以收起来

树形结构

层级	显示内容	交互	示例
第一级	运动类型 + 总赛事数	点击展开/折叠	⚽ 足球 98
第二级	联赛名称 + 赛事数	点击筛选该联赛	└ 英超 12

赛事数量统计口径

联赛树中显示的赛事数量默认按用户可见范围统计，不受筛选区条件（日期、进程Tab、上架状态等）影响。

统计位置	默认口径（普通操盘手）	主管/风控口径	说明
运动类型后的数字	用户可见范围	全局实时	主管/风控可通过顶部栏切换为全局口径
联赛名称后的数字	用户可见范围	全局实时	同上

设计说明：统计口径默认按用户数据可见范围计算（已分配给自己的赛事+未分配的赛事）。主管和风控可切换为全局统计口径。

运动类型列表

以下是IM数据源支持的运动类型，按我们平台的业务重要性排序：

运动类型	SportId	图标	说明
足球	1	⚽	主力运动，占投注量70%以上
篮球	2	🏀	第二大运动，含NBA、CBA
网球	3	🎾	ATP、WTA巡回赛
棒球	4	⚾	MLB、日本职棒、韩国职棒
冰球	5	🏒	NHL为主
美式足球	6	🏈	NFL、NCAA
排球	7	🏐	各国联赛
手球	8	🤾	欧洲联赛为主
电子竞技	43	🎮	LOL、DOTA2、CS2

哪些运动默认展开？

系统默认展开足球和篮球（前两大运动），其他运动默认折叠。操盘手可以手动展开，展开状态会保存到本地，下次访问时恢复。

联赛排序规则

同一运动下的联赛，按以下规则排序：

1. 联赛等级：等级1（最高） > 等级2 > ... > 等级10（最低） > 默认（未分配等级）
2. 当前赛事数：同等级内，赛事数多的在前
3. 联赛名称：赛事数也相同时，按名称字母序

这样排序的目的：操盘手最关心的联赛（等级高、赛事多）排在最前面，减少滚动。

赛事数量的显示规则

场景	数量显示	颜色
该联赛有滚球赛事	红色数字	提示有正在进行的比赛
该联赛无滚球赛事	白色数字	普通显示
该联赛无赛事	显示0或不显示	灰色

为什么滚球用红色？ 滚球赛事需要持续关注，红色是视觉上最醒目的颜色，帮助操盘手快速定位"哪些联赛有正在进行的比赛"。

---

3.4 联赛搜索——快速定位

侧边栏搜索框支持模糊搜索：

搜索范围	匹配方式	示例
运动类型名称	包含匹配	输入"球"→ 足球、篮球、排球...
联赛中文名	包含匹配	输入"英超"→ 英格兰超级联赛
联赛英文名	包含匹配	输入"NBA"→ NBA
赛事关键词	包含匹配	输入"曼联"→ 包含曼联的赛事

搜索是实时过滤，输入即筛选，不需要按回车。输入框右侧有清除按钮，点击后恢复完整列表。

---

3.5 筛选联动——点击联赛后发生什么

当操盘手点击某个联赛时，系统行为如下：

步骤	系统行为
1	联赛名称高亮显示（蓝色背景）
2	主内容区表格刷新，只显示该联赛的赛事
3	筛选区的"联赛"下拉框同步更新为该联赛
4	URL参数更新，便于分享链接

点击运动类型（而非具体联赛）：显示该运动下所有联赛的赛事。

点击"全部"：清除联赛筛选，显示所有赛事。

与筛选区的联动

侧边栏的联赛选择与筛选区的"联赛"下拉框是双向同步的：

• 在侧边栏点击英超 → 筛选区下拉框显示"英超"
• 在筛选区选择西甲 → 侧边栏高亮西甲

两个地方改哪个都行，效果一样。提供两个入口是因为使用习惯不同：有人喜欢在树里点，有人喜欢用下拉框选。

---

3.6 侧边栏折叠——给表格腾空间

什么时候需要折叠

两个典型场景：

场景一：屏幕较小

操盘手用1366×768的笔记本，展开侧边栏后表格只能显示10列，看不全。折叠侧边栏后能显示14列。

场景二：已经选好联赛，专注盯盘

操盘手已经选定了英超，接下来的工作就是盯着这些比赛。侧边栏此时没用，折叠后视野更专注。

折叠后的显示

区域	展开时	折叠时
页面标识	🎯 运动分类	🎯（仅图标）
运动类型	⚽ 足球 98	⚽（仅图标）
联赛列表	完整列表	隐藏

折叠后，鼠标悬停在运动图标上会显示Tooltip，内容是运动名称和赛事数量。

折叠状态保存

操盘手折叠/展开侧边栏后，状态保存到本地存储。下次访问时恢复上次的状态。

---

3.7 边界情况处理

3.7.1 联赛列表空态（写死规则）

场景	显示方式	说明
某运动下当前筛选范围内无赛事	运动节点显示，数字显示0（灰色）	保留节点便于用户清空筛选
某运动从未接入IM数据源	不显示该运动节点	无数据源则无展示意义
全部运动均无赛事	显示空态插图+"当前筛选无赛事"+清空筛选按钮	引导用户调整筛选条件

3.7.2 懒加载与性能策略（写死规则）

策略项	规则
初始加载	仅加载运动类型一级节点；联赛列表在展开时按需加载
联赛列表缓存	展开过的运动类型联赛列表缓存到内存，折叠后不销毁
赛事数量刷新	跟随筛选条件变更实时刷新；WebSocket增量更新时仅更新变更节点
展开/折叠状态	保存到本地存储（localStorage），下次访问恢复
最大渲染联赛数	单运动下联赛超过50个时启用虚拟滚动

3.7.3 联赛名称过长

联赛名称超过显示宽度时，末尾显示省略号，鼠标悬停显示完整名称。

最大显示宽度：侧边栏宽度 - 图标宽度 - 数量宽度 - 边距 ≈ 150px

3.7.4 联赛数量过多

当某运动下联赛超过20个时，展开后显示滚动条。滚动区域高度最大300px。

---

3.8 交互原型

原型操作指引

• 点击左上角 ◀ 按钮折叠/展开侧边栏
• 点击运动类型展开/折叠联赛列表
• 点击联赛名称筛选该联赛的赛事
• 在搜索框输入关键词过滤联赛

修订记录

版本	日期	修订内容
v1.0	2026-01-15	初稿
v1.1	2026-01-20	【审计修正】1) 数据源延迟阈值从毫秒级改为秒级，匹配IM Delta轮询机制（滚球10s/今日1min/早盘5min）；2) 明确联赛树赛事数量为全局实时统计，不受筛选条件影响
v1.2	2026-01-28	【审计修正】新增3.7.1联赛列表空态规则、3.7.2懒加载与性能策略，明确写死规则
v1.3	2026-01-30	【原型同步】1) 侧边栏标题从"操盘列表"改为"运动分类"；2) 数据源状态移至顶部导航栏；3) 搜索框移至顶部导航栏全局搜索；4) 更新折叠后显示规则
v1.4	2026-01-30	【原型回滚】1) 侧边栏标题改回"筛选"；2) 搜索框回滚至侧边栏