style: inline edit fields, X close button, confirm delete photo

This commit is contained in:
tian 2026-05-08 11:25:23 +08:00
parent aacf5c80f6
commit d7bd252044

View File

@ -79,20 +79,20 @@
</div>
<div id="edit-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center">
<div class="card" style="max-width:500px;width:90%;max-height:80vh;overflow-y:auto">
<h3 style="margin-bottom:12px">编辑人员</h3>
<form method="post" action="/ui/face-gallery/rename" style="margin-bottom:12px">
<div class="card" style="max-width:500px;width:90%;max-height:80vh;overflow-y:auto;position:relative">
<button class="btn ghost" type="button" onclick="closeEdit()" style="position:absolute;top:8px;right:8px;font-size:16px;padding:2px 8px;line-height:1">&times;</button>
<h3 style="margin-bottom:8px">编辑人员</h3>
<form method="post" action="/ui/face-gallery/rename" style="margin-bottom:12px;display:flex;gap:8px;align-items:flex-end">
<input type="hidden" name="id" id="edit-id">
<div class="field-grid"><label class="full"><span>姓名</span><input type="text" name="name" id="edit-name" required /></label></div>
<div class="actions" style="margin-top:8px"><button class="btn" type="submit">保存姓名</button></div>
<label style="flex:1;margin:0"><span class="small muted" style="display:block;margin-bottom:4px">姓名</span><input type="text" name="name" id="edit-name" required /></label>
<button class="btn" type="submit" style="margin-bottom:1px">保存</button>
</form>
<div id="edit-photos" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px"></div>
<form method="post" action="/ui/face-gallery/add-photo" enctype="multipart/form-data">
<form method="post" action="/ui/face-gallery/add-photo" enctype="multipart/form-data" style="display:flex;gap:8px;align-items:flex-end">
<input type="hidden" name="id" id="add-photo-id">
<div class="field-grid"><label><span>添加照片</span><input type="file" name="photo" accept="image/*" /></label></div>
<div class="actions" style="margin-top:8px"><button class="btn ghost" type="submit">上传</button></div>
<label style="flex:1;margin:0"><span class="small muted" style="display:block;margin-bottom:4px">添加照片</span><input type="file" name="photo" accept="image/*" /></label>
<button class="btn ghost" type="submit" style="margin-bottom:1px">上传</button>
</form>
<div class="actions" style="margin-top:12px"><button class="btn ghost" type="button" onclick="closeEdit()">关闭</button></div>
</div>
</div>
@ -115,7 +115,7 @@ function editPerson(id, name, photos) {
document.getElementById('edit-name').value = name;
document.getElementById('add-photo-id').value = id;
var ph = document.getElementById('edit-photos');
ph.innerHTML = photos.map(function(p,i) { return '<div style="position:relative;width:80px;height:100px"><img src="'+p+'" style="width:100%;height:100%;object-fit:cover;border-radius:4px">' + '<button class="btn ghost" style="position:absolute;top:2px;right:2px;font-size:10px;padding:1px 3px;color:red;background:rgba(0,0,0,0.5)" onclick="return confirm(\'删除这张照片?\')">x</button></div>'; }).join('');
ph.innerHTML = photos.map(function(p,i) { return '<div style="position:relative;width:80px;height:100px"><img src="'+p+'" style="width:100%;height:100%;object-fit:cover;border-radius:4px"><button class="btn ghost" style="position:absolute;top:2px;right:2px;font-size:10px;padding:1px 3px;color:red;background:rgba(0,0,0,0.5)" onclick="if(confirm(\'删除这张照片?\')) this.parentElement.remove()">&times;</button></div>'; }).join('');
document.getElementById('edit-modal').style.display = 'flex';
}
function closeEdit() { document.getElementById('edit-modal').style.display = 'none'; }