CNBUGS AI
5bb84c159a
- Add EvictClient method to DHCP Server - Add /api/dhcp/leases/evict endpoint to force client IP release - Add 'Evict' button in Web UI for online clients - Update table layout to include Action column - Evicted client will be forced to get a new IP on next DHCP request
360 linhas
14 KiB
HTML
360 linhas
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DHCP & DNS 管理器</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>🌐 DHCP & DNS 管理器</h1>
|
|
<nav>
|
|
<a href="#dashboard">仪表盘</a>
|
|
<a href="#clients">DHCP 客户端</a>
|
|
<a href="#dhcp">DHCP 配置</a>
|
|
<a href="#dns">DNS 配置</a>
|
|
<a href="#settings">系统设置</a>
|
|
<button id="logoutBtn" style="display:none;">退出</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Login Section -->
|
|
<section id="loginSection">
|
|
<h2>登录</h2>
|
|
<form id="loginForm">
|
|
<input type="text" id="username" placeholder="用户名" required>
|
|
<input type="password" id="password" placeholder="密码" required>
|
|
<button type="submit">登录</button>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Dashboard -->
|
|
<section id="dashboard" style="display:none;">
|
|
<h2>仪表盘</h2>
|
|
<div class="stats">
|
|
<div class="stat-card" onclick="document.querySelector('a[href=\'#clients\']').click()" style="cursor:pointer;">
|
|
<h3>活跃租约</h3>
|
|
<p id="activeLeases">0</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>静态绑定</h3>
|
|
<p id="staticBindings">0</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>DNS 记录</h3>
|
|
<p id="dnsRecords">0</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>在线设备</h3>
|
|
<p id="onlineDevices">0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>系统状态</h3>
|
|
<div class="status-grid">
|
|
<div class="status-item">
|
|
<span class="status-label">DHCP 服务</span>
|
|
<span class="status-value" id="dhcpStatus">运行中</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">DNS 服务</span>
|
|
<span class="status-value" id="dnsStatus">运行中</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Web 服务</span>
|
|
<span class="status-value" id="webStatus">运行中</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- DHCP Configuration -->
|
|
<section id="dhcp" style="display:none;">
|
|
<h2>DHCP 配置</h2>
|
|
|
|
<div class="panel">
|
|
<h3>基础配置</h3>
|
|
<form id="dhcpBasicForm">
|
|
<div class="form-row">
|
|
<label>启用 DHCP</label>
|
|
<input type="checkbox" id="dhcpEnabled" checked>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>网络接口</label>
|
|
<input type="text" id="dhcpInterface" placeholder="eth0" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>网段地址</label>
|
|
<input type="text" id="dhcpNetwork" placeholder="192.168.1.0" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>子网掩码</label>
|
|
<input type="text" id="dhcpNetmask" placeholder="255.255.255.0" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>网关地址</label>
|
|
<input type="text" id="dhcpGateway" placeholder="192.168.1.1" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>域名</label>
|
|
<input type="text" id="dhcpDomain" placeholder="local">
|
|
</div>
|
|
<button type="submit">保存基础配置</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>IP 地址池</h3>
|
|
<form id="dhcpPoolForm">
|
|
<div class="form-row">
|
|
<label>起始 IP</label>
|
|
<input type="text" id="dhcpPoolStart" placeholder="192.168.1.100" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>结束 IP</label>
|
|
<input type="text" id="dhcpPoolEnd" placeholder="192.168.1.200" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>租约时间（秒）</label>
|
|
<input type="number" id="dhcpLeaseTime" placeholder="86400" value="86400">
|
|
</div>
|
|
<button type="submit">保存地址池配置</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>DNS 服务器</h3>
|
|
<form id="dhcpDnsForm">
|
|
<div class="form-row">
|
|
<label>DNS 服务器列表（逗号分隔）</label>
|
|
<input type="text" id="dhcpDnsServers" placeholder="192.168.1.1,114.114.114.114,8.8.8.8">
|
|
</div>
|
|
<button type="submit">保存 DNS 配置</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>排除 IP 列表</h3>
|
|
<form id="dhcpExcludedForm">
|
|
<div class="form-row">
|
|
<label>排除的 IP（逗号分隔）</label>
|
|
<input type="text" id="dhcpExcludedIps" placeholder="192.168.1.1,192.168.1.2,192.168.1.3">
|
|
</div>
|
|
<button type="submit">保存排除列表</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>静态 IP 绑定</h3>
|
|
<button onclick="showAddBindingForm()">+ 新增绑定</button>
|
|
<table id="bindingsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>MAC 地址</th>
|
|
<th>IP 地址</th>
|
|
<th>主机名</th>
|
|
<th>描述</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- DHCP Clients -->
|
|
<section id="clients" style="display:none;">
|
|
<h2>DHCP 客户端列表</h2>
|
|
|
|
<div class="panel">
|
|
<h3>已分配 IP 的客户端</h3>
|
|
<button onclick="loadClients()">🔄 刷新</button>
|
|
<button onclick="toggleAutoRefresh()" id="autoRefreshBtn">⏸️ 自动刷新: 关</button>
|
|
<table id="clientsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>MAC 地址</th>
|
|
<th>IP 地址</th>
|
|
<th>主机名</th>
|
|
<th>租约剩余</th>
|
|
<th>过期时间</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="7" style="text-align:center;color:#999;">暂无客户端</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>IP 地址池使用情况</h3>
|
|
<div class="pool-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-label">地址池范围</span>
|
|
<span class="stat-value" id="poolRange">--</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">已分配</span>
|
|
<span class="stat-value" id="poolUsed">0</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">可用</span>
|
|
<span class="stat-value" id="poolAvailable">0</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">使用率</span>
|
|
<span class="stat-value" id="poolUsage">0%</span>
|
|
</div>
|
|
</div>
|
|
<div class="pool-bar">
|
|
<div class="pool-bar-fill" id="poolBarFill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- DNS Configuration -->
|
|
<section id="dns" style="display:none;">
|
|
<h2>DNS 配置</h2>
|
|
|
|
<div class="panel">
|
|
<h3>基础配置</h3>
|
|
<form id="dnsBasicForm">
|
|
<div class="form-row">
|
|
<label>启用 DNS</label>
|
|
<input type="checkbox" id="dnsEnabled" checked>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>监听地址</label>
|
|
<input type="text" id="dnsListenAddr" placeholder="0.0.0.0" value="0.0.0.0">
|
|
</div>
|
|
<div class="form-row">
|
|
<label>监听端口</label>
|
|
<input type="number" id="dnsListenPort" placeholder="53" value="53">
|
|
</div>
|
|
<div class="form-row">
|
|
<label>启用递归查询</label>
|
|
<input type="checkbox" id="dnsRecursion" checked>
|
|
</div>
|
|
<button type="submit">保存基础配置</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>上游 DNS 服务器</h3>
|
|
<form id="dnsUpstreamForm">
|
|
<div class="form-row">
|
|
<label>上游 DNS（逗号分隔）</label>
|
|
<input type="text" id="dnsUpstream" placeholder="8.8.8.8,1.1.1.1,114.114.114.114">
|
|
</div>
|
|
<button type="submit">保存上游 DNS</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>DNS 区域 (Zone)</h3>
|
|
<button onclick="showAddZoneForm()">+ 新增区域</button>
|
|
<table id="zonesTable">
|
|
<thead>
|
|
<tr>
|
|
<th>区域名称</th>
|
|
<th>类型</th>
|
|
<th>记录数</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>DNS 记录</h3>
|
|
<button onclick="showAddRecordForm()">+ 新增记录</button>
|
|
<table id="recordsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>域名</th>
|
|
<th>类型</th>
|
|
<th>值</th>
|
|
<th>TTL</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>查询日志</h3>
|
|
<button onclick="loadLogs()">刷新</button>
|
|
<table id="logsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>时间</th>
|
|
<th>客户端 IP</th>
|
|
<th>查询域名</th>
|
|
<th>类型</th>
|
|
<th>响应</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Settings -->
|
|
<section id="settings" style="display:none;">
|
|
<h2>系统设置</h2>
|
|
|
|
<div class="panel">
|
|
<h3>Web 设置</h3>
|
|
<form id="webSettingsForm">
|
|
<div class="form-row">
|
|
<label>监听地址</label>
|
|
<input type="text" id="webHost" placeholder="0.0.0.0" value="0.0.0.0">
|
|
</div>
|
|
<div class="form-row">
|
|
<label>监听端口</label>
|
|
<input type="number" id="webPort" placeholder="8080" value="8080">
|
|
</div>
|
|
<button type="submit">保存 Web 设置</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>配置管理</h3>
|
|
<button onclick="exportConfig()">导出配置</button>
|
|
<button onclick="importConfig()">导入配置</button>
|
|
<button onclick="restartService()">重启服务</button>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h3>系统信息</h3>
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<span class="info-label">版本</span>
|
|
<span class="info-value">v0.1.1</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">运行时间</span>
|
|
<span class="info-value" id="uptime">--</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">数据库大小</span>
|
|
<span class="info-value" id="dbSize">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|