PlateRecApp/assets/web/ssh_keys.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSH 密钥管理 - 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}
.nav a:hover,.nav a.active{background:#334155}
.container{max-width:900px;margin:0 auto;padding:20px}
.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}
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}
.key-type{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500}
.key-type.rsa{background:#854d0e;color:#fde047}
.key-type.ed25519{background:#1e3a5f;color:#7dd3fc}
.key-type.other{background:#374151;color:#9ca3af}
.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-sm{padding:4px 10px;font-size: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:80px}
textarea:focus{outline:none;border-color:#3b82f6}
.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}
.empty{text-align:center;color:#64748b;padding:20px}

    @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; }
        .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: 80px; text-align: center; font-size: 12px; }
        textarea { min-height: 60px; font-size: 12px; }
    }
    @media (max-width: 480px) {
        .card-title { font-size: 13px; }
    }
    </style>
</head>
<body>
<div class="header">
    <h1>🔑 SSH 密钥管理</h1>
    <div class="nav">
        <a href="/">监控台</a>
        <a href="/video">视频</a>
        <a href="/config">配置</a>
        <a href="/system">系统</a>
        <a href="/frpc">frpc</a>
        <a href="/ssh-keys" class="active">SSH</a>
        <a href="/logs">日志</a>
        <a href="/help">帮助</a>
    </div>
</div>
<div class="container">
    <div class="card">
        <div class="card-title">已授权公钥</div>
        <table>
            <thead><tr><th>#</th><th>类型</th><th>注释</th><th>密钥预览</th><th>操作</th></tr></thead>
            <tbody id="key-list"><tr><td colspan="5" class="empty">加载中...</td></tr></tbody>
        </table>
    </div>
    <div class="card">
        <div class="card-title">添加公钥</div>
        <textarea id="new-key" placeholder="粘贴 SSH 公钥，例如：&#10;ssh-rsa AAAAB3NzaC1yc2EAAA... user@host&#10;ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAA... user@host"></textarea>
        <div style="margin-top:10px">
            <button class="btn btn-primary" onclick="addKey()">➕ 添加公钥</button>
            <button class="btn btn-primary" onclick="loadKeys()" style="margin-left:8px">🔄 刷新列表</button>
        </div>
        <div id="msg" class="msg"></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;});}
function showMsg(text,ok){
    let el=document.getElementById('msg');
    el.className='msg '+(ok?'success':'error');
    el.textContent=text;
    setTimeout(()=>el.className='msg',5000);
}
function getKeyTypeClass(type){
    if(type.includes('ed25519'))return'ed25519';
    if(type.includes('rsa'))return'rsa';
    return'other';
}
function loadKeys(){
    authFetch('/api/ssh/keys').then(r=>r.json()).then(d=>{
        let tbody=document.getElementById('key-list');
        if(!d.keys||d.keys.length===0){
            tbody.innerHTML='<tr><td colspan="5" class="empty">暂无授权公钥</td></tr>';
            return;
        }
        tbody.innerHTML=d.keys.map((k,i)=>'<tr><td>'+(i+1)+'</td><td><span class="key-type '+getKeyTypeClass(k.type)+'">'+k.type+'</span></td><td>'+k.comment+'</td><td style="font-family:monospace;font-size:12px;color:#64748b">'+k.key_preview+'</td><td><button class="btn btn-danger btn-sm" onclick="deleteKey('+k.index+')">删除</button></td></tr>').join('');
    });
}
function addKey(){
    let key=document.getElementById('new-key').value.trim();
    if(!key){showMsg('请输入公钥',false);return}
    authFetch('/api/ssh/keys',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({key:key})})
    .then(r=>r.json()).then(d=>{
        showMsg(d.message||d.error,d.success);
        if(d.success){document.getElementById('new-key').value='';loadKeys()}
    });
}
function deleteKey(index){
    if(!confirm('确定要删除第 '+(index+1)+' 条公钥吗？此操作不可撤销！')) return;
    authFetch('/api/ssh/keys',{method:'DELETE',headers:{'Content-Type':'application/json'},body:JSON.stringify({index:index})})
    .then(r=>r.json()).then(d=>{
        showMsg(d.message||d.error,d.success);
        if(d.success) loadKeys();
    });
}
loadKeys();
</script>
</body>
</html>