docs：小程序编辑资料页昵称必填提示优化实现计划

2026-06-23 21:34:53 +08:00
parent 41ed8257f6
commit eb50358e3d
1 changed files with 125 additions and 0 deletions
@@ -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`，与源码保持一致。