Apq
/
MIXAPI
mirror de https://github.com/aiprodcoder/MIXAPI.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
							<!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>