Enhance search result highlighting with current result indicator and improved match styling

This commit is contained in:
2026-01-28 20:14:10 +00:00
parent 4c89d15525
commit 06a8bf956e

View File

@@ -128,8 +128,8 @@
<div v-if="searchResults.length > 0" class="search-results">
<span :title="`Line ${searchResults[currentResultIndex] + 1}`">
{{ currentResultIndex + 1 }} / {{ searchResults.length }}
(Line {{ searchResults[currentResultIndex] + 1 }})
{{ currentResultIndex + 1 }} / {{ searchResults.length }} (Line
{{ searchResults[currentResultIndex] + 1 }})
</span>
<button
@click="goToPrevResult"
@@ -240,7 +240,8 @@
:class="[
'line',
{ selected: selectedLines.has(item.lineNumber) },
{ 'highlight-match': item.hasMatch }
{ 'highlight-match': item.hasMatch },
{ 'current-result': item.lineNumber === searchResults[currentResultIndex] + 1 }
]"
@click="toggleLineSelection(item.lineNumber, $event)"
>
@@ -263,7 +264,8 @@
:class="[
'line',
{ selected: selectedLines.has(line.lineNumber) },
{ 'highlight-match': line.hasMatch }
{ 'highlight-match': line.hasMatch },
{ 'current-result': line.lineNumber === searchResults[currentResultIndex] + 1 }
]"
@click="toggleLineSelection(line.lineNumber, $event)"
>
@@ -398,6 +400,15 @@ const highlightConfig = computed(() => ({
language: 'json'
}));
// Helper to get highlighted content for search results
function getHighlightedContent(lineContent) {
if (!searchQuery.value.trim()) return lineContent;
const searchTerm = searchQuery.value;
const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
return lineContent.replace(regex, '<mark>$1</mark>');
}
// URL state sync
const urlStateRefs = {
file: selectedFile,
@@ -1131,7 +1142,14 @@ onMounted(() => {
}
.line.highlight-match {
background: rgba(255, 235, 59, 0.3);
background: rgba(255, 235, 59, 0.4);
border-left: 3px solid #ffc107;
}
.line.current-result {
background: rgba(255, 193, 7, 0.6) !important;
border-left: 5px solid #ff9800 !important;
box-shadow: inset 0 0 0 1px #ff9800;
}
.line-number {