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:
+15
-8
@@ -52,6 +52,7 @@
|
|||||||
color: var(--color-primary);
|
color: var(--color-primary);
|
||||||
}
|
}
|
||||||
:where(.albums-card__cover) {
|
:where(.albums-card__cover) {
|
||||||
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 4 / 3;
|
aspect-ratio: 4 / 3;
|
||||||
@@ -237,9 +238,8 @@
|
|||||||
th:unless="${rawPhotos != null and !#lists.isEmpty(rawPhotos)}"
|
th:unless="${rawPhotos != null and !#lists.isEmpty(rawPhotos)}"
|
||||||
>
|
>
|
||||||
<th:block
|
<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
|
<img
|
||||||
th:if="${not #lists.isEmpty(fbPhotos)}"
|
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:src="${fbPhotos[0].spec.cover != null and !#strings.isEmpty(fbPhotos[0].spec.cover) ? fbPhotos[0].spec.cover : fbPhotos[0].spec.url}"
|
||||||
@@ -249,7 +249,6 @@
|
|||||||
</th:block>
|
</th:block>
|
||||||
</th:block>
|
</th:block>
|
||||||
</th:block>
|
</th:block>
|
||||||
</th:block>
|
|
||||||
<th:block
|
<th:block
|
||||||
th:if="${not #lists.isEmpty(theme.config?.photos?.album_covers)}"
|
th:if="${not #lists.isEmpty(theme.config?.photos?.album_covers)}"
|
||||||
>
|
>
|
||||||
@@ -288,7 +287,13 @@
|
|||||||
|
|
||||||
<!-- 相册内瀑布流视图 -->
|
<!-- 相册内瀑布流视图 -->
|
||||||
<th:block th:unless="${#strings.isEmpty(group)}">
|
<th:block th:unless="${#strings.isEmpty(group)}">
|
||||||
<div class="photos-toolbar" th:if="${not #lists.isEmpty(photos.items)}">
|
<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)}"
|
||||||
|
>
|
||||||
|
<div class="photos-toolbar" th:if="${not #lists.isEmpty(groupPhotos)}">
|
||||||
<button
|
<button
|
||||||
class="photos-preview-toggle"
|
class="photos-preview-toggle"
|
||||||
id="photos-preview-toggle"
|
id="photos-preview-toggle"
|
||||||
@@ -301,10 +306,10 @@
|
|||||||
|
|
||||||
<ul
|
<ul
|
||||||
class="photos-masonry"
|
class="photos-masonry"
|
||||||
th:if="${not #lists.isEmpty(photos.items)}"
|
th:if="${not #lists.isEmpty(groupPhotos)}"
|
||||||
th:attr="data-lightbox=${theme.config?.basic?.enable_lightbox != false ? 'true' : null}"
|
th:attr="data-lightbox=${theme.config?.basic?.enable_lightbox != false ? 'true' : null}"
|
||||||
>
|
>
|
||||||
<li th:each="photo : ${photos.items}">
|
<li th:each="photo : ${groupPhotos}">
|
||||||
<a
|
<a
|
||||||
class="photos-card__media"
|
class="photos-card__media"
|
||||||
th:href="${photoUrl.detail(photo)}"
|
th:href="${photoUrl.detail(photo)}"
|
||||||
@@ -327,15 +332,17 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<p
|
<p
|
||||||
class="photos-empty"
|
class="photos-empty"
|
||||||
th:if="${#lists.isEmpty(photos.items)}"
|
th:if="${#lists.isEmpty(groupPhotos)}"
|
||||||
role="status"
|
role="status"
|
||||||
>
|
>
|
||||||
暂无照片
|
暂无照片
|
||||||
</p>
|
</p>
|
||||||
|
</th:block>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
<nav
|
<nav
|
||||||
class="photos-pagination"
|
class="photos-pagination"
|
||||||
th:if="${photos.hasPrevious() || photos.hasNext()}"
|
th:if="${photos != null and (photos.hasPrevious() or photos.hasNext())}"
|
||||||
aria-label="分页"
|
aria-label="分页"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
|
|||||||
Reference in New Issue
Block a user