74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
|
const maxLogs = 200; // 设置最大日志数量
|
|||
|
|
const logs: string[] = [];
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 格式化时间戳的函数
|
|||
|
|
function formatDate(date: Date): string {
|
|||
|
|
const year = date.getFullYear();
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|||
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|||
|
|
|
|||
|
|
// return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
|
|||
|
|
return `${hours}:${minutes}:${seconds}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateLogDisplay() {
|
|||
|
|
const logContainer = document.getElementById('log') as HTMLElement;
|
|||
|
|
if (logContainer) {
|
|||
|
|
logContainer.innerText = logs.join('\n');
|
|||
|
|
logContainer.scrollTop = 0; // 保持滚动位置在顶部
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addLog(message: string) {
|
|||
|
|
const timestamp = formatDate(new Date()); // 使用当前时间生成时间戳
|
|||
|
|
const logMessage = `[${timestamp}] ${message}`; // 在日志消息前添加时间戳
|
|||
|
|
|
|||
|
|
logs.unshift(logMessage); // 在数组开头插入新消息
|
|||
|
|
|
|||
|
|
// 如果日志超过200条，删除最旧的一条（数组末尾的元素）
|
|||
|
|
if (logs.length > maxLogs) {
|
|||
|
|
logs.pop();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateLogDisplay();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置默认端口值
|
|||
|
|
const portInputElement = document.getElementById('port') as HTMLInputElement;
|
|||
|
|
if (portInputElement) {
|
|||
|
|
const defaultPort = window.electron.env.PORT; // 从预加载脚本中获取默认端口
|
|||
|
|
portInputElement.value = defaultPort;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.getElementById('startBtn')?.addEventListener('click', () => {
|
|||
|
|
const portElement = document.getElementById('port') as HTMLInputElement;
|
|||
|
|
const port = parseInt(portElement.value, 10);
|
|||
|
|
window.electron.startWebSocket(port);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.getElementById('stopBtn')?.addEventListener('click', () => {
|
|||
|
|
window.electron.stopWebSocket();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.getElementById('devToolsBtn')?.addEventListener('click', () => {
|
|||
|
|
window.electron.openDevTools();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
window.electron.onWebSocketStatus((message: string) => {
|
|||
|
|
console.log(`WebSocket status: ${message}`);
|
|||
|
|
const statusElement = document.getElementById('status');
|
|||
|
|
if (statusElement) {
|
|||
|
|
statusElement.innerText = `Status: ${message}`;
|
|||
|
|
}
|
|||
|
|
addLog(message); // 將 WebSocket 狀態消息添加到日誌顯示區
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听主进程发送的日志消息
|
|||
|
|
window.electron.onLogMessage((message: string) => {
|
|||
|
|
addLog(message); // 將日誌消息添加到顯示區
|
|||
|
|
});
|