1.宝塔添加一个二级域名用来放置各类查询页面
2.打开kcai.netwx.cn
3.注册登录（免费使用glm4.6，glm4.5，deepseekr1及绘画使用功能）
4.直接发送需求或者会举一反三的朋友自行摸索
4.刚刚添加的根目录下创建一个html文件
5.打开html文件，粘贴ai给你写好的代码即可
6.打开测试一下
这样就不用再去别人网站查询，然后担心key余额被盗了，使用官方接口即可
接口：https://api.siliconflow.cn/v1/user/info
已经🆗了，教程仅提供学习使用
小夜在这里提醒你，请勿更改成拦截key的代码哦，使用官方接口，不要做违法违规的事情。
以下是代码，可以借鉴使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>硅基流动 Key 余额批量查询</title>
<style>
/* --- CSS 样式 --- */
:root {
--primary-color: #007bff;
--primary-hover-color: #0056b3;
--success-color: #28a745;
--success-bg: #d4edda;
--error-color: #dc3545;
--error-bg: #f8d7da;
--background-color: #f4f7f6;
--card-background-color: #ffffff;
--text-color: #333333;
--subtle-text-color: #6c757d;
--border-color: #e0e0e0;
--shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: flex-start; /* 改为 flex-start 以适应内容增长 */
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.container {
background-color: var(--card-background-color);
padding: 30px 40px;
border-radius: 12px;
box-shadow: var(--shadow);
width: 100%;
max-width: 600px;
text-align: center;
}
h1 {
color: var(--text-color);
margin-top: 0;
margin-bottom: 10px;
font-size: 24px;
font-weight: 600;
}
.subtitle {
color: var(--subtle-text-color);
font-size: 14px;
margin-bottom: 25px;
}
.input-group {
margin-bottom: 20px;
text-align: left;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
font-size: 14px;
}
textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
font-family: 'Courier New', Courier, monospace;
box-sizing: border-box;
transition: border-color 0.3s, box-shadow 0.3s;
resize: vertical;
min-height: 100px;
}
textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
button {
width: 100%;
padding: 12px 20px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s, transform 0.1s;
}
button:hover:not(:disabled) {
background-color: var(--primary-hover-color);
}
button:active {
transform: scale(0.98);
}
button:disabled {
background-color: #a0a0a0;
cursor: not-allowed;
}
#resultContainer {
margin-top: 25px;
text-align: left;
display: none; /* 默认隐藏 */
}
.result-list {
display: flex;
flex-direction: column;
gap: 12px; /* 结果项之间的间距 */
}
.result-item {
padding: 15px 20px;
border-radius: 8px;
border: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.result-item.success {
background-color: var(--success-bg);
border-color: var(--success-color);
}
.result-item.error {
background-color: var(--error-bg);
border-color: var(--error-color);
}
.result-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.masked-key {
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
color: var(--subtle-text-color);
}
.balance {
font-size: 20px;
font-weight: bold;
color: var(--success-color);
}
.error-msg {
font-size: 14px;
color: var(--error-color);
font-weight: 500;
}
.loading-spinner {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 3px solid #ffffff;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<h1>🔑 硅基流动 Key 余额查询</h1>
<p class="subtitle">支持单个或批量查询，请每行输入一个 Key</p>
<div class="input-group">
<label for="apiKeyInput">API Keys:</label>
<textarea id="apiKeyInput" placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxx sk-yyyyyyyyyyyyyyyyyyyyyyyy sk-zzzzzzzzzzzzzzzzzzzzzzzz" autocomplete="off"></textarea>
</div>
<button id="queryButton">开始批量查询</button>
<div id="resultContainer">
<!-- 查询结果将动态插入这里 -->
</div>
</div>
<script>
// --- JavaScript 逻辑 ---
const queryButton = document.getElementById('queryButton');
const apiKeyInput = document.getElementById('apiKeyInput');
const resultContainer = document.getElementById('resultContainer');
const apiUrl = 'https://api.siliconflow.cn/v1/user/info';
queryButton.addEventListener('click', handleQuery);
async function handleQuery() {
const inputText = apiKeyInput.value;
const keys = inputText
.split('\n')
.map(key => key.trim())
.filter(key => key.length > 0);
if (keys.length === 0) {
alert('请输入至少一个 API Key');
return;
}
setLoadingState(true);
resultContainer.style.display = 'none';
resultContainer.innerHTML = '';
// 为每个 key 创建查询 promise
const queryPromises = keys.map(key => querySingleKey(key));
try {
// 使用 Promise.allSettled 以确保即使某些请求失败，其他成功的请求也能正常显示
const results = await Promise.allSettled(queryPromises);
renderResults(results);
} catch (error) {
// 这里的 catch 通常不会被执行，因为 Promise.allSettled 不会 reject
console.error("An unexpected error occurred:", error);
resultContainer.innerHTML = '<div class="result-item error">发生了未知错误，请重试。</div>';
resultContainer.style.display = 'block';
} finally {
setLoadingState(false);
}
}
async function querySingleKey(apiKey) {
const response = await fetch(apiUrl, {
method: 'GET',
headers: { 'Authorization': `Bearer ${apiKey}` }
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.message || `请求失败，状态码: ${response.status}`);
}
// 根据最新的API返回结构提取余额
const balance = data.data.balance || '0';
return { key: apiKey, balance: balance };
}
function renderResults(results) {
const resultList = document.createElement('div');
resultList.className = 'result-list';
results.forEach(result => {
const item = document.createElement('div');
if (result.status === 'fulfilled') {
// 查询成功
const { key, balance } = result.value;
item.className = 'result-item success';
item.innerHTML = `
<div class="result-info">
<div class="masked-key">${maskApiKey(key)}</div>
</div>
<div class="balance">¥ ${parseFloat(balance).toFixed(4)}</div>
`;
} else {
// 查询失败
const key = result.reason.key || '未知 Key';
const message = result.reason.message;
item.className = 'result-item error';
item.innerHTML = `
<div class="result-info">
<div class="masked-key">${maskApiKey(key)}</div>
<div class="error-msg">${message}</div>
</div>
`;
}
resultList.appendChild(item);
});
resultContainer.appendChild(resultList);
resultContainer.style.display = 'block';
}
function setLoadingState(isLoading) {
queryButton.disabled = isLoading;
if (isLoading) {
queryButton.innerHTML = '<span class="loading-spinner"></span>查询中...';
} else {
queryButton.innerHTML = '开始批量查询';
}
}
// Key 脱敏函数
function maskApiKey(key) {
if (!key || key.length <= 11) return key;
// sk- 前缀占3位，显示前7位，后4位
return `${key.substring(0, 7)}***${key.substring(key.length - 4)}`;
}
</script>
</body>
</html>
