退出登录弹窗提示

src/compenents/header/index.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 import styles from "./index.module.scss";
-import { Button, Dropdown, MenuProps } from "antd";
+import { Modal, Button, Dropdown, MenuProps } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { logoutAction } from "../../store/user/loginUserSlice";
 import { ChangePasswordModel } from "../change-password";
+import { ExclamationCircleFilled } from "@ant-design/icons";
+const { confirm } = Modal;
 
 export const Header: React.FC = () => {
   const dispatch = useDispatch();
@@ -20,8 +22,21 @@ export const Header: React.FC = () => {
 
   const onClick: MenuProps["onClick"] = ({ key }) => {
     if (key === "login_out") {
-      dispatch(logoutAction());
-      navigate("/login");
+      confirm({
+        title: "操作确认",
+        icon: <ExclamationCircleFilled />,
+        content: "确认退出登录？",
+        centered: true,
+        okText: "确认",
+        cancelText: "取消",
+        onOk() {
+          dispatch(logoutAction());
+          navigate("/login");
+        },
+        onCancel() {
+          console.log("Cancel");
+        },
+      });
     } else if (key === "change_password") {
       setChangePasswordVisiale(true);
     } else if (key === "user_info") {

src/index.scss

@@ -40,25 +40,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
@@ -264,6 +245,19 @@ button:focus-visible {
   }
 }
 
-.ant-progress{
+.ant-progress {
   margin-bottom: 0px;
 }
+
+.ant-modal-confirm-btns > .ant-btn-default:hover {
+  color: #ff4d4f !important;
+  border-color: #ff4d4f;
+}
+
+.ant-modal-confirm-btns > .ant-btn-primary {
+  background-color: #ff4d4f !important;
+  color: #fff;
+  &:hover {
+    opacity: 0.8;
+  }
+}