diff --git a/src/feature/auth/Login.tsx b/src/feature/auth/Login.tsx
index 14bf6c8..8043007 100644
--- a/src/feature/auth/Login.tsx
+++ b/src/feature/auth/Login.tsx
@@ -1,19 +1,48 @@
+import { Loading3QuartersOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Flex, Form, Input } from 'antd';
+import { NavLink, useNavigate } from 'react-router';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import { loginUser } from './authSlice';
+import { useEffect, useRef } from 'react';
+import useMessage from 'antd/es/message/useMessage';
 
-import { LockOutlined, MailOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Form, Input, Flex } from 'antd';
-import { NavLink } from 'react-router';
+// 定义 Form 表单的字段类型
+interface FormValues {
+    email: string;
+    password: string;
+    remember: boolean;
+}
+
 function Login() {
-    const onFinish = (values: unknown) => {
-        console.log('Received values of form: ', values);
+    const dispatch = useAppDispatch();
+    const auth = useAppSelector(state => (state.auth));
+    const [messageApi, Message] = useMessage()
+    const nav = useRef(useNavigate())
+
+    useEffect(() => {
+        if (auth.isAuth) {
+            nav.current('/');
+        }
+        if (!auth.loading && auth.error) {
+            messageApi.error(auth.error);
+        }
+    }, [auth, messageApi, nav])
+    // 给 onFinish 参数添加类型
+    const onFinish = async (values: FormValues) => {
+        try {
+            await dispatch(loginUser({ email: values.email, password: values.password }));
+        } catch (error) {
+            console.error('登录失败', error);
+        }
     };
 
     return (
         <Form
             name="login"
             initialValues={{ remember: true }}
-            style={{ maxWidth: 360 }}
             onFinish={onFinish}
         >
+            {Message}
             <h2>登录</h2>
             <Form.Item
                 name="email"
@@ -32,19 +61,23 @@
                     <Form.Item name="remember" valuePropName="checked" noStyle>
                         <Checkbox>自动登录</Checkbox>
                     </Form.Item>
-                    <NavLink to='/forget'> 忘记密码 </NavLink>
-
+                    <NavLink to="/forget"> 忘记密码 </NavLink>
                 </Flex>
             </Form.Item>
 
             <Form.Item>
                 <Button block type="primary" htmlType="submit">
-                    登录
+                    {auth.loading ? (
+                        <><Loading3QuartersOutlined /></>
+                    ) : (
+                        <>登录</>
+                    )
+                    }
                 </Button>
-                或 <NavLink to='/register'>注册</NavLink>
+                或 <NavLink to="/register">注册</NavLink>
             </Form.Item>
         </Form>
     );
-};
+}
 
-export default Login;
\ No newline at end of file
+export default Login;