local-cmd-runner 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "local-cmd-runner",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Run local shell commands from a web page",
   "homepage": "https://github.com/codewoow/local_cmd#readme",
   "bugs": {

package/public/app.js

@@ -146,6 +146,9 @@ const fmCurrentPath = document.getElementById('fmCurrentPath');
 const fmUploadBtn = document.getElementById('fmUploadBtn');
 const fmUploadInput = document.getElementById('fmUploadInput');
 const fmRefreshBtn = document.getElementById('fmRefreshBtn');
+const fmUploadProgress = document.getElementById('fmUploadProgress');
+const fmProgressBar = document.getElementById('fmProgressBar');
+const fmProgressText = document.getElementById('fmProgressText');
 
 const previewModal = document.getElementById('previewModal');
 const previewTitle = document.getElementById('previewTitle');
@@ -206,6 +209,14 @@ function renderTree(items, relPath) {
     
     if (item.isDirectory) {
       el.onclick = () => loadTree(item.path);
+      
+      const uploadDirBtn = document.createElement('button');
+      uploadDirBtn.innerHTML = '上传到此';
+      uploadDirBtn.onclick = (e) => {
+        e.stopPropagation();
+        triggerDirectoryUpload(item.path);
+      };
+      actions.appendChild(uploadDirBtn);
     } else {
       const previewBtn = document.createElement('button');
       previewBtn.innerHTML = '查看';
@@ -226,43 +237,112 @@ function renderTree(items, relPath) {
   });
 }
 
+let pendingUploadPath = '';
+function triggerDirectoryUpload(targetPath) {
+  pendingUploadPath = targetPath;
+  fmUploadInput.click();
+}
+
 if (fmRefreshBtn) {
   fmRefreshBtn.onclick = () => loadTree(currentRelPath);
-  fmUploadBtn.onclick = () => fmUploadInput.click();
-  fmUploadInput.onchange = async (e) => {
+  fmUploadBtn.onclick = () => triggerDirectoryUpload(currentRelPath);
+  fmUploadInput.onchange = (e) => {
     const file = e.target.files[0];
     if (!file) return;
+    
+    if (file.size > 5 * 1024 * 1024) {
+      alert('上传失败：文件大小不能超过 5MB！');
+      fmUploadInput.value = '';
+      return;
+    }
+    
     const formData = new FormData();
     formData.append('file', file);
-    formData.append('path', currentRelPath);
+    formData.append('path', pendingUploadPath);
+    
+    fmUploadBtn.textContent = '...';
+    if (fmUploadProgress) {
+      fmUploadProgress.classList.remove('hidden');
+      fmProgressBar.style.width = '0%';
+      fmProgressText.textContent = '0%';
+    }
+    
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', '/cmd/api/upload');
+    
+    xhr.upload.onprogress = (event) => {
+      if (event.lengthComputable && fmUploadProgress) {
+        const percentComplete = Math.floor((event.loaded / event.total) * 100);
+        fmProgressBar.style.width = percentComplete + '%';
+        fmProgressText.textContent = percentComplete + '%';
+      }
+    };
     
-    try {
-      fmUploadBtn.textContent = '...';
-      const res = await fetch('/cmd/api/upload', {
-        method: 'POST',
-        body: formData
-      });
-      if (!res.ok) throw new Error('上传时服务器报错');
+    xhr.onload = () => {
       fmUploadInput.value = '';
-      loadTree(currentRelPath);
-    } catch (err) {
-      alert('上传失败: ' + err.message);
-    } finally {
       fmUploadBtn.textContent = '↑';
-    }
+      if (fmUploadProgress) fmUploadProgress.classList.add('hidden');
+      
+      if (xhr.status >= 200 && xhr.status < 300) {
+        // Success
+        loadTree(currentRelPath);
+      } else {
+        let errMsg = '上传时服务器报错';
+        try { errMsg = JSON.parse(xhr.responseText).error || errMsg; } catch (e) {}
+        alert('上传失败: ' + errMsg);
+      }
+    };
+    
+    xhr.onerror = () => {
+      fmUploadInput.value = '';
+      fmUploadBtn.textContent = '↑';
+      if (fmUploadProgress) fmUploadProgress.classList.add('hidden');
+      alert('上传失败: 网络错误');
+    };
+    
+    xhr.send(formData);
   };
 }
 
 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');
+    previewBody.innerHTML = '<div style="margin: 20px;">加载中...</div>';
+    
+    const ext = path.split('.').pop().toLowerCase();
+    const isImage = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico'].includes(ext);
+    const isHtml = ['html', 'htm'].includes(ext);
+    const isVideo = ['mp4', 'webm', 'ogg'].includes(ext);
+    const isAudio = ['mp3', 'wav', 'ogg'].includes(ext);
+
+    const fileUrl = `/cmd/api/preview?path=${encodeURIComponent(path)}`;
+
+    if (isImage) {
+      previewBody.innerHTML = `<img src="${fileUrl}" style="max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 4px;" />`;
+    } else if (isVideo) {
+      previewBody.innerHTML = `<video src="${fileUrl}" controls style="max-width: 100%; max-height: 70vh; border-radius: 4px;"></video>`;
+    } else if (isAudio) {
+      previewBody.innerHTML = `<audio src="${fileUrl}" controls style="width: 100%; margin-top: 20px;"></audio>`;
+    } else if (isHtml) {
+      previewBody.innerHTML = `<iframe src="${fileUrl}" style="width: 100%; min-height: 60vh; border: none; background: white; border-radius: 4px;"></iframe>`;
+    } else {
+      const res = await fetch(fileUrl);
+      if (!res.ok) throw new Error('获取预览失败');
+      const text = await res.text();
+      previewBody.innerHTML = '';
+      const pre = document.createElement('pre');
+      pre.textContent = text;
+      pre.style.whiteSpace = 'pre-wrap';
+      pre.style.wordBreak = 'break-all';
+      pre.style.margin = '0';
+      pre.style.fontFamily = "'Fira Code', monospace";
+      pre.style.width = "100%";
+      previewBody.appendChild(pre);
+    }
   } catch (err) {
     alert('预览失败: ' + err.message);
+    previewModal.classList.add('hidden');
   }
 }
 

