lan-reader-chat/app/library/page.tsx

import Link from "next/link";
import { getBooks, getBookStructureStats } from "@/lib/book-catalog";

export default async function LibraryPage() {
  const books = await getBooks();

  return (
    <main className="page-shell">
      <section className="library-shell">
        <div className="library-grid">
          {books.map((book) => {
            const stats = getBookStructureStats(book);

            return (
            <article className="book-card" key={book.id}>
              <div className="book-cover" style={{ ["--cover" as string]: book.coverStyle }}>
                <div className="book-cover__chip">{book.category}</div>
                <h2 className="book-cover__title">{book.title}</h2>
                <p className="book-cover__author">{book.author}</p>
              </div>

              <div className="book-body">
                <div className="chip-row">
                  <span className="chip">{book.wordCount}</span>
                  <span className="chip">{stats.loreCount} 条资料</span>
                  <span className="chip">{stats.novelCount} 条正文</span>
                </div>
                <p>{book.description}</p>
                <Link className="button button--primary" href={`/reader/${book.id}`}>
                  开始阅读
                </Link>
              </div>
            </article>
          )})}
        </div>
      </section>
    </main>
  );
}