feat: 实现右上角用户名显示及登出

src/features/auth/authSlice.js

@@ -40,4 +40,6 @@ const authSlice = createSlice({
 
 export const { logout } = authSlice.actions;
 export const selectUserRole = (state) => state.auth.roles;
+export const selectUserName = (state) => state.auth.name;
+export const selectUserId = (state) => state.auth.userId;
 export default authSlice.reducer;

src/layouts/CommonLayout.jsx

@@ -1,22 +1,22 @@
-import {
-  DesktopOutlined,
-  FileOutlined,
-  PieChartOutlined,
-  TeamOutlined,
-  UserOutlined,
-} from "@ant-design/icons";
-import { Layout, Menu, theme } from "antd";
+import { DownOutlined } from "@ant-design/icons";
+import { Dropdown, Layout, Menu, message, Space, theme } from "antd";
 import { Content, Header } from "antd/es/layout/layout";
 import Sider from "antd/es/layout/Sider";
 import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import menuConfig from "../config/menuConfig";
-import { useSelector } from "react-redux";
-import { selectUserRole } from "../features/auth/authSlice";
+import {
+  logout,
+  selectUserName,
+  selectUserRole,
+} from "../features/auth/authSlice";
 
 export default function CommonLayout() {
   const location = useLocation();
   const naviagte = useNavigate();
+  const dispatch = useDispatch();
+  const userName = useSelector(selectUserName);
 
   const [collapsed, setCollapsed] = useState(false);
   const {
@@ -29,6 +29,21 @@ export default function CommonLayout() {
     (item) => !item.roles || item.roles.some((role) => roles.includes(role))
   );
 
+  const dropDownItems = [
+    {
+      key: "logout",
+      label: "退出登录",
+    },
+  ];
+
+  const handleMenuClick = ({ key }) => {
+    if (key === "logout") {
+      dispatch(logout());
+      message.success("已退出登录");
+      naviagte("/login");
+    }
+  };
+
   return (
     <Layout style={{ minHeight: "100vh" }}>
       <Sider
@@ -50,7 +65,17 @@ export default function CommonLayout() {
         />
       </Sider>
       <Layout>
-        <Header style={{ padding: 0, background: colorBgContainer }} />
+        <Header
+          style={{ padding: 0, background: colorBgContainer }}
+          className="flex justify-end"
+        >
+          <Dropdown menu={{ items: dropDownItems, onClick: handleMenuClick }}>
+            <Space>
+              {userName}
+              <DownOutlined />
+            </Space>
+          </Dropdown>
+        </Header>
         <Content
           style={{
             margin: "16px 16px",

src/pages/user/MyReservation.jsx

@@ -4,6 +4,7 @@ import axiosInstance from "../../api/axios";
 import { useSelector } from "react-redux";
 import Column from "antd/es/table/Column";
 import dayjs from "dayjs";
+import { selectUserId } from "../../features/auth/authSlice";
 
 export default function MyReservation() {
   const [reservations, setReservations] = useState([]);
@@ -13,7 +14,7 @@ export default function MyReservation() {
     total: 0,
   });
 
-  const userId = useSelector((state) => state.auth.userId);
+  const userId = useSelector(selectUserId);
 
   const fetchData = async (pagination) => {
     const data = await axiosInstance.get(`/reservation/${userId}`, {