coder/ai-chat-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 版本切换控件简化并整合到操作按钮区域

Browse Source
This commit is contained in:
hubian
2026-04-13 11:11:06 +08:00
parent e05233fb4f
commit f0789d6bbc
1 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
templates/index.html
View File

@@ -52,18 +52,19 @@
.user-message-text { background: #f0f0f0; padding: 12px 16px; border-radius: 12px; font-size: 15px; }
/* 消息操作按钮 */
.message-actions { display: flex; gap: 8px; margin-top: 8px; }
.message-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.action-btn { padding: 6px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; font-size: 12px; color: #666; display: flex; align-items: center; gap: 4px; transition: all 0.2s; }
.action-btn:hover { background: #e8e8e8; border-color: #ccc; }
.action-btn.copied { color: #10a37f; border-color: #10a37f; background: #e8f5e9; }
.action-btn.regenerate:hover { color: #667eea; border-color: #667eea; }
/* 版本切换控件 */
.version-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding: 8px 0; }
.version-btn { width: 28px; height: 28px; border-radius: 6px; background: #f0f0f0; border: 1px solid #ddd; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #666; transition: all 0.2s; }
.version-btn:hover { background: #e8e8e8; border-color: #667eea; color: #667eea; }
.version-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.version-indicator { font-size: 12px; color: #666; min-width: 60px; text-align: center; }
/* 版本切换控件 - 简洁版 */
.version-switcher { display: none; align-items: center; gap: 4px; margin-left: 4px; }
.version-switcher.show { display: flex; }
.version-arrow { width: 24px; height: 24px; border-radius: 4px; background: #f5f5f5; border: 1px solid #e0e0e0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #666; font-size: 14px; transition: all 0.2s; }
.version-arrow:hover { background: #e8e8e8; border-color: #667eea; color: #667eea; }
.version-arrow:disabled { opacity: 0.4; cursor: not-allowed; background: #f5f5f5; }
.version-label { font-size: 11px; color: #888; padding: 0 2px; }
/* 加载动画 */
.loading-indicator { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; color: #667eea; }
@@ -333,18 +334,15 @@
html += `<button class="action-btn" onclick="copyMessage(this)"><i class="ri-file-copy-line"></i> 复制</button>`;
if (role === 'assistant') {
html += `<button class="action-btn regenerate" onclick="regenerateMessage('${messageId}')"><i class="ri-refresh-line"></i> 重新生成</button>`;
// 版本切换控件 - 放在重新生成按钮后面
html += `<span class="version-switcher" id="${messageId}_version_switcher">`;
html += `<button class="version-arrow" onclick="switchVersion('${messageId}', -1)" data-dir="prev"><i class="ri-arrow-left-s-line"></i></button>`;
html += `<span class="version-label" id="${messageId}_version_label">1/1</span>`;
html += `<button class="version-arrow" onclick="switchVersion('${messageId}', 1)" data-dir="next"><i class="ri-arrow-right-s-line"></i></button>`;
html += `</span>`;
}
html += `</div>`;
// assistant消息的版本切换控件（初始隐藏，有多个版本时显示）
if (role === 'assistant') {
html += `<div class="version-controls" id="${messageId}_version_controls" style="display:none;">
<button class="version-btn" onclick="switchVersion('${messageId}', -1)" data-dir="prev"><i class="ri-arrow-left-s-line"></i></button>
<span class="version-indicator" id="${messageId}_version_indicator">1/1</span>
<button class="version-btn" onclick="switchVersion('${messageId}', 1)" data-dir="next"><i class="ri-arrow-right-s-line"></i></button>
</div>`;
}
// Agent信息
if (role === 'assistant' && agentName) {
html += `<div class="agent-info"><i class="ri-robot-line"></i> ${agentName}</div>`;
@@ -431,10 +429,10 @@
// 显示版本切换控件
function showVersionControls(messageId) {
const controls = document.getElementById(`${messageId}_version_controls`);
const switcher = document.getElementById(`${messageId}_version_switcher`);
const versions = messageVersions[messageId];
if (controls && versions && versions.length > 1) {
controls.style.display = 'flex';
if (switcher && versions && versions.length > 1) {
switcher.classList.add('show');
// 新生成的版本是最后一个，切换到最新版本
const container = document.getElementById(`${messageId}_container`);
if (container) {
@@ -450,17 +448,25 @@
// 更新版本指示器
function updateVersionIndicator(messageId) {
const container = document.getElementById(`${messageId}_container`);
const indicator = document.getElementById(`${messageId}_version_indicator`);
const label = document.getElementById(`${messageId}_version_label`);
const versions = messageVersions[messageId];
if (!container || !indicator || !versions) return;
if (!container || !label || !versions) return;
// 找到当前激活的版本
const activeVersion = container.querySelector('.response-version.active');
const currentIndex = activeVersion ? parseInt(activeVersion.dataset.version) : 0;
indicator.textContent = `${currentIndex + 1}/${versions.length}`;
label.textContent = `${currentIndex + 1}/${versions.length}`;
// 更新按钮状态
const switcher = document.getElementById(`${messageId}_version_switcher`);
if (switcher) {
const prevBtn = switcher.querySelector('[data-dir="prev"]');
const nextBtn = switcher.querySelector('[data-dir="next"]');
if (prevBtn) prevBtn.disabled = currentIndex === 0;
if (nextBtn) nextBtn.disabled = currentIndex === versions.length - 1;
}
}
const prevBtn = indicator.parentElement.querySelector('[data-dir="prev"]');
const nextBtn = indicator.parentElement.querySelector('[data-dir="next"]');
if (prevBtn) prevBtn.disabled = currentIndex === 0;