From eb642fd5e67db70ce0edfa7c0a9cc7d08df210e2 Mon Sep 17 00:00:00 2001 From: Default User Date: Wed, 4 Feb 2026 16:45:59 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BA=8C=E7=BB=B4=E7=A0=81?= =?UTF-8?q?=E5=90=88=E9=9B=86=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=B0=86=E7=AD=9B?= =?UTF-8?q?=E9=80=89=E5=8A=9F=E8=83=BD=E6=94=B9=E4=B8=BA=E4=BE=A7=E8=BE=B9?= =?UTF-8?q?=E6=A0=8F=E5=BD=A2=E5=BC=8F=EF=BC=8C=E5=8F=AA=E6=9C=89=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E5=91=98=E8=83=BD=E7=9C=8B=E5=88=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- qr-collection.html | 124 +++++++++++++++++++++++++++++++++++++-------- 1 file changed, 102 insertions(+), 22 deletions(-) diff --git a/qr-collection.html b/qr-collection.html index f7186aa..7e5b82a 100644 --- a/qr-collection.html +++ b/qr-collection.html @@ -233,20 +233,33 @@

二维码合集

-
- -
-

筛选

+
+

筛选

+ +
-
+ +
+
+

筛选用户

+ +
+
+ +
+
+ + + +
空状态 @@ -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 = ` - - + + `; - // 添加每个邀请者的筛选按钮 - invitees.forEach(invitee => { - // 跳过当前用户自己 - if (invitee.inviter && invitee.inviter !== (currentUser.name || currentUser.userName)) { - const button = document.createElement('button'); - button.className = 'filter-btn'; - button.dataset.filter = `invitee_${encodeURIComponent(invitee.inviter)}`; - button.dataset.inviter = invitee.inviter; - button.textContent = invitee.inviter; - filterButtonsContainer.appendChild(button); + // 为管理员显示筛选按钮并填充侧边栏 + if (invitees && invitees.length > 0) { + // 显示筛选按钮 + if (filterSidebarBtn) { + filterSidebarBtn.style.display = 'block'; } - }); - - // 默认选中"全部" - document.querySelector('.filter-btn[data-filter="all"]').classList.add('active'); + + // 填充侧边栏筛选按钮 + 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; + + // 添加点击事件 + button.addEventListener('click', function() { + filterQrCodes(this.dataset.filter, this.dataset.inviter); + closeSidebar(); + }); + + sidebarFilterButtons.appendChild(button); + } + }); + } + } // 绑定筛选按钮事件 document.querySelectorAll('.filter-btn').forEach(btn => { @@ -373,6 +415,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) { @@ -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); + } };