@wendongfly/myhi 1.2.0 → 1.3.1

package/dist/package.json

@@ -1 +1 @@
-{"type":"module","version":"1.2.0"}
+{"type":"module","version":"1.3.1"}

package/dist/terminal.html

@@ -231,6 +231,66 @@
       z-index: 10;
     }
     #status-overlay.hidden { display: none; }
+
+    /* ── 文件管理面板 ── */
+    #file-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 59; display: none; }
+    #file-panel-backdrop.open { display: block; }
+    #file-panel {
+      position: fixed; top: 0; right: -340px; width: 320px; max-width: 90vw; height: 100%;
+      background: #161b22; border-left: 1px solid #30363d; z-index: 60;
+      transition: right 0.25s ease; display: flex; flex-direction: column;
+    }
+    #file-panel.open { right: 0; }
+    .fp-header {
+      display: flex; align-items: center; padding: 0.75rem; border-bottom: 1px solid #30363d;
+      gap: 0.5rem; flex-shrink: 0;
+    }
+    .fp-header h3 { flex: 1; font-size: 0.9rem; margin: 0; color: #e6edf3; }
+    .fp-btn {
+      background: #21262d; color: #e6edf3; border: 1px solid #30363d; border-radius: 6px;
+      padding: 0.3rem 0.6rem; font-size: 0.75rem; cursor: pointer;
+    }
+    .fp-btn:active { background: #30363d; }
+    .fp-path {
+      padding: 0.4rem 0.75rem; font-size: 0.7rem; color: #8b949e;
+      border-bottom: 1px solid #21262d; word-break: break-all; flex-shrink: 0;
+    }
+    .fp-list { flex: 1; overflow-y: auto; padding: 0.25rem 0; }
+    .fp-item {
+      display: flex; align-items: center; padding: 0.5rem 0.75rem; gap: 0.5rem;
+      cursor: pointer; font-size: 0.82rem; color: #e6edf3;
+    }
+    .fp-item:active { background: #21262d; }
+    .fp-item .fp-icon { width: 1.2rem; text-align: center; flex-shrink: 0; }
+    .fp-item .fp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .fp-item .fp-size { color: #8b949e; font-size: 0.7rem; white-space: nowrap; }
+    .fp-item .fp-dl { color: #58a6ff; font-size: 0.7rem; text-decoration: none; padding: 0.2rem 0.4rem; }
+    .fp-empty { text-align: center; color: #8b949e; padding: 2rem 0.75rem; font-size: 0.85rem; }
+    .fp-drop-zone {
+      margin: 0.5rem 0.75rem; padding: 1.5rem; border: 2px dashed #30363d; border-radius: 8px;
+      text-align: center; color: #8b949e; font-size: 0.8rem; flex-shrink: 0;
+      transition: border-color 0.2s, background 0.2s;
+    }
+    .fp-drop-zone.dragover { border-color: #58a6ff; background: rgba(88,166,255,0.08); }
+    .fp-progress { padding: 0.4rem 0.75rem; font-size: 0.75rem; color: #d29922; flex-shrink: 0; display: none; }
+
+    /* ── 同步相关 ── */
+    .fp-sync-bar { display: flex; gap: 0.4rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid #21262d; flex-shrink: 0; align-items: center; flex-wrap: wrap; }
+    .fp-sync-bar .fp-btn { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
+    .fp-sync-bar .sync-dir { font-size: 0.68rem; color: #8b949e; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    .fp-diff-item { display: flex; align-items: center; padding: 0.4rem 0.75rem; gap: 0.4rem; font-size: 0.78rem; color: #e6edf3; }
+    .fp-diff-item .badge { font-size: 0.65rem; padding: 0.1rem 0.35rem; border-radius: 4px; font-weight: 600; flex-shrink: 0; }
+    .badge-new { background: #238636; color: #fff; }
+    .badge-changed { background: #9e6a03; color: #fff; }
+    .badge-arrow { color: #8b949e; flex-shrink: 0; font-size: 0.7rem; }
+    .fp-diff-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .fp-diff-summary { padding: 0.75rem; text-align: center; color: #8b949e; font-size: 0.8rem; }
+    .fp-diff-actions { display: flex; gap: 0.5rem; padding: 0.5rem 0.75rem; flex-shrink: 0; }
+    .fp-diff-actions .fp-btn { flex: 1; text-align: center; padding: 0.45rem; }
+    .fp-btn-primary { background: #238636; border-color: #2ea04380; }
+    .fp-btn-primary:active { background: #2ea043; }
+    .fp-btn-warn { background: #9e6a03; border-color: #d2992280; }
+    .fp-btn-warn:active { background: #bb8009; }
   </style>
 </head>
 <body>
@@ -238,6 +298,7 @@
   <div id="top-bar">
     <div id="session-title">加载中...</div>
     <span id="viewer-count"></span>
+    <button class="top-btn" onclick="openFilePanel()">文件</button>
     <button class="top-btn" onclick="showQR()">扫码分享</button>
     <button class="top-btn" onclick="goBack()">← 返回</button>
     <button class="top-btn" id="logout-btn" onclick="doLogout()" style="display:none;color:#f0883e">退出</button>
@@ -269,6 +330,31 @@
     <button class="sk" data-send="alt-.">Alt+.</button>
   </div>
 
+  <!-- 文件管理面板 -->
+  <div id="file-panel-backdrop" onclick="closeFilePanel()"></div>
+  <div id="file-panel">
+    <div class="fp-header">
+      <h3 id="fp-title">文件管理</h3>
+      <button class="fp-btn" onclick="fpUploadClick()">上传</button>
+      <button class="fp-btn" onclick="fpStartSync()">同步</button>
+      <button class="fp-btn" onclick="closeFilePanel()">关闭</button>
+    </div>
+    <div class="fp-sync-bar" id="fp-sync-bar" style="display:none">
+      <span class="sync-dir" id="fp-sync-dir"></span>
+      <button class="fp-btn" onclick="fpPickDir()">换目录</button>
+      <button class="fp-btn" onclick="fpExitSync()">退出同步</button>
+    </div>
+    <div class="fp-path" id="fp-path"></div>
+    <div class="fp-list" id="fp-list"></div>
+    <div class="fp-diff-actions" id="fp-diff-actions" style="display:none">
+      <button class="fp-btn fp-btn-primary" onclick="fpSyncToLocal()">下载到本地</button>
+      <button class="fp-btn fp-btn-warn" onclick="fpSyncToServer()">上传到服务器</button>
+    </div>
+    <div class="fp-progress" id="fp-progress"></div>
+    <div class="fp-drop-zone" id="fp-drop">拖拽文件到此处上传，或点击上方按钮</div>
+    <input type="file" id="fp-file-input" multiple style="display:none">
+  </div>
+
   <!-- QR modal -->
   <div id="qr-modal">
     <div id="qr-box">
@@ -387,8 +473,8 @@
 
       socket.on('disconnect', () => {
         // 显示断连提示
-        term.write('
-[myhi] 连接已断开，正在重连...
+        term.write('
+[myhi] 连接已断开，正在重连...
 ');
       });
 
@@ -653,9 +739,374 @@
       input.click();
     }
 
+    // ── 文件管理 ──────────────────────────────────────
+    let fpCurrentPath = '';
+    let fpSessionId = null;
+
+    function openFilePanel() {
+      const tab = tabs.find(t => t.id === activeTabId);
+      if (!tab) return;
+      fpSessionId = tab.sessionId;
+      fpCurrentPath = '';
+      loadFiles();
+      document.getElementById('file-panel').classList.add('open');
+      document.getElementById('file-panel-backdrop').classList.add('open');
+    }
+    function closeFilePanel() {
+      document.getElementById('file-panel').classList.remove('open');
+      document.getElementById('file-panel-backdrop').classList.remove('open');
+    }
+
+    async function loadFiles() {
+      if (!fpSessionId) return;
+      const list = document.getElementById('fp-list');
+      list.innerHTML = '<div class="fp-empty">加载中...</div>';
+      try {
+        const r = await fetch(`/api/files/${fpSessionId}?path=${encodeURIComponent(fpCurrentPath)}`);
+        const data = await r.json();
+        if (!data.ok) { list.innerHTML = `<div class="fp-empty">${esc(data.error)}</div>`; return; }
+        document.getElementById('fp-path').textContent = data.cwd + (data.path ? '/' + data.path : '');
+        if (!data.entries.length && data.parent == null) {
+          list.innerHTML = '<div class="fp-empty">空目录</div>';
+          return;
+        }
+        let html = '';
+        if (data.parent != null) {
+          html += `<div class="fp-item" onclick="fpNav('${esc(data.parent)}')"><span class="fp-icon">📁</span><span class="fp-name">..</span></div>`;
+        }
+        for (const e of data.entries) {
+          const rel = fpCurrentPath ? fpCurrentPath + '/' + e.name : e.name;
+          if (e.isDir) {
+            html += `<div class="fp-item" onclick="fpNav('${esc(rel)}')"><span class="fp-icon">📁</span><span class="fp-name">${esc(e.name)}</span></div>`;
+          } else {
+            html += `<div class="fp-item">
+              <span class="fp-icon">📄</span>
+              <span class="fp-name">${esc(e.name)}</span>
+              <span class="fp-size">${formatSize(e.size)}</span>
+              <a class="fp-dl" href="/api/files/${fpSessionId}/download?path=${encodeURIComponent(rel)}" download title="下载">下载</a>
+            </div>`;
+          }
+        }
+        list.innerHTML = html;
+      } catch (e) {
+        list.innerHTML = `<div class="fp-empty">加载失败: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function fpNav(path) {
+      fpCurrentPath = path;
+      loadFiles();
+    }
+
+    function formatSize(bytes) {
+      if (bytes == null) return '';
+      if (bytes < 1024) return bytes + ' B';
+      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+      if (bytes < 1024 * 1024 * 1024) return (bytes / 1024 / 1024).toFixed(1) + ' MB';
+      return (bytes / 1024 / 1024 / 1024).toFixed(1) + ' GB';
+    }
+
+    function fpUploadClick() {
+      document.getElementById('fp-file-input').click();
+    }
+
+    document.getElementById('fp-file-input').addEventListener('change', (e) => {
+      if (e.target.files.length) fpUploadFiles(e.target.files);
+      e.target.value = '';
+    });
+
+    async function fpUploadFiles(files) {
+      if (!fpSessionId || !files.length) return;
+      const progress = document.getElementById('fp-progress');
+      progress.style.display = 'block';
+      progress.textContent = `正在上传 ${files.length} 个文件...`;
+      try {
+        const form = new FormData();
+        for (const f of files) form.append('files', f, f.webkitRelativePath || f.name);
+        const r = await fetch(`/api/files/${fpSessionId}/upload?path=${encodeURIComponent(fpCurrentPath)}`, {
+          method: 'POST', body: form,
+        });
+        const data = await r.json();
+        if (data.ok) {
+          progress.textContent = `已上传 ${data.files.length} 个文件`;
+          loadFiles();
+        } else {
+          progress.textContent = '上传失败: ' + (data.error || '未知错误');
+        }
+      } catch (e) {
+        progress.textContent = '上传出错: ' + e.message;
+      }
+      setTimeout(() => { progress.style.display = 'none'; }, 3000);
+    }
+
+    // 拖拽上传
+    const fpDrop = document.getElementById('fp-drop');
+    fpDrop.addEventListener('dragover', (e) => { e.preventDefault(); fpDrop.classList.add('dragover'); });
+    fpDrop.addEventListener('dragleave', () => fpDrop.classList.remove('dragover'));
+    fpDrop.addEventListener('drop', (e) => {
+      e.preventDefault();
+      fpDrop.classList.remove('dragover');
+      if (e.dataTransfer.files.length) fpUploadFiles(e.dataTransfer.files);
+    });
+
+    // ── 文件同步（File System Access API）──────────
+    let syncDirHandle = null;
+    let syncMode = false;
+    let syncDiff = { toDownload: [], toUpload: [] };
+
+    async function fpStartSync() {
+      if (!window.showDirectoryPicker) {
+        alert('当前浏览器不支持文件夹访问，请使用 Chrome 或 Edge');
+        return;
+      }
+      if (!syncDirHandle) {
+        await fpPickDir();
+        if (!syncDirHandle) return;
+      }
+      syncMode = true;
+      document.getElementById('fp-sync-bar').style.display = 'flex';
+      document.getElementById('fp-drop').style.display = 'none';
+      await fpComputeDiff();
+    }
+
+    async function fpPickDir() {
+      try {
+        syncDirHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
+        document.getElementById('fp-sync-dir').textContent = syncDirHandle.name;
+        if (syncMode) await fpComputeDiff();
+      } catch (e) {
+        if (e.name !== 'AbortError') alert('选择文件夹失败: ' + e.message);
+      }
+    }
+
+    function fpExitSync() {
+      syncMode = false;
+      document.getElementById('fp-sync-bar').style.display = 'none';
+      document.getElementById('fp-diff-actions').style.display = 'none';
+      document.getElementById('fp-drop').style.display = '';
+      loadFiles();
+    }
+
+    // 递归遍历本地目录
+    async function walkLocalDir(dirHandle, prefix) {
+      const files = [];
+      for await (const [name, handle] of dirHandle.entries()) {
+        if (name.startsWith('.')) continue;
+        const rel = prefix ? prefix + '/' + name : name;
+        if (handle.kind === 'directory') {
+          files.push(...await walkLocalDir(handle, rel));
+        } else {
+          const file = await handle.getFile();
+          files.push({ name: rel, size: file.size, handle, dirHandle });
+        }
+      }
+      return files;
+    }
+
+    // 计算文件 SHA-256（与服务端一致）
+    async function hashFile(file) {
+      const buf = await file.arrayBuffer();
+      const hash = await crypto.subtle.digest('SHA-256', buf);
+      return Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2, '0')).join('');
+    }
+
+    // 比对差异
+    async function fpComputeDiff() {
+      if (!fpSessionId || !syncDirHandle) return;
+      const list = document.getElementById('fp-list');
+      list.innerHTML = '<div class="fp-empty">正在比对文件...</div>';
+      const progress = document.getElementById('fp-progress');
+      progress.style.display = 'block';
+
+      try {
+        // 获取服务端清单
+        progress.textContent = '获取服务器文件清单...';
+        const r = await fetch(`/api/files/${fpSessionId}/manifest?path=${encodeURIComponent(fpCurrentPath)}`);
+        const manifest = await r.json();
+        if (!manifest.ok) throw new Error(manifest.error);
+
+        // 遍历本地目录
+        progress.textContent = '扫描本地文件...';
+        const localFiles = await walkLocalDir(syncDirHandle, '');
+
+        const serverMap = new Map(manifest.files.map(f => [f.name, f]));
+        const localMap = new Map(localFiles.map(f => [f.name, f]));
+
+        const toDownload = []; // 服务器有而本地没有，或内容不同
+        const toUpload = [];   // 本地有而服务器没有，或内容不同
+
+        // 找需要下载的（服务器→本地）
+        let checked = 0;
+        for (const [name, sf] of serverMap) {
+          checked++;
+          if (checked % 20 === 0) progress.textContent = `比对中... ${checked}/${serverMap.size + localMap.size}`;
+          const lf = localMap.get(name);
+          if (!lf) {
+            toDownload.push({ name, size: sf.size, reason: 'new' });
+          } else if (lf.size !== sf.size) {
+            toDownload.push({ name, size: sf.size, reason: 'changed' });
+          } else if (sf.hash && sf.size < 10 * 1024 * 1024) {
+            // 大小相同但可能内容不同，比对哈希（仅 <10MB）
+            const file = await lf.handle.getFile();
+            const localHash = await hashFile(file);
+            if (localHash !== sf.hash) {
+              toDownload.push({ name, size: sf.size, reason: 'changed' });
+            }
+          }
+        }
+
+        // 找需要上传的（本地→服务器）
+        for (const [name, lf] of localMap) {
+          checked++;
+          if (checked % 20 === 0) progress.textContent = `比对中... ${checked}/${serverMap.size + localMap.size}`;
+          const sf = serverMap.get(name);
+          if (!sf) {
+            toUpload.push({ name, size: lf.size, reason: 'new', handle: lf.handle });
+          } else if (lf.size !== sf.size) {
+            toUpload.push({ name, size: lf.size, reason: 'changed', handle: lf.handle });
+          } else if (sf.hash && lf.size < 10 * 1024 * 1024) {
+            const file = await lf.handle.getFile();
+            const localHash = await hashFile(file);
+            if (localHash !== sf.hash) {
+              toUpload.push({ name, size: lf.size, reason: 'changed', handle: lf.handle });
+            }
+          }
+        }
+
+        syncDiff = { toDownload, toUpload };
+        fpRenderDiff();
+      } catch (e) {
+        list.innerHTML = `<div class="fp-empty">比对失败: ${esc(e.message)}</div>`;
+      }
+      progress.style.display = 'none';
+    }
+
+    function fpRenderDiff() {
+      const { toDownload, toUpload } = syncDiff;
+      const list = document.getElementById('fp-list');
+
+      if (!toDownload.length && !toUpload.length) {
+        list.innerHTML = '<div class="fp-diff-summary">文件已同步，无差异</div>';
+        document.getElementById('fp-diff-actions').style.display = 'none';
+        return;
+      }
+
+      let html = '<div class="fp-diff-summary">';
+      if (toDownload.length) html += `${toDownload.length} 个文件需下载到本地`;
+      if (toDownload.length && toUpload.length) html += '，';
+      if (toUpload.length) html += `${toUpload.length} 个文件需上传到服务器`;
+      html += '</div>';
+
+      for (const f of toDownload) {
+        html += `<div class="fp-diff-item">
+          <span class="badge ${f.reason === 'new' ? 'badge-new' : 'badge-changed'}">${f.reason === 'new' ? '新' : '改'}</span>
+          <span class="badge-arrow">↓</span>
+          <span class="fp-diff-name">${esc(f.name)}</span>
+          <span class="fp-size">${formatSize(f.size)}</span>
+        </div>`;
+      }
+      for (const f of toUpload) {
+        html += `<div class="fp-diff-item">
+          <span class="badge ${f.reason === 'new' ? 'badge-new' : 'badge-changed'}">${f.reason === 'new' ? '新' : '改'}</span>
+          <span class="badge-arrow">↑</span>
+          <span class="fp-diff-name">${esc(f.name)}</span>
+          <span class="fp-size">${formatSize(f.size)}</span>
+        </div>`;
+      }
+
+      list.innerHTML = html;
+      document.getElementById('fp-diff-actions').style.display = toDownload.length || toUpload.length ? 'flex' : 'none';
+    }
+
+    // 同步到本地：从服务器下载差异文件写入本地目录
+    async function fpSyncToLocal() {
+      const { toDownload } = syncDiff;
+      if (!toDownload.length) return;
+      const progress = document.getElementById('fp-progress');
+      progress.style.display = 'block';
+
+      let done = 0;
+      for (const f of toDownload) {
+        progress.textContent = `下载中 ${++done}/${toDownload.length}: ${f.name}`;
+        try {
+          const relPath = fpCurrentPath ? fpCurrentPath + '/' + f.name : f.name;
+          const r = await fetch(`/api/files/${fpSessionId}/download?path=${encodeURIComponent(relPath)}`);
+          if (!r.ok) continue;
+          const blob = await r.blob();
+          // 确保子目录存在并写入文件
+          const parts = f.name.split('/');
+          let dir = syncDirHandle;
+          for (let i = 0; i < parts.length - 1; i++) {
+            dir = await dir.getDirectoryHandle(parts[i], { create: true });
+          }
+          const fileHandle = await dir.getFileHandle(parts[parts.length - 1], { create: true });
+          const writable = await fileHandle.createWritable();
+          await writable.write(blob);
+          await writable.close();
+        } catch (e) {
+          console.error(`同步下载失败 ${f.name}:`, e);
+        }
+      }
+
+      progress.textContent = `已下载 ${done} 个文件到本地`;
+      setTimeout(() => { progress.style.display = 'none'; }, 3000);
+      await fpComputeDiff(); // 重新比对
+    }
+
+    // 同步到服务器：将本地差异文件上传
+    async function fpSyncToServer() {
+      const { toUpload } = syncDiff;
+      if (!toUpload.length) return;
+      const progress = document.getElementById('fp-progress');
+      progress.style.display = 'block';
+
+      // 分批上传，每批最多 20 个文件
+      const BATCH = 20;
+      let done = 0;
+      for (let i = 0; i < toUpload.length; i += BATCH) {
+        const batch = toUpload.slice(i, i + BATCH);
+        progress.textContent = `上传中 ${done}/${toUpload.length}...`;
+        const form = new FormData();
+        for (const f of batch) {
+          try {
+            const file = await f.handle.getFile();
+            form.append('files', file, f.name);
+          } catch (e) {
+            console.error(`读取本地文件失败 ${f.name}:`, e);
+          }
+        }
+        try {
+          await fetch(`/api/files/${fpSessionId}/upload?path=${encodeURIComponent(fpCurrentPath)}`, {
+            method: 'POST', body: form,
+          });
+        } catch (e) {
+          console.error('上传批次失败:', e);
+        }
+        done += batch.length;
+      }
+
+      progress.textContent = `已上传 ${done} 个文件到服务器`;
+      setTimeout(() => { progress.style.display = 'none'; }, 3000);
+      await fpComputeDiff(); // 重新比对
+    }
+
+    // 监听文件变更通知自动刷新
+    // 使用第一个 tab 的 socket 监听全局事件
+    function setupFileChangeListener() {
+      const tab = tabs[0];
+      if (!tab) return;
+      tab.socket.on('files:changed', ({ sessionId }) => {
+        if (sessionId === fpSessionId && document.getElementById('file-panel').classList.contains('open')) {
+          if (syncMode) fpComputeDiff();
+          else loadFiles();
+        }
+      });
+    }
+
     // ── 初始化：打开 URL 中指定的会话 ──
     const initTab = createTab(INIT_SESSION_ID);
     switchTab(initTab.id);
+    setupFileChangeListener();
   </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wendongfly/myhi",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Web-based terminal sharing with chat UI — control your terminal from phone via LAN/Tailscale",
   "type": "module",
   "main": "dist/index.js",
@@ -37,7 +37,7 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "node-pty": "^1.0.0",
+"node-pty": "^1.0.0",
     "socket.io-client": "^4.8.3"
   },
   "devDependencies": {