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

添加了Swagger API文档以及诸多优化

Browse Source
This commit is contained in:
Alex Yang
2025-11-28 02:15:42 +08:00
parent 67c651c804
commit 2e7d5fb1ce
9 changed files with 1080 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
static/index.html
View File

@@ -171,7 +171,13 @@
<body class="bg-gray-50 text-dark font-sans">
<div class="flex h-screen overflow-hidden">
<!-- 侧边栏 -->
<aside id="sidebar" class="w-64 bg-white border-r border-gray-200 flex flex-col transition-all duration-300 z-10">
<aside id="sidebar" class="fixed inset-y-0 left-0 w-64 bg-white border-r border-gray-200 flex flex-col transition-transform duration-300 z-50 md:relative md:translate-x-0 -translate-x-full shadow-lg">
<!-- 移动端关闭按钮 -->
<div class="absolute top-4 right-4 md:hidden">
<button id="close-sidebar" class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<!-- Logo -->
<div class="flex items-center justify-center h-16 border-b border-gray-200">
<i class="fa fa-server text-3xl text-primary mr-3"></i>
@@ -227,12 +233,15 @@
</div>
</aside>
<!-- 侧边栏遮罩层 -->
<div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden md:hidden"></div>
<!-- 主内容区 -->
<main class="flex-1 overflow-y-auto">
<!-- 顶部导航栏 -->
<header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6">
<div class="flex items-center">
<button id="toggle-sidebar" class="lg:hidden text-gray-500 hover:text-gray-700">
<button id="toggle-sidebar" class="md:block lg:hidden text-gray-500 hover:text-gray-700 focus:outline-none">
<i class="fa fa-bars text-xl"></i>
</button>
<h2 class="ml-4 text-xl font-semibold" id="page-title">仪表盘</h2>
@@ -529,41 +538,99 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- 最常屏蔽域名 -->
<div class="bg-white rounded-lg p-6 card-shadow">
<h3 class="text-lg font-semibold mb-6">最常屏蔽域名</h3>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead>
<tr class="border-b border-gray-200">
<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">域名</th>
<th class="text-right py-3 px-4 text-sm font-medium text-gray-500">屏蔽次数</th>
</tr>
</thead>
<tbody id="top-blocked-table">
<tr>
<td colspan="2" class="py-4 text-center text-gray-500">加载中...</td>
</tr>
</tbody>
</table>
<h3 class="text-lg font-semibold mb-4">最常屏蔽域名</h3>
<div class="h-64 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
<div class="space-y-3" id="top-blocked-table">
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-danger">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<span class="w-6 h-6 flex items-center justify-center rounded-full bg-danger/10 text-danger text-xs font-medium mr-3">1</span>
<span class="font-medium truncate">example1.com</span>
</div>
</div>
<span class="ml-4 flex-shrink-0 font-semibold text-danger">150</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-danger">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<span class="w-6 h-6 flex items-center justify-center rounded-full bg-danger/10 text-danger text-xs font-medium mr-3">2</span>
<span class="font-medium truncate">example2.com</span>
</div>
</div>
<span class="ml-4 flex-shrink-0 font-semibold text-danger">130</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-danger">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<span class="w-6 h-6 flex items-center justify-center rounded-full bg-danger/10 text-danger text-xs font-medium mr-3">3</span>
<span class="font-medium truncate">example3.com</span>
</div>
</div>
<span class="ml-4 flex-shrink-0 font-semibold text-danger">120</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-danger">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<span class="w-6 h-6 flex items-center justify-center rounded-full bg-danger/10 text-danger text-xs font-medium mr-3">4</span>
<span class="font-medium truncate">example4.com</span>
</div>
</div>
<span class="ml-4 flex-shrink-0 font-semibold text-danger">110</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-danger">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<span class="w-6 h-6 flex items-center justify-center rounded-full bg-danger/10 text-danger text-xs font-medium mr-3">5</span>
<span class="font-medium truncate">example5.com</span>
</div>
</div>
<span class="ml-4 flex-shrink-0 font-semibold text-danger">100</span>
</div>
</div>
</div>
</div>
<!-- 最近屏蔽域名 -->
<div class="bg-white rounded-lg p-6 card-shadow">
<h3 class="text-lg font-semibold mb-6">最近屏蔽域名</h3>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead>
<tr class="border-b border-gray-200">
<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">域名</th>
<th class="text-right py-3 px-4 text-sm font-medium text-gray-500">时间</th>
</tr>
</thead>
<tbody id="recent-blocked-table">
<tr>
<td colspan="2" class="py-4 text-center text-gray-500">加载中...</td>
</tr>
</tbody>
</table>
<h3 class="text-lg font-semibold mb-4">最近屏蔽域名</h3>
<div class="h-64 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
<div class="space-y-3" id="recent-blocked-table">
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-warning">
<div class="flex-1 min-w-0">
<div class="font-medium truncate">recent1.com</div>
<div class="text-sm text-gray-500 mt-1">2024-01-01 10:00:00</div>
</div>
<span class="ml-4 flex-shrink-0 text-sm text-gray-500">广告</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-warning">
<div class="flex-1 min-w-0">
<div class="font-medium truncate">recent2.com</div>
<div class="text-sm text-gray-500 mt-1">2024-01-01 10:01:00</div>
</div>
<span class="ml-4 flex-shrink-0 text-sm text-gray-500">恶意</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-warning">
<div class="flex-1 min-w-0">
<div class="font-medium truncate">recent3.com</div>
<div class="text-sm text-gray-500 mt-1">2024-01-01 10:02:00</div>
</div>
<span class="ml-4 flex-shrink-0 text-sm text-gray-500">广告</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-warning">
<div class="flex-1 min-w-0">
<div class="font-medium truncate">recent4.com</div>
<div class="text-sm text-gray-500 mt-1">2024-01-01 10:03:00</div>
</div>
<span class="ml-4 flex-shrink-0 text-sm text-gray-500">追踪</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-warning">
<div class="flex-1 min-w-0">
<div class="font-medium truncate">recent5.com</div>
<div class="text-sm text-gray-500 mt-1">2024-01-01 10:04:00</div>
</div>
<span class="ml-4 flex-shrink-0 text-sm text-gray-500">恶意</span>
</div>
</div>
</div>
</div>
</div>
@@ -572,7 +639,7 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
<!-- TOP客户端 -->
<div class="bg-white rounded-lg p-6 card-shadow">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">TOP客户端</h3>
<div id="top-clients-loading" class="flex items-center text-sm text-gray-500">
<i class="fa fa-spinner fa-spin mr-2"></i>
@@ -584,20 +651,54 @@
<button id="retry-top-clients" class="ml-2 text-primary hover:underline">重试</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead>
<tr class="border-b border-gray-200">
<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">IP地址</th>
<th class="text-right py-3 px-4 text-sm font-medium text-gray-500">请求次数</th>
</tr>
</thead>
<tbody id="top-clients-table">
<tr>
<td colspan="2" class="py-4 text-center text-gray-500">加载中...</td>
</tr>
</tbody>
</table>
<div class="h-64 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
<div class="space-y-3" id="top-clients-table">
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-primary">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<span class="w-6 h-6 flex items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-medium mr-3">1</span>
<span class="font-medium truncate">192.168.1.1</span>
</div>
</div>
<span class="ml-4 flex-shrink-0 font-semibold text-primary">500</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-primary">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<span class="w-6 h-6 flex items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-medium mr-3">2</span>
<span class="font-medium truncate">192.168.1.2</span>
</div>
</div>
<span class="ml-4 flex-shrink-0 font-semibold text-primary">450</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-primary">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<span class="w-6 h-6 flex items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-medium mr-3">3</span>
<span class="font-medium truncate">192.168.1.3</span>
</div>
</div>
<span class="ml-4 flex-shrink-0 font-semibold text-primary">400</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-primary">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<span class="w-6 h-6 flex items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-medium mr-3">4</span>
<span class="font-medium truncate">192.168.1.4</span>
</div>
</div>
<span class="ml-4 flex-shrink-0 font-semibold text-primary">350</span>
</div>
<div class="flex items-center justify-between p-3 rounded-md hover:bg-gray-50 transition-colors border-l-4 border-primary">
<div class="flex-1 min-w-0">
<div class="flex items-center">
<span class="w-6 h-6 flex items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-medium mr-3">5</span>
<span class="font-medium truncate">192.168.1.5</span>
</div>
</div>
<span class="ml-4 flex-shrink-0 font-semibold text-primary">300</span>
</div>
</div>
</div>
</div>
@@ -972,5 +1073,7 @@
<script src="js/hosts.js"></script>
<script src="js/query.js"></script>
<script src="js/config.js"></script>
<!-- 直接渲染滚动列表的静态HTML内容 -->
</body>
</html>