blog/src/components/PostList.astro

---
import Eye from "@/assets/icon/eye.png?url";
import Folder from "@/assets/icon/folder.png?url";
import Calendar from "@/assets/icon/calendar.png?url";
import type {Post} from "@/types/post";
import {formatDatetime} from "@/lib/format.ts";

interface Props {
  posts: Post[]
  page: number
  totalPage: number
}

const {posts, page, totalPage} = Astro.props

posts.map((post) => {
  post.published_at = formatDatetime(post.published_at, 'YYYY-MM-DD')
})
---
<section class="section">
  <div class="post-list">
    {posts.map(post => (
      <a href={`/post/${post.slug}`}>
        <article class="post-card">
          <div class="post-cover">
            <img src={post.cover} alt={post.title} loading="lazy"/>
          </div>
          <div class="post-body">
            <div class="post-meta">
                <span>
                  <img src={Calendar} alt="Calendar"/>
                  {post.published_at}
                </span>
              <span>
                  <img src={Folder} alt="Folder"/>
                {post.category_name}
                </span>
              <span>
                  <img src={Eye} alt="Eye"/>
                {post.view}
                </span>
            </div>
            <h3 class="post-title">
              {post.title}
            </h3>
            <div class="post-summary">
              {post.summary}
            </div>
            <!--<div class="tags">-->
            <!--  <div class="tag">HTML</div>-->
            <!--  <div class="tag">CSS</div>-->
            <!--  <div class="tag">响应式</div>-->
            <!--</div>-->
          </div>
        </article>
      </a>
    ))}
  </div>

  <!--分页器-->
  {totalPage > 1 &&
    <nav class="pagination" aria-label="分页">
      {page > 1 ? <a href={`/page/${page - 1}`} class="link">« 上一页</a> : <span class="link disabled">« 上一页</span>}
      {Array.from({length: totalPage}).map((_, index) => {
        if (page === index + 1) {
          return <span class="link current">{index + 1}</span>
        }
        return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
      })}
      {page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页 »</a> :
        <span class="link disabled">下一页 »</span>}
    </nav>}
</section>

<style>
  .section {
    flex: 1;
    height: 100%;
  }

  .post-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .post-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    gap: 22px;
  }

  @media (hover: hover) and (pointer: fine) {
    .post-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }
  }

  .post-cover {
    flex-shrink: 0;
    width: 160px;
    height: 110px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff;
    overflow: hidden;
  }

  .post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .post-body {
    flex: 1;
    min-width: 0;
  }

  .post-meta {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .post-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .post-meta span img {
    width: 14px;
    height: 14px;
    display: block;
  }

  .post-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .post-summary {
    font-size: 14px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .tag {
    font-size: 12px;
    color: #4f6df5;
    background: #eef1fe;
    padding: 3px 10px;
    border-radius: 999px;
    transition: background 0.2s;
  }

  .tag:hover {
    background: #dfe6fd;
  }


  /* ========== 分页 ========== */
  .pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
  }

  .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.2s;
  }

  .link:hover,
  .link.current {
    background: var(--primary);
    border-color:var(--primary);
    color: #fff;
  }

  .link.disabled {
    color: var(--text-secondary);
    background: var(--card-bg);
    border-color: var(--border);
    cursor: not-allowed;
  }


  @media (max-width: 860px) {
    .post-list{
      gap: 16px;
    }

    .post-card {
      padding: 16px;
      gap: 12px;
    }

    .post-cover {
      width: 128px;
      height: 88px;
    }
  }

  @media (max-width: 560px) {
    .post-card {
      padding: 12px;
    }

    .post-title {
      font-size: 16px;
    }

    .post-meta{
      gap: 6px;
    }

    .post-cover {
      width: 100px;
      height: 70px;
    }
  }

</style>