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

点击展开按钮悬浮窗显示详细24小时/7天/30天详细信息

Browse Source
This commit is contained in:
Alex Yang
2025-11-26 15:16:55 +08:00
parent 30ddd53f19
commit 3ee31047e9
6 changed files with 60299 additions and 1608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
static/index.html
View File

@@ -511,38 +511,60 @@
<!-- 图表和数据表格 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- DNS请求趋势图表 -->
<div class="bg-white rounded-lg p-6 card-shadow lg:col-span-3">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold">DNS请求趋势</h3>
<!-- 时间范围切换按钮 -->
<div class="flex space-x-2">
<button class="time-range-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors" data-range="mixed">混合视图</button>
<button class="time-range-btn px-4 py-2 rounded-md bg-primary text-white" data-range="24h">24小时</button>
<button class="time-range-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors" data-range="7d">7天</button>
<button class="time-range-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors" data-range="30d">30天</button>
</div>
</div>
<div class="h-80">
<canvas id="dns-requests-chart"></canvas>
</div>
</div>
<!-- 解析与屏蔽比例 -->
<div class="bg-white rounded-lg p-6 card-shadow lg:col-span-3">
<!-- 三个图表在同一行显示 -->
<div class="bg-white rounded-lg p-6 card-shadow lg:col-span-1 md:col-span-1">
<h3 class="text-lg font-semibold mb-6">解析与屏蔽比例</h3>
<div class="h-80 flex items-center justify-center">
<div class="h-64 flex items-center justify-center">
<canvas id="ratio-chart"></canvas>
</div>
</div>
<!-- 解析类型统计 -->
<div class="bg-white rounded-lg p-6 card-shadow lg:col-span-3">
<div class="bg-white rounded-lg p-6 card-shadow lg:col-span-1 md:col-span-1">
<h3 class="text-lg font-semibold mb-6">解析类型统计</h3>
<div class="h-80 flex items-center justify-center">
<div class="h-64 flex items-center justify-center">
<canvas id="query-type-chart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg p-6 card-shadow lg:col-span-1 md:col-span-1">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold">DNS请求趋势</h3>
<!-- 展开按钮 -->
<button id="expand-chart-btn" class="p-2 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors" title="展开详细图表">
<i class="fa fa-expand"></i>
</button>
</div>
<div class="h-64">
<canvas id="dns-requests-chart"></canvas>
</div>
</div>
</div>
<!-- 详细图表浮窗 -->
<div id="chart-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg w-full max-w-5xl max-h-[90vh] overflow-hidden">
<div class="flex items-center justify-between p-6 border-b border-gray-200">
<h3 class="text-xl font-semibold">DNS请求趋势详细图表</h3>
<div class="flex items-center space-x-4">
<!-- 时间范围切换按钮 -->
<div class="flex space-x-2">
<button class="time-range-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors" data-range="mixed">混合视图</button>
<button class="time-range-btn px-4 py-2 rounded-md bg-primary text-white" data-range="24h">24小时</button>
<button class="time-range-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors" data-range="7d">7天</button>
<button class="time-range-btn px-4 py-2 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors" data-range="30d">30天</button>
</div>
<!-- 关闭按钮 -->
<button id="close-modal-btn" class="p-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors">
<i class="fa fa-times"></i>
</button>
</div>
</div>
<div class="p-6">
<div class="h-[600px]">
<canvas id="detailed-dns-requests-chart"></canvas>
</div>
</div>
</div>
</div>
<!-- 最近活动表格 -->