Login
代理商系统登录页 PRD，覆盖语言切换、账号密码登录、会话进入、安全规则和异常反馈。
Login 是代理商系统的统一登录入口。页面只服务“已授权账号进入系统”这一目标，不承担注册、营销转化或账号服务中心职责。
页面摘要
| 项目 | 说明 |
|---|---|
| 页面性质 | 登录入口页，不提供注册、营销转化或账号服务中心能力 |
| 核心动作 | 切换语言，输入用户名和密码，提交登录并进入授权后的默认业务页面 |
| 数据范围 | 登录账号、密码、语言偏好、会话与安全校验结果 |
| 当前状态 | 账号密码登录、语言切换和错误反馈已定义；暂无独立开放问题区 |
需求状态
| 状态 | 内容 |
|---|---|
Confirmed | Login 只服务授权账号登录；账号、密码、语言切换、提交校验、会话创建和错误反馈按本文规则实现。 |
Inferred from Figma | 语言菜单选项和输入 filled 状态来自当前截图；背景资源失败不能阻塞表单展示。 |
Open Question | 当前未发现阻塞实现的独立开放问题；如新增验证码、MFA、找回密码或账号锁定详情，需要补充后续 PRD。 |
1. Figma 原型
登录页默认展示品牌标题、用户名、密码、语言入口和登录按钮。点击语言入口后展示 English、Korean、中文（简体）。
用户名输入后字段进入 filled 态，当前输入字段需要保留清晰焦点反馈。
密码以掩码形式展示。加载、失败、锁定和成功跳转状态以本 PRD 的功能说明和业务规则为准。
2. 页面组成
页面组成只描述 UI 结构。具体校验、点击行为、会话和错误反馈写在对应功能说明中。
| 模块 | UI 表现 | 对应功能说明 |
|---|---|---|
| 背景层 | 深色渐变背景与点阵装饰 | 背景与品牌 |
| 品牌标题 | Agent System，位于表单卡片上方 | 背景与品牌 |
| 登录卡片 | 白色圆角卡片，承载登录表单 | 登录卡片 |
| 语言入口 | 地球图标，下拉语言菜单 | 语言切换 |
| 用户名字段 | 标签、必填标识、图标、占位文案 | 用户名字段 |
| 密码字段 | 标签、必填标识、图标、占位文案 | 密码字段 |
| 登录按钮 | 主按钮，默认文案 Log In | 登录提交 |
| 错误反馈 | 字段错误和页级错误提示 | 错误反馈 |
3. 功能说明
3.1 背景与品牌
背景层用于建立系统入口识别，不承载业务操作。品牌标题固定展示，帮助用户确认当前进入的是代理商系统。
| 项目 | 说明 |
|---|---|
| 背景表现 | 使用深色渐变和点阵装饰，不能影响表单可读性。 |
| 品牌标题 | 默认展示 Agent System，根据当前语言展示对应文案。 |
| 适配规则 | 桌面端居中展示登录卡片；移动端保持表单主体可读、可点击。 |
| 异常处理 | 背景资源加载失败时不影响登录表单展示。 |
3.2 登录卡片
登录卡片是登录页的主要操作容器，所有输入、语言和提交动作都在卡片内完成。
| 项目 | 说明 |
|---|---|
| 结构 | 包含用户名字段、密码字段、语言入口、登录按钮和必要错误提示。 |
| 焦点顺序 | 键盘 Tab 顺序为语言入口、用户名、密码、登录按钮；具体顺序可按最终 UI 调整，但必须完整可达。 |
| 自动填充 | 必须兼容浏览器保存的用户名和密码，不得因为样式覆盖导致内容不可见。 |
| 提交中 | 登录请求提交后，字段只读或避免重复提交，按钮展示 loading。 |
3.3 语言切换
语言切换用于在登录前选择界面语言。语言选择影响登录页文案，并作为登录后的默认界面语言。
| 项目 | 说明 |
|---|---|
| 语言范围 | English、Korean、简体中文。 |
| 默认语言 | 本地保存语言 > 浏览器语言映射 > English。 |
| 打开方式 | 点击语言图标打开下拉菜单。 |
| 关闭方式 | 再次点击语言图标、选择语言、点击空白区域、按 Esc。 |
| 生效方式 | 当前页文案即时切换，不出现整页白屏刷新。 |
| 持久化 | 在当前浏览器保存 180 天。 |
| 异常处理 | 本地存储不可用时，当前会话仍应可切换语言，但刷新后可能回到默认判断。 |
3.4 用户名字段
用户名字段用于输入系统账号名。
| 项目 | 说明 |
|---|---|
| 占位文案 | Enter your username。 |
| 输入支持 | 键盘输入、粘贴、浏览器自动填充。 |
| 提交处理 | 提交前执行首尾空格 trim。 |
| 校验规则 | 必填；长度 4-32；仅允许字母、数字、.、_、-。 |
| 错误展示 | 字段下方展示 inline error，焦点回到用户名字段。 |
| 安全要求 | 用户名可以保留在失败后的表单中，但不得写入地址栏参数。 |
3.5 密码字段
密码字段用于输入账号密码。
| 项目 | 说明 |
|---|---|
| 占位文案 | Enter your password。 |
| 展示方式 | 始终掩码显示。 |
| 输入支持 | 键盘输入、粘贴、浏览器自动填充。 |
| 提交处理 | 原样提交，不做 trim，不改写大小写。 |
| 校验规则 | 必填；长度 1-64。 |
| 回车行为 | 在密码框按 Enter 等价于点击登录按钮。 |
| 安全要求 | 明文密码不得进入日志、本地存储、URL 或错误上报。 |
3.6 登录提交
登录按钮用于触发认证流程。按钮默认可点击，点击后再执行输入校验。
| 项目 | 说明 |
|---|---|
| 默认状态 | 显示 Log In，可点击。 |
| 校验失败 | 不提交登录请求，只展示字段错误。 |
| 提交中 | 按钮展示 Signing in... 和 loading，禁止重复提交。 |
| 成功处理 | 建立会话后跳转到指定目标、上次有效访问页、首个可访问页或 Data Report。 |
| 失败处理 | 按错误类型展示页级错误；账号密码错误时保留用户名、清空密码。 |
| 锁定处理 | 连续失败达到限制时展示锁定倒计时，锁定期间禁止继续提交。 |
3.7 错误反馈
登录页错误反馈分为字段级错误和页级错误。
| 类型 | 适用场景 | 展示规则 |
|---|---|---|
| 字段级错误 | 用户名为空、用户名格式不合法、密码为空 | 显示在字段下方，提示用户如何修正。 |
| 页级错误 | 账号密码错误、账号禁用、账号锁定、系统繁忙、网络异常 | 显示在表单区域内，不只使用 toast。 |
| 网络异常 | 请求超时、断网、服务不可用 | 保留输入内容，允许用户直接重试。 |
| 账号锁定 | 系统判定当前账号处于锁定期 | 展示剩余锁定时间，登录按钮不可继续提交。 |
4. 业务流程
用户进入 Login，系统读取本地语言和当前会话状态。
若会话有效，按安全跳转规则进入业务页面；若会话无效，展示登录表单。
用户可先切换语言，也可直接输入用户名和密码。
用户点击
Log In 或在密码框按 Enter。页面执行用户名和密码校验；校验失败时展示字段错误。
校验通过后进入提交中状态，系统执行认证。
认证成功后建立会话并跳转；认证失败后按错误类型展示反馈。
5. 业务规则
- 登录页必须遵守 共享规则 中的语言、会话、表单和反馈规则。
- 登录按钮常态可点击，点击后再进行输入校验。
- 用户名提交前执行
trim，密码必须原样提交。 - 连续 10 分钟内登录失败 5 次，账号锁定 15 分钟；锁定状态由系统统一判定。
- 账号已禁用、冻结或删除时，只展示明确提示，不尝试自动恢复。
- 登录成功后必须记录会话、用户信息、权限范围和默认落地页。
- 目标页无权限时自动回退到下一个合法页面；若无合法页面，进入无权限说明页。
- 认证失败后保留用户名、清空密码、焦点回到密码字段。
6. 异常与空态
| 场景 | 处理 |
|---|---|
| 用户名为空 | 阻止提交，用户名字段展示必填错误。 |
| 用户名格式不合法 | 阻止提交，展示格式错误。 |
| 密码为空 | 阻止提交，密码字段展示必填错误。 |
| 账号或密码错误 | 页级错误；保留用户名；清空密码；焦点回到密码字段。 |
| 账号锁定 | 页级错误；展示倒计时；按钮不可提交。 |
| 网络异常 / 超时 | 保留用户名和密码；展示可重试提示。 |
| 系统繁忙 | 保留输入内容；提示稍后重试。 |
| 会话已有效 | 不展示登录表单，直接进入合法业务页。 |