@wendongfly/myhi 1.2.0 → 1.3.1

package/dist/chat.html

@@ -172,6 +172,52 @@
     .setting-toggle input[type=checkbox]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left 0.2s; }
     .setting-toggle input[type=checkbox]:checked::after { left: 18px; }
 
+    /* ── 文件管理面板 ─────────────────────── */
+    #file-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 62; 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: 63;
+      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; }
+
     /* ── 底部选择面板 ─────────────────────── */
     .action-sheet { display: none; position: fixed; inset: 0; z-index: 80; }
     .action-sheet.open { display: flex; align-items: flex-end; justify-content: center; }
@@ -212,6 +258,7 @@
       <div id="session-title">加载中...</div>
       <div id="session-cwd"></div>
     </div>
+    <button class="top-btn" onclick="openFilePanel()" title="文件" style="font-size:0.7rem;color:var(--muted)">文件</button>
     <button class="top-btn" onclick="openSettings()" title="设置">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
     </button>
@@ -290,6 +337,31 @@
     </div>
   </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>
+
   <!-- 设置面板 -->
   <div id="settings-backdrop" onclick="closeSettings()"></div>
   <div id="settings-panel">
@@ -1327,6 +1399,324 @@
       updateShortcutBar();
     }
 
+    // ── 文件管理 ──────────────────────────────────
+    let fpCurrentPath = '';
+    window.openFilePanel = function() {
+      fpCurrentPath = '';
+      fpLoadFiles();
+      document.getElementById('file-panel').classList.add('open');
+      document.getElementById('file-panel-backdrop').classList.add('open');
+    };
+    window.closeFilePanel = function() {
+      document.getElementById('file-panel').classList.remove('open');
+      document.getElementById('file-panel-backdrop').classList.remove('open');
+    };
+
+    async function fpLoadFiles() {
+      const list = document.getElementById('fp-list');
+      list.innerHTML = '<div class="fp-empty">加载中...</div>';
+      try {
+        const r = await fetch(`/api/files/${SESSION_ID}?path=${encodeURIComponent(fpCurrentPath)}`);
+        const data = await r.json();
+        if (!data.ok) { list.innerHTML = `<div class="fp-empty">${escHtml(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('${escHtml(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('${escHtml(rel)}')"><span class="fp-icon">📁</span><span class="fp-name">${escHtml(e.name)}</span></div>`;
+          } else {
+            html += `<div class="fp-item">
+              <span class="fp-icon">📄</span>
+              <span class="fp-name">${escHtml(e.name)}</span>
+              <span class="fp-size">${fpFormatSize(e.size)}</span>
+              <a class="fp-dl" href="/api/files/${SESSION_ID}/download?path=${encodeURIComponent(rel)}" download title="下载">下载</a>
+            </div>`;
+          }
+        }
+        list.innerHTML = html;
+      } catch (e) {
+        list.innerHTML = `<div class="fp-empty">加载失败: ${escHtml(e.message)}</div>`;
+      }
+    }
+
+    window.fpNav = function(path) { fpCurrentPath = path; fpLoadFiles(); };
+
+    function fpFormatSize(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';
+    }
+
+    window.fpUploadClick = function() { 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 (!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/${SESSION_ID}/upload?path=${encodeURIComponent(fpCurrentPath)}`, {
+          method: 'POST', body: form,
+        });
+        const data = await r.json();
+        if (data.ok) {
+          progress.textContent = `已上传 ${data.files.length} 个文件`;
+          fpLoadFiles();
+        } 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);
+    });
+
+    // 监听文件变更
+    socket.on('files:changed', ({ sessionId }) => {
+      if (sessionId === SESSION_ID && document.getElementById('file-panel').classList.contains('open')) {
+        if (syncMode) fpComputeDiff();
+        else fpLoadFiles();
+      }
+    });
+
+    // ── 文件同步（File System Access API）──────────
+    let syncDirHandle = null;
+    let syncMode = false;
+    let syncDiff = { toDownload: [], toUpload: [] };
+
+    window.fpStartSync = async function() {
+      if (!window.showDirectoryPicker) {
+        alert('当前浏览器不支持文件夹访问，请使用 Chrome 或 Edge');
+        return;
+      }
+      if (!syncDirHandle) {
+        await fpPickDirInner();
+        if (!syncDirHandle) return;
+      }
+      syncMode = true;
+      document.getElementById('fp-sync-bar').style.display = 'flex';
+      document.getElementById('fp-drop').style.display = 'none';
+      await fpComputeDiff();
+    };
+
+    window.fpPickDir = async function() { await fpPickDirInner(); };
+    async function fpPickDirInner() {
+      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);
+      }
+    }
+
+    window.fpExitSync = function() {
+      syncMode = false;
+      document.getElementById('fp-sync-bar').style.display = 'none';
+      document.getElementById('fp-diff-actions').style.display = 'none';
+      document.getElementById('fp-drop').style.display = '';
+      fpLoadFiles();
+    };
+
+    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 });
+        }
+      }
+      return files;
+    }
+
+    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() {
+      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/${SESSION_ID}/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;
+        const total = serverMap.size + localMap.size;
+        for (const [name, sf] of serverMap) {
+          if (++checked % 20 === 0) progress.textContent = `比对中... ${checked}/${total}`;
+          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) {
+            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) {
+          if (++checked % 20 === 0) progress.textContent = `比对中... ${checked}/${total}`;
+          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">比对失败: ${escHtml(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">${escHtml(f.name)}</span>
+          <span class="fp-size">${fpFormatSize(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">${escHtml(f.name)}</span>
+          <span class="fp-size">${fpFormatSize(f.size)}</span>
+        </div>`;
+      }
+
+      list.innerHTML = html;
+      document.getElementById('fp-diff-actions').style.display = 'flex';
+    }
+
+    window.fpSyncToLocal = async function() {
+      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/${SESSION_ID}/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 fh = await dir.getFileHandle(parts[parts.length - 1], { create: true });
+          const w = await fh.createWritable();
+          await w.write(blob);
+          await w.close();
+        } catch (e) { console.error(`同步下载失败 ${f.name}:`, e); }
+      }
+      progress.textContent = `已下载 ${done} 个文件到本地`;
+      setTimeout(() => { progress.style.display = 'none'; }, 3000);
+      await fpComputeDiff();
+    };
+
+    window.fpSyncToServer = async function() {
+      const { toUpload } = syncDiff;
+      if (!toUpload.length) return;
+      const progress = document.getElementById('fp-progress');
+      progress.style.display = 'block';
+      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 { form.append('files', await f.handle.getFile(), f.name); }
+          catch (e) { console.error(`读取失败 ${f.name}:`, e); }
+        }
+        try {
+          await fetch(`/api/files/${SESSION_ID}/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();
+    };
+
     // ── 设置面板 ──────────────────────────────────
     window.openSettings = function() { document.getElementById('settings-backdrop').classList.add('open'); document.getElementById('settings-panel').classList.add('open'); syncSettingsUI(); };
     window.closeSettings = function() { document.getElementById('settings-backdrop').classList.remove('open'); document.getElementById('settings-panel').classList.remove('open'); };