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

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>