baseline: 保留 07 风格重写前的 Vue 前端原件

2026-09-20 20:48:00 +08:00
commit edee708802
63 changed files with 4404 additions and 0 deletions
@@ -0,0 +1,48 @@
+<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>