Update from GitHub Actions

Dockerfile

@@ -39,23 +39,28 @@ COPY cookies.json ./
 COPY execute-command.js ./
 COPY login.js ./
 COPY scheduler.js ./
+COPY web-server.js ./
+COPY start-services.js ./
+COPY test-web-server.js ./
 COPY utils/ ./utils/
 
-# 创建 screenshots 目录
-RUN mkdir -p screenshots
+# 创建 screenshots 和 logs 目录
+RUN mkdir -p screenshots logs
 
 # 设置非 root 用户（安全最佳实践）
 RUN addgroup -g 1001 -S nodejs && \
     adduser -S nodejs -u 1001
 
-# 更改文件所有权
-RUN chown -R nodejs:nodejs /app
+# 更改文件所有权，包括新创建的目录
+RUN chown -R nodejs:nodejs /app && \
+    chmod -R 755 /app/screenshots && \
+    chmod -R 755 /app/logs
 
 # 切换到非 root 用户
 USER nodejs
 
-# 暴露端口（如果需要的话，这里暂时不暴露）
-# EXPOSE 3000
+# 暴露端口 7860 用于 Web 服务器
+EXPOSE 7860
 
-# 设置默认命令
-CMD ["npm", "run", "scheduler"]
+# 设置默认命令 - 启动 Web 服务器
+CMD ["npm", "start"]

config.js

@@ -45,13 +45,13 @@ const config = {
     dialogButton: '.monaco-dialog-modal-block .dialog-buttons a.monaco-button',
     terminals: [
       '.terminal',
-      '.xterm',
-      '.console',
-      '.terminal-container',
-      '.xterm-screen',
-      '.monaco-workbench .part.panel .terminal',
-      '[data-testid="terminal"]',
-      '.integrated-terminal'
+      // '.xterm',
+      // '.console',
+      // '.terminal-container',
+      // '.xterm-screen',
+      // '.monaco-workbench .part.panel .terminal',
+      // '[data-testid="terminal"]',
+      // '.integrated-terminal'
     ],
   }
 };

package-lock.json

@@ -9,10 +9,24 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@hono/node-server": "^1.14.2",
         "dotenv": "^16.5.0",
+        "hono": "^4.7.10",
         "playwright": "^1.52.0"
       }
     },
+    "node_modules/@hono/node-server": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmmirror.com/@hono/node-server/-/node-server-1.14.2.tgz",
+      "integrity": "sha512-GHjpOeHYbr9d1vkID2sNUYkl5IxumyhDrUJB7wBp7jvqYwPFt+oNKsAPBRcdSbV7kIrXhouLE199ks1QcK4r7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "hono": "^4"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.5.0",
       "resolved": "https://registry.npmmirror.com/dotenv/-/dotenv-16.5.0.tgz",
@@ -39,6 +53,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/hono": {
+      "version": "4.7.10",
+      "resolved": "https://registry.npmmirror.com/hono/-/hono-4.7.10.tgz",
+      "integrity": "sha512-QkACju9MiN59CKSY5JsGZCYmPZkA6sIW6OFCUp7qDjZu6S6KHtJHhAc9Uy9mV9F8PJ1/HQ3ybZF2yjCa/73fvQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.9.0"
+      }
+    },
     "node_modules/playwright": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/playwright/-/playwright-1.52.0.tgz",

package.json

@@ -6,14 +6,19 @@
   "scripts": {
     "login": "node login.js",
     "execute": "node execute-command.js",
-    "scheduler": "node scheduler.js"
+    "scheduler": "node scheduler.js",
+    "web-server": "node web-server.js",
+    "start": "node start-services.js",
+    "start-web-only": "node web-server.js"
   },
   "keywords": ["playwright", "automation", "webide"],
   "author": "",
   "license": "ISC",
   "type": "module",
   "dependencies": {
+    "@hono/node-server": "^1.13.7",
     "dotenv": "^16.5.0",
+    "hono": "^4.6.12",
     "playwright": "^1.52.0"
   }
 }

scheduler.js

@@ -1,12 +1,12 @@
 import config from './config.js';
 import { fileURLToPath } from 'url';
 import path from 'path';
