PlateRecApp/assets/web/frpc.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>frpc 管理 - PlateRecApp</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0f172a;color:#e2e8f0;font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh}
.header{background:#1e293b;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #334155}
.header h1{font-size:20px;font-weight:600;color:#f8fafc}
.nav{display:flex;gap:16px;align-items:center}
.nav a{color:#60a5fa;text-decoration:none;font-size:14px;padding:6px 12px;border-radius:6px;transition:background .2s}
.nav a:hover,.nav a.active{background:#334155}
.container{max-width:1200px;margin:0 auto;padding:20px}
.tabs{display:flex;gap:8px;margin-bottom:20px}
.tab{padding:8px 16px;background:#1e293b;border:1px solid #334155;border-radius:8px;cursor:pointer;color:#94a3b8;font-size:14px;transition:all .2s}
.tab.active{background:#3b82f6;color:#fff;border-color:#3b82f6}
.panel{display:none}.panel.active{display:block}
.card{background:#1e293b;border-radius:12px;padding:20px;border:1px solid #334155;margin-bottom:16px}
.card-title{font-size:15px;font-weight:600;margin-bottom:12px;color:#f8fafc}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
.status-dot.online{background:#4ade80}.status-dot.offline{background:#f87171}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:8px 12px;color:#94a3b8;border-bottom:1px solid #334155;font-weight:500}
td{padding:8px 12px;border-bottom:1px solid #1e293b}
.btn{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}
.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover{background:#2563eb}
.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}
.btn-success{background:#16a34a;color:#fff}.btn-success:hover{background:#15803d}
.btn-group{display:flex;gap:8px;margin-top:12px}
textarea{width:100%;background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:12px;font-family:'Fira Code',monospace;font-size:13px;resize:vertical;min-height:400px;line-height:1.5}
textarea:focus{outline:none;border-color:#3b82f6}
.ssh-frame{width:100%;height:500px;border:1px solid #334155;border-radius:8px}
.msg{padding:10px 14px;border-radius:8px;margin-top:10px;font-size:14px;display:none}
.msg.success{display:block;background:#14532d;color:#86efac;border:1px solid #16a34a}
.msg.error{display:block;background:#7f1d1d;color:#fca5a5;border:1px solid #dc2626}
.ssh-link{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#1e293b;border:1px solid #334155;border-radius:8px;color:#60a5fa;text-decoration:none;font-size:14px;transition:all .2s}
.ssh-link:hover{background:#334155;border-color:#60a5fa}

    @media (max-width: 768px) {
        .header { flex-direction: column; gap: 8px; padding: 12px 16px; }
        .header h1 { font-size: 16px; }
        .nav { flex-wrap: wrap; gap: 8px; justify-content: center; }
        .nav a { font-size: 12px; padding: 4px 8px; }
        .container { padding: 12px; }
        .tabs { flex-wrap: wrap; }
        .tab { flex: 1; min-width: 80px; text-align: center; font-size: 13px; padding: 6px 10px; }
        .card { padding: 14px; }
        table { font-size: 12px; display: block; overflow-x: auto; white-space: nowrap; }
        th, td { padding: 6px 8px; }
        .btn-group { flex-wrap: wrap; }
        .btn { flex: 1; min-width: 100px; text-align: center; }
        textarea { min-height: 200px; font-size: 12px; }
        .ssh-frame { height: 350px; }
    }
    @media (max-width: 480px) {
        .card-title { font-size: 13px; }
        .btn { font-size: 12px; padding: 6px 12px; }
    }
    </style>
</head>
<body>
<div class="header">
    <h1>🔧 frpc 管理</h1>
    <div class="nav">
        <a href="/">监控台</a>
        <a href="/video">视频</a>
        <a href="/config">配置</a>
        <a href="/system">系统</a>
        <a href="/frpc" class="active">frpc</a>
        <a href="/ssh-keys">SSH</a>
        <a href="/logs">日志</a>
        <a href="/help">帮助</a>
    </div>
</div>
<div class="container">
    <div class="tabs">
        <div class="tab active" onclick="switchTab('status')">隧道状态</div>
        <div class="tab" onclick="switchTab('config')">配置编辑</div>
        <div class="tab" onclick="switchTab('ssh')">SSH 终端</div>
    </div>

    <!-- 隧道状态 -->
    <div id="panel-status" class="panel active">
        <div class="card">
            <div class="card-title">
                <span class="status-dot" id="svc-status"></span>
                frpc 服务状态
                <button class="btn btn-primary" style="float:right" onclick="refreshStatus()">🔄 刷新</button>
            </div>
            <table>
                <thead><tr><th>名称</th><th>类型</th><th>本地地址</th><th>远程地址</th><th>状态</th></tr></thead>
                <tbody id="tunnel-list"><tr><td colspan="5" style="color:#64748b">加载中...</td></tr></tbody>
            </table>
        </div>
        <div class="btn-group">
            <button class="btn btn-danger" onclick="restartFrpc()">⚡ 重启 frpc</button>
        </div>
        <div id="status-msg" class="msg"></div>
    </div>

    <!-- 配置编辑 -->
    <div id="panel-config" class="panel">
        <div class="card">
            <div class="card-title">frpc.toml 配置文件
                <button class="btn btn-primary" style="float:right" onclick="saveConfig()">💾 保存配置</button>
            </div>
            <textarea id="config-editor" spellcheck="false"></textarea>
        </div>
        <div class="btn-group">
            <button class="btn btn-success" onclick="saveAndRestart()">💾 保存并重启</button>
            <button class="btn btn-primary" onclick="loadConfig()">🔄 重新加载</button>
        </div>
        <div id="config-msg" class="msg"></div>
    </div>

    <!-- SSH 终端 -->
    <div id="panel-ssh" class="panel">
        <div class="card">
            <div class="card-title">Web SSH 终端 (ttyd)</div>
            <p style="color:#94a3b8;font-size:14px;margin-bottom:12px">通过 ttyd 提供的 Web SSH 终端直接连接到服务器。</p>
            <a class="ssh-link" id="ssh-external-link" href="#" target="_blank">
                🖥️ 在新窗口打开 SSH 终端
            </a>
            <div style="margin-top:16px">
                <iframe id="ssh-frame" class="ssh-frame" src="" style="display:none"></iframe>
                <button class="btn btn-primary" style="margin-top:8px" onclick="toggleSSH()">🔌 连接 SSH 终端</button>
            </div>
        </div>
    </div>
</div>
<script>
function getCookie(n){var m=document.cookie.match(new RegExp("(^| )"+n+"=([^;]+)"));return m?m[2]:"";}function authFetch(u,o){o=o||{};var h=o.headers||{};if(!(h instanceof Headers)){var nh=new Headers();for(var k in h)nh.set(k,h[k]);h=nh;}if(!h.has("X-CSRF-Token")){var t=getCookie("csrf_token");if(t)h.set("X-CSRF-Token",t);}o.headers=h;return fetch(u,o).then(function(r){if(r.status===401){window.location.href="/login?redirect="+encodeURIComponent(window.location.pathname);return new Promise(function(){});}return r;});}
let sshConnected = false;
function switchTab(name){
    document.querySelectorAll('.tab').forEach((t,i)=>t.classList.toggle('active',['status','config','ssh'][i]===name));
    document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
    document.getElementById('panel-'+name).classList.add('active');
    if(name==='config'&&!document.getElementById('config-editor').value) loadConfig();
    if(name==='status') refreshStatus();
}
function showMsg(id,text,ok){
    let el=document.getElementById(id);
    el.className='msg '+(ok?'success':'error');
    el.textContent=text;
    setTimeout(()=>el.className='msg',5000);
}
function refreshStatus(){
    authFetch('/api/frpc/status').then(r=>r.json()).then(d=>{
        let dot=document.getElementById('svc-status');
        dot.className='status-dot '+(d.running?'online':'offline');
        let tbody=document.getElementById('tunnel-list');
        if(!d.tunnels||d.tunnels.length===0){
            tbody.innerHTML='<tr><td colspan="5" style="color:#64748b">'+(d.error||'无隧道')+'</td></tr>';
            return;
        }
        tbody.innerHTML=d.tunnels.map(t=>'<tr><td>'+t.name+'</td><td>'+t.type+'</td><td>'+t.local_addr+'</td><td>'+t.remote_addr+'</td><td><span class="status-dot '+(t.status==='online'?'online':'offline')+'"></span>'+t.status+'</td></tr>').join('');
    }).catch(e=>console.error(e));
}
function loadConfig(){
    authFetch('/api/frpc/config').then(r=>r.text()).then(t=>{
        document.getElementById('config-editor').value=t;
    });
}
function saveConfig(){
    let content=document.getElementById('config-editor').value;
    authFetch('/api/frpc/config',{method:'POST',body:content,headers:{'Content-Type':'text/plain'}})
    .then(r=>r.json()).then(d=>{
        showMsg('config-msg',d.message||d.error,d.success);
    });
}
function saveAndRestart(){
    saveConfig();
    setTimeout(restartFrpc,500);
}
function restartFrpc(){
    if(!confirm('确定要重启 frpc 服务吗？配置变更后重启会生效。')) return;
    authFetch('/api/frpc/restart',{method:'POST'}).then(r=>r.json()).then(d=>{
        showMsg('status-msg',d.message||d.error,d.success);
        setTimeout(refreshStatus,2000);
    });
}
function toggleSSH(){
    let frame=document.getElementById('ssh-frame');
    if(!sshConnected){
        let proto=location.protocol==='https:'?'wss':'ws';
        let host=location.hostname;
        let port=location.port;
        // ttyd runs on separate port, use external URL
        frame.src='http://'+host+':40964';
        frame.style.display='block';
        sshConnected=true;
    }else{
        frame.style.display='none';
        frame.src='';
        sshConnected=false;
    }
}
// Init
refreshStatus();
document.getElementById('ssh-external-link').href='http://'+location.hostname+':40964';
</script>
</body>
</html>