登录跳转以及登录相关store

src/compenents/header/Header.module.css

@@ -2,7 +2,6 @@
   background-color: white !important;
 }
 
-
 .main-header {
   width: 100%;
   background-color: white !important;
@@ -24,8 +23,3 @@
   align-items: center;
 }
 
-.title {
-  line-height: 64px !important;
-  display: inline;
-  color: #03a9f4 !important;
-}

src/compenents/header/Header.tsx

@@ -1,22 +1,44 @@
 import React from "react";
 import styles from "./Header.module.css";
-import logo from "../../assets/logo.png";
-import { Layout, Typography, Menu, Button, Dropdown, MenuProps } from "antd";
-import { Link } from "react-router-dom";
-
-
+import { Layout, Typography, Button, Dropdown, MenuProps } from "antd";
+import { useSelector } from "../../store/hooks";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { LoginOutActionCreator } from "../../store/user/userActions";
 
 export const Header: React.FC = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const user = useSelector((state: any) => state.user);
+  const onClick: MenuProps["onClick"] = ({ key }) => {
+    if (key === "login_out") {
+      dispatch(LoginOutActionCreator());
+      navigate("/login");
+    } else if (key === "edit_password") {
+      navigate("/editPasswor");
+    }
+  };
 
-
+  const items: MenuProps["items"] = [
+    {
+      label: "修改密码",
+      key: "edit_password",
+    },
+    {
+      label: "退出登录",
+      key: "login_out",
+    },
+  ];
   return (
     <div className={styles["app-header"]}>
       <Layout.Header className={styles["main-header"]}>
         <div></div>
         <Button.Group className={styles["button-group"]}>
-          <Link style={{ textDecoration: "none" }} to={`/login`}>
-            <Button>登录</Button>
-          </Link>
+          <Dropdown menu={{ items, onClick }} placement="bottomRight">
+            <Button type="link" danger>
+              {user.name}
+            </Button>
+          </Dropdown>
         </Button.Group>
       </Layout.Header>
     </div>