Login 登录页

中后台项目统一的“登录”页面，有三种主题：百威红、品牌黄、品牌黄（表单白背景）。

同时集成了接口请求、阿里云验证码2.0。

提示

使用 Page 组件前，务必先

在 HTML 的 head 标签中添加相关的 script

ice.js 2 - public/index.html

<!-- 记得删除智能验证 1.0 的 script 👇 -->
<!-- <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js" /> -->
<script>
  window.AliyunCaptchaConfig = { region: 'cn', prefix: '1bl0mz' };
</script>
<script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"></script>

ice.js 3 - src/document.tsx

// 记得删除智能验证 1.0 的 script 👇
// <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js" />
<script
  type="text/javascript"
  dangerouslySetInnerHTML={{ __html: `window.AliyunCaptchaConfig = { region: 'cn', prefix: '1bl0mz' };` }}
/>
<script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js" />

在应用入口处添加以下代码：

import { BfPage } from '@bud-fe/react-pc-ui';
import request from './utils/request';

// 初始化 BfPage 中登录页、忘记密码页需要的参数
BfPage.configRequest({
  // @bud-fe/request 的 AxiosRequest 实例
  request,
  // 应用对应的 systemId。默认1代表业务中台
  systemId: 1,
});
// 启用智能验证 2.0【BfPage 默认使用智能验证 1.0，待 1.0 下线后（25 年底）计划默认启用 2.0】
BfPage.openAliyunCaptcha();
// 如果有特殊需求需要自定义 SceneId 或者在其他页面使用智能验证 2.0，BfPage 有提供 useAliyunCaptcha 函数
// const { aliyunCaptchaRef } = BfPage.useAliyunCaptcha({ aliyunCaptchaConfig: { //... } })

完整示例可参考模板工程代码：

基本使用

百威红

品牌黄

品牌黄（表单白背景）

提示

设置页面组件的 type 属性来切换不同主题时，务必记得先快速上手-定制 antd 主题。

API

参数	类型	默认值	是否必填	说明

基本使用​

百威红​

品牌黄​

品牌黄（表单白背景）​

API​

基本使用

百威红

品牌黄

品牌黄（表单白背景）

API