|
|
@@ -1,236 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="zh-CN">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>令牌查询系统</title>
|
|
|
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
- <script src="https://cdn.tailwindcss.com"></script>
|
|
|
- <style>
|
|
|
- body {
|
|
|
- font-family: 'Inter', sans-serif;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- min-height: 100vh;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .card {
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
- box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
|
|
|
- }
|
|
|
- .result-card {
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
- box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
|
|
|
- }
|
|
|
- .animate-pulse {
|
|
|
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
|
- }
|
|
|
- @keyframes pulse {
|
|
|
- 0%, 100% { opacity: 1; }
|
|
|
- 50% { opacity: 0.5; }
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <div class="container mx-auto px-4 py-8">
|
|
|
- <div class="max-w-2xl mx-auto">
|
|
|
- <div class="text-center mb-10">
|
|
|
- <h1 class="text-4xl font-bold text-white mb-2">令牌查询系统</h1>
|
|
|
- <p class="text-white/80">输入您的令牌以查询余额信息</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card rounded-2xl p-8 mb-8">
|
|
|
- <form id="tokenForm" class="space-y-6">
|
|
|
- <div>
|
|
|
- <label for="tokenInput" class="block text-white font-medium mb-2">请输入令牌</label>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- id="tokenInput"
|
|
|
- class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-transparent transition-all"
|
|
|
- placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
|
|
|
- required
|
|
|
- >
|
|
|
- </div>
|
|
|
- <button
|
|
|
- type="submit"
|
|
|
- id="searchBtn"
|
|
|
- class="w-full bg-white text-indigo-600 font-semibold py-3 px-4 rounded-lg hover:bg-white/90 transition-all transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-indigo-500"
|
|
|
- >
|
|
|
- 查询余额
|
|
|
- </button>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="loadingIndicator" class="hidden text-center py-8">
|
|
|
- <div class="animate-pulse flex flex-col items-center">
|
|
|
- <div class="w-12 h-12 border-4 border-white border-t-transparent rounded-full animate-spin mb-4"></div>
|
|
|
- <p class="text-white">正在查询中...</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="resultContainer" class="hidden result-card rounded-2xl p-6">
|
|
|
- <div class="flex items-center justify-between mb-4">
|
|
|
- <h2 class="text-2xl font-bold text-gray-800">查询结果</h2>
|
|
|
- <span id="statusBadge" class="px-3 py-1 rounded-full text-sm font-medium"></span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
|
|
- <div class="bg-gray-50 p-4 rounded-lg">
|
|
|
- <p class="text-sm text-gray-600">令牌名称</p>
|
|
|
- <p id="tokenName" class="font-semibold text-gray-800"></p>
|
|
|
- </div>
|
|
|
- <div class="bg-gray-50 p-4 rounded-lg">
|
|
|
- <p class="text-sm text-gray-600">剩余额度</p>
|
|
|
- <p id="remainQuota" class="font-semibold text-gray-800"></p>
|
|
|
- <p id="remainQuotaUSD" class="text-xs text-gray-500"></p>
|
|
|
- </div>
|
|
|
- <div class="bg-gray-50 p-4 rounded-lg">
|
|
|
- <p class="text-sm text-gray-600">已用额度</p>
|
|
|
- <p id="usedQuota" class="font-semibold text-gray-800"></p>
|
|
|
- <p id="usedQuotaUSD" class="text-xs text-gray-500"></p>
|
|
|
- </div>
|
|
|
- <div class="bg-gray-50 p-4 rounded-lg">
|
|
|
- <p class="text-sm text-gray-600">额度状态</p>
|
|
|
- <p id="quotaStatus" class="font-semibold text-gray-800"></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="bg-blue-50 p-4 rounded-lg">
|
|
|
- <p class="text-sm text-blue-600">配比关系</p>
|
|
|
- <p id="modelRatio" class="font-semibold text-blue-800"></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="errorContainer" class="hidden result-card rounded-2xl p-6 bg-red-50 border border-red-200">
|
|
|
- <div class="flex items-center mb-2">
|
|
|
- <svg class="w-5 h-5 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
|
- <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
|
|
- </svg>
|
|
|
- <h3 class="text-lg font-medium text-red-800">查询失败</h3>
|
|
|
- </div>
|
|
|
- <p id="errorMessage" class="text-red-700"></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <script>
|
|
|
- // 配比转换函数: 500000 配额 = $1
|
|
|
- function quotaToUSD(quota) {
|
|
|
- return (quota / 500000).toFixed(2);
|
|
|
- }
|
|
|
-
|
|
|
- document.getElementById('tokenForm').addEventListener('submit', async function(e) {
|
|
|
- e.preventDefault();
|
|
|
-
|
|
|
- const tokenInput = document.getElementById('tokenInput');
|
|
|
- const token = tokenInput.value.trim();
|
|
|
- const searchBtn = document.getElementById('searchBtn');
|
|
|
- const loadingIndicator = document.getElementById('loadingIndicator');
|
|
|
- const resultContainer = document.getElementById('resultContainer');
|
|
|
- const errorContainer = document.getElementById('errorContainer');
|
|
|
-
|
|
|
- if (!token) {
|
|
|
- showError('请输入令牌');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 显示加载状态
|
|
|
- searchBtn.disabled = true;
|
|
|
- searchBtn.textContent = '查询中...';
|
|
|
- loadingIndicator.classList.remove('hidden');
|
|
|
- resultContainer.classList.add('hidden');
|
|
|
- errorContainer.classList.add('hidden');
|
|
|
-
|
|
|
- try {
|
|
|
- const response = await fetch('/api/token/search', {
|
|
|
- method: 'POST',
|
|
|
- headers: {
|
|
|
- 'Content-Type': 'application/json',
|
|
|
- },
|
|
|
- body: JSON.stringify({ token: token })
|
|
|
- });
|
|
|
-
|
|
|
- const data = await response.json();
|
|
|
-
|
|
|
- if (data.success) {
|
|
|
- displayResult(data.data);
|
|
|
- } else {
|
|
|
- showError(data.message || '查询失败');
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- showError('网络错误，请稍后重试');
|
|
|
- console.error('Error:', error);
|
|
|
- } finally {
|
|
|
- // 恢复按钮状态
|
|
|
- searchBtn.disabled = false;
|
|
|
- searchBtn.textContent = '查询余额';
|
|
|
- loadingIndicator.classList.add('hidden');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- function displayResult(data) {
|
|
|
- document.getElementById('tokenName').textContent = data.token_name || '未命名';
|
|
|
- document.getElementById('remainQuota').textContent = data.unlimited_quota ? '无限额度' : data.remain_quota;
|
|
|
- document.getElementById('usedQuota').textContent = data.used_quota;
|
|
|
-
|
|
|
- // 显示美元转换值
|
|
|
- if (!data.unlimited_quota) {
|
|
|
- document.getElementById('remainQuotaUSD').textContent = `$${quotaToUSD(data.remain_quota)}`;
|
|
|
- document.getElementById('usedQuotaUSD').textContent = `$${quotaToUSD(data.used_quota)}`;
|
|
|
- } else {
|
|
|
- document.getElementById('remainQuotaUSD').textContent = '';
|
|
|
- document.getElementById('usedQuotaUSD').textContent = '';
|
|
|
- }
|
|
|
-
|
|
|
- // 额度状态
|
|
|
- const quotaStatus = document.getElementById('quotaStatus');
|
|
|
- if (data.unlimited_quota) {
|
|
|
- quotaStatus.textContent = '无限额度';
|
|
|
- quotaStatus.className = 'font-semibold text-green-600';
|
|
|
- } else {
|
|
|
- quotaStatus.textContent = data.remain_quota > 0 ? '有剩余额度' : '额度已用尽';
|
|
|
- quotaStatus.className = data.remain_quota > 0 ? 'font-semibold text-green-600' : 'font-semibold text-red-600';
|
|
|
- }
|
|
|
-
|
|
|
- // 状态标签
|
|
|
- const statusBadge = document.getElementById('statusBadge');
|
|
|
- switch (data.status) {
|
|
|
- case 1:
|
|
|
- statusBadge.textContent = '启用';
|
|
|
- statusBadge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800';
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- statusBadge.textContent = '停用';
|
|
|
- statusBadge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800';
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- statusBadge.textContent = '已过期';
|
|
|
- statusBadge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800';
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- statusBadge.textContent = '额度用尽';
|
|
|
- statusBadge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800';
|
|
|
- break;
|
|
|
- default:
|
|
|
- statusBadge.textContent = '未知';
|
|
|
- statusBadge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800';
|
|
|
- }
|
|
|
-
|
|
|
- // 配比关系
|
|
|
- document.getElementById('modelRatio').textContent = `1:${data.model_ratio}`;
|
|
|
-
|
|
|
- document.getElementById('resultContainer').classList.remove('hidden');
|
|
|
- }
|
|
|
-
|
|
|
- function showError(message) {
|
|
|
- document.getElementById('errorMessage').textContent = message;
|
|
|
- document.getElementById('errorContainer').classList.remove('hidden');
|
|
|
- }
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-</html>
|
aiprodcoder