Your Name
44f7fef1f8
- 修复扫描进度条不动的问题（分4阶段更新进度） - 新增Web SSH远程终端（xterm.js + WebSocket） - 新增多拓扑管理（创建/切换拓扑、全局设备池） - 简化新建拓扑流程（仅需名称，创建后选择设备） - 修复拓扑Builder设备去重（按IP去重） - 修复启动时拓扑设备不加载到Builder的问题 - 优化MAC前缀匹配（避免歧义前缀导致错误连线） - 拓扑连线改为无向（去除箭头） - 设备详情面板加宽到600px
788 řádky
26 KiB
JavaScript
788 řádky
26 KiB
JavaScript
// 全局变量
|
|
let cy = null;
|
|
let currentTaskId = null;
|
|
let currentTopologyId = null;
|
|
let currentTerminal = null; // 当前终端实例
|
|
|
|
// 初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initCytoscape();
|
|
initEventListeners();
|
|
loadTopologyList(); // 加载拓扑列表
|
|
loadTopology();
|
|
loadDeviceList(); // 加载设备列表
|
|
});
|
|
|
|
// 初始化Cytoscape
|
|
function initCytoscape() {
|
|
cy = cytoscape({
|
|
container: document.getElementById('cy'),
|
|
elements: [],
|
|
style: [
|
|
{
|
|
selector: 'node',
|
|
style: {
|
|
'label': 'data(label)',
|
|
'background-color': function(ele) {
|
|
return getNodeColor(ele.data('type'));
|
|
},
|
|
'width': 70,
|
|
'height': 70,
|
|
'border-width': 3,
|
|
'border-color': '#667eea',
|
|
'text-valign': 'bottom',
|
|
'text-halign': 'center',
|
|
'font-size': '11px',
|
|
'font-weight': 'bold',
|
|
'text-wrap': 'wrap',
|
|
'text-max-width': '80px'
|
|
}
|
|
},
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'width': 2,
|
|
'line-color': '#999',
|
|
'curve-style': 'bezier',
|
|
'label': 'data(protocol)'
|
|
}
|
|
},
|
|
{
|
|
selector: 'node:selected',
|
|
style: {
|
|
'border-width': 5,
|
|
'border-color': '#FF9800'
|
|
}
|
|
}
|
|
],
|
|
layout: {
|
|
name: 'cose',
|
|
animate: true,
|
|
animationDuration: 1000,
|
|
padding: 30
|
|
}
|
|
});
|
|
|
|
// 节点点击事件
|
|
cy.on('tap', 'node', function(evt) {
|
|
const node = evt.target;
|
|
showDeviceDetail(node.data('id'));
|
|
});
|
|
}
|
|
|
|
// 获取节点颜色
|
|
function getNodeColor(type) {
|
|
const colors = {
|
|
'cisco': '#4CAF50',
|
|
'huawei': '#2196F3',
|
|
'h3c': '#9C27B0',
|
|
'asa': '#FF5722',
|
|
'linux': '#607D8B',
|
|
'windows': '#00BCD4'
|
|
};
|
|
return colors[type] || '#999';
|
|
}
|
|
|
|
// 初始化事件监听
|
|
function initEventListeners() {
|
|
// 拓扑选择器
|
|
document.getElementById('topology-selector').addEventListener('change', switchTopology);
|
|
|
|
// 新建拓扑按钮
|
|
document.getElementById('btn-new-topology').addEventListener('click', function() {
|
|
document.getElementById('modal-new-topology').classList.add('active');
|
|
});
|
|
|
|
// 关闭新建拓扑模态框
|
|
document.querySelector('.close-new-topology').addEventListener('click', function() {
|
|
document.getElementById('modal-new-topology').classList.remove('active');
|
|
});
|
|
|
|
// 新建拓扑表单
|
|
document.getElementById('new-topology-form').addEventListener('submit', createTopology);
|
|
|
|
// 扫描按钮
|
|
document.getElementById('btn-scan').addEventListener('click', startScan);
|
|
|
|
// 添加设备按钮
|
|
document.getElementById('btn-add-device').addEventListener('click', function() {
|
|
document.getElementById('modal').classList.add('active');
|
|
});
|
|
|
|
// 关闭模态框
|
|
document.querySelector('.close').addEventListener('click', function() {
|
|
document.getElementById('modal').classList.remove('active');
|
|
});
|
|
|
|
// 添加设备表单
|
|
document.getElementById('add-device-form').addEventListener('submit', addDevice);
|
|
|
|
// 导出按钮
|
|
document.getElementById('btn-export').addEventListener('click', exportTopology);
|
|
|
|
// SSH终端相关
|
|
document.querySelector('.close-terminal').addEventListener('click', closeTerminal);
|
|
document.querySelector('.close-ssh-creds').addEventListener('click', function() {
|
|
document.getElementById('modal-ssh-creds').classList.remove('active');
|
|
});
|
|
document.getElementById('ssh-creds-form').addEventListener('submit', connectTerminal);
|
|
|
|
// 设备选择器相关
|
|
document.querySelector('.close-select-devices').addEventListener('click', function() {
|
|
document.getElementById('modal-select-devices').classList.remove('active');
|
|
});
|
|
}
|
|
|
|
// 开始扫描
|
|
async function startScan() {
|
|
const scanRange = document.getElementById('scan-range').value;
|
|
const sshPort = document.getElementById('ssh-port').value;
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
if (!scanRange) {
|
|
alert('请输入IP范围');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/scan', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
scan_range: scanRange,
|
|
ssh_port: parseInt(sshPort),
|
|
username: username,
|
|
password: password
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
currentTaskId = data.task_id;
|
|
|
|
// 轮询进度
|
|
pollProgress();
|
|
} catch (error) {
|
|
console.error('扫描失败:', error);
|
|
alert('扫描失败: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// 轮询进度
|
|
async function pollProgress() {
|
|
if (!currentTaskId) return;
|
|
|
|
let failCount = 0;
|
|
const MAX_FAILS = 5;
|
|
|
|
const poll = async () => {
|
|
try {
|
|
const response = await fetch(`/api/scan/${currentTaskId}`);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
const task = await response.json();
|
|
failCount = 0; // 重置失败计数
|
|
|
|
// 更新进度
|
|
document.getElementById('scan-status').textContent = task.status;
|
|
document.getElementById('scan-progress').textContent = task.progress + '%';
|
|
document.getElementById('progress-fill').style.width = task.progress + '%';
|
|
|
|
// 更新设备列表（仅当有设备时）
|
|
if (task.devices && task.devices.length > 0) {
|
|
updateDeviceList(task.devices);
|
|
}
|
|
|
|
// 如果完成,更新拓扑
|
|
if (task.status === 'completed' || task.status === 'failed') {
|
|
loadTopology();
|
|
loadDeviceList(); // 刷新设备列表
|
|
currentTaskId = null;
|
|
return;
|
|
}
|
|
|
|
// 继续轮询
|
|
setTimeout(poll, 1000);
|
|
} catch (error) {
|
|
failCount++;
|
|
console.error('获取进度失败:', error);
|
|
// 超过最大失败次数则停止轮询
|
|
if (failCount >= MAX_FAILS) {
|
|
document.getElementById('scan-status').textContent = 'error';
|
|
currentTaskId = null;
|
|
return;
|
|
}
|
|
// 等待更长时间后重试
|
|
setTimeout(poll, 2000);
|
|
}
|
|
};
|
|
|
|
poll();
|
|
}
|
|
|
|
// 更新设备列表
|
|
function updateDeviceList(devices) {
|
|
const listContainer = document.getElementById('device-list');
|
|
listContainer.innerHTML = '';
|
|
|
|
devices.forEach(device => {
|
|
const item = document.createElement('div');
|
|
item.className = 'device-item';
|
|
item.innerHTML = `
|
|
<div class="ip">${device.ip}</div>
|
|
<div class="type">${device.type} - ${device.hostname || 'Unknown'}</div>
|
|
<div class="status status-${device.scan_status.replace(' ', '-')}">${device.scan_status}</div>
|
|
`;
|
|
item.addEventListener('click', () => showDeviceDetail(device.id));
|
|
listContainer.appendChild(item);
|
|
});
|
|
}
|
|
|
|
// 加载拓扑
|
|
async function loadTopology() {
|
|
try {
|
|
const response = await fetch('/api/topology');
|
|
const graph = await response.json();
|
|
|
|
// 清空现有元素
|
|
cy.elements().remove();
|
|
|
|
// 添加节点
|
|
graph.nodes.forEach(node => {
|
|
// 显示格式: 主机名 + IP地址
|
|
let label = node.ip; // 默认显示IP
|
|
if (node.hostname && node.hostname !== '') {
|
|
label = `${node.hostname}\n${node.ip}`;
|
|
}
|
|
|
|
cy.add({
|
|
group: 'nodes',
|
|
data: {
|
|
id: node.id,
|
|
label: label,
|
|
type: node.type,
|
|
ip: node.ip,
|
|
hostname: node.hostname
|
|
}
|
|
});
|
|
});
|
|
|
|
// 添加边
|
|
graph.edges.forEach(edge => {
|
|
cy.add({
|
|
group: 'edges',
|
|
data: {
|
|
id: edge.id,
|
|
source: edge.source,
|
|
target: edge.target,
|
|
protocol: edge.protocol
|
|
}
|
|
});
|
|
});
|
|
|
|
// 重新布局
|
|
cy.layout({
|
|
name: 'cose',
|
|
animate: true,
|
|
animationDuration: 1000,
|
|
padding: 30
|
|
}).run();
|
|
|
|
cy.fit(40);
|
|
} catch (error) {
|
|
console.error('加载拓扑失败:', error);
|
|
}
|
|
}
|
|
|
|
// 加载设备列表
|
|
async function loadDeviceList() {
|
|
try {
|
|
const response = await fetch('/api/devices');
|
|
const devices = await response.json();
|
|
|
|
const listContainer = document.getElementById('device-list');
|
|
listContainer.innerHTML = '';
|
|
|
|
if (devices.length === 0) {
|
|
listContainer.innerHTML = '<p style="color: #999; text-align: center;">暂无设备</p>';
|
|
return;
|
|
}
|
|
|
|
devices.forEach(device => {
|
|
const item = document.createElement('div');
|
|
item.className = 'device-item';
|
|
|
|
const interfaceCount = device.interfaces ? device.interfaces.length : 0;
|
|
const neighborCount = device.neighbors ? device.neighbors.length : 0;
|
|
|
|
item.innerHTML = `
|
|
<div class="ip">${device.ip}</div>
|
|
<div class="type">${device.type} - ${device.hostname || 'Unknown'}</div>
|
|
<div class="info" style="font-size: 11px; color: #999; margin-top: 5px;">
|
|
接口: ${interfaceCount} | 邻居: ${neighborCount}
|
|
</div>
|
|
<div class="status status-${(device.scan_status || 'pending').replace(' ', '-')}">${device.scan_status || 'pending'}</div>
|
|
`;
|
|
item.addEventListener('click', () => showDeviceDetail(device.id || device.ip));
|
|
listContainer.appendChild(item);
|
|
});
|
|
} catch (error) {
|
|
console.error('加载设备列表失败:', error);
|
|
}
|
|
}
|
|
|
|
// 显示设备详情
|
|
async function showDeviceDetail(deviceId) {
|
|
try {
|
|
const response = await fetch(`/api/device/${deviceId}`);
|
|
const device = await response.json();
|
|
|
|
const detailPanel = document.getElementById('detail-panel');
|
|
const detailContainer = document.getElementById('device-detail');
|
|
|
|
detailContainer.innerHTML = `
|
|
<div class="detail-section">
|
|
<h4>基本信息</h4>
|
|
<p><strong>IP:</strong> ${device.ip}</p>
|
|
<p><strong>主机名:</strong> ${device.hostname || 'N/A'}</p>
|
|
<p><strong>类型:</strong> ${device.type}</p>
|
|
<p><strong>系统:</strong> ${device.os_version || 'N/A'}</p>
|
|
<p><strong>运行时间:</strong> ${device.uptime || 'N/A'}</p>
|
|
<button class="btn btn-primary" style="margin-top:10px;width:100%" onclick="openSSHTerminal('${device.ip}', '${device.hostname || device.ip}')">SSH 连接</button>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h4>接口信息 (${device.interfaces.length})</h4>
|
|
${device.interfaces.map(iface => `
|
|
<div class="interface-item">
|
|
<div class="name">${iface.name}</div>
|
|
<div class="info">
|
|
<p>状态: <span class="status-${iface.status.replace(' ', '-')}">${iface.status}</span></p>
|
|
<p>IP: ${iface.ip || 'N/A'}</p>
|
|
<p>MAC: ${iface.mac || 'N/A'}</p>
|
|
<p>速度: ${iface.speed || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
<div class="detail-section">
|
|
<h4>邻居设备 (${device.neighbors.length})</h4>
|
|
${device.neighbors.map(neighbor => `
|
|
<div class="interface-item">
|
|
<div class="name">${neighbor.remote_device}</div>
|
|
<div class="info">
|
|
<p>本地接口: ${neighbor.local_interface}</p>
|
|
<p>远程接口: ${neighbor.remote_interface}</p>
|
|
<p>协议: ${neighbor.protocol}</p>
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
|
|
detailPanel.classList.add('active');
|
|
} catch (error) {
|
|
console.error('获取设备详情失败:', error);
|
|
}
|
|
}
|
|
|
|
// 添加设备
|
|
async function addDevice(event) {
|
|
event.preventDefault();
|
|
|
|
const ip = document.getElementById('device-ip').value;
|
|
const type = document.getElementById('device-type').value;
|
|
const username = document.getElementById('device-username').value;
|
|
const password = document.getElementById('device-password').value;
|
|
|
|
try {
|
|
const response = await fetch('/api/device', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
ip: ip,
|
|
type: type,
|
|
username: username,
|
|
password: password
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
document.getElementById('modal').classList.remove('active');
|
|
document.getElementById('add-device-form').reset();
|
|
loadTopology();
|
|
loadDeviceList(); // 刷新设备列表
|
|
alert('设备添加成功');
|
|
} else {
|
|
const error = await response.json();
|
|
alert('添加失败: ' + error.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('添加设备失败:', error);
|
|
alert('添加失败: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// 导出拓扑
|
|
function exportTopology() {
|
|
const json = cy.json();
|
|
const dataStr = JSON.stringify(json, null, 2);
|
|
const dataBlob = new Blob([dataStr], { type: 'application/json' });
|
|
|
|
const link = document.createElement('a');
|
|
link.href = URL.createObjectURL(dataBlob);
|
|
link.download = 'topology.json';
|
|
link.click();
|
|
}
|
|
|
|
// 加载拓扑列表
|
|
async function loadTopologyList() {
|
|
try {
|
|
const response = await fetch('/api/topologies');
|
|
const topos = await response.json();
|
|
|
|
const selector = document.getElementById('topology-selector');
|
|
selector.innerHTML = '';
|
|
|
|
if (topos.length === 0) {
|
|
selector.innerHTML = '<option value="">暂无拓扑</option>';
|
|
return;
|
|
}
|
|
|
|
topos.forEach(topo => {
|
|
const option = document.createElement('option');
|
|
option.value = topo.id;
|
|
option.textContent = `${topo.name} (${topo.device_count || 0} 设备)`;
|
|
if (topo.name.includes(' (当前)')) {
|
|
option.selected = true;
|
|
currentTopologyId = topo.id;
|
|
}
|
|
selector.appendChild(option);
|
|
});
|
|
} catch (error) {
|
|
console.error('加载拓扑列表失败:', error);
|
|
}
|
|
}
|
|
|
|
// 切换拓扑
|
|
async function switchTopology(event) {
|
|
const topoId = event.target.value;
|
|
if (!topoId) return;
|
|
|
|
try {
|
|
const response = await fetch('/api/topology/switch', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
topology_id: topoId
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
currentTopologyId = topoId;
|
|
// 刷新拓扑和设备列表
|
|
loadTopology();
|
|
loadDeviceList();
|
|
} else {
|
|
const error = await response.json();
|
|
alert('切换失败: ' + error);
|
|
}
|
|
} catch (error) {
|
|
console.error('切换拓扑失败:', error);
|
|
alert('切换失败: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// 新创建的拓扑ID（用于设备选择器）
|
|
let newTopologyId = null;
|
|
|
|
// 创建拓扑
|
|
async function createTopology(event) {
|
|
event.preventDefault();
|
|
|
|
const name = document.getElementById('topo-name').value;
|
|
|
|
try {
|
|
const response = await fetch('/api/topologies', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ name: name })
|
|
});
|
|
|
|
if (response.ok) {
|
|
const topo = await response.json();
|
|
newTopologyId = topo.id;
|
|
|
|
document.getElementById('modal-new-topology').classList.remove('active');
|
|
document.getElementById('new-topology-form').reset();
|
|
|
|
// 刷新拓扑列表
|
|
loadTopologyList();
|
|
loadTopology();
|
|
loadDeviceList();
|
|
|
|
// 弹出设备选择器
|
|
openDeviceSelector();
|
|
} else {
|
|
const error = await response.json();
|
|
alert('创建失败: ' + error);
|
|
}
|
|
} catch (error) {
|
|
console.error('创建拓扑失败:', error);
|
|
alert('创建失败: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// ==================== 设备选择器 ====================
|
|
|
|
// 打开设备选择器
|
|
async function openDeviceSelector() {
|
|
document.getElementById('modal-select-devices').classList.add('active');
|
|
document.getElementById('selected-count').textContent = '已选 0 台';
|
|
|
|
const poolList = document.getElementById('device-pool-list');
|
|
poolList.innerHTML = '<p style="color:#999;text-align:center">加载中...</p>';
|
|
|
|
try {
|
|
const response = await fetch('/api/devices/all');
|
|
const devices = await response.json();
|
|
|
|
poolList.innerHTML = '';
|
|
|
|
if (devices.length === 0) {
|
|
poolList.innerHTML = '<p style="color:#999;text-align:center">暂无设备，请先扫描添加设备</p>';
|
|
return;
|
|
}
|
|
|
|
devices.forEach(device => {
|
|
const item = document.createElement('div');
|
|
item.className = 'device-pool-item';
|
|
item.innerHTML = `
|
|
<input type="checkbox" value="${device.ip}" onchange="updateSelectedCount()">
|
|
<div class="device-info">
|
|
<div class="device-ip">${device.ip}</div>
|
|
<div class="device-type">${device.type} - ${device.hostname || 'Unknown'}</div>
|
|
</div>
|
|
`;
|
|
// 点击整行切换选中
|
|
item.addEventListener('click', function(e) {
|
|
if (e.target.tagName !== 'INPUT') {
|
|
const cb = item.querySelector('input[type=checkbox]');
|
|
cb.checked = !cb.checked;
|
|
updateSelectedCount();
|
|
}
|
|
item.classList.toggle('selected', item.querySelector('input[type=checkbox]').checked);
|
|
});
|
|
poolList.appendChild(item);
|
|
});
|
|
} catch (error) {
|
|
poolList.innerHTML = '<p style="color:#f44336;text-align:center">加载失败</p>';
|
|
console.error('加载设备池失败:', error);
|
|
}
|
|
}
|
|
|
|
// 更新选中计数
|
|
function updateSelectedCount() {
|
|
const checkboxes = document.querySelectorAll('#device-pool-list input[type=checkbox]:checked');
|
|
document.getElementById('selected-count').textContent = `已选 ${checkboxes.length} 台`;
|
|
}
|
|
|
|
// 全选/取消全选
|
|
function toggleSelectAllDevices(btn) {
|
|
const checkboxes = document.querySelectorAll('#device-pool-list input[type=checkbox]');
|
|
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
|
|
checkboxes.forEach(cb => {
|
|
cb.checked = !allChecked;
|
|
cb.closest('.device-pool-item').classList.toggle('selected', !allChecked);
|
|
});
|
|
btn.textContent = allChecked ? '全选' : '取消全选';
|
|
updateSelectedCount();
|
|
}
|
|
|
|
// 确认添加设备到拓扑
|
|
async function confirmAddDevices() {
|
|
const targetTopoId = newTopologyId || currentTopologyId;
|
|
if (!targetTopoId) {
|
|
alert('请先选择目标拓扑');
|
|
return;
|
|
}
|
|
|
|
const checkboxes = document.querySelectorAll('#device-pool-list input[type=checkbox]:checked');
|
|
if (checkboxes.length === 0) {
|
|
alert('请至少选择一台设备');
|
|
return;
|
|
}
|
|
|
|
const deviceIds = Array.from(checkboxes).map(cb => cb.value);
|
|
|
|
try {
|
|
const response = await fetch(`/api/topology/${targetTopoId}/devices`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ device_ids: deviceIds })
|
|
});
|
|
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
document.getElementById('modal-select-devices').classList.remove('active');
|
|
newTopologyId = null;
|
|
|
|
// 刷新界面
|
|
loadTopologyList();
|
|
loadTopology();
|
|
loadDeviceList();
|
|
|
|
alert(`成功添加 ${result.added} 台设备到 ${result.topology}`);
|
|
} else {
|
|
alert('添加失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('添加设备失败:', error);
|
|
alert('添加失败: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// ==================== SSH终端功能 ====================
|
|
|
|
// 打开SSH终端（先弹出凭据输入框）
|
|
function openSSHTerminal(ip, hostname) {
|
|
document.getElementById('ssh-target-ip').value = ip;
|
|
document.getElementById('ssh-target-username').value = document.getElementById('username').value || 'admin';
|
|
document.getElementById('ssh-target-password').value = document.getElementById('password').value || '';
|
|
document.getElementById('ssh-target-port').value = document.getElementById('ssh-port').value || '22';
|
|
document.getElementById('modal-ssh-creds').classList.add('active');
|
|
}
|
|
|
|
// 连接SSH终端
|
|
async function connectTerminal(event) {
|
|
event.preventDefault();
|
|
|
|
const ip = document.getElementById('ssh-target-ip').value;
|
|
const port = document.getElementById('ssh-target-port').value || '22';
|
|
const username = document.getElementById('ssh-target-username').value;
|
|
const password = document.getElementById('ssh-target-password').value;
|
|
|
|
if (!username || !password) {
|
|
alert('请输入用户名和密码');
|
|
return;
|
|
}
|
|
|
|
// 关闭凭据弹窗，打开终端弹窗
|
|
document.getElementById('modal-ssh-creds').classList.remove('active');
|
|
document.getElementById('modal-terminal').classList.add('active');
|
|
document.getElementById('terminal-device-name').textContent = ip;
|
|
document.getElementById('terminal-status').textContent = '连接中...';
|
|
document.getElementById('terminal-status').className = 'terminal-status';
|
|
|
|
// 初始化 xterm.js
|
|
if (currentTerminal) {
|
|
currentTerminal.dispose();
|
|
}
|
|
|
|
const term = new Terminal({
|
|
cursorBlink: true,
|
|
fontSize: 14,
|
|
fontFamily: 'Consolas, "Courier New", monospace',
|
|
theme: {
|
|
background: '#1e1e1e',
|
|
foreground: '#d4d4d4',
|
|
cursor: '#d4d4d4'
|
|
}
|
|
});
|
|
|
|
const fitAddon = new FitAddon.FitAddon();
|
|
term.loadAddon(fitAddon);
|
|
|
|
const terminalContainer = document.getElementById('terminal-container');
|
|
terminalContainer.innerHTML = '';
|
|
term.open(terminalContainer);
|
|
fitAddon.fit();
|
|
|
|
currentTerminal = term;
|
|
|
|
// 构建WebSocket URL
|
|
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const wsUrl = `${wsProtocol}//${window.location.host}/api/terminal?ip=${encodeURIComponent(ip)}&port=${encodeURIComponent(port)}&username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;
|
|
|
|
let ws;
|
|
try {
|
|
ws = new WebSocket(wsUrl);
|
|
} catch (e) {
|
|
term.writeln('连接失败: ' + e.message);
|
|
document.getElementById('terminal-status').textContent = '连接失败';
|
|
return;
|
|
}
|
|
|
|
ws.onopen = function() {
|
|
document.getElementById('terminal-status').textContent = '已连接';
|
|
document.getElementById('terminal-status').className = 'terminal-status connected';
|
|
term.writeln('\x1b[32m--- SSH 连接已建立 ---\x1b[0m');
|
|
term.focus();
|
|
fitAddon.fit();
|
|
};
|
|
|
|
ws.onmessage = function(event) {
|
|
term.write(event.data);
|
|
};
|
|
|
|
ws.onclose = function() {
|
|
document.getElementById('terminal-status').textContent = '已断开';
|
|
document.getElementById('terminal-status').className = 'terminal-status';
|
|
term.writeln('\r\n\x1b[31m--- 连接已断开 ---\x1b[0m');
|
|
};
|
|
|
|
ws.onerror = function(err) {
|
|
document.getElementById('terminal-status').textContent = '连接错误';
|
|
document.getElementById('terminal-status').className = 'terminal-status';
|
|
term.writeln('\r\n\x1b[31m--- 连接错误 ---\x1b[0m');
|
|
};
|
|
|
|
// 终端输入转发到WebSocket
|
|
term.onData(function(data) {
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
ws.send(JSON.stringify({ input: data }));
|
|
}
|
|
});
|
|
|
|
// 终端resize通知
|
|
term.onResize(function(size) {
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
ws.send(JSON.stringify({ type: 'resize', cols: size.cols, rows: size.rows }));
|
|
}
|
|
});
|
|
|
|
// 窗口resize时自动调整
|
|
const resizeObserver = new ResizeObserver(function() {
|
|
fitAddon.fit();
|
|
});
|
|
resizeObserver.observe(terminalContainer);
|
|
|
|
// 存储ws引用以便关闭
|
|
term._ws = ws;
|
|
term._resizeObserver = resizeObserver;
|
|
}
|
|
|
|
// 关闭终端
|
|
function closeTerminal() {
|
|
if (currentTerminal) {
|
|
if (currentTerminal._ws) {
|
|
currentTerminal._ws.close();
|
|
}
|
|
if (currentTerminal._resizeObserver) {
|
|
currentTerminal._resizeObserver.disconnect();
|
|
}
|
|
currentTerminal.dispose();
|
|
currentTerminal = null;
|
|
}
|
|
document.getElementById('modal-terminal').classList.remove('active');
|
|
document.getElementById('terminal-container').innerHTML = '';
|
|
}
|