local-cmd-runner 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "local-cmd-runner",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "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');
@@ -243,27 +246,61 @@ function triggerDirectoryUpload(targetPath) {
 if (fmRefreshBtn) {
   fmRefreshBtn.onclick = () => loadTree(currentRelPath);
   fmUploadBtn.onclick = () => triggerDirectoryUpload(currentRelPath);
-  fmUploadInput.onchange = async (e) => {
+  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', pendingUploadPath);
     
-    try {
-      fmUploadBtn.textContent = '...';
-      const res = await fetch('/cmd/api/upload', {
-        method: 'POST',
-        body: formData
-      });
-      if (!res.ok) throw new Error('上传时服务器报错');
+    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 + '%';
+      }
+    };
+    
+    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);
   };
 }
 
@@ -282,9 +319,9 @@ async function previewFile(path) {
     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;" />`;
+      previewBody.innerHTML = `<img src="${fileUrl}" style="max-width: 100%; object-fit: contain; border-radius: 4px; display: block; margin: 0 auto;" />`;
     } else if (isVideo) {
-      previewBody.innerHTML = `<video src="${fileUrl}" controls style="max-width: 100%; max-height: 70vh; border-radius: 4px;"></video>`;
+      previewBody.innerHTML = `<video src="${fileUrl}" controls style="max-width: 100%; border-radius: 4px; display: block; margin: 0 auto;"></video>`;
     } else if (isAudio) {
       previewBody.innerHTML = `<audio src="${fileUrl}" controls style="width: 100%; margin-top: 20px;"></audio>`;
     } else if (isHtml) {

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,7 @@
   <div id="previewModal" class="modal-overlay hidden">
     <div class="modal-content preview-modal-content">
       <h3 id="previewTitle" style="word-break: break-all;">文件预览</h3>
-      <div class="preview-body" id="previewBody" style="display: flex; flex-direction: column; align-items: center; justify-content: center;"></div>
+      <div class="preview-body" id="previewBody"></div>
       <div class="modal-actions">
         <button id="previewClose" class="btn-primary">关闭</button>
       </div>

package/public/style.css

@@ -20,7 +20,9 @@ body {
   font-family: 'Inter', sans-serif;
   background: linear-gradient(135deg, var(--bg-color), #000000);
   color: var(--text-primary);
-  min-height: 100vh;
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -33,6 +35,8 @@ body {
   display: grid;
   grid-template-columns: 1fr 350px;
   gap: 24px;
+  flex: 1;
+  overflow: hidden;
 }
 
 .container {
@@ -40,6 +44,8 @@ body {
   flex-direction: column;
   gap: 24px;
   min-width: 0;
+  height: 100%;
+  overflow: hidden;
 }
 
 header {
@@ -163,8 +169,8 @@ input[type="text"]:focus {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
   display: flex;
   flex-direction: column;
-  min-height: 400px;
-  max-height: 600px;
+  flex: 1;
+  min-height: 200px;
 }
 
 .terminal-header {
@@ -347,7 +353,6 @@ input[type="text"]:focus {
   flex-direction: column;
   overflow: hidden;
   height: 100%;
-  max-height: calc(100vh - 80px); /* accounting for body padding */
 }
 
 .fm-header {
@@ -470,3 +475,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

@@ -79,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) => {