feat: add VLM tags display to search result cards

- Shows up to 5 tags per card
- Uses localized language (tag.local) if available, falls back to English
- Styled with small rounded badges
This commit is contained in:
2026-10-27 06:32:03 +08:00
parent 7f31453723
commit 63f8f3562a

View File

@@ -152,6 +152,9 @@
</div> </div>
<div v-if="r._isPerson" class="card-text card-person-stats">{{ r.text_content }}</div> <div v-if="r._isPerson" class="card-text card-person-stats">{{ r.text_content }}</div>
<div v-if="r.text_content && !r._isPerson" class="card-text" v-html="highlightMatch(r.text_content.slice(0, 120), r.search_query)"></div> <div v-if="r.text_content && !r._isPerson" class="card-text" v-html="highlightMatch(r.text_content.slice(0, 120), r.search_query)"></div>
<div v-if="r.vlm_tags && r.vlm_tags.length" class="card-tags">
<span v-for="(tag, i) in r.vlm_tags.slice(0, 5)" :key="i" class="card-tag">{{ tag.local || tag.en }}</span>
</div>
<div class="card-meta"> <div class="card-meta">
<span v-if="!r.ocr_frames && r.start_frame" class="card-frame">F{{ r.start_frame }}–{{ r.end_frame }}</span> <span v-if="!r.ocr_frames && r.start_frame" class="card-frame">F{{ r.start_frame }}–{{ r.end_frame }}</span>
<span v-if="r.start_time != null" class="card-time">({{ formatTime(r.start_time) }}–{{ formatTime(r.end_time) }})</span> <span v-if="r.start_time != null" class="card-time">({{ formatTime(r.start_time) }}–{{ formatTime(r.end_time) }})</span>
@@ -2251,6 +2254,14 @@ function openSource(src: SourceInfo) {
line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden; -webkit-box-orient: vertical; overflow: hidden;
} }
.card-tags {
display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 6px;
}
.card-tag {
font-size: 10px; padding: 2px 6px; border-radius: 4px;
background: var(--border-light); color: var(--text-secondary);
white-space: nowrap;
}
.card-file { .card-file {
padding: 0 8px 4px; font-size: 10px; color: var(--muted-text); padding: 0 8px 4px; font-size: 10px; color: var(--muted-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;