feat: pending identity sorting, face detail modal, video player fps, processor counts

2026-06-24 02:02:33 +08:00
parent 7855983dc1
commit f915aaf794
9 changed files with 1479 additions and 324 deletions
--- a/src/views/PersonDetailView.vue
+++ b/src/views/PersonDetailView.vue
@@ -103,57 +103,69 @@
        </div>
      </div>

+      <!-- Trace strip (face_traces from get_traces) -->
      <div class="ms-ppl-strip-wrap" :class="{ 'ms-ppl-edit-mode': isEditing }">
        <button class="ms-ppl-strip-add-btn" @click="showCandidates = true" title="加入相同人物">＋</button>
+        <button class="ms-ppl-strip-arrow" :disabled="faceStripPage === 1" @click="prevFacePage">‹</button>
        <div class="ms-ppl-face-strip">
-          <div v-if="loadingFaces" style="padding:10px;color:#999;font-size:12px;">Loading faces...</div>
-          <div v-else-if="faces.length === 0" style="padding:10px;color:#999;font-size:12px;">No faces found</div>
-          <div v-for="f in faces.slice(0, showAllFaces ? faces.length : 30)" :key="f.id" class="ms-ppl-strip-face ms-ppl-strip-face-clickable" :class="{ selected: selectedFace?.id === f.id }" @click="selectFace(f)" @contextmenu.prevent="showFaceCtxMenu($event, f)">
+          <div v-if="loadingTraces" style="padding:10px;color:#999;font-size:12px;">Loading traces...</div>
+          <div v-else-if="allTraces.length === 0" style="padding:10px;color:#999;font-size:12px;">No traces found</div>
+          <div v-for="(t, i) in paginatedTraces" :key="t.trace_id" class="ms-ppl-strip-face ms-ppl-strip-face-clickable" :class="{ selected: selectedTrace?.trace_id === t.trace_id }" @click="selectTrace(t)" @contextmenu.prevent="showTraceCtxMenu($event, t)">
            <div class="ms-ppl-strip-face-img">
-              <img v-if="faceThumbs[f.id]" :src="faceThumbs[f.id]" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;border-radius:8px;">
-              <div v-else style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#eef2ff;color:#6366f1;font-size:14px;font-weight:600;border-radius:8px;">{{ Math.round(f.confidence * 100) }}%</div>
+              <img v-if="traceThumbs[thumbKey(t.file_uuid, t.first_frame)]" :src="traceThumbs[thumbKey(t.file_uuid, t.first_frame)]" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;border-radius:8px;">
+              <div v-else style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#eef2ff;color:#6366f1;font-size:10px;font-weight:600;border-radius:8px;">T{{ t.trace_id }}</div>
            </div>
-            <button v-if="isEditing" class="ms-ppl-strip-remove-btn" @click="unbindFace(f)">×</button>
+            <div class="ms-ppl-strip-trace-label">T{{ t.trace_id }} {{ t.face_id ? 'F' + t.face_id.slice(-4) : '' }}</div>
+            <button v-if="isEditing" class="ms-ppl-strip-remove-btn" @click="unbindFace(t)">×</button>
          </div>
        </div>
-        <button v-if="faces.length > 30" class="ms-ppl-strip-arrow" @click="showAllFaces = !showAllFaces">›</button>
+        <button class="ms-ppl-strip-arrow" :disabled="faceStripPage >= faceStripTotalPages" @click="nextFacePage">›</button>
+        <span v-if="faceStripTotalPages > 1" class="ms-ppl-strip-page">{{ faceStripPage }}/{{ faceStripTotalPages }}</span>
      </div>

-      <!-- Face detail card -->
-      <div v-if="selectedFace" class="ms-ppl-face-card-detail">
-        <button class="ms-ppl-face-card-close" @click="selectedFace = null">×</button>
+      <!-- Trace detail card -->
+      <div v-if="selectedTrace" class="ms-ppl-face-card-detail">
+        <button class="ms-ppl-face-card-close" @click="selectedTrace = null">×</button>
        <div class="ms-ppl-face-card-img-wrap">
