dingtalk_cms/src/pages/user/Login/index.tsx

import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { history, useModel } from '@umijs/max';
import Settings from '../../../../config/defaultSettings';
import React from 'react';
import { flushSync } from 'react-dom';
import { login } from '@/services/api/auth';
import { App } from 'antd';
import { Msg } from '@/components/Msg';

/** 登录页面 */
const Page = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const { message } = App.useApp();

  /** 获取用户信息 */
  const fetchUserInfo = async () => {
    const userInfo = await initialState?.fetchUserInfo?.();
    if (userInfo) {
      flushSync(() => {
        setInitialState((s) => ({
          ...s,
          currentUser: userInfo,
        }));
      });
    }
  };

  /** 提交表单 */
  const onFinish = async (values: API.loginParams) => {
    await login(values);
    message.success('登录成功');
    await fetchUserInfo();
    const urlParams = new URL(window.location.href).searchParams;
    const to = urlParams.get('redirect') || '/';
    setTimeout(() => history.push(to), 1500);
  };

  return (
    <LoginForm
      logo={<img alt="logo" src={Settings.logo} />}
      title={Settings.title}
      subTitle={'钉钉消息推送管理后台'}
      onFinish={onFinish}
    >
      <ProFormText
        name="username"
        fieldProps={{
          size: 'large',
          prefix: <UserOutlined />,
        }}
        placeholder={'请输入用户名'}
        rules={[
          {
            required: true,
            message: '用户名是必填项！',
          },
        ]}
      />
      <ProFormText.Password
        name="password"
        fieldProps={{
          size: 'large',
          prefix: <LockOutlined />,
        }}
        placeholder={'请输入密码'}
        rules={[
          {
            required: true,
            message: '密码是必填项！',
          },
        ]}
      />
    </LoginForm>
  );
};

export default () => {
  return (
    <App>
      <Page />
      <Msg />
    </App>
  );
};