mirror of
https://github.com/Zippland/Snap-Solver.git
synced 2026-02-19 16:59:43 +08:00
功能:为代码块添加复制按钮,优化用户体验
This commit is contained in:
@@ -869,6 +869,9 @@ class SnapSolver {
|
|||||||
hljs.highlightElement(block);
|
hljs.highlightElement(block);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 为所有代码块添加复制按钮
|
||||||
|
this.addCopyButtonsToCodeBlocks(element);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Markdown解析错误:', error);
|
console.error('Markdown解析错误:', error);
|
||||||
// 发生错误时也保留换行格式
|
// 发生错误时也保留换行格式
|
||||||
@@ -879,6 +882,60 @@ class SnapSolver {
|
|||||||
element.scrollTop = element.scrollHeight;
|
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() {
|
initializeCropper() {
|
||||||
try {
|
try {
|
||||||
// 如果当前没有截图,不要初始化裁剪器
|
// 如果当前没有截图,不要初始化裁剪器
|
||||||
@@ -1100,6 +1157,9 @@ class SnapSolver {
|
|||||||
const successMessage = '已复制到服务端剪贴板';
|
const successMessage = '已复制到服务端剪贴板';
|
||||||
this.updateClipboardStatus(successMessage, 'success');
|
this.updateClipboardStatus(successMessage, 'success');
|
||||||
window.uiManager?.showToast(successMessage, 'success');
|
window.uiManager?.showToast(successMessage, 'success');
|
||||||
|
|
||||||
|
// 清空输入框
|
||||||
|
this.clipboardTextarea.value = '';
|
||||||
} else {
|
} else {
|
||||||
const errorMessage = result?.message || '发送失败,请稍后重试';
|
const errorMessage = result?.message || '发送失败,请稍后重试';
|
||||||
this.updateClipboardStatus(errorMessage, 'error');
|
this.updateClipboardStatus(errorMessage, 'error');
|
||||||
|
|||||||
@@ -3557,6 +3557,49 @@ textarea:focus {
|
|||||||
color: var(--danger);
|
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,
|
#temperatureValue,
|
||||||
#thinkBudgetPercentValue {
|
#thinkBudgetPercentValue {
|
||||||
|
|||||||
Reference in New Issue
Block a user