feat: 添加我的分享页面

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

@@ -0,0 +1,132 @@
+/** @format */
+
+import { ProCard } from "@ant-design/pro-components";
+import { Avatar, Divider, Flex, List, Skeleton, Tag } from "antd";
+import { useEffect, useState } from "react";
+import styles from "./index.module.less";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useNavigate } from "react-router-dom";
+import { CommentOutlined, EyeOutlined, HeartOutlined } from "@ant-design/icons";
+import logo from "@/assets/icons/aliyun.svg";
+interface DataType {
+	gender: string;
+	name: {
+		title: string;
+		first: string;
+		last: string;
+	};
+	email: string;
+	picture: {
+		large: string;
+		medium: string;
+		thumbnail: string;
+	};
+	nat: string;
+}
+
+export default () => {
+	const navigate = useNavigate();
+	const [loading, setLoading] = useState(false);
+	const [data, setData] = useState<DataType[]>([]);
+	const loadMoreData = () => {
+		if (loading) {
+			return;
+		}
+		setLoading(true);
+		fetch("https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo")
+			.then((res) => res.json())
+			.then((body) => {
+				setData([...data, ...body.results]);
+				setLoading(false);
+			})
+			.catch(() => {
+				setLoading(false);
+			});
+	};
+
+	useEffect(() => {
+		loadMoreData();
+	}, []);
+	return (
+		<>
+			<div className={styles.share_list_main}>
+				<ProCard bordered={true} boxShadow={true}>
+					<InfiniteScroll
+						dataLength={data.length}
+						next={loadMoreData}
+						hasMore={data.length < 50}
+						loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
+						endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
+						scrollableTarget="scrollableDiv">
+						<List
+							dataSource={data}
+							renderItem={(item) => (
+								<List.Item key={item.email}>
+									<List.Item.Meta
+										avatar={<Avatar src={item.picture.large} />}
+										title={
+											<>
+												<a
+													onClick={() => {
+														navigate("/main/share/detail/1");
+													}}>
+													{item.name.last}
+												</a>
+												<Tag
+													bordered={false}
+													color="processing"
+													style={{ marginLeft: 10 }}>
+													IDM
+												</Tag>
+											</>
+										}
+										description={
+											<>
+												<Flex
+													vertical={false}
+													justify={"space-between"}
+													align={"center"}>
+													{item.email}
+													<Flex
+														vertical={false}
+														align={"center"}
+														justify={"space-between"}
+														style={{ width: "250px" }}>
+														<Avatar src={logo} size={"small"} />
+														<span
+															style={{
+																fontSize: 12,
+																color: "gray",
+															}}>
+															landaiqing
+														</span>
+														<HeartOutlined />
+														<span
+															style={{ fontSize: 12, color: "gray" }}>
+															1024
+														</span>
+														<CommentOutlined />
+														<span
+															style={{ fontSize: 12, color: "gray" }}>
+															1024
+														</span>
+														<EyeOutlined style={{ color: "gray" }} />{" "}
+														<span
+															style={{ fontSize: 12, color: "gray" }}>
+															1024
+														</span>
+													</Flex>
+												</Flex>
+											</>
+										}
+									/>
+									{/*<div>Content</div>*/}
+								</List.Item>
+							)}
+						/>
+					</InfiniteScroll>
+				</ProCard>
+			</div>
+		</>
+	);
+};