mirror of
https://github.com/woodchen-ink/random-api-go.git
synced 2025-07-18 13:52:02 +08:00
wood chen
2720f6ebf0
- Updated latency formatting in Go and JavaScript to display three decimal places for improved precision. - Enhanced LogRequest function to store only the main domain of the referer, improving data clarity. - Added MarshalJSON method to SystemMetrics for better JSON representation of request counts.
360 lines
14 KiB
HTML
360 lines
14 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" />
|
||
<meta name="description" content="随机图API, 随机视频等 ">
|
||
<link rel="shortcut icon" size="32x32" href="https://i.czl.net/r2/2023/06/20/649168ebc2b5d.png">
|
||
<link rel="stylesheet" href="https://i.czl.net/g-f/frame/czlfonts/slice/font.css" media="all">
|
||
<link rel="stylesheet" href="https://i.czl.net/g-f/frame/prose.css" media="all">
|
||
<link rel="stylesheet" href="./css/main.css" media="all">
|
||
<style>
|
||
|
||
</style>
|
||
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/markdown-it/12.3.2/markdown-it.min.js"></script>
|
||
<script defer src="https://analytics.czl.net/script.js"
|
||
data-website-id="67f71dbc-799c-46b6-9c23-b1b012daef65"></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
|
||
});
|
||
|
||
// 用于存储配置的全局变量
|
||
let cachedEndpointConfig = null;
|
||
|
||
// 加载配置的函数
|
||
async function loadEndpointConfig() {
|
||
if (cachedEndpointConfig) {
|
||
return cachedEndpointConfig;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/config/endpoint.json');
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
cachedEndpointConfig = await response.json();
|
||
return cachedEndpointConfig;
|
||
} catch (error) {
|
||
console.error('加载endpoint配置失败:', error);
|
||
return {};
|
||
}
|
||
}
|
||
|
||
// 加载统计数据
|
||
async function loadStats() {
|
||
try {
|
||
const [statsResponse, urlStatsResponse, endpointConfig] = await Promise.all([
|
||
fetch('/stats'),
|
||
fetch('/urlstats'),
|
||
loadEndpointConfig()
|
||
]);
|
||
|
||
const stats = await statsResponse.json();
|
||
const urlStats = await urlStatsResponse.json();
|
||
|
||
// 只显示 endpoint.json 中配置的路径
|
||
const filteredPaths = {};
|
||
for (const [category, types] of Object.entries(endpointConfig)) {
|
||
if (urlStats.paths[category]) {
|
||
filteredPaths[category] = {};
|
||
for (const [type, desc] of Object.entries(types)) {
|
||
if (urlStats.paths[category][type]) {
|
||
filteredPaths[category][type] = {
|
||
path: urlStats.paths[category][type],
|
||
description: desc
|
||
};
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
await updateStats(stats, filteredPaths);
|
||
} catch (error) {
|
||
console.error('Error loading stats:', error);
|
||
}
|
||
}
|
||
|
||
// 更新统计显示
|
||
async function updateStats(stats, paths) {
|
||
const startDate = new Date('2024-11-1');
|
||
const today = new Date();
|
||
const daysSinceStart = Math.ceil((today - startDate) / (1000 * 60 * 60 * 24));
|
||
|
||
let totalCalls = 0;
|
||
let todayCalls = 0;
|
||
|
||
// 计算总调用次数
|
||
Object.entries(stats).forEach(([endpoint, stat]) => {
|
||
totalCalls += stat.total_calls;
|
||
todayCalls += stat.today_calls;
|
||
});
|
||
|
||
const avgCallsPerDay = Math.round(totalCalls / daysSinceStart);
|
||
|
||
// 更新总览统计
|
||
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-11-1</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 获取 endpoint 配置
|
||
const endpointConfig = await loadEndpointConfig();
|
||
|
||
// 生成详细统计表格
|
||
let detailHtml = `
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>接口名称</th>
|
||
<th>今日调用</th>
|
||
<th>总调用</th>
|
||
<th>URL数量</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
`;
|
||
|
||
// 按 order 排序并生成表格行
|
||
const endpoints = Object.entries(endpointConfig)
|
||
.sort(([, a], [, b]) => a.order - b.order);
|
||
|
||
for (const [endpoint, config] of endpoints) {
|
||
const stat = stats[endpoint] || { today_calls: 0, total_calls: 0 };
|
||
const urlCount = urlStats[endpoint]?.total_urls || 0;
|
||
|
||
detailHtml += `
|
||
<tr>
|
||
<td>
|
||
<a href="javascript:void(0)"
|
||
onclick="copyToClipboard('${endpoint}')"
|
||
class="endpoint-link"
|
||
title="点击复制链接">
|
||
${config.name}
|
||
</a>
|
||
</td>
|
||
<td>${stat.today_calls}</td>
|
||
<td>${stat.total_calls}</td>
|
||
<td>${urlCount}</td>
|
||
<td>
|
||
<a href="/${endpoint}" target="_blank" rel="noopener noreferrer" title="测试接口">👀</a>
|
||
<a href="javascript:void(0)" onclick="copyToClipboard('${endpoint}')" title="复制链接">📋</a>
|
||
</td>
|
||
</tr>
|
||
`;
|
||
}
|
||
|
||
detailHtml += `
|
||
</tbody>
|
||
</table>
|
||
`;
|
||
|
||
// 更新 DOM
|
||
const summaryElement = document.getElementById('stats-summary');
|
||
const detailElement = document.getElementById('stats-detail');
|
||
|
||
if (summaryElement) summaryElement.innerHTML = summaryHtml;
|
||
if (detailElement) detailElement.innerHTML = detailHtml;
|
||
}
|
||
|
||
// 复制链接功能
|
||
function copyToClipboard(endpoint) {
|
||
const url = `${window.location.protocol}//${window.location.host}/${endpoint}`;
|
||
navigator.clipboard.writeText(url).then(() => {
|
||
const toast = document.createElement('div');
|
||
toast.className = 'toast';
|
||
toast.textContent = '链接已复制到剪贴板！';
|
||
document.body.appendChild(toast);
|
||
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, 5 * 1000);
|
||
|
||
async function loadMetrics() {
|
||
try {
|
||
const response = await fetch('/metrics');
|
||
const metrics = await response.json();
|
||
updateMetricsDisplay(metrics);
|
||
} catch (error) {
|
||
console.error('Error loading metrics:', error);
|
||
}
|
||
}
|
||
|
||
function updateMetricsDisplay(metrics) {
|
||
// 格式化延迟显示
|
||
function formatLatency(microseconds) {
|
||
if (microseconds < 1000) {
|
||
return `${microseconds.toFixed(3)}µs`;
|
||
}
|
||
if (microseconds < 1000000) {
|
||
return `${(microseconds/1000).toFixed(3)}ms`;
|
||
}
|
||
return `${(microseconds/1000000).toFixed(3)}s`;
|
||
}
|
||
|
||
// 最近请求
|
||
const recentRequestsHtml = metrics.recent_requests.map(req => `
|
||
<tr>
|
||
<td>${new Date(req.time).toLocaleString()}</td>
|
||
<td>${req.path}</td>
|
||
<td>${req.method}</td>
|
||
<td>${req.status_code}</td>
|
||
<td>${formatLatency(req.latency)}</td>
|
||
</tr>
|
||
`).join('');
|
||
|
||
// 热门引用来源
|
||
const topReferersHtml = Object.entries(metrics.top_referers)
|
||
.sort(([, a], [, b]) => b - a)
|
||
.slice(0, 10)
|
||
.map(([referer, count]) => `
|
||
<div class="referer-item">
|
||
<span class="referer">${referer}</span>
|
||
<span class="count">${count}</span>
|
||
</div>
|
||
`).join('');
|
||
|
||
const metricsHtml = `
|
||
<div class="metrics-container">
|
||
<div class="metrics-section">
|
||
<h3>基础指标</h3>
|
||
<div class="metrics-grid">
|
||
<div class="metric-item">运行时间：${formatDuration(metrics.uptime)}</div>
|
||
<div class="metric-item">启动时间：${new Date(metrics.start_time).toLocaleString()}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metrics-section">
|
||
<h3>系统指标</h3>
|
||
<div class="metrics-grid">
|
||
<div class="metric-item">CPU核心数：${metrics.num_cpu}</div>
|
||
<div class="metric-item">Goroutine数：${metrics.num_goroutine}</div>
|
||
<div class="metric-item">内存使用：${formatBytes(metrics.memory_stats.heap_alloc)}</div>
|
||
<div class="metric-item">系统内存：${formatBytes(metrics.memory_stats.heap_sys)}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metrics-section">
|
||
<h3>性能指标</h3>
|
||
<div class="metrics-grid">
|
||
<div class="metric-item">总请求数：${metrics.request_count}</div>
|
||
<div class="metric-item">平均延迟：${metrics.average_latency.toFixed(2)}ms</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metrics-section">
|
||
<h3>状态码统计</h3>
|
||
<div class="status-codes">
|
||
${Object.entries(metrics.status_codes)
|
||
.map(([code, count]) => `
|
||
<div class="status-code-item">
|
||
<span class="code">${code}</span>
|
||
<span class="count">${count}</span>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metrics-section">
|
||
<h3>最近请求</h3>
|
||
<div class="recent-requests">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>路径</th>
|
||
<th>方法</th>
|
||
<th>状态</th>
|
||
<th>延迟</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
${recentRequestsHtml}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metrics-section">
|
||
<h3>热门引用来源</h3>
|
||
<div class="top-referers">
|
||
${topReferersHtml}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
const metricsElement = document.getElementById('system-metrics');
|
||
if (metricsElement) {
|
||
metricsElement.innerHTML = metricsHtml;
|
||
}
|
||
}
|
||
|
||
function formatBytes(bytes) {
|
||
const units = ['B', 'KB', 'MB', 'GB'];
|
||
let size = bytes;
|
||
let unitIndex = 0;
|
||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||
size /= 1024;
|
||
unitIndex++;
|
||
}
|
||
return `${size.toFixed(2)} ${units[unitIndex]}`;
|
||
}
|
||
|
||
function formatDuration(ns) {
|
||
const duration = ns / 1e9; // 转换为秒
|
||
const days = Math.floor(duration / 86400);
|
||
const hours = Math.floor((duration % 86400) / 3600);
|
||
const minutes = Math.floor((duration % 3600) / 60);
|
||
const seconds = Math.floor(duration % 60);
|
||
return `${days}天 ${hours}时 ${minutes}分 ${seconds}秒`;
|
||
}
|
||
|
||
// 定期更新监控数据
|
||
setInterval(loadMetrics, 5000);
|
||
|
||
// 初始加载
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
loadMetrics();
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |