册页面需求文档（PRD）
一、 页面整体视觉与布局规范（样式）
- 页面风格：保持极简、专业的视觉体验，避免过度花哨的设计干扰用户操作。采用居中卡片式布局（Container），背景建议使用纯色或微渐变，确保表单区域视觉焦点突出3。
- 表单排版：
- 标签（Label）与输入框（Input）上下排列或左右对齐，保持合理的行间距（如 15px-20px）。
- 输入框需有清晰的聚焦（Focus）状态样式（如边框高亮），提示用户当前正在编辑。
- 按钮设计：
- 【发送验证码】按钮需与输入框平齐，支持倒计时状态下的置灰（Disabled）样式。
- 【注册】按钮置于表单底部，宽度撑满容器，使用品牌主色调，鼠标悬停时增加交互反馈1。
- 反馈提示：错误提示文字统一使用红色（Error）小字，显示在对应输入框的下方1。
二、 表单字段与前端校验逻辑（功能）
- 昵称（Nickname）：
- 必填项。
- 前端校验：限制长度（如 2-20 个字符），禁止纯空格。
- 密码（Password）：
- 必填项，建议支持密码明文/密文切换（小眼睛图标）。
- 前端校验：限制长度（如至少 8 位），必须包含大写字母、小写字母和数字14。
- 确认密码（Confirm Password）：
- 必填项。
- 前端校验：必须与“密码”字段完全一致，不一致时实时提示“两次密码输入不一致”12。
- 邮箱（Email）：
- 必填项。
- 前端校验：使用正则表达式校验标准邮箱格式12。
- 邮箱验证码（Verification Code）：
- 必填项。
- 前端校验：限制只能输入 5 位数字。
三、 核心交互与业务流程（功能）
- 发送验证码交互：
- 用户点击【发送验证码】后，按钮进入 60 秒倒计时，期间不可重复点击。
- 若发送失败，需弹出明确的错误提示（如“发送过于频繁”或“网络错误”）。
- 注册提交交互：
- 点击【注册】时，先触发前端表单校验。若存在不合规项，阻止提交并聚焦到第一个错误字段。
- 校验通过后，按钮进入 Loading（加载中）状态，防止用户重复点击提交。
- 注册成功跳转：
- 后端返回成功后，页面需弹出成功提示，并醒目展示后端生成的专属账号（Username），提醒用户牢记。
- 提示展示 3-5 秒后，自动重定向至登录页面2。
- 注册失败处理：
- 若后端返回错误（如“该邮箱已被注册”），需在页面顶部或表单上方显示错误信息，并保留用户已填写的内容，避免重新输入2。
四、 后续扩展预留（可选）
- 在【注册】按钮下方预留“第三方快捷登录/注册”的图标占位（如 Google 登录），以备后续接入 OAuth 2.0 协议使用34。
