Compare commits

..

1 Commits

Author SHA1 Message Date
e1ab11c007 feat: 添加复制按钮(复制原文)
- 用户和AI消息都添加复制按钮
- 复制原始文本内容(不包含Markdown格式)
- 添加Toast提示显示复制成功
- 复制按钮hover时显示蓝色
2026-04-25 17:20:32 +08:00
2 changed files with 68 additions and 1 deletions

View File

@@ -174,6 +174,41 @@ async function regenerate(index) {
await streamGenerate(userMsgIndex);
}
// 复制消息(复制原文)
function copyMessage(index) {
const content = messages[index].content;
navigator.clipboard.writeText(content).then(() => {
showToast('已复制到剪贴板');
}).catch(err => {
console.error('复制失败:', err);
// 备用方案
const textarea = document.createElement('textarea');
textarea.value = content;
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showToast('已复制到剪贴板');
});
}
// 显示提示
function showToast(message) {
const toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => toast.classList.add('show'), 10);
setTimeout(() => {
toast.classList.remove('show');
setTimeout(() => document.body.removeChild(toast), 300);
}, 2000);
}
// 删除消息
function deleteMessage(index) {
if (isLoading) return;
@@ -212,14 +247,18 @@ function renderMessages() {
const avatar = isUser ? '👤' : '🤖';
const content = renderMarkdown(msg.content);
// 操作按钮
// 操作按钮(复制按钮放在最前面)
const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
const actions = isUser
? `<div class="message-actions">
<button class="action-btn copy-btn" onclick="copyMessage(${index})" title="复制">${copyIcon}</button>
<button class="action-btn delete-btn" onclick="deleteMessage(${index})" title="删除">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
</button>
</div>`
: `<div class="message-actions">
<button class="action-btn copy-btn" onclick="copyMessage(${index})" title="复制">${copyIcon}</button>
<button class="action-btn regenerate-btn" onclick="regenerate(${index})" title="重新生成">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
</button>

View File

@@ -299,6 +299,28 @@ body {
padding: 8px;
}
/* Toast 提示 */
.toast {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
background: var(--text-color);
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
opacity: 0;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* 消息结构 */
.message-body {
display: flex;
@@ -345,6 +367,12 @@ body {
color: var(--text-color);
}
.action-btn.copy-btn:hover {
background: #dbeafe;
border-color: var(--primary);
color: var(--primary);
}
.action-btn.delete-btn:hover {
background: #fee2e2;
border-color: #e53e3e;