docs：小程序编辑资料页昵称必填提示优化设计文档

2026-06-23 21:29:54 +08:00
parent 2c69da46e5
commit 41ed8257f6
1 changed files with 67 additions and 0 deletions
@@ -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 无报错。