Spaces:

hijnu
/

exec

Paused

App Files Files Community

aigems commited on Sep 23, 2024

Commit

8801327

1 Parent(s): 246bcdf

ok

Browse files

Files changed (2) hide show

public/index.html +41 -16
public/js/main.js +44 -8

public/index.html CHANGED Viewed

@@ -7,45 +7,70 @@
     <title>Web 命令执行器</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/xss@1.0.14/dist/xss.min.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
     <style>
         body {
             font-family: 'Inter', sans-serif;
         }
     </style>
 </head>
 <body
-    class="bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 min-h-screen flex items-center justify-center p-4">
     <div
-        class="max-w-2xl w-full mx-auto bg-white p-8 rounded-2xl shadow-2xl transition-all duration-300 ease-in-out hover:shadow-3xl">
-        <h1 class="text-4xl font-bold mb-6 text-center text-indigo-600 tracking-tight">Web 命令执行器</h1>
-        <div id="loginForm" class="space-y-4">
             <input type="text" id="username" placeholder="用户名"
-                class="p-3 border rounded-lg w-full focus:ring-2 focus:ring-indigo-300 transition-all duration-200 ease-in-out">
             <input type="password" id="password" placeholder="密码"
-                class="p-3 border rounded-lg w-full focus:ring-2 focus:ring-indigo-300 transition-all duration-200 ease-in-out">
             <button id="loginButton"
-                class="w-full bg-indigo-500 text-white px-4 py-3 rounded-lg hover:bg-indigo-600 transition-all duration-200 ease-in-out transform hover:scale-105">登录</button>
         </div>
-        <div id="commandInterface" style="display: none;" class="space-y-6">
-            <p class="text-gray-600 text-center">在下方输入命令并点击"执行"或按回车键来在服务器上执行命令。</p>
             <div class="flex">
                 <input type="text" id="command" placeholder="输入命令"
-                    class="flex-grow p-3 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 transition-all duration-200 ease-in-out">
                 <button id="executeButton"
-                    class="bg-green-500 text-white px-6 py-3 rounded-r-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 transition-all duration-200 ease-in-out transform hover:scale-105">执行</button>
             </div>
             <div id="loadingIndicator" class="text-center" style="display: none;">
-                <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-indigo-500">
                 </div>
             </div>
-            <div id="output" class="bg-gray-100 p-4 rounded-lg h-64 overflow-y-auto font-mono text-sm"></div>
             <div>
-                <h2 class="text-2xl font-bold mb-3 text-indigo-600">命令历史</h2>
-                <ul id="history" class="list-disc pl-5 space-y-2 text-gray-700"></ul>
             </div>
         </div>
     </div>

     <title>Web 命令执行器</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/xss@1.0.14/dist/xss.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Fira+Code&display=swap"
+        rel="stylesheet">
     <style>
         body {
             font-family: 'Inter', sans-serif;
         }
+        .terminal {
+            font-family: 'Fira Code', monospace;
+        }
+        @keyframes glow {
+            0% {
+                box-shadow: 0 0 5px rgba(66, 153, 225, 0.5);
+            }
+            50% {
+                box-shadow: 0 0 20px rgba(66, 153, 225, 0.8);
+            }
+            100% {
+                box-shadow: 0 0 5px rgba(66, 153, 225, 0.5);
+            }
+        }
+        .glow-effect {
+            animation: glow 2s infinite;
+        }
     </style>
 </head>
 <body
+    class="bg-gradient-to-br from-gray-900 via-blue-900 to-blue-700 min-h-screen flex items-center justify-center p-4">
     <div
+        class="max-w-4xl w-full mx-auto bg-gray-800 p-8 rounded-3xl shadow-2xl transition-all duration-300 ease-in-out hover:shadow-3xl border border-blue-500">
+        <h1 class="text-5xl font-bold mb-8 text-center text-blue-400 tracking-tight glow-effect">Web 命令执行器</h1>
+        <div id="loginForm" class="space-y-6">
             <input type="text" id="username" placeholder="用户名"
+                class="p-4 border-2 border-blue-500 rounded-lg w-full bg-gray-700 text-white focus:ring-2 focus:ring-blue-300 transition-all duration-200 ease-in-out placeholder-gray-400">
             <input type="password" id="password" placeholder="密码"
+                class="p-4 border-2 border-blue-500 rounded-lg w-full bg-gray-700 text-white focus:ring-2 focus:ring-blue-300 transition-all duration-200 ease-in-out placeholder-gray-400">
             <button id="loginButton"
+                class="w-full bg-blue-600 text-white px-6 py-4 rounded-lg hover:bg-blue-700 transition-all duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">登录</button>
         </div>
+        <div id="commandInterface" style="display: none;" class="space-y-8">
+            <p class="text-blue-300 text-center text-lg">在下方输入命令并点击"执行"或按回车键来在服务器上执行命令。</p>
             <div class="flex">
                 <input type="text" id="command" placeholder="输入命令"
+                    class="flex-grow p-4 border-2 border-blue-500 rounded-l-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all duration-200 ease-in-out placeholder-gray-400 terminal">
                 <button id="executeButton"
