diff --git a/web/process.html b/web/process.html index 266c736..a37fa5f 100644 --- a/web/process.html +++ b/web/process.html @@ -87,41 +87,7 @@ } .input-area { - background: #16213e; - padding: 10px 20px; - border-top: 1px solid #0f3460; - display: flex; - gap: 10px; - } - - .input-area input { - flex: 1; - padding: 8px 12px; - border: 1px solid #0f3460; - border-radius: 4px; - background: #1a1a2e; - color: #eee; - font-size: 14px; - font-family: 'Consolas', 'Monaco', monospace; - } - - .input-area input:focus { - outline: none; - border-color: #e94560; - } - - .input-area button { - padding: 8px 16px; - background: #e94560; - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 12px; - } - - .input-area button:hover { - background: #ff6b6b; + display: none; } .loading { @@ -152,7 +118,6 @@
-
正在连接游戏服务器...
@@ -167,6 +132,7 @@ let fitAddon = null; let ws = null; let connected = false; + let inputBuffer = ''; // 缓存用户输入 // 初始化终端 function initTerminal() { @@ -176,8 +142,8 @@ cursorBlink: true, fontSize: 14, fontFamily: '"Source Code Pro", "Courier New", monospace', - letterSpacing: 0, // 禁用自动间距调整 - lineHeight: 1.2, // 调整行高 + letterSpacing: 0, + lineHeight: 1.3, theme: { background: '#1a1a2e', foreground: '#eee', @@ -211,11 +177,49 @@ terminal.open(document.getElementById('terminal')); fitAddon.fit(); + // 监听终端输入事件 + terminal.onData((data) => { + // 处理输入 + if (data === '\r' || data === '\n') { + // 用户按了回车 + if (inputBuffer) { + sendInput(); + } + } else if (data === '\u007F') { + // 处理退格键 + if (inputBuffer.length > 0) { + inputBuffer = inputBuffer.slice(0, -1); + terminal.write('\b \b'); + } + } else if (data === '\u0003') { + // Ctrl+C - 中断 + inputBuffer = ''; + terminal.write('^C\r\n'); + } else { + // 普通字符 + inputBuffer += data; + terminal.write(data); + } + }); + window.addEventListener('resize', () => { fitAddon.fit(); }); } + // 发送输入到服务器 + function sendInput() { + if (!inputBuffer) return; + + const input = inputBuffer; + inputBuffer = ''; + + sendMessage({ + type: 'input', + input: input + }); + } + // 连接WebSocket function connectWebSocket() { const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'; @@ -233,13 +237,9 @@ terminal.clear(); terminal.writeln('\x1b[32m[✓] WebSocket 连接成功,游戏进程已启动\x1b[0m'); terminal.writeln(''); + terminal.focus(); // 设置终端焦点以接收输入 } - // 启用输入 - document.getElementById('game-input').disabled = false; - document.getElementById('send-btn').disabled = false; - document.getElementById('game-input').focus(); - // 启动心跳 startHeartbeat(); }; @@ -279,8 +279,11 @@ } switch (data.type) { case 'output': - // 进程输出 - 直接写入,游戏进程负责清屏 - terminal.write(data.text); + terminal.clear(); + const lines = data.text.split('\n'); + lines.forEach(line => { + terminal.writeln(line); + }); break; case 'system': @@ -312,28 +315,6 @@ return true; } - // 发送输入 - function sendInput() { - const inputEl = document.getElementById('game-input'); - const input = inputEl.value; - inputEl.value = ''; - - if (!input) return; - - // 立即在终端显示用户输入(带换行) - if (terminal) { - terminal.writeln(input); - } - - // 发送到服务器 - sendMessage({ - type: 'input', - input: input - }); - - inputEl.focus(); - } - // 断开连接 function disconnect() { if (ws) { @@ -356,13 +337,6 @@ } } - // 键盘处理 - document.addEventListener('keypress', (e) => { - if (e.key === 'Enter' && document.activeElement.id === 'game-input') { - sendInput(); - } - }); - // 心跳保活 function startHeartbeat() { setInterval(() => {