@wendongfly/myhi 1.0.6 → 1.0.8

package/bin/myhi.js

@@ -7,7 +7,22 @@ import { homedir } from 'os';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
-const cmd = process.argv[2];
+
+// 解析 -p / --port 参数
+const args = process.argv.slice(2);
+let cmd = null;
+for (let i = 0; i < args.length; i++) {
+  if ((args[i] === '-p' || args[i] === '--port') && args[i + 1]) {
+    process.env.PORT = args[i + 1];
+    args.splice(i, 2); i--;
+  } else if (args[i].startsWith('--port=')) {
+    process.env.PORT = args[i].split('=')[1];
+    args.splice(i, 1); i--;
+  } else if (!cmd && !args[i].startsWith('-')) {
+    cmd = args[i];
+  }
+}
+if (!cmd) cmd = args[0];
 
 const configDir = join(homedir(), '.myhi');
 const pidFile = join(configDir, 'daemon.pid');
@@ -90,12 +105,13 @@ if (cmd === 'attach') {
 
 } else if (cmd === 'help' || cmd === '--help' || cmd === '-h') {
   console.log(`
-myhi v1.0.0 — 基于 Web 的终端共享工具
+myhi — 基于 Web 的终端共享工具
 通过局域网或 Tailscale 在手机/平板上控制电脑终端，无需中继服务器。
 
 服务器：
   myhi                 前台启动服务器
   myhi start           前台启动服务器
+  myhi -p <port>       指定监听端口（默认 3000）
   myhi -d, --daemon    后台启动服务器（日志写入 ~/.myhi/daemon.log）
   myhi stop            停止后台服务器
   myhi restart         重启后台服务器
@@ -110,10 +126,12 @@ myhi v1.0.0 — 基于 Web 的终端共享工具
 快捷键（attach 模式）：
   Ctrl+]               分离终端（退出但不关闭会话）
 
+选项：
+  -p, --port <port>    监听端口（默认 3000）
+
 环境变量：
   PORT                 监听端口（默认 3000）
   HOST                 监听地址（默认 0.0.0.0）
-  HTTPS_PORT           HTTPS 端口（默认 3443）
   MYHI_AUTO_ATTACH     启动时自动创建会话（默认 1，设 0 关闭）
   MYHI_CWD             会话工作目录（默认当前目录）
   MYHI_SERVER          attach 连接的服务器地址（默认 http://localhost:3000）
@@ -128,7 +146,8 @@ myhi v1.0.0 — 基于 Web 的终端共享工具
 
 示例：
   myhi                          # 启动后扫描二维码即可在手机上操作
-  PORT=8080 myhi -d             # 8080 端口后台启动
+  myhi -p 8080                  # 指定 8080 端口启动
+  myhi -p 8080 -d               # 8080 端口后台启动
   MYHI_CWD=/project myhi        # 指定会话工作目录
   myhi attach                   # 从另一台机器连接到会话
 `);

package/dist/chat.html

@@ -129,7 +129,13 @@
     /* ── 输入栏 ─────────────────────────────── */
     #input-area { background: #161b22; border-top: 1px solid #30363d; flex-shrink: 0; padding: 0.5rem 0.75rem 0.35rem; }
     #input-area.no-shortcuts { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }
-    #input-box { background: #0d1117; border: 1px solid #30363d; border-radius: 12px; transition: border-color 0.2s; overflow: hidden; }
+    #input-box { background: #0d1117; border: 1px solid #30363d; border-radius: 12px; transition: border-color 0.2s; overflow: hidden; position: relative; }
+    #img-preview { display: none; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid #21262d; background: #161b22; }
+    #img-preview.show { display: flex; }
+    #img-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #30363d; }
+    #img-preview .img-info { flex: 1; font-size: 0.78rem; color: #8b949e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    #img-preview .img-remove { width: 24px; height: 24px; border-radius: 50%; border: none; background: #21262d; color: #8b949e; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
+    #img-preview .img-remove:hover { background: #f85149; color: #fff; }
     #input-box.focused { border-color: #58a6ff; }
     #input-box.disabled { opacity: 0.5; pointer-events: none; }
     #cmd-input { display: block; width: 100%; background: transparent; color: #e6edf3; border: none; padding: 0.6rem 0.75rem 0.3rem; font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 0.85rem; outline: none; resize: none; line-height: 1.4; max-height: 120px; overflow-y: auto; }
@@ -223,6 +229,11 @@
   <div id="input-area">
     <div id="readonly-overlay">只读模式 — 点击状态栏"获取控制"开始输入</div>
     <div id="input-box">
+      <div id="img-preview">
+        <img id="img-preview-thumb" src="" alt="">
+        <span class="img-info">已添加图片，输入文字后发送</span>
+        <button class="img-remove" onclick="clearPendingImage()" title="移除图片">&times;</button>
+      </div>
       <textarea id="cmd-input" rows="1" placeholder="输入消息..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
       <div id="input-toolbar">
         <button class="tb-btn" id="btn-photo" onclick="openCamera()" title="拍照">
@@ -997,11 +1008,30 @@
       setWorkState('idle');
     });
 
