Login

代理商系统登录页 PRD，覆盖语言切换、账号密码登录、会话进入、安全规则和异常反馈。

页面摘要

项目	说明
页面性质	登录入口页，不提供注册、营销转化或账号服务中心能力
核心动作	切换语言，输入用户名和密码，提交登录并进入授权后的默认业务页面
数据范围	登录账号、密码、语言偏好、会话与安全校验结果
当前状态	账号密码登录、语言切换和错误反馈已定义

参考区

页面状态 Figma 截图

登录页默认展示品牌标题、用户名、密码、语言入口和登录按钮；语言菜单展开后展示 English、Korean、中文（简体）。

截图说明只作为 Figma 证据摘要，不作为字段定义；字段口径、完整列、导出和权限规则以字段模型章节为准。

用户名输入后字段进入 filled 态，当前输入字段需要保留清晰焦点反馈。

截图说明只作为 Figma 证据摘要，不作为字段定义；字段口径、完整列、导出和权限规则以字段模型章节为准。

密码以掩码形式展示；加载、失败、锁定和成功跳转状态以 Login 的表单规则和异常规则为准。

截图说明只作为 Figma 证据摘要，不作为字段定义；字段口径、完整列、导出和权限规则以字段模型章节为准。

功能规则

功能地图只描述 UI 结构。具体校验、点击行为、会话和错误反馈写在对应功能规则中。

模块	UI 表现	对应功能规则
背景层	深色渐变背景与点阵装饰	背景与品牌
品牌标题	`Agent System`，位于表单卡片上方	背景与品牌
登录卡片	白色圆角卡片，承载登录表单	登录卡片
语言入口	地球图标，下拉语言菜单	语言切换
用户名字段	标签、必填标识、图标、占位文案	用户名字段
密码字段	标签、必填标识、图标、占位文案	密码字段
登录按钮	主按钮，默认文案 `Log In`	登录提交
错误反馈	字段错误和页级错误提示	错误反馈

功能地图

背景与品牌

背景层用于建立系统入口识别，不承载业务操作。品牌标题固定展示，帮助用户确认当前进入的是代理商系统。

项目	说明
背景表现	使用深色渐变和点阵装饰，不能影响表单可读性。
品牌标题	默认展示 `Agent System`，根据当前语言展示对应文案。
适配规则	桌面端居中展示登录卡片；移动端保持表单主体可读、可点击。
异常处理	背景资源加载失败时不影响登录表单展示。

登录卡片

登录卡片是登录页的主要操作容器，所有输入、语言和提交动作都在卡片内完成。

项目	说明
结构	包含用户名字段、密码字段、语言入口、登录按钮和必要错误提示。
焦点顺序	键盘 Tab 顺序为语言入口、用户名、密码、登录按钮；具体顺序可按最终 UI 调整，但必须完整可达。
自动填充	必须兼容浏览器保存的用户名和密码，不得因为样式覆盖导致内容不可见。
提交中	登录请求提交后，字段只读或避免重复提交，按钮展示 loading。

登录表单字段模型

字段	所在区域	定义 / 口径	展示规则	提交 / 保存	备注
Username	登录卡片	代理商后台登录账号。	必填输入框，提交前 trim 首尾空格。	随登录请求提交。	允许失败后保留在表单中，不写入 URL。
Password	登录卡片	当前账号登录密码。	必填密码框，默认掩码显示。	随登录请求提交，提交后不在前端持久化。	不进入日志、本地存储、埋点或错误上报。
Language	语言菜单	登录页和登录后界面语言偏好。	显示 English、Korean、简体中文。	选择后本地保存 180 天，登录成功后作为用户偏好继续使用。	本地存储不可用时仅当前会话生效。
Log In	登录按钮	提交认证请求的主动作。	默认可点击；提交中显示 loading 并防重复点击。	只提交当前表单值和必要安全上下文。	校验失败不发起认证请求。
Error feedback	登录卡片	字段错误、认证失败、锁定或网络异常提示。	字段错误靠近字段，页级错误显示在表单区域。	不提交。	错误文案不得暴露密码或内部安全细节。

语言切换

语言切换用于在登录前选择界面语言。语言选择影响登录页文案，并作为登录后的默认界面语言。

