feat: 用户信息页面

src/components/Main/User/UserSetting/index.tsx

@@ -0,0 +1,81 @@
+/** @format */
+import { FunctionComponent } from "react";
+import { ProCard } from "@ant-design/pro-components";
+import { AntDesignOutlined } from "@ant-design/icons";
+import { Avatar, Descriptions, DescriptionsProps, Tabs } from "antd";
+import styles from "./index.module.less";
+
+const UserSetting: FunctionComponent = () => {
+	const items: DescriptionsProps["items"] = [
+		{
+			key: "1",
+			label: "用户名",
+			children: "Zhou Maomao",
+		},
+		{
+			key: "2",
+			label: "账号ID",
+			children: "1810000000",
+		},
+		{
+			key: "3",
+			label: "注册时间",
+			children: "Hangzhou, Zhejiang",
+		},
+		{
+			key: "4",
+			label: "邮箱",
+			children: "landaiqing@126.com",
+		},
+		{
+			key: "5",
+			label: "手机号",
+			children: "13333333333333",
+		},
+	];
+
+	const TabItems = [
+		{
+			label: <span>基础信息</span>,
+			key: "baseInfo",
+			children: (
+				<div>
+					11111111111111111111111111111111111111111111111111111111111111111111111111111111
+				</div>
+			),
+		},
+		{
+			label: <span>安全设置</span>,
+			key: "security",
+		},
+	];
+	const onChange = (key: string) => {
+		console.log(key);
+	};
+	return (
+		<>
+			<div className={styles.user_setting_main}>
+				<ProCard boxShadow>
+					<div className={styles.user_setting_header}>
+						<Avatar
+							size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
+							icon={<AntDesignOutlined />}
+						/>
+
+						<Descriptions
+							style={{ width: "80%", marginLeft: "50px" }}
+							items={items}
+							column={3}
+							size={"small"}></Descriptions>
+					</div>
+				</ProCard>
+				<div className={styles.user_setting_content}>
+					<ProCard boxShadow>
+						<Tabs onChange={onChange} type="card" items={TabItems}></Tabs>
+					</ProCard>
+				</div>
+			</div>
+		</>
+	);
+};
+export default UserSetting;