mirror of
https://github.com/dqzboy/Docker-Proxy.git
synced 2026-06-19 16:54:32 +02:00
Merge pull request #16 from liangpinglk/main
feat: Optimize the prompt after the copy command
This commit is contained in:
@@ -221,6 +221,21 @@
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.notification {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 7px; /* Adjust the position as needed */
|
||||
left: 87%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -299,8 +314,7 @@
|
||||
const cmdDiv = document.createElement('div');
|
||||
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>
|
||||
<h3>${index + 1}. ${command.title}</h3> <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 +326,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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user