feat: 人员库弹框显示人员图片

web/static/app.js

@@ -630,7 +630,15 @@ function loadPersonsList() {
                 var firstSeen = new Date(person.first_seen).toLocaleString();
                 var lastSeen = new Date(person.last_seen).toLocaleString();
                 
-                item.innerHTML = '<div class="person-info">' +
+                // 构建人员图片URL
+                var faceImgHtml = '<div class="person-face-placeholder">No Image</div>';
+                if (person.face_path) {
+                    faceImgHtml = '<img class="person-face-img" src="/api/persons/' + person.person_id + '/face" alt="' + person.name + '" onerror="this.parentElement.innerHTML=\'<div class=&quot;person-face-placeholder&quot;>No Image</div>\'">';
+                }
+                
+                item.innerHTML = '<div class="person-face">' + faceImgHtml + '</div>' +
+                    '<div class="person-content">' +
+                    '<div class="person-info">' +
                     '<span class="person-name">' + person.name + '</span>' +
                     '<span class="person-id">' + person.person_id + '</span>' +
                     '</div>' +
@@ -642,6 +650,7 @@ function loadPersonsList() {
                     '<div class="person-actions">' +
                     '<button onclick="renamePerson(\'' + person.person_id + '\')" class="btn-small">Rename</button>' +
                     '<button onclick="deletePerson(\'' + person.person_id + '\')" class="btn-small btn-danger">Delete</button>' +
+                    '</div>' +
                     '</div>';
                 
                 listDiv.appendChild(item);

web/static/style.css

@@ -751,6 +751,38 @@ button {
     margin-bottom: 8px;
     border-radius: 8px;
     border-left: 4px solid #2196F3;
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+}
+
+.person-face {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #e0e0e0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.person-face-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.person-face-placeholder {
+    color: #888;
+    font-size: 12px;
+    text-align: center;
+}
+
+.person-content {
+    flex: 1;
+    min-width: 0;
 }
 
 .person-info {
@@ -771,6 +803,7 @@ button {
 
 .person-stats {
     display: flex;
+    flex-wrap: wrap;
     gap: 10px;
     color: #555;
     font-size: 12px;