+    // ── 待发送图片 ──────────────────────────────────
+    let _pendingImage = null; // { path, blobUrl }
+
+    window.clearPendingImage = function() {
+      if (_pendingImage?.blobUrl) URL.revokeObjectURL(_pendingImage.blobUrl);
+      _pendingImage = null;
+      document.getElementById('img-preview').classList.remove('show');
+      cmdInput.placeholder = currentSession?.mode === 'agent' ? '输入消息...' : '输入命令...';
+    };
+
+    function setPendingImage(path, blobUrl) {
+      _pendingImage = { path, blobUrl };
+      const preview = document.getElementById('img-preview');
+      document.getElementById('img-preview-thumb').src = blobUrl || '';
+      preview.classList.add('show');
+      cmdInput.placeholder = '输入文字描述后发送，或直接发送分析图片...';
+      cmdInput.focus();
+    }
+
     // ── 输入处理 ──────────────────────────────────
     window.sendCommand = sendCommand;
     function sendCommand() {
-      const text = cmdInput.value;
-      if (!text) return;
+      const text = cmdInput.value.trim();
+      if (!text && !_pendingImage) return;
 
       // 命名模式：发送的是新会话名称
       if (window._renameMode) {
@@ -1017,33 +1047,30 @@
       if (!isController) { addStatusMessage('请先获取控制权'); return; }
       endStream();
 
-      // 提取图片路径标记 [图片:xxx]
-      const imgMatch = text.match(/^\[图片:(.+?)\]\s*/);
-      const imgPath = imgMatch ? imgMatch[1] : null;
-      const userText = imgMatch ? text.slice(imgMatch[0].length).trim() : text;
+      const imgPath = _pendingImage?.path || null;
+      const userText = text;
       const displayText = imgPath ? `📷 ${userText || '分析图片'}` : text;
 
       addInputMessage(displayText);
 
       if (currentSession?.mode === 'agent') {
-        // Agent 模式：组合图片+文字
         const prompt = imgPath
           ? `请直接用 Read 工具读取图片 ${imgPath} 并分析，不要搜索其他文件。${userText || '描述图片内容'}`
           : text;
         socket.emit('agent:query', { prompt });
         showThinking();
       } else {
-        // PTY 模式：如果有图片，发送路径+用户文字
         const input = imgPath
           ? (userText ? `${userText} ${imgPath}` : imgPath)
           : text;
         socket.emit('input', input + '\r');
       }
-      cmdHistory.unshift(text);
+      cmdHistory.unshift(imgPath ? `[图片] ${userText}` : text);
       if (cmdHistory.length > 100) cmdHistory.pop();
       historyIdx = -1;
       cmdInput.value = '';
       cmdInput.style.height = 'auto';
+      clearPendingImage();
       cmdInput.focus();
     }
 
@@ -1310,10 +1337,9 @@
           const form = new FormData(); form.append('image', blob, 'photo.jpg');
           const res = await fetch(`/upload?sessionId=${SESSION_ID}`, { method: 'POST', body: form }); const data = await res.json();
           if (data.path) {
-            // 如果输入框有内容，带上用户描述一起发送；否则直接分析图片
-            const userDesc = cmdInput.value.trim();
-            cmdInput.value = `[图片:${data.path}] ${userDesc}`;
-            sendCommand();
+            // 暂存图片，等用户输入文字后一起发送
+            const thumbUrl = URL.createObjectURL(blob);
+            setPendingImage(data.path, thumbUrl);
           }
           else addStatusMessage('上传失败: ' + (data.error || '未知'));
         } catch (e) { addStatusMessage('出错: ' + e.message); }

package/package.json

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