@wendongfly/myhi 1.0.5 → 1.0.7

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/dist/index.html

@@ -396,14 +396,15 @@
 
     /* ── 盘符选择栏 ── */
     #drive-bar {
-      display: flex; gap: 0.35rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border);
+      display: flex; gap: 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border);
       overflow-x: auto; scrollbar-width: none;
     }
     #drive-bar::-webkit-scrollbar { display: none; }
     .drive-btn {
-      padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 0.78rem; font-weight: 600;
-      background: var(--bg); border: 1px solid var(--border); color: var(--text);
+      padding: 0.5rem 1rem; border-radius: 8px; font-size: 1rem; font-weight: 600;
+      background: var(--bg); border: 1.5px solid var(--border); color: var(--text);
       cursor: pointer; white-space: nowrap; flex-shrink: 0;
+      min-width: 3rem; text-align: center;
     }
     .drive-btn:active, .drive-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(124,58,237,0.12); }
   </style>

package/package.json

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