feat: 添加我的分享页面
This commit is contained in:
BIN
src/assets/images/myshare.png
Normal file
BIN
src/assets/images/myshare.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
@@ -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;
|
|
0
src/components/Main/User/MyShare/index.module.less
Normal file
0
src/components/Main/User/MyShare/index.module.less
Normal file
132
src/components/Main/User/MyShare/index.tsx
Normal file
132
src/components/Main/User/MyShare/index.tsx
Normal 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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
11
src/router/modules/main/user/myShare/index.ts
Normal file
11
src/router/modules/main/user/myShare/index.ts
Normal 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;
|
@@ -13,8 +13,8 @@ import Home from "@/router/modules/home";
|
|||||||
import MainHome from "@/router/modules/main/home";
|
import MainHome from "@/router/modules/main/home";
|
||||||
import MainBucket from "@/router/modules/main/bucket";
|
import MainBucket from "@/router/modules/main/bucket";
|
||||||
import MainFile from "@/router/modules/main/file";
|
import MainFile from "@/router/modules/main/file";
|
||||||
import MainUserInfo from "@/router/modules/main/userInfo";
|
import MainUserInfo from "@/router/modules/main/user/userInfo";
|
||||||
import MainUserSetting from "@/router/modules/main/userSetting";
|
import MainUserSetting from "@/router/modules/main/user/userSetting";
|
||||||
import MainShare from "@/router/modules/main/share";
|
import MainShare from "@/router/modules/main/share";
|
||||||
import MainSetting from "@/router/modules/main/settings";
|
import MainSetting from "@/router/modules/main/settings";
|
||||||
import Ali from "@/router/modules/main/settings/ali/ali.ts";
|
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 upBucket from "@/router/modules/main/bucket/createBuckets/up.ts";
|
||||||
import wangyiBucket from "@/router/modules/main/bucket/createBuckets/wangyi.ts";
|
import wangyiBucket from "@/router/modules/main/bucket/createBuckets/wangyi.ts";
|
||||||
import ShareAdd from "@/router/modules/main/share/modules/shareAdd.tsx";
|
import ShareAdd from "@/router/modules/main/share/modules/shareAdd.tsx";
|
||||||
|
import MyShare from "@/router/modules/main/user/myShare";
|
||||||
|
|
||||||
const routes: RouteObject[] = [
|
const routes: RouteObject[] = [
|
||||||
{
|
{
|
||||||
@@ -144,6 +145,10 @@ const routes: RouteObject[] = [
|
|||||||
path: "/main/file",
|
path: "/main/file",
|
||||||
Component: MainFile,
|
Component: MainFile,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/main/file/:bucket",
|
||||||
|
Component: MainFile,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/main/user/info",
|
path: "/main/user/info",
|
||||||
Component: MainUserInfo,
|
Component: MainUserInfo,
|
||||||
@@ -152,6 +157,10 @@ const routes: RouteObject[] = [
|
|||||||
path: "/main/user/setting",
|
path: "/main/user/setting",
|
||||||
Component: MainUserSetting,
|
Component: MainUserSetting,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/main/user/myshare",
|
||||||
|
Component: MyShare,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/main/share",
|
path: "/main/share",
|
||||||
Component: MainShare,
|
Component: MainShare,
|
||||||
|
@@ -68,6 +68,11 @@ export default {
|
|||||||
name: "用户设置",
|
name: "用户设置",
|
||||||
icon: "https://pic.imgdb.cn/item/668b921ad9c307b7e99f35b2.png",
|
icon: "https://pic.imgdb.cn/item/668b921ad9c307b7e99f35b2.png",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "main/user/myshare",
|
||||||
|
name: "我的分享",
|
||||||
|
icon: "https://pic.imgdb.cn/item/668f8e5fd9c307b7e9f079bf.png",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
Reference in New Issue
Block a user