wood/random-api-go
1
0
Fork 0
mirror of https://github.com/woodchen-ink/random-api-go.git synced 2025-07-18 13:52:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(index.html): Refactor endpoint configuration and stats display logic

Browse Source
This commit is contained in:
wood chen 2024-10-27 09:07:54 +08:00
parent 861835ef92
commit dc6cc93055
1 changed files with 74 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
public/index.html
View File

@ -28,61 +28,20 @@
var md = window.markdownit({ var md = window.markdownit({
html: true html: true
}); });
// 统一配置对象
const endpointConfig = { // 首先定义一个加载配置的函数
'pic/all': { async function loadEndpointConfig() {
name: '全部图片', try {
order: 1 const response = await fetch('/config/endpoint.json');
}, if (!response.ok) {
'pic/ai': { throw new Error(`HTTP error! status: ${response.status}`);
name: 'AI绘图', }
order: 2 return await response.json();
}, } catch (error) {
'pic/ecy': { console.error('加载endpoint配置失败:', error);
name: '二次元(ALL)', return {}; // 返回空对象作为默认值
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() { async function loadStats() {
@ -120,7 +79,9 @@
} }
// 处理统计数据 // 处理统计数据
function updateStats(stats) { async function updateStats(stats) {
const endpointConfig = await loadEndpointConfig();
const startDate = new Date('2024-10-26'); const startDate = new Date('2024-10-26');
const today = new Date(); const today = new Date();
const daysSinceStart = Math.ceil((today - startDate) / (1000 * 60 * 60 * 24)); const daysSinceStart = Math.ceil((today - startDate) / (1000 * 60 * 60 * 24));
@ -128,63 +89,64 @@
let totalCalls = 0; let totalCalls = 0;
let todayCalls = 0; let todayCalls = 0;
Object.values(stats).forEach(stat => { Object.entries(stats).forEach(([endpoint, stat]) => {
totalCalls += stat.total_calls; if (endpointConfig[endpoint]) {
todayCalls += stat.today_calls; totalCalls += stat.total_calls;
todayCalls += stat.today_calls;
}
}); });
const avgCallsPerDay = Math.round(totalCalls / daysSinceStart); const avgCallsPerDay = Math.round(totalCalls / daysSinceStart);
// 获取所有endpoints并按order排序
const summaryHtml = `
<div class="stats-summary">
<div class="stats-header">
<h3>📊 接口调用次数 <span class="refresh-icon">🔄</span></h3>
</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>
`;
const sortedEndpoints = Object.entries(stats) const sortedEndpoints = Object.entries(stats)
.filter(([endpoint]) => endpointConfig[endpoint])
.sort(([endpointA], [endpointB]) => { .sort(([endpointA], [endpointB]) => {
const orderA = endpointConfig[endpointA]?.order || 999; const orderA = endpointConfig[endpointA].order;
const orderB = endpointConfig[endpointB]?.order || 999; const orderB = endpointConfig[endpointB].order;
return orderA - orderB; 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 = ` let detailHtml = `
<table> <table>
<thead> <thead>
<tr> <tr>
<th>接口</th> <th>接口</th>
<th>今日调用</th> <th>今日调用</th>
<th>总调用</th> <th>总调用</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
`; `;
sortedEndpoints.forEach(([endpoint, stat]) => { sortedEndpoints.forEach(([endpoint, stat]) => {
detailHtml += ` detailHtml += `
<tr> <tr>
<td> <td>
<a href="javascript:void(0)" <a href="javascript:void(0)"
onclick="copyToClipboard('${endpoint}')" onclick="copyToClipboard('${endpoint}')"
class="endpoint-link" class="endpoint-link"
title="点击复制链接"> title="点击复制链接">
${getDisplayName(endpoint)} ${getDisplayName(endpoint, endpointConfig)}
</a> </a>
</td> </td>
<td>${stat.today_calls}</td> <td>${stat.today_calls}</td>
<td>${stat.total_calls}</td> <td>${stat.total_calls}</td>
</tr> </tr>
`; `;
}); });
detailHtml += ` detailHtml += `
@ -192,7 +154,6 @@
</table> </table>
`; `;
// 插入统计数据
const summaryElement = document.getElementById('stats-summary'); const summaryElement = document.getElementById('stats-summary');
const detailElement = document.getElementById('stats-detail'); const detailElement = document.getElementById('stats-detail');
@ -201,10 +162,21 @@
} }
// 获取显示名称的函数 // 获取显示名称的函数
function getDisplayName(endpoint) { function getDisplayName(endpoint, endpointConfig) {
return endpointConfig[endpoint]?.name || endpoint; return endpointConfig[endpoint]?.name || endpoint;
} }
// 修改事件处理函数来处理异步更新
function refreshStats() {
fetch('/stats')
.then(response => response.json())
.then(stats => updateStats(stats))
.catch(error => console.error('Error:', error));
}
// 初始加载
document.addEventListener('DOMContentLoaded', refreshStats);
// 添加复制功能 // 添加复制功能
function copyToClipboard(endpoint) { function copyToClipboard(endpoint) {