feat: 博客归档

src/pages/archive.astro

@@ -0,0 +1,193 @@
+---
+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>>("post/archive");
+---
+
+<Layout title="归档">
+  <div class="page-content">
+    <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 href={`/post/${post.slug}`}>{post.title}</a>
+                        <span class="post-cat">{post.category_name}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</Layout>
+
+<style>
+  :root {
+    --primary: #4f6df5;
+    --primary-dark: #3a55d4;
+    --text: #2b2f36;
+    --text-secondary: #6b7280;
+    --bg: #f6f7f9;
+    --card-bg: #ffffff;
+    --border: #e5e7eb;
+    --tag-bg: #eef1fe;
+    --radius: 12px;
+    --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
+  }
+
+  .archive {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .archive-year {
+    margin-bottom: 40px;
+  }
+
+  .year-title {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 18px;
+  }
+
+  .year-title .year-badge {
+    background: linear-gradient(135deg, #4f6df5, #7b5cf0);
+    color: #fff;
+    padding: 8px 16px;
+    border-radius: 999px;
+    font-size: 20px;
+  }
+
+  .year-title .year-count {
+    font-size: 13px;
+    color: var(--text-secondary);
+    font-weight: 400;
+  }
+
+  .year-title::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--border);
+  }
+
+  /* 月份分组 */
+  .month-group {
+    position: relative;
+    padding-left: 28px;
+    margin-bottom: 24px;
+  }
+
+  /* 时间轴竖线 */
+  .month-group::before {
+    content: "";
+    position: absolute;
+    left: 7px;
+    top: 8px;
+    bottom: 0;
+    width: 2px;
+    background: var(--border);
+  }
+
+  .month-title {
+    position: relative;
+    font-size: 17px;
+    font-weight: 700;
+    color: var(--primary);
+    margin-bottom: 10px;
+  }
+
+  /* 月份节点圆点 */
+  .month-title::before {
+    content: "";
+    position: absolute;
+    left: -26px;
+    top: 8px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--primary);
+    box-shadow: 0 0 0 3px var(--tag-bg);
+  }
+
+  .post-list {
+    list-style: none;
+    background: var(--card-bg);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    overflow: hidden;
+  }
+
+  .post-item {
+    display: flex;
+    align-items: baseline;
+    gap: 14px;
+    padding: 18px 20px;
+    border-bottom: 1px solid var(--border);
+    transition: background 0.2s;
+  }
+
+  .post-item:last-child {
+    border-bottom: none;
+  }
+
+  .post-item:hover {
+    background: #f9faff;
+  }
+
+  .post-date {
+    flex-shrink: 0;
+    font-size: 13px;
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+    width: 52px;
+  }
+
+  .post-item a {
+    flex: 1;
+    min-width: 0;
+    font-size: 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .post-item a:hover {
+    color: var(--primary);
+  }
+
+  .post-cat {
+    flex-shrink: 0;
+    font-size: 12px;
+    color: var(--primary);
+    background: var(--tag-bg);
+    padding: 2px 10px;
+    border-radius: 999px;
+  }
+</style>