-          <img v-if="faceThumbs[selectedFace.id]" :src="faceThumbs[selectedFace.id]" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:12px;">
+          <img v-if="traceThumbs[thumbKey(selectedTrace.file_uuid, selectedTrace.first_frame)]" :src="traceThumbs[thumbKey(selectedTrace.file_uuid, selectedTrace.first_frame)]" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:12px;">
          <div v-else class="face-placeholder">?</div>
        </div>
        <div class="ms-ppl-face-card-info">
-          <div class="ms-ppl-face-card-file">{{ (selectedFace.file_uuid || '').slice(0, 12) }}...</div>
-          <div class="ms-ppl-face-card-frame">Frame #{{ selectedFace.frame_number }}</div>
-          <div v-if="selectedFace.confidence" class="ms-ppl-face-card-conf">Confidence: {{ (selectedFace.confidence * 100).toFixed(1) }}%</div>
+          <div class="ms-ppl-face-card-file">trace_id: {{ selectedTrace.trace_id }}</div>
+          <div class="ms-ppl-face-card-frame">face_id: {{ selectedTrace.face_id || '—' }}</div>
+          <div class="ms-ppl-face-card-time">
+            {{ (selectedTrace.first_sec || 0).toFixed(1) }}s ~ {{ (selectedTrace.last_sec || 0).toFixed(1) }}s
+            <span class="ms-ppl-face-card-dur">({{ traceDuration(selectedTrace).toFixed(1) }}s)</span>
+          </div>
+          <div class="ms-ppl-face-card-fps" v-if="traceFps(selectedTrace)">
+            {{ traceFps(selectedTrace) }} fps · {{ selectedTrace.last_frame - selectedTrace.first_frame }} frames
+          </div>
+          <div class="ms-ppl-face-card-conf">#{{ selectedTrace.first_frame }}–#{{ selectedTrace.last_frame }} · {{ selectedTrace.file_uuid?.slice(0, 8) }}...</div>
          <div class="ms-ppl-face-card-actions">
-            <button class="ms-fm-btn" @click="playFaceTrace(selectedFace)">▶ 播放片段</button>
-            <button v-if="isEditing" class="ms-fm-btn ms-fm-btn-danger" @click="unbindFace(selectedFace); selectedFace = null">✕ 解綁</button>
+            <button class="ms-fm-btn" @click="playTrace(selectedTrace)">▶ 播放</button>
+            <button v-if="isEditing && selectedTrace.face_id" class="ms-fm-btn ms-fm-btn-danger" @click="unbindFace(selectedTrace); selectedTrace = null">✕ 解綁</button>
          </div>
        </div>
      </div>

-      <!-- Segment card -->
-      <div v-if="mergedSegments.length" class="ms-ppl-media-item segment-card" @click="playMerged(mergedSegments[0])">
+      <!-- Single segment card (entry point to player with all traces) -->
+      <div v-if="loadingTraces" class="ms-ppl-media-label" style="margin-bottom:20px;">Loading segments...</div>
+      <div v-else-if="loadingMoreTraces" class="ms-ppl-media-label" style="margin-bottom:20px;color:#9aa0a6;">Loading more segments...</div>
+      <div v-if="allSegCard" class="ms-ppl-media-item segment-card" @click="playAllSegments">
        <div class="ms-ppl-media-thumb">
-          <img v-if="thumbs[mergedSegments[0].thumbKey]" :src="thumbs[mergedSegments[0].thumbKey]" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;">
+          <img v-if="thumbs[allSegCard.thumbKey]" :src="thumbs[allSegCard.thumbKey]" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;">
          <div class="ms-thumb-play-circle">
            <svg width="20" height="20" viewBox="0 0 24 24"><polygon points="6,4 20,12 6,20" fill="white"/></svg>
          </div>
