新增用户消息复制和编辑功能,并提高批量生成数量上限至20。
This commit is contained in:
@@ -117,7 +117,7 @@
|
||||
<div class="d-flex flex-column gap-3">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">生成数量</span>
|
||||
<input type="number" class="form-control" id="batchCount" min="1" max="10" value="6" placeholder="输入生成数量">
|
||||
<input type="number" class="form-control" id="batchCount" min="1" max="20" value="6" placeholder="输入生成数量">
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-primary flex-fill" onclick="sendMessage()">
|
||||
@@ -127,7 +127,7 @@
|
||||
<i class="fas fa-magic me-2"></i>批量生成
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-muted">支持1-10张图像同时生成</small>
|
||||
<small class="text-muted">支持1-20张图像同时生成</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
73
script.js
73
script.js
@@ -724,14 +724,29 @@ const uiController = {
|
||||
messageDiv.className = `chat-message ${role} fade-in`;
|
||||
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const messageId = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||
|
||||
// 为用户消息添加操作按钮
|
||||
const actionButtons = role === 'user' ? `
|
||||
<div class="message-actions">
|
||||
<button class="btn btn-sm btn-outline-secondary me-1" onclick="app.copyMessageContent('${messageId}')" title="复制">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="app.editMessageContent('${messageId}')" title="编辑">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
</div>
|
||||
` : '';
|
||||
|
||||
messageDiv.innerHTML = `
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<strong>${role === 'user' ? '用户' : '助手'}</strong>
|
||||
<small class="text-muted ms-2">${timestamp}</small>
|
||||
</div>
|
||||
${actionButtons}
|
||||
</div>
|
||||
<div class="mt-2">${this.escapeHtml(content)}</div>
|
||||
<div class="mt-2 message-content" id="${messageId}">${this.escapeHtml(content)}</div>
|
||||
`;
|
||||
|
||||
chatHistoryDiv.appendChild(messageDiv);
|
||||
@@ -1243,14 +1258,29 @@ const uiController = {
|
||||
messageDiv.className = `chat-message ${msg.role} fade-in`;
|
||||
|
||||
const timestamp = new Date(msg.timestamp || Date.now()).toLocaleTimeString();
|
||||
const messageId = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||
|
||||
// 为用户消息添加操作按钮
|
||||
const actionButtons = msg.role === 'user' ? `
|
||||
<div class="message-actions">
|
||||
<button class="btn btn-sm btn-outline-secondary me-1" onclick="app.copyMessageContent('${messageId}')" title="复制">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="app.editMessageContent('${messageId}')" title="编辑">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
</div>
|
||||
` : '';
|
||||
|
||||
messageDiv.innerHTML = `
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<strong>${msg.role === 'user' ? '用户' : '助手'}</strong>
|
||||
<small class="text-muted ms-2">${timestamp}</small>
|
||||
</div>
|
||||
${actionButtons}
|
||||
</div>
|
||||
<div class="mt-2">${self.escapeHtml(msg.content)}</div>
|
||||
<div class="mt-2 message-content" id="${messageId}">${self.escapeHtml(msg.content)}</div>
|
||||
`;
|
||||
|
||||
chatHistoryDiv.appendChild(messageDiv);
|
||||
@@ -1574,8 +1604,8 @@ const app = {
|
||||
return;
|
||||
}
|
||||
|
||||
if (batchCount < 1 || batchCount > 10) {
|
||||
utils.showNotification('请输入有效的生成数量(1-10)', 'warning');
|
||||
if (batchCount < 1 || batchCount > 20) {
|
||||
utils.showNotification('请输入有效的生成数量(1-20)', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1808,6 +1838,41 @@ const app = {
|
||||
fileHandler.handleFiles(files);
|
||||
},
|
||||
|
||||
// 复制消息内容到剪贴板
|
||||
copyMessageContent: function(messageId) {
|
||||
const messageElement = document.getElementById(messageId);
|
||||
if (!messageElement) {
|
||||
utils.showNotification('找不到消息内容', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
const content = messageElement.textContent;
|
||||
navigator.clipboard.writeText(content).then(() => {
|
||||
utils.showNotification('已复制到剪贴板', 'success');
|
||||
}).catch(() => {
|
||||
utils.showNotification('复制失败,请手动复制', 'danger');
|
||||
});
|
||||
},
|
||||
|
||||
// 编辑消息内容,将其填入文本框
|
||||
editMessageContent: function(messageId) {
|
||||
const messageElement = document.getElementById(messageId);
|
||||
if (!messageElement) {
|
||||
utils.showNotification('找不到消息内容', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
const content = messageElement.textContent;
|
||||
const messageInput = document.getElementById('messageInput');
|
||||
if (messageInput) {
|
||||
messageInput.value = content;
|
||||
messageInput.focus();
|
||||
utils.showNotification('内容已填入文本框', 'success');
|
||||
} else {
|
||||
utils.showNotification('找不到文本输入框', 'danger');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 清除存储数据
|
||||
clearStorage: async function() {
|
||||
|
||||
27
styles.css
27
styles.css
@@ -700,3 +700,30 @@ body {
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
/* 聊天消息操作按钮 */
|
||||
.message-actions {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-message:hover .message-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message-actions .btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 6px;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.message-actions .btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.message-content {
|
||||
word-break: break-word;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user