Standalone HTML PRD

产品需求文档:订单管理(按用户流程)

按“用户流程”组织订单管理需求,并为每个用户流程附带当前页面入口截图。

说明: 当前文件是可直接打开的 HTML 预览版。截图已内联到文件中,不依赖外部图片目录。源 markdown 位于 tasks/prd-orders-management-user-flow.md

1. 介绍 / 概述

订单管理不是“只看今天订单”的单一页面,而是后台运营人员用于查看当日经营动态、定位目标订单、查看订单详情和处理退款的统一入口。

该页面需要同时满足两类核心使用场景:

  • 桌面端:高密度查看订单、快速筛选、快速处理。
  • 移动端:在不横向滚动的前提下,完成查看、筛选、详情和退款操作。

本次需求以“用户流程”为主线,覆盖订单管理页面中的经营指标、筛选搜索、订单列表、商品摘要、订单详情、退款处理和多币种展示。

默认用户角色:

  • 运营人员:查看订单动态、筛选订单、查看详情、发起退款。
  • 客服/值班人员:根据订单号、昵称、手机号、交易单号等快速定位订单并处理售后。

2. 目标

  • 让运营人员进入订单页后,先看到“当日销售动态”,再进入订单处理。
  • 让用户可以通过状态、设备、搜索维度、日期范围快速定位订单。
  • 让桌面端在高密度信息下仍可清晰浏览 20 笔订单,不依赖额外页面跳转。
  • 让移动端在常见大屏手机上无需左右滑动即可完成核心操作。
  • 让退款流程标准化,支持客诉退款与赠饮退款两种退款类型。
  • 让多币种订单在列表、汇总、详情、退款流程中保持金额展示一致。
  • 让桌面端和移动端在交互方式上各自最优,但在信息结构和业务规则上保持一致。

3. 用户流程 / 用户故事

UF-001:进入订单管理并查看当日经营动态

入口截图
订单管理进入页的当日经营指标
入口截图:进入订单管理后,优先看到当日经营指标与当前订单工作区。

描述: 作为运营人员,我希望进入订单管理页面后先看到当日经营指标,这样我能快速判断今天的销售和履约情况。

主流程:

  1. 用户进入订单管理页面。
  2. 页面顶部展示与其他后台页面风格一致的紧凑页头。
  3. 页头下方展示 3 张动态指标卡。
  4. 用户可基于指标判断是否需要进一步筛选订单。

验收标准:

  • 页面顶部风格与其他后台页面保持一致,不单独突出“订单工作台”这类概念。
  • 页面指标区只保留 3 个指标:今日支付金额今日完成订单客单价
  • 页面不再展示 取消率近 1 小时趋势
  • 指标数据基于“当日订单”动态计算,而不是基于当前列表页分页结果。
  • 顶部指标卡中的“今日”必须按用户当前浏览器本地日期计算。
  • 订单列表中的订单时间仍按订单产生时的本地时间语义展示,不因指标卡统计口径调整而改变。
  • 桌面端指标卡以 3 列并排展示。
  • 移动端指标卡以一屏一张、支持左右滑动的方式展示。
  • 实际打开桌面端和移动端页面查看指标区,确认展示方式和交互符合预期。

UF-002:通过筛选与搜索快速定位订单

入口截图
订单筛选与搜索展开状态
入口截图:桌面端展开高级筛选后,可同时查看状态、设备、搜索和日期范围。

描述: 作为运营人员或客服,我希望通过状态、设备、搜索维度和日期快速缩小订单范围,这样我能尽快找到目标订单。

主流程:

  1. 用户进入订单页后,先使用顶部快筛或高级筛选。
  2. 用户可按订单状态筛选。
  3. 用户可按设备筛选,且设备搜索支持设备编号和点位名称。
  4. 用户可选择搜索维度,再输入关键字搜索。
  5. 用户按天选择开始日期和结束日期。
  6. 用户点击“应用筛选”后查看结果。
  7. 页面同步展示符合条件的记录数、总金额和成功金额。

