BizLoginPanel 登录面板

统一登录卡片：账号 / 密码（必填校验、记住账号）+ 验证码插槽位 + 忘记密码 + 第三方登录渠道（圆形按钮，slot 可接管图标）+ 提交 loading；左侧品牌区 cover 插槽可配产品插画。submit 外抛 { username, password, remember }——鉴权请求由业务层完成。中后台 / SaaS 的登录页底座。

基础用法

账号密码 + 记住账号 + 忘记密码；空值提交触发必填校验。

<script setup lang="ts">
/** 场景：基础——账号密码 + 记住账号 + 忘记密码 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizLoginPanel } from 'vue3-ep-biz-lib'
import type { BizLoginSubmitPayload } from 'vue3-ep-biz-lib'

const loading = ref(false)

const onSubmit = (payload: BizLoginSubmitPayload): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success(`提交登录：${payload.username}（记住账号：${payload.remember ? '是' : '否'}）`)
  }, 800)
}
</script>

<template>
  <BizLoginPanel
    title="欢迎登录"
    subtitle="vue3-ep-biz-lib 运营后台"
    :loading="loading"
    @submit="onSubmit"
    @forgot="ElMessage.info('跳转找回密码页')"
  />
</template>

验证码插槽

show-captcha 出占位行，captcha 插槽放任意验证码组件（图形码 / 滑块 / 短信码）。

<script setup lang="ts">
/** 场景：验证码插槽——图形验证码占位实现 */
import { ref } from 'vue'
import { ElInput } from 'element-plus'
import { BizLoginPanel } from 'vue3-ep-biz-lib'

const code = ref('')

/* 简易图形码：伪随机四字符（真实项目替换为接口图形码 / 滑块） */
const seed = Math.random().toString(36).slice(2, 6).toUpperCase()
const captcha = ref(seed)

const refresh = (): void => {
  captcha.value = Math.random().toString(36).slice(2, 6).toUpperCase()
}
</script>

<template>
  <BizLoginPanel title="账号登录" show-captcha>
    <template #captcha>
      <div style="display: flex; gap: 8px; width: 100%">
        <ElInput v-model="code" placeholder="请输入右侧字符" />
        <span
          style="cursor: pointer; user-select: none; letter-spacing: 3px; font-style: italic; padding: 0 12px; border-radius: 4px; background: var(--el-fill-color-light); color: var(--el-color-primary)"
          title="点击刷新"
          @click="refresh"
        >
          {{ captcha }}
        </span>
      </div>
    </template>
  </BizLoginPanel>
</template>

第三方登录

third-parties 配置渠道（微信 / 钉钉 / 飞书…），点击 third-party 外抛；图标经 third-xxx 插槽接管。

<script setup lang="ts">
/** 场景：第三方登录渠道 + third-xxx 图标插槽 */
import { ElMessage } from 'element-plus'
import { BizLoginPanel } from 'vue3-ep-biz-lib'
import type { BizLoginThirdParty } from 'vue3-ep-biz-lib'

const thirdParties: BizLoginThirdParty[] = [
  { key: 'wechat', label: '企业微信' },
  { key: 'dingtalk', label: '钉钉' },
  { key: 'feishu', label: '飞书' },
]

const onThird = (item: BizLoginThirdParty): void => {
  ElMessage.info(`发起 ${item.label} 扫码登录`)
}
</script>

<template>
  <BizLoginPanel title="欢迎登录" :third-parties="thirdParties" @third-party="onThird">
    <template #third-wechat>
      <span style="font-size: 13px">企微</span>
    </template>
    <template #third-dingtalk>
      <span style="font-size: 13px">钉钉</span>
    </template>
    <template #third-feishu>
      <span style="font-size: 13px">飞书</span>
    </template>
  </BizLoginPanel>
</template>

品牌区

cover 插槽渲染左侧品牌区（产品名 / 插画 / slogan）。