-          <span class="ms-ppl-media-dur">{{ (mergedSegments[0].end - mergedSegments[0].start).toFixed(1) }}s</span>
-          <span v-if="mergedSegments[0].avg_confidence" class="ms-ppl-media-badge-conf">{{ (mergedSegments[0].avg_confidence * 100).toFixed(0) }}%</span>
+          <span class="ms-ppl-media-dur">{{ allSegCard.duration.toFixed(1) }}s</span>
+          <span v-if="allSegCard.avg_confidence" class="ms-ppl-media-badge-conf">{{ (allSegCard.avg_confidence * 100).toFixed(0) }}%</span>
        </div>
        <div class="ms-ppl-media-info">
-          <div class="ms-ppl-media-title">{{ mergedSegments[0].count > 1 ? 'Merged ' + mergedSegments[0].count + ' segments' : 'Segment' }} · {{ mergedSegments[0].file_uuid.slice(0,8) }}...</div>
-          <div class="ms-ppl-media-sub">#{{ mergedSegments[0].start_frame }} — #{{ mergedSegments[0].end_frame }} · {{ formatTime(mergedSegments[0].start) }}</div>
+          <div class="ms-ppl-media-title">{{ allSegCard.count }} 個片段 · {{ allTraces.length }} 個追蹤</div>
+          <div class="ms-ppl-media-sub">所有片段 · {{ formatTime(allSegCard.start) }}</div>
        </div>
      </div>
-      <div v-if="loadingTraces" class="ms-ppl-media-label" style="margin-bottom:20px;">Loading segments...</div>
-      <div v-else-if="!mergedSegments.length" class="ms-ppl-media-label" style="margin-bottom:20px;">No trace segments available for this person</div>
+      <div v-else-if="!loadingTraces" class="ms-ppl-media-label" style="margin-bottom:20px;">No trace segments available for this person</div>

      <!-- Tabs -->
      <div v-show="activeTab === 'actions'">
@@ -234,21 +246,21 @@
      </div>
    </div>

-    <VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :all-traces="allTraces" :initial-trace-idx="currentVideo.traceIdx" :title="currentVideo.title" @close="playing = false" />
+    <VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :all-traces="allTraces" :merged-segments="mergedSegments" :initial-trace-idx="currentVideo.traceIdx" :title="currentVideo.title" @close="playing = false" />

-    <!-- Face strip context menu -->
-    <div v-if="faceCtxMenu.show" class="ms-ctx-menu" :style="{ left: faceCtxMenu.x + 'px', top: faceCtxMenu.y + 'px', display: 'block' }" @click.stop @mousedown.stop @pointerdown.stop>
-      <button class="ms-ctx-item ms-ctx-danger" @click="faceCtxAction('unbind')">不是此人物</button>
+    <!-- Trace strip context menu -->
+    <div v-if="traceCtxMenu.show" class="ms-ctx-menu" :style="{ left: traceCtxMenu.x + 'px', top: traceCtxMenu.y + 'px', display: 'block' }" @click.stop @mousedown.stop @pointerdown.stop>
+      <button class="ms-ctx-item ms-ctx-danger" @click="traceCtxAction('unbind')">不是此人物</button>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { apiCall } from '@/api'
 import { isTauri } from '@/api/config'
-import { ensurePeople, peopleCache, peopleLoaded, profilesCache, loadProfile as storeLoadProfile, faceThumbsCache, loadFaceThumb as storeLoadFaceThumb, thumbnailsCache, invalidatePeople, invalidateProfile } from '@/store'
+import { ensurePeople, peopleCache, peopleLoaded, profilesCache, loadProfile as storeLoadProfile, faceThumbsCache, loadFaceThumb as storeLoadFaceThumb, thumbnailsCache, loadThumbnail, invalidatePeople, invalidateProfile } from '@/store'
 import VideoPlayer from '@/components/VideoPlayer.vue'

 const route = useRoute()
@@ -256,13 +268,11 @@ const router = useRouter()

 const person = ref<any>(null)
 const loading = ref(true)
-const loadingFaces = ref(true)
 const loadingTraces = ref(true)
 const profile = ref('')
 const profileUuid = ref('')
 const peopleCount = ref(0)
 const allPeople = ref<any[]>([])
