@wendongfly/myhi 1.3.110 → 1.3.112

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; }
@@ -67,10 +69,48 @@
     <span class="spacer"></span>
     <button class="bar-btn" onclick="refreshSessions(true)" title="刷新任务列表">↻</button>
     <button class="bar-btn" onclick="addPane('')" title="加一个空窗格，从下拉选已有任务">＋ 窗格</button>
-    <button class="bar-btn" style="border-color:var(--green);color:var(--green)" onclick="newTask()" title="新建一个任务并放进新窗格">🆕 新建任务</button>
+    <button class="bar-btn" style="border-color:var(--green);color:var(--green)" onclick="openNewTask()" 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>
+
+  <!-- 新建任务面板（和首页「新建终端会话」一致）-->
+  <div id="new-task" style="display:none;position:fixed;inset:0;z-index:100">
+    <div style="position:absolute;inset:0;background:rgba(0,0,0,0.5)" onclick="closeNewTask()"></div>
+    <div style="position:relative;max-width:460px;width:92%;margin:8vh auto 0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem;box-shadow:0 16px 48px rgba(0,0,0,0.45)">
+      <div style="font-weight:600;margin-bottom:0.7rem">新建任务</div>
+      <div id="nt-presets" style="display:flex;gap:0.4rem;margin-bottom:0.7rem;flex-wrap:wrap"></div>
+      <label style="font-size:0.72rem;color:var(--muted)">名称 <span style="color:var(--red)">必填</span></label>
+      <input id="nt-title" placeholder="请输入任务名称" autocomplete="off" style="width:100%;box-sizing:border-box;margin:0.2rem 0 0.6rem;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:0.45rem 0.6rem;font-size:0.85rem">
+      <label style="font-size:0.72rem;color:var(--muted)">启动命令（可选，终端类型用）</label>
+      <input id="nt-cmd" placeholder="留空仅打开 shell" autocomplete="off" style="width:100%;box-sizing:border-box;margin:0.2rem 0 0.6rem;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:0.45rem 0.6rem;font-size:0.82rem;font-family:monospace">
+      <label style="font-size:0.72rem;color:var(--muted)">工作目录（可选）</label>
+      <input id="nt-cwd" placeholder="留空使用默认目录" autocomplete="off" style="width:100%;box-sizing:border-box;margin:0.2rem 0 0.4rem;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:0.45rem 0.6rem;font-size:0.82rem">
+      <div id="nt-recent" style="display:flex;flex-wrap:wrap;gap:0.3rem;margin-bottom:0.7rem"></div>
+      <div style="display:flex;gap:0.5rem">
+        <button onclick="closeNewTask()" style="flex:1;background:var(--bg);border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:0.5rem;cursor:pointer">取消</button>
+        <button onclick="submitNewTask()" style="flex:2;background:var(--green);border:none;color:#fff;border-radius:8px;padding:0.5rem;cursor:pointer;font-weight:600">创建</button>
+      </div>
+    </div>
+  </div>
 
   <script>
     const LS_KEY = 'myhi_grid_v1';
@@ -125,39 +165,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,35 +216,139 @@
     }
 
     // ── 任务列表 ──