<script setup lang="ts">
/** 场景：cover 品牌区 */
import { BizLoginPanel } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizLoginPanel title="欢迎登录" subtitle="一体化运营平台">
    <template #cover>
      <div style="text-align: center">
        <div style="font-size: 44px">🚀</div>
        <div style="font-size: 16px; font-weight: 600; margin-top: 10px">一体化运营平台</div>
        <div style="font-size: 12px; opacity: 0.7; margin-top: 6px">数据驱动 · 高效协同</div>
      </div>
    </template>
  </BizLoginPanel>
</template>

提交与校验

loading 提交态 + validate / reset / focus 编程式操作。

<script setup lang="ts">
/** 场景：提交 loading + validate / reset / focus 编程式操作 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizLoginPanel } from 'vue3-ep-biz-lib'
import type { BizLoginPanelInstance } from 'vue3-ep-biz-lib'

const loading = ref(false)
const panelRef = ref<BizLoginPanelInstance | null>(null)

const submit = (): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('登录成功（模拟）')
  }, 1000)
}
</script>

<template>
  <div>
    <BizLoginPanel
      ref="panelRef"
      title="欢迎登录"
      default-username="admin@demo.com"
      :loading="loading"
      @submit="submit"
    />
    <div style="margin-top: 12px; display: flex; gap: 8px">
      <ElButton size="small" @click="panelRef?.focus()">focus 账号框</ElButton>
      <ElButton size="small" @click="void panelRef?.validate().then((ok) => ElMessage[ok ? 'success' : 'error'](ok ? '校验通过' : '存在未填项'))">
        手动校验
      </ElButton>
      <ElButton size="small" @click="panelRef?.reset()">reset</ElButton>
    </div>
  </div>
</template>

协议条

extra 插槽放用户协议与隐私政策勾选。

<script setup lang="ts">
/** 场景：extra 协议条（业务层在 submit 前自行拦截未勾选场景） */
import { ref } from 'vue'
import { ElCheckbox, ElMessage } from 'element-plus'
import { BizLoginPanel } from 'vue3-ep-biz-lib'

const agreed = ref(false)

const onSubmit = (): void => {
  if (!agreed.value) {
    ElMessage.warning('请先勾选协议（业务层在 submit 前自行拦截）')
    return
  }
  ElMessage.success('协议已勾选，提交登录')
}
</script>

<template>
  <BizLoginPanel title="欢迎登录" @submit="onSubmit">
    <template #extra>
      <ElCheckbox v-model="agreed" size="small">
        我已阅读并同意
        <button type="button" style="padding: 0; border: 0; background: none; color: var(--el-color-primary); cursor: pointer">
          《用户协议》
        </button>
        与
        <button type="button" style="padding: 0; border: 0; background: none; color: var(--el-color-primary); cursor: pointer">
          《隐私政策》
        </button>
      </ElCheckbox>
    </template>
  </BizLoginPanel>
</template>

业务口径标签

自定义标签 / 占位文案：企业邮箱登录、SSO 副标题等。