-const faces = ref<any[]>([])
 const allTraces = ref<any[]>([])
 const mergedSegments = ref<any[]>([])
 const playing = ref(false)
@@ -272,9 +282,28 @@ const showMerge = ref(false)
 const mergeSearchQuery = ref('')
 const mergeSearchResults = ref<any[]>([])
 const candidates = ref<any[]>([])
-const showAllFaces = ref(false)
 const thumbs = thumbnailsCache
+const traceThumbs = thumbnailsCache
 const faceThumbs = faceThumbsCache
+
+const allSegCard = computed(() => {
+  const m = mergedSegments.value
+  if (!m.length) return null
+  const segs = [...m].sort((a, b) => a.start - b.start)
+  const first = segs[0]
+  const last = segs[segs.length - 1]
+  const firstTrace = allTraces.value[first._startIdx]
+  return {
+    thumbKey: first.thumbKey,
+    start: first.start,
+    end: last.end,
+    duration: last.end - first.start,
+    count: m.length,
+    avg_confidence: m.reduce((s, x) => s + (x.avg_confidence || 0), 0) / m.length,
+    firstTraceIdx: first._startIdx,
+  }
+})
+
 const isEditing = ref(false)
 const editName = ref('')
 const editRole = ref('')
@@ -286,9 +315,19 @@ const aliasName = ref('')
 const saving = ref(false)
 const avatarUploading = ref(false)
 const activeTab = ref<'faces' | 'actions'>('faces')
-const faceCtxMenu = ref({ show: false, x: 0, y: 0, face: null as any })
-const selectedFace = ref<any>(null)
+const traceCtxMenu = ref({ show: false, x: 0, y: 0, trace: null as any })
+const selectedTrace = ref<any>(null)
 const fileInput = ref<HTMLInputElement | null>(null)
