blog/src/views/ArticleIndex.vue

<template>
	<div class="article-index">
		<div class="list">
			<article-list
				v-if="pageResult"
				:list="pageResult.list"
			/>
			<t-pagination
				class="pages"
				v-if="pageResult"
				:total="pageResult.total"
				:pageSize="16"
				:showPageSize="false"
				:totalContent="isShowPageTotal"
				:current="currentPage"
				:onCurrentChange="onPageChangeEvent"
			>
				<template #totalContent v-if="isShowPageTotal">
					<div style="flex: 1" v-text="`共 ${pageResult.total} 个项目`"></div>
				</template>
			</t-pagination>
		</div>
		<aside class="aside">
			<section class="ranking">
				<h4 class="title">
					<icon class="icon" name="LIST" />
					<span>排行</span>
				</h4>
				<ul class="items">
					<li
						class="item"
						v-for="item in ranking"
						:key="item.id"
					>
						<a
							class="title black clip-text"
							:href="`/aid${item.id}.html`"
							v-text="item.title"
							:title="item.title"
							@click.prevent="Toolkit.leftClickCallback($event, () => router.push(`/aid${item.id}.html`))"
						></a>
					</li>
				</ul>
			</section>
			<section class="friend">
				<h4 class="title">
					<icon class="icon" name="LINK_0" />
					<span>友链</span>
				</h4>
				<div class="items">
					<div
						class="item"
						v-for="friend in friends"
						:key="friend.link"
					>
						<img class="icon ir-pixelated" :src="friend.icon" :alt="friend.name" />
						<a
							class="name black"
							:href="friend.link"
							target="_blank"
							v-text="friend.name"
						></a>
					</div>
				</div>
			</section>
		</aside>
	</div>
</template>

<script lang="ts" setup>
import { deviceStore, Icon, Page, PageResult, Toolkit } from "timi-web";
import ArticleAPI from "@/api/ArticleAPI";
import { Article, ArticleRanking } from "@/types/Article";
import ArticleList from "@/components/article/ArticleList.vue";
import { Friend } from "@/types/Friend.ts";
import BlogAPI from "@/api/BlogAPI.ts";

const router = useRouter();
const route = useRoute();

// 页码
const currentPage = computed(() => page.index + 1);
// 分页参数
const page = reactive<Page>({
	index: 0,
	size: 16
});
// 数据列表
const pageResult = ref<PageResult<Article<any>>>();
// 获取列表
const fetchList = Toolkit.debounce(async () => pageResult.value = await ArticleAPI.page(page));

// 监听路由分页
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
		}
	});
}

// 分页总数
const isShowPageTotal = computed(() => !deviceStore.isPhone.value);

// 排行
const ranking = reactive<ArticleRanking[]>([]);
onMounted(async () => {
	ranking.push(...await ArticleAPI.listRanking());
});

// 友链
const friends = reactive<Friend[]>([]);
onMounted(async () => {
	friends.push(...await BlogAPI.friends());
});

</script>

<style lang="less" scoped>
.article-index {
	display: flex;
	border-bottom: var(--tui-border);

	.list {
		border-right: var(--tui-border);

		.pages {
			bottom: -1px;
			padding: var(--tui-page-padding);
			position: sticky;
			background: rgba(255, 255, 255, .8);
			border-top: var(--tui-border);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
		}
	}

	.aside {
		top: 49px;
		width: 240px;
		height: fit-content;
		position: sticky;
		min-width: 240px;

		h4.title {
			margin: 0;
			display: flex;
			padding: .5rem;
			align-items: center;
			border-bottom: var(--tui-border);

			.icon {
				margin-right: .5rem;
			}
		}

		.ranking {

			.items {
				margin: 0;
				padding: .5rem .5rem .5rem 2rem;

				.item {

					.title {
						width: 100%;
						display: block;
						font-size: 14px;
					}
				}
			}
		}

		.friend {
			margin-top: 2rem;

			.items {
				display: flex;
				padding: .5rem;
				flex-direction: column;

				.item {
					display: flex;
					margin-bottom: .5rem;

					.icon {
						width: 16px;
						height: 16px;
						margin-right: .25rem;
					}

					.name {
						margin: 0;
						font-size: 13px;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 680px) {
	.article-index {

		.list {
			border-right: none;
		}

		.aside {
			display: none;
		}
	}
}
</style>