web增加屏蔽管理和DNS查询功能
This commit is contained in:
Alex Yang
@@ -635,12 +635,187 @@
|
||||
</div>
|
||||
|
||||
<!-- 其他页面内容（初始隐藏） -->
|
||||
<div id="shield-content" class="hidden">
|
||||
<!-- 屏蔽管理页面内容 -->
|
||||
<div id="shield-content" class="hidden space-y-6">
|
||||
<!-- 屏蔽规则统计信息 -->
|
||||
<div class="bg-white rounded-lg p-6 card-shadow">
|
||||
<h3 class="text-lg font-semibold mb-6">远程规则管理</h3>
|
||||
<!-- 这里将添加屏蔽规则管理相关内容 -->
|
||||
<p>远程规则管理页面内容待实现</p>
|
||||
<h3 class="text-lg font-semibold mb-6">屏蔽规则统计</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-blue-50 p-4 rounded-lg">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="text-sm font-medium text-gray-500">域名规则</h4>
|
||||
<i class="fa fa-list text-blue-500"></i>
|
||||
</div>
|
||||
<p class="text-2xl font-bold" id="domain-rules-count">0</p>
|
||||
</div>
|
||||
<div class="bg-green-50 p-4 rounded-lg">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="text-sm font-medium text-gray-500">域名例外</h4>
|
||||
<i class="fa fa-check-circle text-green-500"></i>
|
||||
</div>
|
||||
<p class="text-2xl font-bold" id="domain-exceptions-count">0</p>
|
||||
</div>
|
||||
<div class="bg-purple-50 p-4 rounded-lg">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="text-sm font-medium text-gray-500">正则规则</h4>
|
||||
<i class="fa fa-code text-purple-500"></i>
|
||||
</div>
|
||||
<p class="text-2xl font-bold" id="regex-rules-count">0</p>
|
||||
</div>
|
||||
<div class="bg-yellow-50 p-4 rounded-lg">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="text-sm font-medium text-gray-500">正则例外</h4>
|
||||
<i class="fa fa-exclamation-circle text-yellow-500"></i>
|
||||
</div>
|
||||
<p class="text-2xl font-bold" id="regex-exceptions-count">0</p>
|
||||
</div>
|
||||
<div class="bg-red-50 p-4 rounded-lg">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="text-sm font-medium text-gray-500">Hosts规则</h4>
|
||||
<i class="fa fa-file-text text-red-500"></i>
|
||||
</div>
|
||||
<p class="text-2xl font-bold" id="hosts-rules-count">0</p>
|
||||
</div>
|
||||
<div class="bg-indigo-50 p-4 rounded-lg">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="text-sm font-medium text-gray-500">黑名单数量</h4>
|
||||
<i class="fa fa-ban text-indigo-500"></i>
|
||||
</div>
|
||||
<p class="text-2xl font-bold" id="blacklist-count">0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本地规则管理 -->
|
||||
<div class="bg-white rounded-lg p-6 card-shadow">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-semibold">本地规则管理</h3>
|
||||
<button id="add-rule-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
|
||||
<i class="fa fa-plus mr-2"></i>添加规则
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 添加规则表单 -->
|
||||
<div id="add-rule-form" class="mb-6 bg-gray-50 p-4 rounded-lg hidden">
|
||||
<div class="flex items-center space-x-4">
|
||||
<input type="text" id="new-rule" placeholder="输入规则（例如：example.com 或 regex:/example\.com/）" class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||||
<button id="save-rule-btn" class="px-4 py-2 bg-success text-white rounded-md hover:bg-success/90 transition-colors">
|
||||
保存
|
||||
</button>
|
||||
<button id="cancel-rule-btn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
|
||||
取消
|
||||
</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">规则</th>
|
||||
<th class="text-right py-3 px-4 text-sm font-medium text-gray-500">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="rules-table-body">
|
||||
<tr>
|
||||
<td colspan="2" class="py-4 text-center text-gray-500">暂无规则</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 远程黑名单管理 -->
|
||||
<div class="bg-white rounded-lg p-6 card-shadow">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-semibold">远程黑名单管理</h3>
|
||||
<button id="add-blacklist-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
|
||||
<i class="fa fa-plus mr-2"></i>添加黑名单
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 添加黑名单表单 -->
|
||||
<div id="add-blacklist-form" class="mb-6 bg-gray-50 p-4 rounded-lg hidden">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label for="blacklist-name" class="block text-sm font-medium text-gray-700 mb-1">名称</label>
|
||||
<input type="text" id="blacklist-name" placeholder="输入黑名单名称" 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">
|
||||
</div>
|
||||
<div>
|
||||
<label for="blacklist-url" class="block text-sm font-medium text-gray-700 mb-1">URL</label>
|
||||
<input type="text" id="blacklist-url" placeholder="输入黑名单URL" 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">
|
||||
</div>
|
||||
<div class="flex items-end space-x-4">
|
||||
<button id="save-blacklist-btn" class="px-4 py-2 bg-success text-white rounded-md hover:bg-success/90 transition-colors">
|
||||
保存
|
||||
</button>
|
||||
<button id="cancel-blacklist-btn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</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">名称</th>
|
||||
<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">URL</th>
|
||||
<th class="text-center 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="blacklists-table-body">
|
||||
<tr>
|
||||
<td colspan="4" class="py-4 text-center text-gray-500">暂无黑名单</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hosts条目管理 -->
|
||||
<div class="bg-white rounded-lg p-6 card-shadow">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-semibold">Hosts条目管理</h3>
|
||||
<button id="add-hosts-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
|
||||
<i class="fa fa-plus mr-2"></i>添加条目
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 添加hosts条目表单 -->
|
||||
<div id="add-hosts-form" class="mb-6 bg-gray-50 p-4 rounded-lg hidden">
|
||||
<div class="flex items-center space-x-4">
|
||||
<input type="text" id="hosts-ip" placeholder="IP地址" class="w-32 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||||
<input type="text" id="hosts-domain" placeholder="域名" class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||||
<button id="save-hosts-btn" class="px-4 py-2 bg-success text-white rounded-md hover:bg-success/90 transition-colors">
|
||||
保存
|
||||
</button>
|
||||
<button id="cancel-hosts-btn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hosts列表 -->
|
||||
<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-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="hosts-table-body">
|
||||
<tr>
|
||||
<td colspan="3" class="py-4 text-center text-gray-500">暂无Hosts条目</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -662,12 +837,68 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="query-content" class="hidden">
|
||||
<!-- DNS查询页面内容 -->
|
||||
<div id="query-content" class="hidden space-y-6">
|
||||
<!-- DNS查询表单 -->
|
||||
<div class="bg-white rounded-lg p-6 card-shadow">
|
||||
<h3 class="text-lg font-semibold mb-6">DNS查询</h3>
|
||||
<!-- 这里将添加DNS查询相关内容 -->
|
||||
<p>DNS查询页面内容待实现</p>
|
||||
|
||||
<!-- 查询表单 -->
|
||||
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
|
||||
<div class="flex-1">
|
||||
<input type="text" id="dns-query-domain" placeholder="输入域名（例如：example.com）" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
||||
</div>
|
||||
<button id="dns-query-btn" class="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
|
||||
<i class="fa fa-search mr-2"></i>查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查询结果展示 -->
|
||||
<div id="query-result" class="bg-white rounded-lg p-6 card-shadow hidden">
|
||||
<h3 class="text-lg font-semibold mb-4">查询结果</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<h4 class="text-sm font-medium text-gray-500 mb-2">域名</h4>
|
||||
<p class="text-lg font-semibold" id="result-domain">-</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<h4 class="text-sm font-medium text-gray-500 mb-2">状态</h4>
|
||||
<p class="text-lg font-semibold" id="result-status">-</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<h4 class="text-sm font-medium text-gray-500 mb-2">屏蔽类型</h4>
|
||||
<p class="text-lg font-semibold" id="result-type">-</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<h4 class="text-sm font-medium text-gray-500 mb-2">查询时间</h4>
|
||||
<p class="text-lg font-semibold" id="result-time">-</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详细信息 -->
|
||||
<div class="bg-gray-50 p-4 rounded-lg">
|
||||
<h4 class="text-sm font-medium text-gray-500 mb-2">详细信息</h4>
|
||||
<pre class="bg-white p-4 rounded-md border border-gray-200 overflow-x-auto" id="result-details">-</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查询历史记录 -->
|
||||
<div class="bg-white rounded-lg p-6 card-shadow">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-semibold">查询历史</h3>
|
||||
<button id="clear-history-btn" class="text-sm text-gray-500 hover:text-danger transition-colors">
|
||||
<i class="fa fa-trash mr-1"></i>清空历史
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 历史记录列表 -->
|
||||
<div id="query-history" class="space-y-3">
|
||||
<div class="text-center text-gray-500 py-4">
|
||||
暂无查询历史
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user