feat: 优化首页个人名片与内容入口

pages/archive.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { siteConfig } from '~/config/site'
+import { formatPostDate, getArchiveGroups, isVisiblePost } from '~/utils/posts'
+
+useSeoMeta({
+  title: `归档 - ${siteConfig.siteName}`,
+  description: `${siteConfig.siteName} 的文章时间线`,
+})
+
+const { data: posts } = await useAsyncData('archive-posts', () =>
+  queryCollection('posts')
+    .order('published', 'DESC')
+    .all()
+)
+
+const archiveGroups = computed(() => getArchiveGroups((posts.value || []).filter(isVisiblePost)))
+const totalPosts = computed(() =>
+  archiveGroups.value.reduce((total, year) => total + year.months.reduce((sum, month) => sum + month.posts.length, 0), 0)
+)
+</script>
+
+<template>
+  <div class="container mx-auto max-w-4xl px-4 py-12">
+    <header class="mb-12 text-center anim-fade-in-up">
+      <h1 class="mb-4 text-4xl font-bold">文章归档</h1>
+      <p class="text-muted-foreground">按时间整理所有文章，方便回头翻旧账</p>
+      <p class="mt-2 text-sm text-muted-foreground">共 {{ totalPosts }} 篇文章</p>
+    </header>
+
+    <div v-if="archiveGroups.length" class="space-y-10 anim-fade-in-up anim-delay-1">
+      <section v-for="year in archiveGroups" :key="year.year">
+        <div class="mb-5 flex items-center gap-3">
+          <h2 class="text-2xl font-bold">{{ year.year }}</h2>
+          <span class="h-px flex-1" style="background-color: var(--color-border);" />
+        </div>
+
+        <div class="space-y-6">
+          <div v-for="month in year.months" :key="`${year.year}-${month.month}`" class="grid gap-4 md:grid-cols-[6rem_1fr]">
+            <div class="text-sm font-medium text-muted-foreground">{{ month.label }}</div>
+
+            <div class="space-y-3">
+              <NuxtLink
+                v-for="post in month.posts"
+                :key="post.path || post.id"
+                :to="post.path || '/posts'"
+                class="group block rounded-lg border p-4 transition-colors hover:bg-muted"
+                style="border-color: var(--color-border);"
+              >
+                <div class="mb-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                  <time v-if="post.published">{{ formatPostDate(post.published) }}</time>
+                  <span v-if="post.series">· {{ post.series }}</span>
+                  <span v-if="post.difficulty">· {{ post.difficulty }}</span>
+                </div>
+
+                <h3 class="font-semibold transition-opacity group-hover:opacity-70">
+                  {{ post.title }}
+                </h3>
+                <p v-if="post.description" class="mt-1 text-sm text-muted-foreground">
+                  {{ post.description }}
+                </p>
+
+                <div v-if="post.tags?.length" class="mt-3 flex flex-wrap gap-1.5">
+                  <span v-for="tag in post.tags" :key="tag" class="tag-pill">
+                    {{ tag }}
+                  </span>
+                </div>
+              </NuxtLink>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <div v-else class="rounded-xl border p-8 text-center text-muted-foreground anim-fade-in-up anim-delay-1" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
+      <Icon icon="mdi:archive-outline" class="mx-auto mb-3 h-8 w-8" />
+      暂无可归档文章
+    </div>
+  </div>
+</template>

pages/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { siteConfig } from '~/config/site'
+import { formatPostDate, getSeriesSummaries, isVisiblePost, sortPostsByPublished } from '~/utils/posts'
 
 const now = new Date()
 const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
@@ -14,6 +15,36 @@ type WeekendStatus = {
   value: string
 }
 
