126 lines
3.3 KiB
TypeScript
126 lines
3.3 KiB
TypeScript
/** @format */
|
|
import { FunctionComponent, useEffect, useState } from "react";
|
|
import { Avatar, Card, Empty, List, Skeleton } from "antd";
|
|
import {
|
|
AntDesignOutlined,
|
|
BankOutlined,
|
|
BulbOutlined,
|
|
EnvironmentOutlined,
|
|
} from "@ant-design/icons";
|
|
import styles from "./index.module.less";
|
|
import { ProCard } from "@ant-design/pro-components";
|
|
import Meta from "antd/es/card/Meta";
|
|
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",
|
|
},
|
|
{
|
|
title: "Ant Design Title 2",
|
|
},
|
|
{
|
|
title: "Ant Design Title 3",
|
|
},
|
|
{
|
|
title: "Ant Design Title 4",
|
|
},
|
|
];
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 2000);
|
|
}, []);
|
|
return (
|
|
<>
|
|
<div className={styles.user_info_header}>
|
|
<div className={styles.user_info_header_avatar}>
|
|
<Avatar
|
|
size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
|
|
icon={<AntDesignOutlined />}
|
|
/>
|
|
<span className={styles.user_info_header_name}>用户名</span>
|
|
<div className={styles.user_info_header_desc}>
|
|
<div>
|
|
<BulbOutlined /> 前端架构师
|
|
</div>
|
|
<div>
|
|
<EnvironmentOutlined /> 成都
|
|
</div>
|
|
<div>
|
|
<BankOutlined /> 成都市上城
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.user_info_center_content}>
|
|
<ProCard
|
|
bordered
|
|
style={{ maxWidth: "64%" }}
|
|
title="我的存储商"
|
|
boxShadow
|
|
extra={<Link to={"#"}>查看更多</Link>}>
|
|
<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>
|
|
<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}>
|
|
<ProCard
|
|
bordered
|
|
style={{ maxWidth: "64%" }}
|
|
title="最近动态"
|
|
boxShadow
|
|
extra={<Link to={"#"}>查看更多</Link>}>
|
|
<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>
|
|
</ProCard>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
export default UserInfo;
|