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

> **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`，与源码保持一致。