-    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();
-    window.newTask = function() {
-      const title = (prompt('新任务名称：') || '').trim();
-      if (!title) return;
-      socket.emit('create-agent', { title }, (res) => {
-        if (res && res.ok && res.session) {
-          refreshSessions(true).then(() => addPane(res.session.id));
-        } else {
-          alert('创建失败：' + ((res && res.error) || '未知错误'));
-        }
-      });
+    const NT_PRESETS = [
+      { icon:'🤖', label:'Claude', title:'claude', type:'agent', cmd:'' },
+      { icon:'✨', label:'Gemini', title:'gemini', type:'pty',   cmd:'gemini' },
+      { icon:'🐚', label:'Shell',  title:'shell',  type:'pty',   cmd:'' },
+    ];
+    let _ntPreset = 0;
+    const RECENT_DIRS_KEY = 'myhi_recent_dirs'; // 和首页共用
+    function ntRecentDirs(){ try { return JSON.parse(localStorage.getItem(RECENT_DIRS_KEY)) || {}; } catch { return {}; } }
+    function ntRecordDir(dir){ if(!dir) return; const d=ntRecentDirs(); d[dir]=(d[dir]||0)+1; const s=Object.entries(d).sort((a,b)=>b[1]-a[1]).slice(0,5); localStorage.setItem(RECENT_DIRS_KEY, JSON.stringify(Object.fromEntries(s))); }
+    function ntRenderPresets(){
+      document.getElementById('nt-presets').innerHTML = NT_PRESETS.map((p,i)=>`<button data-i="${i}" style="flex:1;min-width:5rem;display:flex;align-items:center;justify-content:center;gap:0.3rem;border:1px solid ${i===_ntPreset?'var(--blue2)':'var(--border)'};background:${i===_ntPreset?'var(--blue2)':'var(--bg)'};color:${i===_ntPreset?'#fff':'var(--text2)'};border-radius:8px;padding:0.4rem;font-size:0.8rem;cursor:pointer">${p.icon} ${esc(p.label)}</button>`).join('');
+    }
+    function ntRenderRecent(){
+      const dirs = Object.entries(ntRecentDirs()).sort((a,b)=>b[1]-a[1]);
+      document.getElementById('nt-recent').innerHTML = dirs.map(([p])=>`<button data-dir="${esc(p)}" style="background:var(--surface2);border:1px solid var(--border);color:var(--muted);border-radius:6px;font-size:0.68rem;padding:0.12rem 0.4rem;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(p)}</button>`).join('');
+    }
+    window.openNewTask = function(){
+      _ntPreset = 0;
+      document.getElementById('new-task').style.display = '';
+      document.getElementById('nt-title').value = '';
+      document.getElementById('nt-cmd').value = '';
+      document.getElementById('nt-cwd').value = '';
+      ntRenderPresets(); ntRenderRecent();
+      setTimeout(()=>document.getElementById('nt-title').focus(), 30);
+    };
+    window.closeNewTask = function(){ document.getElementById('new-task').style.display='none'; };
+    window.submitNewTask = function(){
+      const title = document.getElementById('nt-title').value.trim();
+      if (!title) { document.getElementById('nt-title').focus(); return; }
+      const cmd = document.getElementById('nt-cmd').value.trim() || undefined;
+      const cwd = document.getElementById('nt-cwd').value.trim() || undefined;
+      if (cwd) ntRecordDir(cwd);
+      const preset = NT_PRESETS[_ntPreset];
+      const done = (res) => {
+        if (res && res.ok && res.session) { closeNewTask(); refreshSessions(true).then(()=>addPane(res.session.id)); }
+        else alert('创建失败：' + ((res && res.error) || '未知错误'));
+      };
+      if (preset.type === 'agent') socket.emit('create-agent', { title, cwd }, done);
+      else socket.emit('create', { title, initCmd: cmd, cwd }, done);
     };
+    document.getElementById('nt-presets').addEventListener('click', (e) => {
+      const b = e.target.closest('[data-i]'); if (!b) return;
+      _ntPreset = +b.dataset.i; const p = NT_PRESETS[_ntPreset];
+      const t = document.getElementById('nt-title');
+      if (!t.value.trim() || NT_PRESETS.some(x => x.title === t.value.trim())) t.value = p.title;
+      document.getElementById('nt-cmd').value = p.cmd || '';
+      ntRenderPresets();
+    });
+    document.getElementById('nt-recent').addEventListener('click', (e) => {
+      const b = e.target.closest('[data-dir]'); if (!b) return;
+      document.getElementById('nt-cwd').value = b.dataset.dir;
+    });
 
     // ── 初始化 ──
     (async function init() {

package/package.json

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