feat

src/components/Captcha/CaptchaImage.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Spin } from 'antd';
+import { useRequest } from '@/utils/request';
+import { getCaptchaImage } from '@/services/login';
+
+export default (props) => {
+  const { onChange, ...leftProps } = props;
+
+  const [info, setInfo] = React.useState();
+  const [loading, getCaptcha] = useRequest(getCaptchaImage, setInfo);
+
+  React.useEffect(() => {
+    getCaptcha();
+  }, []);
+
+  React.useEffect(() => {
+    if (onChange) {
+      onChange(info);
+    }
+  }, [info]);
+
+  return (
+    <Spin spinning={loading}>
+      <img src={info?.image} onClick={getCaptcha} {...leftProps} />
+    </Spin>
+  );
+};

src/components/Captcha/index.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import classNames from 'classnames';
+import { SyncOutlined, CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons';
+import { Input } from 'antd';
+import { checkCaptch } from '@/services/login';
+import CaptchaImage from './CaptchaImage';
+
+export default (props) => {
+  const { style, className, onChange, onBlur, ...leftProps } = props;
+
+  const [captcha, setCaptcha] = React.useState();
+  const [value, setValue] = React.useState();
+  const [isOk, setIsOk] = React.useState(-1);
+
+  const handleChange = (e) => {
+    setValue(e.target.value);
+  };
+
+  const handleBlur = (e) => {
+    if (onBlur) {
+      onBlur(e);
+    }
+
+    checkCaptch({ id: captcha?.id, value }).then((res) => {
+      setIsOk(res);
+    });
+  };
+
+  const onCaptchaChange = (e) => {
+    setIsOk(-1);
+    setValue();
+    setCaptcha(e);
+  };
+
+  React.useEffect(() => {
+    if (onChange) {
+      onChange({
+        id: captcha?.id,
+        value,
+      });
+    }
+  }, [value, captcha]);
+
+  return (
+    <div className={classNames(className, 'flex', 'v-center')} style={style}>
+      <div className="flex-1">
+        <Input
+          allowClear
+          {...leftProps}
+          value={value}
+          onChange={handleChange}
+          onBlur={handleBlur}
+        />
+      </div>
+      <div className="flex-0" style={{ width: '130px', marginLeft: '8px' }}>
+        <CaptchaImage onChange={onCaptchaChange} />
+      </div>
+      <div className="flex-0" style={{ width: '24px', marginLeft: '8px' }}>
+        {isOk === -1 && <SyncOutlined style={{ fontSize: '16px', color: '#096dd9' }} />}
+        {isOk === 1 && <CheckCircleTwoTone twoToneColor="#00ff00" style={{ fontSize: '18px' }} />}
+        {isOk === 0 && <CloseCircleTwoTone twoToneColor="#ff0000" style={{ fontSize: '18px' }} />}
+      </div>
+    </div>
+  );
+};

src/pages/user/Login/index.jsx

@@ -1,9 +1,10 @@
-import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import { LockOutlined, UserOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
 import { Alert, message, Tabs } from 'antd';
 import React, { useState } from 'react';
 import md5 from 'md5';
 import ProForm, { ProFormText } from '@ant-design/pro-form';
 import { useIntl, Link, history, FormattedMessage, SelectLang, useModel } from 'umi';
+import Captcha from '@/components/Captcha';
 import Footer from '@/components/Footer';
 import { login } from '@/services/login';
 import styles from './index.less';
@@ -116,8 +117,29 @@ const Login = () => {
                   ),
                 },
               ]}
-
             />
+
+            <ProForm.Item
+              name="captcha"
+              placeholder="验证码"
+              rules={[
+                {
+                  required: true,
+                  message: (
+                    <FormattedMessage
+                      id="pages.login.captcha.required"
+                      defaultMessage="请输入验证码！"
+                    />
+                  ),
+                },
+              ]}
+            >
+              <Captcha
+                prefix={<SafetyCertificateOutlined />}
+                size="large"
+                placeholder="请输入验证码"
+              />
+            </ProForm.Item>
           </ProForm>
         </div>
       </div>

src/services/login.js

@@ -1,3 +1,16 @@
 import request from '@/utils/request';
 
 export const login = (data) => request('/login', { method: 'post', data });
+
+/**
+ * 获取验证码
+ * @returns
+ */
+export const getCaptchaImage = (admin) => request(`/captcha`);
+
+/**
+ * 校验验证码
+ * @param {*} data
+ * @returns
+ */
+export const checkCaptch = (data) => request(`/captcha`, { data, method: 'post', silent: 1 });

src/utils/request.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { request } from 'umi';
 import { downloadBlob } from './download';
 
@@ -99,3 +100,29 @@ export function queryTable(apiRequest) {
       });
   };
 }
+
+export function useRequest(fn, onSuccess, onError) {
+  const [loading, setLoading] = React.useState(false);
+
+  const p = (...args) =>
+    new Promise((resolve, reject) => {
+      setLoading(true);
+      fn(...args)
+        .then((res) => {
+          setLoading(false);
+          if (onSuccess) {
+            onSuccess(res);
+          }
+          resolve(res);
+        })
+        .catch((e) => {
+          setLoading(false);
+          if (onError) {
+            onError(e);
+          }
+          reject(e);
+        });
+    });
+
+  return [loading, p];
+}