验收标准:

  • 桌面端筛选区默认紧凑展示,并默认折叠高级筛选。
  • 桌面端首行只保留 订单状态设备筛选高级筛选入口
  • 桌面端高级筛选区必须包含搜索维度、关键词、开始日期、结束日期、清空、应用筛选。
  • 搜索维度至少包括:订单号昵称手机号商品名称交易单号设备编号
  • 日期筛选只按“天”处理,不使用时分秒选择器。
  • 设备筛选必须支持按照 设备编号点位名称 搜索。
  • 移动端顶部快筛仅保留 订单状态设备筛选筛选 3 个入口。
  • 移动端点击 筛选 后,不重复展示顶部快筛中已有的状态和设备筛选内容。
  • 移动端的排序与状态选择应使用更易点击的选择面板,不使用难以操作的小型原生下拉。
  • 移动端筛选面板底部必须始终显示操作按钮,确保“确认 / 应用筛选”随时可点。
  • 页面汇总区需展示 共 X 条总金额成功金额
  • 移动端汇总区不得将每个金额项强制占满一整行。
  • 实际操作桌面端和移动端筛选,确认能顺利完成筛选、清空和结果查看。

UF-003:在桌面端高密度浏览订单列表

入口截图
桌面端高密度订单表格
入口截图:桌面端订单管理采用高密度表格,便于连续浏览和处理更多订单。

描述: 作为桌面端运营人员,我希望在一个信息密度高但阅读不费力的列表中浏览更多订单,这样我能更高效地处理异常和售后。

主流程:

  1. 用户在桌面端查看订单列表。
  2. 列表以表格方式展示关键字段。
  3. 用户横向浏览非固定列信息,右侧固定列始终可见。
  4. 用户快速判断订单状态、金额与可执行操作。

验收标准:

  • 桌面端订单区使用高密度表格列表,而不是大卡片堆叠布局。
  • 表格字段顺序为:点位商品时间设备取货码订单号状态金额操作
  • 订单号 位于 状态 前,不作为固定列。
  • 右侧固定列仅包括 状态金额操作
  • 右侧关键列在横向滚动时必须保持稳定,不得出现空白、透底、错位或明显分割感。
  • 金额列下方不再重复显示支付状态。
  • 操作列仅保留 退款详情 两个按钮,不显示 返券
  • 不可退款订单的 退款 按钮使用统一的禁用样式。
  • 每页默认展示 20 笔订单。
  • 订单状态为“处理中”等未完成状态时,取货码显示规则统一为 --
  • 已完成订单允许部分记录没有取货码,页面仍需稳定展示。
  • 实际查看桌面端订单表格,确认固定列稳定、按钮样式统一、列表浏览顺畅。

UF-004:在移动端快速浏览订单并避免横向滚动

入口截图
移动端订单卡片列表
入口截图:移动端以单列订单卡片展示关键信息与退款、详情动作。

描述: 作为移动端值班人员,我希望在手机上快速浏览订单卡片并执行核心操作,这样我无需放大或横向滚动页面。

主流程:

  1. 用户在移动端打开订单页。
  2. 顶部保留后台导航入口,可切换到设备、商品管理等页面。
  3. 用户通过快筛切换订单范围。
  4. 用户在订单流卡片中查看点位、首商品、金额、状态、时间等信息。
  5. 用户在卡片上直接点击 退款详情

验收标准:

  • 移动端保留后台导航入口,支持返回其他后台页面。
  • 页面顶部不重复展示导航标题和大号页面标题。
  • 移动端订单以独立订单卡片展示,不直接沿用桌面表格的压缩样式。
  • 订单卡片在常见大屏手机宽度下无需左右滑动即可完整阅读。
  • 在较窄的手机屏幕上,卡片自动切换为更紧凑的单列布局。
  • 卡片动作区使用双列等宽按钮布局,不因换行导致按钮尺寸不一致。
  • 不可退款订单的移动端退款按钮与桌面端保持同一禁用样式。
  • 移动端页面背景、字体、间距风格需与其他后台页面一致。
  • 实际在手机页面中查看,确认没有横向滚动,按钮始终可见,弹层不会把页面撑宽。

UF-005:查看订单商品摘要与全部商品

入口截图
订单商品加N件弹层
入口截图:列表默认只展示首个商品,点击 +N 件后用轻量弹层查看全部商品。

描述: 作为运营人员,我希望在列表中优先看到首个商品,同时能在需要时展开查看全部商品,这样我既能保证信息密度,也不会丢失完整商品信息。

主流程:

  1. 用户在订单列表中看到订单的首个商品摘要。
  2. 如果订单包含多个商品,页面展示 +N 件 入口。
  3. 用户点击入口后,通过轻量弹层查看该订单的全部商品。
  4. 用户关闭弹层后继续留在原列表位置。

