Your Name
ea8eb2b5f9
Python 3 + Scapy DHCP server with: - Full DORA handshake (DISCOVER/OFFER/REQUEST/ACK) - Multi-scope support with DHCP relay - Static MAC-to-IP bindings - Lease persistence (JSON) with auto-prune - NACK for invalid requests - Flask web management panel (dark theme, live refresh) - Admin-privileged scapy sniff on UDP 67
151 lines
7.1 KiB
HTML
151 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>WinDHCPD 管理面板</title>
|
|
<style>
|
|
:root { --bg: #0f1117; --card: #1a1d27; --border: #2a2d3a; --text: #e2e4ea; --muted: #8a8d9a; --accent: #4f8cff; --green: #3fb950; --red: #f85149; --yellow: #d29922; }
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); padding: 24px; }
|
|
h1 { font-size: 1.5rem; margin-bottom: 4px; }
|
|
.sub { color: var(--muted); font-size: 0.85rem; margin-bottom: 24px; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
|
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
|
|
.stat-card .v { font-size: 1.8rem; font-weight: 700; color: var(--accent); }
|
|
.stat-card .l { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
h2 { font-size: 1rem; margin-bottom: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: auto; margin-bottom: 24px; }
|
|
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
|
|
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
|
|
th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--card); }
|
|
tr:hover { background: rgba(255,255,255,0.03); }
|
|
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
|
|
.badge.green { background: rgba(63,185,80,0.15); color: var(--green); }
|
|
.badge.red { background: rgba(248,81,73,0.15); color: var(--red); }
|
|
.badge.yellow { background: rgba(210,153,34,0.15); color: var(--yellow); }
|
|
.btn { display: inline-block; padding: 4px 10px; font-size: 0.78rem; border-radius: 4px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; }
|
|
.btn.danger { color: var(--red); border-color: var(--red); }
|
|
.scopes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
|
.scope-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
|
|
.scope-card h3 { font-size: 0.95rem; margin-bottom: 6px; }
|
|
.scope-card .meta { font-size: 0.8rem; color: var(--muted); line-height: 1.7; }
|
|
.scope-card .meta span { color: var(--text); }
|
|
code { background: rgba(255,255,255,0.06); padding: 1px 4px; border-radius: 3px; font-size: 0.82rem; }
|
|
.actions { margin-bottom: 24px; }
|
|
#auto-refresh { margin-top: 8px; font-size: 0.8rem; color: var(--muted); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>🖥 WinDHCPD 管理面板</h1>
|
|
<p class="sub">Windows DHCP 服务器 — 实时监控</p>
|
|
|
|
<div class="grid">
|
|
<div class="stat-card"><div class="v" id="s-discover">{{ stats.get("DISCOVER", 0) }}</div><div class="l">DISCOVER</div></div>
|
|
<div class="stat-card"><div class="v" id="s-request">{{ stats.get("REQUEST", 0) }}</div><div class="l">REQUEST</div></div>
|
|
<div class="stat-card"><div class="v" id="s-lease-total">{{ count_total }}</div><div class="l">租约总数</div></div>
|
|
<div class="stat-card"><div class="v" id="s-lease-active">{{ count_active }}</div><div class="l">活跃租约</div></div>
|
|
<div class="stat-card"><div class="v" id="s-nak">{{ stats.get("NAK", 0) }}</div><div class="l">NAK (拒绝)</div></div>
|
|
</div>
|
|
|
|
<div class="scopes">
|
|
{% for sc in scopes %}
|
|
<div class="scope-card">
|
|
<h3>{{ sc.name }} {% if not sc.enable %}<span class="badge red">禁用</span>{% endif %}</h3>
|
|
<div class="meta">
|
|
网段: <span>{{ sc.network }}</span><br>
|
|
地址池: <span>{{ sc.start_ip }} → {{ sc.end_ip }}</span><br>
|
|
网关: <span>{{ sc.router or "—" }}</span><br>
|
|
DNS: <span>{{ ", ".join(sc.dns_servers) or "—" }}</span><br>
|
|
租期: <span>{{ sc.lease_seconds }}s</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if bindings %}
|
|
<h2>静态绑定</h2>
|
|
<div class="table-wrap">
|
|
<table><thead><tr><th>MAC</th><th>IP</th><th>作用域</th><th>主机名</th></tr></thead><tbody>
|
|
{% for b in bindings %}
|
|
<tr><td><code>{{ b.mac_display }}</code></td><td><code>{{ b.ip }}</code></td><td>{{ b.scope_name or "—" }}</td><td>{{ b.hostname or "—" }}</td></tr>
|
|
{% endfor %}
|
|
</tbody></table>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h2>租约列表</h2>
|
|
<div class="table-wrap">
|
|
<table><thead><tr><th>MAC</th><th>IP</th><th>主机名</th><th>状态</th><th>到期</th><th></th></tr></thead><tbody id="leases">
|
|
{% for l in leases %}
|
|
<tr data-mac="{{ l.mac }}">
|
|
<td><code>{{ l.mac }}</code></td>
|
|
<td><code>{{ l.ip }}</code></td>
|
|
<td>{{ l.hostname or "—" }}</td>
|
|
<td>{% if l.is_active %}<span class="badge green">活跃</span>{% else %}<span class="badge red">已过期</span>{% endif %}</td>
|
|
<td>{{ l.expires_at }}</td>
|
|
<td><button class="btn danger" onclick="release('{{ l.mac }}')">释放</button></td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody></table>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button class="btn" onclick="prune()">🧹 清理过期租约</button>
|
|
<button class="btn" onclick="refresh()">🔄 刷新</button>
|
|
<span id="auto-refresh">自动刷新: 5s</span>
|
|
</div>
|
|
|
|
<script>
|
|
let timer = null;
|
|
|
|
async function refresh() {
|
|
try {
|
|
const [stats, leases, scopes] = await Promise.all([
|
|
fetch('/api/stats').then(r => r.json()),
|
|
fetch('/api/leases').then(r => r.json()),
|
|
fetch('/api/scopes').then(r => r.json()),
|
|
]);
|
|
document.getElementById('s-discover').textContent = stats.DISCOVER || 0;
|
|
document.getElementById('s-request').textContent = stats.REQUEST || 0;
|
|
document.getElementById('s-lease-total').textContent = stats.leases_total || 0;
|
|
document.getElementById('s-lease-active').textContent = stats.leases_active || 0;
|
|
document.getElementById('s-nak').textContent = stats.NAK || 0;
|
|
|
|
const tbody = document.getElementById('leases');
|
|
const now = Date.now() / 1000;
|
|
tbody.innerHTML = leases.map(l => {
|
|
const active = l.expires_at > now;
|
|
return `<tr data-mac="${l.mac}">
|
|
<td><code>${l.mac}</code></td>
|
|
<td><code>${l.ip}</code></td>
|
|
<td>${l.hostname || "—"}</td>
|
|
<td>${active ? '<span class="badge green">活跃</span>' : '<span class="badge red">已过期</span>'}</td>
|
|
<td>${new Date(l.expires_at * 1000).toLocaleString()}</td>
|
|
<td><button class="btn danger" onclick="release('${l.mac}')">释放</button></td>
|
|
</tr>`;
|
|
}).join('');
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
async function release(mac) {
|
|
if (!confirm('确定释放 ' + mac + ' 的租约？')) return;
|
|
await fetch('/api/leases/' + mac + '/release', {method: 'POST'});
|
|
refresh();
|
|
}
|
|
|
|
async function prune() {
|
|
if (!confirm('清理所有已过期租约？')) return;
|
|
const r = await fetch('/api/leases/prune', {method: 'POST'}).then(x => x.json());
|
|
alert('已清理 ' + r.pruned + ' 条过期租约');
|
|
refresh();
|
|
}
|
|
|
|
setInterval(refresh, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|