功能:为代码块添加复制按钮,优化用户体验

This commit is contained in:
Cb1ock
2025-10-25 22:10:05 +08:00
parent 6b405bbf3c
commit ca9db3a508
2 changed files with 103 additions and 0 deletions

View File

@@ -869,6 +869,9 @@ class SnapSolver {
hljs.highlightElement(block);
});
}
// 为所有代码块添加复制按钮
this.addCopyButtonsToCodeBlocks(element);
} catch (error) {
console.error('Markdown解析错误:', error);
// 发生错误时也保留换行格式
@@ -879,6 +882,60 @@ class SnapSolver {
element.scrollTop = element.scrollHeight;
}
// 为代码块添加复制按钮
addCopyButtonsToCodeBlocks(element) {
const codeBlocks = element.querySelectorAll('pre code');
codeBlocks.forEach((codeBlock) => {
// 检查是否已经有复制按钮
if (codeBlock.parentElement.querySelector('.code-copy-btn')) {
return;
}
// 创建包装器
const wrapper = document.createElement('div');
wrapper.className = 'code-block-wrapper';
// 将pre元素包装起来
const preElement = codeBlock.parentElement;
preElement.parentNode.insertBefore(wrapper, preElement);
wrapper.appendChild(preElement);
// 创建复制按钮
const copyBtn = document.createElement('button');
copyBtn.className = 'code-copy-btn';
copyBtn.innerHTML = '<i class="fas fa-copy"></i> 复制';
copyBtn.title = '复制代码';
// 添加点击事件
copyBtn.addEventListener('click', async () => {
try {
const codeText = codeBlock.textContent;
await navigator.clipboard.writeText(codeText);
// 更新按钮状态
copyBtn.innerHTML = '<i class="fas fa-check"></i> 已复制';
copyBtn.classList.add('copied');
// 显示提示
window.uiManager?.showToast('代码已复制到剪贴板', 'success');
// 2秒后恢复原状
setTimeout(() => {
copyBtn.innerHTML = '<i class="fas fa-copy"></i> 复制';
copyBtn.classList.remove('copied');
}, 2000);
} catch (error) {
console.error('复制失败:', error);
window.uiManager?.showToast('复制失败,请手动选择复制', 'error');
}
});
// 将按钮添加到包装器
wrapper.appendChild(copyBtn);
});
}
initializeCropper() {
try {
// 如果当前没有截图,不要初始化裁剪器
@@ -1100,6 +1157,9 @@ class SnapSolver {
const successMessage = '已复制到服务端剪贴板';
this.updateClipboardStatus(successMessage, 'success');
window.uiManager?.showToast(successMessage, 'success');
// 清空输入框
this.clipboardTextarea.value = '';
} else {
const errorMessage = result?.message || '发送失败,请稍后重试';
this.updateClipboardStatus(errorMessage, 'error');

View File

@@ -3557,6 +3557,49 @@ textarea:focus {
color: var(--danger);
}
/* 代码块复制按钮样式 */
.code-block-wrapper {
position: relative;
margin: 1rem 0;
}
.code-block-wrapper pre {
margin: 0;
padding: 1rem;
background-color: var(--surface-alt);
border-radius: 0.5rem;
border: 1px solid var(--border-color);
overflow-x: auto;
}
.code-copy-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background-color: var(--primary);
color: white;
border: none;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s ease;
z-index: 10;
}
.code-copy-btn:hover {
opacity: 1;
}
.code-copy-btn:active {
background-color: var(--primary-dark);
}
.code-copy-btn.copied {
background-color: var(--success-color);
}
/* 滑块值显示优化 */
#temperatureValue,
#thinkBudgetPercentValue {