第二章 页面结构

2.1 布局设计的出发点

操盘手的工作有三个特点，直接决定了页面布局：

特点一：需要同时看很多场比赛

一个操盘手同时负责10-20场比赛。他需要在一屏内看到尽量多的赛事，而不是频繁翻页。所以主内容区要尽量大，数据表格是页面的绝对主角。

特点二：筛选条件经常切换

"刚才看滚球，现在想看即将开赛的"——这种切换非常频繁。所以筛选区要始终可见，不能藏在弹窗或抽屉里。

特点三：需要快速定位特定联赛

"我只负责英超，不想看其他联赛"。联赛筛选是高频操作，放在侧边栏比放在顶部筛选区更合适，因为联赛列表往往很长，需要独立的滚动区域。

基于这三点，我们采用经典的三栏布局：

┌─────────────────────────────────────────────────────────────────────┐
│ 顶部导航栏（系统级） │
├────────────┬────────────────────────────────────────────────────────┤
│ │ │
│ 侧边栏 │ 主内容区 │
│ （筛选） │ │
│ │ ┌────────────────────────────────────────────────┐ │
│ 联赛树 │ │ 顶部栏：统计数字 + 紧急操作 │ │
│ 数据源状态 │ ├────────────────────────────────────────────────┤ │
│ │ │ 筛选区：日期 + 进程 + 状态 + 搜索 │ │
│ │ ├────────────────────────────────────────────────┤ │
│ │ │ │ │
│ │ │ 数据表格（主角） │ │
│ │ │ │ │
│ │ ├────────────────────────────────────────────────┤ │
│ │ │ 分页栏 │ │
│ │ └────────────────────────────────────────────────┘ │
│ │ │
└────────────┴────────────────────────────────────────────────────────┘

---

2.2 为什么是这个布局

侧边栏放左边，而不是右边

操盘手的视线习惯是从左到右。左侧放联赛筛选，选完联赛后视线自然移动到右侧的赛事列表。如果侧边栏放右边，操盘手需要"先看中间，再看右边选联赛，再回到中间看结果"，视线跳跃更多。

筛选区放在表格上方，而不是侧边栏里

筛选区的内容（日期、比赛进程、上架状态、盘口状态）是横向排列的按钮组和下拉框，适合水平布局。如果塞进侧边栏，要么挤成一团，要么侧边栏变得很宽，挤占表格空间。

而联赛筛选是树形结构，适合纵向展示，所以放在侧边栏。

顶部状态栏的统计数字

顶部状态栏显示五个关键数字：待上架、滚球中、总赛事、预估盈亏、延期赛事。这些数字回答了操盘手最关心的问题：

数字	回答的问题	点击行为
滚球中 23	"现在有多少场比赛在进行？"	跳转到滚球Tab
待上架 156	"还有多少赛事没处理？"	跳转到待上架筛选
总赛事	"今天一共有多少场？"	无
预估盈亏	"当前风险敞口如何？"	无
延期赛事	"有没有延期需要跟踪？"	跳转到延期赛事筛选

统计口径说明：

统计位置	默认口径	主管/风控口径	说明
顶部状态栏（待上架、滚球中、总赛事、预估盈亏、延期赛事）	用户可见范围统计	全局统计	普通操盘手仅统计可见赛事；主管/风控可切换查看全局口径
Tab页签数字（全部、滚球、即将、赛前）	受筛选影响	受筛选影响	在当前可见范围基础上，受日期、联赛、上架状态等筛选条件影响

设计说明：统计口径默认按用户数据可见范围计算。主管和风控角色可通过顶部栏的「查看全局」开关切换为全局统计口径。

---

2.3 模块职责一览

从上到下、从左到右，页面包含以下模块：

顶部导航栏（M00）—— 系统级导航

这是整个后台系统的一级菜单，不是操盘列表独有的。包含：系统Logo、各功能模块入口（操盘管理、结算管理、配置管理等）、消息通知、用户信息。

高度固定48像素，始终显示在页面最顶部。

侧边栏（M01）—— 联赛筛选 + 数据源状态

侧边栏专注于两件事：

1. 数据源状态：IM数据源是否正常。如果数据源异常，整个区域显示红色边框警示，操盘手一眼就能看到。
2. 联赛筛选树：按运动类型 → 联赛两级展示，点击联赛名称筛选该联赛的赛事。每个联赛后面显示当前用户可见范围内的赛事数量（主管/风控可切换为全局口径）。

侧边栏可以折叠。展开时宽度240像素，折叠后60像素（只显示图标）。折叠功能是为了在小屏幕上给表格腾出更多空间。

顶部栏（M02）—— 全局统计 + 紧急操作

顶部栏包含：

