diff --git a/docs/superpowers/plans/2026-06-23-mini-program-edit-profile-nickname-validation-plan.md b/docs/superpowers/plans/2026-06-23-mini-program-edit-profile-nickname-validation-plan.md new file mode 100644 index 0000000..9cd278d --- /dev/null +++ b/docs/superpowers/plans/2026-06-23-mini-program-edit-profile-nickname-validation-plan.md @@ -0,0 +1,125 @@ +# 小程序编辑资料页昵称必填提示优化实现计划 + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** 在小程序编辑资料页面,当用户点击保存按钮但昵称未填写时,弹出 Toast 提示「请填写昵称」,避免静默无反馈。 + +**Architecture:** 在现有 `saveProfile` 方法内部调整校验顺序:先拦截重复提交,再校验昵称非空;校验失败时调用 `uni.showToast` 后返回。不引入新文件,不改动其他字段逻辑。 + +**Tech Stack:** Vue 3 + UniApp + TypeScript + Pinia + +--- + +## 文件结构 + +| 文件 | 职责 | 变更类型 | +|---|---|---| +| `mini-program/src/pages/onboarding/index.vue` | 编辑资料页面,包含 `saveProfile` 保存方法 | 修改 | + +--- + +### Task 1: 修改 `saveProfile` 校验逻辑 + +**Files:** +- Modify: `mini-program/src/pages/onboarding/index.vue:310-328` + +- [ ] **Step 1: 查看当前 `saveProfile` 方法** + +确认当前代码如下: + +```javascript +const saveProfile = async () => { + if (!form.nickname.trim() || saving.value) return + saving.value = true + store.updateRegistration(JSON.parse(JSON.stringify({ ...form, birthday: birthday.value }))) + const res = await store.saveUserProfile() + saving.value = false + + if (!res.success) { + uni.showToast({ title: res.error || '保存失败', icon: 'none' }) + return + } + + syncFromStore() + uni.showToast({ title: '已保存', icon: 'success' }) + setTimeout(() => { + if (isEdit.value) uni.navigateBack() + else uni.reLaunch({ url: '/pages/main/index?tab=script' }) + }, 350) +} +``` + +- [ ] **Step 2: 修改校验顺序并添加 Toast 提示** + +将第一行拆分为两步:先判断 `saving.value`,再校验昵称;昵称为空时弹出 Toast 后返回。 + +修改后代码: + +```javascript +const saveProfile = async () => { + if (saving.value) return + + if (!form.nickname.trim()) { + uni.showToast({ title: '请填写昵称', icon: 'none' }) + return + } + + saving.value = true + store.updateRegistration(JSON.parse(JSON.stringify({ ...form, birthday: birthday.value }))) + const res = await store.saveUserProfile() + saving.value = false + + if (!res.success) { + uni.showToast({ title: res.error || '保存失败', icon: 'none' }) + return + } + + syncFromStore() + uni.showToast({ title: '已保存', icon: 'success' }) + setTimeout(() => { + if (isEdit.value) uni.navigateBack() + else uni.reLaunch({ url: '/pages/main/index?tab=script' }) + }, 350) +} +``` + +- [ ] **Step 3: 在 H5 模式下验证** + +1. 确保 mini-program H5 开发服务器已启动: + ```bash + cd mini-program + npm run dev:h5 + ``` + 访问 `http://localhost:5173`。 + +2. 进入编辑资料页面(从「我的」→「个人档案」进入)。 + +3. 清空昵称输入框,点击「保存」。 + +4. 期望结果: + - 页面顶部弹出 Toast「请填写昵称」。 + - 页面不跳转。 + - 按钮文字保持「保存」,不显示「保存中」。 + - 浏览器 Console 无报错。 + +5. 填写昵称后再次点击「保存」。 + +6. 期望结果: + - 弹出 Toast「已保存」。 + - 编辑模式下返回上一页。 + - 浏览器 Console 无报错。 + +- [ ] **Step 4: 提交代码** + +```bash +git add mini-program/src/pages/onboarding/index.vue +git commit -m "fix:编辑资料页昵称未填时增加 Toast 提示" +``` + +--- + +## Self-Review + +1. **Spec coverage:** 设计文档要求「昵称未填时点击保存给出 Toast 提示」,Task 1 Step 2 直接实现该逻辑。 +2. **Placeholder scan:** 无 TBD、TODO 或模糊描述,代码和命令均已给出。 +3. **Type consistency:** 仅使用现有 `form.nickname`、`saving.value`、`uni.showToast`,与源码保持一致。