schisandra-cloud-storage-front-react/src/components/Main/User/UserSetting/index.tsx

/** @format */
import { FunctionComponent, useEffect, useState } from "react";
import { ProCard, ProForm, ProFormCascader } from "@ant-design/pro-components";
import { AntDesignOutlined } from "@ant-design/icons";
import {
	Avatar,
	Button,
	Descriptions,
	DescriptionsProps,
	Flex,
	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",
			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",
		},
	];
	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 }}>
				<Select.Option value="https://">https://</Select.Option>
				<Select.Option value="http://">http://</Select.Option>
			</Select>
		</Form.Item>
	);
	const ProFormText = (props: any) => {
		return (
			<ProForm.Item {...props} style={{ height: "10px" }}>
				<ProFormCascader
					request={async () => city}
					width="md"
					name="location"
					disabled={disable}></ProFormCascader>
			</ProForm.Item>
		);
	};
	useEffect(() => {
		setTimeout(() => {
			setLoading(false);
		}, 2000);
	}, []);
	const TabItems = [
		{
			label: <span>基础信息</span>,
			key: "baseInfo",
			children: (
				<>
					<Skeleton loading={loading} active>
						<div>
							<Form
								name="basic"
								labelCol={{ span: 3 }}
								wrapperCol={{ span: 16 }}
								style={{ maxWidth: 600 }}
								onFinish={onFinish}
								onFinishFailed={onFinishFailed}
								initialValues={{ prefix: "https://" }}
								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: "请输入地区!" }]}>
									<ProFormText />
								</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>
								<Flex vertical={false} align={"center"} justify={"space-between"}>
									<span style={{ width: 80 }}>登录密码：</span>
									<Input variant="borderless" value={"******************"} />
								</Flex>
							</ProCard>
							<ProCard hoverable bordered>
								安全手机：1333333333333333
							</ProCard>
							<ProCard hoverable bordered>
								安全邮箱：landaiqing@126.com
							</ProCard>
						</Space>
					</Skeleton>
				</>
			),
		},
	];

	return (
		<>
			<div className={styles.user_setting_main}>
				<ProCard boxShadow>
					<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>
					</Skeleton>
				</ProCard>

				<div className={styles.user_setting_content}>
					<ProCard boxShadow>
						<Tabs type="card" items={TabItems}></Tabs>
					</ProCard>
				</div>
			</div>
		</>
	);
};
export default UserSetting;