DNS/dns-server
1
0
Fork 0
Code Pull Requests Activity

更新Swagger API文档

Browse Source
This commit is contained in:
Alex Yang
2025-11-29 19:30:47 +08:00
parent aea162a616
commit ca876a8951
39 changed files with 16612 additions and 2003 deletions
Download Patch File Download Diff File Expand all files Collapse all files

470
static/index.html
View File

@@ -45,11 +45,129 @@
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.sidebar-item-active {
@apply bg-primary/10 text-primary border-r-4 border-primary;
background-color: rgba(22, 93, 255, 0.1);
color: #165DFF;
border-right: 4px solid #165DFF;
}
}
</style>
</head>
<!-- 数字光晕效果样式 -->
<style>
/* 数字光晕效果基础样式 */
.number-glow {
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;
}
/* 红色光晕效果 */
.number-glow-red {
animation: glow-red 2s ease-in-out;
}
/* 绿色光晕效果 */
.number-glow-green {
animation: glow-green 2s ease-in-out;
}
/* 黄色光晕效果 */
.number-glow-yellow {
animation: glow-yellow 2s ease-in-out;
}
/* 光晕动画定义 */
@keyframes glow-pulse {
0% {
text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
}
@keyframes glow-blue {
0% {
text-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
}
}
@keyframes glow-red {
0% {
text-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(239, 68, 68, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
}
}
@keyframes glow-green {
0% {
text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(16, 185, 129, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}
}
@keyframes glow-yellow {
0% {
text-shadow: 0 0 5px rgba(250, 204, 21, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(250, 204, 21, 0.7);
}
100% {
text-shadow: 0 0 5px rgba(250, 204, 21, 0.3);
}
}
</style>
</head>
<body class="bg-gray-50 text-dark font-sans">
<div class="flex h-screen overflow-hidden">
<!-- 侧边栏 -->
@@ -121,6 +239,56 @@
</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 id="server-additional-stats" class="hidden flex items-center">
<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-total-queries" class="ml-2 text-sm font-semibold">0</span>
</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-blocked-queries" class="ml-2 text-sm font-semibold">0</span>
</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-allowed-queries" class="ml-2 text-sm font-semibold">0</span>
</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>
@@ -138,96 +306,263 @@
<!-- 统计卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- 查询总量卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">查询总量</h3>
<div class="p-2 rounded-full bg-primary/10 text-primary">
<i class="fa fa-refresh"></i>
<div class="bg-blue-50 rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-primary opacity-10"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">查询总量</h3>
<div class="p-2 rounded-full bg-primary/10 text-primary">
<i class="fa fa-refresh"></i>
</div>
</div>
<div class="mb-2">
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="total-queries">0</p>
<span class="text-success text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
<span id="queries-percent">0%</span>
</span>
</div>
<div class="h-16 mt-2">
<canvas id="query-chart"></canvas>
</div>
</div>
</div>
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="total-queries">0</p>
<span class="text-success text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
<span id="queries-percent">0%</span>
</span>
</div>
</div>
<!-- 屏蔽数量卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">屏蔽数量</h3>
<div class="p-2 rounded-full bg-danger/10 text-danger">
<i class="fa fa-ban"></i>
<div class="bg-red-50 rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-danger opacity-10"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">屏蔽数量</h3>
<div class="p-2 rounded-full bg-danger/10 text-danger">
<i class="fa fa-ban"></i>
</div>
</div>
<div class="mb-2">
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="blocked-queries">0</p>
<span class="text-danger text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
<span id="blocked-percent">0%</span>
</span>
</div>
<div class="h-16 mt-2">
<canvas id="blocked-chart"></canvas>
</div>
</div>
</div>
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="blocked-queries">0</p>
<span class="text-danger text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
<span id="blocked-percent">0%</span>
</span>
</div>
</div>
<!-- 正常解析卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">正常解析</h3>
<div class="p-2 rounded-full bg-success/10 text-success">
<i class="fa fa-check"></i>
<div class="bg-green-50 rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-success opacity-10"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">正常解析</h3>
<div class="p-2 rounded-full bg-success/10 text-success">
<i class="fa fa-check"></i>
</div>
</div>
<div class="mb-2">
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="allowed-queries">0</p>
<span class="text-success text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
<span id="allowed-percent">0%</span>
</span>
</div>
<div class="h-16 mt-2">
<canvas id="allowed-chart"></canvas>
</div>
</div>
</div>
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="allowed-queries">0</p>
<span class="text-success text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
<span id="allowed-percent">0%</span>
</span>
</div>
</div>
<!-- 错误数量卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">错误数量</h3>
<div class="p-2 rounded-full bg-warning/10 text-warning">
<i class="fa fa-exclamation-triangle"></i>
<div class="bg-yellow-50 rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-warning opacity-10"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">错误数量</h3>
<div class="p-2 rounded-full bg-warning/10 text-warning">
<i class="fa fa-exclamation-triangle"></i>
</div>
</div>
<div class="mb-2">
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="error-queries">0</p>
<span class="text-warning text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
<span id="error-percent">0%</span>
</span>
</div>
<div class="h-16 mt-2">
<canvas id="error-chart"></canvas>
</div>
</div>
</div>
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="error-queries">0</p>
<span class="text-warning text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
<span id="error-percent">0%</span>
</span>
</div>
<!-- 平均响应时间卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-info opacity-10"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">平均响应时间</h3>
<div class="p-2 rounded-full bg-info/10 text-info">
<i class="fa fa-clock-o"></i>
</div>
</div>
<div class="mb-2">
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="avg-response-time">0ms</p>
<span class="text-success text-sm flex items-center">
<i class="fa fa-arrow-down mr-1"></i>
<span id="response-time-percent">0%</span>
</span>
</div>
<div class="h-16 mt-2">
<canvas id="response-time-chart"></canvas>
</div>
</div>
</div>
</div>
<!-- 最常用查询类型卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-secondary opacity-10"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">最常用查询类型</h3>
<div class="p-2 rounded-full bg-secondary/10 text-secondary">
<i class="fa fa-database"></i>
</div>
</div>
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="top-query-type">A</p>
<span class="text-primary text-sm flex items-center">
<i class="fa fa-circle text-xs mr-1"></i>
<span id="query-type-percentage">0%</span>
</span>
</div>
</div>
</div>
<!-- 活跃来源IP数卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-success opacity-10"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">活跃来源IP</h3>
<div class="p-2 rounded-full bg-success/10 text-success">
<i class="fa fa-globe"></i>
</div>
</div>
<div class="mb-2">
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="active-ips">0</p>
<span class="text-success text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
<span id="active-ips-percent">0%</span>
</span>
</div>
<div class="h-16 mt-2">
<canvas id="ips-chart"></canvas>
</div>
</div>
</div>
</div>
<!-- CPU使用率卡片 -->
<div class="bg-white rounded-lg p-6 card-shadow relative overflow-hidden">
<!-- 颜色蒙版 -->
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-warning opacity-10"></div>
<div class="relative z-10">
<div class="flex items-center justify-between mb-4">
<h3 class="text-gray-500 font-medium">CPU使用率</h3>
<div class="p-2 rounded-full bg-warning/10 text-warning">
<i class="fa fa-microchip"></i>
</div>
</div>
<div class="mb-2">
<div class="flex items-end justify-between">
<p class="text-3xl font-bold" id="cpu-usage">0%</p>
<span class="text-warning text-sm flex items-center">
<i class="fa fa-bolt mr-1"></i>
<span id="cpu-status">正常</span>
</span>
</div>
<div class="h-16 mt-2">
<canvas id="cpu-chart"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- 图表和数据表格 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 查询趋势图表 -->
<div class="bg-white rounded-lg p-6 card-shadow lg:col-span-2">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold">查询趋势</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 text-sm rounded-full bg-primary/10 text-primary">24小时</button>
<button class="px-3 py-1 text-sm rounded-full text-gray-500 hover:bg-gray-100">7天</button>
<button class="px-3 py-1 text-sm rounded-full text-gray-500 hover:bg-gray-100">30天</button>
</div>
</div>
<div class="h-80">
<canvas id="query-trend-chart"></canvas>
<!-- 三个图表在同一行显示 -->
<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-64 flex items-center justify-center">
<canvas id="ratio-chart"></canvas>
</div>
</div>
<!-- 解析与屏蔽比例 -->
<div class="bg-white rounded-lg p-6 card-shadow">
<h3 class="text-lg font-semibold mb-6">解析与屏蔽比例</h3>
<div class="h-80 flex items-center justify-center">
<canvas id="ratio-chart"></canvas>
<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-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>
@@ -329,9 +664,10 @@
<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>
<script src="js/config.js"></script>
</body>
</body>
</html>