diff --git a/src/main/resources/templates/admin.html b/src/main/resources/templates/admin.html index c0ae491..c3736a4 100644 --- a/src/main/resources/templates/admin.html +++ b/src/main/resources/templates/admin.html @@ -47,6 +47,14 @@ overflow-y: auto; } + #search-input { + width: 100%; + padding: 8px; + margin-bottom: 10px; + border-radius: 4px; + border: 1px solid #ccc; + } + .code-list-item { padding: 12px; border-bottom: 1px solid #eee; cursor: pointer; border-radius: 6px; } .code-list-item:hover, .code-list-item.active { background-color: #d1e7fd; } .code-list-item strong { font-size: 14px; color: #333; } @@ -66,6 +74,7 @@
@@ -81,36 +90,53 @@ const cartGridEl = document.getElementById('cart-grid'); const loaderEl = document.getElementById('loader'); const downloadBtn = document.getElementById('download-btn'); + const searchInput = document.getElementById('search-input'); let activeCode = null; + let allCodes = []; async function fetchAuthCodes() { try { const response = await fetch('/api/admin/codes'); if (!response.ok) throw new Error('Failed to load codes'); - const codes = await response.json(); - - codeListEl.innerHTML = ''; - codes.forEach(code => { - const item = document.createElement('div'); - item.className = 'code-list-item'; - item.dataset.code = code.code; - item.innerHTML = `${code.order_id || code.code}登录/上限:${code.login_count}/${code.login_limit} | 失效: ${new Date(code.expires_at).toLocaleString()}`; - item.onclick = () => loadCartForCode(code.code); - codeListEl.appendChild(item); - }); + allCodes = await response.json(); + renderCodeList(); } catch (e) { codeListEl.innerHTML = `${e.message}
`; } } + function renderCodeList() { + const searchTerm = searchInput.value.toLowerCase(); + const filteredCodes = allCodes.filter(code => + (code.order_id && code.order_id.toLowerCase().includes(searchTerm)) || + code.code.toLowerCase().includes(searchTerm) + ); + + codeListEl.innerHTML = ''; + filteredCodes.forEach(code => { + const item = document.createElement('div'); + item.className = 'code-list-item'; + item.dataset.code = code.code; + item.innerHTML = `${code.order_id || code.code}登录/上限:${code.login_count}/${code.login_limit} | 失效: ${new Date(code.expires_at).toLocaleString()}`; + item.onclick = () => loadCartForCode(code.code); + codeListEl.appendChild(item); + }); + + if (activeCode) { + const activeElement = document.querySelector(`[data-code="${activeCode}"]`); + if (activeElement) { + activeElement.classList.add('active'); + } + } + } + async function loadCartForCode(code) { activeCode = code; - // Highlight active item - document.querySelectorAll('.code-list-item').forEach(el => el.classList.remove('active')); - document.querySelector(`[data-code="${code}"]`).classList.add('active'); + renderCodeList(); // Re-render to highlight the active item cartGridEl.innerHTML = ''; loaderEl.innerText = '正在加载...'; + loaderEl.style.display = 'block'; downloadBtn.style.display = 'none'; try { @@ -168,6 +194,8 @@ } }; + searchInput.addEventListener('input', renderCodeList); + document.addEventListener('DOMContentLoaded', () => { fetchAuthCodes();