第二章页面结构

2.1 布局设计

结算列表采用左侧筛选栏 + 右侧主内容区的两栏布局，主内容区支持赛事视图和注单视图切换。

┌──────────────────────────────────────────────────────────────┐
│ 顶部导航栏（含 IM 连接状态指示灯）                              │
├──────────┬───────────────────────────────────────────────────┤
│          │ 💡 结算模块说明提示条                               │
│ 左侧筛选栏 │─────────────────────────────────────────────────│
│          │ 工具栏：[赛事视图|注单视图] + 联赛 + 时间 + 搜索     │
│ 赛事状态   │─────────────────────────────────────────────────│
│ (带计数)  │                                                 │
│          │  赛事视图：赛事行列表 + 内嵌日志                     │
│ 赛事阶段   │  ─ 或 ─                                         │
│ (带计数)  │  注单视图：注单筛选Tab + 注单行列表                 │
│          │                                                 │
│ 运动类型   │─────────────────────────────────────────────────│
│ (带计数)  │ [批量操作栏（选中赛事后底部浮出）]                   │
└──────────┴───────────────────────────────────────────────────┘

2.2 为什么是这个布局

左侧放筛选栏：结算状态筛选是高频操作，结算人员需要快速切换「待结算」和「全部」。纵向排列的筛选项 + 实时计数徽章让结算人员一眼看到各状态的赛事数量。

两个视图切换：赛事视图用于浏览和导航（「哪些赛事需要处理？」），注单视图用于执行结算操作（「这笔注单该怎么结算？」）。两个视图服务不同场景，不应合并。

赛事视图不做结算操作：赛事视图只展示赛事概况和跳转入口。实际结算在注单视图（快捷通道）或结算详情页（完整操作）中进行。

2.3 模块职责一览

模块	位置	职责	章节
左侧筛选栏	左侧固定	赛事状态/来源/运动类型筛选，带实时计数	第 3 章
工具栏	主内容区顶部	视图切换、联赛筛选、时间选择、搜索	第 4 章
赛事视图	主内容区	赛事行列表 + 内嵌日志，展示和导航	第 5 章
注单视图	主内容区	注单行列表 + 串关展开 + 结算操作	第 6、7 章
弹窗	模态层	注单结算 / 盘口二次结算 / 结算人员分配 / 赛事异常处理	第 8 章
批量操作栏	底部浮出	批量分配结算人员	第 9 章
分页	主内容区底部	分页控制（一期无导出功能）	第 10 章

2.4 两个视图的关系

维度	赛事视图（默认）	注单视图
数据维度	一行 = 一场赛事	一行 = 一笔注单
核心操作	查看 + 跳转结算详情页	为盘口选择结算结果 + 跳转详情页做盘口二次结算
批量操作	勾选赛事 → 批量分配人员	无批量操作
左侧筛选	共享，始终显示赛事计数	共享，计数不变
工具栏	共享（联赛/时间/搜索）	额外展示注单类型 Tab
切换保留	切换时保留筛选条件和滚动位置	同左