feat: 添加IP白名单/黑名单功能 - 支持单IP、CIDR、IP范围

This commit is contained in:
Your Name
2026-05-07 10:05:03 +08:00
parent 0f9663045c
commit d92cf341b8
5 changed files with 467 additions and 0 deletions
+71
View File
@@ -49,6 +49,9 @@
<li data-page="online">
<span class="icon">&#128279;</span> 在线用户
</li>
<li data-page="ip-rules">
<span class="icon">&#128737;</span> IP白/黑名单
</li>
<li data-page="settings">
<span class="icon">&#9881;</span> 系统设置
</li>
@@ -200,6 +203,37 @@
</table>
</div>
<!-- IP白/黑名单 -->
<div id="page-ip-rules" class="page">
<div class="page-header">
<h2>IP 白名单/黑名单</h2>
<button class="btn btn-primary" onclick="showAddIPRule()">添加规则</button>
</div>
<div class="ip-rules-info" style="margin-bottom:16px;padding:12px;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08)">
<p style="color:#666;font-size:13px;line-height:1.8">
<strong>规则说明:</strong><br>
- 支持<strong>单IP</strong>(如 192.168.1.1)、<strong>CIDR</strong>(如 192.168.1.0/24)、<strong>IP范围</strong>(如 192.168.1.1-192.168.1.100<br>
- <strong>白名单</strong>:启用后只有白名单中的IP才能连接,黑名单中的IP会被拒绝<br>
- <strong>黑名单</strong>:黑名单中的IP将被禁止连接<br>
- 如果没有白名单规则,则所有IP默认允许(除非在黑名单中)
</p>
</div>
<table class="data-table">
<thead>
<tr>
<th>ID</th>
<th>IP地址/网段</th>
<th>类型</th>
<th>备注</th>
<th>状态</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="ip-rules-tbody"></tbody>
</table>
</div>
<!-- 系统设置 -->
<div id="page-settings" class="page">
<h2>系统设置</h2>
@@ -333,6 +367,43 @@
</div>
</div>
<!-- IP规则弹窗 -->
<div id="ip-rule-modal" class="modal" style="display:none">
<div class="modal-content">
<div class="modal-header">
<h3 id="ip-rule-modal-title">添加IP规则</h3>
<span class="modal-close" onclick="closeIPRuleModal()">&times;</span>
</div>
<form id="ip-rule-form">
<input type="hidden" id="ip-rule-edit-id" value="">
<div class="form-group">
<label>IP地址/网段</label>
<input type="text" id="ip-rule-ip" placeholder="如: 192.168.1.1 或 192.168.1.0/24 或 10.0.0.1-10.0.0.255" required>
</div>
<div class="form-group">
<label>规则类型</label>
<select id="ip-rule-type">
<option value="blacklist">黑名单(禁止连接)</option>
<option value="whitelist">白名单(允许连接)</option>
</select>
</div>
<div class="form-group">
<label>备注说明</label>
<input type="text" id="ip-rule-note" placeholder="可选,填写备注说明">
</div>
<div class="form-group">
<label>
<input type="checkbox" id="ip-rule-enabled" checked> 启用此规则
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn" onclick="closeIPRuleModal()">取消</button>
<button type="submit" class="btn btn-primary">保存</button>
</div>
</form>
</div>
</div>
<!-- 提示消息 -->
<div id="toast" class="toast"></div>