fix: 修复图库相册封面不显示与无法进入相册(v0.2.0)

根因(已定位到具体规则):
- .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>
This commit is contained in:
2026-09-30 10:17:39 +08:00
co-authored by WorkBuddy
parent 0eb5d8e06b
commit 0e87b3011e
+55 -48
View File
@@ -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