From e6b9b7b4b839d1bb07aad8ec4816da1ba93ca026 Mon Sep 17 00:00:00 2001
From: Momentry Studio <admin@momentry.local>
Date: Sat, 25 Jul 2026 13:55:01 +0800
Subject: [PATCH] refactor: add # separator to display format
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Display format with # separator:
- Frame: F#{number} (e.g., F#333)
- Face Trace: FS#{number} (e.g., FS#233)

Changes:
- Line 105: Frame range display (F#2219–F#2225)
- Line 143: Face Detail Modal (file_uuid:FS#233)
- Line 262: Cluster strip fallback (FS#233)
- Line 264: Cluster strip label (FS#233)

Benefits:
- # separator makes ID clearer
- Consistent format across all displays
- Visual distinction between type and number
---
 src/views/PeopleView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/PeopleView.vue b/src/views/PeopleView.vue
index 22e1cdc..4b08583 100644
--- a/src/views/PeopleView.vue
+++ b/src/views/PeopleView.vue
@@ -102,7 +102,7 @@
             <span class="ms-ppl-face-name">F#{{ t.trace_id }} · {{ t.frame_count }} frames</span>
             <span class="ms-ppl-trace-group-label" :title="traceGroupMap[String(t.trace_id)] || getFileName(t.file_uuid)">{{ traceGroupMap[String(t.trace_id)] || getFileName(t.file_uuid) }}</span>
             <div class="ms-ppl-face-range">
-              <span class="ms-ppl-face-frame">F{{ t.start_frame }}–{{ t.end_frame }}</span>
+              <span class="ms-ppl-face-frame">F#{{ t.start_frame }}–F#{{ t.end_frame }}</span>
             </div>
           </div>
         </div>
@@ -140,7 +140,7 @@
           </div>
           <div class="ms-face-detail-info">
             <div class="ms-face-detail-title">
-              <span class="ms-face-trace-id">{{ faceDetailModal.candidate?.file_uuid }}:FS{{ faceDetailModal.candidate?.trace_id }}</span>
+              <span class="ms-face-trace-id">{{ faceDetailModal.candidate?.file_uuid }}:FS#{{ faceDetailModal.candidate?.trace_id }}</span>
             </div>
             <div class="ms-face-detail-row">
               <span class="ms-face-detail-label">{{ t('people.face_detail.frame_number') }}</span>
@@ -259,9 +259,9 @@
               </div>
               <div class="ms-ppl-strip-face-img">
                 <img v-if="faceThumbsCache[thumbTraceKey(t)]" :src="faceThumbsCache[thumbTraceKey(t)]" alt="" loading="lazy">
-                <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;">FS{{ t.trace_id }}</div>
+                <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;">FS#{{ t.trace_id }}</div>
               </div>
-              <div class="ms-ppl-strip-trace-label">FS{{ t.trace_id }}<span class="ms-ppl-strip-group-name">{{ clusterDetailModal.cluster?.name }}</span></div>
+              <div class="ms-ppl-strip-trace-label">FS#{{ t.trace_id }}<span class="ms-ppl-strip-group-name">{{ clusterDetailModal.cluster?.name }}</span></div>
             </div>
           </div>
           <button class="ms-ppl-strip-arrow" :disabled="clusterStripPage >= clusterStripTotalPages" @click="clusterStripPage++">›</button>