书籍页:手工书单为空时隐藏统计行和搜索/筛选条
books.json 是空的,所以「书籍」页顶上挂着一排 「0 本已读 / 0 本推荐 / 0 个领域」加搜索框、领域和评价筛选 —— 没数据可显示也没东西可筛,纯占地方。 改成 hasManualBooks = allBooks.length > 0 控制: - 为空时整块(统计行 + 搜索框 + 领域筛选 + 评价筛选)不渲染 - 往 books.json 加了书自动回来,不用改代码 - 顺带补一个兜底空态:手工书单和微信读书都已读完都为空时, 显示「书架还是空的」并提示两条填充路径 验证(双向都测了) - books.json 为空时构建:本已读 / data-bookshelf-search / data-filter-books-category / data-filter-books-status 在产物里均 0 次; 已读完分组和 6 张卡片不受影响 - 临时往 books.json 注入 1 本假书再构建:统计行、搜索框、领域筛选、 评价筛选、手工书卡全部出现(测完已 git checkout 还原) - 在读页未受影响:20 张卡 / 20 条进度条
This commit is contained in:
@@ -328,6 +328,8 @@ src/components/bookshelf-content.astro
|
||||
|
||||
**2. 书籍** —— 来自 `public/data/books.json`,由 `bookshelf-content.astro` 在构建时 import(文件必须存在)。另外两个文件 `papers.json` / `comics.json` 对应的漫画、论文分类已经移除,文件保留但不再被引用。
|
||||
|
||||
`books.json` 为空时,**统计行(N 本已读 / N 本推荐 / N 个领域)、搜索框、领域和评价筛选条会整块隐藏** —— 一排「0」加一排没东西可筛的按钮纯占地方。往 `books.json` 加了书它们会自动回来,不用改代码。手工书单和微信读书都已读完都为空时,会显示一句兜底提示。
|
||||
|
||||
**两个页面共用同一个组件**,不会出现样式跑偏:`bookshelf-content.astro` 收一个 `view: "reading" | "books"`,只是决定渲染哪一块。侧栏那两行是**真链接**(带 `aria-current` 和主色高亮表示当前页),不再是页内锚点。
|
||||
|
||||
## 部署
|
||||
|
||||
@@ -63,6 +63,9 @@ const booksByCategory = allBooks.reduce<Record<string, BookRecord[]>>((acc, book
|
||||
const bookCategories = ["全部", ...Object.keys(booksByCategory), ...(finishedReading.length > 0 ? [WEREAD_CATEGORY] : [])]
|
||||
const bookStatuses = ["全部", "推荐", "中庸", "不行"]
|
||||
|
||||
/** 手工书单为空时,统计行和搜索/筛选条都没有意义,整块隐藏 */
|
||||
const hasManualBooks = allBooks.length > 0
|
||||
|
||||
const bookStats = {
|
||||
total: allBooks.length,
|
||||
recommended: allBooks.filter((b) => b.fields.推荐状态 === "推荐").length,
|
||||
@@ -202,7 +205,11 @@ const recommendBadge = (status?: string) => {
|
||||
<div class="text-sm italic font-serif text-muted-foreground">博学而笃志,切问而近思</div>
|
||||
</div>
|
||||
|
||||
{/* ---------- Stats ---------- */}
|
||||
{/* ---------- Stats + Search + filters ----------
|
||||
只有存在手工书单时才显示。books.json 为空时这三行都是「0 本已读 /
|
||||
0 本推荐 / 0 个领域」加一排没东西可筛的按钮,纯占地方。 */}
|
||||
{hasManualBooks && (
|
||||
<>
|
||||
<div class="flex flex-wrap gap-x-7 gap-y-2 text-sm text-muted-foreground mb-7">
|
||||
<span class="flex items-baseline gap-2"><span class="text-primary font-semibold text-base font-serif tabular-nums">{bookStats.total}</span><span>本已读</span></span>
|
||||
<span class="flex items-baseline gap-2"><span class="text-primary font-semibold text-base font-serif tabular-nums">{bookStats.recommended}</span><span>本推荐</span></span>
|
||||
@@ -259,6 +266,8 @@ const recommendBadge = (status?: string) => {
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ========================= Views ========================= */}
|
||||
|
||||
@@ -359,6 +368,17 @@ const recommendBadge = (status?: string) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 手工书单和微信读书都已读完都为空时的兜底 */}
|
||||
{!hasManualBooks && finishedReading.length === 0 && (
|
||||
<div class="py-16 text-center border border-dashed border-border rounded-xl">
|
||||
<p class="text-muted-foreground mb-2">书架还是空的。</p>
|
||||
<p class="text-xs text-muted-foreground/70">
|
||||
往 <code class="px-1 py-0.5 rounded bg-muted font-mono">public/data/books.json</code> 里加书,
|
||||
或跑一次 <code class="px-1 py-0.5 rounded bg-muted font-mono">pnpm reading</code> 同步微信读书。
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state (shared, shown when filters return nothing) */}
|
||||
<div data-empty-state class="hidden text-center py-16">
|
||||
<span class="inline-flex h-12 w-12 items-center justify-center text-muted-foreground/30 mx-auto mb-4">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"updatedAt": "2026-09-15T02:58:11.129Z",
|
||||
"updatedAt": "2026-09-15T03:05:33.930Z",
|
||||
"source": "weread",
|
||||
"books": [
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user