Doni/safesight-control
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: proper face gallery layout with separated sections

Browse Source
This commit is contained in:
tian 2026-05-08 10:01:08 +08:00
parent 981731e2ce
commit dfddae13fb
1 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
internal/web/ui/templates/face_gallery.html
View File

@ -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>