Web 预约模块 — CUJ 关键用户旅程

Appointment Board & Management | 更新时间: 2026-02-09

目录

CUJ 总览与优先级矩阵

E2E 覆盖状态

CUJ-B1: 查看预约看板

P0 核心运营视图 — 按技师列展示预约，支持日期和门店筛选

用户流程

flowchart TD
    A["登录成功"] --> B["/appointments/board"]
    B --> C["加载预约数据"]
    C --> D["看板按技师列展示"]
    D --> E{"切换日期?"}
    E -->|"是"| F["日期选择器"]
    F --> C
    E -->|"否"| G{"切换门店?"}
    G -->|"是"| H["StoreSelector 下拉"]
    H --> C
    G -->|"否"| I{"操作?"}
    I -->|"点击时段"| J["打开 QuickBookingForm"]
    I -->|"点击卡片"| K["打开 AppointmentDetailModal"]

    style B fill:#2196F3,stroke:#1565C0,color:#fff
    style D fill:#4CAF50,stroke:#2E7D32,color:#fff

BDD 场景

场景 B1.1: 正常加载看板

测试: appointments.spec.ts (已有)

场景 B1.2: 切换日期

测试: appointment-board-schedule.spec.ts (已有)

场景 B1.3: 切换门店

测试: 缺失 — 需新增

场景 B1.4: 空状态 — 无预约

测试: 缺失 — 需新增

CUJ-B2: 快速创建预约

P0 前台快速下单 — 通过 QuickBookingForm 三列布局创建预约

QuickBookingForm 布局

用户流程

flowchart TD
    A["看板上点击时段/拖拽"] --> B["打开 QuickBookingForm"]
    B --> C["左栏: 搜索或新建 Guest"]
    C --> D["中栏: 选择 Service"]
    D --> E["自动填充 Price/Duration"]
    E --> F["选择 Stylist"]
    F --> G["选择 Start 时间"]
    G --> H["点击 Add Service"]
    H --> I["右栏: 服务出现在表格中"]
    I --> J{"添加更多服务?"}
    J -->|"是"| D
    J -->|"否"| K{"添加备注?"}
    K -->|"是"| L["点击 Add Note"]
    K -->|"否"| M["点击 Save"]
    M --> N{"时间冲突?"}
    N -->|"是"| O["ValidationModal 显示冲突"]
    O --> P{"强制创建?"}
    P -->|"是"| Q["提交预约"]
    P -->|"否"| G
    N -->|"否"| Q
    Q --> R["看板自动刷新"]

    style B fill:#2196F3,stroke:#1565C0,color:#fff
    style R fill:#4CAF50,stroke:#2E7D32,color:#fff
    style O fill:#FF9800,stroke:#E65100,color:#fff

BDD 场景

场景 B2.1: 基本创建预约

测试: full-flow/03-appointments.spec.ts (部分覆盖)

场景 B2.2: 多服务预约

测试: 缺失 — 需新增

场景 B2.3: 附加服务 (Add-on Service)

测试: 待实现 — 前端功能待开发

场景 B2.4: 团体预约（多 Guest）

测试: 缺失 — 需新增

场景 B2.5: 新客户创建

测试: 缺失 — 需新增

场景 B2.6: 时间冲突警告

测试: 缺失 — 需新增

场景 B2.7: Walk-in 快速登记

测试: booking/walk-in.spec.ts (已有)

CUJ-B3: 查看/编辑预约详情

P0 前台核对 — 查看预约详细信息并修改

BDD 场景

场景 B3.1: 查看预约详情

测试: appointments.spec.ts (已有)

场景 B3.2: 编辑预约 — 更换技师

测试: 缺失 — 需新增

场景 B3.3: 修改预约状态

测试: full-flow/03-appointments.spec.ts (部分覆盖)

CUJ-B4: 预约状态流转

P0 运营流程 — 完整的 10 状态生命周期，跨 B/F/C 三个模块联动

完整状态流

flowchart LR
    A["pending"] -->|"确认"| B["confirmed"]
    B -->|"客人到店"| C["checked_in"]
    C -->|"开始服务"| D["in_progress"]
    D -->|"服务完成"| E["completed"]
    E -->|"部分收款"| F["pending_payment"]
    E -->|"全额收款"| G["finished"]
    F -->|"补齐收款"| G
    G -->|"日结锁定"| H["closed"]
    A -->|"取消"| I["cancelled"]
    B -->|"取消"| I
    E -->|"取消"| I
    A -->|"未到店"| J["no_show"]
    B -->|"未到店"| J
    G -->|"部分退款"| F
    G -->|"全额退款"| E

    style A fill:#87CEEB,stroke:#1565C0,color:#333
    style B fill:#2196F3,stroke:#1565C0,color:#fff
    style C fill:#FF9800,stroke:#E65100,color:#fff
    style D fill:#9C27B0,stroke:#6A1B9A,color:#fff
    style E fill:#FFD54F,stroke:#F9A825,color:#333
    style F fill:#FFC107,stroke:#F9A825,color:#333
    style G fill:#4CAF50,stroke:#2E7D32,color:#fff
    style H fill:#37474F,stroke:#263238,color:#fff
    style I fill:#f44336,stroke:#c62828,color:#fff
    style J fill:#607D8B,stroke:#455A64,color:#fff

状态说明

BDD 场景

场景 B4.1: 正向流转 — 签到到完成服务

测试: full-flow/03-appointments.spec.ts (部分覆盖 — 缺 pending_payment 验证)

场景 B4.2: 标记爽约

测试: 缺失 — 需新增

CUJ-B5: 实时排队看板

P1 门店展示 — 大屏显示当前等候和服务中的客户

BDD 场景

场景 B5.1: 实时看板展示

测试: queue-display.spec.ts (已有)

CUJ-B6: 取消/改期预约

P1 灵活调整 — 取消或改期已有预约

BDD 场景

场景 B6.1: 取消预约

测试: 缺失 — 需新增

场景 B6.2: 改期预约

测试: 缺失 — 需新增