diff --git a/qr-collection.html b/qr-collection.html index 3fa6f5a..710cecb 100644 --- a/qr-collection.html +++ b/qr-collection.html @@ -299,6 +299,14 @@ background-color: #F5F5F5; } + .highlight { + background-color: #FFF3CD; + color: #856404; + padding: 0 2px; + border-radius: 2px; + font-weight: 500; + } + @media (max-width: 480px) { .container { max-width: 100%; @@ -423,7 +431,8 @@ if (data.qrCodes && data.qrCodes.length > 0) { // 渲染二维码合集 - renderQrCollection(data.qrCodes, user, data.isAdmin); + const searchInput = document.getElementById('searchInput'); + renderQrCollection(data.qrCodes, user, data.isAdmin, searchInput ? searchInput.value : ''); } else { // 显示空状态 qrCollectionElement.innerHTML = ` @@ -516,7 +525,7 @@ } // 渲染二维码合集 - function renderQrCollection(qrCodes, currentUser, isAdmin) { + function renderQrCollection(qrCodes, currentUser, isAdmin, searchKeyword = '') { const qrCollectionElement = document.getElementById('qrCollection'); // 生成HTML @@ -525,12 +534,28 @@ // 生成唯一的item ID const itemId = `item_${index}_${encodeURIComponent(qrCode.sessionId || Math.random().toString(36).substr(2, 9))}`; + // 高亮处理 + let highlightedCompany = qrCode.company || '未知'; + let highlightedPhoneNumber = qrCode.phoneNumber || '未知'; + + if (searchKeyword) { + const keyword = searchKeyword.toLowerCase(); + if (qrCode.company && qrCode.company.toLowerCase().includes(keyword)) { + const regex = new RegExp(`(${keyword})`, 'gi'); + highlightedCompany = qrCode.company.replace(regex, '$1'); + } + if (qrCode.phoneNumber && qrCode.phoneNumber.toLowerCase().includes(keyword)) { + const regex = new RegExp(`(${keyword})`, 'gi'); + highlightedPhoneNumber = qrCode.phoneNumber.replace(regex, '$1'); + } + } + html += `
-
${qrCode.company || '未知'}
+
${highlightedCompany}
- ${qrCode.phoneNumber || '未知'} / ${qrCode.createdAt || '未知'} + ${highlightedPhoneNumber} / ${qrCode.createdAt || '未知'}
@@ -616,7 +641,7 @@ } if (filteredQrCodes.length > 0) { - renderQrCollection(filteredQrCodes, user, data.isAdmin); + renderQrCollection(filteredQrCodes, user, data.isAdmin, searchKeyword); } else { qrCollectionElement.innerHTML = `