<script setup lang="ts">
/** 场景：自定义标签占位——邮箱 / 手机号等业务口径 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizLoginPanel } from 'vue3-ep-biz-lib'

const loading = ref(false)

const onSubmit = (): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('登录成功（模拟）')
  }, 800)
}
</script>

<template>
  <BizLoginPanel
    title="员工门户登录"
    subtitle="统一账号体系（SSO）"
    username-label="企业邮箱"
    password-label="密码"
    username-placeholder="name@company.com"
    :loading="loading"
    @submit="onSubmit"
  />
</template>

极简模式

收起记住账号 / 忘记密码 / 第三方，只保留主登录链路。

<script setup lang="ts">
/** 场景：极简模式——收起记住账号 / 忘记密码 / 第三方，仅主登录链路 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizLoginPanel } from 'vue3-ep-biz-lib'
import type { BizLoginSubmitPayload } from 'vue3-ep-biz-lib'

const loading = ref(false)

const onSubmit = (payload: BizLoginSubmitPayload): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success(`${payload.username} 已通过验证（模拟）`)
  }, 800)
}
</script>

<template>
  <BizLoginPanel
    title="管理后台"
    :show-remember="false"
    :show-forgot="false"
    :loading="loading"
    @submit="onSubmit"
  />
</template>

短信验证码登录

modes 加入 'sms' 出现方式切换；手机号格式校验（复用 useValidator 口径）+ sms-request 发送验证码（组件管理 60s 倒计时，reject 时按钮恢复），提交外抛 sms-submit { phone, code, remember }。

<script setup lang="ts">
/** 场景：短信验证码登录——手机号 + 60s 倒计时发送 + 验证码提交 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizLoginPanel } from 'vue3-ep-biz-lib'
import type { BizLoginSmsPayload } from 'vue3-ep-biz-lib'

const loading = ref(false)

const smsRequest = (phone: string): Promise<void> =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      if (phone.endsWith('0')) {
        ElMessage.error('该手机号发送受限（演示）')
        reject(new Error('受限'))
        return
      }
      resolve()
    }, 500)
  })

const onSmsSubmit = (payload: BizLoginSmsPayload): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success(`短信登录成功：${payload.phone}`)
  }, 800)
}
</script>

<template>
  <div style="max-width: 400px">
    <BizLoginPanel
      :modes="['password', 'sms']"
      :loading="loading"
      :sms-request="smsRequest"
      @sms-submit="onSmsSubmit"
    />
  </div>
</template>

扫码登录

qrcode-request 生成二维码内容（内部经 BizCode 渲染）+ qrcode-poll 轮询状态：待扫码 → 已扫描请在手机确认 → confirmed 触发 qrcode-login；过期自动停轮询、点击遮罩刷新重载。

<script setup lang="ts">
/** 场景：扫码登录——二维码生成 + 状态轮询（待扫码/已扫描/确认/过期） */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizLoginPanel } from 'vue3-ep-biz-lib'

const loading = ref(false)
/** 演示状态机：waiting → (3s) scanned → (6s) confirmed */
let elapsed = 0
let sessionToken = ''

const qrcodeRequest = (): Promise<string> =>
  new Promise((resolve) => {
    setTimeout(() => {
      elapsed = 0
      sessionToken = `demo-login-token-${Date.now()}`
      resolve(`https://app.example.com/scan-login?token=${sessionToken}`)
    }, 600)
  })

const qrcodePoll = (): Promise<'waiting' | 'scanned' | 'confirmed' | 'expired'> =>
  new Promise((resolve) => {
    elapsed += 2
    setTimeout(() => {
      if (elapsed >= 6) resolve('confirmed')
      else if (elapsed >= 3) resolve('scanned')
      else resolve('waiting')
    }, 100)
  })

const onQrcodeLogin = (): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('扫码确认，登录成功')
  }, 600)
}
</script>

<template>
  <div style="max-width: 400px">
    <BizLoginPanel
      :modes="['password', 'qrcode']"
      :qrcode-request="qrcodeRequest"
      :qrcode-poll="qrcodePoll"
      @qrcode-login="onQrcodeLogin"
    />
  </div>
</template>

MFA 二次验证

mfa 开启两步流：账密校验通过 → 「下一步」进入验证码步骤（mfa-send-code 支持 60s 重发倒计时）→ 提交时 payload 携带 mfaCode，由业务侧一次性完成「凭据 + 二次验证」校验。

<script setup lang="ts">
/** 场景：MFA 二次验证——账密第一步通过后进入验证码步骤，提交携带 mfaCode */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizLoginPanel } from 'vue3-ep-biz-lib'
import type { BizLoginSubmitPayload } from 'vue3-ep-biz-lib'

const loading = ref(false)

const mfaSendCode = (): Promise<void> =>
  new Promise((resolve) => setTimeout(resolve, 400))

const onSubmit = (payload: BizLoginSubmitPayload): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success(`二次验证通过，${payload.username} 登录成功`)
  }, 700)
}
</script>

<template>
  <div style="max-width: 400px">
    <BizLoginPanel
      mfa
      :mfa-send-code="mfaSendCode"
      :loading="loading"
      default-username="admin"
      @submit="onSubmit"
    />
  </div>
</template>

内置忘记密码三步流