package/public/index.html

@@ -58,6 +58,12 @@
         </div>
       </div>
       <div class="fm-path" id="fmCurrentPath">/root/.openclaw</div>
+      <div id="fmUploadProgress" class="fm-upload-progress hidden">
+        <div class="fm-progress-bar-wrap">
+          <div class="fm-progress-bar" id="fmProgressBar"></div>
+        </div>
+        <div class="fm-progress-text" id="fmProgressText">0%</div>
+      </div>
       <div class="fm-body" id="fmTree">
         <div class="fm-loading">加载中...</div>
       </div>
@@ -68,7 +74,8 @@
   <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="preview-body" id="previewBody"
+        style="display: flex; flex-direction: column; align-items: center; justify-content: center;"></div>
       <div class="modal-actions">
         <button id="previewClose" class="btn-primary">关闭</button>
       </div>

package/public/style.css

@@ -470,3 +470,40 @@ input[type="text"]:focus {
   white-space: pre-wrap;
   word-break: break-all;
 }
+
+/* File Manager Progress */
+.fm-upload-progress {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  background: rgba(59, 130, 246, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  gap: 12px;
+}
+
+.fm-upload-progress.hidden {
+  display: none;
+}
+
+.fm-progress-bar-wrap {
+  flex: 1;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  height: 8px;
+  overflow: hidden;
+}
+
+.fm-progress-bar {
+  background: var(--accent);
+  width: 0%;
+  height: 100%;
+  transition: width 0.1s linear;
+}
+
+.fm-progress-text {
+  font-size: 0.8rem;
+  color: var(--text-primary);
+  min-width: 36px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}

package/server.js

@@ -64,8 +64,7 @@ app.get('/cmd/api/tree', async (req, res) => {
 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);
+    res.sendFile(targetPath);
   } catch (err) {
     res.status(500).send(err.message);
   }
@@ -80,16 +79,29 @@ app.get('/cmd/api/download', (req, res) => {
   }
 });
 
-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 });
-  }
+const upload = multer({ 
+  dest: os.tmpdir(),
+  limits: { fileSize: 5 * 1024 * 1024 }
+}).single('file');
+
+app.post('/cmd/api/upload', (req, res) => {
+  upload(req, res, async (err) => {
+    if (err instanceof multer.MulterError && err.code === 'LIMIT_FILE_SIZE') {
+      return res.status(400).json({ error: '文件大小超出 5MB 限制！' });
+    } else if (err) {
+      return res.status(500).json({ error: err.message });
+    }
+    
+    try {
+      if (!req.file) throw new Error('未提供文件');
+      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 (e) {
+      res.status(500).json({ error: e.message });
+    }
+  });
 });
 
 io.on('connection', (socket) => {