@wendongfly/zihi 1.1.5 → 1.1.6

package/dist/chat.html

@@ -235,6 +235,19 @@
     .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; }
@@ -456,6 +469,10 @@
     </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">
@@ -1777,6 +1794,7 @@
     window.goBack = function() { window.location.href = '/'; };
     // ── 文件管理面板 ──────────────────────────────
     let fpCurrentPath = '';
+    var fpQ = 'sessionId=' + encodeURIComponent(SESSION_ID);
     window.openFilePanel = function() {
       fpCurrentPath = '';
       fpLoadFiles();
@@ -1789,23 +1807,24 @@
     };
 
     async function fpLoadFiles() {
-      const list = document.getElementById('fp-list');
+      var list = document.getElementById('fp-list');
       list.innerHTML = '<div class="fp-empty">加载中...</div>';
       try {
-        const r = await fetch('/api/files/list?path=' + encodeURIComponent(fpCurrentPath));
-        const data = await r.json();
+        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 || '';
-        let html = '';
+        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 (const e of data.entries) {
-          const full = data.current + '/' + e.name;
+        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) + '" download title="下载">下载</a></div>';
+            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>';
@@ -1814,7 +1833,7 @@
       }
     }
 
-    window.fpNav = function(path) { fpCurrentPath = path; fpLoadFiles(); };
+    window.fpNav = function(path) { fpCurrentPath = path; if (syncMode) fpComputeDiff(); else fpLoadFiles(); };
 
     function fpFormatSize(bytes) {
       if (bytes == null) return '';
@@ -1827,20 +1846,21 @@
     window.fpUploadClick = function() { document.getElementById('fp-file-input').click(); };
 
     document.getElementById('fp-file-input').addEventListener('change', function(e) {
-      if (e.target.files.length) fpUploadFiles(e.target.files);
+      var copy = Array.from(e.target.files);
       e.target.value = '';
+      if (copy.length) fpUploadFiles(copy);
     });
 
     async function fpUploadFiles(files) {
       if (!files.length) return;
-      const progress = document.getElementById('fp-progress');
+      var progress = document.getElementById('fp-progress');
       progress.style.display = 'block';
       progress.textContent = '正在上传 ' + files.length + ' 个文件...';
       try {
-        const form = new FormData();
-        for (const file of files) form.append('files', file, file.webkitRelativePath || file.name);
-        const r = await fetch('/api/files/upload?path=' + encodeURIComponent(fpCurrentPath), { method: 'POST', body: form });
-        const data = await r.json();
+        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();
@@ -1860,31 +1880,196 @@
     fpDropEl.addEventListener('drop', function(e) {
       e.preventDefault();
       fpDropEl.classList.remove('dragover');
-      if (e.dataTransfer.files.length) fpUploadFiles(e.dataTransfer.files);
+      if (e.dataTransfer.files.length) fpUploadFiles(Array.from(e.dataTransfer.files));
     });
 
-    // 文件同步（File System Access API）
-    let syncDirHandle = null;
+    // ── 文件同步（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-bar').style.display = 'flex';
         document.getElementById('fp-sync-dir').textContent = syncDirHandle.name;
-        document.getElementById('fp-drop').style.display = 'none';
+        if (syncMode) await fpComputeDiff();
       } catch (e) { if (e.name !== 'AbortError') alert('选择文件夹失败: ' + e.message); }
-    };
-    window.fpPickDir = async function() { await window.fpStartSync(); };
+    }
     window.fpExitSync = function() {
-      syncDirHandle = null;
+      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() {
-      if (document.getElementById('file-panel').classList.contains('open')) fpLoadFiles();
+    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() {