**产品需求文档：综合登录系统**

**1. 文档概述**

- **产品名称：** 统一认证与登录系统
- **功能模块：** 登录页 (Login Page)
- **文档目的：** 定义登录功能的详细需求，涵盖账号密码登录、验证码校验、二维码登录及相关的用户体验细节，确保开发实现准确无误。
- **目标用户：** 所有需要访问系统权限的注册用户（包括新用户、老用户、遗忘密码用户）。
- **核心目标：**
  1.  **安全可靠：** 保障用户账号安全，防御机器攻击。
  2.  **便捷高效：** 提供多种登录方式，减少用户操作成本。
  3.  **清晰引导：** 界面文案清晰，对各类情况给予明确反馈和引导。

**2. 功能需求详述**

**2.1. 账号密码登录（主流程）**

- **输入字段：**

  - **用户名/邮箱/手机号：**
    - 类型：单行输入框。
    - 提示文案(Placeholder): “请输入用户名/邮箱/手机号”。
    - 规则：支持三者之一即可，后端需做兼容判断。前端可做初步格式校验（如邮箱含'@'，手机号为 11 位数字），但最终有效性由后端验证。
  - **密码：**
    - 类型：密码输入框（内容默认隐藏）。
    - 提示文案：“请输入密码”。
    - 功能：右侧需提供“眼睛”图标，点击可切换明文/密文显示。
  - **图形验证码：**
    - 显示逻辑：非首次输入时触发。为了提高体验，可在用户密码输入框失焦（blur）后、或连续输错 1 次密码后，再出现验证码输入框。
    - 组件：一个输入框 + 一个实时图形验证码图片。
    - 图片：需提供“刷新”图标，点击可无刷新切换新的验证码。图片应清晰可辨，但具备一定的抗机器识别能力。
    - 提示文案：“请输入验证码”。

- **辅助功能：**

  - **记住我：**
    - 组件：复选框（Checkbox）。
    - 功能：勾选后，下次访问登录页时自动填充用户名（切勿记住密码）。
    - 默认状态：不勾选。
  - **忘记密码：**
    - 组件：文字链接。
    - 位置：位于密码框右侧或下方。
    - 功能：点击后跳转至密码找回流程页。

- **主要操作按钮：**
  - **“登录”按钮：**
    - 状态：
      - 默认态：可点击。
      - 加载态：用户点击后，按钮变为禁用状态并显示“登录中...”加载动画，防止重复提交。
    - 功能：触发登录逻辑。

**2.2. 二维码登录（便捷流程）**

- **切换入口：**

  - 在登录框顶部或侧边提供 Tab 页或文字链接，如“账号密码登录” | “二维码登录”，用于切换两种登录方式。

- **二维码显示区域：**

  - 初始状态：页面应动态生成一个唯一的二维码（QR Code），并配有文案提示：“请使用【APP 名称】扫描二维码登录”。
  - 自动刷新：该二维码应有时效性（例如 2 分钟）。倒计时在二维码旁可视化显示（如：01:45）。过期后自动刷新生成新的二维码。
  - 手动刷新：提供“刷新”按钮，用户可手动点击更换二维码。

- **登录状态轮询：**
  - 一旦二维码生成，前端即开始向后台轮询（Polling）其状态（如每 2 秒一次）。
  - 状态反馈：
    - 待扫描：显示初始状态。
    - 已扫描，待确认：二维码仍显示，下方文案变为“请在手机上确认登录”。
    - 登录成功：轮询停止，前端跳转至登录后页面（或首页）。
    - 过期/失败：二维码区域变灰，显示“二维码已失效”，并自动刷新生成新的二维码。

**2.3. 异常与交互流程**

- **输入校验（前端 + 后端）：**

  - 字段为空：点击登录后，对未填写的必填字段进行红色高亮提示，并显示文案“XXX 不能为空”。
  - 格式错误：在输入框失焦（blur）时即可进行初步校验（如邮箱格式错误），即时提示“邮箱格式不正确”。
  - 验证码错误：提示“验证码错误”，并自动刷新验证码图片。
  - 账号或密码错误：切勿明确提示是“账号错误”还是“密码错误”，统一提示：“用户名或密码错误”，以防黑客枚举用户名。同时，刷新验证码。

- **安全限制：**

  - 连续输错密码 N 次（如 5 次）后，除图形验证码外，应触发更严格的验证（如滑块验证、短信验证码）或直接锁定账号一段时间（如 15 分钟），并明确提示用户：“密码错误次数过多，请 15 分钟后再试”。

- **加载与反馈：**
  - 任何网络请求都必须有加载状态（如按钮 Loading），防止用户重复操作。
  - 所有错误提示都应清晰、友好，用红色字体在表单项附近或页面顶部固定区域显示。

**3. 用户体验（UX）重点**

1.  **默认焦点：** 页面加载后，自动将光标聚焦到“用户名”输入框。
2.  **键盘操作：** 在最后一项输入框（验证码或密码）按`Enter`键应触发登录操作。
3.  **密码可见性：** “眼睛”图标是行业标准，显著降低用户输错密码的概率。
4.  **智能验证码：** 不要一开始就展示验证码，而是在系统怀疑有风险（如输错一次）时再出现，优化善良用户的体验。
5.  **状态反馈：** 二维码登录的每种状态（待扫描、已确认、已过期）都必须有明确的视觉和文案反馈，让用户知其所以然。
6.  **链路闭环：** “忘记密码”和“注册”入口必须清晰可见，为登录失败的用户提供清晰的出路。

**4. 非功能性需求**

1.  **性能：** 页面加载速度快，登录接口响应时间应小于 500ms。
2.  **安全性：**
    - 密码传输必须使用 HTTPS 并加密（如 SHA256 加盐）。
    - 防暴力破解：后端需实施限流策略。
    - Token 管理：登录成功后颁发的 Token 需有有效期并支持刷新机制。
3.  **兼容性：** 支持主流浏览器（Chrome, Firefox, Safari, Edge）及移动端浏览器。

**5. 输出物建议**

1.  **PRD 文档：** 即本文档，用于详细阐述逻辑和规则。
2.  **线框图（Wireframe）：** 绘制登录页的布局，标注各元素和交互点。
3.  **高保真原型（High-Fidelity Mockup）：** 由 UI 设计师输出，明确视觉样式、颜色、字体等。
4.  **交互原型（Interactive Prototype）：** 使用 Figma、Axure 等工具制作可点击的原型，演示登录成功、失败、切换等所有流程。