yuxing/Docker-Proxy
1
0
Fork 0
mirror of https://github.com/dqzboy/Docker-Proxy.git synced 2026-01-12 16:25:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Optimize the prompt after the copy command

Browse Source
This commit is contained in:
liangpinglk
2024-07-24 13:36:59 +08:00
parent 333c8d49a3
commit e3b45874e9
1 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
hubcmdui/web/index.html
View File

@@ -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;
}
</style>
</head>
<body>
@@ -300,7 +315,9 @@
cmdDiv.className = 'step';
cmdDiv.innerHTML = `
<h3>${index + 1}. ${command.title}</h3>
<pre><code>${command.cmd}</code><button class="copy-btn" onclick="copyToClipboard('${command.cmd}')">复制</button></pre>
<pre><code>${command.cmd}</code>
<div id="copyNotification${index}" class="notification">已复制!</div>
<button class="copy-btn" onclick="copyToClipboard('${command.cmd}', 'copyNotification${index}')">复制</button></pre>
`;
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);
});