@wendongfly/zihi 1.1.4 → 1.1.6

package/dist/chat.html

@@ -203,6 +203,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; }
@@ -243,7 +289,7 @@
       <div id="session-title">加载中...</div>
       <div id="session-cwd"></div>
     </div>
-    <button class="top-btn" onclick="openFiles()" title="文件" style="font-size:0.7rem;color:var(--muted)">文件</button>
+    <button class="top-btn" onclick="openFilePanel()" title="文件" style="font-size:0.7rem;color:var(--muted)">文件</button>
     <button class="top-btn" onclick="showUsage()" 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>
@@ -407,6 +453,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="status-overlay">连接中...</div>
 
   <script>
@@ -1721,7 +1792,285 @@
     // ── 辅助 ──────────────────────────────────────
     function updateViewers(count) { document.getElementById('viewer-count').textContent = count > 1 ? `${count} 人在线` : ''; }
     window.goBack = function() { window.location.href = '/'; };
-    window.openFiles = function() { window.open('/files?session=' + SESSION_ID, '_blank'); };
+    // ── 文件管理面板 ──────────────────────────────
+    let fpCurrentPath = '';
+    var fpQ = 'sessionId=' + encodeURIComponent(SESSION_ID);
+    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() {
+      var list = document.getElementById('fp-list');
+      list.innerHTML = '<div class="fp-empty">加载中...</div>';
+      try {
+        var r = await fetch('/api/files/list?path=' + encodeURIComponent(fpCurrentPath) + '&' + fpQ);
+        var data = await r.json();
+        if (data.error) { list.innerHTML = '<div class="fp-empty">' + escHtml(data.error) + '</div>'; return; }
+        document.getElementById('fp-path').textContent = data.current || '';
+        var html = '';
+        if (data.parent) {
+          html += '<div class="fp-item" onclick="fpNav(\'' + escHtml(data.parent).replace(/'/g, "\\'") + '\')"><span class="fp-icon">📁</span><span class="fp-name">..</span></div>';
+        }
+        for (var i = 0; i < data.entries.length; i++) {
+          var e = data.entries[i];
+          var full = data.current + '/' + e.name;
+          if (e.type === 'dir') {
+            html += '<div class="fp-item" onclick="fpNav(\'' + escHtml(full).replace(/'/g, "\\'") + '\')"><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/download?path=' + encodeURIComponent(full) + '&' + fpQ + '" download title="下载">下载</a></div>';
+          }
+        }
+        list.innerHTML = html || '<div class="fp-empty">空目录</div>';
+      } catch (e) {
+        list.innerHTML = '<div class="fp-empty">加载失败: ' + escHtml(e.message) + '</div>';
+      }
+    }
+
+    window.fpNav = function(path) { fpCurrentPath = path; if (syncMode) fpComputeDiff(); else 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', function(e) {
+      var copy = Array.from(e.target.files);
+      e.target.value = '';
+      if (copy.length) fpUploadFiles(copy);
+    });
+
+    async function fpUploadFiles(files) {
+      if (!files.length) return;
+      var progress = document.getElementById('fp-progress');
+      progress.style.display = 'block';
+      progress.textContent = '正在上传 ' + files.length + ' 个文件...';
+      try {
+        var form = new FormData();
+        for (var i = 0; i < files.length; i++) form.append('files', files[i], files[i].webkitRelativePath || files[i].name);
+        var r = await fetch('/api/files/upload?path=' + encodeURIComponent(fpCurrentPath) + '&' + fpQ, { method: 'POST', body: form });
+        var 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(function() { progress.style.display = 'none'; }, 3000);
+    }
+
+    // 拖拽上传
+    var fpDropEl = document.getElementById('fp-drop');
+    fpDropEl.addEventListener('dragover', function(e) { e.preventDefault(); fpDropEl.classList.add('dragover'); });
+    fpDropEl.addEventListener('dragleave', function() { fpDropEl.classList.remove('dragover'); });
+    fpDropEl.addEventListener('drop', function(e) {
+      e.preventDefault();
+      fpDropEl.classList.remove('dragover');
+      if (e.dataTransfer.files.length) fpUploadFiles(Array.from(e.dataTransfer.files));
+    });
+
+    // ── 文件同步（File System Access API）──────────
+    var syncDirHandle = null;
+    var syncMode = false;
+    var 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) {
+      var files = [];
+      for await (var entry of dirHandle.entries()) {
+        var name = entry[0], handle = entry[1];
+        if (name.startsWith('.')) continue;
+        var rel = prefix ? prefix + '/' + name : name;
+        if (handle.kind === 'directory') {
+          files.push.apply(files, await walkLocalDir(handle, rel));
+        } else {
+          var file = await handle.getFile();
+          files.push({ name: rel, size: file.size, handle: handle });
+        }
+      }
+      return files;
+    }
+
+    async function hashFile(file) {
+      var buf = await file.arrayBuffer();
+      var hash = await crypto.subtle.digest('SHA-256', buf);
+      return Array.from(new Uint8Array(hash)).map(function(b) { return b.toString(16).padStart(2, '0'); }).join('');
+    }
+
+    async function fpComputeDiff() {
+      var list = document.getElementById('fp-list');
+      list.innerHTML = '<div class="fp-empty">正在比对文件...</div>';
+      var progress = document.getElementById('fp-progress');
+      progress.style.display = 'block';
+      try {
+        progress.textContent = '获取服务器文件清单...';
+        var r = await fetch('/api/files/list?path=' + encodeURIComponent(fpCurrentPath) + '&' + fpQ + '&recursive=1');
+        var data = await r.json();
+        if (data.error) throw new Error(data.error);
+
+        progress.textContent = '扫描本地文件...';
+        var localFiles = await walkLocalDir(syncDirHandle, '');
+        var serverFiles = (data.entries || []).filter(function(e) { return e.type === 'file'; });
+        var serverMap = new Map(serverFiles.map(function(f) { return [f.name, f]; }));
+        var localMap = new Map(localFiles.map(function(f) { return [f.name, f]; }));
+
+        var toDownload = [], toUpload = [];
+        var checked = 0, total = serverMap.size + localMap.size;
+
+        for (var entry of serverMap) {
+          var sName = entry[0], sf = entry[1];
+          if (++checked % 20 === 0) progress.textContent = '比对中... ' + checked + '/' + total;
+          var lf = localMap.get(sName);
+          if (!lf) {
+            toDownload.push({ name: sName, size: sf.size, reason: 'new' });
+          } else if (lf.size !== sf.size) {
+            toDownload.push({ name: sName, size: sf.size, reason: 'changed' });
+          }
+        }
+        for (var entry2 of localMap) {
+          var lName = entry2[0], lf2 = entry2[1];
+          if (++checked % 20 === 0) progress.textContent = '比对中... ' + checked + '/' + total;
+          var sf2 = serverMap.get(lName);
+          if (!sf2) {
+            toUpload.push({ name: lName, size: lf2.size, reason: 'new', handle: lf2.handle });
+          } else if (lf2.size !== sf2.size) {
+            toUpload.push({ name: lName, size: lf2.size, reason: 'changed', handle: lf2.handle });
+          }
+        }
+
+        syncDiff = { toDownload: toDownload, toUpload: toUpload };
+        fpRenderDiff();
+      } catch (e) {
+        list.innerHTML = '<div class="fp-empty">比对失败: ' + escHtml(e.message) + '</div>';
+      }
+      progress.style.display = 'none';
+    }
+
+    function fpRenderDiff() {
+      var td = syncDiff.toDownload, tu = syncDiff.toUpload;
+      var list = document.getElementById('fp-list');
+      if (!td.length && !tu.length) {
+        list.innerHTML = '<div class="fp-diff-summary">文件已同步，无差异</div>';
+        document.getElementById('fp-diff-actions').style.display = 'none';
+        return;
+      }
+      var html = '<div class="fp-diff-summary">';
+      if (td.length) html += td.length + ' 个文件需下载到本地';
+      if (td.length && tu.length) html += '，';
+      if (tu.length) html += tu.length + ' 个文件需上传到服务器';
+      html += '</div>';
+      for (var i = 0; i < td.length; i++) {
+        var f = td[i];
+        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 (var j = 0; j < tu.length; j++) {
+        var g = tu[j];
+        html += '<div class="fp-diff-item"><span class="badge ' + (g.reason === 'new' ? 'badge-new' : 'badge-changed') + '">' + (g.reason === 'new' ? '新' : '改') + '</span><span class="badge-arrow">↑</span><span class="fp-diff-name">' + escHtml(g.name) + '</span><span class="fp-size">' + fpFormatSize(g.size) + '</span></div>';
+      }
+      list.innerHTML = html;
+      document.getElementById('fp-diff-actions').style.display = 'flex';
+    }
+
+    window.fpSyncToLocal = async function() {
+      var toDownload = syncDiff.toDownload;
+      if (!toDownload.length) return;
+      var progress = document.getElementById('fp-progress');
+      progress.style.display = 'block';
+      var done = 0;
+      for (var i = 0; i < toDownload.length; i++) {
+        var f = toDownload[i];
+        progress.textContent = '下载中 ' + (++done) + '/' + toDownload.length + ': ' + f.name;
+        try {
+          var relPath = fpCurrentPath ? fpCurrentPath + '/' + f.name : f.name;
+          var r = await fetch('/api/files/download?path=' + encodeURIComponent(relPath) + '&' + fpQ);
+          if (!r.ok) continue;
+          var blob = await r.blob();
+          var parts = f.name.split('/');
+          var dir = syncDirHandle;
+          for (var p = 0; p < parts.length - 1; p++) {
+            dir = await dir.getDirectoryHandle(parts[p], { create: true });
+          }
+          var fh = await dir.getFileHandle(parts[parts.length - 1], { create: true });
+          var w = await fh.createWritable();
+          await w.write(blob);
+          await w.close();
+        } catch (e) { console.error('同步下载失败 ' + f.name + ':', e); }
+      }
+      progress.textContent = '已下载 ' + done + ' 个文件到本地';
+      setTimeout(function() { progress.style.display = 'none'; }, 3000);
+      await fpComputeDiff();
+    };
+
+    window.fpSyncToServer = async function() {
+      var toUpload = syncDiff.toUpload;
+      if (!toUpload.length) return;
+      var progress = document.getElementById('fp-progress');
+      progress.style.display = 'block';
+      var BATCH = 20, done = 0;
+      for (var i = 0; i < toUpload.length; i += BATCH) {
+        var batch = toUpload.slice(i, i + BATCH);
+        progress.textContent = '上传中 ' + done + '/' + toUpload.length + '...';
+        var form = new FormData();
+        for (var b = 0; b < batch.length; b++) {
+          try { form.append('files', await batch[b].handle.getFile(), batch[b].name); }
+          catch (e) { console.error('读取失败 ' + batch[b].name + ':', e); }
+        }
+        try {
+          await fetch('/api/files/upload?path=' + encodeURIComponent(fpCurrentPath) + '&' + fpQ, { method: 'POST', body: form });
+        } catch (e) { console.error('上传批次失败:', e); }
+        done += batch.length;
+      }
+      progress.textContent = '已上传 ' + done + ' 个文件到服务器';
+      setTimeout(function() { progress.style.display = 'none'; }, 3000);
+      await fpComputeDiff();
+    };
+
+    // 监听文件变更
+    socket.on('files:changed', function(data) {
+      if (data.sessionId === SESSION_ID && document.getElementById('file-panel').classList.contains('open')) {
+        if (syncMode) fpComputeDiff(); else fpLoadFiles();
+      }
+    });
     function scrollToBottom() { requestAnimationFrame(() => { chatArea.scrollTop = chatArea.scrollHeight; }); }
     function trimMessages() {
       const msgs = chatArea.querySelectorAll('.msg');