refactor: v2

src/pages/archive.astro

@@ -1,198 +0,0 @@
----
-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="归档">
-  <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 {
-    --border: #e5e7eb;
-    --radius: 12px;
-    --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  }
-
-  .archive {
-    width: 100%;
-    max-width: 860px;
-    margin: 0 auto;
-  }
-
-  .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;
-  }
-
-  :global(.dark) .month-title{
-    color: inherit;
-  }
-
-  /* 月份节点圆点 */
-  .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;
-  }
-
-  :global(.dark) .post-item:hover {
-    background: none;
-  }
-
-  .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);
-  }
-
-  :global(.dark) .post-item a:hover {
-    color: inherit;
-  }
-
-  .post-cat {
-    flex-shrink: 0;
-    font-size: 12px;
-    color: var(--primary);
-    background: var(--tag-bg);
-    padding: 2px 10px;
-    border-radius: 999px;
-  }
-</style>