49 lines
1.5 KiB
Vue
49 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
// 站点归档页：按月份分组的文章列表
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import EmptyState from '@/components/common/EmptyState.vue'
|
|
import Time from '@/components/common/Time.vue'
|
|
import { allPosts } from '@/mock/data'
|
|
|
|
const route = useRoute()
|
|
|
|
const grouped = computed(() => {
|
|
const posts = allPosts
|
|
.filter((p) => p.siteId === route.params.site)
|
|
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
|
|
|
const map = new Map<string, typeof posts>()
|
|
for (const post of posts) {
|
|
const key = post.date.slice(0, 7) // YYYY-MM
|
|
map.set(key, [...(map.get(key) ?? []), post])
|
|
}
|
|
return [...map.entries()]
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-screen-md mx-auto">
|
|
<div v-if="grouped.length">
|
|
<div v-for="[month, posts] in grouped" :key="month" class="mb-8">
|
|
<h3 class="text-xl font-bold text-zinc-900 mb-3">{{ month }}</h3>
|
|
<ul class="border-t divide-y">
|
|
<li v-for="post in posts" :key="post.id">
|
|
<RouterLink
|
|
:to="`/post/${post.siteId}/${post.slug}`"
|
|
class="flex items-center justify-between py-3 hover:text-accent transition-colors"
|
|
>
|
|
<span class="truncate">{{ post.title }}</span>
|
|
<span class="text-zinc-400 text-sm ml-3 shrink-0">
|
|
<Time :date="post.date" />
|
|
</span>
|
|
</RouterLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<EmptyState v-else text="No posts yet" />
|
|
</div>
|
|
</template>
|