ok

output.txt

@@ -1,463 +0,0 @@
-文件名：/workspaces/hf-exec/exec/Dockerfile
-文件内容：
-FROM node:20
-
-ARG ADMIN_USERNAME=admin
-ARG ADMIN_PASSWORD=password
-
-WORKDIR /app
-
-COPY package*.json ./
-
-RUN npm install
-
-COPY . .
-
-RUN mkdir -p /app/data && chown -R node:node /app /app/data
-
-EXPOSE 7860
-
-ENV ADMIN_USERNAME=${ADMIN_USERNAME}
-ENV ADMIN_PASSWORD=${ADMIN_PASSWORD}
-
-CMD ["node", "app.js"]
-
---------------------------------------------------
-
-文件名：/workspaces/hf-exec/exec/package.json
-文件内容：
-{
-    "name": "web-command-executor",
-    "version": "1.2.0",
-    "main": "app.js",
-    "scripts": {
-        "start": "node app.js",
-        "dev": "nodemon app.js",
-        "lint": "eslint .",
-        "test": "jest"
-    },
-    "dependencies": {
-        "express": "^4.17.1",
-        "winston": "^3.3.3",
-        "helmet": "^4.6.0",
-        "express-rate-limit": "^5.3.0",
-        "jsonwebtoken": "^8.5.1"
-    },
-    "devDependencies": {
-        "nodemon": "^2.0.7",
-        "eslint": "^7.32.0",
-        "jest": "^27.0.6"
-    },
-    "engines": {
-        "node": ">=18.0.0"
-    }
-}
-
---------------------------------------------------
-
-文件名：/workspaces/hf-exec/exec/app.js
-文件内容：
-const express = require('express');
-const winston = require('winston');
-const fs = require('fs').promises;
-const path = require('path');
-const rateLimit = require('express-rate-limit');
-const { promises: fsPromises } = require('fs');
-const helmet = require('helmet');
-const jwt = require('jsonwebtoken');
-
-const app = express();
-const port = process.env.PORT || 7860;
-
-// 配置日志记录器
-const logger = winston.createLogger({
-    level: process.env.LOG_LEVEL || 'info',
-    format: winston.format.combine(
-        winston.format.timestamp(),
-        winston.format.json()
-    ),
-    transports: [
-        new winston.transports.File({ filename: 'error.log', level: 'error' }),
-        new winston.transports.File({ filename: 'combined.log' })
-    ]
-});
-
-if (process.env.NODE_ENV !== 'production') {
-    logger.add(new winston.transports.Console({
-        format: winston.format.simple()
-    }));
-}
-
-// 安全中间件
-app.use(helmet());
-
-// 速率限制
-const limiter = rateLimit({
-    windowMs: 15 * 60 * 1000, // 15分钟
-    max: 100 // 每个IP限制100个请求
-});
-app.use('/api', limiter);
-
-app.use(express.json());
-app.use(express.static('public'));
-
-// JWT 密钥
-const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';
-
-// 中间件：验证 JWT
-const authenticateJWT = (req, res, next) => {
-    const authHeader = req.headers.authorization;
-
-    if (authHeader) {
-        const token = authHeader.split(' ')[1];
-
-        jwt.verify(token, JWT_SECRET, (err, user) => {
-            if (err) {
-                return res.sendStatus(403);
-            }
-
-            req.user = user;
-            next();
-        });
-    } else {
-        res.sendStatus(401);
-    }
-};
-
-// 路由
-const authRoutes = require('./routes/auth');
-const commandRoutes = require('./routes/command');
-
-app.use('/api', authRoutes);
-app.use('/api', authenticateJWT, commandRoutes);
-
-// 错误处理中间件
-app.use((err, req, res, next) => {
-    logger.error(`未捕获的错误: ${err.message}`);
-    res.status(500).json({ error: '服务器内部错误' });
-});
-
-// 确保命令历史文件存在
-const historyFilePath = path.join(__dirname, 'data', 'command_history.json');
-fsPromises.access(historyFilePath)
-    .catch(() => fsPromises.writeFile(historyFilePath, '[]'))
-    .then(() => {
-        app.listen(port, () => {
-            logger.info(`Web 命令执行应用正在监听 http://localhost:${port}`);
-        });
-    })
-    .catch(err => {
-        logger.error('无法创建命令历史文件:', err);
-        process.exit(1);
-    });
-
---------------------------------------------------
-
-文件名：/workspaces/hf-exec/exec/utils/logger.js
-文件内容：
-const winston = require('winston');
-
-const logger = winston.createLogger({
-    level: process.env.LOG_LEVEL || 'info',
-    format: winston.format.combine(
-        winston.format.timestamp(),
-        winston.format.json()
-    ),
-    transports: [
-        new winston.transports.File({ filename: 'error.log', level: 'error' }),
-        new winston.transports.File({ filename: 'combined.log' })
-    ]
-});
-
-if (process.env.NODE_ENV !== 'production') {
-    logger.add(new winston.transports.Console({
-        format: winston.format.simple()
-    }));
-}
-
-module.exports = logger;
-
---------------------------------------------------
-
-文件名：/workspaces/hf-exec/exec/routes/command.js
-文件内容：
-const express = require('express');
-const { execFile } = require('child_process');
-const fs = require('fs').promises;
-const path = require('path');
-const router = express.Router();
-
-const logger = require('../utils/logger');
-
-// 命令白名单
-const allowedCommands = ['ls', 'pwd', 'whoami', 'date', 'echo', 'cat'];
-
-// 历史命令文件路径
-const historyFilePath = path.join(__dirname, '..', 'data', 'command_history.json');
-
-router.get('/command-history', async (req, res) => {
-    try {
-        let history = [];
-        try {
-            const historyData = await fs.readFile(historyFilePath, 'utf-8');
-            history = JSON.parse(historyData);
-        } catch (readError) {
-            logger.warn('读取命令历史失败,使用空数组:', readError);
-        }
-        res.json(history);
-    } catch (error) {
-        logger.error('处理命令历史请求失败:', error);
-        res.status(500).json({ error: '无法读取命令历史' });
-    }
-});
-
-router.post('/execute', async (req, res) => {
-    const { command } = req.body;
-    const baseCommand = command.split(' ')[0];
-
-    // 白名单检查的部分
-    // if (!allowedCommands.includes(baseCommand)) {
-    //     logger.warn(`用户 ${req.user.username} 尝试执行未授权的命令: ${command}`);
-    //     return res.status(403).json({ error: '未授权的命令' });
-    // }
-
-    execFile(baseCommand, command.split(' ').slice(1), { timeout: 5000 }, async (error, stdout, stderr) => {
-        if (error) {
-            logger.error(`命令执行错误: ${error.message}`);
-            return res.status(500).json({ error: error.message });
-        }
-
-        // 记录命令历史
-        try {
-            let history = [];
-            try {
-                const historyData = await fs.readFile(historyFilePath, 'utf-8');
-                history = JSON.parse(historyData);
-            } catch (readError) {
-                // 如果文件不存在或为空，使用空数组
-            }
-
-            history.push({ command, timestamp: new Date().toISOString(), user: req.user.username });
-            if (history.length > 100) history.shift(); // 保留最近100条命令
-
-            await fs.writeFile(historyFilePath, JSON.stringify(history, null, 2));
-        } catch (writeError) {
-            logger.error('写入命令历史失败:', writeError);
-        }
-
-        logger.info(`用户 ${req.user.username} 成功执行命令: ${command}`);
-        res.json({ output: stdout, error: stderr });
-    });
-});
-
-module.exports = router;
-
---------------------------------------------------
-
-文件名：/workspaces/hf-exec/exec/routes/auth.js
-文件内容：
-const express = require('express');
-const jwt = require('jsonwebtoken');
-const router = express.Router();
-
-const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';
-
-const users = [
-    {
-        id: 1,
-        username: process.env.ADMIN_USERNAME,
-        password: process.env.ADMIN_PASSWORD
-    }
-];
-
-router.post('/login', (req, res) => {
-    const { username, password } = req.body;
-    const user = users.find(u => u.username === username && u.password === password);
-
-    if (user) {
-        const token = jwt.sign({ id: user.id, username: user.username }, JWT_SECRET, { expiresIn: '1h' });
-        res.json({ token });
-    } else {
-        res.status(401).json({ error: '无效的用户名或密码' });
-    }
-});
-
-module.exports = router;
-
---------------------------------------------------
-
-文件名：/workspaces/hf-exec/exec/public/index.html
-文件内容：
-<!DOCTYPE html>
-<html lang="zh-CN">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Web 命令执行</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xss.min.js"></script>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
-
-        body {
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-    </style>
-</head>
-
-<body class="bg-gradient-to-r from-blue-100 to-purple-100 min-h-screen flex items-center justify-center">
-    <div class="max-w-2xl w-full mx-auto bg-white p-8 rounded-lg shadow-xl">
-        <h1 class="text-4xl font-bold mb-6 text-center text-blue-600">Web 命令执行</h1>
-
-        <div id="loginForm" class="space-y-4">
-            <input type="text" id="username" placeholder="用户名"
-                class="p-3 border rounded w-full focus:ring-2 focus:ring-blue-300 transition">
-            <input type="password" id="password" placeholder="密码"
-                class="p-3 border rounded w-full focus:ring-2 focus:ring-blue-300 transition">
-            <button id="loginButton"
-                class="w-full bg-blue-500 text-white px-4 py-3 rounded hover:bg-blue-600 transition">登录</button>
-        </div>
-
-        <div id="commandInterface" style="display: none;" class="space-y-6">
-            <p class="text-gray-600">此应用允许您在服务器上执行命令。请在下方输入命令并点击"执行"或按回车键。</p>
-            <div class="flex">
-                <input type="text" id="command" placeholder="输入命令"
-                    class="flex-grow p-3 border rounded-l focus:outline-none focus:ring-2 focus:ring-blue-300 transition">
-                <button id="executeButton"
-                    class="bg-green-500 text-white px-6 py-3 rounded-r hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 transition">执行</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-blue-500"></div>
-            </div>
-            <div id="output" class="bg-gray-100 p-4 rounded h-64 overflow-y-auto font-mono text-sm"></div>
-            <div>
-                <h2 class="text-2xl font-bold mb-3 text-blue-600">命令历史</h2>
-                <ul id="history" class="list-disc pl-5 space-y-2 text-gray-700"></ul>
-            </div>
-        </div>
-    </div>
-
-    <script src="/js/main.js"></script>
-</body>
-
-</html>
-
---------------------------------------------------
-
-文件名：/workspaces/hf-exec/exec/public/js/main.js
-文件内容：
-const commandInput = document.getElementById('command');
-const output = document.getElementById('output');
-const history = document.getElementById('history');
-const executeButton = document.getElementById('executeButton');
-const loadingIndicator = document.getElementById('loadingIndicator');
-
-commandInput.addEventListener('keypress', function (event) {
-    if (event.key === 'Enter') {
-        executeCommand();
-    }
-});
-
-async function executeCommand() {
-    const command = commandInput.value;
-    if (!command.trim()) return;
-
-    showLoading(true);
-    output.textContent = '正在执行命令...';
-
-    try {
-        const response = await fetch('/api/execute', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${localStorage.getItem('token')}`
-            },
-            body: JSON.stringify({ command })
-        });
-        const data = await response.json();
-        if (response.ok) {
-            output.textContent = data.output || data.error;
-            commandInput.value = '';
-            loadCommandHistory();
-        } else {
-            output.textContent = `错误: ${data.error}`;
-        }
-    } catch (error) {
-        output.textContent = '错误: ' + error.message;
-    } finally {
-        showLoading(false);
-    }
-}
-
-async function loadCommandHistory() {
-    try {
-        const response = await fetch('/api/command-history', {
-            headers: {
-                'Authorization': `Bearer ${localStorage.getItem('token')}`
-            }
-        });
-        const data = await response.json();
-        history.innerHTML = '';
-        data.reverse().forEach(item => {
-            const li = document.createElement('li');
-            li.textContent = `${filterXSS(item.command)} (${new Date(item.timestamp).toLocaleString()})`;
-            li.className = 'cursor-pointer hover:text-blue-500';
-            li.onclick = () => {
-                commandInput.value = item.command;
-            };
-            history.appendChild(li);
-        });
-    } catch (error) {
-        console.error('加载命令历史失败:', error);
-    }
-}
-
-function showLoading(isLoading) {
-    loadingIndicator.style.display = isLoading ? 'block' : 'none';
-    executeButton.disabled = isLoading;
-}
-
-async function login() {
-    const username = document.getElementById('username').value;
-    const password = document.getElementById('password').value;
-    try {
-        const response = await fetch('/api/login', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ username, password })
-        });
-        const data = await response.json();
-        if (response.ok) {
-            localStorage.setItem('token', data.token);
-            document.getElementById('loginForm').style.display = 'none';
-            document.getElementById('commandInterface').style.display = 'block';
-            loadCommandHistory();
-        } else {
-            alert('登录失败: ' + data.error);
-        }
-    } catch (error) {
-        alert('登录错误: ' + error.message);
-    }
-}
-
-document.getElementById('loginButton').addEventListener('click', login);
-
-loadCommandHistory();
-
-function checkLoginStatus() {
-    const token = localStorage.getItem('token');
-    if (token) {
-        document.getElementById('loginForm').style.display = 'none';
-        document.getElementById('commandInterface').style.display = 'block';
-        loadCommandHistory();
-    }
-}
-
-// 在页面加载时调用此函数
-window.addEventListener('load', checkLoginStatus);
-
-document.getElementById('executeButton').addEventListener('click', executeCommand);
-
---------------------------------------------------
-

public/index.html

@@ -4,45 +4,47 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Web 命令执行</title>
+    <title>Web 命令执行器</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xss.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
-
         body {
-            font-family: 'Noto Sans SC', sans-serif;
+            font-family: 'Inter', sans-serif;
         }
     </style>
 </head>
 
-<body class="bg-gradient-to-r from-blue-100 to-purple-100 min-h-screen flex items-center justify-center">
-    <div class="max-w-2xl w-full mx-auto bg-white p-8 rounded-lg shadow-xl">
-        <h1 class="text-4xl font-bold mb-6 text-center text-blue-600">Web 命令执行</h1>
+<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 w-full focus:ring-2 focus:ring-blue-300 transition">
+                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 w-full focus:ring-2 focus:ring-blue-300 transition">
+                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-blue-500 text-white px-4 py-3 rounded hover:bg-blue-600 transition">登录</button>
+                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">此应用允许您在服务器上执行命令。请在下方输入命令并点击"执行"或按回车键。</p>
+            <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 focus:outline-none focus:ring-2 focus:ring-blue-300 transition">
+                    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 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 transition">执行</button>
+                    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-blue-500"></div>
+                <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 h-64 overflow-y-auto font-mono text-sm"></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-blue-600">命令历史</h2>
+                <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>

public/js/main.js

@@ -28,10 +28,8 @@ async function executeCommand() {
         });
 
         if (response.status === 403) {
-            // Token 可能已过期，尝试刷新
             const refreshed = await refreshToken();
             if (refreshed) {
-                // 重试请求
                 response = await fetch('/api/execute', {
                     method: 'POST',
                     headers: {
@@ -50,14 +48,14 @@ async function executeCommand() {
         }
 
         const data = await response.json();
-        output.textContent = data.output || data.error || '命令执行成功，但没有输出。';
+        output.innerHTML = formatOutput(data.output || data.error || '命令执行成功，但没有输出。');
         commandInput.value = '';
         loadCommandHistory();
     } catch (error) {
         console.error('执行命令时出错:', error);
-        output.textContent = '错误: ' + (error.message || '未知错误');
+        output.innerHTML = formatOutput('错误: ' + (error.message || '未知错误'));
         if (error.message.includes('Token 刷新失败')) {
-            alert('访问被拒绝。请重新登录。');
+            showNotification('访问被拒绝。请重新登录。', 'error');
             localStorage.removeItem('token');
             localStorage.removeItem('username');
             localStorage.removeItem('password');
@@ -68,6 +66,10 @@ async function executeCommand() {
     }
 }
 
+function formatOutput(text) {
+    return text.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
+}
+
 async function loadCommandHistory() {
     try {
         const response = await fetch('/api/command-history', {
@@ -79,22 +81,23 @@ async function loadCommandHistory() {
         history.innerHTML = '';
         data.reverse().forEach(item => {
             const li = document.createElement('li');
-            li.textContent = `${filterXSS(item.command)} (${new Date(item.timestamp).toLocaleString()})`;
-            li.className = 'cursor-pointer hover:text-blue-500';
+            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 = () => {
-                console.log(`Clicked on command: ${item.command}`); // 添加调试信息
                 commandInput.value = item.command;
             };
             history.appendChild(li);
         });
     } catch (error) {
         console.error('加载命令历史失败:', error);
+        showNotification('加载命令历史失败', 'error');
     }
 }
 
 function showLoading(isLoading) {
     loadingIndicator.style.display = isLoading ? 'block' : 'none';
     executeButton.disabled = isLoading;
+    executeButton.classList.toggle('opacity-50', isLoading);
 }
 
 async function login() {
@@ -114,11 +117,12 @@ async function login() {
             document.getElementById('loginForm').style.display = 'none';
             document.getElementById('commandInterface').style.display = 'block';
             loadCommandHistory();
+            showNotification('登录成功', 'success');
         } else {
-            alert('登录失败: ' + data.error);
+            showNotification('登录失败: ' + data.error, 'error');
         }
     } catch (error) {
-        alert('登录错误: ' + error.message);
+        showNotification('登录错误: ' + error.message, 'error');
     }
 }
 
@@ -126,7 +130,6 @@ async function refreshToken() {
     const username = localStorage.getItem('username');
     const password = localStorage.getItem('password');
     if (!username || !password) {
-        // 如果没有保存的凭据，重定向到登录页面
         document.getElementById('loginForm').style.display = 'block';
         document.getElementById('commandInterface').style.display = 'none';
         return;
@@ -150,9 +153,18 @@ async function refreshToken() {
     }
 }
 
-document.getElementById('loginButton').addEventListener('click', login);
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.textContent = message;
+    notification.className = `fixed top-4 right-4 p-4 rounded-lg text-white ${type === 'error' ? 'bg-red-500' : 'bg-green-500'} shadow-lg transition-opacity duration-300`;
+    document.body.appendChild(notification);
+    setTimeout(() => {
+        notification.style.opacity = '0';
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}
 
-loadCommandHistory();
+document.getElementById('loginButton').addEventListener('click', login);
 
 function checkLoginStatus() {
     const token = localStorage.getItem('token');
@@ -163,6 +175,5 @@ function checkLoginStatus() {
     }
 }
 
-// 在页面加载时调用此函数
 window.addEventListener('load', checkLoginStatus);
 document.getElementById('executeButton').addEventListener('click', executeCommand);