diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.scss index 4b59fe2..c8df8f6 100644 --- a/src/assets/css/pages/tools/index.scss +++ b/src/assets/css/pages/tools/index.scss @@ -56,6 +56,29 @@ font-size: 1.6em; } } + + .load-more-card { + width: 100%; + height: 100%; + text-align: center; + align-items: center; + cursor: pointer; + + .icon { + display: flex; + font-size: constants.$SIZE_ICON_XXL; + color: constants.$production-color; + align-items: center; + transform: translateY(-20px); + } + + .text { + position: absolute; + top: 60%; + font-size: 1.2em; + font-weight: bolder; + } + } } diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx index 09f9176..2733c31 100644 --- a/src/pages/Tools/index.tsx +++ b/src/pages/Tools/index.tsx @@ -300,11 +300,43 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr ) } +interface LoadMoreCardProps { + onClick: () => void +} + +const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => { + const cardRef = useRef(null) + + useEffect(() => { + cardRef.current && + VanillaTilt.init(cardRef.current, { + reverse: true, + max: 8, + glare: true, + ['max-glare']: 0.3, + scale: 1.03 + }) + }, []) + + return ( + + +
+ {' '} +
+
加载更多
+
+
+ ) +} + const Tools = () => { const navigate = useNavigate() const [modal, contextHolder] = AntdModal.useModal() const [loading, setLoading] = useState(false) - const [toolData, setToolData] = useState() + const [currentPage, setCurrentPage] = useState(0) + const [hasNextPage, setHasNextPage] = useState(false) + const [toolData, setToolData] = useState([]) const [upgradeForm] = AntdForm.useForm() const handleOnDeleteTool = (tool: ToolVo) => { @@ -324,7 +356,7 @@ const Tools = () => { const response = res.data if (response.code === DATABASE_DELETE_SUCCESS) { void message.success('删除成功') - getTool() + getTool(1) } else { void message.error('删除失败,请稍后重试') } @@ -467,7 +499,7 @@ const Tools = () => { switch (response.code) { case TOOL_SUBMIT_SUCCESS: void message.success('提交审核成功') - getTool() + getTool(1) break case TOOL_UNDER_REVIEW: void message.warning('工具审核中,请勿重复提交') @@ -519,7 +551,7 @@ const Tools = () => { }) .finally(() => { setLoading(false) - getTool() + getTool(1) }) } }, @@ -527,20 +559,40 @@ const Tools = () => { ) } - const getTool = () => { + const handleOnLoadMore = () => { + if (loading) { + return + } + getTool(currentPage + 1) + } + + const getTool = (page: number) => { if (loading) { return } setLoading(true) void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 }) - void r_tool_get() + void r_tool_get({ currentPage: page }) .then((res) => { const response = res.data switch (response.code) { case DATABASE_SELECT_SUCCESS: - setToolData(response.data!) + setCurrentPage(response.data!.current) + if ( + response.data!.current === response.data!.pages || + response.data!.total === 0 + ) { + setHasNextPage(false) + } else { + setHasNextPage(true) + } + if (response.data!.current === 1) { + setToolData(response.data!.records) + } else { + setToolData([...toolData, ...response.data!.records]) + } break default: void message.error('获取工具失败,请稍后重试') @@ -556,7 +608,7 @@ const Tools = () => { if (!getLoginStatus()) { return } - getTool() + getTool(1) }, []) return ( @@ -586,6 +638,7 @@ const Tools = () => { onCancel={handleOnCancelTool} /> ))} + {hasNextPage && } diff --git a/src/services/tool.tsx b/src/services/tool.tsx index 3464627..b462f37 100644 --- a/src/services/tool.tsx +++ b/src/services/tool.tsx @@ -20,7 +20,7 @@ export const r_tool_create = (param: ToolCreateParam) => request.post(UR export const r_tool_upgrade = (param: ToolUpgradeParam) => request.patch(URL_TOOL, param) -export const r_tool_get = () => request.get(URL_TOOL) +export const r_tool_get = (param: PageParam) => request.get>(URL_TOOL, param) export const r_tool_detail = (username: string, toolId: string, ver: string, platform: Platform) => request.get(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`, { platform })