更新二维码合集页面，将筛选功能改为侧边栏形式，只有管理员能看到

qr-collection.html

@@ -233,20 +233,33 @@
   <div class="container">
     <div class="header">
       <h1>二维码合集</h1>
-      <div class="header-actions">
-        <button class="more-btn">•••</button>
-      </div>
     </div>
     
     <div class="filter-section">
+      <div style="display: flex; align-items: center; justify-content: space-between;">
         <h3>筛选</h3>
+        <button id="filterSidebarBtn" class="filter-sidebar-btn" style="display: none; background: #28a745; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 14px; cursor: pointer;">筛选</button>
+      </div>
       <div class="filter-buttons">
         <button class="filter-btn active" data-filter="all">全部</button>
         <button class="filter-btn" data-filter="me">我的二维码</button>
-        <button class="filter-btn" data-filter="others">他人二维码</button>
       </div>
     </div>
     
+    <!-- 筛选侧边栏 -->
+    <div id="filterSidebar" class="filter-sidebar" style="position: fixed; top: 0; right: -300px; width: 250px; height: 100%; background: white; box-shadow: -2px 0 5px rgba(0,0,0,0.1); z-index: 1000; transition: right 0.3s; padding: 20px;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+        <h3>筛选用户</h3>
+        <button id="closeSidebarBtn" style="background: none; border: none; font-size: 20px; cursor: pointer;">&times;</button>
+      </div>
+      <div id="sidebarFilterButtons" style="display: flex; flex-direction: column; gap: 10px;">
+        <!-- 动态生成的筛选按钮 -->
+      </div>
+    </div>
+    
+    <!-- 遮罩层 -->
+    <div id="sidebarOverlay" class="sidebar-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; display: none; transition: opacity 0.3s;"></div>
+    
     <div id="qrCollection">
       <div class="empty-state">
         <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=empty" alt="空状态">
@@ -340,29 +353,58 @@
     // 动态生成筛选按钮
     function generateFilterButtons(invitees, currentUser) {
       const filterButtonsContainer = document.querySelector('.filter-buttons');
+      const filterSidebarBtn = document.getElementById('filterSidebarBtn');
+      const sidebarFilterButtons = document.getElementById('sidebarFilterButtons');
+      
       if (!filterButtonsContainer) return;
       
-      // 清空现有按钮，保留"全部"和"我的二维码"
+      // 清空现有按钮，只保留"全部"和"我的"
       filterButtonsContainer.innerHTML = `
-        <button class="filter-btn" data-filter="all">全部</button>
-        <button class="filter-btn" data-filter="me">我的二维码</button>
+        <button class="filter-btn active" data-filter="all">全部</button>
+        <button class="filter-btn" data-filter="me">我的</button>
       `;
       
-      // 添加每个邀请者的筛选按钮
+      // 为管理员显示筛选按钮并填充侧边栏
+      if (invitees && invitees.length > 0) {
+        // 显示筛选按钮
+        if (filterSidebarBtn) {
+          filterSidebarBtn.style.display = 'block';
+        }
+        
+        // 填充侧边栏筛选按钮
+        if (sidebarFilterButtons) {
+          sidebarFilterButtons.innerHTML = '';
+          
           invitees.forEach(invitee => {
             // 跳过当前用户自己
             if (invitee.inviter && invitee.inviter !== (currentUser.name || currentUser.userName)) {
               const button = document.createElement('button');
               button.className = 'filter-btn';
+              button.style.width = '100%';
+              button.style.textAlign = 'left';
+              button.style.padding = '8px 12px';
+              button.style.border = '1px solid #ddd';
+              button.style.borderRadius = '4px';
+              button.style.backgroundColor = 'white';
+              button.style.color = '#666';
+              button.style.fontSize = '14px';
+              button.style.cursor = 'pointer';
+              button.style.transition = 'all 0.3s';
               button.dataset.filter = `invitee_${encodeURIComponent(invitee.inviter)}`;
               button.dataset.inviter = invitee.inviter;
               button.textContent = invitee.inviter;
-          filterButtonsContainer.appendChild(button);
-        }
+              
+              // 添加点击事件
+              button.addEventListener('click', function() {
+                filterQrCodes(this.dataset.filter, this.dataset.inviter);
+                closeSidebar();
               });
               
-      // 默认选中"全部"
-      document.querySelector('.filter-btn[data-filter="all"]').classList.add('active');
+              sidebarFilterButtons.appendChild(button);
+            }
+          });
+        }
+      }
       
       // 绑定筛选按钮事件
       document.querySelectorAll('.filter-btn').forEach(btn => {
@@ -374,6 +416,26 @@
       });
     }
     
+    // 打开筛选侧边栏
+    function openSidebar() {
+      const sidebar = document.getElementById('filterSidebar');
+      const overlay = document.getElementById('sidebarOverlay');
+      if (sidebar && overlay) {
+        sidebar.style.right = '0';
+        overlay.style.display = 'block';
+      }
+    }
+    
+    // 关闭筛选侧边栏
+    function closeSidebar() {
+      const sidebar = document.getElementById('filterSidebar');
+      const overlay = document.getElementById('sidebarOverlay');
+      if (sidebar && overlay) {
+        sidebar.style.right = '-300px';
+        overlay.style.display = 'none';
+      }
+    }
+
     // 渲染二维码合集
     function renderQrCollection(qrCodes, currentUser, isAdmin) {
       const qrCollectionElement = document.getElementById('qrCollection');
@@ -482,6 +544,24 @@
     // 页面加载时加载二维码合集
     window.onload = function() {
       loadQrCollection();
+      
+      // 绑定筛选侧边栏按钮事件
+      const filterSidebarBtn = document.getElementById('filterSidebarBtn');
+      if (filterSidebarBtn) {
+        filterSidebarBtn.addEventListener('click', openSidebar);
+      }
+      
+      // 绑定关闭侧边栏按钮事件
+      const closeSidebarBtn = document.getElementById('closeSidebarBtn');
+      if (closeSidebarBtn) {
+        closeSidebarBtn.addEventListener('click', closeSidebar);
+      }
+      
+      // 点击遮罩层关闭侧边栏
+      const sidebarOverlay = document.getElementById('sidebarOverlay');
+      if (sidebarOverlay) {
+        sidebarOverlay.addEventListener('click', closeSidebar);
+      }
     };
   </script>
 </body>