From 0e87b3011e62d4ed52077bf956d19779ae048cd6 Mon Sep 17 00:00:00 2001
From: nxxy335 <zhangjinyang2023@outlook.com>
Date: Wed, 30 Sep 2026 10:17:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=9B=BE=E5=BA=93?=
 =?UTF-8?q?=E7=9B=B8=E5=86=8C=E5=B0=81=E9=9D=A2=E4=B8=8D=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E4=B8=8E=E6=97=A0=E6=B3=95=E8=BF=9B=E5=85=A5=E7=9B=B8=E5=86=8C?=
 =?UTF-8?q?=EF=BC=88v0.2.0=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因（已定位到具体规则）：
- .albums-card__cover 是 <span>（inline）但缺少 display:block，inline 元素忽略 width/aspect-ratio
  → 封面盒子高度为 0，内部 absolute 的 <img> 无尺寸可撑开 → 封面完全不可见（卡片只剩名称+张数）
- 相册详情页仅依赖路由注入的 photos.items，若该结果为空则显示「暂无照片」，表现为「点不进相册」

修复：
- 封面容器补 display:block（封面正常显示）
- 封面取值兜底：album.photos 为空时用 photoFinder.listBy(相册名) 取首图（Flux 解包为 List，避免 Mono 链式风险）
- 相册瀑布流数据源兜底：photos.items 为空时回退 photoFinder.listBy(group)，保证进入相册一定有图；
  分页仅在真正使用分页结果时渲染，并对 photos 判空

Co-Authored-By: WorkBuddy <noreply@workbuddy.ai>
---
 src/photos.html | 103 ++++++++++++++++++++++++++----------------------
 1 file changed, 55 insertions(+), 48 deletions(-)

diff --git a/src/photos.html b/src/photos.html
index e870d16..dca0987 100644
--- a/src/photos.html
+++ b/src/photos.html
@@ -52,6 +52,7 @@
         color: var(--color-primary);
       }
       :where(.albums-card__cover) {
+        display: block;
         position: relative;
         width: 100%;
         aspect-ratio: 4 / 3;
@@ -237,16 +238,14 @@
                       th:unless="${rawPhotos != null and !#lists.isEmpty(rawPhotos)}"
                     >
                       <th:block
-                        th:with="fbResult=${photoFinder.list(1, 1, album.metadata.name)}"
+                        th:with="fbPhotos=${photoFinder.listBy(album.metadata.name)}"
                       >
-                        <th:block th:with="fbPhotos=${fbResult.items}">
-                          <img
-                            th:if="${not #lists.isEmpty(fbPhotos)}"
-                            th:src="${fbPhotos[0].spec.cover != null and !#strings.isEmpty(fbPhotos[0].spec.cover) ? fbPhotos[0].spec.cover : fbPhotos[0].spec.url}"
-                            th:alt="${album.spec.displayName}"
-                            loading="lazy"
-                          />
-                        </th:block>
+                        <img
+                          th:if="${not #lists.isEmpty(fbPhotos)}"
+                          th:src="${fbPhotos[0].spec.cover != null and !#strings.isEmpty(fbPhotos[0].spec.cover) ? fbPhotos[0].spec.cover : fbPhotos[0].spec.url}"
+                          th:alt="${album.spec.displayName}"
+                          loading="lazy"
+                        />
                       </th:block>
                     </th:block>
                   </th:block>
@@ -288,54 +287,62 @@
 
       <!-- 相册内瀑布流视图 -->
       <th:block th:unless="${#strings.isEmpty(group)}">
-        <div class="photos-toolbar" th:if="${not #lists.isEmpty(photos.items)}">
-          <button
-            class="photos-preview-toggle"
-            id="photos-preview-toggle"
-            type="button"
-            th:attr="data-default=${theme.config?.photos?.preview_default != false ? 'on' : 'off'}"
+        <th:block
+          th:with="hasItems=${photos != null and photos.items != null and !#lists.isEmpty(photos.items)}"
+        >
+          <th:block
+            th:with="groupPhotos=${hasItems ? photos.items : photoFinder.listBy(group)}"
           >
-            预览模式
-          </button>
-        </div>
+            <div class="photos-toolbar" th:if="${not #lists.isEmpty(groupPhotos)}">
+              <button
+                class="photos-preview-toggle"
+                id="photos-preview-toggle"
+                type="button"
+                th:attr="data-default=${theme.config?.photos?.preview_default != false ? 'on' : 'off'}"
+              >
+                预览模式
+              </button>
+            </div>
 
-        <ul
-          class="photos-masonry"
-          th:if="${not #lists.isEmpty(photos.items)}"
-          th:attr="data-lightbox=${theme.config?.basic?.enable_lightbox != false ? 'true' : null}"
-        >
-          <li th:each="photo : ${photos.items}">
-            <a
-              class="photos-card__media"
-              th:href="${photoUrl.detail(photo)}"
-              th:title="${photo.spec.displayName}"
+            <ul
+              class="photos-masonry"
+              th:if="${not #lists.isEmpty(groupPhotos)}"
+              th:attr="data-lightbox=${theme.config?.basic?.enable_lightbox != false ? 'true' : null}"
             >
-              <img
-                th:src="${#strings.isEmpty(photo.spec.cover) ? photo.spec.url : photo.spec.cover}"
-                th:alt="${photo.spec.displayName}"
-                loading="lazy"
-              />
-            </a>
+              <li th:each="photo : ${groupPhotos}">
+                <a
+                  class="photos-card__media"
+                  th:href="${photoUrl.detail(photo)}"
+                  th:title="${photo.spec.displayName}"
+                >
+                  <img
+                    th:src="${#strings.isEmpty(photo.spec.cover) ? photo.spec.url : photo.spec.cover}"
+                    th:alt="${photo.spec.displayName}"
+                    loading="lazy"
+                  />
+                </a>
+                <p
+                  class="photos-card__caption"
+                  th:if="${not #strings.isEmpty(photo.spec.displayName)}"
+                  th:text="${photo.spec.displayName}"
+                >
+                  照片
+                </p>
+              </li>
+            </ul>
             <p
-              class="photos-card__caption"
-              th:if="${not #strings.isEmpty(photo.spec.displayName)}"
-              th:text="${photo.spec.displayName}"
+              class="photos-empty"
+              th:if="${#lists.isEmpty(groupPhotos)}"
+              role="status"
             >
-              照片
+              暂无照片
             </p>
-          </li>
-        </ul>
-        <p
-          class="photos-empty"
-          th:if="${#lists.isEmpty(photos.items)}"
-          role="status"
-        >
-          暂无照片
-        </p>
+          </th:block>
+        </th:block>
 
         <nav
           class="photos-pagination"
-          th:if="${photos.hasPrevious() || photos.hasNext()}"
+          th:if="${photos != null and (photos.hasPrevious() or photos.hasNext())}"
           aria-label="分页"
         >
           <a