DNS/dns-server
1
0
Fork 0
Code Issues Pull Requests 1 Releases 4 Wiki Activity

多项更新优化

Browse Source
This commit is contained in:
Alex Yang
2025-12-26 09:02:59 +08:00
parent 356310ae75
commit b48dc4ed27
18 changed files with 1178 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
static/index.html
View File

@@ -18,9 +18,67 @@
<body class="bg-gray-50 text-dark font-sans">
<div class="flex h-screen overflow-hidden">
<!-- 侧边栏 -->
<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">
<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 hidden md:flex">
<!-- 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>
<h1 class="text-xl font-bold text-primary">DNS 控制台</h1>
</div>
<!-- 菜单 -->
<nav class="flex-1 overflow-y-auto p-4">
<ul class="space-y-1">
<li>
<a href="#dashboard" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md transition-all sidebar-item-active">
<i class="fa fa-tachometer mr-3 text-lg"></i>
<span>仪表盘</span>
</a>
</li>
<li>
<a href="#shield" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md transition-all">
<i class="fa fa-shield mr-3 text-lg"></i>
<span>屏蔽管理</span>
</a>
</li>
<li>
<a href="#hosts" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md transition-all">
<i class="fa fa-file-text mr-3 text-lg"></i>
<span>Hosts管理</span>
</a>
</li>
<li>
<a href="#query" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md transition-all">
<i class="fa fa-search mr-3 text-lg"></i>
<span>DNS屏蔽查询</span>
</a>
</li>
<li>
<a href="#logs" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md transition-all">
<i class="fa fa-file-text-o mr-3 text-lg"></i>
<span>查询日志</span>
</a>
</li>
<li>
<a href="#config" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md transition-all">
<i class="fa fa-cog mr-3 text-lg"></i>
<span>系统设置</span>
</a>
</li>
</ul>
</nav>
<!-- 底部信息 -->
<div class="p-4 border-t border-gray-200 text-center text-gray-500 text-sm">
<p>DNS服务器 v1.2.0</p>
<p class="mt-1" id="uptime">正常运行中</p>
</div>
</aside>
<!-- 移动端侧边栏 -->
<aside id="mobile-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 -translate-x-full md:hidden">
<!-- 移动端关闭按钮 -->
<div class="absolute top-4 right-4 md:hidden">
<div class="absolute top-4 right-4">
<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>
@@ -85,9 +143,9 @@
<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">
<main class="flex-1 flex flex-col md:ml-64">
<!-- 顶部导航栏 -->
<header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6">
<header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6 sticky top-0 z-30">
<div class="flex items-center">
<button id="toggle-sidebar" class="block md:hidden text-gray-500 hover:text-gray-700 focus:outline-none">
<i class="fa fa-bars text-xl"></i>
@@ -96,55 +154,6 @@
</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 md:min-w-[300px] sm:min-w-[250px] min-w-[180px]" 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 md: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>
@@ -170,7 +179,7 @@
</header>
<!-- 页面内容 -->
<div class="p-6">
<div class="p-6 overflow-y-auto flex-1">
<!-- 仪表盘部分 -->
<div id="dashboard-content" class="space-y-6">
<!-- 统计卡片 -->
@@ -975,13 +984,12 @@
</div>
</th>
<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">响应时间</th>
<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">屏蔽规则</th>
<th class="text-center py-3 px-4 text-sm font-medium text-gray-500">操作</th>
</tr>
</thead>
<tbody id="logs-table-body">
<tr>
<td colspan="6" class="py-8 text-center text-gray-500 border-b border-gray-100">
<td colspan="5" class="py-8 text-center text-gray-500 border-b border-gray-100">
<i class="fa fa-file-text-o text-4xl mb-2 text-gray-300"></i>
<div>暂无查询日志</div>
</td>
@@ -1050,13 +1058,19 @@
<input type="text" id="dns-upstream-servers" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="8.8.8.8, 1.1.1.1">
</div>
<div>
<label for="dns-stats-file" class="block text-sm font-medium text-gray-700 mb-1">统计文件路径</label>
<input type="text" id="dns-stats-file" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="./stats.json">
<label for="dns-dnssec-upstream-servers" class="block text-sm font-medium text-gray-700 mb-1">DNSSEC上游DNS服务器 (逗号分隔)</label>
<input type="text" id="dns-dnssec-upstream-servers" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="8.8.8.8, 1.1.1.1">
</div>
<div>
<label for="dns-save-interval" class="block text-sm font-medium text-gray-700 mb-1">保存间隔 (秒)</label>
<input type="number" id="dns-save-interval" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="300">
</div>
<div class="md:col-span-2">
<label class="flex items-center space-x-2">
<input type="checkbox" id="dns-enable-ipv6" class="rounded text-primary focus:ring-primary">
<span class="text-sm font-medium text-gray-700">启用IPv6解析（AAAA记录）</span>
</label>
</div>
</div>
</div>
@@ -1074,15 +1088,6 @@
<!-- 屏蔽配置 -->
<div class="mb-8">
<h4 class="text-md font-medium mb-4">屏蔽配置</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-6">
<div>
<label for="shield-local-rules-file" class="block text-sm font-medium text-gray-700 mb-1">自定义规则文件</label>
<input type="text" id="shield-local-rules-file" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="./rules.txt">
</div>
<div>
<label for="shield-hosts-file" class="block text-sm font-medium text-gray-700 mb-1">Hosts文件</label>
<input type="text" id="shield-hosts-file" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="/etc/hosts">
</div>
<div>
<label for="shield-update-interval" class="block text-sm font-medium text-gray-700 mb-1">更新间隔 (秒)</label>
<input type="number" id="shield-update-interval" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="3600">
@@ -1117,15 +1122,29 @@
</div>
<!-- 修改密码模态框 -->
<!-- 日志详情模态框 -->
<div id="log-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold">日志详情</h3>
<button id="close-log-modal-btn" class="text-gray-500 hover:text-gray-700 focus:outline-none">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<div id="log-detail-content">
<!-- 日志详情内容将通过JS动态填充 -->
</div>
</div>
</div>
<div id="change-password-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
<div class="flex items-center justify-between mb-6">
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold">修改密码</h3>
<button id="close-modal-btn" class="text-gray-500 hover:text-gray-700 focus:outline-none">
<i class="fa fa-times text-xl"></i>
</button>
</div>
<form id="change-password-form">
<div class="mb-4">
<label for="current-password" class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
@@ -1155,7 +1174,6 @@
<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>