完成系统配置布局

src/pages/Setup/components/Layout/index.tsx

@@ -68,8 +68,8 @@ const LayoutPage = () => {
     return (
         <div>
             <Spin spinning={loading} indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}>
-                <h2 className="text-center my-4">布局配置</h2>
-                
+                <h2 className="text-xl pb-4 text-center">布局配置</h2>
+
                 <Divider orientation="left">首页背景图</Divider>
                 <div className="mb-8">
                     <Input

src/pages/Setup/components/My/index.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from "react";
+import { Form, Input, Button, notification } from "antd";
+import { useUserStore } from "@/stores"; // 假设你有一个状态管理库类似于pinia
+import { editUserDataAPI, getUserDataAPI } from "@/api/User";
+
+interface UserInfo {
+    name: string;
+    email: string;
+    avatar: string;
+    info: string;
+}
+
+const UserPage = () => {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [form] = Form.useForm<UserInfo>();
+    const store = useUserStore();
+
+    useEffect(() => {
+        const fetchUserInfo = async () => {
+            setLoading(true);
+            const { data } = await getUserDataAPI(store.user?.id);
+            form.setFieldsValue(data);
+            setLoading(false);
+        };
+        fetchUserInfo();
+    }, [store.user?.id, form]);
+
+    const onFinish = async (values: UserInfo) => {
+        await editUserDataAPI(values);
+        notification.success({
+            message: '成功',
+            description: "🎉修改用户信息成功",
+        });
+        store.setUser(values); // 假设你有一个setUser方法
+        setLoading(false);
+    };
+
+    return (
+        <div>
+            <h2 className="text-xl pb-4 text-center">个人设置</h2>
+
+            <Form
+                form={form}
+                size="large"
+                layout="vertical"
+                onFinish={onFinish}
+                className="w-5/12 mx-auto"
+            >
+                <Form.Item
+                    label="名称"
+                    name="name"
+                    rules={[{ required: true, message: "名称不能为空" }]}
+                >
+                    <Input placeholder="宇阳" />
+                </Form.Item>
+
+                <Form.Item
+                    label="邮箱"
+                    name="email"
+                    rules={[{ required: true, message: "邮箱不能为空" }]}
+                >
+                    <Input placeholder="liuyuyang1024@yeah.net" />
+                </Form.Item>
+
+                <Form.Item
+                    label="头像"
+                    name="avatar"
+                    rules={[{ required: true, message: "头像不能为空" }]}
+                >
+                    <Input placeholder="https://liuyuyang.net/logo.png" />
+                </Form.Item>
+
+                <Form.Item
+                    label="介绍"
+                    name="info"
+                    rules={[{ required: true, message: "介绍不能为空" }]}
+                >
+                    <Input placeholder="互联网从不缺乏天才, 而努力才是最终的入场劵" />
+                </Form.Item>
+
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" className="w-full" loading={loading}>
+                        编辑信息
+                    </Button>
+                </Form.Item>
+            </Form>
+        </div>
+    );
+};
+
+export default UserPage;

src/pages/Setup/components/System/index.tsx

@@ -54,7 +54,7 @@ const SystemPage = () => {
 
     return (
         <div>
-            <h2 className="title flex justify-center my-2 border-b-0">系统配置</h2>
+            <h2 className="text-xl pb-4 text-center">系统配置</h2>
 
             <Form
                 form={form}

src/pages/Setup/components/Web/index.tsx

@@ -48,7 +48,7 @@ const WebPage = () => {
 
     return (
         <div>
-            <h2 className="title flex justify-center my-2 border-b-0">网站配置</h2>
+            <h2 className="text-xl pb-4 text-center">网站配置</h2>
 
             <Form
                 form={form}

src/pages/Setup/index.tsx

@@ -5,6 +5,7 @@ import { BiGlobe, BiLayout, BiShieldQuarter, BiUser } from 'react-icons/bi';
 import System from './components/System'
 import Web from './components/Web'
 import Layout from './components/Layout'
+import My from './components/My'
 import "./index.scss"
 
 interface Setup {
@@ -71,7 +72,7 @@ const SetupPage = () => {
                         {active === "system" && <System />}
                         {active === "web" && <Web />}
                         {active === "layout" && <Layout />}
-                        {/* {active === "my" && <My />} */}
+                        {active === "my" && <My />}
                     </div>
                 </div>
             </Card>