SenSu/static/web_panel/pages/plugins.html

<div class="plugin-page-root" style="padding:16px">
  <h2 style="margin:0 0 12px 0">🔌 插件管理</h2>

  <!-- ── 统计卡片 ── -->
  <div id="stats-card" style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap">
    <div class="stat-chip"><span class="stat-num" id="st-total">-</span> 总计</div>
    <div class="stat-chip loaded"><span class="stat-num" id="st-loaded">-</span> 已启用</div>
    <div class="stat-chip disabled"><span class="stat-num" id="st-disabled">-</span> 已停用</div>
    <div class="stat-chip failed"><span class="stat-num" id="st-failed">-</span> 安装失败</div>
  </div>

  <!-- ── 导入区域 ── -->
  <div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:flex-start">
    <div class="card" style="flex:1;min-width:280px;padding:12px">
      <div style="font-weight:600;margin-bottom:8px">📦 导入 ZIP 包</div>
      <input type="file" id="zip-file" accept=".zip" style="margin-bottom:8px;color:var(--text)">
      <button class="btn btn-sm btn-filled" onclick="importZip()">上传安装</button>
      <span id="zip-status" style="margin-left:8px;font-size:.8rem"></span>
    </div>
    <div class="card" style="flex:1;min-width:280px;padding:12px">
      <div style="font-weight:600;margin-bottom:8px">📥 Git Clone 安装</div>
      <input id="git-url" placeholder="https://github.com/user/repo.git" style="width:100%;padding:6px 8px;margin-bottom:8px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--shape-xs)">
      <button class="btn btn-sm btn-filled" onclick="importGit()">Clone 安装</button>
      <span id="git-status" style="margin-left:8px;font-size:.8rem"></span>
    </div>
  </div>

  <!-- ── 失败详情 ── -->
  <div id="fail-detail" style="display:none;margin-bottom:12px;padding:10px;background:var(--md-sys-color-surface-container-lowest);border-radius:var(--shape-xs);font-size:.8rem;color:var(--error)"></div>

  <!-- ── 插件列表 ── -->
  <div id="plugin-list">加载中...</div>

  <style>
    .stat-chip { display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--shape-sm);background:var(--md-sys-color-surface-container);min-width:100px }
    .stat-chip.loaded { border-left:3px solid var(--success,#4caf50) }
    .stat-chip.disabled { border-left:3px solid var(--text-dim) }
    .stat-chip.failed { border-left:3px solid var(--error,#f44336) }
    .stat-num { font-size:1.4rem;font-weight:700 }
    .plugin-row { display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin-bottom:4px;background:var(--md-sys-color-surface-container);border-radius:var(--shape-sm);gap:8px }
    .plugin-row .info { flex:1;min-width:0 }
    .plugin-row .name { font-weight:600 } .plugin-row .ver { font-size:.75rem;color:var(--text-dim) }
    .plugin-row .error-tag { font-size:.75rem;color:var(--error) }
  </style>

  <script>
    async function load() {
      var list = document.getElementById("plugin-list");
      try {
        var r1 = await fetch("./api/plugins/stats"), stats = await r1.json();
        document.getElementById("st-total").textContent = stats.total||0;
        document.getElementById("st-loaded").textContent = stats.loaded||0;
        document.getElementById("st-disabled").textContent = stats.disabled||0;
        document.getElementById("st-failed").textContent = stats.failed||0;

        var fd = document.getElementById("fail-detail");
        if (stats.fail_details && Object.keys(stats.fail_details).length) {
          fd.style.display = "block";
          fd.innerHTML = "<strong>安装失败:</strong> " + Object.entries(stats.fail_details).map(function(e){return e[0]+": "+esc(e[1])}).join(" | ");
        } else fd.style.display = "none";

        var r2 = await fetch("./api/plugins"), data = await r2.json();
        var plugins = data.plugins||[];
        if (!plugins.length) { list.innerHTML = '<div style="text-align:center;padding:24px;color:var(--text-dim)">暂无插件</div>'; return; }
        list.innerHTML = plugins.map(function(p){
          return '<div class="plugin-row"><div class="info"><div class="name">'+esc(p.name)+'</div><div class="ver">v'+esc(p.version||'?')+(p.running?' ✅':' ⏸')+'</div>'+(p.error?'<div class="error-tag">'+esc(p.error)+'</div>':'')+'</div>'+
            '<button class="btn btn-sm btn-outlined" onclick="togglePlugin(\''+esc(p.name)+'\',\''+(p.running?'unload':'enable')+'\')">'+(p.running?'停用':'启用')+'</button>'+
            '<button class="btn btn-sm btn-outlined" onclick="togglePlugin(\''+esc(p.name)+'\',\'reload\')">重载</button></div>';
        }).join("");
      } catch(e) { list.innerHTML = '<div style="color:var(--error)">加载失败: '+esc(String(e))+'</div>'; }
    }

    async function togglePlugin(name, action) {
      await fetch("./api/plugins/"+name+"/"+action, {method:"POST"});
      load();
    }

    async function importZip() {
      var f = document.getElementById("zip-file").files[0];
      if (!f) { alert("请选择 .zip 文件"); return; }
      var s = document.getElementById("zip-status");
      s.textContent = "⏳ 上传中..."; s.style.color = "var(--text-dim)";
      var fd = new FormData(); fd.append("file", f);
      try {
        var r = await fetch("./api/plugins/import", {method:"POST", body:fd});
        var d = await r.json();
        if (d.ok) { s.textContent = "✅ " + d.name + (d.loaded?" 已加载":" 待手动加载"); s.style.color = "var(--success)"; }
        else { s.textContent = "❌ " + (d.error||"失败"); s.style.color = "var(--error)"; }
      } catch(e) { s.textContent = "❌ " + e; s.style.color = "var(--error)"; }
      load();
    }

    async function importGit() {
      var url = document.getElementById("git-url").value.trim();
      if (!url) { alert("请输入 Git 仓库地址"); return; }
      var s = document.getElementById("git-status");
      s.textContent = "⏳ Clone 中..."; s.style.color = "var(--text-dim)";
      try {
        var r = await fetch("./api/plugins/import", {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify({url:url})});
        var d = await r.json();
        if (d.ok) { s.textContent = "✅ " + d.name + (d.loaded?" 已加载":" 待手动加载"); s.style.color = "var(--success)"; }
        else { s.textContent = "❌ " + (d.error||"失败"); s.style.color = "var(--error)"; }
      } catch(e) { s.textContent = "❌ " + e; s.style.color = "var(--error)"; }
      load();
    }

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