From d7bd252044a97f2fc703ceca7e217f88a86e2c62 Mon Sep 17 00:00:00 2001
From: tian <11429339@qq.com>
Date: Fri, 8 May 2026 11:25:23 +0800
Subject: [PATCH] style: inline edit fields, X close button, confirm delete
 photo

---
 internal/web/ui/templates/face_gallery.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/internal/web/ui/templates/face_gallery.html b/internal/web/ui/templates/face_gallery.html
index 33d14c4..41189fa 100644
--- a/internal/web/ui/templates/face_gallery.html
+++ b/internal/web/ui/templates/face_gallery.html
@@ -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'; }