feat: 添加我的分享页面

This commit is contained in:
landaiqing
2024-07-11 16:43:56 +08:00
parent b7a16c3c59
commit 36625c10c6
10 changed files with 753 additions and 620 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@@ -1,24 +0,0 @@
/** @format */
import { Tree, TreeDataNode } from "antd";
import React from "react";
const { DirectoryTree } = Tree;
interface FileDirectoryTreeProps {
treeData: TreeDataNode[];
}
const FileDirectoryTree: React.FC<FileDirectoryTreeProps> = (props: any) => {
return (
<DirectoryTree
style={{ width: "20%", fontSize: "20px" }}
multiple={false}
defaultExpandAll
treeData={props.treeData}
blockNode={true}
showIcon={true}
{...props}
/>
);
};
export default FileDirectoryTree;

View File

@@ -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>
</>
);
};

View File

@@ -0,0 +1,11 @@
/** @format */
import { lazy } from "react";
const MyShare = lazy(
() =>
new Promise((resolve: any) => {
resolve(import("@/components/Main/User/MyShare/index.tsx"));
}),
);
export default MyShare;

View File

@@ -13,8 +13,8 @@ import Home from "@/router/modules/home";
import MainHome from "@/router/modules/main/home";
import MainBucket from "@/router/modules/main/bucket";
import MainFile from "@/router/modules/main/file";
import MainUserInfo from "@/router/modules/main/userInfo";
import MainUserSetting from "@/router/modules/main/userSetting";
import MainUserInfo from "@/router/modules/main/user/userInfo";
import MainUserSetting from "@/router/modules/main/user/userSetting";
import MainShare from "@/router/modules/main/share";
import MainSetting from "@/router/modules/main/settings";
import Ali from "@/router/modules/main/settings/ali/ali.ts";
@@ -47,6 +47,7 @@ import ucloudBucket from "@/router/modules/main/bucket/createBuckets/ucloud.ts";
import upBucket from "@/router/modules/main/bucket/createBuckets/up.ts";
import wangyiBucket from "@/router/modules/main/bucket/createBuckets/wangyi.ts";
import ShareAdd from "@/router/modules/main/share/modules/shareAdd.tsx";
import MyShare from "@/router/modules/main/user/myShare";
const routes: RouteObject[] = [
{
@@ -144,6 +145,10 @@ const routes: RouteObject[] = [
path: "/main/file",
Component: MainFile,
},
{
path: "/main/file/:bucket",
Component: MainFile,
},
{
path: "/main/user/info",
Component: MainUserInfo,
@@ -152,6 +157,10 @@ const routes: RouteObject[] = [
path: "/main/user/setting",
Component: MainUserSetting,
},
{
path: "/main/user/myshare",
Component: MyShare,
},
{
path: "/main/share",
Component: MainShare,

View File

@@ -68,6 +68,11 @@ export default {
name: "用户设置",
icon: "https://pic.imgdb.cn/item/668b921ad9c307b7e99f35b2.png",
},
{
path: "main/user/myshare",
name: "我的分享",
icon: "https://pic.imgdb.cn/item/668f8e5fd9c307b7e9f079bf.png",
},
],
},
],