From dfddae13fbbee65b328f44295c13d22203446456 Mon Sep 17 00:00:00 2001
From: tian <11429339@qq.com>
Date: Fri, 8 May 2026 10:01:08 +0800
Subject: [PATCH] style: proper face gallery layout with separated sections

---
 internal/web/ui/templates/face_gallery.html | 59 +++++++++++++++------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/internal/web/ui/templates/face_gallery.html b/internal/web/ui/templates/face_gallery.html
index 59d72bb..9636bb0 100644
--- a/internal/web/ui/templates/face_gallery.html
+++ b/internal/web/ui/templates/face_gallery.html
@@ -3,30 +3,55 @@
   <div class="section-title">
     <div>
       <h2 class="title-with-icon">{{icon "profile"}}<span>人脸库管理</span></h2>
-      <div class="form-hint">新增人员需上传照片，系统自动提取人脸特征。修改后需点击"重新生成"。</div>
-    </div>
-    <div class="actions compact">
-      <form method="post" action="/ui/face-gallery/import" enctype="multipart/form-data" style="display:flex;gap:8px;align-items:center">
-        <input type="file" name="photos" webkitdirectory multiple required style="width:200px">
-        <button class="btn secondary" type="submit">批量导入</button>
-      </form>
-      <form method="post" action="/ui/face-gallery/add" enctype="multipart/form-data" style="display:flex;gap:8px;align-items:center">
-        <input type="text" name="name" placeholder="姓名" required style="width:100px">
-        <input type="file" name="photo" accept="image/*" required style="width:160px">
-        <button class="btn" type="submit">新增人员</button>
-      </form>
-      <form method="post" action="/ui/face-gallery/build" style="display:inline">
-        <button class="btn secondary" type="submit">重新生成人脸库</button>
-      </form>
+      <div class="form-hint">批量导入或逐个添加人员照片，然后重新生成人脸库并下发到设备。</div>
     </div>
   </div>
 </div>
 
 {{if .Message}}
-<div class="card"><div class="muted small mono" style="white-space:pre-wrap">{{.Message}}</div></div>
+<div class="card"><pre class="muted small" style="white-space:pre-wrap;margin:0">{{.Message}}</pre></div>
 {{end}}
 
+<div class="detail-grid">
+  <div class="card">
+    <h3 class="title-with-icon">{{icon "overview"}}<span>批量导入</span></h3>
+    <div class="form-hint" style="margin-bottom:12px">选择按姓名分目录的照片根目录，系统自动识别子目录名作为人员姓名。</div>
+    <form method="post" action="/ui/face-gallery/import" enctype="multipart/form-data">
+      <div class="field-grid">
+        <label class="full"><span>选择照片目录</span><input type="file" name="photos" webkitdirectory multiple required /></label>
+      </div>
+      <div class="actions" style="margin-top:12px">
+        <button class="btn" type="submit">批量导入</button>
+      </div>
+    </form>
+  </div>
+
+  <div class="card">
+    <h3 class="title-with-icon">{{icon "edit"}}<span>新增人员</span></h3>
+    <div class="form-hint" style="margin-bottom:12px">添加单个人员并上传照片。</div>
+    <form method="post" action="/ui/face-gallery/add" enctype="multipart/form-data">
+      <div class="field-grid">
+        <label><span>姓名</span><input type="text" name="name" placeholder="例如：张三" required /></label>
+        <label><span>照片</span><input type="file" name="photo" accept="image/*" required /></label>
+      </div>
+      <div class="actions" style="margin-top:12px">
+        <button class="btn" type="submit">新增</button>
+      </div>
+    </form>
+  </div>
+</div>
+
 <div class="card">
+  <div class="section-title">
+    <div>
+      <h3 class="title-with-icon">{{icon "profile"}}<span>人员列表</span></h3>
+    </div>
+    <div class="actions">
+      <form method="post" action="/ui/face-gallery/build">
+        <button class="btn secondary" type="submit">重新生成人脸库</button>
+      </form>
+    </div>
+  </div>
   <div class="table-wrap">
     {{if .FaceGalleryPersons}}
     <table>
@@ -51,7 +76,7 @@
     {{else}}
     <div class="empty-state">
       <div class="empty-title">人脸库为空</div>
-      <div class="muted">请先添加人员并上传照片，然后点击"重新生成人脸库"。</div>
+      <div class="muted">请先批量导入或新增人员，然后点击"重新生成人脸库"。</div>
     </div>
     {{end}}
   </div>