From 31fb52cb06e3a8229a78bada4b528bd9b3e3aa6d Mon Sep 17 00:00:00 2001 From: wait4xx Date: Tue, 3 Nov 2026 11:55:32 +0800 Subject: [PATCH] =?UTF-8?q?feat(books):=20=E4=B9=A6=E6=9E=B6=E4=B8=89?= =?UTF-8?q?=E6=A1=88=E6=8C=89=E8=A7=86=E8=A7=89=E5=A4=8D=E6=A0=B8=E4=BF=AE?= =?UTF-8?q?=E5=AE=8C=EF=BC=88=E9=95=BF=E6=A0=87=E9=A2=98=E8=A3=81=E5=88=87?= =?UTF-8?q?/=E5=8F=82=E5=B7=AE/=E5=AD=A4=E5=84=BF=E4=BD=8D/=E6=97=A0?= =?UTF-8?q?=E6=9A=97=E7=A4=BA=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 视觉复核逐案挑出的缺陷全修： A 竖排色脊：书名/作者按脊内竖向容量确定性截断（此前 10 字书名与 9 字作者挤成 第二窄列被 40px 脊宽裁掉）；脊顶上留 10px hover 余量 + 底部基线；情绪色混色 从 16% 提到 26% 并加内描边（淡紫脊原本在白底上几乎消隐，墙被读断）；短标题脊 补竖排年份填白；移动端脊高 120→172 保持 1:4 书脊比例，不再退化成矮胖色块 B 封面网格：改 3 列（5 本排 3+2，消掉 4+1 孤儿位）；标题定两行高、卡片等高 （实测同行 394px 一致），同排基线不再锯齿；占位卡从单字换成竖排书名，视觉 重量向真封面靠拢 C 抽书阅读：首行默认展开 + 每行加「封面与简介 ▾」暗示（此前收起态没有任何可点 信号，看着像静态列表）；去掉恒为同值的年份列；标题改定宽列 + 省略号（实测 作者列 x 全部 518，消除锯齿）；作者前加「·」并与标题拉开色阶；色条加宽成贯通行 高的窄脊 验证: 构建 exit 0；content-lint 54 页 0/0/0；Playwright 实测 A 标题/作者零裁切、 B 三列且同行等高 394、C 作者列全对齐 518 且首行展开、390 下脊高 172 不溢出 Spec: 2026-11-02_blog-5i-fonts-polish (T7 预览修订) Co-authored-by: GLM-5.3 --- src/pages/books-preview.astro | 102 +++++++++++++++++++++++++++------- 1 file changed, 83 insertions(+), 19 deletions(-) diff --git a/src/pages/books-preview.astro b/src/pages/books-preview.astro index 10ba73f..5a6ac80 100644 --- a/src/pages/books-preview.astro +++ b/src/pages/books-preview.astro @@ -31,6 +31,8 @@ const firstPara = (body: string | undefined): string => { return line.replace(/[*_>`[\]]/g, '').slice(0, 60); }; +/** 竖排书脊的高度有限：中文书名超过 ~11 字就必然溢出，用确定性截断代替裁切 */ +const clip = (t: string, n: number) => (t.length > n ? `${t.slice(0, n)}…` : t); const items = books.map((b) => ({ id: b.id, title: b.data.title, @@ -40,6 +42,9 @@ const items = books.map((b) => ({ mood: b.data.mood ?? 'var(--ink-4)', year: b.data.pubDate.getFullYear(), href: `/archives/${b.id}/`, + spineTitle: clip(b.data.title, 11), + spineAuthor: clip(b.data.bookAuthor ?? '', 4), + short: clip(b.data.title, 3), })); const years = [...new Set(items.map((i) => i.year))].sort((a, b) => b - a); const withCover = items.filter((i) => i.cover).length; @@ -74,8 +79,10 @@ const withCover = items.filter((i) => i.cover).length; {items.filter((i) => i.year === year).map((b) => (
  • - {b.title} - {b.author && {b.author}} + {b.spineTitle} + {b.spineAuthor && {b.spineAuthor}} + {/* 短标题脊上半段会空出一大块，用年份竖排填补（视觉复核：空脊读起来空洞） */} + {String(b.year).slice(2)}
    • ))} @@ -105,7 +112,8 @@ const withCover = items.filter((i) => i.cover).length; ) : (