@wendongfly/myhi 1.3.192 → 1.3.193

package/dist/index.html

@@ -249,6 +249,36 @@
     /* 窄栏悬停提示（原生 title 有延迟，这里即时显示） */
     #ws-tip { position: fixed; z-index: 60; left: 62px; background: var(--text); color: var(--bg); font-size: 0.75rem; padding: 0.3rem 0.55rem; border-radius: 6px;
       white-space: nowrap; pointer-events: none; display: none; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
+    /* 任务操作：⋯ 按钮（电脑上悬停才出现）+ 小菜单 / 原地改名 / 标签编辑 */
+    .card-more { display: none; background: none; border: none; color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 0.15rem 0.35rem; border-radius: 6px; cursor: pointer; }
+    .card-more:hover, .card-more.on { background: var(--border); color: var(--text); }
+    @media (hover: hover) and (pointer: fine) { .card:hover .card-more, .card-more.on { display: block; } }
+    #card-menu:not(.sheet-mode), #tag-pop:not(.sheet-mode) { position: fixed; z-index: 85; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); padding: 0.3rem; }
+    #card-menu:not(.sheet-mode) { min-width: 10.5rem; }
+    #card-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 0.84rem; padding: 0.5rem 0.65rem; border-radius: 7px; cursor: pointer; }
+    #card-menu button:hover { background: var(--bg); }
+    #card-menu button.danger { color: var(--red); }
+    #card-menu.sheet-mode, #tag-pop.sheet-mode { position: fixed; inset: auto 0 0 0; z-index: 85; }
+    #card-menu.sheet-mode { inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; }
+    #card-menu .cm-box { background: var(--surface); border-radius: 18px 18px 0 0; width: 100%; max-width: 640px; padding: 0.5rem 0 max(1rem, env(safe-area-inset-bottom)); }
+    #card-menu .cm-title { padding: 0.6rem 1.25rem 0.4rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    #card-menu.sheet-mode button { font-size: 0.95rem; padding: 0.9rem 1.25rem; border-radius: 0; border-top: 1px solid var(--border); }
+    #card-menu .cm-cancel { color: var(--muted) !important; text-align: center !important; border-top: 6px solid var(--bg) !important; }
+    .rename-inp { width: 100%; font-size: 0.9rem; font-weight: 600; padding: 0.15rem 0.35rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); color: var(--text); outline: none; }
+    #tag-pop:not(.sheet-mode) { width: 17rem; padding: 0.7rem; }
+    #tag-pop.sheet-mode { background: var(--surface); border-radius: 18px 18px 0 0; padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,0.35); max-width: 640px; margin: 0 auto; }
+    #tag-pop .tp-title { font-size: 0.8rem; font-weight: 600; color: var(--text2); margin-bottom: 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    #tag-pop .tp-cur, #tag-pop .tp-all { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+    #tag-pop .tp-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; background: rgba(124,58,237,0.14); border: 1px solid rgba(124,58,237,0.35); border-radius: 999px; padding: 0.1rem 0.25rem 0.1rem 0.55rem; }
+    #tag-pop .tp-chip b { cursor: pointer; color: var(--muted); font-weight: 400; padding: 0 0.2rem; }
+    #tag-pop .tp-chip b:hover { color: var(--red); }
+    #tag-pop .tp-none { font-size: 0.74rem; color: var(--muted); }
+    #tag-pop .tp-inp { width: 100%; margin: 0.6rem 0 0.2rem; font-size: 0.82rem; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); outline: none; }
+    #tag-pop .tp-inp:focus { border-color: var(--accent); }
+    #tag-pop .tp-sub { font-size: 0.7rem; color: var(--muted); margin: 0.45rem 0 0.3rem; }
+    #tag-pop .tp-sug { font-size: 0.74rem; color: var(--text2); border: 1px dashed var(--border); border-radius: 999px; padding: 0.1rem 0.5rem; cursor: pointer; }
+    #tag-pop .tp-sug:hover { border-color: var(--accent); color: var(--accent); }
+    #tag-pop .tp-done { display: block; margin: 0.65rem 0 0 auto; background: var(--accent); color: #fff; border: none; border-radius: 7px; padding: 0.35rem 0.9rem; font-size: 0.78rem; cursor: pointer; }
     /* 当前使用模式（单用户 / 多用户·管理员 / 多用户·成员），让成员知道为什么有些项是只读 */
     .set-mode { font-size: 0.72rem; color: var(--muted); margin: 0.35rem 0.25rem 0; }
     .set-mode a { color: var(--accent); text-decoration: none; }