-import { checkCookieFile, getHumanReadableTimestamp } from './utils/common-utils.js';
+import { checkCookieFile, getHumanReadableTimestamp, log, logError } from './utils/common-utils.js';
 import { createBrowserSession, navigateToWebIDE, executeCommandFlow } from './utils/webide-utils.js';
 
 // 执行单次命令的函数
 async function executeCommandOnce(page) {
-  console.log(`[${getHumanReadableTimestamp()}] 开始执行命令...`);
+  log(`[${getHumanReadableTimestamp()}] 开始执行命令...`);
   return executeCommandFlow(page, 'scheduler');
 }
 
@@ -17,9 +17,9 @@ async function startScheduler() {
     return;
   }
 
-  console.log(`[${getHumanReadableTimestamp()}] 启动调度器...`);
+  log(`[${getHumanReadableTimestamp()}] 启动调度器...`);
   const intervalSeconds = Math.round(config.schedulerInterval / 1000);
-  console.log(`调度器将每${intervalSeconds}秒执行一次命令以防止编辑器休眠`);
+  log(`调度器将每${intervalSeconds}秒执行一次命令以防止编辑器休眠`);
 
   let browser;
   try {
@@ -37,43 +37,43 @@ async function startScheduler() {
     const intervalId = setInterval(async () => {
       try {
         // 重新导航到页面以确保页面活跃
-        console.log(`[${getHumanReadableTimestamp()}] 重新导航到WebIDE页面...`);
+        log(`[${getHumanReadableTimestamp()}] 重新导航到WebIDE页面...`);
         await navigateToWebIDE(page);
 
         // 执行命令
         await executeCommandOnce(page);
       } catch (error) {
-        console.error(`[${getHumanReadableTimestamp()}] 定时任务执行失败:`, error);
+        logError(`[${getHumanReadableTimestamp()}] 定时任务执行失败:`, error);
       }
     }, config.schedulerInterval);
 
-    console.log(`[${getHumanReadableTimestamp()}] 调度器已启动，将每${intervalSeconds}秒执行一次命令`);
-    console.log('按 Ctrl+C 停止调度器');
+    log(`[${getHumanReadableTimestamp()}] 调度器已启动，将每${intervalSeconds}秒执行一次命令`);
+    log('按 Ctrl+C 停止调度器');
 
     // 监听进程退出信号
     process.on('SIGINT', async () => {
-      console.log(`\n[${getHumanReadableTimestamp()}] 收到停止信号，正在关闭调度器...`);
+      log(`\n[${getHumanReadableTimestamp()}] 收到停止信号，正在关闭调度器...`);
       clearInterval(intervalId);
       if (browser) {
         await browser.close();
       }
-      console.log('调度器已停止，浏览器已关闭');
+      log('调度器已停止，浏览器已关闭');
       process.exit(0);
     });
 
     // 保持进程运行
     process.on('SIGTERM', async () => {
-      console.log(`\n[${getHumanReadableTimestamp()}] 收到终止信号，正在关闭调度器...`);
+      log(`\n[${getHumanReadableTimestamp()}] 收到终止信号，正在关闭调度器...`);
       clearInterval(intervalId);
       if (browser) {
         await browser.close();
       }
-      console.log('调度器已停止，浏览器已关闭');
+      log('调度器已停止，浏览器已关闭');
       process.exit(0);
     });
 
   } catch (error) {
-    console.error(`[${getHumanReadableTimestamp()}] 调度器启动失败:`, error);
+    logError(`[${getHumanReadableTimestamp()}] 调度器启动失败:`, error);
     if (browser) {
       await browser.close();
     }

start-services.js

@@ -0,0 +1,118 @@
+#!/usr/bin/env node
+
+/**
+ * 服务启动脚本
+ * 同时启动 Web 服务器和调度器
+ */
+
+import { spawn } from 'child_process';
+import { log, logError } from './utils/common-utils.js';
+
+// 存储子进程
+const processes = [];
+
+/**
+ * 启动子进程
+ */
+function startProcess(name, command, args = []) {
+  log(`启动 ${name}...`);
+
+  const child = spawn('node', [command, ...args], {
+    stdio: 'inherit',
+    cwd: process.cwd()
+  });
+
+  child.on('error', (error) => {
+    logError(`${name} 启动失败:`, error);
+  });
+
+  child.on('exit', (code, signal) => {
+    if (code !== 0) {
+      logError(`${name} 异常退出，代码: ${code}, 信号: ${signal}`);
+    } else {
+      log(`${name} 正常退出`);
+    }
+  });
+
+  processes.push({ name, process: child });
+  return child;
+}
+
+/**
+ * 优雅关闭所有进程
+ */
+function gracefulShutdown() {
+  log('收到关闭信号，正在停止所有服务...');
+
+  processes.forEach(({ name, process }) => {
+    if (!process.killed) {
+      log(`停止 ${name}...`);
+      process.kill('SIGTERM');
+    }
+  });
+
+  // 等待一段时间后强制关闭
+  setTimeout(() => {
+    processes.forEach(({ name, process }) => {
+      if (!process.killed) {
+        log(`强制停止 ${name}...`);
+        process.kill('SIGKILL');
+      }
+    });
+    process.exit(0);
+  }, 5000);
+}
+
+/**
+ * 主函数
+ */
+async function main() {
+  log('🚀 启动 CloudStudio Runner 服务');
+  log('='.repeat(50));
+
+  try {
+    // 启动 Web 服务器
+    const webServer = startProcess('Web 服务器', 'web-server.js');
+
+    // 等待一下确保 Web 服务器启动
+    await new Promise(resolve => setTimeout(resolve, 2000));
+
+    // 启动调度器
+    const scheduler = startProcess('调度器', 'scheduler.js');
+
+    log('='.repeat(50));
+    log('✅ 所有服务已启动');
+    log('📊 Web 界面: http://localhost:7860');
+    log('⏰ 调度器: 每10分钟执行一次任务');
+    log('按 Ctrl+C 停止所有服务');
+
+    // 监听退出信号
+    process.on('SIGINT', gracefulShutdown);
+    process.on('SIGTERM', gracefulShutdown);
+
+    // 保持主进程运行
+    process.on('exit', () => {
+      log('主进程退出');
+    });
+
+  } catch (error) {
+    logError('启动服务失败:', error);
+    process.exit(1);
+  }
+}
+
+// 运行主函数
+import { fileURLToPath } from 'url';
+import path from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const scriptPath = path.resolve(process.argv[1]);
+
+if (path.resolve(__filename) === scriptPath) {
+  main().catch(error => {
+    logError('服务启动异常:', error);
+    process.exit(1);
+  });
+}
+
+export { main };

utils/common-utils.js

@@ -1,6 +1,84 @@
 import fs from 'fs';
 import path from 'path';
 
+// 日志文件路径
+const LOG_FILE = './logs/app.log';
+const LOG_DIR = './logs';
+
+/**
+ * 确保日志目录存在
+ */
+function ensureLogDirectory() {
+  if (!fs.existsSync(LOG_DIR)) {
+    fs.mkdirSync(LOG_DIR, { recursive: true });
+  }
+}
+
+/**
+ * 写入日志到文件
+ * @param {string} level - 日志级别 (INFO, ERROR, WARN)
+ * @param {string} message - 日志消息
+ */
+export function writeLog(level, message) {
+  ensureLogDirectory();
+  const timestamp = new Date().toISOString();
+  const logEntry = `[${timestamp}] [${level}] ${message}\n`;
+
+  try {
+    fs.appendFileSync(LOG_FILE, logEntry);
+  } catch (error) {
+    console.error('写入日志文件失败:', error);
+  }
+}
+
+/**
+ * 增强的 console.log，同时输出到控制台和文件
+ * @param {...any} args - 要记录的参数
+ */
+export function log(...args) {
+  const message = args.map(arg =>
+    typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
+  ).join(' ');
+
+  console.log(...args);
+  writeLog('INFO', message);
+}
+
+/**
+ * 增强的 console.error，同时输出到控制台和文件
+ * @param {...any} args - 要记录的参数
+ */
+export function logError(...args) {
+  const message = args.map(arg =>
+    typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
+  ).join(' ');
+
+  console.error(...args);
+  writeLog('ERROR', message);
+}
+
+/**
+ * 读取最近的日志
+ * @param {number} lines - 要读取的行数，默认100行
+ * @returns {Array} 日志行数组
+ */
+export function getRecentLogs(lines = 100) {
+  try {
+    if (!fs.existsSync(LOG_FILE)) {
+      return [];
+    }
+
+    const content = fs.readFileSync(LOG_FILE, 'utf8');
+    const logLines = content.trim().split('\n').filter(line => line.length > 0);
+
+    // 返回最后 N 行
+    return logLines.slice(-lines);
+  } catch (error) {
+    console.error('读取日志文件失败:', error);
+    return [];
+  }
+}
+
 /**
  * 创建人类可读的时间戳
  * @returns {string} 格式化的时间戳 YYYY-MM-DD_HH-MM-SS

web-server.js

@@ -0,0 +1,335 @@
+import { Hono } from 'hono';
+import { serve } from '@hono/node-server';
+import { getRecentLogs, log, logError } from './utils/common-utils.js';
+import config from './config.js';
+
+const app = new Hono();
+
+// 静态 HTML 页面
+const indexHTML = `
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CloudStudio Runner - 日志查看器</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+            color: #333;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            text-align: center;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 2em;
+        }
+        .header p {
+            margin: 10px 0 0 0;
+            opacity: 0.9;
+        }
+        .controls {
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .controls label {
+            font-weight: bold;
+        }
+        .controls select, .controls button {
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+        .controls button {
+            background: #667eea;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        .controls button:hover {
+            background: #5a6fd8;
+        }
+        .log-container {
+            padding: 20px;
+            max-height: 600px;
+            overflow-y: auto;
+        }
+        .log-entry {
+            margin-bottom: 8px;
+            padding: 8px;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            line-height: 1.4;
+            border-left: 3px solid #ddd;
+        }
+        .log-entry.info {
+            background-color: #f8f9fa;
+            border-left-color: #28a745;
+        }
+        .log-entry.error {
+            background-color: #fff5f5;
+            border-left-color: #dc3545;
+            color: #721c24;
+        }
+        .log-entry.warn {
+            background-color: #fffbf0;
+            border-left-color: #ffc107;
+            color: #856404;
+        }
+        .timestamp {
+            color: #6c757d;
+            font-weight: bold;
+        }
+        .level {
+            font-weight: bold;
+            margin: 0 8px;
+        }
+        .level.info { color: #28a745; }
+        .level.error { color: #dc3545; }
+        .level.warn { color: #ffc107; }
+        .message {
+            word-break: break-word;
+        }
+        .status {
+            padding: 10px 20px;
+            background: #e9ecef;
+            border-top: 1px solid #ddd;
+            font-size: 14px;
+            color: #6c757d;
+        }
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: #6c757d;
+        }
+        .empty {
+            text-align: center;
+            padding: 40px;
+            color: #6c757d;
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🚀 CloudStudio Runner</h1>
+            <p>实时日志查看器 - 监控自动化任务执行状态</p>
+        </div>
+
+        <div class="controls">
+            <label for="lines">显示行数:</label>
+            <select id="lines">
+                <option value="50">50 行</option>
+                <option value="100" selected>100 行</option>
+                <option value="200">200 行</option>
+                <option value="500">500 行</option>
+                <option value="1000">1000 行</option>
+            </select>
+
+            <button onclick="refreshLogs()">🔄 刷新日志</button>
+            <button onclick="toggleAutoRefresh()">⏱️ 自动刷新</button>
+            <button onclick="clearLogs()">🗑️ 清空显示</button>
+        </div>
+
+        <div class="log-container" id="logContainer">
+            <div class="loading">正在加载日志...</div>
+        </div>
+
+        <div class="status" id="status">
+            准备就绪
+        </div>
+    </div>
+
+    <script>
+        let autoRefreshInterval = null;
+        let isAutoRefresh = false;
+
+        async function fetchLogs() {
+            try {
+                const lines = document.getElementById('lines').value;
+                const response = await fetch(\`/api/logs?lines=\${lines}\`);
+                const data = await response.json();
+
+                if (data.success) {
+                    displayLogs(data.logs);
+                    updateStatus(\`已加载 \${data.logs.length} 条日志 - \${new Date().toLocaleString()}\`);
+                } else {
+                    updateStatus('获取日志失败: ' + data.error);
+                }
+            } catch (error) {
+                updateStatus('网络错误: ' + error.message);
+            }
+        }
+
+        function displayLogs(logs) {
+            const container = document.getElementById('logContainer');
+
+            if (logs.length === 0) {
+                container.innerHTML = '<div class="empty">暂无日志数据</div>';
+                return;
+            }
+
+            const logHTML = logs.map(log => {
+                const match = log.match(/\\[(.*?)\\]\\s*\\[(.*?)\\]\\s*(.*)/);
+                if (match) {
+                    const [, timestamp, level, message] = match;
+                    const levelClass = level.toLowerCase();
+                    return \`
+                        <div class="log-entry \${levelClass}">
+                            <span class="timestamp">\${timestamp}</span>
+                            <span class="level \${levelClass}">[\${level}]</span>
+                            <span class="message">\${message}</span>
+                        </div>
+                    \`;
+                } else {
+                    return \`
+                        <div class="log-entry">
+                            <span class="message">\${log}</span>
+                        </div>
+                    \`;
+                }
+            }).join('');
+
+            container.innerHTML = logHTML;
+            container.scrollTop = container.scrollHeight;
+        }
+
+        function updateStatus(message) {
+            document.getElementById('status').textContent = message;
+        }
+
+        function refreshLogs() {
+            fetchLogs();
+        }
+
+        function toggleAutoRefresh() {
+            const button = event.target;
+
+            if (isAutoRefresh) {
+                clearInterval(autoRefreshInterval);
+                autoRefreshInterval = null;
+                isAutoRefresh = false;
+                button.textContent = '⏱️ 自动刷新';
+                updateStatus('自动刷新已停止');
+            } else {
+                autoRefreshInterval = setInterval(fetchLogs, 5000);
+                isAutoRefresh = true;
+                button.textContent = '⏹️ 停止刷新';
+                updateStatus('自动刷新已启动 (每5秒)');
+            }
+        }
+
+        function clearLogs() {
+            document.getElementById('logContainer').innerHTML = '<div class="empty">日志显示已清空</div>';
+            updateStatus('显示已清空');
+        }
+
+        // 页面加载时获取日志
+        document.addEventListener('DOMContentLoaded', fetchLogs);
+    </script>
+</body>
+</html>
+`;
+
+// 路由定义
+app.get('/', (c) => {
+    return c.html(indexHTML);
+});
+
+// API 路由 - 获取日志
+app.get('/api/logs', (c) => {
+    try {
+        const lines = parseInt(c.req.query('lines') || '100');
+        const logs = getRecentLogs(lines);
+
+        return c.json({
+            success: true,
+            logs: logs,
+            count: logs.length,
+            timestamp: new Date().toISOString()
+        });
+    } catch (error) {
+        logError('获取日志API错误:', error);
+        return c.json({
+            success: false,
+            error: error.message
+        }, 500);
+    }
+});
+
+// API 路由 - 系统状态
+app.get('/api/status', (c) => {
+    return c.json({
+        success: true,
+        status: 'running',
+        uptime: process.uptime(),
+        memory: process.memoryUsage(),
+        timestamp: new Date().toISOString(),
+        config: {
+            webideUrl: config.webideUrl,
+            schedulerInterval: config.schedulerInterval,
+            headless: config.browserOptions.headless
+        }
+    });
+});
+
+// 健康检查
+app.get('/health', (c) => {
+    return c.json({ status: 'ok', timestamp: new Date().toISOString() });
+});
+
+// 启动服务器
+const port = process.env.PORT || 7860;
+
+async function startServer() {
+    try {
+        log(`启动 Web 服务器，端口: ${port}`);
+        log(`访问地址: http://localhost:${port}`);
+
+        serve({
+            fetch: app.fetch,
+            port: port,
+        });
+
+        log('Web 服务器启动成功');
+    } catch (error) {
+        logError('启动 Web 服务器失败:', error);
+        process.exit(1);
+    }
+}
+
+// 如果直接运行此文件，启动服务器
+import { fileURLToPath } from 'url';
+import path from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const scriptPath = path.resolve(process.argv[1]);
+
+if (path.resolve(__filename) === scriptPath) {
+    startServer();
+}
+
+export { app, startServer };