AskaEth/SenSu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WebUI: MD3 projects/proxy pages, sidebar links, CSS animations

Browse Source 
- Add projects + proxy nav items to sidebar
- Rewrite projects.html with MD3 cards + tabs + mgmt-cards
- Rewrite proxy.html with MD3 form + mgmt-cards
- CSS: button ripple, card elevation, page fade, tab slide, input glow, nav dot, status pulse, log entry fade, shimmer, scrollbar, badge bounce, card hover mouse-glow (428 lines)
This commit is contained in:
qinglong
2026-06-11 12:12:03 +08:00
parent b37cbf076c
commit c4e2783120
4 changed files with 175 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/web_panel/pages/proxy.html
+31 -18
View File
@@ -1,19 +1,32 @@
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>反向代理 - SenSu</title>
<style>body{font-family:monospace;background:#0e1416;color:#e0e3e4;margin:0;padding:16px}
h2{color:#00bcd4;border-bottom:1px solid #333;padding-bottom:8px}
.card{background:#1a1f21;border-radius:8px;padding:12px;margin:8px 0}
input,button{padding:6px 10px;margin:4px;border-radius:4px;border:1px solid #444;background:#222;color:#e0e3e4}
button{background:#00bcd4;color:#000;cursor:pointer;font-weight:bold}
button.danger{background:#ff5252}.status-active{color:#4caf50}
</style></head><body>
<h2>🔀 反向代理</h2>
<div class="card"><h3>添加代理</h3>
<input id="px-path" placeholder="路径 (如: /app)" style="width:200px"><br>
<input id="px-target" placeholder="目标 (如: http://192.168.1.5:8080)" style="width:400px"><br>
<input id="px-desc" placeholder="描述" style="width:300px"><br>
<button onclick="add()">添加</button></div>
<div id="list">加载中...</div>
<div>
<h2 style="margin-bottom:16px">🔀 反向代理</h2>
<div class="card outlined" style="max-width:520px;margin-bottom:16px">
<h3 style="margin-bottom:12px">添加代理</h3>
<div class="input-group"><span class="label">框架路径</span><input class="input" id="px-path" placeholder="/app"></div>
<div class="input-group"><span class="label">目标 URL</span><input class="input" id="px-target" placeholder="http://192.168.1.5:8080"></div>
<div class="input-group"><span class="label">描述 (可选)</span><input class="input" id="px-desc" placeholder="我的应用"></div>
<button class="btn btn-filled" onclick="addP()">添加代理</button>
</div>
<div id="proxy-list" style="display:flex;flex-direction:column;gap:12px">加载中...</div>
</div>
<script>
async function r(){const d=await(await fetch("/SenSu/api/proxy")).json();let h="";for(const p of d.proxies||[]){h+=`<div class="card"><b>${p.path}</b> <span class="status-active">● ${p.status}</span><br>→ ${p.target} ${p.description||""}<button class="danger" onclick="del('${p.path}')">删除</button></div>`}document.getElementById("list").innerHTML=h||"暂无代理"}
async function add(){await fetch("/SenSu/api/proxy",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:document.getElementById("px-path").value,target:document.getElementById("px-target").value,description:document.getElementById("px-desc").value})});r()}
async function del(p){await fetch(`/SenSu/api/proxy/${encodeURIComponent(p)}`,{method:"DELETE"});r()}r()</script></body></html>
function refresh(){
fetch("/SenSu/api/proxy").then(r=>r.json()).then(d=>{
var h="";
for(var p of d.proxies||[]){
h+='<div class="mgmt-card"><div class="status-dot status-running"></div><div class="info"><b>'+p.path+'</b><br><small>→ '+p.target+(p.description?" ("+p.description+")":"")+(p.external?" 🌐":"")+'</small></div><div class="actions"><button class="btn btn-sm btn-danger" onclick="delP(\"'+p.path+'\")">删除</button></div></div>';
}
document.getElementById("proxy-list").innerHTML=h||"暂无代理"
})
}
function addP(){
var p=document.getElementById("px-path").value,t=document.getElementById("px-target").value;
if(!p||!t){alert("请填写");return}
fetch("/SenSu/api/proxy",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:p,target:t,description:document.getElementById("px-desc").value})}).then(r=>r.json()).then(d=>{if(d.ok)refresh()})
}
function delP(path){fetch("/SenSu/api/proxy/"+encodeURIComponent(path),{method:"DELETE"}).then(()=>refresh())}
refresh();
</script>