local-cmd-runner 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "local-cmd-runner",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Run local shell commands from a web page",
   "homepage": "https://github.com/codewoow/local_cmd#readme",
   "bugs": {
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "express": "^4.19.2",
+    "multer": "^2.1.1",
     "socket.io": "^4.7.5"
-  },
-  "devDependencies": {}
+  }
 }

package/public/app.js

@@ -45,10 +45,51 @@ cmdInput.addEventListener('keypress', (e) => {
   }
 });
 
+const customModal = document.getElementById('customModal');
+const modalInput = document.getElementById('modalInput');
+const modalCancel = document.getElementById('modalCancel');
+const modalConfirm = document.getElementById('modalConfirm');
+const modalError = document.getElementById('modalError');
+
+function showModal() {
+  if (!customModal) return;
+  customModal.classList.remove('hidden');
+  modalInput.value = '';
+  modalError.classList.add('hidden');
+  modalInput.focus();
+}
+
+function hideModal() {
+  if (customModal) customModal.classList.add('hidden');
+}
+
+function handleModalSubmit() {
+  const name = modalInput.value.trim();
+  if (/^[A-Za-z]+$/.test(name)) {
+    runCommand(`myclaw new ${name}`);
+    hideModal();
+  } else {
+    modalError.classList.remove('hidden');
+    modalInput.focus();
+  }
+}
+
+if (customModal) {
+  modalCancel.addEventListener('click', hideModal);
+  modalConfirm.addEventListener('click', handleModalSubmit);
+  modalInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') handleModalSubmit();
+  });
+}
+
 presetBtns.forEach(btn => {
   btn.addEventListener('click', () => {
     const cmd = btn.getAttribute('data-cmd');
-    runCommand(cmd);
+    if (cmd === 'myclaw new') {
+      showModal();
+    } else if (cmd) {
+      runCommand(cmd);
+    }
   });
 });
 
