196 lines
8.4 KiB
JavaScript
196 lines
8.4 KiB
JavaScript
// --- static/terminal.js ---
|
||
|
||
// 1. 從剛剛建立的 utils.js 引入工具
|
||
import { getGlobalConnectionInfo } from './utils.js';
|
||
|
||
// 2. 宣告終端機專用的變數
|
||
let term, fitAddon, ws;
|
||
export let isConnected = false;
|
||
|
||
// 3. 終端機文字上色 (內部使用，不需要 export)
|
||
function colorizeTerminalStream(text) {
|
||
let res = text;
|
||
|
||
// 1. IP 地址：改為「柔和冰藍色」 (移除 1; 粗體)
|
||
res = res.replace(/\b(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\b/g, '\x1b[38;5;111m$1\x1b[0m');
|
||
|
||
// 2. MAC 地址：改為「柔和薰衣草紫」 (移除 1; 粗體)
|
||
res = res.replace(/\b([0-9a-fA-F]{4}\.[0-9a-fA-F]{4}\.[0-9a-fA-F]{4}|[0-9a-fA-F]{2}(?::[0-9a-fA-F]{2}){5})\b/g, '\x1b[38;5;140m$1\x1b[0m');
|
||
|
||
// 3. 正常狀態：維持「柔和薄荷綠」
|
||
res = res.replace(/\b([a-z]-online|online|init\([^)]+\)|up|active|success|yes)\b/gi, '\x1b[38;5;114m$1\x1b[0m');
|
||
|
||
// 4. 異常狀態：維持「柔和珊瑚紅」
|
||
res = res.replace(/\b(offline|down|admin-down|error|fail|failed|shutdown|reject|invalid|no)\b/gi, '\x1b[38;5;204m$1\x1b[0m');
|
||
|
||
// 5. 介面名稱 (Cable/RPD等)：改為「柔和奶油黃」 (原本是 \x1b[33m)
|
||
res = res.replace(/\b(Cable|GigabitEthernet|TenGigabitEthernet|Upstream|Downstream|Mac-domain|bonding-group|rpd)\b/gi, '\x1b[38;5;179m$1\x1b[0m');
|
||
|
||
return res;
|
||
}
|
||
|
||
// 4. 匯出 (export) 所有需要被外部呼叫的函數
|
||
export function initTerminal() {
|
||
const container = document.getElementById('terminal-container');
|
||
|
||
// ==========================================
|
||
// 🛡️ DOM 防火牆：攔截殘缺的假鍵盤事件
|
||
// ==========================================
|
||
container.addEventListener('keydown', (e) => {
|
||
// 如果這個事件物件沒有 getModifierState 函數 (代表它是外掛產生的假事件)
|
||
if (typeof e.getModifierState !== 'function') {
|
||
// 🛑 停止事件傳遞！不讓它流進 Xterm.js 裡
|
||
e.stopPropagation();
|
||
}
|
||
}, true); // 🌟 關鍵：傳入 true 啟用「捕獲階段 (Capture Phase)」，確保我們比 Xterm.js 更早拿到事件
|
||
// ==========================================
|
||
|
||
term = new Terminal({ cursorBlink: true, theme: { background: '#1e1e1e', foreground: '#e0e0e0' }, fontFamily: 'Courier New, monospace', fontSize: 15, scrollback: 100000 });
|
||
fitAddon = new FitAddon.FitAddon();
|
||
term.loadAddon(fitAddon);
|
||
term.open(document.getElementById('terminal-container'));
|
||
fitAddon.fit();
|
||
term.writeln('Welcome to Harmonic cOS Web Terminal.');
|
||
term.writeln('Please confirm the target device above and click "連線至 CMTS"... \r\n');
|
||
|
||
term.onData((data) => {
|
||
if (ws && ws.readyState === WebSocket.OPEN) ws.send(data);
|
||
});
|
||
}
|
||
|
||
export function connectWebSocket(resetCallback) {
|
||
if (ws && ws.readyState === WebSocket.OPEN) return;
|
||
const connInfo = getGlobalConnectionInfo();
|
||
if (!connInfo) return;
|
||
|
||
if (resetCallback) resetCallback(); // 呼叫 app.js 傳進來的重置函數
|
||
|
||
// 🌟 [修復] 切換設備時，徹底清空終端機舊有畫面與緩衝區
|
||
if (term) {
|
||
term.clear();
|
||
}
|
||
|
||
term.writeln(`\x1b[33mConnecting to ${connInfo.host} via WebSocket...\x1b[0m`);
|
||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||
const wsUrl = `${protocol}//${window.location.host}/ws/terminal?host=${encodeURIComponent(connInfo.host)}&username=${encodeURIComponent(connInfo.user)}&password=${encodeURIComponent(connInfo.pass)}`;
|
||
|
||
ws = new WebSocket(wsUrl);
|
||
|
||
ws.onopen = () => {
|
||
isConnected = true;
|
||
const btnLoadTask = document.getElementById('btn-load-task');
|
||
if (btnLoadTask) {
|
||
btnLoadTask.disabled = false;
|
||
btnLoadTask.style.backgroundColor = '#c0392b';
|
||
btnLoadTask.style.cursor = 'pointer';
|
||
}
|
||
// 🌟 UX 升級：剛連上 WS 時，顯示「驗證中...」而不是直接顯示「已連線」
|
||
document.getElementById('wsStatus').textContent = `狀態：連線與驗證中...`;
|
||
document.getElementById('wsStatus').style.color = '#f39c12'; // 橘色
|
||
document.getElementById('btnConnect').style.display = 'none';
|
||
document.getElementById('btnDisconnect').style.display = 'inline-block';
|
||
document.getElementById('cmtsHost').disabled = true;
|
||
document.getElementById('cmtsUser').disabled = true;
|
||
document.getElementById('cmtsPass').disabled = true;
|
||
term.focus();
|
||
|
||
// 🌟 原有：連線成功後，自動觸發一次查詢任務的 change 事件，讓背景預載 Datalist
|
||
const queryTaskSelect = document.getElementById('queryTask');
|
||
if (queryTaskSelect) {
|
||
queryTaskSelect.dispatchEvent(new Event('change'));
|
||
}
|
||
|
||
// 🌟 新增：連線成功後，強制觸發配置任務切換，藉此啟動「正確 IP」的 SSE 監聽
|
||
const configTaskSelect = document.getElementById('configTask');
|
||
if (configTaskSelect) {
|
||
configTaskSelect.dispatchEvent(new Event('change'));
|
||
}
|
||
};
|
||
|
||
ws.onmessage = (event) => {
|
||
// 🌟 UX 升級：只要收到設備傳來的第一個字元，就代表 SSH 驗證成功，正式轉為綠色「已連線」
|
||
const statusEl = document.getElementById('wsStatus');
|
||
if (statusEl.textContent.includes('驗證中')) {
|
||
statusEl.textContent = `狀態：已連線`;
|
||
statusEl.style.color = '#27ae60'; // 綠色
|
||
}
|
||
term.write(colorizeTerminalStream(event.data));
|
||
};
|
||
|
||
ws.onclose = () => {
|
||
isConnected = false;
|
||
const btnLoadTask = document.getElementById('btn-load-task');
|
||
if (btnLoadTask) {
|
||
btnLoadTask.disabled = true;
|
||
btnLoadTask.style.backgroundColor = '#95a5a6';
|
||
btnLoadTask.style.cursor = 'not-allowed';
|
||
}
|
||
document.getElementById('wsStatus').textContent = '狀態：已斷線';
|
||
document.getElementById('wsStatus').style.color = '#c0392b';
|
||
document.getElementById('btnConnect').style.display = 'inline-block';
|
||
document.getElementById('btnDisconnect').style.display = 'none';
|
||
document.getElementById('cmtsHost').disabled = false;
|
||
document.getElementById('cmtsUser').disabled = false;
|
||
document.getElementById('cmtsPass').disabled = false;
|
||
term.writeln('\r\n\x1b[31m--- Connection Closed ---\x1b[0m\r\n');
|
||
|
||
// 🌟 關鍵修復：攔截後端傳來的 4001 錯誤碼，彈出明確的警告視窗
|
||
if (event.code === 4001) {
|
||
alert(`❌ 連線失敗！\n請檢查目標設備 IP、帳號與密碼是否正確。\n\n系統訊息: ${event.reason}`);
|
||
}
|
||
|
||
// 🌟 新增：斷線時，強制觸發配置任務切換，藉此「關閉」SSE 監聽
|
||
const configTaskSelect = document.getElementById('configTask');
|
||
if (configTaskSelect) {
|
||
configTaskSelect.dispatchEvent(new Event('change'));
|
||
}
|
||
|
||
if (resetCallback) resetCallback();
|
||
};
|
||
}
|
||
|
||
export function disconnectWebSocket() { if (ws) ws.close(); }
|
||
|
||
export function injectCommand() {
|
||
if (!ws || ws.readyState !== WebSocket.OPEN) return alert("請先點擊「連線至 CMTS」！");
|
||
const cmd = document.getElementById('fixedCmd').value;
|
||
ws.send(cmd + '\r');
|
||
term.focus();
|
||
}
|
||
|
||
export function getTerminalText() {
|
||
if (!term) return '';
|
||
try {
|
||
if (term.hasSelection()) return term.getSelection();
|
||
const buffer = term.buffer.active;
|
||
let text = '';
|
||
for (let i = 0; i < buffer.length; i++) {
|
||
const line = buffer.getLine(i);
|
||
if (line) text += line.translateToString(true) + '\n';
|
||
}
|
||
return text;
|
||
} catch (err) {
|
||
console.error("讀取終端機文字失敗:", err);
|
||
return '';
|
||
}
|
||
}
|
||
|
||
export function downloadTerminal() {
|
||
const text = getTerminalText();
|
||
if (!text.trim()) return alert("沒有內容可下載！");
|
||
try {
|
||
const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').substring(0, 19);
|
||
a.download = `cmts_terminal_log_${timestamp}.txt`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
} catch (err) {
|
||
console.error("下載失敗:", err);
|
||
}
|
||
}
|