AMAZEHOME/dns-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加websocket,数据实时显示

Browse Source
This commit is contained in:
Alex Yang
2025-11-26 01:17:25 +08:00
parent 54dbb024e1
commit 3d9990ddea
2 changed files with 271 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
static/index.html
View File

@@ -58,6 +58,34 @@
animation: glow-pulse 2s ease-in-out;
}
/* 服务器状态组件光晕效果 */
.glow-effect {
animation: pulse 2s ease-in-out;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(41, 128, 185, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(41, 128, 185, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(41, 128, 185, 0);
}
}
/* 服务器状态组件样式优化 */
.server-status-widget {
min-width: 170px;
transition: all 0.3s ease;
}
.server-status-widget:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* 蓝色光晕效果 */
.number-glow-blue {
animation: glow-blue 2s ease-in-out;
@@ -211,6 +239,32 @@
</div>
<div class="flex items-center space-x-4">
<!-- 服务器状态组件 -->
<div class="relative bg-white rounded-lg shadow-md px-3 py-2 flex items-center space-x-2 server-status-widget" id="server-status-widget">
<div class="flex flex-col">
<div class="flex items-center">
<span class="text-xs font-medium text-gray-500">CPU</span>
<span id="server-cpu-value" class="ml-2 text-sm font-semibold">0%</span>
</div>
<div class="w-16 h-1 bg-gray-100 rounded-full mt-1">
<div id="server-cpu-bar" class="h-full bg-warning rounded-full" style="width: 0%"></div>
</div>
</div>
<div class="w-1 h-8 bg-gray-200 rounded-full mx-1"></div>
<div class="flex flex-col">
<div class="flex items-center">
<span class="text-xs font-medium text-gray-500">查询</span>
<span id="server-queries-value" class="ml-2 text-sm font-semibold">0</span>
</div>
<div class="w-16 h-1 bg-gray-100 rounded-full mt-1">
<div id="server-queries-bar" class="h-full bg-primary rounded-full" style="width: 0%"></div>
</div>
</div>
<div class="absolute top-1 right-1">
<span id="server-status-indicator" class="inline-block w-2 h-2 bg-success rounded-full"></span>
</div>
</div>
<button class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100">
<i class="fa fa-bell text-lg"></i>
</button>
@@ -564,6 +618,7 @@
<script src="js/main.js"></script>
<script src="js/api.js"></script>
<script src="js/dashboard.js"></script>
<script src="js/server-status.js"></script>
<script src="js/shield.js"></script>
<script src="js/hosts.js"></script>
<script src="js/query.js"></script>