Files
schisandra-cloud-storage-fr…/src/components/Main/User/MyShare/index.tsx
2024-07-24 00:59:28 +08:00

188 lines
5.2 KiB
TypeScript

/** @format */
import { ProCard } from "@ant-design/pro-components";
import { Avatar, Button, Empty, Flex, Input, List, Skeleton, Tag } from "antd";
import { useEffect, useState } from "react";
import styles from "./index.module.less";
import { Link, useNavigate } from "react-router-dom";
import { CommentOutlined, EyeOutlined, HeartOutlined } from "@ant-design/icons";
import { getMyShareList } from "@/api/share";
import useStore from "@/utils/store/useStore.tsx";
import { observer } from "mobx-react";
export default observer(() => {
const navigate = useNavigate();
const [loading, setLoading] = useState(true);
const [data, setData] = useState<[]>([]);
const store = useStore("user");
const userId: any = store.getUserId();
async function getMyShare() {
getMyShareList(userId).then((res: any) => {
if (res && res.success && res.data) {
setData(res.data);
setLoading(false);
}
});
}
useEffect(() => {
getMyShare().then();
}, []);
return (
<>
<div className={styles.share_list_main}>
<ProCard bordered={false} boxShadow={false}>
<div className={styles.share_list_header}>
<Flex
vertical={false}
align={"center"}
justify={"space-between"}
style={{ width: "100%" }}>
<div>
<Input
placeholder="搜索"
style={{ borderRadius: 20, width: 500, marginLeft: 20 }}
/>
</div>
<div>
<Button
type={"primary"}
onClick={() => {
navigate("/main/share/add");
}}>
</Button>
</div>
</Flex>
</div>
</ProCard>
<ProCard bordered={false} boxShadow={false}>
{data.length === 0 ? (
<Empty description={"暂无数据"}></Empty>
) : (
<>
<Skeleton loading={loading} active={true} paragraph={{ rows: 14 }}>
<List
dataSource={data}
header={
<>
<h4></h4>
</>
}
renderItem={(item: any) => (
<List.Item key={item.id}>
<List.Item.Meta
avatar={<Avatar src={item.icon} />}
title={
<Flex vertical={false} align={"center"}>
<Link to={"/main/share/detail/" + item.id}>
{item.title}
</Link>
{item.tags &&
Array.from(item.tags).map(
(tag: any, index: number) => {
return (
<Flex
vertical={false}
align={"center"}
key={index}>
<Tag
bordered={false}
color={
"#" + tag.color
}
style={{
marginLeft: 10,
}}>
{tag.tagName}
</Tag>
</Flex>
);
},
)}
</Flex>
}
description={
<>
<Flex
vertical={false}
justify={"space-between"}
align={"center"}>
{item.description}
<Flex
vertical={false}
align={"center"}
justify={"space-between"}
style={{ width: "300px" }}>
<Flex
vertical={false}
align={"center"}>
<Avatar
src={item.avatar as any}
size={"small"}
/>
<span
style={{
fontSize: 12,
color: "gray",
overflow: "hidden",
}}>
{item.nickname}
</span>
</Flex>
<Flex
vertical={false}
align={"center"}>
<HeartOutlined />
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.likesCount}
</span>
</Flex>
<Flex
vertical={false}
align={"center"}>
<CommentOutlined />
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.commentCount}
</span>
</Flex>
<Flex
vertical={false}
align={"center"}>
<EyeOutlined
style={{ color: "gray" }}
/>{" "}
<span
style={{
fontSize: 12,
color: "gray",
}}>
{item.views}
</span>
</Flex>
</Flex>
</Flex>
</>
}
/>
</List.Item>
)}
/>
</Skeleton>
</>
)}
</ProCard>
</div>
</>
);
});