@@ -809,6 +839,7 @@
     <div class="hs-tile"><span>🛡</span><div><b>护栏 / 密钥</b><p>敏感信息不外泄</p></div></div>
     <div class="hs-tile"><span>⚙️</span><div><b>会话设置</b><p>快捷栏、折叠、主题字号</p></div></div>
   </div>
+  <div class="hs-tip" style="margin-bottom:0.45rem">💡 进入任务后点顶栏 <kbd>?</kbd> 可看每个按钮是做什么的（模型、计划、压缩、清除…）；电脑上鼠标停在按钮上也有提示。</div>
   <div class="hs-tip">📱 手机浏览器打开同一地址即可（局域网 / Tailscale），建议「添加到主屏幕」当 App 用。</div>
   <div class="hs-actions">
     <button class="hs-ghost" onclick="closeHelpSheet()">我知道了</button>
@@ -1477,6 +1508,7 @@
 
   // 视图状态：分组方式 + 标签筛选
   let _allSessions = [];
+  let _renaming = null, _renderPending = false;   // 原地改名中的任务 id / 期间被推迟的刷新
   // 电脑端工作台状态（声明放这里：列表渲染会用到，必须先于任何一次渲染）
   let _wsCur = null;                                                  // 右侧当前打开的任务
   let _wsPending = new URLSearchParams(location.search).get('s');     // 刷新后回到上次的任务
@@ -1539,6 +1571,7 @@
           ${draftChip}
         </div>
         <div class="card-right">
+          <button class="card-more" title="更多操作（重命名 / 标签 / 终止）">⋯</button>
           ${!s.alive ? '<div class="st st-dead" title="会话进程已退出，点进去会自动恢复">已停止</div>'
             : s.busy ? '<div class="st st-busy" title="AI 正在执行">执行中</div>' : ''}
           ${s.viewers > 1 ? `<div class="viewers">👁 ${s.viewers}</div>` : ''}