点击「忘记密码？」进入内置三步流；演示验证码为 123456（错码可看失败停留）。最近重置账号：（尚未重置）

forgot-flow 开启后点击「忘记密码？」在面板内完成重置（自动回填已输入的账号）：验证身份（账号 + 验证码，forgot-send-code 管理 60s 倒计时）→ 设置新密码（两次一致校验）→ reset-request resolve 进入完成页，reject 停留原地，成功外抛 reset-done；不开启时维持只外抛 forgot 事件的旧契约。

<script setup lang="ts">
/** 内置忘记密码三步流：验证身份（账号 + 验证码）→ 设置新密码 → 完成返登录，全流程在面板内闭环 */
import { ref } from 'vue'
import { BizLoginPanel } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const lastReset = ref('（尚未重置）')

/** 模拟发送验证码（真实项目为服务端短信接口） */
const forgotSendCode = (account: string): Promise<void> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      ElMessage.info(`（演示）验证码已发送至 ${account} 绑定手机：123456`)
      resolve()
    }, 400)
  })
}

/** 模拟重置接口：验证码错误时 reject 演示失败停留 */
const resetRequest = (payload: { account: string; code: string; password: string }): Promise<void> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (payload.code !== '123456') {
        reject(new Error('验证码错误'))
        return
      }
      resolve()
    }, 500)
  })
}

const onResetDone = ({ account }: { account: string }): void => {
  lastReset.value = account
}

const onSubmit = (): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('登录成功（演示）')
  }, 600)
}
</script>

<template>
  <div style="max-width: 400px">
    <BizLoginPanel
      title="欢迎登录"
      forgot-flow
      :loading="loading"
      :forgot-send-code="forgotSendCode"
      :reset-request="resetRequest"
      @submit="onSubmit"
      @reset-done="onResetDone"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      点击「忘记密码？」进入内置三步流；演示验证码为 123456（错码可看失败停留）。最近重置账号：{{ lastReset }}
    </p>
  </div>
</template>

忘记密码（管理员发码）

验证码步骤无「获取验证码」按钮，适配管理员线下发码；最近重置：（尚未重置）

不配置 forgot-send-code 时验证码步骤不出现「获取验证码」按钮——内网 / 强管控场景由管理员线下发码，仅注入 reset-request 即可走通全流程。

<script setup lang="ts">
/** 管理员发码场景：未配置 forgot-send-code 时验证码步骤不显示发送按钮（管理员 / IT 台账统一发码） */
import { ref } from 'vue'
import { BizLoginPanel } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const lastReset = ref('（尚未重置）')

/** 仅重置提交注入（验证码由管理员线下发放） */
const resetRequest = (payload: { account: string; password: string }): Promise<void> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      lastReset.value = `${payload.account} → 新密码 ${payload.password.slice(0, 1)}***`
      resolve()
    }, 500)
  })
}
</script>

<template>
  <div style="max-width: 400px">
    <BizLoginPanel
      title="统一身份认证"
      subtitle="内网 SSO"
      forgot-flow
      :reset-request="resetRequest"
      @submit="ElMessage.info('登录提交（演示）')"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      验证码步骤无「获取验证码」按钮，适配管理员线下发码；最近重置：{{ lastReset }}
    </p>
  </div>
</template>

内置注册流

点击「注册账号」进入内置注册流；演示验证码 123456。已注册手机号：（尚未注册）

show-register + register-flow：点击「注册账号」在面板内完成注册（手机号 + 验证码 + 两次密码），register-request resolve 进入完成页并外抛 register-done，返回登录自动回填手机号；register-send-code 管理 60s 倒计时。

<script setup lang="ts">
/** 内置注册流：手机号 + 验证码 + 密码 → 注册成功回登录（自动回填手机号），全程面板内闭环 */
import { ref } from 'vue'
import { BizLoginPanel } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const registered = ref('（尚未注册）')

/** 模拟发送验证码 */
const registerSendCode = (phone: string): Promise<void> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      ElMessage.info(`（演示）验证码已发送至 ${phone}：123456`)
      resolve()
    }, 400)
  })
}

