Genarrative/docs/prd/MY_TAB_SETTINGS_AND_SECURITY_PRD_2026-04-16.md

“我的”Tab 设置与账号安全 PRD

更新时间：2026-04-20

0. 目标

把“设置”入口正式定义为账号安全中心，统一承载：

1. 账号基础信息查看
2. 当前安全状态
3. 登录设备管理
4. 更换手机号
5. 最近账号操作记录
6. 退出登录与退出全部设备

这个模块直接建立在当前仓库已有的账号接口之上，是“我的”页最优先落地的正式功能。

---

1. 当前现状

当前仓库已具备以下基础能力：

1. GET /api/auth/risk-blocks
2. GET /api/auth/sessions
3. GET /api/auth/audit-logs
4. POST /api/auth/phone/change
5. POST /api/auth/logout
6. POST /api/auth/logout-all
7. POST /api/auth/sessions/:sessionId/revoke

说明当前账号安全不是从零开始，而是缺少稳定的信息架构和最终产品定义。

---

2. 产品范围

2.1 本期要做

1. 设置与账号安全弹窗
2. 安全状态展示
3. 登录设备管理
4. 更换手机号
5. 操作记录查看
6. 退出当前设备
7. 退出全部设备

2.2 本期不做

1. 修改密码正式入口
2. 实名认证
3. 邮箱绑定
4. 多因子认证

---

3. 信息架构

设置中心首层固定为两段：

1. 主题外观
2. 账号信息

其中“账号信息”二级面板固定承载以下内容：

1. 账号概况
2. 当前安全状态
3. 登录设备
4. 更换手机号
5. 账号操作记录
6. 退出登录
7. 退出全部设备

交互层级要求补充为：

1. 设置首页只展示“主题外观”“账号信息”两个分区入口，不在首页内联展开具体详情
2. 点击任一分区入口后，必须进入独立二级面板
3. 安全状态、登录设备、操作记录不再作为首页独立入口，统一归入“账号信息”二级面板
4. 更换手机号属于独立操作面板，不允许在账号信息面板内直接展开表单
5. 退出登录与退出全部设备统一归入“账号信息”二级面板，不再在设置首页单独占位
6. 设置首页头部只保留一套主标题，不允许在内容区再重复放置“设置首页”“选择要管理的内容”这类二次标题块
7. 子面板导航动作必须单一明确；同一层面板内有“返回”时，不再同时展示“关闭”
8. 子面板返回按钮固定摆在面板右上角
9. 设置首页与各级子面板都必须定义单一滚动容器，列表内容必须可稳定滚动，禁止外层与内层同时争夺滚动
10. 二级或三级面板打开后，下层内容必须进入不可交互状态，并把焦点主动转移到当前面板内；禁止对仍保留焦点的祖先节点使用 aria-hidden

---

4. 详细设计

4.1 账号概况

展示：

• 登录方式
• 手机号脱敏值
• 微信绑定状态

这里只看信息，不做大编辑动作。

标题约束：

• 设置首页标题固定表达“设置”或“设置与账号安全”
• 设置首页标题区域不展示手机号，也不允许把手机号当作主标题替代昵称
• 手机号只允许出现在账号概况信息项中，以脱敏值展示

4.2 当前安全状态

展示当前账号命中的风控保护：

• 手机号保护
• 当前网络保护

每条状态可执行：

• 解除保护

解除动作必须经过后端校验。

4.3 登录设备

每条设备展示：

• 设备类型
• 最近活跃时间
• 到期时间
• IP 脱敏信息
• 是否当前设备

非当前设备支持：

• 踢下线

4.4 更换手机号

流程：

1. 输入新手机号
2. 获取验证码
3. 如有需要，完成人机校验
4. 输入验证码
5. 提交修改

规则：

1. 新号码不能等于当前号码
2. 已被其他账号绑定的号码不可用
3. 风控命中时必须遵循现有保护逻辑

4.5 操作记录

展示最近账号行为：

• 登录
• 绑定手机号
• 更换手机号
• 退出登录
• 踢设备
• 触发图形验证码
• 风险保护

---

5. 前后端职责边界

5.1 前端职责

1. 展示状态
2. 收集输入
3. 呈现 loading / success / error

5.2 后端职责

1. 风控判断
2. 图形验证码触发
3. 会话列表返回
4. 设备撤销
5. 日志审计
6. 手机号换绑

前端不允许自己决定：

• 是否需要验证码
• 是否允许解除风控
• 是否允许换绑

---

6. 接口对齐

首期优先复用现有接口：

1. GET /api/auth/me
2. GET /api/auth/risk-blocks
3. POST /api/auth/risk-blocks/:scopeType/lift
4. GET /api/auth/sessions
5. POST /api/auth/sessions/:sessionId/revoke
6. GET /api/auth/audit-logs
7. POST /api/auth/phone/change
8. POST /api/auth/logout
9. POST /api/auth/logout-all

如需补充，只增加展示层所缺的聚合字段，不重建接口体系。

---

7. 前端实现要求

1. 设置继续采用当前账号弹窗基础形态即可
2. 移动端优先底部弹层，桌面端可居中弹窗
3. 设置首页只保留“主题外观”“账号信息”两个入口，不再单独展示安全状态、登录设备、操作记录入口
4. “账号信息”二级面板直接承载账号概况、安全状态、登录设备、操作记录与退出动作，移动端优先纵向滚动，桌面端保持同一面板内稳定扫读
5. 更换手机号必须通过独立操作面板完成，不再使用当前面板内联展开表单
6. 危险操作按钮与普通按钮必须明显区分
7. 设置首页标题处禁止展示手机号、脱敏手机号或手机号形态的 displayName
8. 设置首页不额外堆砌规则说明文案，标题下直接进入可操作内容
9. 子面板采用覆盖式独立面板承载详情，返回上一级时恢复首页，不在同层同时出现双导航动作
10. 面板切换必须保证键盘焦点始终停留在当前活跃面板内，返回上一级后焦点恢复到触发入口

---

8. 验收标准

1. 用户能看到当前账号安全信息
2. 能查看并管理登录设备
3. 能按规则更换手机号
4. 能查看最近账号操作记录
5. 退出登录和退出全部设备都能稳定生效