Files
zt-closet-wxmini-frontend/.codebuddy/plans/完善资料入口直接弹出编辑弹窗_5b22ad8d.md
2026-09-13 02:44:41 +08:00

5.9 KiB
Raw Permalink Blame History

name, overview, todos
name overview todos
完善资料入口直接弹出编辑弹窗 让新用户登录后的生日引导、以及运势页的「去设置生日/去完善资料」入口,在跳转到「我的」页面后自动弹出用户信息编辑弹窗,而不是停留在页面顶部。
id content status
add-open-edit-key config.ts 的 STORAGE_KEYS 新增 OPEN_PROFILE_EDIT 标记 completed
id content status dependencies
entry-write-marker login.ts 生日引导与 horoscope.ts 去设置生日入口写入标记后 switchTab completed
add-open-edit-key
id content status dependencies
profile-auto-edit profile.ts onShow 消费标记,缓存兜底预填后延迟一帧自动弹出编辑弹窗 completed
add-open-edit-key
id content status dependencies
verify-entries 用 [skill:lsp-code-analysis] 校验所有引导完善资料入口覆盖完整、引用无遗漏 completed
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)的引用清单,确认改动覆盖全部入口且无其他遗留的「只跳转不弹窗」入口