• 页面标题"操盘列表"
• 五个统计卡片（待上架、滚球中、总赛事、预估盈亏、延期赛事）—— 全局统计，不受筛选影响
• 服务器时间（精确到秒，确保操盘手看到的时间和系统一致）
• 「一键锁盘」按钮（仅主管和风控可见）

网络异常横幅（M03）—— 仅异常时显示

当WebSocket连接断开或网络不稳定时，在顶部栏下方显示黄色横幅，提示"网络连接不稳定，数据存在延迟"。这个横幅平时不显示。

筛选区（M04）—— 核心筛选功能

四行布局，从上到下依次是：

1. 日期筛选：昨日/今日/明日/后天快捷按钮 + 自定义日期范围
2. 比赛进程：全部/滚球/即将/赛前页签（页签数字受筛选条件影响）
3. 状态筛选：赛事状态 + 上架状态
4. 其他筛选：联赛、联赛等级、盘口状态、告警状态、操盘手、搜索框、导出

筛选区的详细设计见第5章。

批量操作栏（M05）—— 仅选中赛事时显示

当表格中勾选了赛事后，页面底部浮出批量操作栏，显示"已选择 N 场赛事"和批量操作按钮。

批量操作栏支持的操作：

操作	说明
批量上架	将多场待上架赛事一次性上架
批量下架	将多场已上架赛事一次性下架

设计说明：盘口操作（隐藏/取消隐藏/锁盘/解锁）统一在赛事详情页进行，列表页不提供。这样设计是因为盘口操作需要操盘手确认具体的盘口状态和风险情况，批量执行容易造成误操作。

取消所有勾选后，批量操作栏自动消失。

数据表格（M06）—— 页面主角

展示赛事的所有关键信息。表格支持：

• 固定列（复选框、开赛时间固定在左侧，操作按钮固定在右侧）
• 列宽调整（拖拽列边框）
• 联赛分组（同一联赛的赛事显示在一起，可折叠）

表格的详细设计见第7章。

分页栏（M07）—— 分页控制

显示总赛事数、当前页范围、每页条数选择（50/100/200）、页码导航。

消息通知（M08）—— 右上角浮动

操作成功/失败的Toast提示，以及实时推送的告警通知，显示在页面右上角。同时最多显示3条，3秒后自动消失。

---

2.4 模块层级关系

用一张表说明各模块的显示条件和层级：

模块	显示条件	层级	说明
顶部导航栏	始终显示	固定在顶部	z-index最高，滚动时不动
侧边栏	始终显示	固定在左侧	可折叠，滚动时不动
顶部栏	始终显示	主内容区顶部	随主内容区滚动
网络异常横幅	网络异常时	顶部栏下方	异常消除后自动消失
筛选区	始终显示	横幅下方	筛选条件变化时表格刷新
批量操作栏	选中赛事时	页面底部浮动	取消选中后消失
数据表格	始终显示	页面主体	占据剩余全部空间
分页栏	始终显示	表格底部	随表格滚动
消息通知	有通知时	右上角浮动	最高层级，覆盖其他内容

---

2.5 尺寸规范

固定尺寸

区域	尺寸	说明
顶部导航栏	高度 48px	固定，不可调整
侧边栏展开	宽度 240px	可折叠
侧边栏折叠	宽度 60px	仅显示图标
表格行高	48px	固定，虚拟滚动依赖此值

弹性尺寸

区域	计算方式
主内容区宽度	视口宽度 - 侧边栏宽度
主内容区高度	视口高度 - 顶部导航栏高度
表格高度	主内容区高度 - 顶部栏 - 筛选区 - 分页栏

最小支持

指标	数值	说明
最小视口宽度	1280px	低于此值显示水平滚动条
主内容区最小宽度	900px	保证表格核心列可见
推荐分辨率	1920×1080	最佳体验

---

2.6 响应式策略

当前版本针对桌面端设计，不支持移动端。

为什么不做移动端适配：操盘工作需要同时看很多信息，在手机上无法高效完成。操盘手必须使用电脑工作。

小屏幕适配（1280px - 1440px）：

1. 侧边栏默认折叠，给表格更多空间
2. 筛选区的部分下拉框收起到"更多筛选"
3. 表格启用水平滚动，固定列始终可见

大屏幕优化（2560px及以上）：

1. 表格列宽按比例放大
2. 侧边栏可以显示更多联赛（无需滚动）
3. 单页可显示更多赛事行

---

2.7 交互原型

原型操作指引

按下面步骤体验侧边栏交互：

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

修订记录

版本	日期	修订内容
v1.0	2026-01-15	初稿
v1.1	2026-01-20	【审计修正】1) 明确统计口径：顶部状态栏（全局统计）vs Tab页签（受筛选影响）；2) 批量操作栏移除盘口操作（暂停/恢复/锁盘/解锁），盘口操作统一在详情页进行