验收标准:

  • 桌面端和移动端列表默认只展示首个商品摘要。
  • 多商品订单必须展示 +N 件 入口。
  • 弹层只需展示 订单号商品 信息,不展示多余元信息。
  • 同商品多份时,弹层内按数量展开为多行,便于逐份识别。
  • 移动端商品弹层必须完整落在屏幕可视范围内,不能导致页面整体变宽。
  • 实际点击查看全部商品,确认桌面端和移动端都能顺畅打开和关闭商品弹层。

UF-006:查看订单详情

入口截图
订单详情抽屉
入口截图:桌面端点击详情后,从右侧打开订单详情抽屉,不离开列表上下文。

描述: 作为运营人员,我希望在不离开列表上下文的情况下查看订单详情,这样我可以快速核对信息并返回继续处理其他订单。

主流程:

  1. 用户在订单列表点击 详情
  2. 桌面端从右侧打开详情抽屉。
  3. 移动端打开居中的详情弹窗。
  4. 用户查看基础信息、交易信息、商品信息。
  5. 用户关闭详情后回到原列表位置。

验收标准:

  • 桌面端点击详情后,从右侧打开详情抽屉。
  • 移动端点击详情后,使用弹窗查看详情,而不是侧边抽屉。
  • 详情信息至少包含 3 个分组:基础信息交易信息商品信息
  • 详情字段至少包含:支付时间订单编号交易单号用户昵称手机号设备编号排队号出杯口号取杯码订单状态订单类型支付方式支付金额优惠金额商品名称
  • 查看详情不应导致页面跳转到新页面。
  • 实际点击订单详情,确认桌面端抽屉和移动端弹窗都能正常打开、关闭并返回原列表。

UF-007:发起退款

入口截图
订单退款弹层
入口截图:在订单列表内直接打开退款弹层,区分退款类型与退款模式。

描述: 作为运营人员或客服,我希望直接在订单页发起退款,并清楚区分退款类型和退款金额来源,这样我可以更安全地完成售后处理。

主流程:

  1. 用户在可退款订单上点击 退款
  2. 系统打开退款弹层,并预填当前订单的币种与可退款上限。
  3. 用户选择退款方式:
  • 手动输入整单退款金额;或
  • 勾选部分商品,按商品全额退款。
  1. 用户选择退款类型:客诉退款赠饮退款
  2. 用户可填写退款原因。
  3. 系统实时计算预计退款金额。
  4. 用户提交退款申请。

验收标准:

  • 只有支付成功的订单允许发起退款。
  • 退款弹层必须支持两种退款入口:整单手动金额退款部分商品全额退款
  • 部分商品退款通过勾选商品实现,不允许逐行手工输入退款金额。
  • 同一笔退款中,整单退款金额与商品退款金额必须互斥,不能同时生效。
  • 商品退款按数量拆行,支持同商品多份逐份勾选。
  • 退款类型必须支持 客诉退款赠饮退款 两种选项。
  • 提交前必须校验退款类型是否合法、退款金额是否大于 0、是否超过订单实付金额。
  • 退款原因为选填项,长度上限为 100 字。
  • 提交退款时,退款信息中必须带上退款类型及接口识别所需的对应值。
  • 退款提交流程应预留后续接入真实接口的能力。
  • 提交成功后需给出包含订单号、退款类型、退款模式、退款金额的成功反馈。
  • 实际操作退款,确认整单退款和商品退款不能同时选择,退款金额计算正确,提交时校验和结果提示正确。

UF-008:处理多币种订单

入口截图
多币种汇总与订单金额
入口截图:筛选结果与单笔订单金额都按订单实际币种展示,并在汇总区按币种聚合。

描述: 作为运营人员,我希望订单金额、汇总金额和退款金额都按订单实际币种展示,这样我不会误判金额或币种。

主流程:

  1. 系统读取平台的默认币种设置,并识别每笔订单自身的币种。
  2. 用户在列表中查看订单金额时,金额按订单币种渲染。
  3. 用户筛选订单后,页面展示符合条件记录的 总金额成功金额,并按币种聚合。
  4. 用户发起退款时,退款弹层金额标签和金额计算跟随订单币种。

