SOURCEWeb · 准备提交预约的消费者

三步预约

以容量和规则为约束的三步预约

/t/:publishHashpublic-booking-platform
/t/:publishHash
CURRENT UI1440 × 900FIT 100%
Matrix Order
2026 年 7 月
7 月 15 日 · 可选时段
REFERENCE VIEWPORT1440 × 900Desktop first · responsive
PRIMARY TASK选择服务主操作、权限与完成反馈必须同屏可验证
DATA CONTRACTAvailabilityready / loading / empty / error 使用同一 fixture
ACCESSIBILITYKeyboard + WCAG AA焦点顺序、可读名称、对比度进入 UI CI
VISUAL BASELINESOURCE · 2026-07-15桌面/移动、浅色/错误态按稳定 Screen ID 留档

STATE LAB

同一页面的五个真实运行状态

开发者不能只交付 happy path。状态文案、可恢复动作、敏感数据边界和埋点都必须在同一个 Screen ID 下验收。

LOADING
读取中

保留页面骨架与任务上下文,不闪回空白页。

允许取消 / 返回
READY
冲突

已绑定 Availability,主操作可用。

选择服务
EMPTY
当前没有结果

解释为什么没有进度,并给出下一步。

选择时段
ERROR
预约成功

显示稳定错误码和 request_id,不泄露堆栈或隐私。

重试 / 联系 owner
FORBIDDEN
权限不足

服务端拒绝后收起写操作;不能只靠前端隐藏。

返回安全页面
01 · SCREENbooking-wizard/t/:publishHash
02 · CONTRACTAvailability3 bound contracts
03 · TESTstate + a11y + visualdesktop / mobile / negative
04 · RELEASEexact commit requiredsmoke + rollback evidence

IMPLEMENTATION MAP

从当前页面拆出来的开发定义

这是结构与状态定义,不是重新发明一套视觉。视觉细化必须继续引用同一证据并通过 owner 评审。

01

页面区域

  • 品牌头
  • 步骤条
  • 当前步骤表单
  • 价格/时长摘要
  • 底部主操作
02

用户动作

  • 选择服务
  • 选择时段
  • 填写信息
  • 提交预约
03

必须状态

  • 无可用时段
  • 冲突
  • 提交中
  • 预约成功
04

数据契约

  • Availability
  • Booking create
  • Intake schema

CURRENT MODULES

现有页面可见模块

  1. 01进度
  2. 02服务选择
  3. 03日历/时段
  4. 04客户信息
  5. 05确认摘要

PRODUCT ROUTE INDEX

预约平台 的 9 个稳定 Screen ID

同一产品内的页面共享 token、导航和状态语言,但每个 Screen ID 保留自己的字段、数据契约和 QA 基线。

01
发现好店/
Web
02
店铺详情/shop/:publishHash
Web
03
三步预约/t/:publishHash
Web
04
订单与预约状态/booking-status
Web
05
商家工作台/console?t=:hash
Admin
06
移动发现入口/mini
Miniapp
07
官方介绍页/official
Web
08
安全与隐私/security
Web
09
商家登录/console?t=:hash
Admin