From e3b45874e98e948b6c856a39f1407b7a3dc34998 Mon Sep 17 00:00:00 2001 From: liangpinglk Date: Wed, 24 Jul 2024 13:36:59 +0800 Subject: [PATCH] feat: Optimize the prompt after the copy command --- hubcmdui/web/index.html | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/hubcmdui/web/index.html b/hubcmdui/web/index.html index 14e7673..461ec8d 100644 --- a/hubcmdui/web/index.html +++ b/hubcmdui/web/index.html @@ -221,6 +221,21 @@ display: flex; } } + .notification { + display: none; + position: absolute; + top: 15px; /* Adjust the position as needed */ + left: 85%; + transform: translateX(-50%); + background-color: #333; + color: #fff; + padding: 10px 20px; + border-radius: 5px; + font-size: 14px; + opacity: 0; + transition: opacity 0.5s ease-in-out; + z-index: 1000; + } @@ -300,7 +315,9 @@ cmdDiv.className = 'step'; cmdDiv.innerHTML = `

${index + 1}. ${command.title}

- 
${command.cmd}
+ 
${command.cmd}
+                    
已复制!

+
`; container.appendChild(cmdDiv); }); @@ -312,9 +329,19 @@ } // 复制命令到剪贴板 - function copyToClipboard(text) { + function copyToClipboard(text, notificationId) { navigator.clipboard.writeText(text).then(() => { - alert('命令已复制到剪贴板'); + var notification = document.getElementById(notificationId); + notification.style.display = 'block'; + notification.style.opacity = '1'; + + // 在2秒后隐藏提示 + setTimeout(function() { + notification.style.opacity = '0'; + setTimeout(function() { + notification.style.display = 'none'; + }, 500); + }, 2000); }, (err) => { console.error('无法复制文本: ', err); });