feat(books): 书封接口——schema cover 字段+书架卡封面渲染

posts schema 加 cover?: image（image() 走 Astro 优化管线，仅阅读
轨消费）；BooksPage 有封面渲染 96/192 两档 Image、无封面优雅回
退现有色脊卡设计（零破坏）；目录 content/posts/assets/books/ 就位；
docs/写作指南.md 补用法节（路径/frontmatter 示例/尺寸建议）。

验证: pnpm astro build；E2E 34/34；现 5 本书全部回退色脊卡渲染
（封面貌 0，待用户加图）

Spec: none (书封接口预留，用户自行加图)

Co-authored-by: GLM-5.3

src/components/pages/BooksPage.astro

@@ -5,6 +5,7 @@ import { getCollection } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { t } from '../../i18n/ui';
 import type { Locale } from '../../lib/locale';
+import { Image } from 'astro:assets';
 
 interface Props { locale?: Locale }
 const { locale = 'zh' } = Astro.props;
@@ -38,7 +39,18 @@ const L = {
               href={locale === 'en' ? `/en/archives/${b.id}/` : `/archives/${b.id}/`}
               style={`--mood:${b.data.mood ?? 'var(--ink-4)'}`}
             >
-              <i class="spine" aria-hidden="true"></i>
+              {b.data.cover ? (
+                <Image
+                  src={b.data.cover}
+                  alt={`${b.data.title} 封面`}
+                  class="bk-cover"
+                  widths={[96, 192]}
+                  sizes="96px"
+                  loading="lazy"
+                />
+              ) : (
+                <i class="spine" aria-hidden="true"></i>
+              )}
               <div class="bk-body">
                 <strong class="bk-title">{b.data.title}</strong>
                 {b.data.bookAuthor && <span class="bk-author">{b.data.bookAuthor}</span>}
@@ -85,6 +97,15 @@ const L = {
     transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
   }
   .book:hover { border-color: var(--mood); transform: translateY(-2px); }
+  /* 书封（content/posts/assets/books/<slug>.jpg）：无图时回退色脊卡设计 */
+  .bk-cover {
+    width: 96px;
+    height: 100%;
+    object-fit: cover;
+    align-self: stretch;
+    flex: none;
+    border-right: 1px solid var(--paper-line);
+  }
   .spine {
     flex: none;
     width: 10px;