]> acesimba.cloud Git - codebuddy-web.git/commitdiff
fix(ui): 粘贴弹窗移除点击外部关闭,新增右上角✕(关闭并清空),避免误触丢失输入
authorCodebuddy <codebuddy@localhost>
Tue, 18 Aug 2026 01:39:16 +0000 (09:39 +0800)
committerCodebuddy <codebuddy@localhost>
Tue, 18 Aug 2026 01:39:16 +0000 (09:39 +0800)
frontend/index.html

index e0cb4fa3c05b08e816ab9ab1846394f132fa342c..d6de32e28c35e8888095645123baf456176757f6 100644 (file)
@@ -115,6 +115,13 @@ body { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; heigh
 }
 .picker-header .action-btn:hover { background: #2a2a40; }
 .picker-header .action-btn .ico { color: #ff5b5b; margin-right: 2px; }
+.paste-close {
+  position: absolute; top: 10px; right: 12px; width: 28px; height: 28px;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
+  border-radius: 6px; color: #ff8585; font-size: 16px; line-height: 1; cursor: pointer;
+}
+.paste-close:hover { background: rgba(255,90,90,0.18); color: #fff; border-color: rgba(255,90,90,0.5); }
 .picker-body { flex: 1; overflow: auto; padding: 28px; }
 .picker-main { display: flex; flex: 1; min-height: 0; }
 #skills-sidebar {
@@ -322,7 +329,8 @@ body { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; heigh
   <button id="jump-bottom" title="回到底部(最新输出)">↓ 回到底部</button>
   <!-- 粘贴 modal:支持文字/图片粘贴,发送内容到 xterm 输入行(不自动提交) -->
   <div id="paste-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:100; align-items:center; justify-content:center;">
-    <div id="paste-dialog" style="background:#1a1a2e; border:1px solid #4ecca3; border-radius:12px; padding:16px; width:560px; max-width:90vw;">
+    <div id="paste-dialog" style="position:relative; background:#1a1a2e; border:1px solid #4ecca3; border-radius:12px; padding:16px; width:560px; max-width:90vw;">
+      <button class="paste-close" id="paste-close" title="关闭并清空">✕</button>
       <div style="color:#4ecca3; font-size:15px; margin-bottom:10px;">📋 粘贴到终端</div>
       <div class="img-chips" id="paste-img-chips" style="display:none;"></div>
       <div class="input-row" style="display:flex; gap:8px; align-items:flex-end; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:12px; padding:8px 10px;">
@@ -912,6 +920,14 @@ body { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; heigh
     pasteModal.style.display = 'none';
     if (term && term.focus) term.focus();
   }
+  // 关闭并清空:清除已输入文本与待发送文件,再关闭窗口
+  function closeAndClearPasteModal() {
+    pasteInput.value = '';
+    pendingFiles = [];
+    renderPasteChips();
+    closePasteModal();
+  }
+  document.getElementById('paste-close').onclick = closeAndClearPasteModal;
   document.getElementById('btn-paste').onclick = openPasteModal;
 
   // ESC 关闭 modal(监听 document,避免焦点不在 pasteInput 时失效)
@@ -921,10 +937,8 @@ body { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; heigh
       closePasteModal();
     }
   });
-  // 点击遮罩层(modal 外部)关闭
-  pasteModal.addEventListener('click', (e) => {
-    if (e.target === pasteModal) closePasteModal();
-  });
+  // 注意:粘贴弹窗不再因点击遮罩层(外部)而关闭,避免误触丢失已输入内容;
+  // 关闭请使用右上角 ✕(关闭并清空)或 ESC(仅关闭不清空)。
 
   // textarea 的 paste 事件:文字直接插入,文件(图片/视频/zip/任意)上传后加 chip
   pasteInput.addEventListener('paste', async (e) => {