@wendongfly/myhi 1.3.204 → 1.3.205

package/dist/chat.html

@@ -406,7 +406,26 @@
     .fp-header h3 { flex: 1; font-size: 0.9rem; margin: 0; color: var(--text); }
     .fp-btn { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.75rem; cursor: pointer; }
     .fp-btn:active { background: var(--border); }
-    .fp-path { padding: 0.4rem 0.75rem; font-size: 0.7rem; color: var(--muted); border-bottom: 1px solid var(--surface2); word-break: break-all; flex-shrink: 0; }
+    .fp-path { padding: 0.4rem 0.75rem; font-size: 0.74rem; color: var(--muted); border-bottom: 1px solid var(--surface2); word-break: break-all; flex-shrink: 0; line-height: 1.6; }
+    .fp-path .crumb { color: var(--blue); cursor: pointer; }
+    .fp-path .crumb:hover { text-decoration: underline; }
+    .fp-path .crumb.cur { color: var(--text); cursor: default; text-decoration: none; font-weight: 600; }
+    .fp-path .sep { margin: 0 0.25rem; color: var(--muted); }
+    .fp-x { padding: 0.25rem 0.55rem; }
+    #fp-tools { display: flex; gap: 0.4rem; align-items: center; padding: 0.35rem 0.75rem; border-bottom: 1px solid var(--surface2); flex-shrink: 0; }
+    #fp-sel-bar { display: none; align-items: center; gap: 0.3rem; padding: 0.45rem 0.6rem; background: var(--surface2); font-size: 0.76rem; border-top: 1px solid var(--border); flex-shrink: 0; }
+    #fp-sel-bar .fp-btn { padding: 0.3rem 0.45rem; white-space: nowrap; }
+    .fp-item .fp-more { color: var(--muted); padding: 0 0.45rem; font-size: 1rem; line-height: 1; letter-spacing: 1px; flex-shrink: 0; align-self: flex-start; border-radius: 6px; cursor: pointer; }
+    .fp-item .fp-more:hover { background: var(--surface2); color: var(--text); }
+    /* 行 / 工具 ⋯ 菜单：电脑上是贴着鼠标的小菜单，手机上是底部抽屉 */
+    #fp-menu-ov { position: fixed; inset: 0; z-index: 90; }
+    #fp-menu { position: fixed; z-index: 91; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); padding: 0.3rem 0; min-width: 12rem; max-width: 18rem; }
+    #fp-menu.sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; max-width: none; border-radius: 16px 16px 0 0; padding-bottom: max(0.6rem, env(safe-area-inset-bottom)); }
+    #fp-menu .mh { padding: 0.4rem 0.9rem 0.3rem; font-size: 0.7rem; color: var(--muted); word-break: break-all; border-bottom: 1px solid var(--surface2); }
+    #fp-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 0.84rem; padding: 0.55rem 0.9rem; cursor: pointer; }
+    #fp-menu.sheet button { padding: 0.8rem 1.1rem; font-size: 0.9rem; }
+    #fp-menu button:hover { background: var(--surface2); }
+    #fp-menu button small { color: var(--muted); font-size: 0.7rem; margin-left: 0.3rem; }
     .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: var(--text); }
     .fp-item:active { background: var(--surface2); }
@@ -419,12 +438,15 @@
     #fp-multi-btn.on { border-color: var(--purple); color: var(--purple); }
     .fp-item .fp-dl { color: var(--blue); font-size: 0.78rem; text-decoration: none; padding: 0.2rem 0.3rem; flex-shrink: 0; align-self: flex-start; }
     .fp-empty { text-align: center; color: var(--muted); padding: 2rem 0.75rem; font-size: 0.85rem; }