@@ -86,7 +127,7 @@ socket.on('cmd_output', (data) => {
 socket.on('cmd_error', (data) => {
   const container = getOutputContainer(data.runId || data.id);
   const div = document.createElement('div');
-  div.textContent = `\n[Error]: ${data.error}\n`;
+  div.textContent = `\n[错误]: ${data.error}\n`;
   div.classList.add('error');
   container.appendChild(div);
 });
@@ -94,7 +135,140 @@ socket.on('cmd_error', (data) => {
 socket.on('cmd_close', (data) => {
   const container = getOutputContainer(data.runId || data.id);
   const div = document.createElement('div');
-  div.textContent = `\n[Process exited with code ${data.code}]\n\n`;
+  div.textContent = `\n[进程已退出，退出码 ${data.code}]\n\n`;
   div.classList.add('system');
   container.appendChild(div);
 });
+
+// --- File Manager Logic ---
+const fmTree = document.getElementById('fmTree');
+const fmCurrentPath = document.getElementById('fmCurrentPath');
+const fmUploadBtn = document.getElementById('fmUploadBtn');
+const fmUploadInput = document.getElementById('fmUploadInput');
+const fmRefreshBtn = document.getElementById('fmRefreshBtn');
+
+const previewModal = document.getElementById('previewModal');
+const previewTitle = document.getElementById('previewTitle');
+const previewBody = document.getElementById('previewBody');
+const previewClose = document.getElementById('previewClose');
+
+let currentRelPath = '';
+
+async function loadTree(relPath = '') {
+  if (!fmTree) return;
+  currentRelPath = relPath;
+  fmCurrentPath.textContent = '/root/.openclaw' + (relPath ? '/' + relPath : '');
+  fmTree.innerHTML = '<div class="fm-loading">加载中...</div>';
+  try {
+    const res = await fetch(`/cmd/api/tree?path=${encodeURIComponent(relPath)}`);
+    const data = await res.json();
+    renderTree(data, relPath);
+  } catch (err) {
+    fmTree.innerHTML = `<div class="error" style="padding:16px;color:var(--terminal-error)">目录加载失败</div>`;
+  }
+}
+
+function renderTree(items, relPath) {
+  fmTree.innerHTML = '';
+  
+  if (relPath !== '') {
+    const parentPath = relPath.split('/').slice(0, -1).join('/');
+    const upItem = document.createElement('div');
+    upItem.className = 'fm-item';
+    upItem.innerHTML = `<div class="fm-icon">📁</div><div class="fm-name">..</div>`;
+    upItem.onclick = () => loadTree(parentPath);
+    fmTree.appendChild(upItem);
+  }
+
+  if (items.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'fm-loading';
+    empty.textContent = '空文件夹';
+    fmTree.appendChild(empty);
+    return;
+  }
+
+  items.forEach(item => {
+    const el = document.createElement('div');
+    el.className = 'fm-item';
+    
+    const icon = document.createElement('div');
+    icon.className = 'fm-icon';
+    icon.textContent = item.isDirectory ? '📁' : '📄';
+    
+    const name = document.createElement('div');
+    name.className = 'fm-name';
+    name.textContent = item.name;
+    name.title = item.name;
+    
+    const actions = document.createElement('div');
+    actions.className = 'fm-item-actions';
+    
+    if (item.isDirectory) {
+      el.onclick = () => loadTree(item.path);
+    } else {
+      const previewBtn = document.createElement('button');
+      previewBtn.innerHTML = '查看';
+      previewBtn.onclick = (e) => { e.stopPropagation(); previewFile(item.path); };
+      
+      const downloadBtn = document.createElement('button');
+      downloadBtn.innerHTML = '下载';
+      downloadBtn.onclick = (e) => { e.stopPropagation(); window.open(`/cmd/api/download?path=${encodeURIComponent(item.path)}`, '_blank'); };
+      
+      actions.appendChild(previewBtn);
+      actions.appendChild(downloadBtn);
+    }
+    
+    el.appendChild(icon);
+    el.appendChild(name);
+    el.appendChild(actions);
+    fmTree.appendChild(el);
+  });
+}
+
+if (fmRefreshBtn) {
+  fmRefreshBtn.onclick = () => loadTree(currentRelPath);
+  fmUploadBtn.onclick = () => fmUploadInput.click();
+  fmUploadInput.onchange = async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('path', currentRelPath);
+    
+    try {
+      fmUploadBtn.textContent = '...';
+      const res = await fetch('/cmd/api/upload', {
+        method: 'POST',
+        body: formData
+      });
+      if (!res.ok) throw new Error('上传时服务器报错');
+      fmUploadInput.value = '';
+      loadTree(currentRelPath);
+    } catch (err) {
+      alert('上传失败: ' + err.message);
+    } finally {
+      fmUploadBtn.textContent = '↑';
+    }
+  };
+}
+
+async function previewFile(path) {
+  try {
+    const res = await fetch(`/cmd/api/preview?path=${encodeURIComponent(path)}`);
+    if (!res.ok) throw new Error('获取预览失败');
+    const text = await res.text();
+    previewTitle.textContent = path;
+    previewBody.textContent = text;
+    previewModal.classList.remove('hidden');
+  } catch (err) {
+    alert('预览失败: ' + err.message);
+  }
+}
+
+if (previewClose) {
+  previewClose.onclick = () => previewModal.classList.add('hidden');
+}
+
+// Init Tree
+loadTree();

package/public/index.html

@@ -4,44 +4,87 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Local Command Runner</title>
+  <title>本地命令运行器</title>
   <link rel="stylesheet" href="style.css">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Fira+Code&display=swap"
     rel="stylesheet">
 </head>
 
 <body>
-  <div class="container">
-    <header>
-      <h1>Cmd Runner</h1>
-      <p>Execute local shell and cmd commands directly from your browser.</p>
-    </header>
-
-    <div class="presets">
-      <h3>Preset OpenClaw Commands</h3>
-      <div class="preset-buttons">
-        <button class="btn-preset" data-cmd="openclaw --help">Help</button>
-        <button class="btn-preset" data-cmd="openclaw gateway">Start</button>
+  <header>
+    <h1>终端运行器</h1>
+    <p>直接从你的浏览器执行本地 Shell 或 CMD 命令。</p>
+  </header>
+
+  <div class="layout-wrapper">
+    <div class="container">
+
+      <div class="presets">
+        <h3>常用指令</h3>
+        <div class="preset-buttons" style="align-items: center;">
+          <button class="btn-preset" data-cmd="myclaw start">启动小龙虾</button>
+          <button class="btn-preset" data-cmd="myclaw restart">重启小龙虾</button>
+          <button class="btn-preset" data-cmd="myclaw new">添加智能体</button>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="input-group">
+          <input type="text" id="cmdInput" placeholder="在此输入 Shell 或 CMD 指令..." autofocus>
+          <button id="runBtn" class="btn-primary">运行指令</button>
+        </div>
+      </div>
+
+      <div class="terminal-container">
+        <div class="terminal-header">
+          <div class="dots">
+            <span class="dot red"></span>
+            <span class="dot yellow"></span>
+            <span class="dot green"></span>
+          </div>
+          <div class="title" id="terminalTitle">终端面板</div>
+        </div>
+        <div id="output" class="terminal-output"></div>
       </div>
     </div>
+    <!-- File Manager -->
+    <aside class="file-manager">
+      <div class="fm-header">
+        <h3>/.openclaw</h3>
+        <div class="fm-actions">
+          <input type="file" id="fmUploadInput" style="display: none;" />
+          <button class="btn-preset btn-sm" id="fmUploadBtn" title="上传文件">↑</button>
+          <button class="btn-preset btn-sm" id="fmRefreshBtn" title="刷新目录">↻</button>
+        </div>
+      </div>
+      <div class="fm-path" id="fmCurrentPath">/root/.openclaw</div>
+      <div class="fm-body" id="fmTree">
+        <div class="fm-loading">加载中...</div>
+      </div>
+    </aside>
+  </div>
 
-    <div class="card">
-      <div class="input-group">
-        <input type="text" id="cmdInput" placeholder="Enter shell or cmd command here..." autofocus>
-        <button id="runBtn" class="btn-primary">Run Command</button>
+  <!-- Preview Modal -->
+  <div id="previewModal" class="modal-overlay hidden">
+    <div class="modal-content preview-modal-content">
+      <h3 id="previewTitle" style="word-break: break-all;">文件预览</h3>
+      <pre class="preview-body" id="previewBody"></pre>
+      <div class="modal-actions">
+        <button id="previewClose" class="btn-primary">关闭</button>
       </div>
     </div>
+  </div>
 
-    <div class="terminal-container">
-      <div class="terminal-header">
-        <div class="dots">
-          <span class="dot red"></span>
-          <span class="dot yellow"></span>
-          <span class="dot green"></span>
-        </div>
-        <div class="title" id="terminalTitle">Terminal</div>
+  <div id="customModal" class="modal-overlay hidden">
+    <div class="modal-content">
+      <h3>输入名称</h3>
+      <p>仅支持纯英文字母，且不支持空格。</p>
+      <input type="text" id="modalInput" placeholder="名称..." autocomplete="off">
+      <div id="modalError" class="modal-error hidden">格式无效！只能包含纯英文字母。</div>
+      <div class="modal-actions">
+        <button id="modalCancel" class="btn-preset">取消</button>
+        <button id="modalConfirm" class="btn-primary">确定</button>
       </div>
-      <div id="output" class="terminal-output"></div>
     </div>
   </div>
 

package/public/style.css

@@ -22,21 +22,30 @@ body {
   color: var(--text-primary);
   min-height: 100vh;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
   padding: 40px 20px;
 }
 
-.container {
+.layout-wrapper {
   width: 100%;
-  max-width: 900px;
+  max-width: 1300px;
+  display: grid;
+  grid-template-columns: 1fr 350px;
+  gap: 24px;
+}
+
+.container {
   display: flex;
   flex-direction: column;
   gap: 24px;
+  min-width: 0;
 }
 
 header {
   text-align: center;
-  margin-bottom: 10px;
+  margin-bottom: 32px;
+  width: 100%;
 }
 
 h1 {
@@ -44,6 +53,7 @@ h1 {
   font-weight: 600;
   background: -webkit-linear-gradient(#38bdf8, #818cf8);
   -webkit-background-clip: text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
   margin-bottom: 8px;
 }
@@ -244,3 +254,219 @@ input[type="text"]:focus {
 .terminal-output::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.3);
 }
+
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+
+.modal-overlay.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.modal-content {
+  background: var(--panel-bg);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 24px;
+  border-radius: 16px;
+  width: 90%;
+  max-width: 400px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+  transform: translateY(0);
+  transition: transform 0.2s ease;
+}
+
+.modal-overlay.hidden .modal-content {
+  transform: translateY(-20px);
+}
+
+.modal-content h3 {
+  margin-bottom: 8px;
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: #f8fafc;
+}
+
+.modal-content p {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin-bottom: 16px;
+}
+
+.modal-content input {
+  width: 100%;
+  margin-bottom: 8px;
+  padding: 10px 16px;
+}
+
+.modal-error {
+  color: #ef4444;
+  font-size: 0.85rem;
+  margin-bottom: 16px;
+  min-height: 1.2em;
+}
+
+.modal-error.hidden {
+  display: none;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.modal-actions .btn-preset {
+  padding: 10px 16px;
+}
+
+.modal-actions .btn-primary {
+  padding: 10px 20px;
+}
+
+/* File Manager */
+.file-manager {
+  background: var(--panel-bg);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+  max-height: calc(100vh - 80px); /* accounting for body padding */
+}
+
+.fm-header {
+  padding: 16px;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(0,0,0,0.2);
+}
+
+.fm-header h3 {
+  font-size: 1.1rem;
+  font-weight: 500;
+  margin: 0;
+}
+
+.fm-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-sm {
+  padding: 6px 12px;
+  font-size: 0.8rem;
+}
+
+.fm-path {
+  padding: 8px 16px;
+  background: rgba(0,0,0,0.4);
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+  word-break: break-all;
+}
+
+.fm-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.fm-loading {
+  padding: 16px;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+.fm-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s;
+  gap: 12px;
+}
+
+.fm-item:hover {
+  background: rgba(255,255,255,0.05);
+}
+
+.fm-icon {
+  width: 24px;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.fm-name {
+  flex: 1;
+  font-size: 0.9rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fm-item-actions {
+  display: none;
+  gap: 6px;
+}
+
+.fm-item:hover .fm-item-actions {
+  display: flex;
+}
+
+.fm-item-actions button {
+  background: rgba(255,255,255,0.1);
+  border: none;
+  color: #e2e8f0;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.75rem;
+}
+
+.fm-item-actions button:hover {
+  background: var(--accent);
+}
+
+.preview-modal-content {
+  max-width: 800px;
+  width: 95%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.preview-body {
+  flex: 1;
+  overflow-y: auto;
+  background: var(--terminal-bg);
+  padding: 16px;
+  border-radius: 8px;
+  color: var(--terminal-text);
+  font-family: 'Fira Code', monospace;
+  font-size: 0.9rem;
+  margin-bottom: 16px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}

package/server.js

@@ -4,6 +4,8 @@ const { Server } = require('socket.io');
 const { spawn } = require('child_process');
 const path = require('path');
 const os = require('os');
+const fs = require('fs');
+const multer = require('multer');
 
 const app = express();
 const httpServer = createServer(app);
@@ -14,6 +16,82 @@ const PORT = process.env.PORT || 3500;
 app.use('/cmd', express.static(path.join(__dirname, 'public')));
 app.get('/', (req, res) => res.redirect('/cmd/'));
 
+// --- File Management APIs ---
+const BASE_DIR = path.resolve('/root/.openclaw');
+try {
+  if (!fs.existsSync(BASE_DIR)) fs.mkdirSync(BASE_DIR, { recursive: true });
+} catch (e) {
+  console.log(`Could not create ${BASE_DIR}:`, e);
+}
+
+function getSecurePath(relPath) {
+  // Prevent absolute paths or drives from being evaluated
+  const sanitized = (relPath || '').toString().replace(/^([a-zA-Z]:|[\\/]+)/, '');
+  const target = path.resolve(BASE_DIR, sanitized);
+  
+  const secureBase = BASE_DIR + path.sep;
+  if (target !== BASE_DIR && !target.startsWith(secureBase)) {
+    throw new Error('Access denied: Directory constraint violation');
+  }
+  return target;
+}
+
+app.get('/cmd/api/tree', async (req, res) => {
+  try {
+    const relPath = req.query.path || '';
+    const targetPath = getSecurePath(relPath);
+    if (!fs.existsSync(targetPath)) return res.json([]);
+    const items = await fs.promises.readdir(targetPath, { withFileTypes: true });
+    
+    const tree = items.map(item => ({
+      name: item.name,
+      isDirectory: item.isDirectory(),
+      path: path.relative(BASE_DIR, path.join(targetPath, item.name)).replace(/\\/g, '/')
+    }));
+    
+    tree.sort((a, b) => {
+      if (a.isDirectory && !b.isDirectory) return -1;
+      if (!a.isDirectory && b.isDirectory) return 1;
+      return a.name.localeCompare(b.name);
+    });
+    
+    res.json(tree);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.get('/cmd/api/preview', async (req, res) => {
+  try {
+    const targetPath = getSecurePath(req.query.path);
+    const content = await fs.promises.readFile(targetPath, 'utf8');
+    res.send(content);
+  } catch (err) {
+    res.status(500).send(err.message);
+  }
+});
+
+app.get('/cmd/api/download', (req, res) => {
+  try {
+    const targetPath = getSecurePath(req.query.path);
+    res.download(targetPath);
+  } catch (err) {
+    res.status(500).send('Download failed: ' + err.message);
+  }
+});
+
+const upload = multer({ dest: os.tmpdir() });
+app.post('/cmd/api/upload', upload.single('file'), async (req, res) => {
+  try {
+    const targetDir = getSecurePath(req.body.path || '');
+    const targetPath = path.join(targetDir, req.file.originalname);
+    await fs.promises.rename(req.file.path, targetPath);
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 io.on('connection', (socket) => {
   console.log('Client connected');