bigger layout for FileDetail

src/Root.vue

@@ -1,6 +1,6 @@
 <template>
 	<b-e-flower-fall class="background" />
-	<root-layout v-if="ready" class="diselect" icp="粤ICP备2025368555号-1" domain="imyeyu.com" author="夜雨">
+	<root-layout v-if="ready" class="root-layout diselect" icp="粤ICP备2025368555号-1" domain="imyeyu.com" author="夜雨">
 		<router-view />
 	</root-layout>
 	<popup />
@@ -11,15 +11,32 @@
 import { BEFlowerFall, Popup } from "timi-web";
 import { RootLayout, UserProfilePopup } from "timi-tdesign-pc";
 
-const ready = ref(false);
+const route = useRoute();
 
-onMounted(async () => {
-	ready.value = true;
-});
+const ready = ref(false);
+onMounted(async () => ready.value = true);
+
+// ---------- 文件详情页更宽的布局 ----------
+const inFileDetail = ref(false);
+const largeWidth = computed(() => inFileDetail.value ? "1600px" : "1200px");
+const width = computed(() => inFileDetail.value ? "1200px" : "900px");
+watch(route, () => inFileDetail.value = route.name === "FileDetail");
 </script>
 
 <style lang="less">
 .background {
 	background: url("@/assets/img/main.png") fixed right bottom;
 }
+
+@media screen and (max-width: 2560px) {
+	.root-layout {
+		width: v-bind(largeWidth) !important;
+	}
+}
+
+@media screen and (max-width: 1920px) {
+	.root-layout {
+		width: v-bind(width) !important;
+	}
+}
 </style>

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>