添加搜索功能到二维码合集页面

qr-collection.html

@@ -75,7 +75,24 @@
       border-bottom: 1px solid #E0E0E0;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      gap: 12px;
+    }
+
+    .filter-section .filter-toggle {
+      flex-shrink: 0;
+    }
+
+    .filter-section .search-box {
+      flex: 1;
+      min-width: 150px;
+    }
+
+    .filter-section .search-box input:focus {
+      border-color: #4CAF50;
+    }
+
+    .filter-section .filter-sidebar-btn {
+      flex-shrink: 0;
     }
 
     .filter-title {
@@ -331,7 +348,10 @@
         <button class="filter-toggle-btn active" data-filter="all">全部</button>
         <button class="filter-toggle-btn" data-filter="me">我的</button>
       </div>
-      <button id="filterSidebarBtn" class="filter-sidebar-btn" style="display: none;">
+      <div class="search-box">
+        <input type="text" id="searchInput" placeholder="搜索电话号码/主体名称/邀请者" style="width: 100%; padding: 8px 12px; border: 1px solid #E0E0E0; border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.3s;">
+      </div>
+      <button id="filterSidebarBtn" class="filter-sidebar-btn" style="display: flex;">
         <span>🔍</span>
         <span>筛选</span>
       </button>
@@ -463,7 +483,8 @@
               
               // 添加点击事件
               button.addEventListener('click', function() {
-                filterQrCodes(this.dataset.filter, this.dataset.inviter);
+                const searchInput = document.getElementById('searchInput');
+                filterQrCodes(this.dataset.filter, this.dataset.inviter, searchInput ? searchInput.value : '');
                 closeSidebar();
               });
               
@@ -546,7 +567,7 @@
     }
 
     // 筛选二维码
-    function filterQrCodes(filter, inviterName) {
+    function filterQrCodes(filter, inviterName, searchKeyword = '') {
       const user = loadUserInfo();
       const qrCollectionElement = document.getElementById('qrCollection');
       
@@ -583,6 +604,18 @@
               );
             }
             
+            // 搜索功能
+            if (searchKeyword) {
+              const keyword = searchKeyword.toLowerCase();
+              filteredQrCodes = filteredQrCodes.filter(qrCode => {
+                return (
+                  (qrCode.phoneNumber && qrCode.phoneNumber.toLowerCase().includes(keyword)) ||
+                  (qrCode.company && qrCode.company.toLowerCase().includes(keyword)) ||
+                  (qrCode.inviter && qrCode.inviter.toLowerCase().includes(keyword))
+                );
+              });
+            }
+            
             if (filteredQrCodes.length > 0) {
               renderQrCollection(filteredQrCodes, user, data.isAdmin);
             } else {
@@ -621,6 +654,31 @@
       if (sidebarOverlay) {
         sidebarOverlay.addEventListener('click', closeSidebar);
       }
+      
+      // 绑定筛选切换按钮事件
+      document.querySelectorAll('.filter-toggle-btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+          // 更新按钮状态
+          document.querySelectorAll('.filter-toggle-btn').forEach(b => {
+            b.classList.remove('active');
+          });
+          this.classList.add('active');
+          
+          // 执行筛选
+          const searchInput = document.getElementById('searchInput');
+          filterQrCodes(this.dataset.filter, null, searchInput ? searchInput.value : '');
+        });
+      });
+      
+      // 绑定搜索框输入事件
+      const searchInput = document.getElementById('searchInput');
+      if (searchInput) {
+        searchInput.addEventListener('input', function() {
+          const activeFilterBtn = document.querySelector('.filter-toggle-btn.active');
+          const filter = activeFilterBtn ? activeFilterBtn.dataset.filter : 'all';
+          filterQrCodes(filter, null, this.value);
+        });
+      }
     };
   </script>
 </body>