+const loadingMoreTraces = ref(false)
+const faceStripPage = ref(1)
+const faceStripPerPage = 20
+const paginatedTraces = computed(() => {
+  const start = (faceStripPage.value - 1) * faceStripPerPage
+  return allTraces.value.slice(start, start + faceStripPerPage)
+})
+const faceStripTotalPages = computed(() => Math.ceil(allTraces.value.length / faceStripPerPage))
+function prevFacePage() { if (faceStripPage.value > 1) faceStripPage.value-- }
+function nextFacePage() { if (faceStripPage.value < faceStripTotalPages.value) faceStripPage.value++ }

 onMounted(async () => {
  const uuid = route.params.uuid as string
@@ -300,7 +339,6 @@ onMounted(async () => {
    if (found) {
      person.value = { ...found, status: found.status || 'confirmed' }
      loadProfile(uuid)
-      loadFaces(uuid)
      loadMedia(uuid)
    }
  } catch (e) {
@@ -309,11 +347,11 @@ onMounted(async () => {
    loading.value = false
  }
  loadCandidates()
-  document.addEventListener('click', closeFaceCtxMenu)
+  document.addEventListener('click', closeTraceCtxMenu)
 })

 onUnmounted(() => {
-  document.removeEventListener('click', closeFaceCtxMenu)
+  document.removeEventListener('click', closeTraceCtxMenu)
 })

 function loadProfile(uuid: string) {
@@ -333,133 +371,130 @@ function thumbKey(uuid: string, frame: number): string {
  return `${uuid}:${frame}`
 }

-async function loadFaces(uuid: string) {
-  loadingFaces.value = true
-  try {
-    const result: any = await apiCall('get_faces', { uuid, perPage: 20 })
-    const items = Array.isArray(result) ? result : []
-    faces.value = items
-    items.forEach((f: any) => {
-    const fu = f.file_uuid || f.fileUuid || ''
-    const fn = f.frame_number ?? f.frameNumber ?? 0
-    const fid = f.id
-    const bbox = f.bbox
-    storeLoadFaceThumb(fid, fu, fn, bbox)
-  })
-  } catch (e) { console.error('Failed to load faces:', e) }
-  finally { loadingFaces.value = false }
+function selectTrace(t: any) {
+  selectedTrace.value = t
+  // Load thumbnail for this trace
+  loadThumb(t.file_uuid, t.first_frame || 0)
 }

-function selectFace(f: any) {
-  selectedFace.value = f
-}
-
-function playFaceTrace(f: any) {
-  const fu = f.file_uuid || f.fileUuid || ''
-  const frame = f.frame_number ?? f.frameNumber ?? 0
-  const trace = allTraces.value.find((t: any) => t.file_uuid === fu && frame >= (t.first_frame || t.start_frame || 0) && frame <= (t.last_frame || t.end_frame || 0))
-  if (trace) {
-    currentVideo.value = {
-      fileUuid: fu,
-      startTime: trace.first_sec || trace.start_time || 0,
-      endTime: trace.last_sec || trace.end_time || 0,
-      traceIdx: allTraces.value.indexOf(trace),
-      title: `${person.value?.name} · Face #${frame}`,
-    }
-  } else {
-    currentVideo.value = {
-      fileUuid: fu,
-      startTime: Math.max(0, (frame / 30) - 5),
-      endTime: (frame / 30) + 5,
-      traceIdx: 0,
-      title: `${person.value?.name} · Face #${frame}`,
-    }
+function playTrace(t: any) {
+  if (!t) return
+  const idx = allTraces.value.indexOf(t)
+  if (idx < 0) return
+  currentVideo.value = {
+    fileUuid: t.file_uuid || '',
+    startTime: t.first_sec || t.start_time || 0,
+    endTime: t.last_sec || t.end_time || 0,
+    traceIdx: idx,
+    title: `${person.value?.name} · T${t.trace_id}`,
  }
  playing.value = true
 }

-function showFaceCtxMenu(e: MouseEvent, f: any) {
+function showTraceCtxMenu(e: MouseEvent, t: any) {
  e.preventDefault()
  e.stopPropagation()
-  faceCtxMenu.value = { show: true, x: e.clientX, y: e.clientY, face: { ...f } }
+  traceCtxMenu.value = { show: true, x: e.clientX, y: e.clientY, trace: { ...t } }
 }

-function closeFaceCtxMenu(e?: MouseEvent) {
-  faceCtxMenu.value.show = false
+function closeTraceCtxMenu(e?: MouseEvent) {
+  traceCtxMenu.value.show = false
 }

-function faceCtxAction(action: string) {
-  const f = faceCtxMenu.value.face
-  faceCtxMenu.value = { show: false, x: 0, y: 0, face: null }
-  if (!f) {
-    console.error('faceCtxAction: no face data')
+function traceCtxAction(action: string) {
+  const t = traceCtxMenu.value.trace
+  traceCtxMenu.value = { show: false, x: 0, y: 0, trace: null }
+  if (!t) {
+    console.error('traceCtxAction: no trace data')
    return
  }
  if (!person.value) {
-    console.error('faceCtxAction: no person data')
+    console.error('traceCtxAction: no person data')
    return
  }
  if (action === 'unbind') {
-    unbindFace(f)
+    unbindFace(t)
  }
 }

 async function loadMedia(uuid: string) {
  loadingTraces.value = true
  try {
-    const result: any = await apiCall('get_traces', { uuid, perPage: 50 })
-    const rawItems = Array.isArray(result) ? result : []
-    if (!rawItems.length) { mergedSegments.value = []; return }
-
-    rawItems.sort((a: any, b: any) => (a.first_sec || a.start_time || 0) - (b.first_sec || b.start_time || 0))
-    allTraces.value = rawItems
-
-    const merged: any[] = []
-    let cur: any = null
-    rawItems.forEach((item: any, idx: number) => {
-      const st = item.first_sec || item.start_time || 0
-      const en = item.last_sec || item.end_time || 0
-      const fu = item.file_uuid || ''
-      if (cur && fu === cur.file_uuid && (st - cur.end) < 30) {
-        cur.end = Math.max(cur.end, en)
-        cur.end_frame = Math.max(cur.end_frame, item.last_frame || 0)
-        cur.count++
-        cur._endIdx = idx
-        cur.total_confidence += item.avg_confidence || 0
-      } else {
-        if (cur) merged.push(cur)
-        cur = {
-          file_uuid: fu,
-          start_frame: item.first_frame || 0,
-          end_frame: item.last_frame || 0,
-          start: st,
-          end: en,
-          count: 1,
-          total_confidence: item.avg_confidence || 0,
-          _startIdx: idx,
-          _endIdx: idx,
-          thumbKey: thumbKey(fu, item.first_frame || 0),
-        }
-      }
-    })
-    if (cur) merged.push(cur)
-
-    merged.forEach((m: any) => {
-      m.avg_confidence = m.count > 1 ? m.total_confidence / m.count : m.total_confidence
-      delete m.total_confidence
-    })
-    mergedSegments.value = merged.slice(0, 1)
-    merged.forEach((m: any) => loadThumb(m.file_uuid, m.start_frame))
+    // Load all traces with pagination
+    const allItems: any[] = []
+    for (let page = 1; ; page++) {
+      const result: any = await apiCall('get_traces', { uuid, perPage: 100, page })
+      const items = result?.traces || []
+      if (!items.length) break
+      allItems.push(...items)
+    }
+    processTraces(allItems)
  } catch (e) { console.error('Failed to load media:', e) }
-  finally { loadingTraces.value = false }
+  finally { loadingTraces.value = false; loadingMoreTraces.value = false }
+}
+
+function processTraces(newData: any, append = false) {
+  const items = Array.isArray(newData) ? newData : []
+  if (!items.length) return
+
+  if (!append) {
+    allTraces.value = items.sort((a: any, b: any) => (a.first_sec || a.start_time || 0) - (b.first_sec || b.start_time || 0))
+  } else {
+    loadingMoreTraces.value = true
+    const existingIds = new Set(allTraces.value.map((t: any) => t.trace_id))
+    const fresh = items.filter((t: any) => !existingIds.has(t.trace_id))
+    if (!fresh.length) return
+    allTraces.value = [...allTraces.value, ...fresh].sort((a: any, b: any) =>
+      (a.first_sec || a.start_time || 0) - (b.first_sec || b.start_time || 0)
+    )
+  }
+
+  // Recompute merged segments
+  const merged: any[] = []
+  let cur: any = null
+  allTraces.value.forEach((item: any, idx: number) => {
+    const st = item.first_sec || item.start_time || 0
+    const en = item.last_sec || item.end_time || 0
+    const fu = item.file_uuid || ''
+    if (cur && fu === cur.file_uuid && (st - cur.end) < 30) {
+      cur.end = Math.max(cur.end, en)
+      cur.end_frame = Math.max(cur.end_frame, item.last_frame || 0)
+      cur.count++
+      cur._endIdx = idx
+      cur.total_confidence += item.avg_confidence || 0
+    } else {
+      if (cur) merged.push(cur)
+      cur = {
+        file_uuid: fu,
+        start_frame: item.first_frame || 0,
+        end_frame: item.last_frame || 0,
+        start: st,
+        end: en,
+        count: 1,
+        total_confidence: item.avg_confidence || 0,
+        _startIdx: idx,
+        _endIdx: idx,
+        thumbKey: thumbKey(fu, item.first_frame || 0),
+      }
+    }
+  })
+  if (cur) merged.push(cur)
+
+  merged.forEach((m: any) => {
+    m.avg_confidence = m.count > 1 ? m.total_confidence / m.count : m.total_confidence
+    delete m.total_confidence
+  })
+  mergedSegments.value = merged
+  if (append) loadingMoreTraces.value = false
+
+  // Load thumbnails for visible segments
+  merged.slice(0, 6).forEach((m: any) => loadThumb(m.file_uuid, m.start_frame))
 }

 function loadThumb(uuid: string, frame: number) {
  const key = thumbKey(uuid, frame)
  if (thumbnailsCache.value[key]) return
-  apiCall('get_thumbnail', { uuid, frame }).then((url: any) => {
-    if (url) thumbnailsCache.value[key] = url
-  }).catch(() => {})
+  loadThumbnail(uuid, frame)
 }

 async function loadCandidates() {
@@ -593,19 +628,22 @@ function triggerAvatarUpload() {
  fileInput.value?.click()
 }

-async function unbindFace(f: any) {
+async function unbindFace(t: any) {
  if (!person.value) return
  const uuid = person.value.identity_uuid
-  if (!confirm('解綁此人臉？')) return
+  const fid = t.face_id || t.faceId || null
+  if (!fid) { alert('此 trace 沒有 face_id，無法解綁'); return }
+  if (!confirm(`解綁 trace T${t.trace_id}（face_id: ${fid}）？`)) return
  try {
    await apiCall('unbind_face', {
      uuid,
-      faceId: f.face_id || f.faceId || null,
-      faceRowId: f.id || null,
-      fileUuid: f.file_uuid || f.fileUuid || '',
-      frameNumber: f.frame_number ?? f.frameNumber ?? null,
+      faceId: fid,
+      faceRowId: null,
+      fileUuid: t.file_uuid || t.fileUuid || '',
+      frameNumber: null,
    })
-    await loadFaces(uuid)
+    // Refresh traces
+    await loadMedia(uuid)
    invalidatePeople()
    await ensurePeople()
    allPeople.value = peopleCache.value
@@ -628,6 +666,20 @@ async function updateStatus(status: string) {
  } catch (e) { console.error('Failed to update status:', e) }
 }

+function playAllSegments() {
+  const card = allSegCard.value
+  if (!card || !allTraces.value.length) return
+  const t = allTraces.value[0]
+  currentVideo.value = {
+    fileUuid: t.file_uuid || '',
+    startTime: t.first_sec || t.start_time || 0,
+    endTime: t.last_sec || t.end_time || 0,
+    traceIdx: 0,
+    title: `${person.value?.name} · ${card.count} 個片段`,
+  }
+  playing.value = true
+}
+
 function playMerged(m: any) {
  const t = allTraces.value[m._startIdx]
  if (!t) return
@@ -646,6 +698,19 @@ function formatTime(sec: number): string {
  return `${m}:${s.toString().padStart(2, '0')}`
 }

+function traceDuration(t: any): number {
+  if (!t) return 0
+  return (t.last_sec || 0) - (t.first_sec || 0)
+}
+
+function traceFps(t: any): number | null {
+  if (!t) return null
+  const frameDiff = (t.last_frame || 0) - (t.first_frame || 0)
+  const secDiff = traceDuration(t)
+  if (secDiff <= 0) return null
+  return Math.round(frameDiff / secDiff)
+}
+
 async function refreshPerson() {
  invalidatePeople()
  await ensurePeople()
@@ -745,10 +810,15 @@ let mergeSearchTimer: any
 .ms-ppl-face-card-info { flex: 1; min-width: 0; }
 .ms-ppl-face-card-file { font-size: 13px; color: #5f6368; font-family: monospace; }
 .ms-ppl-face-card-frame { font-size: 13px; color: #3c4043; margin-top: 2px; }
+.ms-ppl-face-card-time { font-size: 13px; color: #3c4043; margin-top: 4px; }
+.ms-ppl-face-card-dur { color: #9aa0a6; margin-left: 4px; }
+.ms-ppl-face-card-fps { font-size: 12px; color: #5f6368; margin-top: 2px; }
 .ms-ppl-face-card-conf { font-size: 12px; color: #9aa0a6; margin-top: 2px; }
 .ms-ppl-face-card-actions { display: flex; gap: 8px; margin-top: 10px; }
 .ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }
-.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }
+.ms-ppl-strip-arrow:hover:not(:disabled) { background: #f3f4f6; color: #202124; }
+.ms-ppl-strip-arrow:disabled { opacity: 0.35; cursor: default; }
+.ms-ppl-strip-page { font-size: 11px; color: #9aa0a6; min-width: 32px; text-align: center; flex-shrink: 0; }
 .ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }
 .ms-ppl-media-item { cursor: pointer; border-radius: 12px; overflow: visible; background: #f0f0f0; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }
 .ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }