feat(admin): 治理小页完整前端——路由/目标行内编辑+台账查询

单文件 vanilla JS 零外部依赖:路由表六旋钮下拉/数字输入+行保存(值域即下拉白名单),
目标表 base_url+启停,台账三筛选+status 着色,顶部注册表热重载;错误 toast 不打断。

src/main/resources/static/admin.html

@@ -1,5 +1,246 @@
 <!DOCTYPE html>
 <html lang="zh">
-<head><meta charset="UTF-8"><title>网关治理</title></head>
+<head>
-<body><!-- N03 将替换为完整治理页 --></body>
+<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 { '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;' }[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>