Transaction History
Transaction History 交易记录 PRD，覆盖账户流水表、分类汇总、右侧筛选面板、日期选择器、条件 chips 和分页。
Transaction History 是代理商后台的只读账户流水查询页。财务、运营、客服和开发主要用它核对余额变动、解释交易状态、验证筛选和分页结果。
1. 页面摘要
| 项目 | 说明 |
|---|---|
| 页面性质 | 只读查询页，不新增、不编辑、不审批、不冲正 |
| 核心动作 | 按 Date/Time、Brand、Category、Status 查询流水，核对分类汇总、表格和 Total 行 |
| 数据范围 | 当前登录账号有权限查看的品牌、钱包和账户流水 |
| 当前状态 | 列表、筛选、日期选择器、chips 和分页规则已定义；导出、详情、移动端和部分 Figma 文案仍未确认 |
2. 需求状态
| 状态 | 内容 |
|---|---|
Confirmed | 本页只读；筛选、chips、分类汇总卡、表格、Total 行、结果计数和分页必须使用同一已生效条件；无权限品牌和钱包不能出现在选项或结果中。 |
Inferred from Figma | Date/Time 因 Figma 红色 * 暂按必填处理；Category 的 Admin Deduct / Admin Deduction 暂按同一分类处理。 |
Open Question | Date/Time 是否强制、默认时间范围、品牌正式名、导出/详情/移动端是否需要实现，见 开放问题。 |
3. Figma 参考
页面状态 Figma 截图
Transaction History
展示 Transaction History 桌面默认态：全局 Top、公告条、面包屑、标题、副标题、Filter 按钮、5 张分类汇总卡、流水表格、Total 行和分页。
右侧 Filters 面板打开后，Date/Time 位于顶部，Brand、Category、Status 使用复选列表筛选，底部提供 Reset 和 Apply。
Date/Time 输入框聚焦后显示日期时间选择器，包含月份切换、日期网格、时间输入、Clear 和 Apply。
筛选生效后，标题下方显示日期、品牌、分类和状态 chips，汇总卡片、表格、Total 行和分页按同一条件刷新。
4. 页面目标
| 项目 | 定义 |
|---|---|
| 页面类型 | Page PRD |
| 页面定位 | 账户资金流水查询与审计页 |
| 主要任务 | 核对分类汇总、筛选流水、查看 Total 行和分页结果 |
| 操作边界 | 只读查询，不创建、不编辑、不审批、不冲正、不发起资金操作 |
| 数据边界 | 当前账号权限范围内的品牌、钱包类型和流水记录 |
5. 全局依赖
| 全局模块 | 说明 |
|---|---|
| Top | 展示 Online Member / Deposit Member、Coupon Balance、Withdrawal Balance、Withdrawal Request、消息和 Profile；Transaction History 不重复定义 Top 逻辑。 |
| Global One Line Notice | 页面顶部红色公告条属于全局公告模块，本页只承接展示位置。 |
| Withdrawal Request | Top 中的 Withdrawal Request 按钮打开提现申请弹窗；本页只查询历史流水，不发起提现。 |
| 共享规则 | 语言、权限、表格、分页、查询反馈、空态和异常处理必须遵守共享规则。 |
6. 页面组成
| 区域 | UI 表现 | 对应功能说明 |
|---|---|---|
| 页面上下文 | Home > Transaction History 面包屑、标题、副标题、右上角 Filter 按钮 | 页面上下文 |
| 条件 chips | 筛选后在标题下方展示日期、品牌、分类和状态 chips | 条件 chips |
| 分类汇总卡 | Withdrawal、Transfer to Coupon、Admin Add、Admin Deduct、Settlement | 分类汇总卡 |
| 右侧筛选面板 | Filters、Clear all、Date/Time、Brand、Category、Status、Reset、Apply | 筛选面板 |
| 日期选择器 | 月份切换、日期网格、时间输入、Clear、Apply | Date/Time |
| 流水表格 | Brand、Category、Wallet Type、Before Change、After Change、Status、Variable Amount、Variable Time、Total 行 | 流水表格 |
| 分页区 | Showing 1 to 10 of 100 Entries、10 per page、页码、Previous、Next | 分页 |
7. 功能说明
7.1 页面上下文
Transaction History 在登录后标准业务页面框架内展示，用于帮助财务、代理商管理员和运营人员核对账户资金变动。
| 项目 | 规则 |
|---|---|
| 面包屑 | 固定展示 Home > Transaction History。 |
| 标题 | 页面主标题为 Transaction History。 |
| 副标题 | 使用 Review a detailed record of all user transactions for tracking and auditing. |
Filter 按钮 | 位于内容卡片右上角；点击打开或关闭右侧筛选面板。 |
| 页面边界 | 本页只读，不提供新增、编辑、删除、审批、冲正、发券或提现申请动作。 |
7.2 筛选面板
右侧 Filters 面板用于组合限定当前流水结果集。打开面板本身不触发查询，只有点击底部 Apply 才提交条件。
| 元素 | 规则 |
|---|---|
| 面板标题 | 固定显示 Filters。 |
Clear all | 清空面板内当前未提交的草稿值，不立即刷新列表。 |
| 折叠分组 | Brand、Category、Status 使用复选列表；分组可展开或折叠。 |
Reset | 恢复默认查询条件，刷新默认列表，并回到第 1 页。 |
Apply | 以当前面板值刷新分类汇总卡、表格、Total 行、计数和分页，并回到第 1 页。 |
| 关闭规则 | 点击面板外区域或再次点击 Filter 可关闭；未点击 Apply 时，不应修改当前结果集。 |
| 状态保留 | 已提交条件再次打开面板时必须回显；未提交草稿关闭后可丢弃或保留，但不能影响当前结果。 |
如果产品同时保留 Clear all 和 Reset，两者语义必须稳定：Clear all 只处理面板草稿，Reset 恢复默认查询并刷新结果。
7.3 Date/Time
Date/Time 位于筛选面板顶部，截图中带红色 *。当前按 Inferred from Figma 暂定为筛选提交时必填；最终是否强制、默认范围和无日期查询能力需要产品确认。
| 项目 | 规则 |
|---|---|
| 输入框状态 | 未选择时展示 Please select a date range；已选择时展示 YYYY/MM/DD - YYYY/MM/DD。 |
| 默认值 | 默认列表可由系统使用服务端默认时间范围；打开筛选面板时应回显当前已生效时间范围。 |
| 选择器样式 | 点击输入框后打开日期时间选择器，包含月份标题、左右切换、日期网格和时间输入。 |
| 时间精度 | 选择器展示到秒，示例为 00 : 00 : 00。 |
选择器 Clear | 清空当前日期时间草稿值，不刷新列表，也不关闭整个筛选面板。 |
选择器 Apply | 将日期时间草稿写回输入框，不直接刷新列表；结果刷新以筛选面板底部 Apply 为准。 |
| 非法范围 | 开始时间不得晚于结束时间；非法时阻止生效并给出明确提示。 |
7.4 Brand
Brand 用于按品牌范围筛选流水。
| 项目 | 规则 |
|---|---|
| 选项来源 | 只展示当前账号有权限查看的品牌。 |
| 截图选项 | All、Daebakbet、Ikea、Oh my god、W365。 |
| 选择方式 | 多选。 |
All | 默认全选态；勾选具体品牌后不再保留 All。 |
| 多品牌逻辑 | 同一分类内多选按 OR 处理，即命中任一品牌即可进入结果。 |
7.5 Category
Category 用于按交易分类筛选流水，也对应页面上方的分类汇总卡。
| 分类 | 说明 |
|---|---|
Withdrawal | 提现相关资金变动。 |
Transfer to Coupon | 从可用余额转入优惠券余额。 |
Admin Add | 管理员人工增加余额。 |
Admin Deduction | 管理员人工扣减余额。 |
Settlement | 结算相关资金变动。 |
All | 不限制交易分类。 |
Category 支持多选；同类多选按 OR 处理。截图中汇总卡写作 Admin Deduct，筛选和表格写作 Admin Deduction，本 PRD 将二者视为同一分类，但上线前应统一文案。
7.6 Status
Status 用于按交易处理状态筛选记录。
| 状态 | 说明 |
|---|---|
Complete | 交易完成，已影响对应钱包余额。 |
Waiting | 交易等待处理或等待确认。 |
Cancel | 交易取消，未完成最终资金变动。 |
Failure | 交易失败，需能追踪失败原因。 |
All | 不限制状态。 |
Status 支持多选；同类多选按 OR 处理。状态筛选名称、表格状态标签、条件 chip 和导出字段必须使用同一词表。
7.7 条件 chips
筛选生效后，标题副文案下方展示已提交条件 chips。
| 项目 | 规则 |
|---|---|
| 展示内容 | 日期范围、品牌、分类、状态等已提交条件。 |
| 示例 | 2025/08/01~2025/08/29、Daebakbet1、Settlement、Complete。 |
| 展示顺序 | 日期范围优先，其次 Brand、Category、Status。 |
| 移除方式 | 点击单个 chip 的关闭图标后，移除该条件并立即刷新结果。 |
| 空条件 | 无已提交条件时不显示 chip 区域，也不占用额外高度。 |
7.8 分类汇总卡
分类汇总卡展示当前查询范围内各交易分类的数量或金额摘要。截图中默认全部为 +0。
| 卡片 | 规则 |
|---|---|
| Withdrawal | 统计当前条件下提现类流水。 |
| Transfer to Coupon | 统计当前条件下转入优惠券余额的流水。 |
| Admin Add | 统计当前条件下管理员增加余额的流水。 |
| Admin Deduct | 统计当前条件下管理员扣减余额的流水。 |
| Settlement | 统计当前条件下结算流水。 |
| 刷新规则 | Search / Filter / chip 删除 / Reset 后，卡片和表格必须同步刷新。 |
卡片图标只做视觉提示，不改变业务口径。卡片值必须来自当前已生效查询范围，不能显示全局总量或缓存值。
7.9 流水表格
流水表格是本页核心记录区，展示当前查询条件下的资金变动明细。
| 字段 | 说明 |
|---|---|
Brand | 流水所属品牌。 |
Category | 交易分类，使用彩色胶囊标签展示。 |
Wallet Type | 发生变动的钱包，例如 Withdrawal Available Wallet、Coupon Wallet。 |
Before Change | 交易发生前的钱包余额。 |
After Change | 交易完成或状态更新后的钱包余额。 |
Status | 当前交易状态，使用彩色胶囊标签。 |
Variable Amount | 本次变动金额。 |
Variable Time | 变动发生时间。 |
Total 行 | 表格底部固定展示汇总行；无汇总意义的字段展示 -。 |
表格默认按 Variable Time 倒序。切换筛选、删除 chip、改变每页条数或翻页时，只刷新当前表格和相关汇总，不影响 Top、侧边栏和全局公告。
7.10 分页
| 控件 | 规则 |
|---|---|
| 结果提示 | 左下角展示 Showing 1 to 10 of 100 Entries 类结果区间说明。 |
| 每页条数 | 右下角默认显示 10 per page。 |
| 页码切换 | 点击页码、Previous、Next 切换结果页。 |
| 条数切换 | 改变每页条数后回到第 1 页。 |
| 条件继承 | 翻页时保留当前已生效筛选条件。 |
8. 主流程
用户进入 Transaction History，系统展示当前账号权限范围内的默认流水列表、分类汇总卡和分页。
用户点击
Filter 打开右侧筛选面板。用户选择 Date/Time、Brand、Category、Status 条件；Date/Time 可通过日期选择器写回输入框。
用户点击面板底部
Apply，系统按已提交条件刷新分类汇总卡、表格、Total 行、结果计数和分页，并回到第 1 页。页面在标题下方展示条件 chips；用户可删除单个 chip 继续缩小或放宽查询条件。
用户通过表格中的 Before Change、After Change、Variable Amount 和 Status 核对资金变动。
9. 已确认规则
- Transaction History 是只读审计页，不允许在本页新增、编辑、删除、审批、冲正或发起资金操作。
- Brand、Category、Status 三类筛选之间按 AND 处理；同类多选按 OR 处理。
- Date/Time、Brand、Category、Status、分类汇总卡、表格、Total 行、结果计数和分页必须使用同一已生效查询条件。
- 条件 chips 必须真实反映已提交条件；删除 chip 后应立即刷新结果并回到第 1 页。
- 每一条完成态流水必须能解释
Before Change到After Change的余额变化。 Complete记录应影响余额；Waiting、Cancel、Failure是否影响余额必须以财务系统最终状态规则为准。- 用户只能查看当前账号有权限访问的品牌、钱包类型和流水记录。
- 列表、筛选选项、chips 和导出字段如果未来增加导出能力，必须使用同一品牌、分类、状态词表。
10. 异常与空态
| 场景 | 处理 |
|---|---|
| 无查询结果 | 保留筛选条件、chips、汇总卡、表头和分页容器，表格主体展示空态，Total 行保留结构。 |
| 日期范围非法 | 阻止日期选择器或筛选面板提交，在 Date/Time 附近展示可修正错误提示。 |
| 必填日期为空 | 阻止 Apply，提示用户选择日期范围。 |
| 筛选选项加载失败 | 保留当前列表结果，在筛选面板内展示重试提示；不能展示无权限品牌。 |
| 查询失败 | 保留上一次成功结果和已提交条件，提示用户重试。 |
| 金额或钱包数据缺失 | 对单元格展示 -，但不得伪造余额；后台应记录数据异常。 |
| 网络异常 | 不清空当前输入和草稿条件，允许用户继续点击 Apply 重试。 |
11. 开放问题
| 问题 | 当前默认处理 | 影响角色 | 是否阻塞上线 | 待确认方 |
|---|---|---|---|---|
Date/Time 是否强制必填，以及默认时间范围是什么 | Inferred from Figma：暂按必填处理，默认范围由服务端或产品配置提供 | 运营 / 财务 / 开发 / QA | 是 | 产品 |
筛选分组标题 Categor | 主规则按 Category 处理 | 运营 / 开发 | 否 | 设计 |
Admin Deduct 与 Admin Deduction 文案不一致 | 暂按同一分类处理，上线前统一展示名 | 运营 / 财务 / QA | 是 | 产品 / 设计 |
Coupon Wakket 拼写错误 | 主规则按 Coupon Wallet 处理 | 开发 / QA | 否 | 设计 |
Daebakbet1 与 Daebakbet 品牌名不一致 | 暂不把截图示例作为正式品牌名 | 运营 / 客服 / QA | 是 | 运营 / 产品 |
| 是否实现导出、详情查看、移动端和横向溢出专门状态 | 当前 PRD 只定义只读查询；定制视觉需补 Figma | 产品 / 开发 / QA | 按范围决定 | 产品 / 设计 |
12. 验收标准
- 进入 Transaction History 时，默认展示页面上下文、5 张分类汇总卡、流水表格、Total 行和分页。
- 点击
Filter能打开右侧筛选面板，面板包含 Date/Time、Brand、Category、Status、Clear all、Reset 和 Apply。 - Date/Time 输入框能打开日期时间选择器，Clear / Apply 的作用范围符合 PRD 说明。
- 点击筛选面板
Apply后，chips、分类汇总卡、表格、Total 行、结果计数和分页同步刷新并回到第 1 页。 - 删除任一 chip 后，页面按剩余条件立即刷新。
- 表格字段、分类标签、状态标签、金额格式和时间格式与筛选项保持一致。
- 无权限品牌、钱包和流水记录不会出现在筛选选项或表格结果中。