91 lines
5.9 KiB
Markdown
91 lines
5.9 KiB
Markdown
---
|
||
name: 完善资料入口直接弹出编辑弹窗
|
||
overview: 让新用户登录后的生日引导、以及运势页的「去设置生日/去完善资料」入口，在跳转到「我的」页面后自动弹出用户信息编辑弹窗，而不是停留在页面顶部。
|
||
todos:
|
||
- id: add-open-edit-key
|
||
content: config.ts 的 STORAGE_KEYS 新增 OPEN_PROFILE_EDIT 标记
|
||
status: completed
|
||
- id: entry-write-marker
|
||
content: login.ts 生日引导与 horoscope.ts 去设置生日入口写入标记后 switchTab
|
||
status: completed
|
||
dependencies:
|
||
- add-open-edit-key
|
||
- id: profile-auto-edit
|
||
content: profile.ts onShow 消费标记，缓存兜底预填后延迟一帧自动弹出编辑弹窗
|
||
status: completed
|
||
dependencies:
|
||
- add-open-edit-key
|
||
- id: verify-entries
|
||
content: 用 [skill:lsp-code-analysis] 校验所有引导完善资料入口覆盖完整、引用无遗漏
|
||
status: completed
|
||
dependencies:
|
||
- entry-write-marker
|
||
- profile-auto-edit
|
||
---
|
||
|
||
## 产品概述
|
||
|
||
优化新用户登录后的「完善资料」引导体验：用户点击引导按钮后，跳转到「我的」页面时直接自动弹出资料编辑弹窗，无需再手动点击编辑入口。
|
||
|
||
## 核心功能
|
||
|
||
- 登录后生日引导弹窗点击「去完善」：跳转「我的」页并自动弹出编辑资料弹窗
|
||
- 运势页的「去设置生日」「去完善资料」入口：同样跳转「我的」页并自动弹出编辑资料弹窗
|
||
- 弹窗自动预填当前昵称、性别、生日、头像，用户可直接设置生日并保存
|
||
- 弹窗仅自动弹出一次，关闭或保存后停留在「我的」页面，不重复弹出
|
||
- 若用户资料接口尚未返回，使用本地缓存的资料预填表单，保证弹窗内容完整可用
|
||
- 「稍后再说」分支保持原有行为：直接进入衣橱页
|
||
|
||
## 视觉与交互
|
||
|
||
- 复用现有「编辑资料」底部弹窗样式，无新增界面元素
|
||
- 跳转后弹窗平滑出现，表单内容直接可编辑
|
||
|
||
## 技术栈
|
||
|
||
- 微信小程序原生框架（TypeScript + WXML + WXSS），沿用现有 `utils/config.ts`、`utils/logger.ts` 等工具模块，无新增依赖
|
||
|
||
## 实现方案
|
||
|
||
- 核心策略：复用项目已有的「storage 标记 + switchTab + 目标页 onShow 消费」成熟模式（先例：`OPEN_COLLECT` 标记实现从「我的」跳「穿搭」自动切收藏 tab）。因 `wx.switchTab` 不支持 query 传参，用 storage 标记传递「打开编辑弹窗」意图
|
||
- 写入端（`login.ts`、`horoscope.ts`）：点击引导按钮时先 `wx.setStorageSync(STORAGE_KEYS.OPEN_PROFILE_EDIT, 1)` 再 switchTab；switchTab 失败回调中清除标记，避免残留标记导致下次进入「我的」意外弹窗
|
||
- 消费端（`profile.ts`）：`onShow` 登录校验通过后读取标记并立即 `wx.removeStorageSync`（保证一次性），再经 `wx.nextTick` 延迟一帧后打开编辑弹窗——项目多处注释表明首帧渲染未结束就 setData 会触发「Expected updated data but get first rendering data」导致渲染失败，必须规避
|
||
- 数据兜底：`onEdit()` 依赖 `data.userInfo`，首次进入时 `fetchUser()` 异步未返回会导致表单为空；命中标记时若 `userInfo` 为空则用 `STORAGE_KEYS.USER_INFO` 本地缓存兜底（登录成功时已写入），再调用 `onEdit()`。`fetchUser` 返回后只更新 `userInfo`/`zodiac`，不覆盖 `editForm`，不会打断用户编辑
|
||
- 性能与可靠性：单次 storage 读写 + 一次 setData，无额外网络请求；标记消费幂等；接口失败时弹窗仍可打开（缓存兜底）
|
||
|
||
## 实现注意
|
||
|
||
- 消费逻辑放在 `auth.isLoggedIn()` 校验之后（未登录时早返回，标记保留待下次登录后消费）
|
||
- 不改动编辑弹窗 UI（`profile.wxml`）、保存逻辑（`onSaveProfile`）及「稍后再说」跳衣橱的原有分支
|
||
- 日志沿用 `logger.debug`，模块名保持 `login` / `horoscope` / `profile`
|
||
- `horoscope.ts` 需补充 `STORAGE_KEYS` 导入；`login.ts`、`profile.ts` 已有该导入
|
||
|
||
## 架构与数据流
|
||
|
||
简单链路改动，无需架构图。数据流：
|
||
引导入口（登录页生日引导 / 运势页）→ 写入 storage 标记 → `wx.switchTab` 到「我的」→ `onShow` 命中并清除标记 → 缓存兜底预填 → `wx.nextTick` → `onEdit()` → `editVisible=true` 弹出编辑弹窗
|
||
|
||
## 目录结构
|
||
|
||
本次改动共涉及 4 个文件，均在现有架构内按既有模式修改：
|
||
|
||
```
|
||
miniprogram/
|
||
├── utils/
|
||
│ └── config.ts # [MODIFY] STORAGE_KEYS 新增 OPEN_PROFILE_EDIT: 'zt_open_profile_edit'，用于跨 tab 页传递「自动打开编辑弹窗」意图
|
||
├── pages/
|
||
│ ├── login/
|
||
│ │ └── login.ts # [MODIFY] showBirthGuide() 确认分支：先写入 OPEN_PROFILE_EDIT 标记再 switchTab；switchTab fail 回调中清除标记并保持原有日志
|
||
│ ├── horoscope/
|
||
│ │ └── horoscope.ts # [MODIFY] onGoProfile()：先写入 OPEN_PROFILE_EDIT 标记再 switchTab，fail 回调清除标记；补充 STORAGE_KEYS 导入（覆盖导航栏「去设置生日」、空态「去完善资料」、内容区「去设置生日」三处入口）
|
||
│ └── profile/
|
||
│ └── profile.ts # [MODIFY] onShow() 登录校验后消费标记（读取→立即 remove→wx.nextTick 打开）；新增 openEditFromGuide() 方法：userInfo 为空时用 USER_INFO 缓存兜底预填，再调用 onEdit() 打开弹窗；增加 logger.debug 记录命中
|
||
```
|
||
|
||
## Agent Extensions
|
||
|
||
### Skill
|
||
|
||
- **lsp-code-analysis**
|
||
- Purpose: 校验登录页生日引导、运势页跳转入口与「我的」页编辑弹窗之间的调用链完整性，确认所有「引导完善资料」入口均已覆盖、无遗漏引用
|
||
- Expected outcome: 输出受影响符号（onGoProfile、showBirthGuide、onEdit、STORAGE_KEYS）的引用清单，确认改动覆盖全部入口且无其他遗留的「只跳转不弹窗」入口 |