+                    class="bg-green-500 text-white px-8 py-4 rounded-r-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 transition-all duration-200 ease-in-out transform hover:scale-105">执行</button>
             </div>
             <div id="loadingIndicator" class="text-center" style="display: none;">
+                <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-blue-500">
                 </div>
             </div>
+            <div id="output"
+                class="bg-gray-900 p-6 rounded-lg h-80 overflow-y-auto terminal text-green-400 text-sm leading-relaxed">
+            </div>
             <div>
+                <h2 class="text-3xl font-bold mb-4 text-blue-400">命令历史</h2>
+                <ul id="history" class="space-y-2 text-gray-300"></ul>
             </div>
         </div>
     </div>

public/js/main.js CHANGED Viewed

@@ -15,7 +15,8 @@ async function executeCommand() {
     if (!command.trim()) return;
     showLoading(true);
-    output.textContent = '正在执行命令...';
     try {
         let response = await fetch('/api/execute', {
@@ -48,12 +49,12 @@ async function executeCommand() {
         }
         const data = await response.json();
-        output.innerHTML = formatOutput(data.output || data.error || '命令执行成功，但没有输出。');
         commandInput.value = '';
         loadCommandHistory();
     } catch (error) {
         console.error('执行命令时出错:', error);
-        output.innerHTML = formatOutput('错误: ' + (error.message || '未知错误'));
         if (error.message.includes('Token 刷新失败')) {
             showNotification('访问被拒绝。请重新登录。', 'error');
             localStorage.removeItem('token');
@@ -66,8 +67,15 @@ async function executeCommand() {
     }
 }
-function formatOutput(text) {
-    return text.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
 }
 async function loadCommandHistory() {
@@ -78,13 +86,21 @@ async function loadCommandHistory() {
             }
         });
         const data = await response.json();
         history.innerHTML = '';
         data.reverse().forEach(item => {
             const li = document.createElement('li');
-            li.innerHTML = `<span class="font-semibold">${filterXSS(item.command)}</span> <span class="text-sm text-gray-500">(${new Date(item.timestamp).toLocaleString()})</span>`;
-            li.className = 'cursor-pointer hover:text-indigo-500 transition-colors duration-200';
             li.onclick = () => {
                 commandInput.value = item.command;
             };
             history.appendChild(li);
         });
@@ -176,4 +192,24 @@ function checkLoginStatus() {
 }
 window.addEventListener('load', checkLoginStatus);
-document.getElementById('executeButton').addEventListener('click', executeCommand);

     if (!command.trim()) return;
     showLoading(true);
+    appendToOutput('$ ' + command, 'text-blue-400');
+    appendToOutput('正在执行命令...', 'text-yellow-400');
     try {
         let response = await fetch('/api/execute', {
         }
         const data = await response.json();
+        appendToOutput(data.output || data.error || '命令执行成功，但没有输出。', 'text-green-400');
         commandInput.value = '';
         loadCommandHistory();
     } catch (error) {
         console.error('执行命令时出错:', error);
+        appendToOutput('错误: ' + (error.message || '未知错误'), 'text-red-500');
         if (error.message.includes('Token 刷新失败')) {
             showNotification('访问被拒绝。请重新登录。', 'error');
             localStorage.removeItem('token');
     }
 }
+function appendToOutput(text, className = 'text-green-400') {
+    const lines = text.split('\n');
+    lines.forEach((line, index) => {
+        const p = document.createElement('p');
+        p.className = className;
+        p.textContent = line;
+        output.appendChild(p);
+    });
+    output.scrollTop = output.scrollHeight;
 }
 async function loadCommandHistory() {
             }
         });
         const data = await response.json();
+        console.log('命令历史数据:', data); // 添加调试信息
         history.innerHTML = '';
         data.reverse().forEach(item => {
             const li = document.createElement('li');
+            li.innerHTML = `
+                <div class="flex justify-between items-center p-2 hover:bg-gray-700 rounded transition-colors duration-200">
+                    <span class="font-semibold text-blue-400">${filterXSS(item.command)}</span>
+                    <span class="text-sm text-gray-500">${new Date(item.timestamp).toLocaleString()}</span>
+                </div>
+            `;
+            li.className = 'cursor-pointer';
             li.onclick = () => {
+                console.log(`Clicked on command: ${item.command}`); // 添加调试信息
                 commandInput.value = item.command;
+                commandInput.focus();
             };
             history.appendChild(li);
         });
 }
 window.addEventListener('load', checkLoginStatus);
+document.getElementById('executeButton').addEventListener('click', executeCommand);
+// 添加打字机效果
+function typeWriter(element, text, speed = 50) {
+    let i = 0;
+    function type() {
+        if (i < text.length) {
+            element.textContent += text.charAt(i);
+            i++;
+            setTimeout(type, speed);
+        }
+    }
+    type();
+}
+// 在页面加载时添加一些酷炫的效果
+window.addEventListener('load', () => {
+    const title = document.querySelector('h1');
+    title.textContent = '';
+    typeWriter(title, 'Web 命令执行器', 100);
+});