@wendongfly/myhi 1.3.110 → 1.3.111

package/dist/grid.html

@@ -45,6 +45,8 @@
     .pane { display:flex; flex-direction:column; min-height:260px; min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
     .pane-head { flex-shrink:0; display:flex; align-items:center; gap:0.4rem; padding:0.3rem 0.4rem; background:var(--surface2); border-bottom:1px solid var(--border); }
     .pane-head select { flex:1; min-width:0; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:0.28rem 0.4rem; font-size:0.78rem; }
+    .pane-head .pane-picker { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:0.3rem; text-align:left; }
+    #tp-list [data-id]:hover { background:var(--surface2) !important; }
     .pane-head button { background:var(--bg); border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:0.2rem 0.45rem; font-size:0.8rem; cursor:pointer; line-height:1; }
     .pane-head button:hover { color:var(--text); border-color:var(--blue2); }
     .pane-body { flex:1; min-height:0; position:relative; }
@@ -70,7 +72,25 @@
     <button class="bar-btn" style="border-color:var(--green);color:var(--green)" onclick="newTask()" title="新建一个任务并放进新窗格">🆕 新建任务</button>
   </div>
   <div id="grid"></div>
-  <div id="empty-hint" style="display:none">点「＋ 添加任务」把多个任务并排看。<br>拉宽窗口自动多几格，或用上方按钮锁定布局。</div>
+  <div id="empty-hint" style="display:none">点「＋ 窗格」或「🆕 新建任务」把多个任务并排看。<br>拉宽窗口自动多几格，或用上方按钮锁定布局。</div>
+
+  <!-- 任务选择弹窗（搜索 + 分组 + 标签）-->
+  <div id="task-picker" style="display:none;position:fixed;inset:0;z-index:100">
+    <div style="position:absolute;inset:0;background:rgba(0,0,0,0.5)" onclick="closeTaskPicker()"></div>
+    <div style="position:relative;max-width:540px;width:92%;margin:6vh auto 0;background:var(--surface);border:1px solid var(--border);border-radius:12px;max-height:82vh;display:flex;flex-direction:column;box-shadow:0 16px 48px rgba(0,0,0,0.45)">
+      <div style="padding:0.6rem 0.8rem;border-bottom:1px solid var(--border);display:flex;gap:0.5rem;align-items:center">
+        <input id="tp-search" placeholder="搜索任务（名称 / 目录 / 标签）…" autocomplete="off" style="flex:1;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:0.42rem 0.6rem;font-size:0.82rem">
+        <button onclick="closeTaskPicker()" style="background:var(--bg);border:1px solid var(--border);color:var(--muted);border-radius:7px;padding:0.38rem 0.6rem;cursor:pointer">✕</button>
+      </div>
+      <div style="padding:0.45rem 0.8rem;display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--border)">
+        <div class="seg" id="tp-group">
+          <button data-g="time">最近</button><button data-g="project">项目</button><button data-g="tag">标签</button>
+        </div>
+        <span id="tp-tagbar" style="display:none;gap:0.3rem;flex-wrap:wrap;align-items:center"></span>
+      </div>
+      <div id="tp-list" style="flex:1;overflow-y:auto;padding:0.4rem 0.6rem"></div>
+    </div>
+  </div>
 
   <script>
     const LS_KEY = 'myhi_grid_v1';
@@ -125,39 +145,39 @@
     }));
 
     // ── 窗格 ──
