单文件 vanilla JS 零外部依赖:路由表六旋钮下拉/数字输入+行保存(值域即下拉白名单), 目标表 base_url+启停,台账三筛选+status 着色,顶部注册表热重载;错误 toast 不打断。
This commit is contained in:
chenxing
@@ -1,5 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head><meta charset="UTF-8"><title>网关治理</title></head>
|
||||
<body><!-- N03 将替换为完整治理页 --></body>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>网关治理</title>
|
||||
<style>
|
||||
:root { --line:#e2e8f0; --txt:#1a202c; --sub:#718096; --ok:#276749; --err:#c53030; }
|
||||
* { box-sizing:border-box; }
|
||||
body { font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif; color:var(--txt);
|
||||
margin:0; background:#f7fafc; }
|
||||
header { background:#fff; border-bottom:1px solid var(--line); padding:14px 24px;
|
||||
display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:5; }
|
||||
header h1 { font-size:17px; margin:0; }
|
||||
header .sp { flex:1; }
|
||||
button { padding:5px 14px; border:1px solid var(--line); background:#fff; border-radius:6px;
|
||||
cursor:pointer; font-size:13px; }
|
||||
button:hover { background:#edf2f7; }
|
||||
button.primary { background:#2b6cb0; color:#fff; border-color:#2b6cb0; }
|
||||
main { max-width:1280px; margin:0 auto; padding:20px 24px 60px; }
|
||||
section { background:#fff; border:1px solid var(--line); border-radius:8px; margin-bottom:22px;
|
||||
overflow:hidden; }
|
||||
section > h2 { font-size:15px; margin:0; padding:12px 18px; border-bottom:1px solid var(--line);
|
||||
background:#fbfcfd; display:flex; align-items:center; gap:10px; }
|
||||
section > h2 .sp { flex:1; }
|
||||
.bar { padding:10px 18px; display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line);
|
||||
flex-wrap:wrap; }
|
||||
.bar label { color:var(--sub); font-size:13px; }
|
||||
.bar input, .bar select { padding:4px 8px; border:1px solid var(--line); border-radius:5px; font-size:13px; }
|
||||
table { border-collapse:collapse; width:100%; font-size:13px; }
|
||||
th, td { padding:7px 10px; border-bottom:1px solid var(--line); text-align:left;
|
||||
white-space:nowrap; max-width:340px; overflow:hidden; text-overflow:ellipsis; }
|
||||
th { color:var(--sub); font-weight:600; background:#fbfcfd; }
|
||||
td input, td select { padding:3px 6px; border:1px solid var(--line); border-radius:4px;
|
||||
font-size:12.5px; width:100%; }
|
||||
td .num { width:72px; }
|
||||
.tag { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; }
|
||||
.tag.on { background:#c6f6d5; color:var(--ok); }
|
||||
.tag.off { background:#fed7d7; color:var(--err); }
|
||||
.st2 { color:var(--ok); } .st4xx { color:#b7791f; } .st5xx { color:var(--err); }
|
||||
.idle { color:var(--sub); padding:26px; text-align:center; }
|
||||
#toast { position:fixed; left:50%; bottom:34px; transform:translateX(-50%); background:#2d3748;
|
||||
color:#fff; padding:9px 20px; border-radius:8px; font-size:13px; opacity:0;
|
||||
transition:opacity .25s; pointer-events:none; max-width:70vw; }
|
||||
#toast.show { opacity:.96; }
|
||||
#toast.err { background:var(--err); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>网关治理</h1>
|
||||
<span class="sp"></span>
|
||||
<span id="stat" style="color:var(--sub);font-size:12.5px"></span>
|
||||
<button class="primary" onclick="reloadRegistry()">重载注册表</button>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
<section>
|
||||
<h2>路由治理旋钮 <span class="sp"></span>
|
||||
<span style="color:var(--sub);font-weight:400;font-size:12px">值域 visibility=INTERNAL/EXTERNAL · authMode=SIGNED/ANONYMOUS · cacheScope=CALLER/GLOBAL</span></h2>
|
||||
<div class="tableWrap"><table id="routeT">
|
||||
<thead><tr>
|
||||
<th>id</th><th>target</th><th>path</th><th>method</th>
|
||||
<th style="width:110px">visibility</th><th style="width:120px">authMode</th>
|
||||
<th style="width:80px">cacheTtl</th><th style="width:100px">cacheScope</th>
|
||||
<th style="width:80px">qps</th><th>启用</th><th>备注</th><th></th>
|
||||
</tr></thead>
|
||||
<tbody></tbody>
|
||||
</table></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>目标地址</h2>
|
||||
<div class="tableWrap"><table id="tgtT">
|
||||
<thead><tr><th>id</th><th>target</th><th>base_url</th><th>启用</th><th>更新时间</th><th></th></tr></thead>
|
||||
<tbody></tbody>
|
||||
</table></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>访问台账</h2>
|
||||
<div class="bar">
|
||||
<label>条数</label><input id="qLimit" type="number" value="50" min="1" max="500" style="width:76px">
|
||||
<label>target</label><input id="qTarget" placeholder="如 notice" style="width:110px">
|
||||
<label>caller</label><input id="qCaller" placeholder="如 100001" style="width:110px">
|
||||
<button onclick="loadLogs()">查询</button>
|
||||
<span id="logTotal" style="color:var(--sub);font-size:12px"></span>
|
||||
</div>
|
||||
<div class="tableWrap"><table id="logT">
|
||||
<thead><tr><th>id</th><th>时间</th><th>caller</th><th>target</th><th>method</th>
|
||||
<th>path</th><th>status</th><th>backend</th><th>cost(ms)</th></tr></thead>
|
||||
<tbody></tbody>
|
||||
</table></div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<div id="toast"></div>
|
||||
|
||||
<script>
|
||||
var $ = function(id){ return document.getElementById(id); };
|
||||
|
||||
function toast(msg, isErr) {
|
||||
var t = $('toast');
|
||||
t.textContent = msg;
|
||||
t.className = 'show' + (isErr ? ' err' : '');
|
||||
setTimeout(function(){ t.className = ''; }, isErr ? 4200 : 2200);
|
||||
}
|
||||
|
||||
function api(method, url, body) {
|
||||
var opt = { method: method, headers: {} };
|
||||
if (body !== undefined) {
|
||||
opt.headers['Content-Type'] = 'application/json';
|
||||
opt.body = JSON.stringify(body);
|
||||
}
|
||||
return fetch(url, opt).then(function(r) {
|
||||
return r.json().catch(function(){ return {}; }).then(function(j) {
|
||||
if (!r.ok) { throw new Error(j.msg || ('HTTP ' + r.status)); }
|
||||
return j;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
return s == null ? '' : String(s).replace(/[&<>"]/g, function(c) {
|
||||
return { '&':'&', '<':'<', '>':'>', '"':'"' }[c];
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- 路由表 ---------- */
|
||||
function loadRoutes() {
|
||||
return api('GET', 'routes').then(function(rows) {
|
||||
var tb = $('routeT').tBodies[0];
|
||||
tb.innerHTML = rows.map(function(r) { return routeRow(r); }).join('');
|
||||
});
|
||||
}
|
||||
|
||||
function routeRow(r) {
|
||||
return '<tr data-id="' + r.id + '">'
|
||||
+ '<td>' + r.id + '</td><td><b>' + esc(r.targetCode) + '</b></td>'
|
||||
+ '<td title="' + esc(r.pathPattern) + '">' + esc(r.pathPattern) + '</td>'
|
||||
+ '<td>' + esc(r.httpMethod) + '</td>'
|
||||
+ '<td><select data-k="visibility">'
|
||||
+ opt('INTERNAL', r.visibility) + opt('EXTERNAL', r.visibility) + '</select></td>'
|
||||
+ '<td><select data-k="authMode">'
|
||||
+ opt('SIGNED', r.authMode) + opt('ANONYMOUS', r.authMode) + '</select></td>'
|
||||
+ '<td><input class="num" type="number" min="0" data-k="cacheTtlSeconds" value="' + r.cacheTtlSeconds + '"></td>'
|
||||
+ '<td><select data-k="cacheScope">'
|
||||
+ opt('CALLER', r.cacheScope) + opt('GLOBAL', r.cacheScope) + '</select></td>'
|
||||
+ '<td><input class="num" type="number" min="0" data-k="rateLimitQps" value="' + (r.rateLimitQps || 0) + '"></td>'
|
||||
+ '<td><input type="checkbox" data-k="enabled"' + (r.enabled ? ' checked' : '') + '></td>'
|
||||
+ '<td><input data-k="remark" value="' + esc(r.remark || '') + '" placeholder="-"></td>'
|
||||
+ '<td><button onclick="saveRoute(this)">保存</button></td>'
|
||||
+ '</tr>';
|
||||
}
|
||||
|
||||
function opt(v, cur) {
|
||||
return '<option value="' + v + '"' + (v === cur ? ' selected' : '') + '>' + v + '</option>';
|
||||
}
|
||||
|
||||
function saveRoute(btn) {
|
||||
var tr = btn.closest('tr');
|
||||
var body = {};
|
||||
tr.querySelectorAll('[data-k]').forEach(function(el) {
|
||||
var k = el.getAttribute('data-k');
|
||||
if (el.type === 'checkbox') { body[k] = el.checked; }
|
||||
else if (el.type === 'number') { body[k] = parseInt(el.value || '0', 10); }
|
||||
else { body[k] = el.value; }
|
||||
});
|
||||
api('PUT', 'routes/' + tr.dataset.id, body)
|
||||
.then(function(j) { toast('已保存,注册表加载 ' + j.loaded + ' 条路由'); })
|
||||
.catch(function(e) { toast('保存失败:' + e.message, true); });
|
||||
}
|
||||
|
||||
/* ---------- 目标表 ---------- */
|
||||
function loadTargets() {
|
||||
return api('GET', 'targets').then(function(rows) {
|
||||
var tb = $('tgtT').tBodies[0];
|
||||
tb.innerHTML = rows.map(function(t) {
|
||||
return '<tr data-id="' + t.id + '">'
|
||||
+ '<td>' + t.id + '</td><td><b>' + esc(t.targetCode) + '</b></td>'
|
||||
+ '<td><input data-k="baseUrl" value="' + esc(t.baseUrl) + '" style="width:300px"></td>'
|
||||
+ '<td><input type="checkbox" data-k="enabled"' + (t.enabled ? ' checked' : '') + '></td>'
|
||||
+ '<td>' + esc((t.gmtModified || '').replace('T', ' ').slice(0, 19)) + '</td>'
|
||||
+ '<td><button onclick="saveTarget(this)">保存</button></td>'
|
||||
+ '</tr>';
|
||||
}).join('');
|
||||
});
|
||||
}
|
||||
|
||||
function saveTarget(btn) {
|
||||
var tr = btn.closest('tr');
|
||||
var body = {};
|
||||
tr.querySelectorAll('[data-k]').forEach(function(el) {
|
||||
var k = el.getAttribute('data-k');
|
||||
body[k] = el.type === 'checkbox' ? el.checked : el.value;
|
||||
});
|
||||
api('PUT', 'targets/' + tr.dataset.id, body)
|
||||
.then(function(j) { toast('已保存,目标表加载 ' + j.targets + ' 条'); })
|
||||
.catch(function(e) { toast('保存失败:' + e.message, true); });
|
||||
}
|
||||
|
||||
/* ---------- 台账 ---------- */
|
||||
function loadLogs() {
|
||||
var q = 'logs?limit=' + (parseInt($('qLimit').value || '50', 10) || 50);
|
||||
if ($('qTarget').value.trim()) q += '&targetCode=' + encodeURIComponent($('qTarget').value.trim());
|
||||
if ($('qCaller').value.trim()) q += '&callerAppKey=' + encodeURIComponent($('qCaller').value.trim());
|
||||
return api('GET', q).then(function(j) {
|
||||
$('logTotal').textContent = '共 ' + j.total + ' 条';
|
||||
var tb = $('logT').tBodies[0];
|
||||
if (!j.rows || !j.rows.length) {
|
||||
tb.innerHTML = '<tr><td colspan="9" class="idle">无匹配记录</td></tr>';
|
||||
return;
|
||||
}
|
||||
tb.innerHTML = j.rows.map(function(l) {
|
||||
var st = l.status;
|
||||
var cls = st >= 500 ? 'st5xx' : (st >= 400 ? 'st4xx' : 'st2');
|
||||
return '<tr>'
|
||||
+ '<td>' + l.id + '</td>'
|
||||
+ '<td>' + esc((l.ts || '').replace('T', ' ').slice(0, 23)) + '</td>'
|
||||
+ '<td>' + esc(l.callerAppKey == null ? '-' : l.callerAppKey) + '</td>'
|
||||
+ '<td>' + esc(l.targetCode) + '</td><td>' + esc(l.method) + '</td>'
|
||||
+ '<td title="' + esc(l.path) + '">' + esc(l.path) + '</td>'
|
||||
+ '<td class="' + cls + '">' + st + '</td>'
|
||||
+ '<td>' + (l.backendCode == null ? '-' : l.backendCode) + '</td>'
|
||||
+ '<td>' + l.costMs + '</td></tr>';
|
||||
}).join('');
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- 顶部 ---------- */
|
||||
function reloadRegistry() {
|
||||
api('POST', '../routes/refresh')
|
||||
.then(function(j) { toast('注册表已重载:路由 ' + j.loaded + ' 条 / 目标 ' + j.targets + ' 条'); })
|
||||
.catch(function(e) { toast('重载失败:' + e.message, true); });
|
||||
}
|
||||
|
||||
function refreshAll() {
|
||||
Promise.all([loadRoutes(), loadTargets(), loadLogs()])
|
||||
.then(function() { $('stat').textContent = '更新于 ' + new Date().toLocaleTimeString(); })
|
||||
.catch(function(e) { toast('加载失败:' + e.message, true); });
|
||||
}
|
||||
|
||||
refreshAll();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user