@wendongfly/zihi 1.1.3 → 1.1.5

package/dist/chat.html

@@ -203,6 +203,39 @@
     .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; }
+
     /* ── 底部选择面板 ─────────────────────── */
     .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 +276,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 +440,27 @@
     </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-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 +1775,117 @@
     // ── 辅助 ──────────────────────────────────────
     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 = '';
+    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/list?path=' + encodeURIComponent(fpCurrentPath));
+        const 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 = '';
+        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;
+          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>';
+          }
+        }
+        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; 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) {
+      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 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();
+        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(e.dataTransfer.files);
+    });
+
+    // 文件同步（File System Access API）
+    let syncDirHandle = null;
+    window.fpStartSync = async function() {
+      if (!window.showDirectoryPicker) { alert('当前浏览器不支持文件夹访问，请使用 Chrome 或 Edge'); return; }
+      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';
+      } catch (e) { if (e.name !== 'AbortError') alert('选择文件夹失败: ' + e.message); }
+    };
+    window.fpPickDir = async function() { await window.fpStartSync(); };
+    window.fpExitSync = function() {
+      syncDirHandle = null;
+      document.getElementById('fp-sync-bar').style.display = 'none';
+      document.getElementById('fp-drop').style.display = '';
+      fpLoadFiles();
+    };
+
+    // 监听文件变更
+    socket.on('files:changed', function() {
+      if (document.getElementById('file-panel').classList.contains('open')) fpLoadFiles();
+    });
     function scrollToBottom() { requestAnimationFrame(() => { chatArea.scrollTop = chatArea.scrollHeight; }); }
     function trimMessages() {
       const msgs = chatArea.querySelectorAll('.msg');

package/dist/files.html

@@ -576,8 +576,9 @@ function closeUploadSheet() {
 
 function handleFiles(files) {
   if (!files.length) return;
+  const copy = Array.from(files);
   closeUploadSheet();
-  uploadFiles(files);
+  uploadFiles(copy);
 }
 
 async function uploadFiles(files) {

package/dist/package.json

@@ -1 +1 @@
-{"type":"module","version":"1.1.2"}
+{"type":"module","version":"1.1.5"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wendongfly/zihi",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "AI Agent terminal sharing with interactive permission approval via Claude Agent SDK",
   "type": "module",
   "main": "dist/index.js",