File size: 4,652 Bytes
08ca036 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Tokens 管理</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const apiPrefix = "{{ api_prefix }}";
const uploadForm = document.getElementById('uploadForm');
const clearForm = document.getElementById('clearForm');
const errorButton = document.getElementById('errorButton');
if (apiPrefix === "None") {
uploadForm.action = "/tokens/upload";
clearForm.action = "/tokens/clear";
errorButton.dataset.api = "/tokens/error";
} else {
uploadForm.action = `/${apiPrefix}/tokens/upload`;
clearForm.action = `/${apiPrefix}/tokens/clear`;
errorButton.dataset.api = `/${apiPrefix}/tokens/error`;
}
errorButton.addEventListener('click', async () => {
const response = await fetch(errorButton.dataset.api, {
method: 'POST',
});
const result = await response.json();
const errorTokens = result.error_tokens;
const errorModal = document.getElementById('errorModal');
const errorModalContent = document.getElementById('errorModalContent');
errorModalContent.innerHTML = errorTokens.map(token => `<p>${token}</p>`).join('');
errorModal.classList.remove('hidden');
});
document.getElementById('errorModalClose').addEventListener('click', () => {
document.getElementById('errorModal').classList.add('hidden');
});
document.getElementById('errorModalCopy').addEventListener('click', () => {
const errorModalContent = document.getElementById('errorModalContent');
const textToCopy = errorModalContent.innerText.replace(/\n\n/g, '\n');
navigator.clipboard.writeText(textToCopy).then(() => {
alert('错误 Tokens 已复制到剪贴板');
}).catch(err => {
alert('复制失败，请手动复制');
});
});
});
</script>
</head>
<body class="bg-gradient-to-r from-blue-200 via-purple-200 to-pink-200 flex justify-center items-center min-h-screen">
<div class="bg-white p-10 rounded-lg shadow-2xl w-128 text-center">
<h1 class="text-4xl font-extrabold text-gray-900 mb-6">Tokens 管理</h1>
<p class="text-gray-600 mb-4">当前可用 Tokens 数量：<span class="text-blue-600">{{ tokens_count }}</span></p>
<form class="mb-2" id="uploadForm" method="post">
<textarea class="w-full p-4 mb-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none" name="text" placeholder="一行一个Token，可以是 AccessToken 或 RefreshToken" rows="10"></textarea>
<p class="text-gray-600 mb-2">注：使用docker时如果挂载了data文件夹则重启后不需要再次上传</p>
<button class="w-full bg-blue-600 text-white py-3 rounded-md hover:bg-blue-700 transition duration-300 mb-2" type="submit">上传</button>
</form>
<button id="errorButton" class="w-full bg-yellow-600 text-white py-3 rounded-md hover:bg-yellow-700 transition duration-200 mt-2">查看错误Tokens</button>
<p class="text-gray-600 mt-2">点击清空，将会清空上传和错误的 Tokens</p>
<form id="clearForm" method="post">
<button class="w-full bg-red-600 text-white py-3 rounded-md hover:bg-red-700 transition duration-300" type="submit">清空Tokens</button>
</form>
</div>
<div id="errorModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center hidden">
<div class="bg-white p-6 rounded-lg shadow-lg w-150">
<h2 class="text-2xl font-bold mb-4">错误 Tokens</h2>
<div id="errorModalContent" class="list-disc list-inside text-left mb-4"></div>
<div class="flex justify-end space-x-4">
<button id="errorModalCopy" class="bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition duration-300">复制</button>
<button id="errorModalClose" class="bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 transition duration-300">关闭</button>
</div>
</div>
</div>
</body>
</html>
|