style(public/css, public/index.html): Update fade class and endpoint-link color, fetch stats from local server, add view column and update interval

This commit is contained in:
wood chen 2024-10-27 20:57:27 +08:00
parent f2d4d5d2a4
commit abd9c75e7f
2 changed files with 19 additions and 17 deletions

View File

@ -108,9 +108,9 @@ table {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.fade { /* .fade {
opacity: 0.6; opacity: 0.6;
} } */
.endpoint-link { .endpoint-link {
/* color: #666; 默认字体颜色改为深灰色 */ /* color: #666; 默认字体颜色改为深灰色 */

View File

@ -67,7 +67,7 @@
if (detailElement) detailElement.classList.add('fade'); if (detailElement) detailElement.classList.add('fade');
// 获取数据 // 获取数据
const response = await fetch('https://random-api.czl.net/stats'); const response = await fetch('/stats');
const stats = await response.json(); const stats = await response.json();
// 更新统计 // 更新统计
@ -136,6 +136,7 @@
<th>接口</th> <th>接口</th>
<th>今日调用</th> <th>今日调用</th>
<th>总调用</th> <th>总调用</th>
<th>查看</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -143,19 +144,20 @@
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, endpointConfig)} ${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> <td><a href="${endpoint}" target="_blank" rel="noopener noreferrer">👀</a></td>
`; </tr>
`;
}); });
detailHtml += ` detailHtml += `
@ -226,7 +228,7 @@
.catch(error => console.error('Error loading index.md:', error)); .catch(error => console.error('Error loading index.md:', error));
// 定期更新统计数据 // 定期更新统计数据
setInterval(loadStats, 3 * 1000); setInterval(loadStats, 5 * 1000);
</script> </script>
</body> </body>