feat: 用户设置页面
This commit is contained in:
landaiqing
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user