更新注册码管理及页面动画
This commit is contained in:
@@ -23,6 +23,14 @@
|
||||
.notice.success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
|
||||
.notice.error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
|
||||
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; padding:12px; border:1px solid #e5e7eb; border-radius:8px; background:#fafafa; margin-top:10px; }
|
||||
.overlay { position:fixed; inset:0; background:rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; z-index:2000; }
|
||||
.spinner { width:42px; height:42px; border:4px solid #cbd5e1; border-top-color:#4f46e5; border-radius:50%; animation:spin 0.8s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.fade-in { animation: fadeUp 0.25s ease-out; }
|
||||
@keyframes fadeUp { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }
|
||||
table tr:hover { background-color:#f3f4f6; transition: background-color 0.2s ease; }
|
||||
.btn { transition: transform 0.1s ease, box-shadow 0.2s ease; }
|
||||
.btn:hover { transform: translateY(-1px); box-shadow:0 6px 16px rgba(31,35,40,0.12); }
|
||||
</style>
|
||||
{% csrf_token %}
|
||||
<script>
|
||||
@@ -53,6 +61,7 @@
|
||||
function enableToggleSelect(sel){ sel.addEventListener('mousedown',function(e){ if(e.target && e.target.tagName==='OPTION'){ e.preventDefault(); const op=e.target; op.selected=!op.selected; this.dispatchEvent(new Event('change',{bubbles:true})); } }); }
|
||||
function clearSelection(id){ const sel=document.getElementById(id); Array.from(sel.options).forEach(o=>o.selected=false); }
|
||||
async function generateCode(){
|
||||
const ov=document.getElementById('overlay'); ov.style.display='flex';
|
||||
const csrftoken=getCookie('csrftoken');
|
||||
const keys=selectedValues(document.getElementById('keys'));
|
||||
const manageKeys=selectedValues(document.getElementById('manageKeys'));
|
||||
@@ -64,22 +73,46 @@
|
||||
const msg=document.getElementById('msg');
|
||||
if(resp.ok && data.status==='success'){out.textContent=data.data.code; msg.textContent='生成成功'; msg.className='notice success'; msg.style.display='block';}
|
||||
else{msg.textContent=data.message||'生成失败'; msg.className='notice error'; msg.style.display='block';}
|
||||
ov.style.display='none';
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded',()=>{loadKeys(); enableToggleSelect(document.getElementById('keys')); enableToggleSelect(document.getElementById('manageKeys'));});
|
||||
async function loadCodes(){
|
||||
const ov=document.getElementById('overlay'); ov.style.display='flex';
|
||||
const resp=await fetch('/elastic/registration-codes/list/');
|
||||
const data=await resp.json();
|
||||
const tbody=document.getElementById('codesBody');
|
||||
if(!tbody) return;
|
||||
tbody.innerHTML='';
|
||||
if(resp.ok && data.status==='success'){
|
||||
(data.data||[]).forEach(it=>{
|
||||
const tr=document.createElement('tr');
|
||||
const status = it.active? '有效' : '失效';
|
||||
const ka = Array.isArray(it.keys)? it.keys.join('、') : '';
|
||||
const mka = Array.isArray(it.manage_keys)? it.manage_keys.join('、') : '';
|
||||
tr.innerHTML = `<td>${it.code||''}</td><td>${ka}</td><td>${mka}</td><td>${formatDate(it.created_at)}</td><td>${formatDate(it.expires_at)}</td><td>${status}</td><td>${it.active? '<button class=\"btn btn-secondary\" data-code=\"'+it.code+'\">作废</button>':''}</td>`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
ov.style.display='none';
|
||||
}
|
||||
function formatDate(t){ if(!t) return ''; try{ const d = new Date(t); if(String(d)!='Invalid Date'){ const p=n=>String(n).padStart(2,'0'); return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;} }catch(e){} return ''; }
|
||||
async function revokeCode(code){ const csrftoken=getCookie('csrftoken'); const resp=await fetch('/elastic/registration-codes/revoke/',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json','X-CSRFToken':csrftoken||''},body:JSON.stringify({code})}); const msg=document.getElementById('msg'); const data=await resp.json(); if(resp.ok && data.status==='success'){ msg.textContent='已作废'; msg.className='notice success'; msg.style.display='block'; loadCodes(); } else { msg.textContent=data.message||'作废失败'; msg.className='notice error'; msg.style.display='block'; } }
|
||||
document.addEventListener('click',function(e){ const btn=e.target; if(btn && btn.matches('button[data-code]')){ revokeCode(btn.getAttribute('data-code')); }});
|
||||
document.addEventListener('DOMContentLoaded',()=>{loadKeys(); enableToggleSelect(document.getElementById('keys')); enableToggleSelect(document.getElementById('manageKeys')); loadCodes();});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="overlay" class="overlay" style="display:none"><div class="spinner"></div></div>
|
||||
<div class="sidebar">
|
||||
<h3>你好，{{ username|default:"访客" }}</h3>
|
||||
<h3>用户ID：{{ user_id }}</h3>
|
||||
<div class="navigation-links">
|
||||
<a href="{% url 'main:home' %}">返回主页</a>
|
||||
<a href="{% url 'main:home' %}">主页</a>
|
||||
<a id="logoutBtn">退出登录</a>
|
||||
<div id="logoutMsg"></div>
|
||||
{% csrf_token %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="card">
|
||||
<div class="card fade-in">
|
||||
<h2>管理注册码</h2>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@@ -116,6 +149,30 @@
|
||||
</div>
|
||||
<div id="msg" class="notice"></div>
|
||||
<div class="code-box" id="codeOut"></div>
|
||||
<div class="row" style="margin-top:12px;">
|
||||
<div class="col">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;">
|
||||
<h3>已生成的注册码</h3>
|
||||
<div>
|
||||
<button class="btn btn-secondary" onclick="loadCodes()">刷新列表</button>
|
||||
</div>
|
||||
</div>
|
||||
<table style="width:100%; border-collapse:collapse; margin-top:10px;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:left; border-bottom:1px solid #e5e7eb; padding:8px;">code</th>
|
||||
<th style="text-align:left; border-bottom:1px solid #e5e7eb; padding:8px;">keys</th>
|
||||
<th style="text-align:left; border-bottom:1px solid #e5e7eb; padding:8px;">manage_keys</th>
|
||||
<th style="text-align:left; border-bottom:1px solid #e5e7eb; padding:8px;">创建时间</th>
|
||||
<th style="text-align:left; border-bottom:1px solid #e5e7eb; padding:8px;">过期时间</th>
|
||||
<th style="text-align:left; border-bottom:1px solid #e5e7eb; padding:8px;">状态</th>
|
||||
<th style="text-align:left; border-bottom:1px solid #e5e7eb; padding:8px;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="codesBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user