From 57505a0b40fa9950bd86b95de5a37ca69840670c Mon Sep 17 00:00:00 2001
From: BenjaminNH <1249376374@qq.com>
Date: Wed, 25 Jun 2025 00:28:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=8F=B3=E4=B8=8A?=
 =?UTF-8?q?=E8=A7=92=E7=94=A8=E6=88=B7=E5=90=8D=E6=98=BE=E7=A4=BA=E5=8F=8A?=
 =?UTF-8?q?=E7=99=BB=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/auth/authSlice.js   |  2 ++
 src/layouts/CommonLayout.jsx     | 47 ++++++++++++++++++++++++--------
 src/pages/user/MyReservation.jsx |  3 +-
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/features/auth/authSlice.js b/src/features/auth/authSlice.js
index 74a60f1..642a88f 100644
--- a/src/features/auth/authSlice.js
+++ b/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;
diff --git a/src/layouts/CommonLayout.jsx b/src/layouts/CommonLayout.jsx
index b03d5b6..50286d8 100644
--- a/src/layouts/CommonLayout.jsx
+++ b/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",
diff --git a/src/pages/user/MyReservation.jsx b/src/pages/user/MyReservation.jsx
index 1e2f006..8b36f57 100644
--- a/src/pages/user/MyReservation.jsx
+++ b/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}`, {