diff --git a/src/assets/icons/bucket.svg b/src/assets/icons/bucket.svg new file mode 100644 index 0000000..1e9ab2d --- /dev/null +++ b/src/assets/icons/bucket.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/dashboard.svg b/src/assets/icons/dashboard.svg new file mode 100644 index 0000000..0e58dcf --- /dev/null +++ b/src/assets/icons/dashboard.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/file.svg b/src/assets/icons/file.svg new file mode 100644 index 0000000..20fc569 --- /dev/null +++ b/src/assets/icons/file.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/share.svg b/src/assets/icons/share.svg new file mode 100644 index 0000000..45e049e --- /dev/null +++ b/src/assets/icons/share.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg new file mode 100644 index 0000000..e6a3f32 --- /dev/null +++ b/src/assets/icons/user.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/userInfo.svg b/src/assets/icons/userInfo.svg new file mode 100644 index 0000000..069f1fb --- /dev/null +++ b/src/assets/icons/userInfo.svg @@ -0,0 +1 @@ + diff --git a/src/assets/styles/index.less b/src/assets/styles/index.less index 42afcde..b6517be 100644 --- a/src/assets/styles/index.less +++ b/src/assets/styles/index.less @@ -28,6 +28,6 @@ } body { - background-image: url("@/assets/images/background.png") ; + background-image: url("@/assets/images/background.png"); background-size: cover; } diff --git a/src/components/Main/User/UserInfo/index.tsx b/src/components/Main/User/UserInfo/index.tsx index 245a30b..607c9f2 100644 --- a/src/components/Main/User/UserInfo/index.tsx +++ b/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 ( <>
@@ -57,24 +63,29 @@ const UserInfo: FunctionComponent = () => { title="我的存储商" boxShadow extra={查看更多}> - - } - title="Card title" - description="This is the description" - /> - + + + } + title="Card title" + description="This is the description" + /> + + + - - - } - title="Card title" - description="This is the description" - /> - + + + + } + title="Card title" + description="This is the description" + /> + +
@@ -84,23 +95,25 @@ const UserInfo: FunctionComponent = () => { title="最近动态" boxShadow extra={查看更多}> - ( - - - } - title={{item.title}} - description="Ant Design, a design language for background applications, is refined by Ant UED Team" - /> - - )} - /> + + ( + + + } + title={{item.title}} + description="Ant Design, a design language for background applications, is refined by Ant UED Team" + /> + + )} + /> + diff --git a/src/components/Main/User/UserSetting/index.module.less b/src/components/Main/User/UserSetting/index.module.less index 125447d..d0d5aba 100644 --- a/src/components/Main/User/UserSetting/index.module.less +++ b/src/components/Main/User/UserSetting/index.module.less @@ -11,3 +11,4 @@ justify-content: flex-start; align-items: center; } + diff --git a/src/components/Main/User/UserSetting/index.tsx b/src/components/Main/User/UserSetting/index.tsx index d22462b..62e5098 100644 --- a/src/components/Main/User/UserSetting/index.tsx +++ b/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["onFinish"] = (values) => { + console.log("Success:", values); + }; + const onFinishFailed: FormProps["onFinishFailed"] = (errorInfo) => { + console.log("Failed:", errorInfo); + }; + + const prefixSelector = ( + + + + ); + useEffect(() => { + setTimeout(() => { + setLoading(false); + }, 2000); + }, []); const TabItems = [ { label: 基础信息, key: "baseInfo", children: ( -
- 11111111111111111111111111111111111111111111111111111111111111111111111111111111 -
+ <> + +
+
+ + label="邮箱" + name="email" + rules={[ + { + type: "email", + message: "请输入正确的邮箱！", + }, + { required: true, message: "请输入邮箱!" }, + ]}> + + + + label="昵称" + name="nickname" + rules={[ + { + type: "string", + message: + "用户名只能是3到16位（字母，数字，下划线，减号）！", + pattern: /^[a-zA-Z0-9_-]{3,16}$/, + }, + { + required: true, + message: "请输入昵称!", + }, + ]}> + + + + label="性别" + name="gender" + rules={[{ required: true, message: "请输入性别!" }]}> + + + + label="地区" + name="location" + rules={[{ required: true, message: "请输入地区!" }]}> + city} + width="md" + name="location" + disabled={disable}> + + label="公司" name="company"> + + + label="博客" name="blog"> + + + label="个人简介" name="introduce"> +