@zat-design-pro-component/pro-login

快速上手

基于 antd@4 版本开发

安装

npm 或 yarn 安装

# npm
$ npm install @zat-design-pro-component/prologin --save

# yarn
$ yarn add @zat-design-pro-component/prologin

使用

1. 可通过 npm 包进行引用

import { useEffect, useReducer, useState } from 'react';
import { ProLogin } from '@zat-design-pro-component/prologin';
import { accountLogin } from '@/services/login';
import QRcode from '../../assets/QRcode.png';

const Login = () => {
  const query = new URLSearchParams(window.location.search);
  const redirectUrl = query.get('redirectUrl') || query.get('target') || '';
  const [errorMsg, setErrorMsg] = useState('');
  const [QRCodeImg, setQRCodeImg] = useState('');

  const redirect = () => {
    window.location.replace(window.decodeURIComponent(redirectUrl));
  };
  const isLogin = () => {
    return false;
  };

  const fetchQR = () => {
    setQRCodeImg(QRcode);
  };

  const handleGetVerificationCode = () => {};

  const handleLogin = (value: any) => {
    // TODO
    accountLogin({
      loginName: value.username,
      passwd: value.password,
    }).then((res) => {
      if (res.code === '0') {
        const userInfo: UserInfo = {
          userName: res.data.name,
          companyName: res.data?.companyName,
          custId: res.data.custId,
          token: res.data.za_itid,
          orgCustId: res.data?.za_orgCustId,
          menu: [],
        };
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
        setTimeout(() => {
          redirect();
        }, 100);
      } else {
        setErrorMsg(res.message);
      }
    });
  };
  const handleRegister = () => {};
  const handleNextStep = () => {
    return true;
  };
  const handleUpdatePwd = () => {
    return true;
  };

  const handleSwitchLoginType = () => {
    setErrorMsg('');
  };

  useEffect(() => {
    // 检查是否已经登录已经登录则跳转redirecturl页面
    if (isLogin()) {
      redirect();
      return;
    }
    fetchQR();
  }, []);

  return (
    <ProLogin
      title="系统名称"
      subTitle="一句话简介系统带来的价值、好处或功能特点"
      // carousel={[imageOne]}
      notice="【公告】基于公司信息安全管理和安全审计管理规定，目前正在各职场逐步实施部署网络准"
      errorMessage={errorMsg}
      showReturn
      // logo={logo}
      hasQuickLogin
      hasRegister
      QRCode={QRCodeImg}
      hasSliderValidate
      registerType="phone"
      retrievePwdType={['phone', 'email']}
      registered={false}
      onGetVerificationCode={handleGetVerificationCode}
      onLogin={handleLogin}
      onRegister={handleRegister}
      onNextStep={handleNextStep}
      onUpdatePwd={handleUpdatePwd}
      validateScene=""
      QRType="weChat"
      showAutoLogin={false}
      showMobileAreaCode={false}
      copyrightPdf="dsaf"
      privacyPdf="ddddd"
      showInviteCode={false}
      onSwitchLoginType={handleSwitchLoginType}
    />
  );
};

export default Login;

组件库打包发布

npm run build

npm publish --registry https://registry.npmjs.org --access=public