-    function buildSelect(sid) {
-      const sel = document.createElement('select');
-      const opt0 = document.createElement('option'); opt0.value=''; opt0.textContent='— 选择任务 —'; sel.appendChild(opt0);
-      for (const s of sessions) { const o = document.createElement('option'); o.value = sId(s); o.textContent = sName(s); sel.appendChild(o); }
-      sel.value = sid || '';
-      return sel;
+    function updatePickerLabel(pane) {
+      const s = pane._sid ? sessById(pane._sid) : null;
+      pane._picker.innerHTML = s
+        ? `<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(sName(s))}</span><span style="color:var(--dim);flex-shrink:0">▾</span>`
+        : `<span style="color:var(--muted)">＋ 选择任务</span><span style="color:var(--dim);flex-shrink:0">▾</span>`;
     }
     function addPane(sid, skipSave) {
       const pane = document.createElement('div'); pane.className = 'pane'; pane._sid = sid || '';
       const head = document.createElement('div'); head.className = 'pane-head';
-      const sel = buildSelect(sid);
+      const picker = document.createElement('button'); picker.className = 'pane-picker';
       const full = document.createElement('button'); full.textContent='↗'; full.title='在新标签页打开';
       const close = document.createElement('button'); close.textContent='✕'; close.title='关闭此格'; close.style.color='var(--red)';
-      head.appendChild(sel); head.appendChild(full); head.appendChild(close);
+      head.appendChild(picker); head.appendChild(full); head.appendChild(close);
       const body = document.createElement('div'); body.className = 'pane-body';
-      const empty = document.createElement('div'); empty.className='pane-empty'; empty.textContent='从上方下拉选一个任务'; body.appendChild(empty);
+      const empty = document.createElement('div'); empty.className='pane-empty'; empty.textContent='点上方「选择任务」挑一个（可搜索/分组/按标签）'; body.appendChild(empty);
       pane.appendChild(head); pane.appendChild(body);
-      pane._sel = sel; pane._body = body; pane._empty = empty; pane._iframe = null;
+      pane._picker = picker; pane._body = body; pane._empty = empty; pane._iframe = null;
 
-      sel.addEventListener('change', () => setPaneSession(pane, sel.value));
+      picker.addEventListener('click', () => openTaskPicker(pane));
       full.addEventListener('click', () => { if (pane._sid) window.open('/terminal/' + pane._sid, '_blank'); });
       close.addEventListener('click', () => removePane(pane));
 
       gridEl.appendChild(pane);
       paneEls.push(pane);
-      if (sid) setPaneSession(pane, sid, true);
+      updatePickerLabel(pane);
+      if (sid) setPaneSession(pane, sid);
       if (!skipSave) { saveState(); }
       applyLayout();
     }
-    function setPaneSession(pane, sid, keepSelect) {
+    function setPaneSession(pane, sid) {
       pane._sid = sid || '';
       pane._key = sid ? keyOf(sessById(sid)) : null; // 记住稳定标识，供重启后找回
-      if (!keepSelect) pane._sel.value = sid || '';
+      updatePickerLabel(pane);
       // 只重建这一格的 iframe，其它格不受影响
       if (pane._iframe) { pane._iframe.remove(); pane._iframe = null; }
       if (sid) {
@@ -176,21 +196,84 @@
     }
 
     // ── 任务列表 ──
-    async function refreshSessions(rebuildSelects) {
+    async function refreshSessions(rebuild) {
       try {
         const r = await fetch('/api/sessions'); if (!r.ok) return;
         const data = await r.json();
         sessions = (Array.isArray(data) ? data : (data.sessions || [])).filter(s => sId(s));
       } catch {}
-      if (rebuildSelects) {
-        for (const pane of paneEls) {
-          const cur = pane._sid;
-          const fresh = buildSelect(cur);
-          fresh.addEventListener('change', () => setPaneSession(pane, fresh.value));
-          pane._sel.replaceWith(fresh); pane._sel = fresh;
+      if (rebuild) for (const pane of paneEls) updatePickerLabel(pane);
+    }
+
+    // ── 任务选择弹窗（搜索 + 最近/项目/标签分组 + 标签过滤，借鉴首页）──
+    let _pickTarget = null;
+    let _tpGroup = localStorage.getItem('myhi_grid_group') || 'time';
+    let _tpTag = null;
+    function sessionTime(s){ return s.lastActivityAt || s.createdAt || 0; }
+    window.openTaskPicker = function(pane) {
+      _pickTarget = pane;
+      document.getElementById('task-picker').style.display = '';
+      document.getElementById('tp-search').value = '';
+      refreshSessions(false).then(renderPicker);
+      renderPicker();
+      setTimeout(() => document.getElementById('tp-search').focus(), 30);
+    };
+    window.closeTaskPicker = function(){ document.getElementById('task-picker').style.display='none'; _pickTarget=null; };
+    function pushMap(m,k,v){ if(!m.has(k)) m.set(k,[]); m.get(k).push(v); }
+    function renderPicker() {
+      document.querySelectorAll('#tp-group button').forEach(b => b.classList.toggle('active', b.dataset.g === _tpGroup));
+      const tagbar = document.getElementById('tp-tagbar');
+      if (_tpGroup === 'tag') {
+        const allTags = [...new Set(sessions.flatMap(s => s.tags || []))].sort();
+        const chip = (label,val,on) => `<button data-tag="${val==null?'':esc(val)}" style="border:1px solid ${on?'var(--blue2)':'var(--border)'};background:${on?'var(--blue2)':'var(--bg)'};color:${on?'#fff':'var(--muted)'};border-radius:999px;font-size:0.7rem;padding:0.12rem 0.5rem;cursor:pointer">${esc(label)}</button>`;
+        tagbar.innerHTML = chip('全部',null,!_tpTag) + allTags.map(t=>chip(t,t,_tpTag===t)).join('');
+        tagbar.style.display = 'flex';
+      } else { tagbar.style.display='none'; }
+
+      const kw = (document.getElementById('tp-search').value||'').trim().toLowerCase();
+      let items = sessions.filter(s => !kw || sName(s).toLowerCase().includes(kw) || (s.cwd||'').toLowerCase().includes(kw) || (s.tags||[]).join(' ').toLowerCase().includes(kw));
+      items.sort((a,b)=>sessionTime(b)-sessionTime(a));
+      const itemHtml = (s) => {
+        const cur = _pickTarget && _pickTarget._sid === sId(s);
+        const tags = (s.tags||[]).map(t=>`<span style="background:var(--surface2);color:var(--muted);border-radius:4px;font-size:0.62rem;padding:0.02rem 0.3rem">${esc(t)}</span>`).join(' ');
+        return `<div data-id="${esc(sId(s))}" style="padding:0.45rem 0.5rem;border-radius:7px;cursor:pointer;border:1px solid ${cur?'var(--blue2)':'transparent'};background:${cur?'var(--surface2)':'transparent'}">
+          <div style="font-size:0.82rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(sName(s))} ${tags}</div>
+          <div style="font-size:0.66rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(s.cwd||'（无目录）')}</div>
+        </div>`;
+      };
+      const header = (t) => `<div style="color:var(--muted);font-size:0.7rem;font-weight:600;margin:0.6rem 0.2rem 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(t)}</div>`;
+      let html = '';
+      if (_tpGroup === 'project') {
+        const groups = new Map();
+        for (const s of items) pushMap(groups, s.cwd || '（无目录）', s);
+        const ordered = [...groups.entries()].sort((a,b)=>sessionTime(b[1][0])-sessionTime(a[1][0]));
+        for (const [k,arr] of ordered) html += header(k) + arr.map(itemHtml).join('');
+      } else if (_tpGroup === 'tag') {
+        if (_tpTag) { html += items.filter(s => (s.tags||[]).includes(_tpTag)).map(itemHtml).join(''); }
+        else {
+          const tagged = new Map(); const untagged = [];
+          for (const s of items) { const ts=s.tags||[]; if(!ts.length) untagged.push(s); for(const t of ts) pushMap(tagged,t,s); }
+          const ordered=[...tagged.entries()].sort((a,b)=>sessionTime(b[1][0])-sessionTime(a[1][0]));
+          for (const [t,arr] of ordered) html += header('# '+t) + arr.map(itemHtml).join('');
+          if (untagged.length) html += header('无标签') + untagged.map(itemHtml).join('');
         }
-      }
+      } else { html = items.map(itemHtml).join(''); }
+      document.getElementById('tp-list').innerHTML = html || '<div style="color:var(--muted);text-align:center;padding:1.5rem 0;font-size:0.8rem">没有匹配的任务</div>';
     }
+    // 事件委托：选任务 / 选标签 / 切分组 / 搜索
+    document.getElementById('tp-list').addEventListener('click', (e) => {
+      const el = e.target.closest('[data-id]'); if (!el) return;
+      if (_pickTarget) setPaneSession(_pickTarget, el.dataset.id);
+      closeTaskPicker();
+    });
+    document.getElementById('tp-tagbar').addEventListener('click', (e) => {
+      const el = e.target.closest('[data-tag]'); if (!el) return;
+      _tpTag = el.dataset.tag || null; renderPicker();
+    });
+    document.querySelectorAll('#tp-group button').forEach(b => b.addEventListener('click', () => {
+      _tpGroup = b.dataset.g; _tpTag = null; localStorage.setItem('myhi_grid_group', _tpGroup); renderPicker();
+    }));
+    document.getElementById('tp-search').addEventListener('input', renderPicker);
 
     // ── 新建任务（走 socket create-agent，和首页一致）──
     const socket = io();

package/package.json

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