mirror of
https://github.com/woodchen-ink/random-api-go.git
synced 2025-07-18 13:52:02 +08:00
243 lines
8.3 KiB
HTML
243 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-cmn-Hans">
|
||
|
||
<head>
|
||
<title>随机文件api</title>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="shortcut icon" size="32x32" href="https://cdn-r2.czl.net/2023/06/20/649168ebc2b5d.png">
|
||
<link rel="stylesheet" href="https://cdn-r2.czl.net/frame/czlfonts/slice/font.css" media="all">
|
||
<link rel="stylesheet" href="https://cdn-r2.czl.net/frame/prose.css" media="all">
|
||
<link rel="stylesheet" href="./css/main.css" media="all">
|
||
<style>
|
||
|
||
</style>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="overlay">
|
||
<main>
|
||
<div id="markdown-content" class="prose prose-dark">
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<!-- 渲染markdown -->
|
||
<script>
|
||
// 创建带有配置的 markdown-it 实例
|
||
var md = window.markdownit({
|
||
html: true
|
||
});
|
||
// 统一配置对象
|
||
const endpointConfig = {
|
||
'pic/all': {
|
||
name: '全部图片',
|
||
order: 1
|
||
},
|
||
'pic/ai': {
|
||
name: 'AI绘图',
|
||
order: 2
|
||
},
|
||
'pic/ecy': {
|
||
name: '二次元(ALL)',
|
||
order: 3
|
||
},
|
||
'pic/ecy1': {
|
||
name: '二次元文件1',
|
||
order: 4
|
||
},
|
||
'pic/ecy2': {
|
||
name: '二次元文件2',
|
||
order: 5
|
||
},
|
||
'pic/truegirl': {
|
||
name: '真人美女(ALL)',
|
||
order: 6
|
||
},
|
||
'pic/truegirl1': {
|
||
name: '真人美女文件1',
|
||
order: 7
|
||
},
|
||
'pic/truegirl2': {
|
||
name: '真人美女文件2',
|
||
order: 8
|
||
},
|
||
'pic/fj': {
|
||
name: '风景',
|
||
order: 9
|
||
},
|
||
'pic/czlwb': {
|
||
name: 'CZL网站背景图',
|
||
order: 10
|
||
},
|
||
'pic/girl-gif': {
|
||
name: '真人美女动图',
|
||
order: 11
|
||
},
|
||
'pic/loading': {
|
||
name: '加载图',
|
||
order: 12
|
||
},
|
||
'video/all': {
|
||
name: '视频',
|
||
order: 13
|
||
}
|
||
};
|
||
|
||
// 加载统计数据
|
||
async function loadStats() {
|
||
try {
|
||
// 添加刷新动画
|
||
const refreshIcon = document.querySelector('.refresh-icon');
|
||
const summaryElement = document.getElementById('stats-summary');
|
||
const detailElement = document.getElementById('stats-detail');
|
||
|
||
if (refreshIcon) {
|
||
refreshIcon.classList.add('spinning');
|
||
}
|
||
if (summaryElement) summaryElement.classList.add('fade');
|
||
if (detailElement) detailElement.classList.add('fade');
|
||
|
||
// 获取数据
|
||
const response = await fetch('https://random-api.czl.net/stats');
|
||
const stats = await response.json();
|
||
|
||
// 更新统计
|
||
await updateStats(stats);
|
||
|
||
// 移除动画
|
||
setTimeout(() => {
|
||
if (refreshIcon) {
|
||
refreshIcon.classList.remove('spinning');
|
||
}
|
||
if (summaryElement) summaryElement.classList.remove('fade');
|
||
if (detailElement) detailElement.classList.remove('fade');
|
||
}, 300);
|
||
|
||
} catch (error) {
|
||
console.error('Error loading stats:', error);
|
||
}
|
||
}
|
||
|
||
// 处理统计数据
|
||
function updateStats(stats) {
|
||
const startDate = new Date('2024-10-26');
|
||
const today = new Date();
|
||
const daysSinceStart = Math.ceil((today - startDate) / (1000 * 60 * 60 * 24));
|
||
|
||
let totalCalls = 0;
|
||
let todayCalls = 0;
|
||
|
||
Object.values(stats).forEach(stat => {
|
||
totalCalls += stat.total_calls;
|
||
todayCalls += stat.today_calls;
|
||
});
|
||
|
||
const avgCallsPerDay = Math.round(totalCalls / daysSinceStart);
|
||
// 获取所有endpoints并按order排序
|
||
const sortedEndpoints = Object.entries(stats)
|
||
.sort(([endpointA], [endpointB]) => {
|
||
const orderA = endpointConfig[endpointA]?.order || 999;
|
||
const orderB = endpointConfig[endpointB]?.order || 999;
|
||
return orderA - orderB;
|
||
});
|
||
|
||
// 更新总体统计
|
||
const summaryHtml = `
|
||
<div class="stats-summary">
|
||
<div class="stats-header">
|
||
<h2>📊 接口调用次数 <span class="refresh-icon">🔄</span></h2>
|
||
</div>
|
||
<div class="stats-grid">
|
||
<div class="stats-item">今日总调用：${todayCalls} 次</div>
|
||
<div class="stats-item">平均每天调用：${avgCallsPerDay} 次</div>
|
||
<div class="stats-item">总调用次数：${totalCalls} 次</div>
|
||
<div class="stats-item">统计开始日期：2024-10-26</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 更新详细统计
|
||
let detailHtml = `
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>接口</th>
|
||
<th>今日调用</th>
|
||
<th>总调用</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
`;
|
||
|
||
sortedEndpoints.forEach(([endpoint, stat]) => {
|
||
detailHtml += `
|
||
<tr>
|
||
<td>
|
||
<a href="javascript:void(0)"
|
||
onclick="copyToClipboard('${endpoint}')"
|
||
class="endpoint-link"
|
||
title="点击复制链接">
|
||
${getDisplayName(endpoint)}
|
||
</a>
|
||
</td>
|
||
<td>${stat.today_calls}</td>
|
||
<td>${stat.total_calls}</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
|
||
detailHtml += `
|
||
</tbody>
|
||
</table>
|
||
`;
|
||
|
||
// 插入统计数据
|
||
const summaryElement = document.getElementById('stats-summary');
|
||
const detailElement = document.getElementById('stats-detail');
|
||
|
||
if (summaryElement) summaryElement.innerHTML = summaryHtml;
|
||
if (detailElement) detailElement.innerHTML = detailHtml;
|
||
}
|
||
|
||
// 获取显示名称的函数
|
||
function getDisplayName(endpoint) {
|
||
return endpointConfig[endpoint]?.name || endpoint;
|
||
}
|
||
|
||
|
||
// 添加复制功能
|
||
function copyToClipboard(endpoint) {
|
||
const url = `https://random-api.czl.net/${endpoint}`;
|
||
navigator.clipboard.writeText(url).then(() => {
|
||
// 显示提示
|
||
const toast = document.createElement('div');
|
||
toast.className = 'toast';
|
||
toast.textContent = '链接已复制到剪贴板！';
|
||
document.body.appendChild(toast);
|
||
|
||
// 2秒后移除提示
|
||
setTimeout(() => {
|
||
toast.remove();
|
||
}, 2000);
|
||
}).catch(err => {
|
||
console.error('复制失败:', err);
|
||
});
|
||
}
|
||
|
||
// 先加载 markdown 内容
|
||
fetch('./index.md')
|
||
.then(response => response.text())
|
||
.then(markdownText => {
|
||
document.getElementById('markdown-content').innerHTML = md.render(markdownText);
|
||
// markdown 加载完成后等待一小段时间再加载统计数据
|
||
setTimeout(loadStats, 100);
|
||
})
|
||
.catch(error => console.error('Error loading index.md:', error));
|
||
|
||
// 定期更新统计数据
|
||
setInterval(loadStats, 3 * 1000);
|
||
</script>
|
||
</body>
|
||
|
||
</html> |