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

2026-07-16 23:51:55 +08:00
parent 92360e4f49
commit 991264c32c
25 changed files with 1158 additions and 130 deletions
@@ -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>