/** 模拟注册接口：验证码错误 reject 演示失败停留 */
const registerRequest = (payload: { phone: string; code: string; password: string }): Promise<void> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (payload.code !== '123456') {
        reject(new Error('验证码错误'))
        return
      }
      resolve()
    }, 500)
  })
}

const onRegisterDone = ({ phone }: { phone: string }): void => {
  registered.value = phone
}

const onSubmit = (): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('登录成功（演示）')
  }, 600)
}
</script>

<template>
  <div style="max-width: 400px">
    <BizLoginPanel
      title="欢迎登录"
      show-register
      register-flow
      :loading="loading"
      :register-send-code="registerSendCode"
      :register-request="registerRequest"
      @register-done="onRegisterDone"
      @submit="onSubmit"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      点击「注册账号」进入内置注册流；演示验证码 123456。已注册手机号：{{ registered }}
    </p>
  </div>
</template>

注册（邀请码 + 协议勾选）

未勾选协议直接提交会被拦截；协议文案经 register-agreement 插槽自定义（可嵌链接）

register-invite 追加选填邀请码；register-agreement 强制勾选协议后才能提交，文案经 register-agreement 插槽自定义（可嵌链接）。

<script setup lang="ts">
/** 邀请码 + 协议勾选：register-invite 追加选填邀请码，register-agreement 强制勾选后才能提交 */
import { BizLoginPanel } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

/** 模拟注册接口：回显邀请码 */
const registerRequest = (payload: { phone: string; code: string; password: string; inviteCode?: string }): Promise<void> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      ElMessage.success(`注册成功（演示），邀请码：${payload.inviteCode ?? '未填写'}`)
      resolve()
    }, 500)
  })
}
</script>

<template>
  <div style="max-width: 400px">
    <BizLoginPanel
      title="企业协作平台"
      show-register
      register-flow
      register-invite
      register-agreement
      :register-request="registerRequest"
    >
      <template #register-agreement>
        我已阅读并同意<a href="javascript:void(0)" style="margin: 0 2px">《企业服务协议》</a>与<a href="javascript:void(0)" style="margin-left: 2px">《数据合规承诺》</a>
      </template>
    </BizLoginPanel>
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      未勾选协议直接提交会被拦截；协议文案经 register-agreement 插槽自定义（可嵌链接）
    </p>
  </div>
</template>

自定义注册入口

只开 show-register 不开 register-flow：点击仅外抛 register 事件，跳转独立注册页 / 打开自绘弹窗。

<script setup lang="ts">
/** 自注册入口：show-register 不开 register-flow，点击仅外抛 register 事件（跳转独立注册页等） */
import { ref } from 'vue'
import { BizLoginPanel } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const clicked = ref(0)

const onRegister = (): void => {
  clicked.value += 1
  ElMessage.info('（演示）业务侧跳转独立注册页 / 打开自绘弹窗')
}
</script>

<template>
  <div style="max-width: 400px">
    <BizLoginPanel title="欢迎登录" show-register @register="onRegister" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      register 事件触发 {{ clicked }} 次；适合注册流程独立成页 / 需要企业微信扫码开通等场景
    </p>
  </div>
</template>

Props