+    /* 拖拽上传区：平时不占位置，电脑上把文件拖进抽屉时才出现（手机没法拖拽） */
     .fp-drop-zone {
+      display: none;
       margin: 0.5rem 0.75rem; padding: 1.5rem; border: 2px dashed var(--border); border-radius: 8px;
       text-align: center; color: var(--muted); font-size: 0.8rem; flex-shrink: 0;
       transition: border-color 0.2s, background 0.2s;
     }
     .fp-drop-zone.dragover { border-color: var(--blue); background: rgba(88,166,255,0.08); }
+    #file-panel.dragging .fp-drop-zone { display: block; border-color: var(--blue); background: rgba(88,166,255,0.08); color: var(--blue); }
     .fp-progress { padding: 0.4rem 0.75rem; font-size: 0.75rem; color: var(--yellow); flex-shrink: 0; display: none; }
     .fp-sync-bar { display: flex; gap: 0.4rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--surface2); flex-shrink: 0; align-items: center; flex-wrap: wrap; }
     .fp-sync-bar .fp-btn { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
@@ -826,10 +848,8 @@
   <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>
+      <h3 id="fp-title">文件</h3>
+      <button class="fp-btn fp-x" onclick="closeFilePanel()" title="关闭">✕</button>
     </div>
     <div class="fp-sync-bar" id="fp-sync-bar" style="display:none">
       <span class="sync-dir" id="fp-sync-dir"></span>
@@ -837,26 +857,29 @@
       <button class="fp-btn" onclick="fpExitSync()">退出同步</button>
     </div>
     <div class="fp-path" id="fp-path"></div>
-    <div id="fp-tools" style="display:flex;gap:0.4rem;align-items:center;padding:0.3rem 0.75rem;flex-wrap:wrap">
-      <button class="fp-btn" onclick="fpOpenFolder()" title="在本机桌面打开该任务的文件夹——仅当浏览器与 myhi 服务在同一台机器时有效；远程访问不会有效果，请用下方列表浏览/下载">📂 打开当前文件夹（不支持远程）</button>
+    <!-- 工具栏只留常用的两个；同步 / 排序 / 本机打开文件夹收进 ⋯ -->
+    <div id="fp-tools">
+      <button class="fp-btn" onclick="fpUploadClick()" title="上传文件到当前目录（电脑上也可以直接把文件拖进来）">⬆ 上传</button>
+      <button class="fp-btn" id="fp-multi-btn" onclick="fpToggleMulti()" title="勾选多个文件 / 文件夹：打包下载，或一次引用给 AI">☑ 选择</button>
       <span style="flex:1"></span>
-      <button class="fp-btn" id="fp-multi-btn" onclick="fpToggleMulti()" title="勾选多个文件 / 文件夹，打包成一个 zip 下载">☑ 多选</button>
-      <button class="fp-btn" id="fp-sort-btn" onclick="fpToggleSort()" title="切换排序">排序: 名称</button>
+      <button class="fp-btn" onclick="fpToolsMenu(event)" title="更多：同步到本地、排序、在本机打开文件夹">⋯</button>
     </div>
-    <div id="fp-sel-bar" style="display:none;align-items:center;gap:0.4rem;padding:0.35rem 0.75rem;background:var(--surface2);font-size:0.78rem;flex-wrap:wrap">
-      <span id="fp-sel-count" style="color:var(--muted)">已选 0 项</span>
+    <div class="fp-list" id="fp-list"></div>
+    <!-- 选择模式的操作栏放底部：手指够得着 -->
+    <div id="fp-sel-bar">
+      <span id="fp-sel-count" style="color:var(--muted);white-space:nowrap">已选0</span>
       <span style="flex:1"></span>
       <button class="fp-btn" onclick="fpSelAll()">全选</button>
+      <button class="fp-btn" id="fp-sel-ref" onclick="fpReferSelected()" disabled title="把选中的文件路径一起插进消息框，让 AI 读这些文件">@ 引用</button>
       <button class="fp-btn fp-btn-primary" id="fp-sel-dl" onclick="fpZipSelected()" disabled>⬇ 打包下载</button>
-      <button class="fp-btn" onclick="fpToggleMulti(false)">取消</button>
+      <button class="fp-btn" onclick="fpToggleMulti(false)" title="取消选择">✕</button>
     </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>
+    <div class="fp-drop-zone" id="fp-drop">松开鼠标，上传到当前目录</div>
     <input type="file" id="fp-file-input" multiple style="display:none">
   </div>
 
@@ -4134,7 +4157,7 @@
         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 : '');
