Login
登录整页：品牌区 + 认证表单 + 辅助入口。中文惯用名：登录页（5 种布局形态）。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.login |
| 名称 | Login |
| 二级分类 | 业务组件（business） |
| 用途 | 登录整页：品牌区 + 认证表单 + 辅助入口 |
| 描述 | 中文惯用名：登录页（5 种布局形态）。 |
预览
静态结构：布局五态——split 分栏（品牌面板 + 认证列，brandSide 控制方向、brandRatio 经 --login-grid 变量控制占比、窄屏品牌面板隐藏并改顶部品牌行）、centered 居中（整页渐变背景 + 居中身份 + 认证区 + 页脚）、brand-card（品牌区独立 Card + 右侧裸表单）、overlap（品牌卡与登录卡局部叠加）、backdrop（渐变品牌背景 + 悬浮认证卡）；authVariant 三态（split/centered 生效）——plain 裸表单 / card 常规卡片 / float 大尺寸悬浮卡。认证区为 Form name="login" 内嵌 username / password 两个必填 Input（rules 必填校验 + i18n 文案）与全宽 submit Button，校验通过后 onSubmit 上抛 { username, password }；registerLink / forgotLink 有 href 渲染 Link、无 href 渲染 button 并触发对应 onXxxClick；品牌 identity 仅配置 logo 或 name 时渲染，插画未传展示内置默认插画、传空串隐藏。
DSL 结构
{
"type": "Login",
"props": {
"layout": "split",
"brand": {
"name": "Pactor",
"title": "资产化开发平台",
"description": "组件 / 模板 / 规范一站式管理"
},
"title": "欢迎回来",
"subtitle": "使用企业账号登录",
"registerLink": {
"text": "立即注册"
},
"forgotLink": {
"text": "忘记密码"
},
"footer": "© 2026 Pactor"
},
"events": {
"onSubmit": {
"action": "setState",
"params": {
"loggingIn": true
}
},
"onRegisterClick": {
"action": "navigate",
"params": {
"to": "/register"
}
}
}
}何时用
何时使用
- 登录整页：品牌展示区（logo / 名称 / 标语 / 插画）与认证表单（用户名 + 密码）组合。
- 需要多种登录布局形态（分栏 / 居中 / 品牌卡 / 叠加 / 背景）按品牌调性切换。
- 登录请求与后续跳转由页面编排（DSL events），组件只负责结构、校验与值上抛。
何时不用
- 嵌入卡片 / 弹窗内的小型登录表单（非整页）：使用 Form 自行组合。
- 扫码登录等非常规认证形态（不在本组件范围，见设计文档 10 号变体说明）。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| split 分栏 | 品牌面板 + 认证列网格分栏（brandSide / brandRatio 可调） | 常规企业登录页（默认） |
| centered 居中 | 整页渐变背景 + 居中认证区 | 轻品牌页、移动端优先 |
| brand-card 品牌卡 | 品牌区独立 Card + 裸表单 | 品牌信息强的场景 |
| overlap 叠加 | 品牌卡与登录卡局部叠加 | 视觉层次突出的营销型登录页 |
| backdrop 背景 | 渐变品牌背景 + 悬浮认证卡 | 氛围型登录页 |
| authVariant 认证区容器 | plain 裸表单 / card 卡片 / float 悬浮大卡 | 在 split / centered 内微调认证区形态 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
layout | `'split' | 'centered' | 'brand-card' |
brandSide | `'left' | 'right'` | 'left' |
brandRatio | number | 0.5 | 品牌区分栏占比 0–1（实际钳制 0.2–0.8，仅 split） |
authVariant | `'plain' | 'card' | 'float'` |
brandPanelBackground | boolean | true | split 品牌面板是否带渐变背景 |
decor | boolean | true | 是否渲染默认背景装饰（圆斑 / 圆环 / 点阵 / 流线） |
brand | LoginBrandInfo | — | 品牌区配置：{ logo?, name?, title?, description?, illustration? }；居中布局仅展示 logo + name |
title / subtitle | string | i18n pactor.login.title | 认证区标题 / 说明 |
usernameLabel / usernamePlaceholder | string | i18n pactor.login.* | 用户名标签 / 占位 |
passwordLabel / passwordPlaceholder | string | i18n pactor.login.* | 密码标签 / 占位 |
submitText | string | i18n pactor.login.submit | 提交按钮文案 |
registerLink / forgotLink | LoginLink | — | 注册 / 找回密码入口：{ text, href? }；有 href 渲染 Link，否则 button + 事件 |
footer | string | — | 页脚文案（版权 / 协议行） |
className / style | string / CSSProperties | — | 根节点样式 |
onSubmit | (values: Record<string, unknown>) => void | — | 校验通过后触发，参数 { username, password }；登录请求与跳转由 DSL 编排 |
onRegisterClick / onForgotClick | () => void | — | 注册 / 找回密码按钮点击（仅对应 link 无 href 时） |
使用规范
- 登录请求与跳转一律放 DSL events（onSubmit 之后），组件不内置接口调用。
- 文案优先用 props，缺省走 i18n（pactor.login.*）；品牌信息用 brand 对象整组配置。
- 布局形态（layout）与修饰配置（brandSide / authVariant / decor）正交组合，同一品牌换形态只改一个 prop。
- 注册 / 找回密码入口未配置不渲染辅助行，避免空行占位。
正例
- ✓ 企业门户：layout=split + brand（logo / name / title）+ registerLink 配置 href 跳注册页。
- ✓ 营销活动页：layout=overlap + float 认证卡 + brand.description 强化品牌文案。
反例
- ✕ 在 onSubmit 内直接发登录请求（应上抛值，由页面 / DSL 编排）。
- ✕ 用 Login 承载注册、找回密码等非登录流程整页（应使用 Form 组合对应页面）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。