From 7cb14c7ef5e37f03a3258361dc3480407b31ab45 Mon Sep 17 00:00:00 2001
From: BenjaminNH <1249376374@qq.com>
Date: Wed, 25 Jun 2025 16:43:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/menuConfig.js      |  12 ++-
 src/layouts/CommonLayout.jsx  |   5 +-
 src/pages/user/UserDetail.jsx | 151 ++++++++++++++++++++++++++++++++++
 src/router/index.jsx          |   5 ++
 4 files changed, 171 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/user/UserDetail.jsx

diff --git a/src/config/menuConfig.js b/src/config/menuConfig.js
index 6f96d07..735b8ab 100644
--- a/src/config/menuConfig.js
+++ b/src/config/menuConfig.js
@@ -1,4 +1,8 @@
-import { DesktopOutlined, UnorderedListOutlined } from "@ant-design/icons";
+import {
+  DesktopOutlined,
+  UnorderedListOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
 
 const menuConfig = [
   {
@@ -13,6 +17,12 @@ const menuConfig = [
     icon: UnorderedListOutlined,
     roles: ["USER"],
   },
+  {
+    path: "/user/userdetail",
+    label: "个人信息",
+    icon: UserOutlined,
+    roles: ["USER"],
+  },
 ];
 
 export default menuConfig;
diff --git a/src/layouts/CommonLayout.jsx b/src/layouts/CommonLayout.jsx
index 50286d8..351ba2b 100644
--- a/src/layouts/CommonLayout.jsx
+++ b/src/layouts/CommonLayout.jsx
@@ -69,7 +69,10 @@ export default function CommonLayout() {
           style={{ padding: 0, background: colorBgContainer }}
           className="flex justify-end"
         >
-          <Dropdown menu={{ items: dropDownItems, onClick: handleMenuClick }}>
+          <Dropdown
+            menu={{ items: dropDownItems, onClick: handleMenuClick }}
+            className="p-4"
+          >
             <Space>
               {userName}
               <DownOutlined />
diff --git a/src/pages/user/UserDetail.jsx b/src/pages/user/UserDetail.jsx
new file mode 100644
index 0000000..24c63f2
--- /dev/null
+++ b/src/pages/user/UserDetail.jsx
@@ -0,0 +1,151 @@
+import { Button, Col, Form, Input, message, Row } from "antd";
+import { useForm } from "antd/es/form/Form";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import axiosInstance from "../../api/axios";
+import { selectUserId } from "../../features/auth/authSlice";
+
+export default function UserDetail() {
+  const [form] = useForm();
+  const [showPassword, setShowPassword] = useState(false);
+  const [user, setUser] = useState({
+    username: "",
+    team: "",
+    name: "",
+    phone: "",
+  });
+  const userId = useSelector(selectUserId);
+
+  const fetchUser = async (userId) => {
+    const user = await axiosInstance.get(`/userdetail/${userId}`);
+    setUser(user);
+    form.setFieldsValue(user);
+  };
+
+  useEffect(() => {
+    fetchUser(userId);
+  }, []);
+
+  const handleReset = () => {
+    form.resetFields();
+  };
+
+  const handleSubmit = async (values) => {
+    if (values.password && values.password !== values.confirmPassword) {
+      message.error("两次输入的密码不一致");
+      return;
+    }
+    const changedFields = {};
+    for (const key in values) {
+      if (values[key] !== user[key] && values[key] !== undefined) {
+        changedFields[key] = values[key];
+      }
+    }
+    delete changedFields.confirmPassword;
+
+    const newUser = await axiosInstance.patch(`/user/${userId}`, changedFields);
+    setUser(newUser);
+    form.setFieldsValue(newUser);
+    message.success("修改成功");
+  };
+
+  return (
+    <div className="p-6">
+      <Form
+        requiredMark={false}
+        variant="borderless"
+        form={form}
+        initialValues={user}
+        onFinish={handleSubmit}
+      >
+        <Row gutter={16}>
+          <Col span={12}>
+            <Form.Item label="账号">
+              <Input disabled value={user.username} />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item label="所属团队">
+              <Input disabled value={user.team} />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Row gutter={16}>
+          <Col span={12}>
+            <Form.Item
+              name="name"
+              label="姓名"
+              rules={[{ required: true, message: "请输入姓名" }]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              name="phone"
+              label="联系电话"
+              rules={[{ required: true, message: "请输入联系电话" }]}
+            >
+              <Input value={user.phone} />
+            </Form.Item>
+          </Col>
+        </Row>
+        {showPassword && (
+          <>
+            <Row gutter={16}>
+              <Col span={12}>
+                <Form.Item
+                  name="password"
+                  label="新密码"
+                  rules={[{ required: true, message: "请输入新密码" }]}
+                >
+                  <Input.Password />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  name="confirmPassword"
+                  label="确认新密码"
+                  dependencies={["password"]}
+                  rules={[
+                    { required: true, message: "请再次输入新密码" },
+                    ({ getFieldValue }) => ({
+                      validator(_, value) {
+                        if (!value || getFieldValue("password") === value) {
+                          return Promise.resolve();
+                        }
+                        return Promise.reject(new Error("两次输入密码不一致"));
+                      },
+                    }),
+                  ]}
+                >
+                  <Input.Password />
+                </Form.Item>
+              </Col>
+            </Row>
+          </>
+        )}
+        <Row justify="center" gutter={8}>
+          <Col>
+            <Button
+              type="dashed"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {showPassword ? "取消修改密码" : "修改密码"}
+            </Button>
+          </Col>
+          <Col>
+            <Button onClick={handleReset}>重置修改</Button>
+          </Col>
+          <Col>
+            <Form.Item>
+              <Button type="primary" htmlType="submit">
+                保存修改
+              </Button>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </div>
+  );
+}
diff --git a/src/router/index.jsx b/src/router/index.jsx
index 13452d2..63e4435 100644
--- a/src/router/index.jsx
+++ b/src/router/index.jsx
@@ -4,6 +4,7 @@ import ProtectedRoute from "./ProtectedRoute";
 import CommonLayout from "../layouts/CommonLayout";
 import Reserve from "../pages/user/Reserve";
 import MyReservation from "../pages/user/MyReservation";
+import UserDetail from "../pages/user/UserDetail";
 
 const router = createBrowserRouter([
   {
@@ -30,6 +31,10 @@ const router = createBrowserRouter([
             path: "my-reservation",
             element: <MyReservation />,
           },
+          {
+            path: "userdetail",
+            element: <UserDetail />,
+          },
         ],
       },
     ],