feat: 用户设置页面

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

@@ -1,6 +1,6 @@
 /** @format */
-import { FunctionComponent } from "react";
-import { Avatar, Card, Empty, List } from "antd";
+import { FunctionComponent, useEffect, useState } from "react";
+import { Avatar, Card, Empty, List, Skeleton } from "antd";
 import {
 	AntDesignOutlined,
 	BankOutlined,
@@ -14,6 +14,7 @@ import gitee from "@/assets/icons/gitee.svg";
 import { Link } from "react-router-dom";
 
 const UserInfo: FunctionComponent = () => {
+	const [loading, setLoading] = useState(true);
 	const data = [
 		{
 			title: "Ant Design Title 1",
@@ -28,6 +29,11 @@ const UserInfo: FunctionComponent = () => {
 			title: "Ant Design Title 4",
 		},
 	];
+	useEffect(() => {
+		setTimeout(() => {
+			setLoading(false);
+		}, 2000);
+	}, []);
 	return (
 		<>
 			<div className={styles.user_info_header}>
@@ -57,24 +63,29 @@ const UserInfo: FunctionComponent = () => {
 					title="我的存储商"
 					boxShadow
 					extra={<Link to={"#"}>查看更多</Link>}>
-					<Card style={{ width: 300, marginTop: 16 }} hoverable={true}>
-						<Meta
-							avatar={<Avatar src={gitee} />}
-							title="Card title"
-							description="This is the description"
-						/>
-					</Card>
+					<Skeleton loading={loading} active>
+						<Card style={{ width: 300, marginTop: 16 }} hoverable={true}>
+							<Meta
+								avatar={<Avatar src={gitee} />}
+								title="Card title"
+								description="This is the description"
+							/>
+						</Card>
+					</Skeleton>
 				</ProCard>
+
 				<ProCard bordered style={{ maxWidth: "34%" }} title="我的存储桶" boxShadow>
-					<Card style={{ width: 300, marginTop: 16 }} hoverable={true}>
-						<Meta
-							avatar={
-								<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
-							}
-							title="Card title"
-							description="This is the description"
-						/>
-					</Card>
+					<Skeleton loading={loading} active>
+						<Card style={{ width: 300, marginTop: 16 }} hoverable={true}>
+							<Meta
+								avatar={
+									<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
+								}
+								title="Card title"
+								description="This is the description"
+							/>
+						</Card>
+					</Skeleton>
 				</ProCard>
 			</div>
 			<div className={styles.user_info_bottom_content}>
@@ -84,23 +95,25 @@ const UserInfo: FunctionComponent = () => {
 					title="最近动态"
 					boxShadow
 					extra={<Link to={"#"}>查看更多</Link>}>
-					<List
-						itemLayout="horizontal"
-						dataSource={data}
-						renderItem={(item, index) => (
-							<List.Item>
-								<List.Item.Meta
-									avatar={
-										<Avatar
-											src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
-										/>
-									}
-									title={<a href="https://ant.design">{item.title}</a>}
-									description="Ant Design, a design language for background applications, is refined by Ant UED Team"
-								/>
-							</List.Item>
-						)}
-					/>
+					<Skeleton loading={loading} active avatar>
+						<List
+							itemLayout="horizontal"
+							dataSource={data}
+							renderItem={(item, index) => (
+								<List.Item>
+									<List.Item.Meta
+										avatar={
+											<Avatar
+												src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`}
+											/>
+										}
+										title={<a href="https://ant.design">{item.title}</a>}
+										description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+									/>
+								</List.Item>
+							)}
+						/>
+					</Skeleton>
 				</ProCard>
 				<ProCard bordered style={{ maxWidth: "34%" }} title="站内通知" boxShadow>
 					<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>

src/components/Main/User/UserSetting/index.module.less

@@ -11,3 +11,4 @@
 	justify-content: flex-start;
 	align-items: center;
 }
+

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

@@ -1,11 +1,27 @@
 /** @format */
-import { FunctionComponent } from "react";
-import { ProCard } from "@ant-design/pro-components";
+import { FunctionComponent, useEffect, useState } from "react";
+import { ProCard, ProFormCascader } from "@ant-design/pro-components";
 import { AntDesignOutlined } from "@ant-design/icons";
-import { Avatar, Descriptions, DescriptionsProps, Tabs } from "antd";
+import {
+	Avatar,
+	Button,
+	Descriptions,
+	DescriptionsProps,
+	Form,
+	FormProps,
+	Input,
+	Select,
+	Skeleton,
+	Space,
+	Tabs,
+} from "antd";
 import styles from "./index.module.less";
+import TextArea from "antd/es/input/TextArea";
+import { city } from "@/context/five-level-address.ts";
 
 const UserSetting: FunctionComponent = () => {
+	const [disable, setDisable] = useState(true);
+	const [loading, setLoading] = useState(true);
 	const items: DescriptionsProps["items"] = [
 		{
 			key: "1",
@@ -33,45 +49,193 @@ const UserSetting: FunctionComponent = () => {
 			children: "13333333333333",
 		},
 	];
+	type FieldType = {
+		email?: string;
+		nickname?: string;
+		location?: string;
+		introduce?: string;
+		gender?: string;
+		company?: string;
+		blog?: string;
+	};
+	const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
+		console.log("Success:", values);
+	};
 
+	const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
+		console.log("Failed:", errorInfo);
+	};
+
+	const prefixSelector = (
+		<Form.Item name="prefix" noStyle>
+			<Select style={{ width: 90 }} defaultValue={"https://"}>
+				<Select.Option value="https://">https://</Select.Option>
+				<Select.Option value="http://">http://</Select.Option>
+			</Select>
+		</Form.Item>
+	);
+	useEffect(() => {
+		setTimeout(() => {
+			setLoading(false);
+		}, 2000);
+	}, []);
 	const TabItems = [
 		{
 			label: <span>基础信息</span>,
 			key: "baseInfo",
 			children: (
-				<div>
-					11111111111111111111111111111111111111111111111111111111111111111111111111111111
-				</div>
+				<>
+					<Skeleton loading={loading} active>
+						<div>
+							<Form
+								name="basic"
+								labelCol={{ span: 3 }}
+								wrapperCol={{ span: 16 }}
+								style={{ maxWidth: 600 }}
+								onFinish={onFinish}
+								onFinishFailed={onFinishFailed}
+								autoComplete="off">
+								<Form.Item<FieldType>
+									label="邮箱"
+									name="email"
+									rules={[
+										{
+											type: "email",
+											message: "请输入正确的邮箱！",
+										},
+										{ required: true, message: "请输入邮箱!" },
+									]}>
+									<Input allowClear disabled={disable} />
+								</Form.Item>
+								<Form.Item<FieldType>
+									label="昵称"
+									name="nickname"
+									rules={[
+										{
+											type: "string",
+											message:
+												"用户名只能是3到16位（字母，数字，下划线，减号）！",
+											pattern: /^[a-zA-Z0-9_-]{3,16}$/,
+										},
+										{
+											required: true,
+											message: "请输入昵称!",
+										},
+									]}>
+									<Input allowClear disabled={disable} />
+								</Form.Item>
+								<Form.Item<FieldType>
+									label="性别"
+									name="gender"
+									rules={[{ required: true, message: "请输入性别!" }]}>
+									<Select disabled={disable}>
+										<Select.Option value="男">男</Select.Option>
+										<Select.Option value="女">女</Select.Option>
+										<Select.Option value="UNKNOWN">隐私</Select.Option>
+									</Select>
+								</Form.Item>
+								<Form.Item<FieldType>
+									label="地区"
+									name="location"
+									rules={[{ required: true, message: "请输入地区!" }]}>
+									<ProFormCascader
+										request={async () => city}
+										width="md"
+										name="location"
+										disabled={disable}></ProFormCascader>
+								</Form.Item>
+								<Form.Item<FieldType> label="公司" name="company">
+									<Input allowClear disabled={disable} />
+								</Form.Item>
+								<Form.Item<FieldType> label="博客" name="blog">
+									<Input
+										addonBefore={prefixSelector}
+										allowClear
+										disabled={disable}
+									/>
+								</Form.Item>
+								<Form.Item<FieldType> label="个人简介" name="introduce">
+									<TextArea
+										rows={4}
+										allowClear
+										maxLength={200}
+										showCount
+										placeholder="请输入您的个人简介，最多不超过200字。"
+										disabled={disable}
+									/>
+								</Form.Item>
+								<Form.Item wrapperCol={{ offset: 3, span: 16 }}>
+									<Space
+										style={{
+											display: "flex",
+											flexDirection: "row",
+											justifyContent: "space-between",
+											width: "400px",
+										}}>
+										<Button
+											htmlType="button"
+											onClick={() => {
+												setDisable(!disable);
+											}}>
+											修改
+										</Button>
+										<Button type="primary" htmlType="submit" disabled={disable}>
+											保存
+										</Button>
+									</Space>
+								</Form.Item>
+							</Form>
+						</div>
+					</Skeleton>
+				</>
 			),
 		},
 		{
 			label: <span>安全设置</span>,
 			key: "security",
+			children: (
+				<>
+					<Skeleton loading={loading} active>
+						<Space direction={"vertical"} style={{ width: "100%" }}>
+							<ProCard hoverable bordered>
+								登录密码：
+							</ProCard>
+							<ProCard hoverable bordered>
+								安全手机：
+							</ProCard>
+							<ProCard hoverable bordered>
+								安全邮箱：
+							</ProCard>
+						</Space>
+					</Skeleton>
+				</>
+			),
 		},
 	];
-	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 />}
-						/>
+					<Skeleton loading={loading} active avatar>
+						<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>
+							<Descriptions
+								style={{ width: "80%", marginLeft: "50px" }}
+								items={items}
+								column={3}
+								size={"small"}></Descriptions>
+						</div>
+					</Skeleton>
 				</ProCard>
+
 				<div className={styles.user_setting_content}>
 					<ProCard boxShadow>
-						<Tabs onChange={onChange} type="card" items={TabItems}></Tabs>
+						<Tabs type="card" items={TabItems}></Tabs>
 					</ProCard>
 				</div>
 			</div>