LoginForm

登录模板 · 自管 useForm(账号/密码必填+记住我) + 提交 loading + logo/footer 插槽(复用 Field/Input/Checkbox/Button·文案接 i18n)

用法

基础用法

自管 useForm：账号/密码必填 + 记住我 + 异步提交 loading。

tsx

<LoginForm
  onFinish={async ({ username, password, remember }) => {
    await api.login(username, password, remember);
  }}
/>

品牌 logo + 副标题

logo 落头部左上作品牌标，subtitle 作引导文案。

tsx

<LoginForm
  logo={<Logo />}
  subtitle="欢迎回来，请登录你的管理后台"
  onFinish={({ username }) => console.log(username)}
/>

底部链接区

footer 放忘记密码 / 注册等附加操作，带顶部分隔线。

tsx

<LoginForm
  footer={
    <div className="flex justify-between text-sm">
      <Link href="/forgot">忘记密码</Link>
      <Link href="/register">注册账号</Link>
    </div>
  }
  onFinish={() => {}}
/>

隐藏记住我

showRemember={false} 去掉「记住我」勾选（如不支持持久会话的场景）。

tsx

<LoginForm showRemember={false} onFinish={() => {}} />

何时用

直接落地后台/应用的登录页时用：账号 + 密码 + 记住我的表单状态、必填校验、提交 loading 都由它内部托管，你只接 onFinish。与 Form/ProForm 的区别：那两个是通用表单骨架，需要自己拼字段；LoginForm 是开箱即用的成品模板，登录场景之外不用它。

导入

import { LoginForm } from "@hulianui/ui"

Props

名称	类型	默认	说明
loading	`boolean`	—	外部 loading 覆盖（父层托管提交态时用）
showRemember	`boolean`	`true`	是否显示「记住我」
className	`string`	—	根节点类名

Events

事件	类型	说明
onFinish	`(values: LoginValues) => void \| Promise<void>`	校验通过后提交；返回 Promise → 提交按钮 loading

Slots

插槽	类型	说明
title	`ReactNode`	标题（默认 `locale.loginForm.title`）
subtitle	`ReactNode`	副标题（标题下方引导文案，左对齐·muted）
logo	`ReactNode`	品牌 logo（头部左上）
footer	`ReactNode`	底部附加区（忘记密码 / 注册链接等）

LoginValues = { username: string; password: string; remember: boolean }。

禁忌 / 坑

表单状态由组件内部托管，外部拿不到 username/password 的实时值——只能在 onFinish 拿到最终 values。若父层自己也在管提交态（如全局 loading），用 loading prop 覆盖内置 loading，别另写一份。
onFinish 返回 Promise 时提交按钮自动转 loading 并禁用，无需手动 disable。

用法

基础用法

自管 useForm：账号/密码必填 + 记住我 + 异步提交 loading。

tsx

<LoginForm
  onFinish={async ({ username, password, remember }) => {
    await api.login(username, password, remember);
  }}
/>

品牌 logo + 副标题

logo 落头部左上作品牌标，subtitle 作引导文案。

tsx

<LoginForm
  logo={<Logo />}
  subtitle="欢迎回来，请登录你的管理后台"
  onFinish={({ username }) => console.log(username)}
/>

底部链接区

footer 放忘记密码 / 注册等附加操作，带顶部分隔线。

tsx

<LoginForm
  footer={
    <div className="flex justify-between text-sm">
      <Link href="/forgot">忘记密码</Link>
      <Link href="/register">注册账号</Link>
    </div>
  }
  onFinish={() => {}}
/>

隐藏记住我

showRemember={false} 去掉「记住我」勾选（如不支持持久会话的场景）。

tsx

<LoginForm showRemember={false} onFinish={() => {}} />

何时用

名称

类型

默认

说明

boolean

—

外部 loading 覆盖（父层托管提交态时用）

showRemember

boolean

true

是否显示「记住我」

className

string

—

根节点类名

事件

类型

说明

onFinish

(values: LoginValues) => void | Promise<void>

校验通过后提交；返回 Promise → 提交按钮 loading

Slots

插槽	类型	说明
title	`ReactNode`	标题（默认 `locale.loginForm.title`）
subtitle	`ReactNode`	副标题（标题下方引导文案，左对齐·muted）
logo	`ReactNode`	品牌 logo（头部左上）
footer	`ReactNode`	底部附加区（忘记密码 / 注册链接等）

LoginValues = { username: string; password: string; remember: boolean }。

禁忌 / 坑

表单状态由组件内部托管，外部拿不到 username/password 的实时值——只能在 onFinish 拿到最终 values。若父层自己也在管提交态（如全局 loading），用 loading prop 覆盖内置 loading，别另写一份。

onFinish 返回 Promise 时提交按钮自动转 loading 并禁用，无需手动 disable。

LoginForm

用法

基础用法

登录

品牌 logo + 副标题

登录

底部链接区

登录

隐藏记住我

登录

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关

LoginForm

用法

基础用法

登录

品牌 logo + 副标题

登录

底部链接区

登录

隐藏记住我

登录

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关