From b05a4785cc442b1b2cf64c3d773d09d1241014f9 Mon Sep 17 00:00:00 2001
From: thzxx <thzxx@gitee.com>
Date: Wed, 15 Apr 2026 10:29:50 +0800
Subject: [PATCH] =?UTF-8?q?style:=20token=20=E7=BB=9F=E8=AE=A1=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E3=80=81=E6=95=B0=E5=80=BC=E3=80=81=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=20token=20=E4=BF=A1=E6=81=AF=E5=8A=A0=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- header token 统计：琥珀色 (#FFD580)，含背景色和边框
- 消息内 token 数：琥珀色 (.stat-tokens)
- 消息内耗时：主题蓝色 (.stat-duration)
- SVG token 图标同步上色，移除 opacity 透明度
---
 src/renderer/components/chat-area.ts | 13 +++++++------
 src/renderer/styles/style.css        | 15 ++++++++++++---
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/chat-area.ts b/src/renderer/components/chat-area.ts
index 15c4a0f..40f2bc0 100644
--- a/src/renderer/components/chat-area.ts
+++ b/src/renderer/components/chat-area.ts
@@ -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(' · ');
   }
 
diff --git a/src/renderer/styles/style.css b/src/renderer/styles/style.css
index 3271b7d..eb874df 100644
--- a/src/renderer/styles/style.css
+++ b/src/renderer/styles/style.css
@@ -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;