diff --git a/src/components/Empty/empty.svg b/src/components/Empty/empty.svg new file mode 100644 index 0000000..9ffcaae --- /dev/null +++ b/src/components/Empty/empty.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Empty/index.tsx b/src/components/Empty/index.tsx new file mode 100644 index 0000000..5e3f9ec --- /dev/null +++ b/src/components/Empty/index.tsx @@ -0,0 +1,11 @@ +import Empty from './empty.svg' + +export default () => { + return ( + <> +
+ 空空如也 +
+ + ) +} \ No newline at end of file diff --git a/src/pages/Work/index.tsx b/src/pages/Work/index.tsx index 96885d0..fdd2585 100644 --- a/src/pages/Work/index.tsx +++ b/src/pages/Work/index.tsx @@ -12,6 +12,7 @@ import link from './image/link.svg'; import dayjs from 'dayjs'; import RandomAvatar from "@/components/RandomAvatar"; +import Empty from "@/components/Empty"; type Menu = "comment" | "link" | "wall"; @@ -78,7 +79,7 @@ const ListItem = ({ item, type, handleApproval, handleRejection }: ListItemProps const WorkPage = () => { const activeSty = "bg-[#f9f9ff] text-primary"; - const [active, setActive] = useState("link"); + const [active, setActive] = useState("comment"); const [commentList, setCommentList] = useState([]); const [linkList, setLinkList] = useState([]); const [wallList, setWallList] = useState([]); @@ -128,6 +129,15 @@ const WorkPage = () => { fetchData(type); }; + const renderList = (list: any[], type: Menu) => { + if (list.length === 0) { + return ; + } + return list.map(item => ( + + )); + }; + return ( <> @@ -147,16 +157,11 @@ const WorkPage = () => { ))} </ul> </div> + <div className="w-10/12 pl-6 py-4 space-y-10"> - {active === "link" && linkList.map(item => ( - <ListItem key={item.id} item={item} type="link" handleApproval={handleApproval} handleRejection={handleRejection} /> - ))} - {active === "comment" && commentList.map(item => ( - <ListItem key={item.id} item={item} type="comment" handleApproval={handleApproval} handleRejection={handleRejection} /> - ))} - {active === "wall" && wallList.map(item => ( - <ListItem key={item.id} item={item} type="wall" handleApproval={handleApproval} handleRejection={handleRejection} /> - ))} + {active === "link" && renderList(linkList, "link")} + {active === "comment" && renderList(commentList, "comment")} + {active === "wall" && renderList(wallList, "wall")} </div> </div> </Card> @@ -164,4 +169,4 @@ const WorkPage = () => { ); } -export default WorkPage; +export default WorkPage; \ No newline at end of file