feat: 登录因验证码错误失败时，验证码输入框自动聚焦

react-ui/src/pages/Experiment/index.jsx

@@ -74,7 +74,7 @@ function Experiment() {
       page: pageOption.current.page - 1,
       size: pageOption.current.size,
     };
-    const [res, _] = await to(getExperiment(params));
+    const [res] = await to(getExperiment(params));
     if (res && res.data && Array.isArray(res.data.content)) {
       setExperimentList(
         res.data.content.map((item) => {
@@ -88,7 +88,7 @@ function Experiment() {
 
   // 获取流水线列表
   const getWorkflowList = async () => {
-    const [res, _] = await to(getWorkflow(queryFlow));
+    const [res] = await to(getWorkflow(queryFlow));
     if (res && res.data && res.data.content) {
       setWorkflowList(res.data.content);
     }
@@ -236,7 +236,7 @@ function Experiment() {
         ...values,
         global_param,
       };
-      const [res, _] = await to(postExperiment(params));
+      const [res] = await to(postExperiment(params));
       if (res) {
         message.success('新建实验成功');
         setIsModalOpen(false);
@@ -244,7 +244,7 @@ function Experiment() {
       }
     } else {
       const params = { ...values, global_param, id: experimentId };
-      const [res, _] = await to(putExperiment(params));
+      const [res] = await to(putExperiment(params));
       if (res) {
         message.success('编辑实验成功');
         setIsModalOpen(false);

react-ui/src/pages/User/Login/index.tsx

@@ -3,8 +3,8 @@ import { getCaptchaImg, login } from '@/services/system/auth';
 import { loginPasswordKey, loginUserKey, rememberPasswordKey } from '@/utils/localStorage';
 import { to } from '@/utils/promise';
 import { history, useModel } from '@umijs/max';
-import { Button, Checkbox, Flex, Form, Image, Input, message } from 'antd';
-import React, { useEffect, useState } from 'react';
+import { Button, Checkbox, Flex, Form, Image, Input, message, type InputRef } from 'antd';
+import { useEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import styles from './login.less';
 
@@ -17,12 +17,13 @@ const LoginInputPrefix = ({ icon }: { icon: string }) => {
   );
 };
 
-const Login: React.FC = () => {
+const Login = () => {
   const { initialState, setInitialState } = useModel('@@initialState');
   const [captchaCode, setCaptchaCode] = useState<string>('');
   const [uuid, setUuid] = useState<string>('');
   const [form] = Form.useForm();
   const [usernameReadOnly, setUsernameReadOnly] = useState<boolean>(true);
+  const captchaInputRef = useRef<InputRef>(null);
 
   useEffect(() => {
     getCaptchaCode();
@@ -59,11 +60,11 @@ const Login: React.FC = () => {
 
   // 登录
   const handleSubmit = async (values: API.LoginParams) => {
-    const [response] = await to(login({ ...values, uuid }));
-    if (response && response.data) {
+    const [res, error] = await to(login({ ...values, uuid }));
+    if (res && res.data) {
       const current = new Date();
       const expireTime = current.setTime(current.getTime() + 1000 * 12 * 60 * 60);
-      const { access_token } = response.data;
+      const { access_token } = res.data;
       setSessionToken(access_token, access_token, expireTime);
       message.success('登录成功！');
 
@@ -80,6 +81,10 @@ const Login: React.FC = () => {
       const urlParams = new URL(window.location.href).searchParams;
       history.push(urlParams.get('redirect') || '/');
     } else {
+      if (error?.data?.code === 500 && error?.data?.msg === '验证码错误') {
+        captchaInputRef.current?.focus();
+      }
+
       clearSessionToken();
       getCaptchaCode();
     }
@@ -156,6 +161,7 @@ const Login: React.FC = () => {
                         prefix={
                           <LoginInputPrefix icon={require('@/assets/img/login-captcha.png')} />
                         }
+                        ref={captchaInputRef}
                         allowClear
                       />
                     </Form.Item>

react-ui/src/requestConfig.ts

@@ -10,7 +10,7 @@ import { setRemoteMenu } from './services/session';
 import { gotoLoginPage } from './utils/ui';
 
 // [antd: Notification] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.
-const popupError = (error: string, skipErrorHandler?: boolean = false) => {
+const popupError = (error: string, skipErrorHandler: boolean | undefined = false) => {
   if (skipErrorHandler) {
     return;
   }

react-ui/src/utils/promise.ts

@@ -2,7 +2,7 @@
  * @param { Promise } promise
  * @return { Promise }
  */
-export async function to<T, U = Error>(promise: Promise<T>): Promise<[T, null] | [null, U]> {
+export async function to<T, U = any>(promise: Promise<T>): Promise<[T, null] | [null, U]> {
   try {
     const data = await promise;
     return [data, null];