验收标准:

  • 系统支持至少 CNYUSDEURHKDJPY 五种币种显示格式。
  • 单笔订单金额展示必须遵循订单自身币种。
  • 列表汇总金额必须支持按币种聚合展示,而不是混用单一币种。
  • 退款弹层中的整单退款金额标题、可退款上限、预计退款金额都必须跟随订单币种。
  • 提交退款时,退款信息中需包含订单币种信息。
  • 实际查看不同币种订单,确认列表、汇总和退款弹层中的币种与金额显示保持一致。

4. 功能需求

  • FR-1:系统必须提供统一的订单管理页面,覆盖指标、筛选、列表、详情、退款五类核心能力。
  • FR-2:订单管理页面的核心价值是“查看当日销售动态 + 处理订单”,而不是单纯展示当天订单。
  • FR-3:页面顶部必须展示 3 张动态指标卡:今日支付金额、今日完成订单、客单价。
  • FR-4:页面不得展示取消率和近 1 小时趋势。
  • FR-5:桌面端筛选区必须采用紧凑的两层结构,并默认收起扩展筛选项。
  • FR-6:移动端筛选区必须采用顶部快筛与底部筛选面板结合的方式。
  • FR-7:快筛层与完整筛选层之间不得重复展示同一筛选项。
  • FR-8:系统必须支持按状态筛选订单。
  • FR-9:系统必须支持按设备筛选订单。
  • FR-10:设备筛选搜索必须同时支持设备编号和点位名称。
  • FR-11:系统必须支持 6 个搜索维度:订单号、昵称、手机号、商品名称、交易单号、设备编号。
  • FR-12:日期筛选必须按天处理,不支持时分秒级筛选。
  • FR-13:桌面端和移动端都必须提供“应用筛选”和“清空筛选”能力。
  • FR-14:系统必须展示筛选结果条数、总金额、成功金额。
  • FR-15:桌面端订单列表必须采用高密度表格方案,优先保证信息密度和浏览效率。
  • FR-16:桌面端表格列顺序必须固定为:点位、商品、时间、设备、取货码、订单号、状态、金额、操作。
  • FR-17:桌面端固定列仅包括状态、金额、操作。
  • FR-18:右侧关键列在横向滚动时必须保持连续、稳定,不出现空白、透底或错位问题。
  • FR-19:桌面端操作列只保留退款和详情两个动作。
  • FR-20:移动端订单列表必须采用独立的订单卡片方案,不能简单压缩桌面表格。
  • FR-21:移动端页面在常见大屏手机宽度下不得依赖横向滚动完成核心阅读。
  • FR-22:列表默认只展示首商品摘要,支持通过 +N 件 查看全部商品。
  • FR-23:全部商品查看层仅展示订单号和商品内容。
  • FR-24:桌面端订单详情必须通过右侧抽屉展示。
  • FR-25:移动端订单详情必须通过弹窗展示。
  • FR-26:订单详情必须覆盖基础信息、交易信息、商品信息三组内容。
  • FR-27:只有支付成功订单可发起退款。
  • FR-28:退款流程必须支持整单手动金额退款与部分商品全额退款两种模式。
  • FR-29:退款的两种金额模式必须互斥。
  • FR-30:部分商品退款必须基于勾选商品行,而不是输入单行金额。
  • FR-31:系统必须支持客诉退款和赠饮退款两种退款类型。
  • FR-32:退款提交必须包含退款类型以及接口识别所需的对应值。
  • FR-33:退款原因为选填,且长度需受控。
  • FR-34:订单管理必须支持多币种金额展示。
  • FR-35:列表汇总金额必须支持按币种聚合。
  • FR-36:退款金额展示和退款提交信息必须跟随订单币种。
  • FR-37:订单数据需支持统一测试数据、伪下单记录以及默认演示数据。
  • FR-38:页面在没有外部订单数据时,必须至少提供 20 笔可浏览的默认订单数据。
  • FR-39:订单取货码展示必须使用统一规则:未完成订单默认显示 --
  • FR-40:部分已完成订单允许没有取货码,页面不能因此报错或错位。
  • FR-41:页面字体、背景、头部结构必须与其他后台页面保持统一风格。
  • FR-42:移动端页面必须保留后台导航入口,支持跳转到设备、商品管理等页面。
  • FR-43:顶部指标卡中的“今日”必须按用户当前浏览器本地日期计算。
  • FR-44:订单列表中的订单时间仍按订单产生时的本地时间语义展示,不因指标卡统计口径调整而改变。