Appearance
第七章 数据表格模块(M06)
交互原型
体验数据表格交互
- 点击行内「上架」「下架」按钮查看弹窗
- 悬停状态标签查看详情
- 勾选复选框触发批量操作栏
7.1 表头定义
数据表格包含14列,部分列支持固定位置以优化横向滚动体验。
| 序号 | 列名 | 宽度 | 对齐方式 | 固定位置 | 说明 |
|---|---|---|---|---|---|
| 1 | 复选框 | 28px | 居中 | 左固定 | 批量选择 |
| 2 | 开赛时间 | 100px | 左对齐 | 左固定 | 日期、时间、阶段 |
| 3 | 联赛 | 110px | 左对齐 | 无 | 国家、名称、等级 |
| 4 | 赛事 | 190px | 左对齐 | 无 | 球队、比分、红牌 |
| 5 | 盘口数 | 50px | 居中 | 无 | 开盘/总数 |
| 6 | 投注/赔付 | 78px | 右对齐 | 无 | 合计金额 |
| 7 | 单边比例 | 65px | 左对齐 | 无 | 最高风险方向 |
| 8 | 盈亏 | 50px | 右对齐 | 无 | 预估盈亏 |
| 9 | 告警 | 65px | 左对齐 | 无 | 告警标签 |
| 10 | 上架 | 48px | 居中 | 无 | 上架状态 |
| 11 | 盘口 | 48px | 居中 | 无 | 盘口汇总状态 |
| 12 | 数据源 | 45px | 居中 | 无 | 数据源状态 |
| 13 | 操盘手 | 72px | 左对齐 | 无 | 负责人 |
| 14 | 操作 | 100px | 左对齐 | 右固定 | 操作按钮 |
7.1.1 列宽调整与偏好保存
用户可以通过拖拽列边框调整列宽,调整后的列宽自动保存到本地存储,下次访问时恢复用户偏好。固定列(复选框、开赛时间、操作)的宽度不可调整。
7.2 各列详细说明
7.2.1 第一列:复选框
表头复选框用于全选或取消全选当前页所有赛事,行复选框用于选择单个赛事。
| 复选框状态 | 样式 | 触发条件 |
|---|---|---|
| 未选中 | 空心方框 | 默认状态 |
| 已选中 | 蓝色填充带勾 | 用户勾选 |
| 部分选中 | 蓝色填充带横线 | 仅表头,当前页部分赛事被选中 |
选中任意赛事后触发批量操作栏显示,详见第6章。
7.2.2 第二列:开赛时间
开赛时间列展示赛事的时间信息和当前进程阶段。
| 内容 | 格式 | 样式 | 示例 |
|---|---|---|---|
| 日期 | YYYY-MM-DD | 10px 灰色字体 | 2026-01-19 |
| 时间 | HH:mm | 12px 白色加粗字体 | 19:30 |
| 阶段标签 | 见下表 | 标签样式 | 下半场 67' |
| 更新时间 | 更新于 N 秒前 | 8px 灰色字体 | 更新于 3 秒前 |
说明:日期和时间均为北京时间(UTC+8),与服务器时间保持一致。
阶段标签样式定义
阶段标签根据数据源推送的比赛阶段(EventPeriodId)和时间状态(RBTimeStatus)组合显示:
| 阶段条件 | 标签文案 | 背景颜色 | 特殊样式 |
|---|---|---|---|
| 距开赛 > 30分钟 | 赛前 | 灰色 | 无 |
| 10分钟小于距开赛≤30分钟 | N 分钟后 | 蓝色 | 无 |
| 距开赛≤10分钟 | N 分钟后 | 红色 | 无 |
| 上半场 + 时间运行中 | 上半场 N' | 红色 | 带闪烁圆点 |
| 上半场 + 时间暂停 | 上半场 N' 暂停 | 橙色 | 无 |
| 中场休息 | 中场休息 | 橙色 | 无 |
| 下半场 + 时间运行中 | 下半场 N' | 红色 | 带闪烁圆点 |
| 下半场 + 时间暂停 | 下半场 N' 暂停 | 橙色 | 无 |
| 下半场 + 补时 | 下半场 90+N' | 红色 | 带闪烁圆点 |
| 滚球 + 比赛暂停 | 比赛暂停 | 橙色 | 带警告图标 |
| 加时上半场 | 加时上 N' | 紫色 | 带闪烁圆点 |
| 加时下半场 | 加时下 N' | 紫色 | 带闪烁圆点 |
| 点球大战 | 点球大战 | 红色 | 无 |
| 赛事状态=延期 | 延期 | 橙色 | 无 |
7.2.3 第三列:联赛
联赛列展示赛事所属联赛信息。
| 内容 | 格式 | 样式 | 示例 |
|---|---|---|---|
| 国家 | 国旗图标 + 国家名 | 9px 灰色字体 | 🏴 英格兰 |
| 联赛名称 | 文本 | 10px 白色字体,超长省略 | 英格兰超级联赛 |
| 联赛编号 | ID: + 数字 | 9px 灰色等宽字体 | ID: 1001 |
| 联赛等级 | 标签 | 见下表 | S |
联赛等级标签样式
联赛等级在联赛管理中配置,操盘列表仅展示。
| 等级 | 背景颜色 | 文字颜色 | 说明 |
|---|---|---|---|
| S | 红色 15% 透明度 | 红色 | 顶级联赛(如英超、西甲、欧冠) |
| A | 橙色 15% 透明度 | 橙色 | 重要联赛(如意甲、德甲) |
| B | 蓝色 15% 透明度 | 蓝色 | 普通联赛 |
| C | 灰色 15% 透明度 | 灰色 | 低级联赛 |
7.2.4 第四列:赛事
赛事列展示对阵双方和比分信息。赛事编号为系统唯一标识,用于追踪赛事在不同状态下的流转。
| 内容 | 说明 | 样式 | 状态联动规则 |
|---|---|---|---|
| 主队名称 | 数据源推送 | 10px 白色字体,最大宽度 75px,超长省略显示 | - |
| 主队红牌 | 数据源推送的红牌数 | 红色背景白字徽章,0 时不显示 | - |
| 比分区域 | 赛前显示 VS,滚球显示比分 | 边框容器内居中,比分为白色加粗 | 赛前≤30min显示倒计时,滚球显示实时比分 |
| 客队名称 | 数据源推送 | 同主队 | - |
| 客队红牌 | 数据源推送的红牌数 | 同主队红牌 | - |
| 赛事编号 | 系统生成的唯一标识 | 9px 灰色等宽字体 | 跨赛事生命周期不变,用于追踪和审计 |
| 标签组 | 赛事属性标签(含延期标签) | 小标签横向排列,最多显示 3 个,延期时显示红色橙色标签 | 延期状态由结算接口推送,不可手动修改 |
赛事状态与列表显示联动规则(写死):
| 赛事结算状态 | 操盘列表显示 | 说明 |
|---|---|---|
| normal_end、cancelled、interrupted、abandoned、walkover、withdrawal(终态) | 不显示,移至结算管理 | 赛事生命周期结束 |
| postponed(延期) | 显示,标签标记延期 | 保留在操盘列表等待恢复 |
| —(进行中) | 显示,正常操盘 | 赛事正常进行 |
赛事标签定义
| 标签 | 文案 | 样式 | 显示条件 | 数据来源 |
|---|---|---|---|---|
| 热门 | 热 | 红色背景 | 热门标识 = 是 | 本地配置或数据源 |
| 直播 | 播 | 紫色背景 | 直播标识 = 是 | 数据源推送 |
| 中立场 | 中 | 蓝色背景 | 中立场标识 = 是 | 数据源推送 |
| 延期 | 延期 | 橙色背景 | 赛事状态 = 延期 | 结算接口或内部系统 |
7.2.5 第五列:盘口数
盘口数列显示该赛事的盘口开盘情况。一个赛事包含多个盘口(如让球盘、大小球盘、独赢盘等),此列汇总显示开盘数量与总数量。
| 上架状态 | 显示格式 | 示例 | 交互 |
|---|---|---|---|
| 已上架 | X开/Y总 | 15开/18总 | 鼠标悬停显示盘口详情浮层 |
| 待上架 | — | — | 无交互 |
| 已下架 | — | — | 无交互 |
盘口详情浮层
悬停时显示的浮层列出各盘口类型及其状态:
| 浮层内容 | 示例 |
|---|---|
| 让球盘 | 开盘 |
| 大小球 | 开盘 |
| 独赢 | 隐藏 |
| 波胆 | 关盘 |
| ... | ... |
7.2.6 第六列:投注与赔付
投注与赔付列显示该赛事的投注金额和预计赔付金额。
| 内容 | 格式 | 颜色规则 |
|---|---|---|
| 投注额 | 金额数字 | 正常白色;≥ 30万 橙色 |
| 赔付额 | 赔 + 金额数字 | 正常灰色;≥ 100万 红色 |
| 上架状态 | 显示内容 | 交互 |
|---|---|---|
| 已上架 | 投注额和赔付额 | 点击跳转注单管理页面,自动筛选该赛事 |
| 待上架 | — | 无交互 |
| 已下架 | — | 无交互 |
金额显示规则
| 金额范围 | 显示格式 | 示例 |
|---|---|---|
| < 1万 | 原值 | 8,500 |
| ≥ 1万 且 小于 1亿 | 万为单位 | 3.5万 |
| ≥ 1亿 | 亿为单位 | 1.2亿 |
7.2.7 第七列:单边比例
单边比例列显示该赛事所有盘口中单边比例最高的一个,用于快速识别风险集中的赛事。
| 内容 | 说明 | 示例 |
|---|---|---|
| 进度条 | 可视化展示比例 | 82% 宽度填充 |
| 方向 + 百分比 | 最高单边方向 | 让主 82% |
| 盘口名 | 最高单边对应的盘口 | 让球盘 |
颜色规则
| 单边比例 | 进度条颜色 | 文字颜色 | 风险级别 |
|---|---|---|---|
| < 60% | 绿色 | 灰色 | 正常 |
| 60%~ 70% | 橙色 | 橙色 | 关注 |
| > 70% | 红色 | 红色加粗 | 告警 |
| 场景 | 显示内容 |
|---|---|
| 已上架且有投注 | 单边比例信息 |
| 已上架无投注 | — |
| 待上架 | — |
| 已下架 | — |
7.2.8 第八列:盈亏
盈亏列显示该赛事的预估盈亏(投注总额 - 预计赔付)。
| 显示格式 | 条件 | 颜色 |
|---|---|---|
| +金额 | 盈亏 > 0 | 绿色 |
| -金额 | 盈亏 < 0 | 红色 |
| 0 | 盈亏 = 0 | 灰色 |
| — | 待上架或无数据 | 灰色 |
7.2.9 第九列:告警
告警列显示该赛事当前存在的告警标签。告警类型(枚举)详见第9章9.11节「告警类型枚举」,包括类型定义、触发条件、样式规范等,本章仅引用不重复定义。
告警显示规则
| 规则 | 说明 |
|---|---|
| 多告警显示 | 垂直排列显示,最多显示 3 个,超出显示 +N |
| 显示优先级 | 最紧急 > 紧急 > 单边超限 > 大额投注 > 延期超时 > 比赛暂停 > 数据源暂停 > 数据源维护 > 数据延迟 > 未分配 > 中立场 |
| 无告警 | 显示 — |
| 悬停交互 | 悬停告警标签显示详细信息(如大额投注显示具体金额和时间) |
7.2.10 第十列:上架状态
| 状态值 | 标签文案 | 样式 | 说明 |
|---|---|---|---|
| 待上架 | 待上架 | 黄色背景 | 数据源已下发,等待审核上架 |
| 已上架 | 已上架 | 绿色背景 | 已对外展示,客户端可见 |
| 已下架 | 已下架 | 灰色背景 | 已人工隐藏,客户端不可见 |
7.2.11 第十一列:盘口状态(汇总)
盘口状态列显示该赛事下所有盘口的汇总状态,用于快速判断赛事整体是否可接受投注。单个赛事包含让球、大小球、独赢等多个盘口,每个盘口状态不同,此列按优先级汇总显示。
设计说明:筛选区不提供"盘口状态"筛选(因列表层面难以准确汇总多盘口状态),但列表仍展示盘口汇总状态列,供操盘手快速了解赛事整体投注状态。如需查看和操作单个盘口状态,需进入详情页。
汇总规则
| 优先级 | 判断条件 | 显示状态 | 说明 |
|---|---|---|---|
| 1 | 存在任一盘口为锁定 | 锁定 | 只要有盘口被人工锁定,整体显示锁定 |
| 2 | 不存在锁定,但存在隐藏 | 隐藏 | 部分盘口隐藏时整体显示隐藏 |
| 3 | 全部盘口为开盘 | 开盘 | 所有盘口均可投注 |
| 4 | 全部盘口为关盘 | 关盘 | 所有盘口均已关盘 |
| — | 上架状态=待上架或已下架 | — | 未上架赛事无盘口状态 |
状态样式
| 汇总状态 | 标签文案 | 样式 | 说明 |
|---|---|---|---|
| 开盘 | 开盘 | 绿色 | 可接受投注 |
| 隐藏 | 隐藏 | 橙色 | 部分或全部盘口临时隐藏 |
| 锁定 | 锁定 | 红色 | 存在人工锁定的盘口 |
| 关盘 | 关盘 | 灰色 | 所有盘口已关盘,客户端不可见 |
| — | — | 灰色 | 待上架或已下架 |
悬停详情
悬停盘口状态标签时显示该赛事各盘口的状态分布:
| 信息项 | 说明 | 示例 |
|---|---|---|
| 盘口分布 | 各状态的盘口数量 | 开盘 12 / 隐藏 3 / 锁定 0 / 关盘 3 |
| 隐藏来源 | 若存在隐藏盘口,显示隐藏来源 | 数据源暂停 |
| 隐藏时间 | 若存在隐藏盘口,显示进入隐藏的时间 | 14:32:15 |
7.2.12 第十二列:数据源状态
数据源状态列显示 IM 数据源推送的该赛事状态。当赛事下多个盘口的数据源状态不同时,按与盘口状态相同的优先级汇总显示。
| 状态值 | 标签文案 | 样式 | 说明 |
|---|---|---|---|
| 开盘 | 开盘 | 绿色 | 数据源正常推送,可接受投注 |
| 暂停 | 暂停 | 橙色 | 数据源临时暂停(进球、红牌等事件) |
| 维护 | 维护 | 紫色 | 数据源维护中 |
| 关盘 | 关盘 | 灰色 | 数据源关盘该赛事 |
字段来源:数据源状态由IM推送的EventStatusId(1=开盘/2=关盘)和IsMaintenance字段组合判定。
7.2.13 第十三列:操盘手
| 场景 | 显示内容 | 样式 | 交互 |
|---|---|---|---|
| 已分配 1 人 | 操盘手姓名 | 普通文本 | 主管可点击弹出更换操盘手下拉 |
| 已分配多人 | 主操盘手姓名 +N | 普通文本 | 点击展开完整操盘手列表 |
| 未分配 | 未分配 | 橙色边框下拉框 | 可直接选择分配(仅主管可操作) |
7.2.14 第十四列:操作按钮
操作按钮根据赛事当前状态组合动态显示,详细规则见 7.4 节。
7.3 行样式规则
7.3.1 行背景颜色
| 条件 | 背景颜色 | 优先级 | 说明 |
|---|---|---|---|
| 置顶:待上架且滚球 | 红色 10% 透明度 | 1 | 最紧急 |
| 置顶:待上架且≤10分钟开赛 | 红色 10% 透明度 | 2 | 紧急 |
| 置顶:有严重告警 | 橙色 10% 透明度 | 3 | 单边超限或大额投注 |
| 赛事状态=延期 | 橙色 8% 透明度 | 4 | 异常状态 |
| 鼠标悬停 | 白色 5% 透明度 | 5 | 交互反馈 |
| 复选框选中 | 蓝色 10% 透明度 | 6 | 选中状态 |
| 默认 | 透明 | 7 | 常规显示 |
优先级数字越小优先级越高,同时满足多个条件时采用优先级最高的样式。
「即将」vs「紧急」区分:
术语 阈值 用途 定义位置 即将开赛(比赛进程) ≤30分钟 Tab筛选、状态显示 第9章9.2.3节 紧急(置顶/一键锁盘) ≤10分钟(固定值) 置顶排序、行背景色、一键锁盘 本节 即将开赛告警 ≤告警阈值(联赛管理定义,默认10分钟) 告警触发 第9章9.11节 10分钟为置顶/一键锁盘的固定阈值。详见第5章5.2.2节。
7.3.2 置顶区说明
置顶区位于表格最上方,用红色分隔线与普通区域分隔。
| 置顶条件 | 优先级 | 说明 |
|---|---|---|
| 待上架且滚球 | 1 | 比赛已开始但未上架,最紧急 |
| 待上架且≤10分钟开赛 | 2 | 即将开赛但未上架,紧急 |
| 单边超限 | 3 | 超过告警阈值(具体阈值见风控管理配置) |
| 大额投注告警 | 4 | 超过大额阈值(具体阈值见风控管理配置) |
置顶区内的赛事按优先级排序,优先级相同时按开赛时间排序。赛事解除置顶条件后(如完成上架、单边比例下降),自动移出置顶区回到普通排序位置。
7.3.3 行边框与联赛分组
| 条件 | 边框样式 |
|---|---|
| 联赛分组首行 | 顶部显示联赛分组标题栏 |
| 普通行 | 底部 1px 灰色边框 |
联赛分组标题栏
当排序方式为「联赛分组」时,同一联赛的赛事显示在一起,联赛首行上方显示分组标题栏:
| 内容 | 样式 |
|---|---|
| 国旗 | 16×16 像素 |
| 联赛名称 | 12px 白色加粗字体 |
| 赛事数量 | 灰色小字,如「3 场」 |
| 折叠按钮 | 可点击折叠或展开该联赛,折叠状态保存到本地存储 |
7.4 操作按钮规则
操作按钮根据赛事的上架状态、赛事状态组合动态显示。
7.4.1 按钮显示规则
| 上架状态 | 赛事状态 | 显示按钮 |
|---|---|---|
| 待上架 | 正常 | 上架、详情 |
| 待上架 | 延期 | 详情 |
| 已上架 | 正常 | 下架、详情 |
| 已上架 | 延期 | 下架、详情 |
| 已下架 | 正常 | 上架、详情 |
| 已下架 | 延期 | 详情 |
盘口操作入口说明
赛事列表仅提供上架/下架操作,盘口状态操作(隐藏、取消隐藏、锁定、解锁)统一在「赛事操盘详情页」进行。这样设计的原因:
- 盘口操作需要查看具体盘口数据后再决策,列表信息不足以支撑决策
- 避免误操作导致批量盘口状态变更
- 保持列表页简洁,聚焦于赛事管理而非盘口操作
终态处理:完场(Finished)、取消(Cancelled)、中断(Interrupted)、腰斩(Abandoned)、弃权(Walkover)、退赛(Retired)等终态由结算接口推送,系统自动将赛事流转到结算管理模块,不在操盘列表显示。
7.4.2 按钮权限叠加规则
在 7.4.1 显示规则基础上,还需叠加权限判断:
| 按钮 | 权限规则 |
|---|---|
| 上架 | 全部角色可操作 |
| 下架 | 普通操盘手仅限自己负责的赛事,主管和风控可操作全部 |
| 详情 | 普通操盘手可查看已分配给自己的赛事和未分配的赛事,主管和风控可查看全部 |
无权限的按钮显示为禁用状态(灰色 50% 透明度),悬停提示「权限不足」。
盘口操作权限:盘口状态操作(隐藏、取消隐藏、锁定、解锁)的权限控制在「赛事操盘详情页」中定义,详见操盘详情页文档。
7.4.3 按钮样式定义
| 按钮 | 类型 | 样式 | 点击效果 |
|---|---|---|---|
| 上架 | 主要 | 蓝色填充 | 弹出上架确认对话框 |
| 下架 | 次要 | 灰色边框 | 弹出下架确认对话框 |
| 详情 | 文本 | 蓝色文字 | 跳转赛事操盘详情页 |
7.4.4 按钮交互状态
| 状态 | 样式变化 |
|---|---|
| 正常 | 默认样式 |
| 悬停 | 亮度提升 10% |
| 点击 | 亮度降低 10% |
| 加载中 | 显示旋转图标,禁止重复点击 |
| 禁用 | 透明度 50%,不可点击 |
7.5 表格空状态
当筛选结果为空时,表格区域显示空状态:
| 元素 | 内容 |
|---|---|
| 插图 | 空数据插图 |
| 主文案 | 暂无符合条件的赛事 |
| 副文案 | 请尝试调整筛选条件 |
| 操作按钮 | 「清除筛选条件」,点击后重置所有筛选至默认值 |
7.6 表格加载状态
| 场景 | 加载样式 |
|---|---|
| 首次加载 | 全表格骨架屏,模拟表格结构 |
| 筛选刷新 | 表格半透明遮罩 + 居中旋转图标,筛选控件保持可操作 |
| 分页切换 | 底部显示加载提示 |
| 单行刷新 | 该行显示加载动画,其他行正常显示 |
7.7 数据更新动画
当实时推送导致数据变化时,采用动画提示用户关注:
| 变化类型 | 动画效果 | 持续时间 |
|---|---|---|
| 新增赛事 | 绿色背景闪烁后插入列表 | 1 秒 |
| 赛事移除 | 红色背景闪烁后淡出 | 0.5 秒 |
| 数据更新 | 变化字段黄色背景闪烁 | 0.5 秒 |
| 状态变更 | 状态标签缩放动画 | 0.3 秒 |
| 进入置顶区 | 从原位置滑动到置顶区 | 0.3 秒 |
| 退出置顶区 | 从置顶区滑动到排序位置 | 0.3 秒 |
说明:动画可在用户偏好设置中关盘,关盘后数据变化时仅更新显示,无动画效果。
修订记录
| 版本 | 日期 | 修订内容 |
|---|---|---|
| v1.0 | 2026-01-15 | 初稿 |
| v1.1 | 2026-01-20 | 【审计修正】1) 原型提示移除"锁盘"(列表页不提供盘口操作);2) 7.2.2节TimeStatus改为RBTimeStatus;3) 7.2.4节赛事标签移除EventStatusId引用,改为"结算接口或内部系统";4) 7.2.11节增加与5的设计一致性说明,明确关盘=客户端不可见;5) 7.2.12节增加字段来源说明;6) 7.4.1节终态处理改为正确的结算接口描述;7) 7.4.2节详情按钮权限与D3决策保持一致 |
| v1.2 | 2026-01-21 | 【告警一致性修正】7.2.9节新增"延期超时"告警类型,告警从10种增至11种,更新显示优先级顺序,增加引用9 9.11节说明 |
| v1.3 | 2026-01-28 | 【审计修正】7.3.1节增强术语区分说明,明确"即将开赛"统一定义为≤10分钟 |
| v1.4 | 2026-01-28 | 【术语澄清】恢复阶段标签三档(赛前大于30分钟/中间10-30分钟/即将≤10分钟),明确区分"即将(比赛进程≤30分钟)"与"紧急(一键锁盘/置顶≤10分钟)" |
| v1.5 | 2026-01-29 | 【术语一致性】本地盘口状态"暂停"统一更名为"隐藏",与宪法v1.6保持一致;操作从"暂停、恢复"改为"隐藏、取消隐藏" |