LIVEWeb · 本地服务消费者

发现好店

附近好店、搜索与分类发现

/public-booking-platform
/
CURRENT UI1440 × 900FIT 100%
Matrix Order
CURRENT CODE · STATIC DATA
美甲
餐饮
美容
美发
按摩
健身
宠物
亲子
教育
汽车
家政
摄影
洗衣
齿科
鲜花
维修
搬家
仓储
回收
开锁
疏通
清洗
除虫
收纳
洗鞋
代厨
护理
更多 50
EDITOR'S PICKS

本周推荐

NEARBY

附近好店

美甲 · 恵比寿Kira Nail 恵比寿4.9 1.2km¥6,800 起
居家照护 · 世田谷CareDoor 世田谷4.9 2.4km¥5,500 起
宠物美容 · 中目黒Paw Room 中目黒4.8 1.8km¥4,200 起
REFERENCE VIEWPORT1440 × 900Desktop first · responsive
PRIMARY TASK切换城市主操作、权限与完成反馈必须同屏可验证
DATA CONTRACTDiscovery APIready / loading / empty / error 使用同一 fixture
ACCESSIBILITYKeyboard + WCAG AA焦点顺序、可读名称、对比度进入 UI CI
VISUAL BASELINELIVE · 2026-07-15桌面/移动、浅色/错误态按稳定 Screen ID 留档

STATE LAB

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

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

LOADING
读取中

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

允许取消 / 返回
READY
正常列表

已绑定 Discovery API,主操作可用。

切换城市
EMPTY
当前没有结果

解释为什么没有黄色品牌头,并给出下一步。

搜索
ERROR
发现页不可用

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

重试 / 联系 owner
FORBIDDEN
权限不足

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

返回安全页面
01 · SCREENbooking-discovery/
02 · CONTRACTDiscovery API3 bound contracts
03 · TESTstate + a11y + visualdesktop / mobile / negative
04 · RELEASEexact commit requiredsmoke + rollback evidence

IMPLEMENTATION MAP

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

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

01

页面区域

  • 桌面/移动导航
  • 城市选择
  • 搜索与快捷分类
  • 附近好店
  • 猜你喜欢
  • 底部 Tab
02

用户动作

  • 切换城市
  • 搜索
  • 打开分类
  • 进入预约
03

必须状态

  • 骨架加载
  • 正常列表
  • 无结果
  • 发现页不可用
04

数据契约

  • Discovery API
  • Storefront publish hash
  • Local order history

CURRENT MODULES

现有页面可见模块

  1. 01黄色品牌头
  2. 02搜索
  3. 03分类 Chips
  4. 04店铺/项目卡

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