From 212f14adf57559c7b36b9558d2776f2ffd175d1b Mon Sep 17 00:00:00 2001
From: Metona Build <build@metona.dev>
Date: Sun, 19 Apr 2026 18:17:30 +0800
Subject: [PATCH] =?UTF-8?q?style:=20AI=20=E5=9B=9E=E5=A4=8D=E4=B8=AD?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E5=8D=A1=E7=89=87=E7=A7=BB=E8=87=B3=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E4=B8=8A=E6=96=B9=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E5=B1=82=E6=AC=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 工具卡片渲染位置从文字下方移至文字上方
- 工具卡片与文字之间用虚线分隔，形成视觉层次
- 逻辑顺序：思考过程 → 工具执行 → 最终回答
---
 src/renderer/components/chat-area.ts | 24 ++++++++++++++++--------
 src/renderer/styles/style.css        |  9 ++++++++-
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/chat-area.ts b/src/renderer/components/chat-area.ts
index 394a783..5466465 100644
--- a/src/renderer/components/chat-area.ts
+++ b/src/renderer/components/chat-area.ts
@@ -157,6 +157,22 @@ export function appendMessageDOM(msg: ChatMessage, index: number): void {
     contentHtml = contentHtml.replace('<div class="msg-content"></div>', '');
   }
 
+  // v5.1.2 工具卡片移至文字上方（先展示工具执行过程，再展示最终回答）
+  if (msg.role === 'assistant' && msg.toolCalls && msg.toolCalls.length > 0) {
+    let toolHtml = '<div class="tool-calls-container">';
+    for (const tc of msg.toolCalls) {
+      toolHtml += renderToolCallCard(tc);
+    }
+    toolHtml += '</div>';
+    // 插入到 msg-content 之前
+    const contentIdx = contentHtml.indexOf('<div class="msg-content">');
+    if (contentIdx >= 0) {
+      contentHtml = contentHtml.slice(0, contentIdx) + toolHtml + contentHtml.slice(contentIdx);
+    } else {
+      contentHtml = toolHtml + contentHtml;
+    }
+  }
+
   const stats: string[] = [];
   const statClasses: string[] = [];
   if (msg.timestamp) { stats.push(formatTime(msg.timestamp)); statClasses.push(''); }
@@ -166,14 +182,6 @@ export function appendMessageDOM(msg: ChatMessage, index: number): void {
     contentHtml += `<div class="msg-stats">${stats.map((s, i) => `<span${statClasses[i] ? ` class="${statClasses[i]}"` : ''}>${s}</span>`).join(' · ')}</div>`;
   }
 
-  if (msg.role === 'assistant' && msg.toolCalls && msg.toolCalls.length > 0) {
-    contentHtml += '<div class="tool-calls-container">';
-    for (const tc of msg.toolCalls) {
-      contentHtml += renderToolCallCard(tc);
-    }
-    contentHtml += '</div>';
-  }
-
   div.innerHTML = `
     <div class="msg-avatar">${avatar}</div>
     <div class="msg-body">
diff --git a/src/renderer/styles/style.css b/src/renderer/styles/style.css
index 60e014f..8fe4d6a 100644
--- a/src/renderer/styles/style.css
+++ b/src/renderer/styles/style.css
@@ -833,6 +833,11 @@ html, body {
     box-shadow: var(--shadow-card);
 }
 
+.tool-calls-container + .msg-stats + .msg-content,
+.tool-calls-container + .msg-content {
+    margin-top: 4px;
+}
+
 .msg-content {
     font-size: 14px;
     line-height: 1.7;
@@ -1976,7 +1981,9 @@ html, body {
    ═══════════════════════════════════════════════════════════════ */
 
 .tool-calls-container {
-    margin-top: 10px;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px dashed var(--border-subtle);
 }
 
 .tool-call-card {