@@ -1570,6 +1603,8 @@
 
   function renderSessions(sessions) {
     if (Array.isArray(sessions)) _allSessions = sessions;
+    // 正在原地改名：列表每 5 秒刷新一次会把输入框冲掉，先攒着，改完再刷
+    if (_renaming) { _renderPending = true; return; }
     renderTagFilter();
     updateGroupSeg();
 
@@ -1648,8 +1683,9 @@
     list.querySelectorAll('.card').forEach(card => {
       const id = card.dataset.id;
       const title = card.dataset.title;
-      card.addEventListener('click', () => openSession(id));
+      card.addEventListener('click', (e) => { if (!e.target.closest('.card-more, .rename-inp')) openSession(id); });
       card.addEventListener('contextmenu', (e) => showActions(e, id, title));
+      card.querySelector('.card-more')?.addEventListener('click', (e) => { e.stopPropagation(); showActions(e, id, title, e.currentTarget); });
       // 移动端长按
       let lpTimer = null;
       card.addEventListener('touchstart', (e) => { lpTimer = setTimeout(() => showActions(e, id, title), 550); }, { passive: true });
@@ -2305,38 +2341,131 @@
   // ── Kill ─────────────────────────────────────────────────────
   let _killId = null;
   // 会话操作菜单：打开 / 重命名 / 设置标签 / 终止
-  function showActions(e, id, title) {
+  // 任务操作菜单：电脑上（细指针）在 ⋯ 按钮或鼠标旁弹小菜单；手机上长按弹底部菜单。
+  // 原来电脑右键也弹手机式底部菜单（离鼠标很远、整屏变暗），重命名 / 标签用浏览器自带 prompt。
+  function showActions(e, id, title, anchor) {
     e.preventDefault();
-    const s = _allSessions.find(x => x.id === id);
-    const curTags = (s?.tags || []).join(', ');
+    closeCardMenu();
+    const items = [
+      ['✏️ 重命名', () => inlineRename(id)],
+      ['🏷 设置标签', () => openTagEditor(id, anchor || { x: e.clientX, y: e.clientY })],
+      ['↗ 在新窗口打开', () => window.open('/terminal/' + encodeURIComponent(id), '_blank')],
+      ['🗑 终止会话', () => showKill(e, id, title), true],
+    ];
+    if (matchMedia('(pointer: fine)').matches) {
+      const m = document.createElement('div');
+      m.id = 'card-menu';
+      m.innerHTML = items.map(([l, , danger], i) => `<button data-i="${i}" class="${danger ? 'danger' : ''}">${l}</button>`).join('');
+      document.body.appendChild(m);
+      m.querySelectorAll('button').forEach(b => b.onclick = (ev) => { ev.stopPropagation(); closeCardMenu(); items[b.dataset.i][1](); });
+      placePopover(m, anchor || { x: e.clientX, y: e.clientY });
+      if (anchor) anchor.classList.add('on');
+      m._anchor = anchor;
+      return;
+    }
+    // 手机：底部菜单
     const overlay = document.createElement('div');
-    overlay.style.cssText = 'position:fixed;inset:0;z-index:80;background:rgba(0,0,0,0.55);display:flex;align-items:flex-end;justify-content:center';
-    const box = document.createElement('div');
-    box.style.cssText = 'background:var(--surface,var(--surface));border-radius:18px 18px 0 0;width:100%;max-width:640px;padding:0.5rem 0 max(1rem,env(safe-area-inset-bottom))';
-    const mkBtn = (label, color) => `<button style="display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--border,var(--border));color:${color || 'var(--text,var(--text))'};font-size:0.95rem;padding:0.9rem 1.25rem;cursor:pointer">${label}</button>`;
-    box.innerHTML =
-      `<div style="padding:0.6rem 1.25rem 0.4rem;color:var(--muted,var(--muted));font-size:0.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(title)}</div>` +
-      mkBtn('打开') + mkBtn('重命名') + mkBtn('设置标签') + mkBtn('终止会话', 'var(--red,var(--red))') +
-      `<button style="display:block;width:100%;background:none;border:none;border-top:6px solid var(--bg,var(--bg));color:var(--muted,var(--muted));font-size:0.9rem;padding:0.85rem;cursor:pointer">取消</button>`;
-    overlay.appendChild(box);
-    const close = () => overlay.remove();
-    overlay.addEventListener('click', (ev) => { if (ev.target === overlay) close(); });
-    const btns = box.querySelectorAll('button');
-    btns[0].onclick = () => { close(); openSession(id); };
-    btns[1].onclick = () => {
-      close();
-      const nv = prompt('重命名会话', title);
-      if (nv && nv.trim()) socket.emit('rename', { sessionId: id, title: nv.trim() });
+    overlay.id = 'card-menu';
+    overlay.className = 'sheet-mode';
+    overlay.innerHTML = `<div class="cm-box"><div class="cm-title">${esc(title)}</div>` +
+      items.map(([l, , danger], i) => `<button data-i="${i}" class="${danger ? 'danger' : ''}">${l}</button>`).join('') +
+      `<button class="cm-cancel">取消</button></div>`;
+    document.body.appendChild(overlay);
+    overlay.addEventListener('click', (ev) => { if (ev.target === overlay) closeCardMenu(); });
+    overlay.querySelector('.cm-cancel').onclick = closeCardMenu;
+    overlay.querySelectorAll('button[data-i]').forEach(b => b.onclick = () => { closeCardMenu(); items[b.dataset.i][1](); });
+  }
+  function closeCardMenu() {
+    const m = document.getElementById('card-menu');
+    if (m) { m._anchor?.classList.remove('on'); m.remove(); }
+  }
+  // 弹层贴着锚点（按钮或鼠标位置）放，超出视口就往回收
+  function placePopover(el, anchor) {
+    const r = anchor.getBoundingClientRect ? anchor.getBoundingClientRect() : { left: anchor.x, right: anchor.x, top: anchor.y, bottom: anchor.y };
+    const w = el.offsetWidth, h = el.offsetHeight;
+    let x = r.left, y = r.bottom + 4;
+    if (x + w > innerWidth - 8) x = Math.max(8, r.right - w);
+    if (y + h > innerHeight - 8) y = Math.max(8, r.top - h - 4);
+    el.style.left = x + 'px'; el.style.top = y + 'px';
+  }
+  document.addEventListener('mousedown', (e) => {
+    if (!e.target.closest('#card-menu') && !e.target.closest('.card-more')) closeCardMenu();
+    if (!e.target.closest('#tag-pop') && !e.target.closest('#card-menu')) closeTagEditor();
+  });
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { closeCardMenu(); closeTagEditor(); } });
+
+  // 原地改名：标题变输入框，回车 / 失焦保存，Esc 取消
+  function inlineRename(id) {
+    const card = document.querySelector(`#list .card[data-id="${CSS.escape(id)}"]`);
+    const t = card?.querySelector('.card-title');
+    if (!t) return;
+    const old = _allSessions.find(x => x.id === id)?.title || t.textContent;
+    _renaming = id;
+    const inp = document.createElement('input');
+    inp.className = 'rename-inp';
+    inp.value = old;
+    inp.maxLength = 80;
+    t.replaceWith(inp);
+    inp.focus(); inp.select();
+    let done = false;
+    const finish = (save) => {
+      if (done) return; done = true;
+      const v = inp.value.trim();
+      if (save && v && v !== old) {
+        socket.emit('rename', { sessionId: id, title: v });
+        const s = _allSessions.find(x => x.id === id); if (s) s.title = v;
+      }
+      _renaming = null;
+      _renderPending = false;
+      renderSessions();
     };
-    btns[2].onclick = () => {
-      close();
-      const nv = prompt('设置标签（多个用逗号分隔，留空清除）', curTags);
-      if (nv !== null) socket.emit('set-tags', { sessionId: id, tags: nv.split(/[,，]/).map(t => t.trim()).filter(Boolean) });
+    inp.addEventListener('keydown', (ev) => {
+      if (ev.key === 'Enter' && !ev.isComposing) { ev.preventDefault(); finish(true); }
+      else if (ev.key === 'Escape') { ev.stopPropagation(); finish(false); }
+    });
+    inp.addEventListener('blur', () => finish(true));
+    inp.addEventListener('click', (ev) => ev.stopPropagation());
+  }
+
+  // 标签编辑：当前标签（点 × 去掉）+ 其他任务用过的标签（点一下加上）+ 输入新标签回车；每次改动立即保存
+  function openTagEditor(id, anchor) {
+    closeTagEditor();
+    const s = _allSessions.find(x => x.id === id);
+    if (!s) return;
+    const pop = document.createElement('div');
+    pop.id = 'tag-pop';
+    if (!matchMedia('(pointer: fine)').matches) pop.classList.add('sheet-mode');
+    document.body.appendChild(pop);
+    const save = (tags) => {
+      s.tags = tags;
+      socket.emit('set-tags', { sessionId: id, tags });
+      draw();
     };
-    btns[3].onclick = () => { close(); showKill(e, id, title); };
-    btns[4].onclick = close;
-    document.body.appendChild(overlay);
+    function draw() {
+      const cur = s.tags || [];
+      const all = [...new Set(_allSessions.flatMap(x => x.tags || []))].filter(t => !cur.includes(t)).sort((a, b) => a.localeCompare(b, 'zh'));
+      pop.innerHTML = `<div class="tp-title">🏷 「${esc(s.title || '')}」的标签</div>` +
+        `<div class="tp-cur">${cur.length ? cur.map(t => `<span class="tp-chip">${esc(t)}<b data-del="${esc(t)}">×</b></span>`).join('') : '<span class="tp-none">还没有标签</span>'}</div>` +
+        `<input class="tp-inp" placeholder="输入新标签，回车添加" maxlength="20">` +
+        (all.length ? `<div class="tp-sub">点一下添加：</div><div class="tp-all">${all.map(t => `<span class="tp-sug" data-add="${esc(t)}">＋ ${esc(t)}</span>`).join('')}</div>` : '') +
+        `<button class="tp-done">完成</button>`;
+      pop.querySelectorAll('[data-del]').forEach(b => b.onclick = () => save(cur.filter(t => t !== b.dataset.del)));
+      pop.querySelectorAll('[data-add]').forEach(b => b.onclick = () => save([...cur, b.dataset.add]));
+      const inp = pop.querySelector('.tp-inp');
+      inp.addEventListener('keydown', (ev) => {
+        if (ev.key === 'Enter' && !ev.isComposing) {
+          ev.preventDefault();
+          const v = inp.value.trim().replace(/[,，]/g, '');
+          if (v && !cur.includes(v)) save([...cur, v]); else inp.value = '';
+        }
+      });
+      pop.querySelector('.tp-done').onclick = closeTagEditor;
+      if (!pop.classList.contains('sheet-mode')) placePopover(pop, anchor);
+      setTimeout(() => pop.querySelector('.tp-inp')?.focus(), 0);
+    }
+    draw();
   }
+  function closeTagEditor() { document.getElementById('tag-pop')?.remove(); }
 
   function showKill(e, id, title) {
     if (e && e.preventDefault) e.preventDefault();