Web 账户与用户设置模块 — CUJ 关键用户旅程

Account, Profile & User Settings | 更新时间: 2026-02-08

账户系统架构

flowchart TB
    subgraph Employee["员工/管理员账户"]
        EP["/settings 用户设置"]
        UPP["UserPreferencesPanel"]
        AC["AuthContext"]
        UAPI["api/user.js"]
    end

    subgraph Guest["客户 (Guest) 账户"]
        MEM["/account/membership"]
        PTS["/account/points"]
        GC["/account/gift-cards"]
        GCP["/account/gift-cards/purchase"]
        PREF["/account/preferences"]
        GAS["guest-auth-store.ts"]
        GAPI["api/guest-auth.js"]
        OTP["otpService.js"]
    end

    subgraph Shared["共享组件"]
        TB["TierBadge"]
        PB["PointsBalance"]
        TP["TierProgress"]
        GCB["GiftCardBalance"]
    end

    EP --> UPP --> AC --> UAPI
    MEM --> TB & PB & TP
    PTS --> PB
    GC --> GCB
    GCP --> GAPI
    MEM & PTS & GC --> GAS --> GAPI --> OTP

两层客户身份模型

目录

CUJ 总览与优先级矩阵

CUJ-K1: Guest OTP 注册与登录

P0 获客 — 客户通过 OTP 验证码低门槛注册或登录

用户流程

flowchart TD
    A["客户访问 /account/*"] --> B{"已登录?"}
    B -->|"是"| C["进入账户页面"]
    B -->|"否"| D["登录/注册页面"]
    D --> E["输入手机号或邮箱"]
    E --> F["POST /send-code"]
    F --> G["收到 OTP 验证码"]
    G --> H["输入验证码"]
    H --> I["POST /verify-code"]
    I --> J{"账户存在?"}
    J -->|"新用户"| K["自动创建 Guest + 返回 tokens"]
    J -->|"已有账户"| L["返回 tokens"]
    K --> M["可选: POST /set-password"]
    L --> C
    M --> C

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

BDD 场景

场景 K1.1: OTP 新用户注册

测试: guest-auth.test.js (部分)

场景 K1.2: OTP 已有用户登录

场景 K1.3: 密码登录（已设密码的用户）

测试: guest-auth.test.js

场景 K1.4: Token 自动刷新

CUJ-K2: Guest 密码管理

P1 安全 — 设置密码、修改密码、忘记密码重置

BDD 场景

场景 K2.1: OTP 注册后设置密码

场景 K2.2: 已登录修改密码

场景 K2.3: 忘记密码重置

CUJ-K3: 会员中心

P1 留存 — 客户查看自己的会员等级、权益和升级进度

用户流程

flowchart TD
    A["客户已登录 (Guest JWT)"] --> B["/account/membership"]
    B --> C["加载会员信息"]
    C --> D["TierBadge 等级徽章"]
    C --> E["PointsBalance 积分余额"]
    C --> F["TierProgress 升级进度条"]
    C --> G["权益列表 (折扣%/积分倍率)"]
    G --> H{"操作?"}
    H -->|"查积分"| I["/account/points"]
    H -->|"买礼品卡"| J["/account/gift-cards"]

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

会员等级展示数据

BDD 场景

场景 K3.1: 查看会员等级

测试: 未覆盖

场景 K3.2: 从会员中心导航

CUJ-K4: 积分查看与历史

P1 留存 — 查看积分余额、交易历史、即将过期的积分

交易类型

BDD 场景

场景 K4.1: 查看积分历史

测试: 未覆盖

场景 K4.2: 即将过期积分提醒

CUJ-K5: 我的礼品卡与购买

P1 营收 — 查看持有的礼品卡、购买新礼品卡赠送他人

用户流程

flowchart TD
    A["/account/gift-cards"] --> B["礼品卡列表"]
    B --> C{"操作?"}
    C -->|"查看"| D["卡片详情"]
    D --> E["显示/隐藏卡号 (脱敏)"]
    D --> F["复制卡号"]
    D --> G["余额 / 状态"]
    C -->|"购买"| H["/account/gift-cards/purchase"]
    H --> I["选择金额"]
    I --> J["预设: $25/$50/$75/$100"]
    I --> K["自定义: $10-$500"]
    I --> L["选择配送方式"]
    L --> M["Email / SMS / 打印"]
    M --> N["填写收件人信息 + 个性化消息"]
    N --> O["确认购买"]

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

BDD 场景

场景 K5.1: 查看我的礼品卡

测试: 未覆盖

场景 K5.2: 购买礼品卡（预设金额）

场景 K5.3: 自定义金额验证

CUJ-K6: 员工用户偏好设置

P0 效率 — 员工自定义语言、默认门店、通知和日历设置

/settings 页面 Tab 结构

UserPreferences 数据结构

BDD 场景

场景 K6.1: 修改界面语言

场景 K6.2: 设置默认门店

场景 K6.3: 自定义日历时段

CUJ-K7: 员工门店切换

P0 效率 — 多门店员工在不同门店间快速切换上下文

BDD 场景

场景 K7.1: 切换当前门店

测试: 已覆盖

场景 K7.2: 无权限门店阻止

CUJ-K8: 通知偏好设置

P2 合规 — 客户管理通知接收偏好 (opt-in/opt-out)

BDD 场景

场景 K8.1: 管理通知偏好（目标状态）

测试: 未覆盖 (后端 API deprecated)

场景 K8.2: 取消营销订阅

CUJ-K9: Guest Session 管理

P2 安全 — 查看活跃会话、撤销异常登录

BDD 场景

场景 K9.1: 查看活跃会话

场景 K9.2: 登出所有设备

跨模块依赖

业务规则