属性名	类型	默认值	说明
title	`string`	`'欢迎登录'`	卡片主标题
subtitle	`string`	`''`	副标题
modes	`('password' \| 'sms' \| 'qrcode')[]`	`['password']`	开放的登录方式（多种时顶部出现方式切换）
username-label / password-label	`string`	`'账号' / '密码'`	表单项标签
show-remember	`boolean`	`true`	记住账号勾选
show-captcha	`boolean`	`false`	验证码行（配合 captcha 插槽）
show-forgot	`boolean`	`true`	忘记密码链接
username-placeholder	`string`	`'请输入账号'`	账号输入框占位
password-placeholder	`string`	`'请输入密码'`	密码输入框占位
captcha-label	`string`	`'验证码'`	验证码表单项标签
third-parties	`BizLoginThirdParty[]`	`[]`	第三方渠道（key / label / icon）
loading	`boolean`	`false`	提交按钮 loading
default-username	`string`	`''`	初始账号（记住账号回填）
phone-placeholder	`string`	`'请输入手机号'`	短信登录手机号占位
sms-request	`(phone) => Promise<void>`	—	短信验证码发送实现（60s 倒计时；reject 恢复按钮）
sms-code-length	`number`	`6`	短信 / MFA 验证码位数（maxlength 与校验口径）
qrcode-request	`() => Promise<string>`	—	扫码登录二维码内容生成
qrcode-poll	`() => Promise<'waiting' \| 'scanned' \| 'confirmed' \| 'expired'>`	—	扫码状态轮询
qrcode-poll-interval	`number`	`2000`	轮询间隔（ms）
mfa	`boolean`	`false`	开启账密两步流（第二步验证码）
mfa-send-code	`() => Promise<void>`	—	MFA 验证码重发实现（不传则隐藏重发按钮）
forgot-flow	`boolean`	`false`	内置忘记密码三步流（验证身份 → 设置新密码 → 完成）；false 时点击忘记密码仅外抛 forgot 事件
forgot-send-code	`(account) => Promise<void>`	—	忘记密码流·验证码发送实现（入参账号，60s 倒计时；不传则隐藏发送按钮，适配管理员发码场景）
reset-request	`(payload: { account, code, password }) => Promise<void>`	—	忘记密码流·重置提交：resolve 进入完成页并外抛 reset-done；reject 提示失败停留原地
show-register	`boolean`	`false`	注册入口链接（password / sms 表单 options 行出现「注册账号」）
register-flow	`boolean`	`false`	内置注册流：面板内完成注册；false 时点击注册仅外抛 register 事件
register-send-code	`(phone: string) => Promise<void>`	—	注册流·验证码发送实现（60s 倒计时；不传则隐藏发送按钮，适配管理员开号场景）
register-request	`(payload: { phone, code, password, inviteCode? }) => Promise<void>`	—	注册流·提交：resolve 进入完成页并外抛 register-done；reject 提示失败停留原地
register-invite	`boolean`	`false`	注册流·显示邀请码输入（选填）
register-agreement	`boolean`	`false`	注册流·协议勾选（勾选后才允许提交）

Events

事件名	参数	说明
submit	`(payload: { username, password, remember, mfaCode? })`	校验通过提交（mfa 开启时含二次验证码）
sms-submit	`(payload: { phone, code, remember })`	短信登录提交
qrcode-login	—	扫码确认登录
qrcode-status	`(status)`	扫码状态变化（waiting / scanned / confirmed / expired）
third-party	`(item)`	第三方渠道点击
forgot	—	忘记密码（forgot-flow 关闭时的旧契约，业务侧自绘重置流程）
reset-done	`(payload: { account })`	忘记密码三步流重置成功（面板已切到完成页）
register	—	注册入口点击（register-flow 关闭时的契约，业务侧自绘注册流程）
register-done	`(payload: { phone })`	注册流成功（面板已切到完成页）

Slots

插槽名	说明
cover	左侧品牌区（配插画 / slogan）
captcha	验证码区（show-captcha 为 true 时显示）
third	渠道按钮区整体接管（作用域 items）
third-	单渠道图标接管
extra	底部协议 / 附加说明区
register-agreement	注册协议文案自定义（可嵌链接；register-agreement 开启时显示）

Expose

名称	类型	说明
validate	`() => Promise<boolean>`	表单校验
reset	`() => void`	重置表单与校验状态
focus	`() => void`	聚焦账号输入框

BizLoginPanel 登录面板 ​

基础用法 ​

验证码插槽 ​

第三方登录 ​

品牌区 ​

提交与校验 ​

协议条 ​

业务口径标签 ​

极简模式 ​

短信验证码登录 ​

扫码登录 ​

MFA 二次验证 ​

内置忘记密码三步流 ​

忘记密码（管理员发码） ​

内置注册流 ​

注册（邀请码 + 协议勾选） ​

自定义注册入口 ​

Props ​

Events ​

Slots ​

Expose ​