feat(download): 添加分页逻辑

public/themes/dist_static/static/js/download.js

@@ -27,6 +27,32 @@ $(function() {
 		}
 		return $active.attr("data-tab") || "";
 	};
+	const getKeywords = () => $("[data-tab-search] [name='keywords']").val().trim();
+	const getCurrentPage = () => {
+		const activePage = Number($(".d-pagination__page.is-active").attr("data-page") || 1);
+		return Number.isFinite(activePage) && activePage > 0 ? activePage : 1;
+	};
+	const getMaxPage = () => {
+		let max = 1;
+		$(".d-pagination__page[data-page]").each(function() {
+			const page = Number($(this).attr("data-page") || 0);
+			if (page > max) max = page;
+		});
+		return max;
+	};
+	const buildQueryUrl = ({ tabId = getActiveTabId(), keywords = getKeywords(), page } = {}) => {
+		const params = new URLSearchParams();
+		if (tabId) params.set("tab", tabId);
+		if (keywords) params.set("keywords", keywords);
+		if (page && Number(page) > 1) params.set("page", String(page));
+		const query = params.toString();
+		return query ? `${window.location.pathname}?${query}` : window.location.pathname;
+	};
+	const goToPage = (page) => {
+		const nextPage = Number(page);
+		if (!Number.isFinite(nextPage) || nextPage < 1) return;
+		window.location.href = buildQueryUrl({ page: nextPage });
+	};
 	const activateTabById = (tabId) => {
 		if (!tabId) return;
 		const $dropdownItem = $(`.d-tabs__dropdown-item[data-tab="${tabId}"]`).first();
@@ -40,6 +66,15 @@ $(function() {
 		const $target = $(`.d-tabs__item[data-tab="${tabId}"]`).first();
 		if ($target.length) activateTab($target);
 	};
+	const activatePageById = (page) => {
+		const pageNum = Number(page) || 1;
+		const $target = $(`.d-pagination__page[data-page="${pageNum}"]`).first();
+		if (!$target.length) return;
+		$(".d-pagination__page").removeClass("is-active").removeAttr("aria-current");
+		$target.addClass("is-active").attr("aria-current", "page");
+		$("[data-page-prev]").prop("disabled", pageNum <= 1);
+		$("[data-page-next]").prop("disabled", pageNum >= getMaxPage());
+	};
 	$(".d-tabs__item:not([data-dropdown-trigger])").on("click", function() {
 		activateTab($(this));
 		closeDropdowns();
@@ -67,18 +102,30 @@ $(function() {
 	});
 	$("[data-tab-search]").on("submit", function(event) {
 		event.preventDefault();
-		const params = new URLSearchParams();
-		const keywords = $(this).find('[name="keywords"]').val().trim();
-		const tabId = getActiveTabId();
-		if (tabId) params.set("tab", tabId);
-		if (keywords) params.set("keywords", keywords);
-		const query = params.toString();
-		window.location.href = query ? `${window.location.pathname}?${query}` : window.location.pathname;
+		window.location.href = buildQueryUrl({
+			tabId: getActiveTabId(),
+			keywords: $(this).find('[name="keywords"]').val().trim()
+		});
+	});
+	$(".d-pagination__page").on("click", function() {
+		const page = $(this).attr("data-page");
+		if (!page || $(this).hasClass("is-active")) return;
+		goToPage(page);
+	});
+	$("[data-page-prev]").on("click", function() {
+		if ($(this).prop("disabled")) return;
+		goToPage(getCurrentPage() - 1);
+	});
+	$("[data-page-next]").on("click", function() {
+		if ($(this).prop("disabled")) return;
+		goToPage(getCurrentPage() + 1);
 	});
 	const searchParams = new URLSearchParams(window.location.search);
 	const tabParam = searchParams.get("tab");
 	const keywordsParam = searchParams.get("keywords");
+	const pageParam = searchParams.get("page");
 	if (keywordsParam) $("[data-tab-search] [name='keywords']").val(keywordsParam);
 	if (tabParam) activateTabById(tabParam);
+	activatePageById(pageParam || 1);
 });
 //#endregion