+onMounted(() => {
+  const el = document.getElementById('busuanzi_value_site_pv')
+  if (!el) return
+  el.textContent = '1'
+
+  const animate = (target: number) => {
+    if (target <= 1) return
+    const duration = 800
+    const start = performance.now()
+    const tick = (now: number) => {
+      const progress = Math.min((now - start) / duration, 1)
+      const eased = 1 - Math.pow(1 - progress, 3)
+      el.textContent = Math.floor(1 + (target - 1) * eased).toLocaleString()
+      if (progress < 1) requestAnimationFrame(tick)
+    }
+    requestAnimationFrame(tick)
+  }
+
+  const observer = new MutationObserver(() => {
+    const val = parseInt(el.textContent || '0', 10)
+    if (val > 1) {
+      observer.disconnect()
+      animate(val)
+    }
+  })
+  observer.observe(el, { childList: true, characterData: true, subtree: true })
+
+  setTimeout(() => observer.disconnect(), 10000)
+})
+
 // 从 API 获取法定节假日
 const { data: holidaysData } = await useAsyncData('holidays', () =>
   $fetch('https://timor.tech/api/holiday/year/' + today.getFullYear()).catch(() => null)
@@ -59,141 +90,213 @@ useHead({
 // 网易云热评
 const { data: hitokoto } = await useAsyncData('wyy-comment', () => $fetch<{ user: string; music: string; content: string }>('/api/wyy'))
 
-onMounted(() => {
-  const el = document.getElementById('busuanzi_value_site_pv')
-  if (!el) return
-  el.textContent = '1'
+// 首页内容入口
+const { data: homePosts } = await useAsyncData('home-posts', () =>
+  queryCollection('posts')
+    .order('pinned', 'DESC')
+    .order('published', 'DESC')
+    .all()
+)
 
-  const animate = (target: number) => {
-    if (target <= 1) return
-    const duration = 800
-    const start = performance.now()
-    const tick = (now: number) => {
-      const progress = Math.min((now - start) / duration, 1)
-      const eased = 1 - Math.pow(1 - progress, 3)
-      el.textContent = Math.floor(1 + (target - 1) * eased).toLocaleString()
-      if (progress < 1) requestAnimationFrame(tick)
-    }
-    requestAnimationFrame(tick)
-  }
+const visibleHomePosts = computed(() => sortPostsByPublished((homePosts.value || []).filter(isVisiblePost)))
+const featuredPosts = computed(() => {
+  const posts = [
+    ...visibleHomePosts.value.filter(post => post.pinned),
+    ...visibleHomePosts.value.filter(post => !post.pinned),
+  ]
+  const seen = new Set<string>()
 
-  const observer = new MutationObserver(() => {
-    const val = parseInt(el.textContent || '0', 10)
-    if (val > 1) {
-      observer.disconnect()
-      animate(val)
-    }
-  })
-  observer.observe(el, { childList: true, characterData: true, subtree: true })
-
-  setTimeout(() => observer.disconnect(), 10000)
+  return posts.filter((post) => {
+    const key = post.path || post.id || post.title || ''
+    if (!key || seen.has(key)) return false
+    seen.add(key)
+    return true
+  }).slice(0, 5)
 })
+const homeSeriesSummaries = computed(() => getSeriesSummaries(visibleHomePosts.value))
+const homeSeries = computed(() => homeSeriesSummaries.value.slice(0, 3))
+const homeSeriesCount = computed(() => homeSeriesSummaries.value.length)
+const homeTagCount = computed(() => new Set(visibleHomePosts.value.flatMap(post => post.tags || [])).size)
+
+const contentLinks = [
+  { label: '文章', icon: 'mdi:post-outline', href: '/posts' },
+  { label: '归档', icon: 'mdi:archive-outline', href: '/archive' },
+  { label: '系列', icon: 'mdi:playlist-edit', href: '/series' },
+]
+
+const secondaryNavLinks = computed(() =>
+  siteConfig.navLinks.filter(link => !contentLinks.some(item => item.href === link.href))
+)
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-8 px-4 pt-4 pb-12">
+  <div class="mx-auto flex w-full max-w-4xl flex-col gap-10 px-4 py-8 sm:py-12">
 
-    <!-- 公告卡片 -->
-    <div class="w-full max-w-2xl text-center anim-fade-in-up">
-      <div class="announcement-happy rounded-xl p-6">
-        <p class="announcement-text text-sm md:text-base">
-          <strong>欢迎来到《{{ siteConfig.siteName }}》~ 用代码创造快乐，用热爱点亮生活 (☞ﾟヮﾟ)☞</strong>
-        </p>
-        <p class="announcement-text text-sm md:text-base mt-1">
-          遇到问题的话，可以去 <a href="https://github.com/wishesl/SuBlog/issues" target="_blank" rel="noopener noreferrer">Issues</a> 提反馈哦，会尽快修的！
-        </p>
-      </div>
-    </div>
+    <!-- 站点身份 -->
+    <section class="anim-fade-in-up">
+      <div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:items-center sm:text-left">
+        <LayoutAvatarOrbit
+          :src="siteConfig.avatar"
+          :alt="siteConfig.siteName"
+        />
 
-    <!-- 头像 -->
-    <div class="anim-fade-in-up anim-delay-1">
-      <img
-        :src="siteConfig.avatar"
-        :alt="siteConfig.siteName"
-        class="h-32 w-32 rounded-full shadow-lg"
-      />
-    </div>
+        <div class="min-w-0 flex-1">
+          <p class="text-sm font-medium text-muted-foreground">{{ siteConfig.subtitle }}</p>
+          <h1 class="mt-1 text-4xl font-bold sm:text-5xl">{{ siteConfig.siteName }}</h1>
+          <p class="mt-3 text-base leading-relaxed text-muted-foreground">
+            {{ siteConfig.description }}。{{ siteConfig.bio }}
+          </p>
 
-    <!-- 标题 + 口号 + 访客 -->
-    <div class="text-center anim-fade-in-up anim-delay-2">
-      <h1 class="text-4xl font-bold mb-2">{{ siteConfig.siteName }}</h1>
-      <p v-if="hitokoto" class="text-sm italic leading-relaxed mb-1" style="color: var(--color-text-secondary)">
-        "{{ hitokoto.content }}"
-      </p>
-      <p v-if="hitokoto" class="text-xs opacity-60 mb-1" style="color: var(--color-text-secondary)">
-        —— {{ hitokoto.user }} · {{ hitokoto.music }}
-      </p>
-      <p class="text-sm mt-6" style="color: var(--color-text-secondary)">
-        您是第 <span id="busuanzi_value_site_pv" class="font-medium" style="color: var(--color-primary)"></span> 个访客
-      </p>
-    </div>
-
-    <!-- 放假倒计时 -->
-    <div class="w-full max-w-sm anim-fade-in-up anim-delay-3">
-      <div class="card relative overflow-hidden py-4">
-        <div class="flex items-center justify-center gap-6 text-sm">
-          <div class="flex items-center gap-2">
-            <img src="https://api.iconify.design/mdi:calendar-weekend.svg?color=%239ca3af" alt="" class="w-4 h-4" />
-            <span class="text-muted-foreground">{{ weekendStatus.label }}</span>
-            <span class="font-semibold" style="color: var(--color-primary);">{{ weekendStatus.value }}</span>
+          <div v-if="hitokoto" class="mt-4 text-sm leading-relaxed text-muted-foreground">
+            <p class="italic">"{{ hitokoto.content }}"</p>
+            <p class="mt-1 text-xs opacity-70">—— {{ hitokoto.user }} · {{ hitokoto.music }}</p>
           </div>
-          <template v-if="nextHoliday">
-            <span class="text-muted-foreground/30">|</span>
+
+          <p class="mt-4 text-sm text-muted-foreground">
+            您是第 <span id="busuanzi_value_site_pv" class="font-medium text-primary"></span> 个访客
+          </p>
+        </div>
+      </div>
+
+    </section>
+
+    <!-- 辅助信息 -->
+    <section class="anim-fade-in-up anim-delay-1">
+      <div class="grid gap-4 md:grid-cols-2">
+        <div class="rounded-xl border px-5 py-4" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
+          <h2 class="mb-3 text-sm font-semibold text-muted-foreground">社交</h2>
+          <div class="flex flex-wrap gap-2">
+            <a
+              v-for="link in siteConfig.socialLinks"
+              :key="link.name"
+              :href="link.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn-pill"
+            >
+              <img
+                :src="`https://api.iconify.design/${link.icon}.svg?color=${encodeURIComponent(link.color || 'currentColor')}`"
+                :alt="link.name"
+                class="h-5 w-5"
+              />
+              <span>{{ link.name }}</span>
+            </a>
+          </div>
+        </div>
+
+        <div class="rounded-xl border px-5 py-4" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
+          <h2 class="mb-3 text-sm font-semibold text-muted-foreground">更多页面</h2>
+          <div class="flex flex-wrap gap-2">
+            <NuxtLink
+              v-for="link in secondaryNavLinks"
+              :key="link.href"
+              :to="link.href"
+              class="btn-pill"
+            >
+              <Icon :icon="link.icon" class="h-5 w-5" />
+              <span>{{ link.label }}</span>
+            </NuxtLink>
+          </div>
+        </div>
+
+        <div class="rounded-xl border px-5 py-4" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
+          <h2 class="mb-3 text-sm font-semibold text-muted-foreground">公告</h2>
+          <div class="announcement-happy">
+            <p class="announcement-text text-sm leading-relaxed">
+              <strong>欢迎来到《{{ siteConfig.siteName }}》~ 用代码创造快乐，用热爱点亮生活 (☞ﾟヮﾟ)☞</strong>
+            </p>
+            <p class="announcement-text mt-1 text-sm leading-relaxed">
+              遇到问题的话，可以去 <a href="https://github.com/wishesl/SuBlog/issues" target="_blank" rel="noopener noreferrer">Issues</a> 提反馈哦，会尽快修的！
+            </p>
+          </div>
+        </div>
+
+        <div class="rounded-xl border px-5 py-4" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
+          <h2 class="mb-3 text-sm font-semibold text-muted-foreground">小日历</h2>
+          <div class="flex flex-wrap items-center gap-x-5 gap-y-3 text-sm">
             <div class="flex items-center gap-2">
-              <img src="https://api.iconify.design/mdi:pine-tree.svg?color=%239ca3af" alt="" class="w-4 h-4" />
-              <span class="text-muted-foreground">{{ nextHoliday.name }}</span>
-              <span class="font-semibold" style="color: var(--color-primary);">{{ holidayDays }} 天</span>
+              <Icon icon="mdi:calendar-weekend" class="h-5 w-5 text-muted-foreground" aria-hidden="true" />
+              <span class="text-muted-foreground">{{ weekendStatus.label }}</span>
+              <span class="font-semibold text-primary">{{ weekendStatus.value }}</span>
             </div>
-          </template>
+            <div v-if="nextHoliday" class="flex items-center gap-2">
+              <Icon icon="mdi:pine-tree" class="h-5 w-5 text-muted-foreground" aria-hidden="true" />
+              <span class="text-muted-foreground">{{ nextHoliday.name }}</span>
+              <span class="font-semibold text-primary">{{ holidayDays }} 天</span>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+    </section>
 
-    <!-- 社交卡片 -->
-    <div class="w-full max-w-2xl mx-auto anim-fade-in-up anim-delay-4">
-      <div class="card relative overflow-hidden py-6">
-        <div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none z-0">
-          <span class="text-5xl font-black tracking-widest" style="color: var(--color-text); opacity: 0.04;">社交</span>
+    <!-- 内容入口 -->
+    <section class="anim-fade-in-up anim-delay-2">
+      <div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h2 class="text-2xl font-bold">文章更新</h2>
+          <p class="mt-1 text-sm text-muted-foreground">
+            {{ visibleHomePosts.length }} 篇文章 · {{ homeSeriesCount }} 个系列 · {{ homeTagCount }} 个标签
+          </p>
         </div>
-        <div class="relative z-10 px-6 flex flex-wrap gap-3 justify-center">
-          <a
-            v-for="link in siteConfig.socialLinks"
-            :key="link.name"
-            :href="link.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="btn-pill"
-          >
-            <img
-              :src="`https://api.iconify.design/${link.icon}.svg?color=${encodeURIComponent(link.color || 'currentColor')}`"
-              :alt="link.name"
-              class="w-5 h-5"
-            />
-            <span>{{ link.name }}</span>
-          </a>
-        </div>
-      </div>
-    </div>
 
-    <!-- 导航卡片 -->
-    <div class="w-full max-w-2xl mx-auto anim-fade-in-up anim-delay-5">
-      <div class="card relative overflow-hidden py-6">
-        <div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none z-0">
-          <span class="text-5xl font-black tracking-widest" style="color: var(--color-text); opacity: 0.04;">导航</span>
-        </div>
-        <div class="relative z-10 px-6 flex flex-wrap gap-3 justify-center">
+        <div class="flex flex-wrap gap-2">
           <NuxtLink
-            v-for="link in siteConfig.navLinks"
+            v-for="link in contentLinks"
             :key="link.href"
             :to="link.href"
             class="btn-pill"
           >
-            <Icon :icon="link.icon" class="w-5 h-5" />
+            <Icon :icon="link.icon" class="h-5 w-5" />
             <span>{{ link.label }}</span>
           </NuxtLink>
         </div>
       </div>
-    </div>
+
+      <div class="overflow-hidden rounded-xl border" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
+        <NuxtLink
+          v-for="post in featuredPosts"
+          :key="post.path || post.id"
+          :to="post.path || '/posts'"
+          class="group block border-b px-5 py-4 transition-colors last:border-b-0 hover:bg-muted"
+          style="border-color: var(--color-border);"
+        >
+          <div class="mb-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+            <span
+              v-if="post.pinned"
+              class="rounded-full px-2 py-0.5 font-medium"
+              style="background: var(--color-text); color: var(--color-bg);"
+            >
+              置顶
+            </span>
+            <time v-if="post.published">{{ formatPostDate(post.published) }}</time>
+            <span v-if="post.series">· {{ post.series }}</span>
+            <span v-if="post.difficulty">· {{ post.difficulty }}</span>
+          </div>
+          <h3 class="font-semibold transition-opacity group-hover:opacity-70">
+            {{ post.title }}
+          </h3>
+          <p v-if="post.description" class="mt-1 line-clamp-2 text-sm leading-relaxed text-muted-foreground">
+            {{ post.description }}
+          </p>
+        </NuxtLink>
+
+        <p v-if="featuredPosts.length === 0" class="px-5 py-6 text-center text-sm text-muted-foreground">
+          暂无文章
+        </p>
+      </div>
+
+      <div v-if="homeSeries.length" class="mt-4 flex flex-wrap items-center gap-2">
+        <span class="text-sm text-muted-foreground">系列入口</span>
+        <NuxtLink
+          v-for="series in homeSeries"
+          :key="series.name"
+          :to="series.path"
+          class="tag-pill"
+        >
+          {{ series.name }} · {{ series.count }} 篇
+        </NuxtLink>
+      </div>
+    </section>
 
   </div>
 </template>

pages/posts/[slug].vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { siteConfig } from '~/config/site'
+import { formatPostDate, isVisiblePost, sortPostsForSeries } from '~/utils/posts'
 
 const router = useRouter()
 const route = useRoute()
@@ -28,12 +29,38 @@ useSeoMeta({
   twitterImage: post.value.image || siteConfig.ogImage,
 })
 
+const { data: seriesSourcePosts } = await useAsyncData(`series-source-${slug}`, () =>
+  queryCollection('posts')
+    .order('published', 'ASC')
+    .all()
+)
+
+const seriesPosts = computed(() => {
+  if (!post.value?.series) return []
+
+  return sortPostsForSeries(
+    (seriesSourcePosts.value || [])
+      .filter(isVisiblePost)
+      .filter(item => item.series === post.value?.series)
+  )
+})
+
+const currentSeriesIndex = computed(() =>
+  seriesPosts.value.findIndex(item => item.path === post.value?.path)
+)
+
+const previousSeriesPost = computed(() => {
+  if (currentSeriesIndex.value <= 0) return null
+  return seriesPosts.value[currentSeriesIndex.value - 1]
+})
+
+const nextSeriesPost = computed(() => {
+  if (currentSeriesIndex.value < 0) return null
+  return seriesPosts.value[currentSeriesIndex.value + 1] || null
+})
+
 function formatDate(date: string) {
-  return new Date(date).toLocaleDateString('zh-CN', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  })
+  return formatPostDate(date)
 }
 </script>
 
@@ -41,10 +68,24 @@ function formatDate(date: string) {
   <article v-if="post" class="container mx-auto max-w-3xl px-4 py-12">
 
     <header class="mb-8 anim-fade-in-up">
-      <div class="mb-4 flex items-center gap-2">
+      <div class="mb-4 flex flex-wrap items-center gap-x-3 gap-y-2">
         <time v-if="post.published" class="text-sm text-muted-foreground">
           {{ formatDate(post.published) }}
         </time>
+        <span v-if="post.updated" class="text-sm text-muted-foreground">
+          更新 {{ formatDate(post.updated) }}
+        </span>
+        <span v-if="post.difficulty" class="text-sm text-muted-foreground">
+          {{ post.difficulty }}
+        </span>
+        <NuxtLink
+          v-if="post.series"
+          :to="`/series/${encodeURIComponent(post.series)}`"
+          class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium hover:opacity-80"
+          style="background: var(--color-bg-hover); color: var(--color-primary);"
+        >
+          {{ post.series }}
+        </NuxtLink>
       </div>
 
       <h1 class="mb-4 text-4xl font-bold">{{ post.title }}</h1>
@@ -89,6 +130,62 @@ function formatDate(date: string) {
       <ContentRenderer :value="post" />
     </div>
 
+    <section
+      v-if="post.series && seriesPosts.length > 1"
+      class="mt-12 pt-8 anim-fade-in-up anim-delay-2"
+      style="border-top: 1px solid var(--color-border)"
+    >
+      <div class="mb-4 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p class="text-sm text-muted-foreground">当前系列</p>
+          <h2 class="text-xl font-semibold">{{ post.series }}</h2>
+        </div>
+        <NuxtLink
+          :to="`/series/${encodeURIComponent(post.series)}`"
+          class="text-sm hover:underline"
+          style="color: var(--color-primary)"
+        >
+          查看全部 {{ seriesPosts.length }} 篇
+        </NuxtLink>
+      </div>
+
+      <div class="grid gap-3 md:grid-cols-2">
+        <NuxtLink
+          v-if="previousSeriesPost"
+          :to="previousSeriesPost.path || '/posts'"
+          class="group rounded-lg border p-4 transition-colors hover:bg-muted"
+          style="border-color: var(--color-border);"
+        >
+          <p class="mb-1 text-xs text-muted-foreground">上一篇</p>
+          <p class="font-medium transition-opacity group-hover:opacity-70">{{ previousSeriesPost.title }}</p>
+        </NuxtLink>
+        <div
+          v-else
+          class="rounded-lg border p-4 text-sm text-muted-foreground"
+          style="border-color: var(--color-border);"
+        >
+          已经是本系列第一篇
+        </div>
+
+        <NuxtLink
+          v-if="nextSeriesPost"
+          :to="nextSeriesPost.path || '/posts'"
+          class="group rounded-lg border p-4 text-right transition-colors hover:bg-muted"
+          style="border-color: var(--color-border);"
+        >
+          <p class="mb-1 text-xs text-muted-foreground">下一篇</p>
+          <p class="font-medium transition-opacity group-hover:opacity-70">{{ nextSeriesPost.title }}</p>
+        </NuxtLink>
+        <div
+          v-else
+          class="rounded-lg border p-4 text-right text-sm text-muted-foreground"
+          style="border-color: var(--color-border);"
+        >
+          已经是本系列最后一篇
+        </div>
+      </div>
+    </section>
+
     <div class="anim-fade-in-up anim-delay-2">
       <BlogGiscus class="mt-16" />
     </div>

pages/series/[name].vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { siteConfig } from '~/config/site'
+import { decodeRouteParam, formatPostDate, getReadTime, isVisiblePost, normalizeSeriesName, sortPostsForSeries } from '~/utils/posts'
+
+const route = useRoute()
+const rawName = Array.isArray(route.params.name) ? route.params.name[0] : route.params.name
+const seriesName = decodeRouteParam(String(rawName || ''))
+
+const { data: posts } = await useAsyncData(`series-${seriesName}`, () =>
+  queryCollection('posts')
+    .order('published', 'ASC')
+    .all()
+)
+
+const seriesPosts = computed(() =>
+  sortPostsForSeries(
+    (posts.value || [])
+      .filter(isVisiblePost)
+      .filter(post => normalizeSeriesName(post.series) === seriesName)
+  )
+)
+
+if (!seriesPosts.value.length) {
+  throw createError({ statusCode: 404, message: '系列不存在' })
+}
+
+useSeoMeta({
+  title: `${seriesName} - ${siteConfig.siteName}`,
+  description: `${siteConfig.siteName} 的「${seriesName}」系列文章`,
+})
+</script>
+
+<template>
+  <div class="container mx-auto max-w-4xl px-4 py-12">
+    <header class="mb-12 anim-fade-in-up">
+      <NuxtLink to="/series" class="mb-5 inline-flex items-center gap-1 text-sm hover:underline" style="color: var(--color-primary)">
+        <Icon icon="mdi:arrow-left" class="h-4 w-4" />
+        返回系列
+      </NuxtLink>
+
+      <h1 class="mb-4 text-4xl font-bold">{{ seriesName }}</h1>
+      <p class="text-muted-foreground">
+        共 {{ seriesPosts.length }} 篇文章，按阅读顺序排列。
+      </p>
+    </header>
+
+    <div class="space-y-4 anim-fade-in-up anim-delay-1">
+      <NuxtLink
+        v-for="(post, index) in seriesPosts"
+        :key="post.path || post.id"
+        :to="post.path || '/posts'"
+        class="group grid gap-4 rounded-xl border p-5 transition-all hover:-translate-y-0.5 hover:shadow-lg md:grid-cols-[3.5rem_1fr]"
+        style="border-color: var(--color-border); background-color: var(--color-bg-card);"
+      >
+        <div class="flex h-12 w-12 items-center justify-center rounded-full text-lg font-bold" style="background-color: var(--color-bg-hover); color: var(--color-primary);">
+          {{ post.seriesOrder || index + 1 }}
+        </div>
+
+        <div class="min-w-0">
+          <div class="mb-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+            <time v-if="post.published">{{ formatPostDate(post.published) }}</time>
+            <span>· 约 {{ getReadTime(post) }} 分钟</span>
+            <span v-if="post.difficulty">· {{ post.difficulty }}</span>
+          </div>
+
+          <h2 class="text-xl font-semibold transition-opacity group-hover:opacity-70">
+            {{ post.title }}
+          </h2>
+          <p v-if="post.description" class="mt-2 text-sm text-muted-foreground">
+            {{ post.description }}
+          </p>
+
+          <div v-if="post.tags?.length" class="mt-3 flex flex-wrap gap-1.5">
+            <span v-for="tag in post.tags" :key="tag" class="tag-pill">
+              {{ tag }}
+            </span>
+          </div>
+        </div>
+      </NuxtLink>
+    </div>
+  </div>
+</template>

pages/series/index.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { siteConfig } from '~/config/site'
+import { formatPostDate, getSeriesSummaries, isVisiblePost } from '~/utils/posts'
+
+useSeoMeta({
+  title: `文章系列 - ${siteConfig.siteName}`,
+  description: `${siteConfig.siteName} 的系列文章合集`,
+})
+
+const { data: posts } = await useAsyncData('series-list-posts', () =>
+  queryCollection('posts')
+    .order('published', 'DESC')
+    .all()
+)
+
+const seriesList = computed(() => getSeriesSummaries((posts.value || []).filter(isVisiblePost)))
+</script>
+
+<template>
+  <div class="container mx-auto max-w-5xl px-4 py-12">
+    <header class="mb-12 text-center anim-fade-in-up">
+      <h1 class="mb-4 text-4xl font-bold">文章系列</h1>
+      <p class="text-muted-foreground">把同一个主题的文章串起来，读起来更连贯</p>
+      <p class="mt-2 text-sm text-muted-foreground">共 {{ seriesList.length }} 个系列</p>
+    </header>
+
+    <div v-if="seriesList.length" class="grid gap-5 md:grid-cols-2 anim-fade-in-up anim-delay-1">
+      <NuxtLink
+        v-for="series in seriesList"
+        :key="series.name"
+        :to="series.path"
+        class="group rounded-xl border p-5 transition-all hover:-translate-y-0.5 hover:shadow-lg"
+        style="border-color: var(--color-border); background-color: var(--color-bg-card);"
+      >
+        <div class="mb-4 flex items-start justify-between gap-4">
+          <div class="min-w-0">
+            <h2 class="truncate text-xl font-semibold transition-opacity group-hover:opacity-70">
+              {{ series.name }}
+            </h2>
+            <p class="mt-1 text-sm text-muted-foreground">
+              {{ series.count }} 篇文章 · 最近更新 {{ formatPostDate(series.latestPost.updated || series.latestPost.published) }}
+            </p>
+          </div>
+          <Icon icon="mdi:chevron-right" class="mt-1 h-5 w-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-1" />
+        </div>
+
+        <p v-if="series.latestPost.description" class="mb-4 line-clamp-2 text-sm text-muted-foreground">
+          {{ series.latestPost.description }}
+        </p>
+
+        <div v-if="series.tags.length" class="flex flex-wrap gap-1.5">
+          <span v-for="tag in series.tags" :key="tag" class="tag-pill">
+            {{ tag }}
+          </span>
+        </div>
+      </NuxtLink>
+    </div>
+
+    <div v-else class="rounded-xl border p-8 text-center text-muted-foreground anim-fade-in-up anim-delay-1" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
+      <Icon icon="mdi:playlist-remove" class="mx-auto mb-3 h-8 w-8" />
+      还没有系列。给文章 frontmatter 添加 series 字段后会自动出现。
+    </div>
+  </div>
+</template>