-
+
+
-
-
-
+
-
- 主机总数
-0
-
-
- 在线主机
-0
-
-
- 离线主机
-0
-
-
- 运行中任务
-0
-
-
-
-
-
-
- 📝 最近任务
-| 任务名称 | -状态 | -进度 | -开始时间 | -
|---|
-
+
+
-
-
-
-
+
+🖥️ 主机列表
-| 名称 | -IP地址 | -端口 | -用户名 | -状态 | -主机组 | -操作 | -
|---|
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- 仪表盘
运行概览与快捷入口
-
- 📁 主机组
-
-
-
-
-
-
-
+
-
-
+
+
+
+
+
-
+
+
-
- 💻 命令执行
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 选择主机，输入命令后点击执行...
-
+
-
-
+
+
+
+⚠️
-
-
-
-
+
-
-
-
-
- 📜 Playbook列表
- -
-
-
- `,'modal-lg',
+ ``);
+ }catch(e){toast(esc(e.message),'err');closeModal();}
+}
+
+/* ================= 文件分发 ================= */
+let fileMode='content';
+async function renderFiles(){
+ $('#view-files').innerHTML=``;
+ const paint=()=>{const box=$('#panel-log');if(!box)return;const atEnd=box.scrollHeight-box.scrollTop-box.clientHeight<60;
+ box.innerHTML=ansi(buf)||'（暂无输出）';if(atEnd)box.scrollTop=box.scrollHeight;};
+ api(`/api/tasks/${taskId}`).then(r=>{buf=r.data?.output||'';paint();
+ if(r.data&&r.data.status!=='running'){finishPanel(r.data.status);}else{openStream();}
+ }).catch(e=>{$('#panel-log').innerHTML=`${esc(e.message)}`;});
+ function finishPanel(status){
+ el.querySelector('.live')?.classList.add('off');
+ if(summaryEl)summaryEl.innerHTML=status==='success'||status==='completed'
+ ?`分发完成 · 成功`:`分发结束 · ${statusBadge(status)}`;
+ if(status==='success')toast('文件分发完成 🎉');else if(status==='failed')toast('文件分发失败','err');
+ }
+ function openStream(){
+ const es=new EventSource(`/api/tasks/${taskId}/stream`);
+ es.addEventListener('log',e=>{buf+=e.data;requestAnimationFrame(paint);});
+ es.addEventListener('status',e=>{es.close();finishPanel(e.data);
+ api(`/api/tasks/${taskId}`).then(r=>{if(r.data?.output){buf=r.data.output;paint();}}).catch(()=>{});});
+ es.addEventListener('error',e=>{if(e.data){const box=$('#panel-log');if(box)box.innerHTML+=`\n${esc(e.data)}`;}});
+ es.onerror=()=>{};
+ }
+}
+
+/* ================= SSH 密钥 ================= */
+async function renderKeys(){
+ $('#view-keys').innerHTML=`
依赖该密钥的主机将无法继续连接。`))return; + try{await api(`/api/sshkeys/${encodeURIComponent(name)}`,{method:'DELETE'});toast('SSH 密钥已删除');await loadKeys();}catch(e){toast(esc(e.message),'err');} +} + +/* ================= 任务中心 ================= */ +async function renderTasks(){ + $('#view-tasks').innerHTML=`
`;
+}
+async function cancelTask(id){
+ if(!await confirmBox('取消任务','确定要取消该任务吗？
正在运行的 Ansible 进程将被终止。','确认取消'))return; + try{await api(`/api/tasks/${id}`,{method:'DELETE'});toast('已发送取消请求','warn'); + if($('#modal').classList.contains('show'))openTaskModal(id); + else if($('#view-tasks').classList.contains('on'))setTimeout(()=>loadTasks(),600); + }catch(e){toast(esc(e.message),'err');} +} + +/* ---- 任务日志弹窗（SSE 实时流） ---- */ +let taskES=null,taskBuf='',taskPaintQueued=false,curTaskId=null; +function openTaskModal(id){ + curTaskId=id;taskBuf=''; + openModal(`${ic.terminal} 任务日志 #${esc(String(id).slice(0,8))}`,` +`;}
+}
+
+/* ================= 初始化 ================= */
+window.addEventListener('DOMContentLoaded',async()=>{
+ $('#menuBtn').addEventListener('click',()=>$('#sidebar').classList.toggle('open'));
+ $('#modal').addEventListener('click',e=>{if(e.target.id==='modal')closeModal();});
+ $('#modal-x').addEventListener('click',closeModal);
+ $('#tb-refresh').addEventListener('click',refreshAll);
+ $$('.nav-item').forEach(n=>n.addEventListener('click',()=>navigate(n.dataset.p)));
+ document.addEventListener('keydown',e=>{
+ if(e.key!=='Escape')return;
+ if($('#confirm').classList.contains('show'))$('#cf-no').click();
+ else if($('#modal').classList.contains('show'))closeModal();
+ });
+ await loadSystemInfo();
+ setInterval(loadSystemInfo,60000);
+ setInterval(()=>{/* 任务页自动刷新 */
+ if(cur==='tasks'&&$('#task-auto')?.checked&&!$('#modal').classList.contains('show'))loadTasks().catch(()=>{});
+ },4000);
+ navigate('dashboard');
+});
+
🚀 执行配置
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ ${keys.length?'':'
+ ⚠️ 尚未添加密钥，请先到「SSH 密钥」页面创建
'}
+
+
`,
+ '',``);
+ const seg=$('#hf-auth');
+ const sync=()=>{const v=seg.querySelector('.on').dataset.v;$('#hf-pwd-w').style.display=v==='password'?'':'none';$('#hf-key-w').style.display=v==='sshkey'?'':'none';};
+ seg.querySelectorAll('button').forEach(b=>b.addEventListener('click',()=>{seg.querySelectorAll('button').forEach(x=>x.classList.remove('on'));b.classList.add('on');sync();}));
+ sync();
+ $('#hf-groups').querySelectorAll('.chip').forEach(c=>c.addEventListener('click',()=>c.classList.toggle('on')));
+ $('#hf-save').addEventListener('click',async()=>{
+ const name=$('#hf-name').value.trim(),ip=$('#hf-ip').value.trim();
+ if(!name||!ip)return toast('请填写主机名称与 IP 地址','warn');
+ const auth=seg.querySelector('.on').dataset.v;
+ const body={name,ip,port:+$('#hf-port').value||22,username:$('#hf-user').value.trim()||'root',auth_type:auth,
+ password:auth==='password'?$('#hf-pwd').value:'',ssh_key:auth==='sshkey'?$('#hf-key').value:'',
+ groups:$$('#hf-groups .chip.on').map(c=>c.dataset.g)};
+ await withBtn($('#hf-save'),async()=>{
+ if(h)await api(`/api/hosts/${h.id}`,{method:'PUT',body});
+ else await api('/api/hosts',{method:'POST',body});
+ toast(h?'主机已更新':'主机添加成功，可点击 ⚡ 测试连接');closeModal();
+ if($('#view-hosts').classList.contains('on'))await refreshHosts();
+ });
+ });
+}
+/* ---- 主机组 ---- */
+function drawGroups(){
+ const el=$('#group-list');if(!el)return;
+ if(!S.groups.length){el.innerHTML=emptyMini('📁','还没有主机组','创建主机组后可按组批量执行任务');return;}
+ el.innerHTML=S.groups.map(g=>`${S.groups.map(g=>`${esc(g.name)}`).join('')||'暂无主机组，可在主机页右侧面板创建'}
+
+
`).join('');
+}
+function openGroupModal(){
+ openModal(`${ic.plus} 新建主机组`,`
+
+ `,
+ '',``);
+ $('#gf-save').addEventListener('click',async()=>{
+ const name=$('#gf-name').value.trim();
+ if(!name)return toast('请填写组名称','warn');
+ await withBtn($('#gf-save'),async()=>{
+ await api('/api/groups',{method:'POST',body:{name,description:$('#gf-desc').value.trim(),hosts:[]}});
+ toast('主机组创建成功');closeModal();await refreshHosts();
+ });
+ });
+}
+async function delGroup(name){
+ if(!await confirmBox('删除主机组',`确定要删除主机组 ${esc(name)} 吗？组内主机不会被删除。`))return;
+ try{await api(`/api/groups/${encodeURIComponent(name)}`,{method:'DELETE'});toast('主机组已删除');await refreshHosts();}catch(e){toast(esc(e.message),'err');}
+}
+
+/* ================= 命令执行 ================= */
+function getHist(){try{return JSON.parse(localStorage.getItem('adp-cmd-hist')||'[]');}catch(e){return[];}}
+function pushHist(c){const h=getHist().filter(x=>x!==c);h.unshift(c);try{localStorage.setItem('adp-cmd-hist',JSON.stringify(h.slice(0,8)));}catch(e){}}
+function drawCmdHist(){
+ const el=$('#cmd-hist');if(!el)return;
+ const h=getHist();
+ el.innerHTML=h.length?'历史：'+h.map(x=>`${esc(x)}`).join(''):'';
+ el.querySelectorAll('.hist-chip').forEach(c=>c.addEventListener('click',()=>{$('#cmd-text').value=c.dataset.c;$('#cmd-text').focus();}));
+}
+async function renderCommand(){
+ $('#view-command').innerHTML=`${ic.layers}
+
+
+ ${esc(g.name)}
${esc(g.description||'无描述')}
${(g.host_list||[]).map(x=>`${sdot(x.status)} ${esc(x.name)}`).join('')||'组内暂无主机'}
+
+
`;
+ cmdPicker=new HostPicker($('#cmd-picker'),{groups:false,placeholder:'点击选择目标主机（可多选）'});
+ cmdPicker.load();
+ drawCmdHist();
+ $('#cmd-run').addEventListener('click',runCommand);
+ $('#cmd-batch').addEventListener('click',runBatch);
+ $('#cmd-clear').addEventListener('click',()=>{$('#cmd-out').innerHTML=emptyMini('🧹','已清空','');$('#cmd-summary').textContent='等待执行…';});
+}
+const renderCmdRes=r=>`
+
+ ${ic.terminal}
+ 命令执行
通过 Ansible ad-hoc 在目标主机上执行 Shell 命令
+
+
+
+
+ $
+
+
+
+
+
+
+
+
+
+
+
+ ${ic.activity}
+
+ 执行结果
等待执行…
${emptyMini('📡','暂无执行记录','左侧执行命令后，结果将实时展示在这里')}
+
+
`;
+async function runCommand(){
+ const hosts=cmdPicker.value(),command=$('#cmd-text').value.trim();
+ if(!hosts.length)return toast('请先选择目标主机','warn');
+ if(!command)return toast('请输入要执行的命令','warn');
+ pushHist(command);drawCmdHist();
+ await withBtn($('#cmd-run'),async()=>{
+ $('#cmd-summary').innerHTML=' 正在目标主机上执行…';
+ $('#cmd-out').innerHTML=`${sdot(r.success?'online':'offline')}${esc(r.host)}
+ exit ${r.exit_code??'-'} · ${r.duration_ms??0}ms
+ ${r.success?'✓ 成功':'✗ 失败'}
+ ${esc(r.output||r.error||'（无输出）')}`;
+ const t0=performance.now();
+ const r=await api('/api/command/execute',{method:'POST',body:{hosts,command,parallel:$('#cmd-parallel').checked,timeout:+$('#cmd-timeout').value||30}});
+ const res=r.data||[];
+ const ok=res.filter(x=>x.success).length;
+ $('#cmd-summary').innerHTML=`执行完成 · 成功 ${ok} / 失败 ${res.length-ok} · 总耗时 ${Math.round(performance.now()-t0)}ms`;
+ $('#cmd-out').innerHTML=res.length?res.map(renderCmdRes).join(''):emptyMini('🤔','没有返回结果','请检查目标主机配置');
+ toast(ok===res.length?`全部 ${res.length} 台主机执行成功`:`执行完成：${ok} 成功 / ${res.length-ok} 失败`,ok===res.length?'ok':'warn');
+ });
+}
+async function runBatch(){
+ const hosts=cmdPicker.value(),command=$('#cmd-text').value.trim();
+ if(!hosts.length)return toast('请先选择目标主机','warn');
+ if(!command)return toast('请输入要执行的命令','warn');
+ pushHist(command);drawCmdHist();
+ await withBtn($('#cmd-batch'),async()=>{
+ const r=await api('/api/command/batch',{method:'POST',body:{hosts,command,parallel:true,timeout:+$('#cmd-timeout').value||30}});
+ const d=r.data||{};
+ toast(`批量任务已启动 · 任务 ID ${esc(String(d.task_id||'').slice(0,8))}`,'ok',4200);
+ if(d.results&&d.results.length){
+ $('#cmd-summary').innerHTML=`批量执行完成 · 成功 ${d.success??0} / 失败 ${d.failed??0}`;
+ $('#cmd-out').innerHTML=d.results.map(renderCmdRes).join('');
+ }
+ });
+}
+
+/* ================= Playbook 管理 ================= */
+async function renderPlaybooks(){
+ $('#view-playbooks').innerHTML=`
+
+
`;
+ await loadPlaybooks();
+}
+async function loadPlaybooks(){
+ const r=await api('/api/playbooks');S.playbooks=r.data||[];updateNavCounts();
+ const cnt=$('#pb-count');if(cnt)cnt.textContent=`共 ${S.playbooks.length} 个剧本`;
+ const el=$('#pb-list');if(!el)return;
+ if(!S.playbooks.length){
+ el.innerHTML=emptyMini('📜','暂无 Playbook','点击「新建」或到模板中心快速创建');
+ $('#pb-detail').innerHTML=`
+
+ ${ic.file}
+
+ Playbooks
加载中…
${sklRows(4)}
+ ${emptyMini('📜','选择一个 Playbook','从左侧列表选择剧本进行编辑与执行')}
${empty('📜','还没有 Playbook','点击左侧「新建」手写剧本，或前往「模板中心」一键生成最佳实践剧本',``)}
`;
+ S.curPb=null;return;
+ }
+ if(!S.curPb||!S.playbooks.find(p=>p.name===S.curPb))S.curPb=S.playbooks[0].name;
+ el.innerHTML=S.playbooks.map(p=>`
+ ${ic.file}
+
`).join('');
+ await selectPb(S.curPb);
+}
+async function selectPb(name){
+ S.curPb=name;
+ $$('#pb-list .pb-item').forEach(x=>x.classList.toggle('on',x.querySelector('.nm').textContent===name));
+ const meta=S.playbooks.find(p=>p.name===name)||{};
+ const detail=$('#pb-detail');
+ detail.innerHTML=`${esc(p.name)}
${esc(p.description||'无描述')}
`;
+ let content='';
+ try{const r=await api(`/api/playbooks/${encodeURIComponent(name)}/content`);content=(r.data&&typeof r.data==='string')?r.data:(r.data?.content||'');}
+ catch(e){detail.innerHTML=`
${empty('⚠️','内容加载失败',esc(e.message))}
`;return;}
+ detail.innerHTML=`
+ ${ic.code}
+
+
+
+
+
+ ${esc(name)}.yml
${esc(meta.description||'YAML Playbook')}
+
`;
+ pbPicker=new HostPicker($('#pb-picker'),{groups:true,placeholder:'点击选择执行目标（支持主机组）'});
+ pbPicker.load();
+ $('#pb-adv .coll-h').addEventListener('click',()=>$('#pb-adv').classList.toggle('open'));
+ const ed=$('#pb-editor'),g=$('#pb-gutter');
+ const syncGutter=()=>{const n=ed.value.split('\n').length;g.innerHTML=Array.from({length:n},(_,i)=>`
+
+
+
+ ${ic.chev} 高级执行选项（Tags / 并发 / 演练模式…）
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
${i+1}
`).join('');g.scrollTop=ed.scrollTop;};
+ ed.addEventListener('input',syncGutter);ed.addEventListener('scroll',()=>g.scrollTop=ed.scrollTop);
+ ed.addEventListener('keydown',e=>{if(e.key==='Tab'){e.preventDefault();const s=ed.selectionStart;ed.value=ed.value.slice(0,s)+' '+ed.value.slice(ed.selectionEnd);ed.selectionStart=ed.selectionEnd=s+2;syncGutter();}});
+ syncGutter();
+ $('#pb-save').addEventListener('click',()=>withBtn($('#pb-save'),async()=>{
+ await api(`/api/playbooks/${encodeURIComponent(name)}`,{method:'PUT',body:{content:ed.value}});
+ toast('Playbook 已保存');loadPlaybooks();
+ }));
+ $('#pb-del').addEventListener('click',async()=>{
+ if(!await confirmBox('删除 Playbook',`确定要删除剧本 ${esc(name)} 吗？文件将被移除，不可恢复。`))return;
+ try{await api(`/api/playbooks/${encodeURIComponent(name)}`,{method:'DELETE'});toast('Playbook 已删除');S.curPb=null;await loadPlaybooks();}catch(e){toast(esc(e.message),'err');}
+ });
+ $('#pb-exec').addEventListener('click',()=>withBtn($('#pb-exec'),async()=>{
+ const hosts=pbPicker.value();
+ if(!hosts.length)return toast('请选择目标主机或主机组','warn');
+ const vars={};$('#ex-vars').value.trim().split(/\s+/).filter(Boolean).forEach(kv=>{const i=kv.indexOf('=');if(i>0)vars[kv.slice(0,i)]=kv.slice(i+1);});
+ const r=await api('/api/playbooks/execute',{method:'POST',body:{
+ name,hosts,extra_vars:vars,tags:csv($('#ex-tags').value),skip_tags:csv($('#ex-skip').value),
+ verbose:$('#ex-v').value,diff:$('#ex-diff').checked,check:$('#ex-check').checked,become:$('#ex-become').checked,
+ forks:+$('#ex-forks').value||0,timeout:+$('#ex-timeout').value||0,extra_args:$('#ex-args').value.trim()}});
+ toast('任务已启动，正在执行…');
+ openTaskModal(r.taskId);
+ }));
+}
+function openPbModal(){
+ const sample=`---\n- name: 示例部署任务\n hosts: all\n become: true\n tasks:\n - name: 确保软件包已安装\n ansible.builtin.package:\n name: vim\n state: present\n`;
+ openModal(`${ic.plus} 新建 Playbook`,`
+
+ `,
+ '',``);
+ $('#npf-save').addEventListener('click',async()=>{
+ const name=$('#npf-name').value.trim(),content=$('#npf-content').value;
+ if(!name)return toast('请填写剧本名称','warn');
+ if(!/^[a-zA-Z0-9_\-.]+$/.test(name))return toast('名称仅支持字母、数字、下划线、中划线和点','warn');
+ if(!content.trim())return toast('请填写 YAML 内容','warn');
+ await withBtn($('#npf-save'),async()=>{
+ await api('/api/playbooks',{method:'POST',body:{name,content}});
+ toast('Playbook 创建成功');closeModal();S.curPb=name;
+ if($('#view-playbooks').classList.contains('on'))await loadPlaybooks();else navigate('playbooks');
+ });
+ });
+}
+
+/* ================= 模板中心 ================= */
+async function renderTemplates(){
+ $('#view-templates').innerHTML=`${sklCards(6,'180px')}
`;
+ const[c,t]=await Promise.all([api('/api/templates/categories'),api('/api/templates')]);
+ S.tplCats=c.data||[];S.tpls=t.data||[];S.tplCat='all';
+ drawCats();drawTpls();
+}
+function drawCats(){
+ const el=$('#tpl-cats');if(!el)return;
+ el.innerHTML=`✨ 全部 ${S.tpls.length}
`+
+ S.tplCats.map(c=>`${esc(c.icon||'📦')} ${esc(c.name)} ${c.count}
`).join('');
+}
+function setCat(c){S.tplCat=c;drawCats();drawTpls();}
+function catName(id){const c=S.tplCats.find(x=>x.id===id);return c?c.name:id;}
+function drawTpls(){
+ const el=$('#tpl-grid');if(!el)return;
+ const list=S.tplCat==='all'?S.tpls:S.tpls.filter(t=>t.category===S.tplCat);
+ if(!list.length){el.innerHTML=`${empty('🗂️','该分类下暂无模板','试试其他分类，或稍后再来')}
`;return;}
+ el.innerHTML=list.map(t=>`
+
`).join('');
+}
+async function useTpl(id){
+ const t=S.tpls.find(x=>x.id===id);if(!t)return;
+ openModal(`${ic.zap} 使用模板创建 Playbook`,`
+ ${esc(t.icon||'📄')}${esc(catName(t.category))}
+ ${esc(t.name)}
+ ${esc(t.description||'')}
+ ${(t.tags||[]).map(x=>`${esc(x)}`).join('')}
+
+
+
+
+
+ ${esc(t.icon||'📄')}
+
+
+ ${esc(t.name)}
${esc(t.description||'')}
+
`,
+ '',``);
+ $('#tpl-go').addEventListener('click',async()=>{
+ const name=$('#tpl-name').value.trim();
+ if(!name)return toast('请填写 Playbook 名称','warn');
+ await withBtn($('#tpl-go'),async()=>{
+ await api('/api/templates/deploy',{method:'POST',body:{template_id:id,playbook_name:name}});
+ toast(`已基于模板创建 ${esc(name)} 🎉`);closeModal();
+ S.curPb=name;navigate('playbooks');
+ });
+ });
+}
+async function viewTpl(id){
+ openModal(`${ic.eye} 模板预览`,`将基于模板内容创建同名 YAML 剧本，创建后可在「Playbook 管理」中编辑执行
`,'modal-lg');
+ try{
+ const r=await api(`/api/templates/${encodeURIComponent(id)}`);const t=r.data||{};
+ openModal(`${ic.eye} ${esc(t.name||'模板预览')}`,`
+
${(t.tags||[]).map(x=>`${esc(x)}`).join('')}${esc(catName(t.category))}
+ ${esc(t.name||'')}.yml
+ ${esc(t.content||'（无内容）')}
+
`;
+ filePicker=new HostPicker($('#file-picker'),{groups:true,placeholder:'点击选择目标主机 / 主机组'});
+ filePicker.load();
+ fileMode='content';
+ $('#file-mode').querySelectorAll('button').forEach(b=>b.addEventListener('click',()=>{
+ $('#file-mode').querySelectorAll('button').forEach(x=>x.classList.remove('on'));b.classList.add('on');
+ fileMode=b.dataset.v;
+ $('#f-content-w').style.display=fileMode==='content'?'':'none';
+ $('#f-src-w').style.display=fileMode==='source'?'':'none';
+ }));
+ $('#file-go').addEventListener('click',distribute);
+}
+async function distribute(){
+ const hosts=filePicker.value(),dest=$('#f-dest').value.trim();
+ if(!hosts.length)return toast('请选择目标主机','warn');
+ if(!dest)return toast('请填写目标路径','warn');
+ const content=fileMode==='content'?$('#f-content').value:'';
+ const src=fileMode==='source'?$('#f-src').value.trim():'';
+ if(fileMode==='source'&&!src)return toast('请填写服务器源文件路径','warn');
+ await withBtn($('#file-go'),async()=>{
+ $('#file-summary').innerHTML=' 正在创建分发任务…';
+ const r=await api('/api/files/distribute',{method:'POST',body:{hosts,content,source_file:src,dest_path:dest,
+ owner:$('#f-owner').value.trim(),group:$('#f-group').value.trim(),mode:$('#f-mode').value.trim()}});
+ toast('分发任务已启动');
+ showTaskInPanel(r.taskId,$('#file-out'),$('#file-summary'),`→ ${dest} · ${hosts.length} 个目标`);
+ });
+}
+function showTaskInPanel(taskId,el,summaryEl,label){
+ let buf='';
+ el.innerHTML=`
+
+ ${ic.send}
+ 文件分发
通过 Ansible copy 模块批量推送文件到目标主机
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${ic.activity}
+ 分发输出
等待任务…
${emptyMini('📦','暂无分发记录','左侧提交分发任务后，Ansible 执行输出将实时显示在这里')}
+ 任务 #${esc(String(taskId).slice(0,8))}${esc(label)}LIVE
+ ansible · 实时输出
+ 正在连接日志流…
+
`;
+ await loadKeys();
+}
+async function loadKeys(){
+ const r=await api('/api/sshkeys');S.keys=r.data||[];
+ const el=$('#key-list');if(!el)return;
+ if(!S.keys.length){el.innerHTML=empty('🔑','还没有 SSH 密钥','添加私钥后，新增主机时即可选择「密钥认证」方式，实现免密登录与部署');return;}
+ el.innerHTML=`${ic.key}
+
+ SSH 密钥
私钥统一托管，主机可免密认证
${sklRows(3)}
+ `+S.keys.map(k=>`
`;
+}
+function openKeyModal(){
+ openModal(`${ic.plus} 添加 SSH 密钥`,`
+
+
+ ${ic.key}
+
+
+
`).join('')+`${esc(k.name)}
+ ${esc(k.fingerprint||'— 无指纹信息 —')}
+ ${esc(k.path||'')} · 创建于 ${fmtD(k.created_at)}
+
+
`,
+ '',``);
+ $('#kf-save').addEventListener('click',async()=>{
+ const name=$('#kf-name').value.trim(),key=$('#kf-key').value;
+ if(!name)return toast('请填写密钥名称','warn');
+ if(!key.trim())return toast('请粘贴私钥内容','warn');
+ await withBtn($('#kf-save'),async()=>{
+ await api('/api/sshkeys',{method:'POST',body:{name,private_key:key}});
+ toast('SSH 密钥添加成功');closeModal();
+ if($('#view-keys').classList.contains('on'))await loadKeys();
+ });
+ });
+}
+async function delKey(name){
+ if(!await confirmBox('删除 SSH 密钥',`确定要删除密钥 ${esc(name)} 吗？私钥将保存在服务器受控目录中，仅用于 Ansible 连接目标主机
依赖该密钥的主机将无法继续连接。`))return; + try{await api(`/api/sshkeys/${encodeURIComponent(name)}`,{method:'DELETE'});toast('SSH 密钥已删除');await loadKeys();}catch(e){toast(esc(e.message),'err');} +} + +/* ================= 任务中心 ================= */ +async function renderTasks(){ + $('#view-tasks').innerHTML=`
+
`;
+ await loadTasks();
+}
+async function loadTasks(){
+ const el=$('#task-table');if(!el)return;
+ const r=await api('/api/tasks');
+ S.tasks=(r.data||[]).slice().sort((a,b)=>new Date(b.start_time)-new Date(a.start_time));
+ updateNavCounts();
+ const running=S.tasks.filter(t=>t.status==='running').length;
+ const sum=$('#task-summary');
+ if(sum)sum.innerHTML=`共 ${S.tasks.length} 个任务${running?` · ${running} 个运行中`:' · 无运行中任务'}`;
+ if(!S.tasks.length){el.innerHTML=empty('🚀','还没有执行过任务','运行 Playbook、批量命令或文件分发后，任务会出现在这里，支持实时日志流');return;}
+ el.innerHTML=`${ic.zap}
+
+
+ 任务中心
加载中…
${sklRows(4)}
+ | 状态 | 任务 | 主机 | 进度 | 开始时间 | 耗时 | 操作 |
|---|---|---|---|---|---|---|
| ${statusBadge(t.status)} | +${esc(t.name)} ${esc(shortPath(t.playbook)||('ID '+String(t.id).slice(0,8)))} |
+ ${(t.hosts||[]).length} 台 ${esc((t.hosts||[]).slice(0,2).join(', '))}${(t.hosts||[]).length>2?' …':''} |
+ ${t.success_hosts||0}✓ ${t.failed_hosts||0}✗${t.total_hosts?` / ${t.total_hosts}`:''} |
+ ${fmtDT(t.start_time)} | +${dur(t.start_time,t.end_time)} | +${t.status==='running' + ?`` + :``} | +
正在运行的 Ansible 进程将被终止。','确认取消'))return; + try{await api(`/api/tasks/${id}`,{method:'DELETE'});toast('已发送取消请求','warn'); + if($('#modal').classList.contains('show'))openTaskModal(id); + else if($('#view-tasks').classList.contains('on'))setTimeout(()=>loadTasks(),600); + }catch(e){toast(esc(e.message),'err');} +} + +/* ---- 任务日志弹窗（SSE 实时流） ---- */ +let taskES=null,taskBuf='',taskPaintQueued=false,curTaskId=null; +function openTaskModal(id){ + curTaskId=id;taskBuf=''; + openModal(`${ic.terminal} 任务日志 #${esc(String(id).slice(0,8))}`,` +
+
+
+ `,
+ 'modal-xl',
+ ``);
+ $('#task-cancel').addEventListener('click',()=>cancelTask(id));
+ api(`/api/tasks/${id}`).then(r=>{
+ const t=r.data;if(!t)return;
+ paintTaskMeta(t);
+ taskBuf=t.output||'';paintTaskLog();
+ if(t.status!=='running')finishTaskUI(t.status);
+ else startTaskStream(id);
+ }).catch(e=>{const el=$('#task-log');if(el)el.innerHTML=`${esc(e.message)}`;});
+}
+function paintTaskMeta(t){
+ const el=$('#task-meta');if(!el)return;
+ const p=prog(t);
+ el.innerHTML=`
+ ansible-playbook · 实时输出LIVE
+ 正在连接日志流…
+ ${esc(t.name)}${statusBadge(t.status)}
+ ${esc((t.hosts||[]).join(', '))}
+ 开始 ${fmtDT(t.start_time)} · 耗时 ${dur(t.start_time,t.end_time)}
+ `;
+}
+function paintTaskLog(){
+ const el=$('#task-log');if(!el)return;
+ const atEnd=el.scrollHeight-el.scrollTop-el.clientHeight<70;
+ el.innerHTML=ansi(taskBuf)||'（暂无输出）';
+ if(atEnd)el.scrollTop=el.scrollHeight;
+}
+function queueTaskPaint(){if(taskPaintQueued)return;taskPaintQueued=true;requestAnimationFrame(()=>{taskPaintQueued=false;paintTaskLog();});}
+function startTaskStream(id){
+ stopTaskStream();
+ const es=new EventSource(`/api/tasks/${id}/stream`);taskES=es;
+ es.addEventListener('log',e=>{taskBuf+=e.data;queueTaskPaint();});
+ es.addEventListener('status',e=>{finishTaskUI(e.data);});
+ es.addEventListener('error',e=>{if(e.data){const er=$('#task-err');if(er){er.textContent='错误：'+e.data;er.style.display='block';}}});
+ es.onerror=()=>{};/* 服务端完成后主动关闭流，忽略 */
+}
+function stopTaskStream(){if(taskES){try{taskES.close();}catch(e){}taskES=null;}}
+function finishTaskUI(status){
+ stopTaskStream();
+ $('#task-live')?.classList.add('off');
+ const cb=$('#task-cancel');if(cb)cb.style.display='none';
+ api(`/api/tasks/${curTaskId}`).then(r=>{
+ const t=r.data;if(!t)return;
+ paintTaskMeta(t);
+ if(t.output){taskBuf=t.output;paintTaskLog();}
+ if(t.error){const er=$('#task-err');if(er){er.textContent='错误：'+t.error;er.style.display='block';}}
+ }).catch(()=>{});
+ if(status==='success'||status==='completed')toast('任务执行成功 🎉');
+ else if(status==='failed')toast('任务执行失败','err');
+ else if(status==='cancelled')toast('任务已取消','warn');
+ if($('#view-tasks').classList.contains('on'))loadTasks().catch(()=>{});
+}
+
+/* ================= 顶栏 / 系统信息 ================= */
+async function loadSystemInfo(){
+ try{const r=await api('/api/system/info');S.sys=r.data||null;}catch(e){S.sys=null;}
+ drawTopbar();
+}
+function drawTopbar(){
+ const s=S.sys;
+ $('#tb-host').innerHTML=s?`${ic.server}${esc(s.hostname||'—')}`:`${ic.server}离线`;
+ $('#tb-ver').innerHTML=s?`${ic.box}Ansible ${esc(String(s.ansible_version||'—').split('\n')[0].replace(/^ansible\s+/i,''))}`:'';
+ $('#tb-up').innerHTML=`${ic.clock}${esc(s?.uptime||'—')}`;
+ const foot=$('#side-status'),dot=$('#side-dot'),ver=$('#side-ver');
+ if(s){foot.textContent='系统运行正常';dot.className='sdot s-online';ver.textContent='v'+(s.version||'');}
+ else{foot.textContent='后端连接失败';dot.className='sdot s-offline';ver.textContent='';}
+}
+async function refreshAll(){
+ const b=$('#tb-refresh');b.classList.add('spinning');
+ await loadSystemInfo();
+ try{await PAGES[cur]();}catch(e){}
+ setTimeout(()=>b.classList.remove('spinning'),650);
+ toast('已刷新','info',1600);
+}
+function updateNavCounts(){
+ const set=(id,n)=>{const el=$(id);if(el)el.textContent=n>0?n:'';};
+ set('#cnt-hosts',S.hosts.length);
+ set('#cnt-pb',S.playbooks.length);
+ set('#cnt-tasks',S.tasks.filter(t=>t.status==='running').length);
+}
+
+/* ================= 路由 ================= */
+const PAGES={dashboard:renderDashboard,hosts:renderHosts,command:renderCommand,playbooks:renderPlaybooks,
+ templates:renderTemplates,files:renderFiles,keys:renderKeys,tasks:renderTasks};
+async function navigate(p){
+ cur=p;
+ $$('.nav-item').forEach(n=>n.classList.toggle('active',n.dataset.p===p));
+ $$('.page').forEach(x=>x.classList.remove('on'));
+ $('#view-'+p).classList.add('on');
+ $('#crumb').textContent=PAGE_META[p][0];
+ $('#crumb-sub').textContent=PAGE_META[p][1];
+ $('#sidebar').classList.remove('open');
+ try{await PAGES[p]();}
+ catch(e){$('#view-'+p).innerHTML=`
${empty('⚠️','页面加载失败',esc(e.message||String(e)),``)}