From 0ca2bd6d41317bed822943b5d97ef312fcb16ac7 Mon Sep 17 00:00:00 2001
From: tian <11429339@qq.com>
Date: Fri, 8 May 2026 11:55:06 +0800
Subject: [PATCH] fix: use forEach for edit photos, cleaner JS no confirm

---
 internal/web/ui/templates/face_gallery.html | 27 ++++++++++++---------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/internal/web/ui/templates/face_gallery.html b/internal/web/ui/templates/face_gallery.html
index 9a2e3c9..b9be551 100644
--- a/internal/web/ui/templates/face_gallery.html
+++ b/internal/web/ui/templates/face_gallery.html
@@ -25,8 +25,8 @@
         {{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 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>
+        <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)">&#9664;</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)">&#9654;</button>
         {{end}}
         {{else}}
         <div class="muted" style="display:flex;align-items:center;justify-content:center;height:100%">无照片</div>
@@ -65,7 +65,7 @@ function navPhoto(id,dir){
   document.getElementById('next-'+id).style.display=d.idx===d.photos.length-1?'none':'';
 }
 function showImport(){
-  document.getElementById('modal-body').innerHTML='<h3 style="margin-bottom:12px">批量导入</h3><div class="form-hint" style="margin-bottom:12px">选择按姓名分目录的照片根目录。</div><form method="post" action="/ui/face-gallery/import" enctype="multipart/form-data"><label class="full" style="margin-bottom:12px;display:block"><span>选择照片目录</span><input type="file" name="photos" webkitdirectory multiple required /></label><div class="actions"><button class="btn" type="submit">导入</button></div></form>';
+  document.getElementById('modal-body').innerHTML='<h3 style="margin-bottom:12px">批量导入</h3><div class="form-hint" style="margin-bottom:12px">选择按姓名分目录的照片根目录</div><form method="post" action="/ui/face-gallery/import" enctype="multipart/form-data"><label class="full" style="margin-bottom:12px;display:block"><span>选择照片目录</span><input type="file" name="photos" webkitdirectory multiple required /></label><div class="actions"><button class="btn" type="submit">导入</button></div></form>';
   document.getElementById('modal').style.display='flex';
 }
 function showAdd(){
@@ -73,14 +73,19 @@ function showAdd(){
   document.getElementById('modal').style.display='flex';
 }
 function showEdit(id,name,photos){
-  document.getElementById('modal-body').innerHTML='<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" value="'+id+'"><label style="flex:1;margin:0"><span class="small muted" style="display:block;margin-bottom:4px">姓名</span><input type="text" name="name" value="'+esc(name)+'" required /></label>'+
-    '<button class="btn" type="submit" style="margin-bottom:1px">保存</button></form>'+
-    '<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px">'+photos.map(function(p){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('')+'</div>'+
-    '<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" value="'+id+'"><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>';
+  var html='<h3 style="margin-bottom:8px">编辑人员</h3>';
+  html+='<form method="post" action="/ui/face-gallery/rename" style="margin-bottom:12px;display:flex;gap:8px;align-items:flex-end">';
+  html+='<input type="hidden" name="id" value="'+id+'"><label style="flex:1;margin:0"><span class="small muted" style="display:block;margin-bottom:4px">姓名</span><input type="text" name="name" value="'+esc(name)+'" required /></label>';
+  html+='<button class="btn" type="submit" style="margin-bottom:1px">保存</button></form>';
+  html+='<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px">';
+  photos.forEach(function(p){
+    html+='<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="this.parentElement.remove()">&times;</button></div>';
+  });
+  html+='</div>';
+  html+='<form method="post" action="/ui/face-gallery/add-photo" enctype="multipart/form-data" style="display:flex;gap:8px;align-items:flex-end">';
+  html+='<input type="hidden" name="id" value="'+id+'"><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>';
+  html+='<button class="btn ghost" type="submit" style="margin-bottom:1px">上传</button></form>';
+  document.getElementById('modal-body').innerHTML=html;
   document.getElementById('modal').style.display='flex';
 }
 function closeModal(){document.getElementById('modal').style.display='none';}