From bb2cfcbb628cbb3e0188ab372a3771b0725c2523 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=9D=E5=B0=98?= <237809796@qq.com>
Date: Sat, 27 Jun 2026 01:24:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D:=20grep/read=5Ffile=20?=
 =?UTF-8?q?=E5=91=BD=E4=B8=AD=E8=A1=8C=E8=A1=8C=E5=8F=B7=E4=B8=8E=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E5=88=86=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

行号 gutter 与内容改同一 flex row 并排(IDE 风格),取代原 head 块+content 块垂直堆叠;去冒号前缀改纯数字右对齐。BUG-260626-01
---
 src/components/ToolResultBody.vue | 39 ++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/ToolResultBody.vue b/src/components/ToolResultBody.vue
index ad26a92..3310ab2 100644
--- a/src/components/ToolResultBody.vue
+++ b/src/components/ToolResultBody.vue
@@ -19,12 +19,13 @@
       </button>
     </div>
     <!-- search 模式:命中行渲染(复用 grep content 样式;read_file matches 仅 {line,content} 无 file) -->
+    <!-- BUG-260626-01:行号 gutter 与内容同一 flex row(IDE 风格),不再 head/content 分两行块级堆叠 -->
     <div v-if="parsed?.search && parsed?.matches?.length" class="ai-tool-grep-matches">
       <div v-for="(m, i) in parsed?.matches" :key="i" class="ai-tool-grep-match">
-        <div v-if="m.line !== null && m.line !== undefined" class="ai-tool-grep-match-head">
-          <span class="ai-tool-grep-line">:{{ m.line }}</span>
+        <div class="ai-tool-grep-match-main">
+          <span v-if="m.line !== null && m.line !== undefined" class="ai-tool-grep-line">{{ m.line }}</span>
+          <code class="ai-tool-grep-content">{{ m.content }}</code>
         </div>
-        <code class="ai-tool-grep-content">{{ m.content }}</code>
       </div>
     </div>
     <!-- 默认模式:全文预览 -->
@@ -96,14 +97,15 @@
         <span class="ai-tool-dir-size">{{ $t('aiTool.grepCountLines', { n: c.count }) }}</span>
       </div>
     </div>
-    <!-- content 模式:命中行(文件:行:内容),支持上下文折叠 -->
+    <!-- content 模式:命中行(文件 | 行号 gutter | 内容 同行),支持上下文折叠 -->
+    <!-- BUG-260626-01:文件名/行号/内容同一 flex row,不再 head 块 + content 块分两行 -->
     <div v-else class="ai-tool-grep-matches">
       <div v-for="(m, i) in parsed?.matches" :key="i" class="ai-tool-grep-match">
-        <div class="ai-tool-grep-match-head">
+        <div class="ai-tool-grep-match-main">
           <span class="ai-tool-grep-file">{{ m.file }}</span>
-          <span v-if="m.line !== null && m.line !== undefined" class="ai-tool-grep-line">:{{ m.line }}</span>
+          <span v-if="m.line !== null && m.line !== undefined" class="ai-tool-grep-line">{{ m.line }}</span>
+          <code class="ai-tool-grep-content">{{ m.content }}</code>
         </div>
-        <code class="ai-tool-grep-content">{{ m.content }}</code>
         <pre v-if="m.context" class="ai-tool-grep-context"><code>{{ m.context }}</code></pre>
       </div>
     </div>
@@ -350,26 +352,37 @@ watch(() => props.tc.status, (s) => {
 .ai-tool-grep-match:last-child {
   border-bottom: none;
 }
-.ai-tool-grep-match-head {
+/* BUG-260626-01:命中行主体 = 单行 flex row(文件名 | 行号 gutter | 内容 并排),
+   取代原 head 块 + content 块的垂直两行堆叠(行号内容分行根因)。 */
+.ai-tool-grep-match-main {
   display: flex;
-  align-items: baseline;
-  gap: 1px;
+  align-items: flex-start;
+  gap: 10px;
   font-family: var(--df-font-mono);
-  font-size: 10px;
-  margin-bottom: 1px;
+  font-size: 11px;
 }
 .ai-tool-grep-file {
   color: var(--df-accent);
+  flex-shrink: 0;
+  max-width: 40%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 10px;
+  padding-top: 1px;
 }
 .ai-tool-grep-line {
   color: var(--df-text-dim);
   flex-shrink: 0;
+  min-width: 2em;
+  text-align: right;
+  font-size: 10px;
+  user-select: none;
+  padding-top: 1px;
 }
 .ai-tool-grep-content {
-  display: block;
+  flex: 1;
+  min-width: 0;
   font-family: var(--df-font-mono);
   font-size: 11px;
   color: var(--df-text);