Appearance
第二章 页面结构
2.1 布局设计
结算报表采用左侧筛选栏 + 右侧主内容区的两栏布局。主内容区自上而下依次为页面头部、统计卡片、工具栏和报表表格。
text
┌────────────────────────────────────────────────────────────────────┐
│ 顶部导航栏 │
├────────────┬───────────────────────────────────────────────────────┤
│ 左侧筛选栏 │ 页面头部：标题 + 导出 CSV/Excel + 刷新 │
│ │───────────────────────────────────────────────────────│
│ 时间范围 │ 统计概览卡片：赛事数 / 注单数 / 投注额 / 派彩额 / 盈亏 │
│ 结算来源 │───────────────────────────────────────────────────────│
│ 结算状态 │ 工具栏：联赛筛选 + 搜索 + 排序 │
│ 结算人员 │───────────────────────────────────────────────────────│
│ 运动类型 │ 赛事结算明细表 │
│ 盈亏筛选 │ 赛事详情 / 状态 / 盘口数 / 注单结构 / 金额 / 人员 / 时间 │
│ │───────────────────────────────────────────────────────│
│ │ 分页信息 + 上一页/下一页 │
└────────────┴───────────────────────────────────────────────────────┘2.2 为什么采用这种结构
| 设计点 | 原因 |
|---|---|
| 左侧集中放筛选项 | 报表页的主要操作是切换统计范围，筛选优先级高于单条操作 |
| KPI 卡片放在表格上方 | 先看整体结果，再看单场明细，符合复盘顺序 |
| 不设计图表区 | 当前原型聚焦“可读、可导出、可追溯”的运营报表，不做趋势分析页面 |
| 表格作为主内容区核心 | 财务复核最终仍需落到具体赛事行和具体金额 |
2.3 模块职责一览
| 模块 | 位置 | 职责 | 章节 |
|---|---|---|---|
| 左侧筛选栏 | 左侧固定 | 定义统计范围和业务切片 | 第 3 章 |
| 统计概览卡片 | 主内容区顶部 | 展示筛选结果下的总体 KPI | 第 4 章 |
| 工具栏 | 统计卡片下方 | 联赛筛选、搜索、排序、刷新、导出 | 第 5 章 |
| 赛事结算明细表 | 主内容区主体 | 展示赛事级结果和跳转入口 | 第 6 章 |
| 分页与导出 | 表格底部 / 页面头部 | 翻页、下载 CSV/Excel | 第 7 章 |
2.4 信息层次
| 层级 | 内容 | 目的 |
|---|---|---|
| 第一层 | 顶部统计卡片 | 快速判断今天/当前筛选下整体表现 |
| 第二层 | 赛事明细表 | 找到具体盈利/亏损/取消赛事 |
| 第三层 | 注单记录跳转 | 钻取到具体订单进行核查 |
2.5 与结算列表 / 结算详情的区别
| 页面 | 核心问题 | 粒度 |
|---|---|---|
| 结算列表 | 哪些赛事还要处理？ | 赛事 / 注单 |
| 结算详情页 | 这场赛事应该如何结算？ | 盘口 / 注单 |
| 结算报表 | 结算完之后结果如何？ | 赛事级汇总 |