feat: photo count + smart nav button visibility

This commit is contained in:
tian 2026-05-08 11:21:58 +08:00
parent 77b092d946
commit aacf5c80f6

View File

@ -53,16 +53,16 @@
{{if .Photos}}
<img src="/ui/face-photo/{{index .Photos 0}}" style="width:100%;height:100%;object-fit:cover" id="img-{{.ID}}" />
{{if gt .PhotoCount 1}}
<button class="btn ghost" style="position:absolute;left:2px;top:50%;transform:translateY(-50%);padding:2px 4px;font-size:10px;opacity:0.7" onclick="prevPhoto({{.ID}})"></button>
<button class="btn ghost" style="position:absolute;right:2px;top:50%;transform:translateY(-50%);padding:2px 4px;font-size:10px;opacity:0.7" onclick="nextPhoto({{.ID}})"></button>
<button class="btn ghost nav-btn" id="prev-{{.ID}}" style="position:absolute;left:2px;top:50%;transform:translateY(-50%);padding:2px 4px;font-size:10px;opacity:0.7;display:none" onclick="navPhoto({{.ID}},-1)"></button>
<button class="btn ghost nav-btn" id="next-{{.ID}}" style="position:absolute;right:2px;top:50%;transform:translateY(-50%);padding:2px 4px;font-size:10px;opacity:0.7" onclick="navPhoto({{.ID}},1)"></button>
{{end}}
{{else}}
<div class="muted" style="display:flex;align-items:center;justify-content:center;height:100%">无照片</div>
{{end}}
</div>
<div style="margin-top:6px;display:flex;justify-content:space-between;align-items:center">
<span style="font-weight:500;font-size:13px">{{.Name}}</span>
<div class="actions compact">
<div style="margin-top:6px">
<div style="font-weight:500;font-size:13px">{{.Name}} <span class="muted small">{{.PhotoCount}}张</span></div>
<div class="actions compact" style="margin-top:4px">
<button class="btn ghost" type="button" style="font-size:11px;padding:2px 6px" onclick="editPerson({{.ID}},'{{.Name}}',[{{range $i,$p := .Photos}}{{if $i}},{{end}}'/ui/face-photo/{{$p}}'{{end}}])">编辑</button>
<form method="post" action="/ui/face-gallery/delete" style="display:inline" onsubmit="return confirm('确定删除 {{.Name}}')">
<input type="hidden" name="id" value="{{.ID}}">
@ -103,15 +103,12 @@ document.querySelectorAll('.photo-viewer').forEach(function(el) {
var id = el.querySelector('img') ? el.querySelector('img').id.replace('img-','') : '';
if (id) photoData[id] = {photos: photos, idx: 0};
});
function prevPhoto(id) {
function navPhoto(id, dir) {
var d = photoData[id]; if (!d || d.photos.length<2) return;
d.idx = (d.idx - 1 + d.photos.length) % d.photos.length;
document.getElementById('img-'+id).src = d.photos[d.idx];
}
function nextPhoto(id) {
var d = photoData[id]; if (!d || d.photos.length<2) return;
d.idx = (d.idx + 1) % d.photos.length;
d.idx = (d.idx + dir + d.photos.length) % d.photos.length;
document.getElementById('img-'+id).src = d.photos[d.idx];
document.getElementById('prev-'+id).style.display = d.idx === 0 ? 'none' : '';
document.getElementById('next-'+id).style.display = d.idx === d.photos.length-1 ? 'none' : '';
}
function editPerson(id, name, photos) {
document.getElementById('edit-id').value = id;