Update templates/index.html

templates/index.html

@@ -26,6 +26,7 @@
             background-color: #1e1e1e;
             color: #ffffff;
             font-family: 'Courier New', Courier, monospace;
+            white-space: pre-wrap; /* 保留空格和换行 */
         }
         #input {
             width: calc(100% - 22px);
@@ -35,6 +36,7 @@
             background-color: #1e1e1e;
             color: #ffffff;
             font-family: 'Courier New', Courier, monospace;
+            border-radius: 4px;
         }
         button {
             padding: 10px 15px;
@@ -43,6 +45,7 @@
             border: none;
             cursor: pointer;
             margin-left: 5px;
+            border-radius: 4px;
         }
         button:hover {
             background-color: #555;
@@ -53,6 +56,7 @@
             color: #ffffff;
             padding: 20px;
             margin-top: 20px;
+            border-radius: 4px;
         }
         .dropzone .dz-message {
             color: #ffffff;
@@ -73,7 +77,9 @@
     <button onclick="sendInput()">Send</button>
 
     <h1>File Upload</h1>
-    <form action="/upload" class="dropzone" id="my-dropzone"></form>
+    <form action="/upload" class="dropzone" id="my-dropzone">
+        <div class="dz-message">Drop files here or click to upload.</div>
+    </form>
 
     <h1>File Manager</h1>
     <p><a href="/files">Go to File Manager</a></p>
@@ -83,17 +89,28 @@
         var socket = io();
 
         socket.on('output', function(data) {
-            document.getElementById('output').innerHTML += data;
+            // 使用 <pre> 标签来保留格式
+            document.getElementById('output').innerHTML += data + '\n';
             var outputDiv = document.getElementById('output');
             outputDiv.scrollTop = outputDiv.scrollHeight; // 自动滚动到最新输出
         });
 
         function sendInput() {
             var input = document.getElementById('input').value;
-            socket.emit('input', input);
-            document.getElementById('input').value = '';
+            if (input.trim() !== '') { // 确保输入不为空
+                socket.emit('input', input);
+                document.getElementById('input').value = '';
+            }
         }
 
+        // 监听输入框的键盘事件
+        document.getElementById('input').addEventListener('keydown', function(event) {
+            if (event.key === 'Enter') {
+                sendInput(); // 按下回车时执行命令
+                event.preventDefault(); // 防止表单提交
+            }
+        });
+
         // Dropzone configuration
         Dropzone.options.myDropzone = {
             paramName: "file", // The name that will be used to transfer the file