+        fpRenderCrumbs(data.cwd, data.path || '');
         if (!data.entries.length && data.parent == null) {
           list.innerHTML = '<div class="fp-empty">空目录</div>';
           return;
@@ -4156,19 +4179,15 @@
             html += `<div class="fp-item${on ? ' sel' : ''}" onclick="fpToggleSel('${escAttr(rel)}')"><input type="checkbox" class="fp-chk" ${on ? 'checked' : ''} tabindex="-1" style="pointer-events:none"><span class="fp-icon">${e.isDir ? '📁' : '📄'}</span><span class="fp-name" title="${escAttr(rel)}">${escHtml(e.name)}</span>${e.isDir ? '' : `<span class="fp-size">${fpFormatSize(e.size)}</span>`}</div>`;
             continue;
           }
-          if (e.isDir) {
-            html += `<div class="fp-item" onclick="fpNav('${escHtml(rel)}')"><span class="fp-icon">📁</span><span class="fp-name" title="${escAttr(rel)}">${escHtml(e.name)}</span><span class="fp-dl" onclick="event.stopPropagation();fpRefer('${escAttr(rel)}/')" title="引用：把目录路径插入消息框">@</span><span class="fp-dl" onclick="event.stopPropagation();fpZip(['${escAttr(rel)}'])" title="打包下载这个文件夹（zip）">⬇</span></div>`;
-          } else {
-            const editable = isEditableFile(e.name);
-            html += `<div class="fp-item" ${editable ? `style="cursor:pointer" onclick="openFileEditor('${escAttr(rel)}')" title="点击在线编辑"` : ''}>
-              <span class="fp-icon">${editable ? '📝' : '📄'}</span>
-              <span class="fp-name" title="${escAttr(rel)}">${escHtml(e.name)}</span>
-              <span class="fp-size">${fpFormatSize(e.size)}</span>
-              <span class="fp-dl" onclick="event.stopPropagation();fpRefer('${escAttr(rel)}')" title="引用：把文件路径插入消息框，让 AI 读这个文件">@</span>
-              ${editable ? `<span class="fp-dl" onclick="event.stopPropagation();openFileEditor('${escAttr(rel)}')" title="在线编辑">✏️</span>` : ''}
-              <a class="fp-dl" href="/api/files/${SESSION_ID}/download?path=${encodeURIComponent(rel)}" download title="下载" onclick="event.stopPropagation()">⬇</a>
-            </div>`;
-          }
+          // 点整行 = 打开（文件夹进入 / 文件预览或编辑）；其余操作都在行尾 ⋯（电脑上右键也行）
+          const kind = e.isDir ? 'd' : isEditableFile(e.name) ? 'e' : 'f';
+          const a = `'${escAttr(rel)}','${kind}'`;
+          html += `<div class="fp-item" onclick="fpOpen(${a})" oncontextmenu="fpItemMenu(event,${a})" title="${kind === 'f' ? '点击查看可用操作' : '点击打开'}">
+            <span class="fp-icon">${e.isDir ? '📁' : kind === 'e' ? '📝' : '📄'}</span>
+            <span class="fp-name">${escHtml(e.name)}</span>
+            ${e.isDir ? '' : `<span class="fp-size">${fpFormatSize(e.size)}</span>`}
+            <span class="fp-more" onclick="event.stopPropagation();fpItemMenu(event,${a})" title="更多操作">⋯</span>
+          </div>`;
         }
         list.innerHTML = html;
       } catch (e) {
@@ -4186,8 +4205,9 @@
       bar.style.display = fpSel ? 'flex' : 'none';
       document.getElementById('fp-multi-btn').classList.toggle('on', !!fpSel);
       if (!fpSel) return;
-      document.getElementById('fp-sel-count').textContent = `已选 ${fpSel.size} 项`;
+      document.getElementById('fp-sel-count').textContent = `已选${fpSel.size}`;
       document.getElementById('fp-sel-dl').disabled = !fpSel.size;
+      document.getElementById('fp-sel-ref').disabled = !fpSel.size;
     }
     window.fpToggleMulti = function(on) {
       fpSel = (on ?? !fpSel) ? new Set() : null;
@@ -4205,6 +4225,86 @@
       fpSyncSelBar(); fpLoadFiles();
     };
     window.fpZipSelected = function() { if (fpSel?.size) fpZip([...fpSel]); };
