feat: 添加滑动验证码

src/views/User/Login/index.tsx

@@ -17,6 +17,8 @@ import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
 import styles from './index.module.less'
 import { observer } from 'mobx-react'
 import FooterComponent from '@/components/Footer'
+import RotateCaptcha from 'react-rotate-captcha'
+import { get, load, verify } from '@/api/captcha/index.ts'
 // import useStore from '@/utils/store/useStore.tsx'
 type LoginType = 'account' | 'phone'
 
@@ -33,6 +35,7 @@ export default observer(() => {
     const [form] = Form.useForm()
     // @ts-ignore
     const [base64Code, setBase64Code] = useState<API.GenerateBase64Code>({ data: '' })
+    const [open, setOpen] = useState(false)
     const clickGetBase64CodeMethod = async () => {
         await getBase64CodeMethod()
     }
@@ -271,6 +274,7 @@ export default observer(() => {
                                 block
                                 size='large'
                                 onClick={async () => {
+                                    setOpen(true)
                                     let validateFields
                                     if (loginType === 'account') {
                                         validateFields = ['username', 'password', 'code']
@@ -376,6 +380,13 @@ export default observer(() => {
                 </Space>
             </div>
             <FooterComponent></FooterComponent>
+            <RotateCaptcha
+                get={get}
+                load={load}
+                verify={verify}
+                open={open}
+                onClose={() => setOpen(false)}
+            />
         </div>
     )
 })