册页面需求文档（PRD）

一、 页面整体视觉与布局规范（样式）

1. 页面风格：保持极简、专业的视觉体验，避免过度花哨的设计干扰用户操作。采用居中卡片式布局（Container），背景建议使用纯色或微渐变，确保表单区域视觉焦点突出3。
2. 表单排版：
   • 标签（Label）与输入框（Input）上下排列或左右对齐，保持合理的行间距（如 15px-20px）。
   • 输入框需有清晰的聚焦（Focus）状态样式（如边框高亮），提示用户当前正在编辑。
3. 按钮设计：
   • 【发送验证码】按钮需与输入框平齐，支持倒计时状态下的置灰（Disabled）样式。
   • 【注册】按钮置于表单底部，宽度撑满容器，使用品牌主色调，鼠标悬停时增加交互反馈1。
4. 反馈提示：错误提示文字统一使用红色（Error）小字，显示在对应输入框的下方1。

二、 表单字段与前端校验逻辑（功能）

1. 昵称（Nickname）：
   • 必填项。
   • 前端校验：限制长度（如 2-20 个字符），禁止纯空格。
2. 密码（Password）：
   • 必填项，建议支持密码明文/密文切换（小眼睛图标）。
   • 前端校验：限制长度（如至少 8 位），必须包含大写字母、小写字母和数字14。
3. 确认密码（Confirm Password）：
   • 必填项。
   • 前端校验：必须与“密码”字段完全一致，不一致时实时提示“两次密码输入不一致”12。
4. 邮箱（Email）：
   • 必填项。
   • 前端校验：使用正则表达式校验标准邮箱格式12。
5. 邮箱验证码（Verification Code）：
   • 必填项。
   • 前端校验：限制只能输入 5 位数字。

三、 核心交互与业务流程（功能）

1. 发送验证码交互：
   • 用户点击【发送验证码】后，按钮进入 60 秒倒计时，期间不可重复点击。
   • 若发送失败，需弹出明确的错误提示（如“发送过于频繁”或“网络错误”）。
2. 注册提交交互：
   • 点击【注册】时，先触发前端表单校验。若存在不合规项，阻止提交并聚焦到第一个错误字段。
   • 校验通过后，按钮进入 Loading（加载中）状态，防止用户重复点击提交。
3. 注册成功跳转：
   • 后端返回成功后，页面需弹出成功提示，并醒目展示后端生成的专属账号（Username），提醒用户牢记。
   • 提示展示 3-5 秒后，自动重定向至登录页面2。
4. 注册失败处理：
   • 若后端返回错误（如“该邮箱已被注册”），需在页面顶部或表单上方显示错误信息，并保留用户已填写的内容，避免重新输入2。

四、 后续扩展预留（可选）

• 在【注册】按钮下方预留“第三方快捷登录/注册”的图标占位（如 Google 登录），以备后续接入 OAuth 2.0 协议使用34。