+    // 选中的一次引用给 AI：路径用空格连起来插进消息框
+    window.fpReferSelected = function() {
+      if (!fpSel?.size) return;
+      const list = [...fpSel];
+      fpToggleMulti(false);
+      fpRefer(list.join(' '));
+    };
+
+    // 面包屑：项目名 › 子目录 › …，点哪级回哪级
+    function fpRenderCrumbs(cwd, path) {
+      const el = document.getElementById('fp-path');
+      const root = String(cwd || '').replace(/[\\/]+$/, '').split(/[\\/]/).pop() || '项目';
+      const segs = path ? path.split('/') : [];
+      const parts = [{ name: root, rel: '' }, ...segs.map((n, i) => ({ name: n, rel: segs.slice(0, i + 1).join('/') }))];
+      el.innerHTML = parts.map((p, i) => i === parts.length - 1
+        ? `<span class="crumb cur">${escHtml(p.name)}</span>`
+        : `<span class="crumb" onclick="fpNav('${escAttr(p.rel)}')">${escHtml(p.name)}</span><span class="sep">›</span>`).join('');
+      el.title = String(cwd || '') + (path ? '/' + path : '');
+    }
+
+    // 点整行：文件夹进入；能在线看 / 改的打开（html / md 默认预览）；其他文件（图片、压缩包…）弹出操作菜单
+    window.fpOpen = function(rel, kind) {
+      if (fpSel) return fpToggleSel(rel);
+      if (kind === 'd') return fpNav(rel);
+      if (kind === 'e') return openFileEditor(rel);
+      fpItemMenu(null, rel, kind);
+    };
+    window.fpCopyPath = function(rel) {
+      const t = typeof feditAbs === 'function' ? feditAbs(rel) : rel;
+      const ok = () => addStatusMessage('已复制路径：' + t);
+      (navigator.clipboard?.writeText(t) || Promise.reject()).then(ok, () => {
+        const x = document.createElement('textarea'); x.value = t; document.body.appendChild(x); x.select();
+        try { document.execCommand('copy'); ok(); } catch {} x.remove();
+      });
+    };
+    function fpDownload(rel) {
+      const a = document.createElement('a');
+      a.href = `/api/files/${SESSION_ID}/download?path=${encodeURIComponent(rel)}`; a.download = '';
+      document.body.appendChild(a); a.click(); a.remove();
+    }
+
+    // 通用小菜单：电脑（鼠标）贴着点击位置弹，手机从底部弹
+    function fpMenu(ev, title, items) {
+      document.getElementById('fp-menu-ov')?.remove(); document.getElementById('fp-menu')?.remove();
+      const ov = document.createElement('div'); ov.id = 'fp-menu-ov';
+      const m = document.createElement('div'); m.id = 'fp-menu';
+      const sheet = !ev || !matchMedia('(pointer: fine)').matches;
+      if (sheet) { m.classList.add('sheet'); ov.style.background = 'rgba(0,0,0,0.45)'; }
+      m.innerHTML = (title ? `<div class="mh">${escHtml(title)}</div>` : '') +
+        items.map((it, i) => `<button data-i="${i}">${it[0]}${it[2] ? `<small>${escHtml(it[2])}</small>` : ''}</button>`).join('');
+      const close = () => { ov.remove(); m.remove(); };
+      ov.onclick = close; ov.oncontextmenu = (e) => { e.preventDefault(); close(); };
+      m.onclick = (e) => { const b = e.target.closest('button[data-i]'); if (!b) return; close(); items[+b.dataset.i][1](); };
+      document.body.appendChild(ov); document.body.appendChild(m);
+      if (!sheet) {
+        const r = m.getBoundingClientRect();
+        m.style.left = Math.max(8, Math.min(ev.clientX, innerWidth - r.width - 8)) + 'px';
+        m.style.top = Math.max(8, Math.min(ev.clientY, innerHeight - r.height - 8)) + 'px';
+      }
+    }
+    window.fpItemMenu = function(ev, rel, kind) {
+      if (ev) { ev.preventDefault(); ev.stopPropagation(); }
+      if (fpSel) return;
+      const items = [];
+      if (kind === 'd') items.push(['📂 打开', () => fpNav(rel)], ['⬇ 打包下载', () => fpZip([rel]), 'zip']);
+      else {
+        if (kind === 'e') items.push([/\.(html?|md|markdown)$/i.test(rel) ? '👁 查看 / 编辑' : '✏️ 编辑', () => openFileEditor(rel)]);
+        items.push(['⬇ 下载', () => fpDownload(rel)]);
+      }
+      items.push(['@ 引用到消息', () => fpRefer(kind === 'd' ? rel + '/' : rel), '让 AI 读它'], ['📋 复制路径', () => fpCopyPath(rel)]);
+      fpMenu(ev, rel, items);
+    };
+    window.fpToolsMenu = function(ev) {
+      const items = [
+        ['🔄 同步到本地文件夹', () => fpStartSync(), 'Chrome / Edge'],
+        [fpSort === 'recent' ? '🔤 按名称排序' : '🕘 按最近修改排序', () => fpToggleSort()],
+      ];
+      if (!document.body.classList.contains('no-desktop')) items.push(['📂 在这台电脑上打开文件夹', () => fpOpenFolder(), '远程访问无效']);
+      fpMenu(ev, '', items);
+    };
     window.fpZip = async function(paths) {
       const prog = document.getElementById('fp-progress');
       prog.textContent = '正在统计要打包的文件…'; prog.style.display = 'block';
@@ -4285,13 +4385,16 @@
       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');
+    // 拖拽上传：把文件拖到抽屉任意位置，出现提示区，松开即上传到当前目录
+    const fpPanel = document.getElementById('file-panel');
+    let fpDragDepth = 0;
+    const isFileDrag = (e) => [...(e.dataTransfer?.types || [])].includes('Files');
+    fpPanel.addEventListener('dragenter', (e) => { if (!isFileDrag(e) || syncMode) return; e.preventDefault(); fpDragDepth++; fpPanel.classList.add('dragging'); });
+    fpPanel.addEventListener('dragover', (e) => { if (isFileDrag(e) && !syncMode) e.preventDefault(); });
+    fpPanel.addEventListener('dragleave', () => { if (--fpDragDepth <= 0) { fpDragDepth = 0; fpPanel.classList.remove('dragging'); } });
+    fpPanel.addEventListener('drop', (e) => {
+      if (!isFileDrag(e) || syncMode) return;
+      e.preventDefault(); fpDragDepth = 0; fpPanel.classList.remove('dragging');
       if (e.dataTransfer.files.length) fpUploadFiles(e.dataTransfer.files);
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wendongfly/myhi",
-  "version": "1.3.204",
+  "version": "1.3.205",
   "description": "Web-based terminal sharing with chat UI — control your terminal from phone via LAN/Tailscale",
   "type": "module",
   "main": "dist/index.js",