添加搜索内容高亮显示功能

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, '<span class="highlight">$1</span>');
+          }
+          if (qrCode.phoneNumber && qrCode.phoneNumber.toLowerCase().includes(keyword)) {
+            const regex = new RegExp(`(${keyword})`, 'gi');
+            highlightedPhoneNumber = qrCode.phoneNumber.replace(regex, '<span class="highlight">$1</span>');
+          }
+        }
+        
         html += `
           <div class="qr-item" onclick="toggleSection('${itemId}')">
             <div class="qr-item-info">
-              <div class="qr-item-name">${qrCode.company || '未知'}</div>
+              <div class="qr-item-name">${highlightedCompany}</div>
               <div class="qr-item-details">
-                ${qrCode.phoneNumber || '未知'} / ${qrCode.createdAt || '未知'}
+                ${highlightedPhoneNumber} / ${qrCode.createdAt || '未知'}
               </div>
             </div>
             <div class="qr-item-arrow">▼</div>
@@ -616,7 +641,7 @@
             }
             
             if (filteredQrCodes.length > 0) {
-              renderQrCollection(filteredQrCodes, user, data.isAdmin);
+              renderQrCollection(filteredQrCodes, user, data.isAdmin, searchKeyword);
             } else {
               qrCollectionElement.innerHTML = `
                 <div class="empty-state">