From: Codebuddy <codebuddy@localhost>
Date: Tue, 18 Aug 2026 01:39:16 +0000 (+0800)
Subject: fix(ui): 粘贴弹窗移除点击外部关闭，新增右上角✕（关闭并清空），避免误触丢失输入
X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=c47d4d64b82dbd4d91631ace747c7d141c060916;p=codebuddy-web.git

fix(ui): 粘贴弹窗移除点击外部关闭，新增右上角✕（关闭并清空），避免误触丢失输入
---

diff --git a/frontend/index.html b/frontend/index.html
index e0cb4fa..d6de32e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -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) => {