登录页布局选型

认证外壳布局骨架：分栏 / 居中 / 品牌双卡 / 叠压 / 沉浸背景，由 Login 业务组件的 layout variant 承载

稳定已接入

概述

组件类型： 认证页容器（非管理端 Shell）

职责： 为登录 / 注册 / 找回密码 / MFA 等提供布局骨架。

管理端页面套控制台外壳；未登录入口套本页所指布局。所有骨架由 Login 业务组件（DSL type: Login）的 layout variant 承载：结构模式（split / centered / brand-card / overlap / backdrop）与修饰配置（方向、比例、认证区容器、面板背景、装饰）正交组合，文案缺省走 i18n、同名 props 优先，登录请求与跳转由 DSL 编排。

布局族速查

族	编号	结构关键词	组件实现
分栏裸表单	01、04	左品牌 + 右 Form，无 Card	`layout: split` + `authVariant: plain`
分栏卡片	02、03	右（或左）独立认证 Card	`layout: split` + `authVariant: card / float`
居中认证	05、07	全屏底 + 居中 Card 或裸 Form	`layout: centered`
品牌双卡	06、08	品牌 Card 与认证区组合	`layout: brand-card`
叠压	09	品牌卡与登录卡局部叠加	`layout: overlap`
反向分栏	10、12	认证与品牌左右对调	`layout: split` + `brandSide: right`
沉浸背景	11	渐变底 + 悬浮认证 Card	`layout: backdrop`

编号 01–12 对应《登录页产品结构设计》的 12 套线框；组件侧由 5 个 layout variant + brandSide / brandRatio / authVariant / brandPanelBackground 组合覆盖（扫码登录的扫码区内容不在组件范围内，其反向分栏结构由 brandSide: right 承载）。

布局 split — 分栏（左品牌右认证）

新窗口打开 ↗

默认形态：左侧品牌面板（渐变底 + 背景装饰 + 插画），右侧认证列（认证卡 + 页脚）。brandRatio 控制品牌区占比，authVariant 控制认证区容器（plain 裸表单 / card 常规卡片 / float 大悬浮卡），brandSide: right 即反向分栏。

DSL 配置

{
  "body": {
    "type": "Login",
    "props": {
      "layout": "split",
      "brand": {
        "name": "Pactor",
        "title": "动态页面引擎",
        "description": "用 YAML 描述页面，运行时渲染为生产级界面"
      },
      "title": "欢迎回来",
      "subtitle": "登录以继续使用控制台",
      "forgotLink": {
        "text": "忘记密码？",
        "href": "/forgot"
      },
      "registerLink": {
        "text": "注册账号",
        "href": "/register"
      },
      "footer": "© 2026 Pactor"
    }
  }
}

布局 centered — 居中认证

新窗口打开 ↗

全屏渐变底 + 背景装饰，认证卡居中。centered 下 brand 仅展示 logo + name 紧凑标识（配置了才渲染），不渲染品牌标题 / 说明 / 插画；authVariant 仍可在 plain / card / float 间切换认证区容器。

DSL 配置

{
  "body": {
    "type": "Login",
    "props": {
      "layout": "centered",
      "brand": {
        "name": "Pactor"
      },
      "title": "登录",
      "subtitle": "使用账号密码继续"
    }
  }
}

布局 brand-card — 品牌双卡

新窗口打开 ↗

品牌区收敛为一张独立卡片（约 45% 宽），认证区为右侧裸表单，品牌与认证等量呈现，适合品牌与登录并重的门户。

DSL 配置

{
  "body": {
    "type": "Login",
    "props": {
      "layout": "brand-card",
      "brand": {
        "name": "Pactor",
        "title": "动态页面引擎",
        "description": "用 YAML 描述页面，运行时渲染为生产级界面"
      },
      "title": "欢迎回来"
    }
  }
}

布局 overlap — 叠压

新窗口打开 ↗

品牌卡（约 52% 宽）与登录卡同排，登录卡左移与品牌卡局部叠加并投影浮起，层次更强；窄屏自动取消重叠退化为上下排列。

DSL 配置

{
  "body": {
    "type": "Login",
    "props": {
      "layout": "overlap",
      "brand": {
        "name": "Pactor",
        "title": "动态页面引擎",
        "description": "用 YAML 描述页面，运行时渲染为生产级界面"
      },
      "title": "欢迎回来"
    }
  }
}

布局 backdrop — 沉浸背景

新窗口打开 ↗

整页品牌渐变 + 背景装饰，无分栏边界：左侧直接展示品牌标识与插画，右侧悬浮认证卡。品牌表达最强，适合强品牌门户。

DSL 配置

{
  "body": {
    "type": "Login",
    "props": {
      "layout": "backdrop",
      "brand": {
        "name": "Pactor"
      },
      "title": "登录"
    }
  }
}

选型建议

场景	推荐布局
企业 B2B、品牌与登录并重	`split`（`brandRatio` 加大品牌区）、`overlap`
控制台、SSO、步骤多	`centered`、`overlap`
极简、开发者/AI 产品	`centered` + `authVariant: plain`
反向分栏（认证在左、品牌右置）	`split` + `brandSide: right`
强品牌门户	`backdrop`、`brand-card`