@wendongfly/myhi 1.0.30 → 1.0.31

package/dist/terminal.html

@@ -25,6 +25,11 @@
       overflow: hidden;
     }
 
+    body {
+      display: flex;
+      flex-direction: column;
+    }
+
     #top-bar {
       display: flex;
       align-items: center;
@@ -65,16 +70,87 @@
     }
     .top-btn:hover { background: #30363d; }
 
+    /* ── Tab bar ── */
+    #tab-bar {
+      display: flex;
+      align-items: center;
+      background: #0d1117;
+      border-bottom: 1px solid #30363d;
+      flex-shrink: 0;
+      overflow-x: auto;
+      scrollbar-width: none;
+      -webkit-overflow-scrolling: touch;
+    }
+    #tab-bar::-webkit-scrollbar { display: none; }
+
+    .tab {
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.4rem 0.75rem;
+      font-size: 0.78rem;
+      color: #8b949e;
+      background: transparent;
+      border: none;
+      border-right: 1px solid #21262d;
+      cursor: pointer;
+      white-space: nowrap;
+      flex-shrink: 0;
+      max-width: 160px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      position: relative;
+    }
+    .tab:hover { color: #e6edf3; background: #161b22; }
+    .tab.active {
+      color: #e6edf3;
+      background: #161b22;
+      border-bottom: 2px solid #7c3aed;
+    }
+    .tab .tab-close {
+      font-size: 0.7rem;
+      color: #6e7681;
+      border: none;
+      background: none;
+      cursor: pointer;
+      padding: 0 0.15rem;
+      border-radius: 3px;
+      line-height: 1;
+    }
+    .tab .tab-close:hover { color: #f85149; background: #21262d; }
+    .tab .tab-dot {
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: #3fb950;
+      flex-shrink: 0;
+    }
+    .tab .tab-dot.dead { background: #f85149; }
+
+    #tab-add {
+      background: none;
+      border: none;
+      color: #6e7681;
+      font-size: 1.1rem;
+      padding: 0.3rem 0.6rem;
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+    #tab-add:hover { color: #e6edf3; }
+
+    /* ── Terminal area ── */
     #terminal-wrapper {
       flex: 1;
       overflow: hidden;
-      padding: 4px;
+      position: relative;
     }
 
-    #terminal {
-      width: 100%;
-      height: 100%;
+    .term-pane {
+      position: absolute;
+      inset: 0;
+      padding: 4px;
+      display: none;
     }
+    .term-pane.active { display: block; }
 
     /* Mobile shortcut bar */
     #shortcut-bar {
@@ -109,12 +185,6 @@
     }
     .sk:active { background: #30363d; transform: scale(0.95); }
 
-    /* Layout */
-    body {
-      display: flex;
-      flex-direction: column;
-    }
-
     /* QR modal */
     #qr-modal {
       display: none;
@@ -173,11 +243,13 @@
     <button class="top-btn" id="logout-btn" onclick="doLogout()" style="display:none;color:#f0883e">退出</button>
   </div>
 
-  <div id="terminal-wrapper">
-    <div id="terminal"></div>
-    <div id="status-overlay">连接中...</div>
+  <!-- Tab bar -->
+  <div id="tab-bar">
+    <button id="tab-add" onclick="addTab()" title="新建标签页">+</button>
   </div>
 
+  <div id="terminal-wrapper"></div>
+
   <!-- Mobile shortcut bar -->
   <div id="shortcut-bar">
     <button class="sk" id="btn-photo" onclick="openCamera()" style="color:#7c3aed;border-color:#7c3aed33;background:#7c3aed11">📷</button>
@@ -217,127 +289,240 @@
       fetch('/logout', { method: 'POST' }).then(() => { location.href = '/login'; });
     }
 
-    // Parse URL params
+    // ── Tab 管理 ─────────────────────────────────────────────
+    const TERM_THEME = {
+      background: '#0d1117', foreground: '#e6edf3', cursor: '#58a6ff',
+      selectionBackground: '#264f78',
+      black: '#0d1117', red: '#ff7b72', green: '#3fb950', yellow: '#d29922',
+      blue: '#58a6ff', magenta: '#bc8cff', cyan: '#39c5cf', white: '#e6edf3',
+      brightBlack: '#6e7681', brightRed: '#ffa198', brightGreen: '#56d364',
+      brightYellow: '#e3b341', brightBlue: '#79c0ff', brightMagenta: '#d2a8ff',
+      brightCyan: '#56d4dd', brightWhite: '#f0f6fc',
+    };
+
+    const tabs = [];       // { id, sessionId, title, term, fitAddon, socket, pane, tabEl, alive }
+    let activeTabId = null;
+
+    const tabBar = document.getElementById('tab-bar');
+    const tabAddBtn = document.getElementById('tab-add');
+    const wrapper = document.getElementById('terminal-wrapper');
+
+    // 从 URL 获取初始会话 ID
     const pathParts = location.pathname.split('/');
-    const SESSION_ID = pathParts[pathParts.length - 1];
-
-    // ── xterm.js setup ─────────────────────────────────────────
-    const term = new Terminal({
-      theme: {
-        background: '#0d1117',
-        foreground: '#e6edf3',
-        cursor: '#58a6ff',
-        selectionBackground: '#264f78',
-        black: '#0d1117',
-        red: '#ff7b72',
-        green: '#3fb950',
-        yellow: '#d29922',
-        blue: '#58a6ff',
-        magenta: '#bc8cff',
-        cyan: '#39c5cf',
-        white: '#e6edf3',
-        brightBlack: '#6e7681',
-        brightRed: '#ffa198',
-        brightGreen: '#56d364',
-        brightYellow: '#e3b341',
-        brightBlue: '#79c0ff',
-        brightMagenta: '#d2a8ff',
-        brightCyan: '#56d4dd',
-        brightWhite: '#f0f6fc',
-      },
-      fontFamily: "'SF Mono', 'Cascadia Code', 'Consolas', 'Menlo', monospace",
-      fontSize: 14,
-      lineHeight: 1.2,
-      cursorBlink: true,
-      allowTransparency: false,
-      scrollback: 5000,
-    });
+    const INIT_SESSION_ID = pathParts[pathParts.length - 1];
+
+    // ── 创建 Tab ──
+    function createTab(sessionId) {
+      const id = Date.now() + '-' + Math.random().toString(36).slice(2, 6);
+
+      // 创建终端容器
+      const pane = document.createElement('div');
+      pane.className = 'term-pane';
+      wrapper.appendChild(pane);
+
+      // 创建 xterm
+      const term = new Terminal({
+        theme: TERM_THEME,
+        fontFamily: "'SF Mono', 'Cascadia Code', 'Consolas', 'Menlo', monospace",
+        fontSize: 14, lineHeight: 1.2, cursorBlink: true,
+        allowTransparency: false, scrollback: 5000,
+      });
+      const fitAddon = new FitAddon.FitAddon();
+      const webLinksAddon = new WebLinksAddon.WebLinksAddon();
+      term.loadAddon(fitAddon);
+      term.loadAddon(webLinksAddon);
+      term.open(pane);
+
+      // 创建 Socket 连接
+      const socket = io({ transports: ['websocket'] });
+
+      const tab = { id, sessionId, title: '连接中...', term, fitAddon, socket, pane, tabEl: null, alive: true };
+      tabs.push(tab);
+
+      // Tab 按钮
+      renderTab(tab);
+
+      // Socket 事件
+      socket.on('connect', () => {
+        socket.emit('join', sessionId);
+      });
+
+      socket.on('joined', (session) => {
+        tab.title = session.title || 'shell';
+        tab.alive = session.alive !== false;
+        renderTab(tab);
+        if (activeTabId === id) {
+          updateTopBar(tab);
+          fitTab(tab);
+        }
+      });
+
+      socket.on('output', (data) => {
+        term.write(data);
+      });
+
+      socket.on('session-exit', ({ code }) => {
+        tab.alive = false;
+        tab.title = (tab.title || 'shell') + ' (已退出)';
+        renderTab(tab);
+        if (activeTabId === id) updateTopBar(tab);
+      });
+
+      socket.on('sessions', (sessions) => {
+        const s = sessions.find(x => x.id === sessionId);
+        if (s && activeTabId === id) {
+          document.getElementById('viewer-count').textContent = s.viewers > 1 ? `👁 ${s.viewers}` : '';
+        }
+      });
+
+      socket.on('disconnect', () => {
+        // 自动重连由 socket.io 处理
+      });
+
+      // 终端输入
+      term.onData((data) => {
+        socket.emit('input', data);
+      });
+
+      // 点击终端获取焦点
+      pane.addEventListener('click', () => term.focus());
 
-    const fitAddon = new FitAddon.FitAddon();
-    const webLinksAddon = new WebLinksAddon.WebLinksAddon();
-    term.loadAddon(fitAddon);
-    term.loadAddon(webLinksAddon);
-    term.open(document.getElementById('terminal'));
+      return tab;
+    }
+
+    // ── 渲染 Tab 按钮 ──
+    function renderTab(tab) {
+      if (tab.tabEl) tab.tabEl.remove();
+
+      const el = document.createElement('div');
+      el.className = 'tab' + (activeTabId === tab.id ? ' active' : '');
+      el.innerHTML = `<span class="tab-dot${tab.alive ? '' : ' dead'}"></span>` +
+        `<span style="overflow:hidden;text-overflow:ellipsis">${esc(tab.title)}</span>` +
+        `<button class="tab-close" title="关闭">&times;</button>`;
+
+      el.addEventListener('click', (e) => {
+        if (e.target.classList.contains('tab-close')) {
+          closeTab(tab.id);
+        } else {
+          switchTab(tab.id);
+        }
+      });
 
-    function fitTerm() {
-      try { fitAddon.fit(); } catch {}
-      if (typeof socket !== 'undefined' && socket.connected && currentSession) {
-        socket.emit('resize', { cols: term.cols, rows: term.rows });
+      tab.tabEl = el;
+      tabBar.insertBefore(el, tabAddBtn);
+    }
+
+    // ── 切换 Tab ──
+    function switchTab(id) {
+      activeTabId = id;
+      tabs.forEach(t => {
+        const isActive = t.id === id;
+        t.pane.classList.toggle('active', isActive);
+        if (t.tabEl) t.tabEl.classList.toggle('active', isActive);
+      });
+      const tab = tabs.find(t => t.id === id);
+      if (tab) {
+        updateTopBar(tab);
+        fitTab(tab);
+        tab.term.focus();
       }
     }
 
-    // Defer initial fit until after layout, socket setup, and joined
-    window.addEventListener('resize', fitTerm);
-
-    // ── Socket.IO ──────────────────────────────────────────────
-    const socket = io({ transports: ['websocket'] });
-    let currentSession = null;
-    const overlay = document.getElementById('status-overlay');
-
-    function showOverlay(text, showBack = false) {
-      overlay.innerHTML = '';
-      overlay.classList.remove('hidden');
-      const msg = document.createElement('div');
-      msg.textContent = text;
-      overlay.appendChild(msg);
-      if (showBack) {
-        const btn = document.createElement('button');
-        btn.textContent = '返回首页';
-        btn.style.cssText = 'margin-top:1rem;padding:0.5rem 1.5rem;border:1px solid #8b949e;border-radius:8px;background:transparent;color:#c9d1d9;cursor:pointer;font-size:0.9rem';
-        btn.onclick = () => window.location.href = '/';
-        overlay.appendChild(btn);
+    // ── 关闭 Tab ──
+    function closeTab(id) {
+      const idx = tabs.findIndex(t => t.id === id);
+      if (idx === -1) return;
+      const tab = tabs[idx];
+
+      // 断开连接
+      tab.socket.disconnect();
+      tab.term.dispose();
+      tab.pane.remove();
+      if (tab.tabEl) tab.tabEl.remove();
+      tabs.splice(idx, 1);
+
+      if (tabs.length === 0) {
+        window.location.href = '/';
+        return;
+      }
+
+      // 切换到相邻 tab
+      if (activeTabId === id) {
+        const next = tabs[Math.min(idx, tabs.length - 1)];
+        switchTab(next.id);
       }
     }
 
-    socket.on('connect', () => {
-      showOverlay('正在加入会话...');
-      socket.emit('join', SESSION_ID);
-    });
+    // ── 新建 Tab（弹出会话选择）──
+    async function addTab() {
+      try {
+        const res = await fetch('/api/sessions');
+        const sessions = await res.json();
+        const alive = sessions.filter(s => s.alive && s.mode !== 'agent');
 
-    socket.on('connect_error', (err) => {
-      showOverlay('连接失败: ' + err.message, true);
-    });
+        if (alive.length === 0) {
+          alert('没有可用的终端会话，请先在首页创建');
+          return;
+        }
 
-    socket.on('disconnect', () => {
-      showOverlay('已断开连接，正在重连...');
-    });
+        // 过滤掉已打开的会话
+        const opened = new Set(tabs.map(t => t.sessionId));
+        const available = alive.filter(s => !opened.has(s.id));
 
-    socket.on('joined', (session) => {
-      currentSession = session;
-      overlay.classList.add('hidden');
-      document.title = session.title + ' — myhi';
-      document.getElementById('session-title').textContent = session.title;
-      updateViewers(session.viewers);
-      fitTerm();
-    });
+        if (available.length === 0) {
+          alert('所有会话已在标签页中打开');
+          return;
+        }
 
-    socket.on('output', (data) => {
-      term.write(data);
-    });
+        if (available.length === 1) {
+          // 只有一个，直接打开
+          const tab = createTab(available[0].id);
+          switchTab(tab.id);
+          return;
+        }
 
-    socket.on('session-exit', ({ code }) => {
-      overlay.classList.remove('hidden');
-      overlay.style.pointerEvents = 'auto';
-      overlay.textContent = `会话已退出 (code ${code}) — 点击返回`;
-      overlay.onclick = () => history.back();
-    });
+        // 多个可选：简单弹窗选择
+        const names = available.map((s, i) => `${i + 1}. ${s.title}`).join('\n');
+        const choice = prompt(`选择要打开的会话:\n\n${names}\n\n输入编号:`);
+        if (!choice) return;
+        const n = parseInt(choice, 10) - 1;
+        if (n >= 0 && n < available.length) {
+          const tab = createTab(available[n].id);
+          switchTab(tab.id);
+        }
+      } catch (e) {
+        alert('获取会话列表失败: ' + e.message);
+      }
+    }
 
-    socket.on('sessions', (sessions) => {
-      const s = sessions.find(x => x.id === SESSION_ID);
-      if (s) updateViewers(s.viewers);
-    });
+    // ── 辅助函数 ──
+    function fitTab(tab) {
+      requestAnimationFrame(() => {
+        try { tab.fitAddon.fit(); } catch {}
+        if (tab.socket.connected) {
+          tab.socket.emit('resize', { cols: tab.term.cols, rows: tab.term.rows });
+        }
+      });
+    }
 
-    socket.on('error', ({ message }) => {
-      showOverlay('错误: ' + message, true);
-    });
+    function updateTopBar(tab) {
+      document.getElementById('session-title').textContent = tab.title;
+      document.title = tab.title + ' — myhi';
+    }
 
-    // ── Input ──────────────────────────────────────────────────
-    term.onData((data) => {
-      socket.emit('input', data);
+    function esc(s) {
+      const d = document.createElement('div');
+      d.textContent = s;
+      return d.innerHTML;
+    }
+
+    // 窗口 resize 时 fit 当前 tab
+    window.addEventListener('resize', () => {
+      const tab = tabs.find(t => t.id === activeTabId);
+      if (tab) fitTab(tab);
     });
 
-    // ── Shortcut bar ───────────────────────────────────────────
-    // Map data-send keys to actual byte sequences
+    // ── 快捷键发送到当前 tab ──
     const SEQ = {
       'ctrl-c': '\x03', 'ctrl-d': '\x04', 'tab': '\t',
       'up': '\x1b[A', 'down': '\x1b[B', 'right': '\x1b[C', 'left': '\x1b[D',
@@ -348,21 +533,21 @@
 
     document.querySelectorAll('.sk').forEach(btn => {
       const send = () => {
+        const tab = tabs.find(t => t.id === activeTabId);
+        if (!tab) return;
         const seq = SEQ[btn.dataset.send] || btn.dataset.send;
-        socket.emit('input', seq);
-        term.focus();
+        tab.socket.emit('input', seq);
+        tab.term.focus();
       };
-
-      // Mobile: fire on touchend, prevent synthetic click + double-tap zoom
       btn.addEventListener('touchend', (e) => { e.preventDefault(); send(); });
-      // Desktop: fire on click
       btn.addEventListener('click', send);
     });
 
-    // ── QR modal ───────────────────────────────────────────────
+    // ── QR modal ──
     function showQR() {
-      const img = document.getElementById('qr-img');
-      img.src = `/qr/${SESSION_ID}`;
+      const tab = tabs.find(t => t.id === activeTabId);
+      if (!tab) return;
+      document.getElementById('qr-img').src = `/qr/${tab.sessionId}`;
       document.getElementById('qr-modal').classList.add('open');
     }
     function closeQR() {
@@ -372,19 +557,10 @@
       if (e.target === e.currentTarget) closeQR();
     });
 
-    // ── Helpers ────────────────────────────────────────────────
-    function updateViewers(count) {
-      document.getElementById('viewer-count').textContent =
-        count > 1 ? `👁 ${count}` : '';
-    }
-
-    function goBack() {
-      window.location.href = '/';
-    }
+    function goBack() { window.location.href = '/'; }
 
-    // ── Photo upload ───────────────────────────────────────────
-    const MAX_PX   = 1920;   // long side max pixels
-    const QUALITY  = 0.85;   // JPEG quality
+    // ── Photo upload ──
+    const MAX_PX = 1920, QUALITY = 0.85;
 
     function compressImage(file) {
       return new Promise((resolve, reject) => {
@@ -418,6 +594,8 @@
       input.onchange = async () => {
         const file = input.files?.[0];
         if (!file) return;
+        const tab = tabs.find(t => t.id === activeTabId);
+        if (!tab) return;
 
         const btn = document.getElementById('btn-photo');
         btn.textContent = '⏳';
@@ -425,16 +603,13 @@
 
         try {
           const compressed = await compressImage(file);
-          const kb = (compressed.size / 1024).toFixed(0);
-          console.log(`[photo] ${(file.size/1024).toFixed(0)}KB → ${kb}KB`);
-
           const form = new FormData();
           form.append('image', compressed, 'photo.jpg');
-          const res  = await fetch('/upload', { method: 'POST', body: form });
+          const res  = await fetch('/upload?sessionId=' + tab.sessionId, { method: 'POST', body: form });
           const data = await res.json();
           if (data.path) {
-            socket.emit('input', data.path);
-            term.focus();
+            tab.socket.emit('input', data.path);
+            tab.term.focus();
           } else {
             alert('上传失败: ' + (data.error || '未知'));
           }
@@ -448,8 +623,9 @@
       input.click();
     }
 
-    // Focus terminal on tap (mobile)
-    document.getElementById('terminal-wrapper').addEventListener('click', () => term.focus());
+    // ── 初始化：打开 URL 中指定的会话 ──
+    const initTab = createTab(INIT_SESSION_ID);
+    switchTab(initTab.id);
   </script>
 </body>
 </html>

package/package.json

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