AMAZEHOME/monitor
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

多项优化

Browse Source
This commit is contained in:
Alex Yang
2025-12-03 12:11:20 +08:00
parent bd70dc1748
commit 454a205051
3 changed files with 155 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
backend/static/index.html
View File

@@ -38,7 +38,22 @@
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
</style>
/* 自动刷新开关样式 */
.toggle-checkbox:checked {
right: 0;
border-color: #3b82f6;
}
.toggle-checkbox:checked + .toggle-label {
background-color: #3b82f6;
}
.toggle-checkbox {
right: 5px;
top: 2px;
}
</style>
</head>
<body class="bg-gray-50 text-gray-900">
<!-- 顶部导航栏 -->
@@ -257,33 +272,53 @@
<!-- 图表选项卡导航 -->
<div class="mb-6">
<div class="bg-white rounded-xl shadow-md border border-gray-100">
<div class="flex flex-wrap items-center justify-between px-6 py-4" id="chartTabs">
<div class="flex flex-wrap items-start justify-between px-6 py-4" id="chartTabs">
<!-- 选项卡导航 -->
<div class="flex flex-wrap">
<div class="flex flex-wrap items-center gap-2">
<!-- CPU 选项卡 -->
<button class="chart-tab active px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600 hover:bg-gray-50 transition-colors mr-2" data-tab="cpu">
<button class="chart-tab active px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600 hover:bg-gray-50 transition-colors" data-tab="cpu">
CPU
</button>
<!-- 内存 选项卡 -->
<button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors mr-2" data-tab="memory">
<button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors" data-tab="memory">
内存
</button>
<!-- 磁盘 选项卡 -->
<button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors mr-2" data-tab="disk">
<button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors" data-tab="disk">
磁盘
</button>
<!-- 网络 选项卡 -->
<button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors mr-2" data-tab="network">
<button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors" data-tab="network">
网络
</button>
<!-- 网速 选项卡 -->
<button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors mr-2" data-tab="speed">
<button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors" data-tab="speed">
网速
</button>
<!-- 网卡选择和刷新按钮 -->
<div id="interfaceSelectorContainer" class="flex items-center gap-1 ml-4 hidden">
<label for="networkInterface" class="text-sm font-medium text-gray-700">网卡:</label>
<select id="networkInterface" class="px-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<option value="all">所有网卡</option>
</select>
<button id="refreshInterfacesBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors text-sm">
<i class="fa fa-refresh"></i>
</button>
</div>
<!-- 自动刷新开关 -->
<div class="flex items-center gap-2 ml-4">
<label for="autoRefreshToggle" class="text-sm font-medium text-gray-700">自动刷新:</label>
<div class="relative inline-block w-10 mr-2 align-middle select-none">
<input type="checkbox" id="autoRefreshToggle" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer" checked="false">
<label for="autoRefreshToggle" class="toggle-label block overflow-hidden h-5 rounded-full bg-gray-300 cursor-pointer"></label>
</div>
</div>
</div>
<!-- 自定义时间选择 -->
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 mt-2 md:mt-0 w-full md:w-auto">
<input type="datetime-local" id="customStartTime" class="px-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
<span class="text-gray-500 text-sm">至</span>
<input type="datetime-local" id="customEndTime" class="px-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
@@ -375,8 +410,11 @@
<thead>
<tr class="bg-gray-50">
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备名称</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备ID</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP地址</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">token</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>