feat: 归档页面

src/pages/archive.astro

@@ -0,0 +1,119 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import type {Archive} from "@/types/archive";
+import {createHttp} from "@/lib/request";
+
+const http = createHttp(Astro.request.headers);
+
+const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
+---
+
+
+<Layout title="归档" description="">
+  <div class="archive">
+    {
+      data.map((year) => (
+        <div class="archive-year">
+          <h2 class="year-title">
+            <span class="year-badge">{year.year}年</span>
+            <span class="year-count">共 {year.total} 篇</span>
+          </h2>
+          <div>
+            {year.list.map((month) => (
+              <div class="month-group">
+                <h3 class="month-title">{month.month} 月</h3>
+                <ul class="post-list">
+                  {month.list.map((post) => (
+                    <li class="post-item">
+                        <span class="post-date">
+                          {post.published_at_display}
+                        </span>
+                      <a class="post-title" href={`/post/${post.slug}`}>{post.title}</a>
+                      <span class="post-cat">{post.category_name}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</Layout>
+
+<style>
+  .archive {
+
+  }
+
+  .archive-year {
+
+  }
+
+  .year-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--text-primary);
+    font-size: 32px;
+    margin-bottom: 24px;
+  }
+
+  .year-badge {
+
+  }
+
+  .year-count {
+    font-size: 14px;
+    font-weight: normal;
+  }
+
+  .month-group {
+    padding: 12px 0;
+  }
+
+  .month-title {
+    color: #60a5fa;
+    font-weight: normal;
+  }
+
+  .post-list {
+    padding: 12px 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .post-item {
+    display: flex;
+    gap: 24px;
+    font-size: 14px;
+    border-bottom: var(--border-secondary);
+    padding: 18px 0;
+    align-items: center;
+  }
+
+  .post-item:last-child {
+    border-bottom: none;
+  }
+
+  .post-date {
+    color: var(--text-tertiary);
+  }
+
+  .post-title {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--text-primary);
+  }
+
+  .post-title:hover{
+    text-decoration: underline;
+  }
+
+  .post-cat {
+    color: var(--text-tertiary);
+  }
+</style>