fix page list for RepositoryList.vue

src/views/index/RepositoryList.vue

@@ -22,13 +22,16 @@
 		</t-list>
 		<footer class="footer">
 			<t-pagination
-				class="pagination"
+				class="pages"
+				v-if="pageResult"
 				:total="pageResult.total"
 				:pageSize="16"
 				:showPageSize="false"
+				:current="currentPage"
+				:onCurrentChange="onPageChangeEvent"
 			>
 				<template #totalContent>
-					<div class="total" v-text="`共 ${pageResult.total} 个项目`"></div>
+					<div style="flex: 1" v-text="`共 ${pageResult.total} 篇文章`"></div>
 				</template>
 			</t-pagination>
 		</footer>
@@ -37,24 +40,62 @@
 <script lang="ts" setup>
 import RepositoryAPI from "@/api/RepositoryAPI";
 import { Repository } from "@/types/Repository";
-import { Icon, Loading, Page, PageResult, Time } from "timi-web";
+import { Icon, Loading, Page, PageResult, Time, Toolkit } from "timi-web";
 
-const page = ref<Page>({
+const router = useRouter();
+const route = useRoute();
+
+const isLoading = ref(false);
+const currentPage = computed(() => page.index + 1);
+const page = reactive<Page>({
 	index: 0,
-	size: 12
+	size: 16
 });
 const pageResult = reactive<PageResult<Repository>>({
 	total: 0,
 	list: []
 });
-const isLoading = ref(false);
+// 获取列表
-onMounted(async () => {
+const fetchList = Toolkit.debounce(async () => {
 	isLoading.value = true;
-	const result = await RepositoryAPI.page(page.value);
+	const result = await RepositoryAPI.page(page);
 	pageResult.total = result.total;
 	pageResult.list = result.list;
 	isLoading.value = false;
 });
+
+// 监听路由分页
+watch(
+	() => route.query.p,
+	async (newP) => {
+		const pNum = Number(newP);
+		if (Number.isInteger(pNum) && 0 <= pNum) {
+			page.index = pNum;
+			await fetchList();
+		} else {
+			// 参数无效时重置为第一页
+			await router.push({
+				path: route.path,
+				query: {
+					...route.query,
+					p: 0
+				}
+			});
+		}
+	},
+	{ immediate: true }
+);
+
+function onPageChangeEvent(current: number) {
+	const newIndex = current - 1;
+	router.push({
+		path: route.path,
+		query: {
+			...route.query,
+			p: newIndex
+		}
+	});
+}
 </script>
 
 <style lang="less" scoped>