组件 · 数据录入
Login 登录
可嵌入的登录表单组合：UI 提供品牌头、方式 Tabs、扫码角标与其他登录方式外观，@selrux/headless/login 维护切换状态及显隐行为。背景、外框、留白、宽度、页面定位及左右扩展区域由使用方自定义；鉴权与会话由宿主承担。
使用建议
- 避免：把 Login 当作通用表单容器
- 避免：绕过公开子组件自己拼装未导出内部上下文
- 限制：业务鉴权与会话不由本组件承担；提交与错误态由宿主注入
- 限制：默认不提供卡片边框、底色、外层留白、最大宽度或页面居中；这些样式及左右扩展区域由使用方通过容器或 className/style 自行设置
引入
import {
Login,
LoginError,
LoginHeader,
LoginMeta,
LoginOthers,
LoginPanel,
// …共 11 个导出
} from '@selrux/ui/login';代码演示
纯表单
UI 提供内部排版，Headless 管理切换状态；示例自行设置宽度和居中，页面背景与扩展区域由应用组合。
受控扫码与过期态
示例自行限制表单宽度；qrOpen / onQrOpenChange 控制扫码，QrPanel 透传状态与刷新。
扫码演示
角标翻转
请使用手机扫码
无样式行为
直接使用 Headless 登录根与部件；保留输入及扫码切换，原生控件外观与二维码内容由应用提供。
输入后切换扫码，再返回，输入内容会保留。
此处由应用渲染二维码；示例不生成票据或请求登录接口。
API
属性覆盖：示例用到 14 / 53 个自有属性（26.4%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
LoginTabs.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示
Login
可嵌入的表单内容，不预设背景、外框、宽度或页面定位。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | 显式尺寸；省略时跟随 ConfigProvider。 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
busy | 提交中的忙碌状态，由宿主请求流程持有。 | boolean | - |
activeMethod | 当前登录方式；提供时为受控。 | string | - |
defaultActiveMethod | 非受控的初始登录方式。 | string | - |
onActiveMethodChange | 请求切换登录方式时通知宿主。 | ((method: string) => void) | - |
qrOpen | 扫码开关；提供时为受控。 | boolean | - |
defaultQrOpen | 非受控的初始扫码开关。 | boolean | - |
onQrOpenChange | 请求切换扫码开关时通知宿主。 | ((open: boolean) => void) | - |
另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。
LoginError
行内错误外观；通过 Headless 内容部件跟随扫码显隐。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
LoginHeader
登录品牌头。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
logo | 品牌图：URL 字符串、节点，或 Logo 属性。 | ReactNode | LogoProps | - |
title | 主标题。 | ReactNode | - |
subTitle | 副标题。 | ReactNode | - |
extra | 标题旁额外内容。 | ReactNode | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
LoginMeta
辅助信息排版；扫码显隐交给 Headless。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
start | 左侧槽（如 Checkbox）。 | ReactNode | - |
end | 右侧槽（如忘记密码链接）。 | ReactNode | - |
另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。
LoginOthers
其他登录方式的主题槽位；扫码显隐交给 Headless。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
label | 前置文案；默认「其他登录方式」。 | ReactNode | - |
hideWhenQrOpen | 是否在扫码模式下隐藏；默认 true。 | boolean | true |
另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。
LoginPanel
登录方式面板，ref 指向 Headless 创建的同一内容元素。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value * | 对应根 activeMethod 的值。 | string | - |
keepMounted | 隐藏时保留挂载，默认 true。 | boolean | true |
另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。
LoginQrPanel
二维码主题内容；扫码显隐与 DOM 状态由 Headless 提供。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 二维码内容；与 qrCodeProps.value 二选一。 | string | - |
qrCodeProps | 透传给 QrCode 的属性（不含 className 与 value，value 由本组件解析）。 | (Omit<QrCodeProps, "className" | "value"> & { value?: string; }) | - |
tip | 二维码下方提示。 | ReactNode | - |
children | 完全自定义扫码区；传入时忽略默认 QrCode。 | ReactNode | QrCode |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
LoginQrToggle
保留 UI 默认图标与自定义 children 的原有用法。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
openLabel | 打开扫码时的名称，默认「扫码登录」。 | string | - |
closeLabel | 返回表单时的名称，默认「密码登录」。 | string | - |
children | 可按当前扫码状态渲染内容。 | ReactNode | ((open: boolean) => ReactNode) | - |
另有 288 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。
LoginSubmit
使用主题按钮展示 Headless 绑定的忙碌、尺寸及显隐状态。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
color | Button 语义色。 | "info" | "success" | "warning" | "primary" | "destructive" | "carbon" | "secondary" | "accent" | - |
variant | Button 变体。 | "link" | "outline" | "ghost" | "solid" | - |
size | Button 尺寸；默认跟随 Login。 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
loading | 覆盖忙碌态；默认取 Login.busy。 | boolean | - |
另有 289 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。
LoginTabs
登录方式切换的主题包装；初始化与状态同步由 Headless 绑定维护。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
dir | 同步 DOM 方向；未传时继承。 | "ltr" | "rtl" | - |
size | 显式尺寸优先于 Provider，最终回退 md。 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
variant | 外观变体，默认 line。 | "line" | "card" | "segment" | line |
orientation | 主轴，默认 horizontal。 | "horizontal" | "vertical" | horizontal |
fill | 填充方式，默认 auto。 | "auto" | "full" | auto |
loop | 方向键首尾循环，默认 true。 | boolean | true |
listPlacement | List 相对面板位置，默认 before。 | "before" | "after" | before |
activationMode | 键盘激活模式，默认 manual。 | "manual" | "automatic" | manual |
selectTrigger | 指针选择触发，默认 click。 | "hover" | "click" | click |
destroyOnHidden | 隐藏时是否卸载 Panel 内容，默认 false（保活）。 | boolean | - |
addable | 显示添加按钮；点击只调 onAdd，不自动插入项。 | TabsAddable | - |
closable | 组默认是否显示关闭按钮；项/option 可覆盖。 | boolean | - |
onAdd | 用户激活添加按钮后调用；宿主负责追加项。 | (() => void) | - |
onClose | 用户关闭某项时调用；宿主负责从集合移除。 | ((value: string) => void) | - |
sortable | 开启排序组合模式；不安装任何 DnD。 | boolean | - |
dragTarget | 排序承接目标，默认 handle。 | "trigger" | "handle" | handle |
onReorder | 宿主在外部 DnD 结束后调用的完整新顺序；库自身不调用，仅存入上下文。 | ((orderedValues: readonly string[]) => void) | - |
classNames | 语义 slot → className，仅对象形式。 | Partial<Record<TabsSemanticSlot, string>> | - |
styles | 语义 slot → style，仅对象形式。 | Partial<Record<TabsSemanticSlot, CSSProperties>> | - |
listLabel | - | string | - |
listLabelledBy | - | string | - |
extraStart | 配置模式的 Extra（List 前）。 | ReactNode | - |
extraEnd | 配置模式的 Extra（List 后）。 | ReactNode | - |
shape | 触发器形状，默认 square。 | "square" | "rounded" | square |
showIndicator | 是否渲染底边指示线；line 默认 true，card 默认 false；不影响 segment 的共享选中表面。 | boolean | true |
showScrollButton | 溢出时显示 prev/next 滚动按钮，默认 false。 | boolean | false |
value | - | string | - |
defaultValue | - | string | - |
onValueChange | - | ((value: string) => void) | - |
options | - | LoginTabsOption[] | - |
另有 277 项原生属性与事件继承自 HTMLAttributes，原样透传。
导出类型：LoginContextValue、LoginErrorProps、LoginHeaderProps、LoginMetaProps、LoginOthersProps、LoginPanelProps、LoginProps、LoginQrPanelProps、LoginQrToggleProps、LoginSize、LoginSubmitProps、LoginTabsOption、LoginTabsProps
函数与常量
| 名称 | 说明 | 签名 / 类型 |
|---|---|---|
useLoginContext | 必须在 Login 根中调用，缺少根时明确报错。 | () => LoginContextValue |
无障碍
摘自源码 JSDoc。
LoginOthers.label：前置文案；默认「其他登录方式」。LoginTabs.loop：方向键首尾循环，默认 true。LoginTabs.activationMode：键盘激活模式，默认 manual。