fix loss style for async load

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 />
@@ -10,16 +10,39 @@
 <script lang="ts" setup>
 import { BEFlowerFall, Popup } from "timi-web";
 import { RootLayout, UserProfilePopup } from "timi-tdesign-pc";
+import { SettingMapper } from "../../timi-web";
+
+const route = useRoute();
 
 const ready = ref(false);
-
 onMounted(async () => {
+	await SettingMapper.loadSetting({
+		key: "GIT_ABOUT_ARTICLE"
+	});
 	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/layout/IndexLayout.vue

@@ -21,6 +21,7 @@
 				</template>
 				<t-menu-item to="/" :value="Menu.LIST">仓库列表</t-menu-item>
 				<t-menu-item to="/log" :value="Menu.LOG">最近推送</t-menu-item>
+				<t-menu-item to="/about" :value="Menu.ABOUT">关于</t-menu-item>
 				<template #operations>
 					<login-menu />
 				</template>
@@ -44,14 +45,16 @@ onMounted(async () => owner.value = await UserAPI.view(1));
 
 enum Menu {
 	LIST = "LIST",
-	LOG = "LOG"
+	LOG = "LOG",
+	ABOUT = "ABOUT"
 }
 
 const regexMenu: {
 	[key: string]: Menu
 } = {
 	"RepositoryList": Menu.LIST,
-	"RepositoryLog": Menu.LOG
+	"RepositoryLog": Menu.LOG,
+	"About": Menu.ABOUT
 };
 
 const route = useRoute();
@@ -76,7 +79,7 @@ onMounted(() => syncMenuRouter(route.name as string));
 
 	.header {
 		top: 0;
-		z-index: 1;
+		z-index: 3;
 		position: sticky;
 		background: rgba(231, 234, 239, .8);
 		border-bottom: var(--tui-border);

src/router/index.ts

@@ -1,8 +1,7 @@
-import IndexLayout from "@/layout/IndexLayout.vue";
-import RepositoryList from "@/views/index/RepositoryList.vue";
-import RepositoryLog from "@/views/index/RepositoryLog.vue";
 import { createRouter, createWebHistory } from "vue-router";
 import repository from "./repository";
+import IndexLayout from "@/layout/IndexLayout.vue";
+import RepositoryList from "@/views/index/RepositoryList.vue";
 
 export default createRouter({
 	history: createWebHistory("/"),
@@ -21,7 +20,12 @@ export default createRouter({
 				{
 					path: "/log",
 					name: "RepositoryLog",
-					component: RepositoryLog
+					component:  () => import("@/views/index/RepositoryLog.vue")
+				},
+				{
+					path: "/about",
+					name: "About",
+					component:  () => import("@/views/index/About.vue")
 				}
 			]
 		},

src/router/repository.ts

@@ -1,13 +1,4 @@
 import RepositoryLayout from "@/layout/RepositoryLayout.vue";
-import CommitLog from "@/views/repository/CommitLog.vue";
-import FileDetail from "@/views/repository/FileDetail.vue";
-import IssueDetail from "@/views/repository/IssueDetail.vue";
-import IssueEdit from "@/views/repository/IssueEdit.vue";
-import IssueList from "@/views/repository/IssueList.vue";
-import MergeDetail from "@/views/repository/MergeDetail.vue";
-import MergeEdit from "@/views/repository/MergeEdit.vue";
-import MergeList from "@/views/repository/MergeList.vue";
-import ReleaseList from "@/views/repository/ReleaseList.vue";
 
 export default {
 	path: "/:repository",
@@ -17,7 +8,7 @@ export default {
 		{
 			path: ":branch",
 			name: "FileDetail",
-			component: FileDetail,
+			component:  () => import("@/views/repository/FileDetail.vue"),
 			meta: {
 				keepAlive: true
 			}
@@ -25,47 +16,42 @@ export default {
 		{
 			path: "commits",
 			name: "CommitLog",
-			component: CommitLog
+			component:  () => import("@/views/repository/CommitLog.vue")
 		},
 		{
 			path: "issues",
 			name: "IssueList",
-			component: IssueList
-		},
-		{
-			path: "issues",
-			name: "IssueList",
-			component: IssueList
+			component:  () => import("@/views/repository/IssueList.vue")
 		},
 		{
 			path: "issues/edit/:id?",
 			name: "IssueEdit",
-			component: IssueEdit
+			component:  () => import("@/views/repository/IssueEdit.vue")
 		},
 		{
 			path: "issues/:id",
 			name: "IssueDetail",
-			component: IssueDetail
+			component:  () => import("@/views/repository/IssueDetail.vue")
 		},
 		{
 			path: "merges",
 			name: "MergeList",
-			component: MergeList
+			component:  () => import("@/views/repository/MergeList.vue")
 		},
 		{
 			path: "merges/edit/:id?",
 			name: "MergeEdit",
-			component: MergeEdit
+			component:  () => import("@/views/repository/MergeEdit.vue")
 		},
 		{
 			path: "merges/:id",
 			name: "MergeDetail",
-			component: MergeDetail
+			component:  () => import("@/views/repository/MergeDetail.vue")
 		},
 		{
 			path: "releases",
 			name: "ReleaseList",
-			component: ReleaseList
+			component:  () => import("@/views/repository/ReleaseList.vue")
 		}
 	]
 };

src/views/index/About.vue

@@ -0,0 +1,33 @@
+<template>
+	<article v-if="article" class="about">
+		<markdown-view class="content" :content="article.data" />
+		<comment
+			v-if="SettingMapper.is(SettingKey.ENABLE_COMMENT) && article.showComment"
+			:bizType="CommentBizType.ARTICLE"
+			:bizId="article.id!"
+			:titleStickyOffset="80"
+			:canComment="article.canComment"
+		/>
+	</article>
+</template>
+
+<script lang="ts" setup>
+import { ArticleAPI, ArticleView, CommentBizType, MarkdownView, SettingKey, SettingMapper } from "timi-web";
+import { Comment } from "timi-tdesign-pc";
+
+const article = ref<ArticleView<any>>();
+
+onMounted(async () => {
+	article.value = await ArticleAPI.view(SettingMapper.getValue("GIT_ABOUT_ARTICLE") as unknown as number);
+});
+</script>
+
+<style lang="less" scoped>
+.about {
+
+	.content {
+		width: calc(100% - 4rem);
+		padding: 1rem 2rem;
+	}
+}
+</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>

src/views/index/RepositoryLog.vue

@@ -3,7 +3,7 @@
 		<push-log-timeline :items="list" />
 		<div class="bottom">
 			<loading :showOn="isLoading" />
-			<empty-tips :showOn="isFinished && !isLoading" />
+			<empty-tips v-if="isFinished && !isLoading" />
 			<t-button v-show="!isFinished && !isLoading" @click="doFetchEvent">加载更多</t-button>
 		</div>
 	</div>
@@ -40,5 +40,10 @@ onMounted(doFetchEvent);
 .repository-log {
 	width: calc(100% - 4rem);
 	padding: 1rem 2rem;
+
+	.bottom {
+		display: flex;
+		justify-content: center;
+	}
 }
 </style>