style: token 统计图标、数值、消息 token 信息加颜色

- header token 统计:琥珀色 (#FFD580),含背景色和边框
- 消息内 token 数:琥珀色 (.stat-tokens)
- 消息内耗时:主题蓝色 (.stat-duration)
- SVG token 图标同步上色,移除 opacity 透明度
This commit is contained in:
thzxx
2026-04-15 10:29:50 +08:00
parent d6373ffafe
commit b05a4785cc
2 changed files with 19 additions and 9 deletions
+7 -6
View File
@@ -158,11 +158,12 @@ export function appendMessageDOM(msg: ChatMessage, index: number): void {
}
const stats: string[] = [];
if (msg.timestamp) stats.push(formatTime(msg.timestamp));
if (msg.eval_count != null && msg.eval_count > 0) stats.push(`${msg.eval_count} tokens`);
if (msg.total_duration != null && msg.total_duration > 0) stats.push(`${(msg.total_duration / 1e9).toFixed(1)}s`);
const statClasses: string[] = [];
if (msg.timestamp) { stats.push(formatTime(msg.timestamp)); statClasses.push(''); }
if (msg.eval_count != null && msg.eval_count > 0) { stats.push(`${msg.eval_count} tokens`); statClasses.push('stat-tokens'); }
if (msg.total_duration != null && msg.total_duration > 0) { stats.push(`${(msg.total_duration / 1e9).toFixed(1)}s`); statClasses.push('stat-duration'); }
if (stats.length > 0) {
contentHtml += `<div class="msg-stats">${stats.map(s => `<span>${s}</span>`).join(' · ')}</div>`;
contentHtml += `<div class="msg-stats">${stats.map((s, i) => `<span${statClasses[i] ? ` class="${statClasses[i]}"` : ''}>${s}</span>`).join(' · ')}</div>`;
}
if (msg.role === 'assistant' && msg.ragSources && msg.ragSources.length > 0) {
@@ -337,8 +338,8 @@ export function updateLastAssistantMessage(content: string, think: string | null
lastMsg.querySelector('.msg-body')!.appendChild(statsDiv);
}
const parts: string[] = [];
if (stats.eval_count != null && stats.eval_count > 0) parts.push(`${stats.eval_count} tokens`);
if (stats.total_duration != null && stats.total_duration > 0) parts.push(`${(stats.total_duration / 1e9).toFixed(1)}s`);
if (stats.eval_count != null && stats.eval_count > 0) parts.push(`<span class="stat-tokens">${stats.eval_count} tokens</span>`);
if (stats.total_duration != null && stats.total_duration > 0) parts.push(`<span class="stat-duration">${(stats.total_duration / 1e9).toFixed(1)}s</span>`);
if (parts.length) statsDiv.innerHTML = parts.join(' · ');
}
+12 -3
View File
@@ -376,8 +376,9 @@ html, body {
margin-left: 8px;
padding: 2px 8px;
font-size: 11px;
color: var(--text-secondary);
background: var(--bg-subtle, rgba(255,255,255,0.04));
color: #FFD580;
background: rgba(255, 213, 128, 0.06);
border: 1px solid rgba(255, 213, 128, 0.12);
border-radius: 10px;
white-space: nowrap;
user-select: none;
@@ -387,7 +388,7 @@ html, body {
width: 14px;
height: 14px;
flex-shrink: 0;
opacity: 0.8;
color: #FFD580;
}
/* ═══ 模型选择栏 ═══ */
@@ -1004,6 +1005,14 @@ html, body {
color: var(--text-tertiary);
}
.msg-stats .stat-tokens {
color: #FFD580;
}
.msg-stats .stat-duration {
color: var(--accent);
}
/* RAG 知识库来源 */
.rag-sources {
margin-top: 8px;