diff --git a/docs/superpowers/specs/2026-06-23-mini-program-edit-profile-nickname-validation-design.md b/docs/superpowers/specs/2026-06-23-mini-program-edit-profile-nickname-validation-design.md new file mode 100644 index 0000000..c23b550 --- /dev/null +++ b/docs/superpowers/specs/2026-06-23-mini-program-edit-profile-nickname-validation-design.md @@ -0,0 +1,67 @@ +--- +author: Peanut +created_at: 2026-06-23 +purpose: 明确小程序编辑资料页面在昵称未填时给出 Toast 提示的优化方案 +--- + +# 小程序编辑资料页昵称必填提示优化 + +## 背景 + +当前小程序的编辑资料页面(`mini-program/src/pages/onboarding/index.vue`)在昵称未填写时,点击保存按钮会直接静默返回,没有任何提示。用户无法判断是按钮失效、网络问题还是字段未填,体验较差。 + +## 目标 + +- 当用户点击保存按钮时,如果昵称未填写,必须给出明确的 Toast 提示「请填写昵称」。 +- 保持改动最小,不影响现有保存流程和其他字段行为。 + +## 当前问题定位 + +在 `saveProfile` 方法中存在以下逻辑: + +```javascript +if (!form.nickname.trim() || saving.value) return +``` + +当 `form.nickname` 为空或仅包含空白字符时,条件成立,方法直接 `return`,没有触发任何提示。 + +## 方案 + +采用「保存时校验 + Toast 提示」的轻量方案。 + +### 具体改动 + +**文件**:`mini-program/src/pages/onboarding/index.vue` + +**修改 `saveProfile` 方法**: + +1. 先判断 `saving.value`,避免重复提交。 +2. 再判断昵称是否为空,为空时调用 `uni.showToast({ title: '请填写昵称', icon: 'none' })` 后返回。 + +改动后逻辑示例: + +```javascript +const saveProfile = async () => { + if (saving.value) return + + if (!form.nickname.trim()) { + uni.showToast({ title: '请填写昵称', icon: 'none' }) + return + } + + saving.value = true + // 原有保存逻辑保持不变 +} +``` + +### 不改动的部分 + +- 不修改其他字段的校验规则。 +- 不调整提示方式为字段高亮、弹窗或自动聚焦。 +- 不新增失焦校验或实时输入校验。 + +## 验证标准 + +- 进入编辑资料页面,清空昵称后点击保存,页面顶部弹出 Toast「请填写昵称」。 +- 填写昵称后点击保存,能正常提交并显示「已保存」。 +- 浏览器 Console 无报错。