SenSu/plugins/sentinel/settings.html

<div class="plugin-page-root" style="padding:16px">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
    <h2 style="margin:0">🛡️ 节点管理</h2>
    <button class="btn btn-filled" onclick="showAdd()">+ 添加节点</button>
  </div>

  <div id="node-list"></div>

  <!-- 编辑对话框 -->
  <div id="edit-dialog" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center">
    <div class="card" style="min-width:440px;max-width:520px;max-height:90vh;overflow-y:auto">
      <h3 id="edit-title" style="margin:0 0 16px 0">添加节点</h3>
      <input type="hidden" id="edit-id">
      <div class="form-row"><label>名称 *</label><input id="edit-name" placeholder="例如: OnePlus 15"></div>
      <div class="form-row"><label>URL *</label><input id="edit-url" placeholder="http://192.168.1.100:4200"></div>
      <div class="form-row"><label>API Key</label><input id="edit-key" placeholder="sk-..."></div>
      <div class="form-row"><label>备注</label><textarea id="edit-notes" rows="2" placeholder="设备位置、用途等..."></textarea></div>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:16px">
        <button class="btn btn-outlined" onclick="testConn()">测试连接</button>
        <button class="btn btn-outlined" onclick="hideEdit()">取消</button>
        <button class="btn btn-filled" onclick="saveNode()">保存</button>
      </div>
      <div id="test-result" style="margin-top:8px;font-size:.85rem"></div>
    </div>
  </div>

  <style>
    .form-row { margin-bottom:10px }
    .form-row label { display:block;font-size:.8rem;margin-bottom:3px;color:var(--text-dim) }
    .form-row input, .form-row textarea { width:100%;padding:8px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--shape-xs);font-size:.9rem }
    .form-row input:focus, .form-row textarea:focus { outline:1px solid var(--primary) }
    .node-item { display:flex;align-items:center;padding:10px 12px;margin-bottom:6px;background:var(--md-sys-color-surface-container);border-radius:var(--shape-sm);gap:12px }
    .node-item .info { flex:1;min-width:0 }
    .node-item .name { font-weight:600 }
    .node-item .url { font-size:.75rem;color:var(--text-dim);word-break:break-all }
    .node-item .notes { font-size:.75rem;color:var(--text-dim);font-style:italic }
  </style>

  <script>
    var editingId = null;

    function showAdd(){
      editingId = null;
      document.getElementById("edit-title").textContent = "添加节点";
      document.getElementById("edit-id").value = "";
      document.getElementById("edit-name").value = "";
      document.getElementById("edit-url").value = "http://";
      document.getElementById("edit-key").value = "";
      document.getElementById("edit-notes").value = "";
      document.getElementById("test-result").innerHTML = "";
      document.getElementById("edit-dialog").style.display = "flex";
    }

    function showEdit(n){
      editingId = n.id;
      document.getElementById("edit-title").textContent = "编辑: " + esc(n.name);
      document.getElementById("edit-id").value = n.id||"";
      document.getElementById("edit-name").value = n.name||"";
      document.getElementById("edit-url").value = n.url||"";
      document.getElementById("edit-key").value = n.api_key||"";
      document.getElementById("edit-notes").value = n.notes||"";
      document.getElementById("test-result").innerHTML = "";
      document.getElementById("edit-dialog").style.display = "flex";
    }

    function hideEdit(){ document.getElementById("edit-dialog").style.display = "none"; }

    async function saveNode(){
      var data = {
        id: document.getElementById("edit-id").value,
        name: document.getElementById("edit-name").value.trim(),
        url: document.getElementById("edit-url").value.trim(),
        api_key: document.getElementById("edit-key").value.trim(),
        notes: document.getElementById("edit-notes").value.trim()
      };
      if(!data.name||!data.url){ alert("名称和 URL 不能为空"); return; }
      var resp = await fetch("/sentinel/api/nodes",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(data)});
      var r = await resp.json();
      if(r.ok){ hideEdit(); loadNodes(); }
      else alert("保存失败: "+(r.error||""));
    }

    async function deleteNode(id,name){
      if(!confirm("确认删除节点 '"+name+"'?")) return;
      // 删除通过保存空列表实现 — 或调用 API
      var resp = await fetch("/sentinel/api/nodes",{method:"GET"});
      var data = await resp.json();
      var nodes = (data.nodes||[]).filter(function(n){return n.id!==id});
      // 通过逐个更新实现 — 简单方式: POST 一个标记删除的请求
      // 实际: fetch DELETE 端点
      await fetch("/sentinel/api/nodes",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:id,_delete:true})});
      loadNodes();
    }

    async function testConn(){
      var url = document.getElementById("edit-url").value.trim();
      var key = document.getElementById("edit-key").value.trim();
      var el = document.getElementById("test-result");
      el.innerHTML = '<span style="color:var(--text-dim)">⏳ 测试中...</span>';
      try {
        var resp = await fetch("/sentinel/api/nodes/test",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({url:url,api_key:key})});
        var r = await resp.json();
        if(r.ok) el.innerHTML = '<span style="color:var(--success)">✅ 连接成功 — CPU:'+(r.system.cpu.percent||0)+'% MEM:'+(r.system.memory.percent||0)+'%</span>';
        else el.innerHTML = '<span style="color:var(--error)">❌ '+esc(r.error||'失败')+'</span>';
      }catch(e){ el.innerHTML = '<span style="color:var(--error)">❌ '+esc(String(e))+'</span>'; }
    }

    async function loadNodes(){
      var resp = await fetch("/sentinel/api/nodes");
      var data = await resp.json();
      var nodes = data.nodes||[];
      var list = document.getElementById("node-list");
      if(!nodes.length){ list.innerHTML = '<div style="text-align:center;padding:24px;color:var(--text-dim)">暂无节点 — 点击上方添加</div>'; return; }
      list.innerHTML = nodes.map(function(n){
        var status = n.online ? '<span style="color:var(--success)">🟢</span>' : '<span style="color:var(--error)">🔴</span>';
        return '<div class="node-item">'+
          '<div>'+status+'</div>'+
          '<div class="info"><div class="name">'+esc(n.name)+'</div><div class="url">'+esc(n.url)+'</div>'+
          (n.notes?'<div class="notes">📝 '+esc(n.notes)+'</div>':'')+
          '</div>'+
          '<button class="btn btn-sm btn-outlined" onclick=\'showEdit('+JSON.stringify(n)+')\'>✏</button>'+
          '<button class="btn btn-sm btn-outlined" style="color:var(--error)" onclick="deleteNode(\''+esc(n.id)+'\',\''+esc(n.name)+'\')">✕</button>'+
          '</div>';
      }).join("");
    }

    function esc(s){ return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

    loadNodes();
  </script>
</div>