项目	说明
语言范围	`English`、`Korean`、`简体中文`。
默认语言	本地保存语言 > 浏览器语言映射 > English。
打开方式	点击语言图标打开下拉菜单。
关闭方式	再次点击语言图标、选择语言、点击空白区域、按 `Esc`。
生效方式	当前页文案即时切换，不出现整页白屏刷新。
持久化	在当前浏览器保存 180 天。
异常处理	本地存储不可用时，当前会话仍应可切换语言，但刷新后可能回到默认判断。

用户名字段

用户名字段用于输入系统账号名。

项目	说明
占位文案	`Enter your username`。
输入支持	键盘输入、粘贴、浏览器自动填充。
提交处理	提交前执行首尾空格 `trim`。
校验规则	必填；长度 4-32；仅允许字母、数字、`.`、`_`、`-`。
错误展示	字段下方展示 inline error，焦点回到用户名字段。
安全要求	用户名可以保留在失败后的表单中，但不得写入地址栏参数。

密码字段

密码字段用于输入账号密码。

项目	说明
占位文案	`Enter your password`。
展示方式	始终掩码显示。
输入支持	键盘输入、粘贴、浏览器自动填充。
提交处理	原样提交，不做 `trim`，不改写大小写。
校验规则	必填；长度 1-64。
回车行为	在密码框按 `Enter` 等价于点击登录按钮。
安全要求	明文密码不得进入日志、本地存储、URL 或错误上报。

登录提交

登录按钮用于触发认证流程。按钮默认可点击，点击后再执行输入校验。

项目	说明
默认状态	显示 `Log In`，可点击。
校验失败	不提交登录请求，只展示字段错误。
提交中	按钮展示 `Signing in...` 和 loading，禁止重复提交。
成功处理	建立会话后跳转到指定目标、上次有效访问页、首个可访问页或 Data Report。
失败处理	按错误类型展示页级错误；账号密码错误时保留用户名、清空密码。
锁定处理	连续失败达到限制时展示锁定倒计时，锁定期间禁止继续提交。

错误反馈

登录页错误反馈分为字段级错误和页级错误。

类型	适用场景	展示规则
字段级错误	用户名为空、用户名格式不合法、密码为空	显示在字段下方，提示用户如何修正。
页级错误	账号密码错误、账号禁用、账号锁定、系统繁忙、网络异常	显示在表单区域内，不只使用 toast。
网络异常	请求超时、断网、服务不可用	保留输入内容，允许用户直接重试。
账号锁定	系统判定当前账号处于锁定期	展示剩余锁定时间，登录按钮不可继续提交。

业务流程

用户进入 Login，系统读取本地语言和当前会话状态。

若会话有效，按安全跳转规则进入业务页面；若会话无效，展示登录表单。

用户可先切换语言，也可直接输入用户名和密码。

用户点击 Log In 或在密码框按 Enter。

页面执行用户名和密码校验；校验失败时展示字段错误。

校验通过后进入提交中状态，系统执行认证。

认证成功后建立会话并跳转；认证失败后按错误类型展示反馈。

业务规则

登录页必须遵守共享规则中的语言、会话、表单和反馈规则。
登录按钮常态可点击，点击后再进行输入校验。
用户名提交前执行 trim，密码必须原样提交。
连续 10 分钟内登录失败 5 次，账号锁定 15 分钟；锁定状态由系统统一判定。
账号已禁用、冻结或删除时，只展示明确提示，不尝试自动恢复。
登录成功后必须记录会话、用户信息、权限范围和默认落地页。
目标页无权限时自动回退到下一个合法页面；若无合法页面，进入无权限说明页。
认证失败后保留用户名、清空密码、焦点回到密码字段。

页面特例

场景	处理
用户名为空	阻止提交，用户名字段展示必填错误。
用户名格式不合法	阻止提交，展示格式错误。
密码为空	阻止提交，密码字段展示必填错误。
账号或密码错误	页级错误；保留用户名；清空密码；焦点回到密码字段。
账号锁定	页级错误；展示倒计时；按钮不可提交。
网络异常 / 超时	保留用户名和密码；展示可重试提示。
系统繁忙	保留输入内容；提示稍后重试。
会话已有效	不展示登录表单，直接进入合法业务页。

本页目录