refactor: optimize user authentication system in src/pages/security/Login.tsx and src/API/security/userActions.ts

src/API/security/userActions.ts

@@ -1,9 +1,25 @@
 import axiosInstance from '../interceptor';
 
+// 定义登录API响应的类型接口
+export interface LoginApiResponse {
+  code: string;
+  description: string;
+  solution: string;
+  data: {
+    token: string;
+    expire: number;
+    uid: number;
+    name: string;
+    avatar: string;
+  };
+}
 // 创建带默认请求头的axios实例
 
 // 登录接口
-export function login(username: string, password: string) {
+export function login(
+  username: string,
+  password: string
+): Promise<{ data: LoginApiResponse }> {
   return axiosInstance.post('/pub/login', {
     username,
     password,

src/pages/security/Login.tsx

@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { Row, Col, Form, Input, Button, Card, message, Image } from 'antd';
+import type { InputRef } from 'antd';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../states/store';
 import { SystemMode } from '../../states/systemModeSlice';
 import loginBrand from 'src/assets/imgs/login-brand.jpeg';
 import { useDispatch } from 'react-redux';
-import { login as loginApi } from '../../API/security/userActions';
+import {
+  login as loginApi,
+  LoginApiResponse,
+} from '../../API/security/userActions';
 import { setUserInfo, type UserInfoState } from '../../states/user_info'; // 同时导入 setUserInfo 和类型 UserInfoState
 import handleEmergencyOperation from '../../domain/patient/handleEmergencyOperation';
 import { setSystemMode } from '../../states/systemModeSlice';
@@ -15,8 +19,16 @@ const Login: React.FC = () => {
   const dispatch = useDispatch();
   const systemMode = useSelector((state: RootState) => state.systemMode.mode);
   const userInfo = useSelector((state: RootState) => state.userInfo);
+  const usernameInputRef = useRef<InputRef>(null);
   console.log(`========${systemMode}`);
 
+  // 自动聚焦到用户名输入框
+  useEffect(() => {
+    if (usernameInputRef.current) {
+      usernameInputRef.current.focus();
+    }
+  }, []);
+
   if (systemMode === SystemMode.Emergency) {
     return null;
   }
@@ -29,7 +41,7 @@ const Login: React.FC = () => {
   const loginRequest = async (values: {
     username: string;
     password: string;
-  }) => {
+  }): Promise<LoginApiResponse> => {
     const res = await loginApi(values.username, values.password);
     return res.data;
   };
@@ -38,7 +50,7 @@ const Login: React.FC = () => {
   const handleFinish = async (values: {
     username: string;
     password: string;
-  }) => {
+  }): Promise<void> => {
     try {
       const result = await loginRequest(values);
       if (result.code === '0x000000') {
@@ -65,7 +77,9 @@ const Login: React.FC = () => {
   };
 
   // 急诊操作处理流程
-  const handleEmergencyClick = async (e: React.MouseEvent<HTMLElement>) => {
+  const handleEmergencyClick = async (
+    e: React.MouseEvent<HTMLElement>
+  ): Promise<void> => {
     e.preventDefault(); // 阻止表单提交
     try {
       await handleEmergencyOperation();
@@ -106,6 +120,7 @@ const Login: React.FC = () => {
               rules={[{ required: true, message: '请输入用户名' }]}
             >
               <Input
+                ref={usernameInputRef}
                 size="large"
                 placeholder="请输入用户名"
                 data-testid="login-username-input"