lxy/DevFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复: grep/read_file 命中行行号与内容分行

Browse Source 
行号 gutter 与内容改同一 flex row 并排(IDE 风格),取代原 head 块+content 块垂直堆叠;去冒号前缀改纯数字右对齐。BUG-260626-01
This commit is contained in:
绝尘
2026-06-27 01:24:50 +08:00
parent 80239500f1
commit bb2cfcbb62
1 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/ToolResultBody.vue
View File

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