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

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 方法

确认当前代码如下：

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 后返回。

修改后代码：

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 模式下验证

确保 mini-program H5 开发服务器已启动：
```
cd mini-program
npm run dev:h5
```
访问 http://localhost:5173。
进入编辑资料页面（从「我的」→「个人档案」进入）。
清空昵称输入框，点击「保存」。
期望结果：
- 页面顶部弹出 Toast「请填写昵称」。
- 页面不跳转。
- 按钮文字保持「保存」，不显示「保存中」。
- 浏览器 Console 无报错。
填写昵称后再次点击「保存」。
期望结果：
- 弹出 Toast「已保存」。
- 编辑模式下返回上一页。
- 浏览器 Console 无报错。

Step 4: 提交代码

git add mini-program/src/pages/onboarding/index.vue
git commit -m "fix：编辑资料页昵称未填时增加 Toast 提示"

Self-Review

Spec coverage: 设计文档要求「昵称未填时点击保存给出 Toast 提示」，Task 1 Step 2 直接实现该逻辑。
Placeholder scan: 无 TBD、TODO 或模糊描述，代码和命令均已给出。
Type consistency: 仅使用现有 form.nickname、saving.value、uni.showToast，与源码保持一致。

3.8 KiB Raw Blame History

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

文件结构

Task 1: 修改 saveProfile 校验逻辑

Self-Review

3.8 KiB

Raw Blame History

Task 1: 修改 `saveProfile` 校验逻辑