refactor(file): 重构 diff 生成逻辑并优化显示

echoVic · echoVic · commit 385d982ec5b6 · 2025-10-29T18:46:29.000+08:00
将 diff 生成函数提取到共享模块 diffUtils.ts 中，供 Edit 和 Write 工具共用
优化 DiffRenderer 组件，增加折叠功能并移除冗余信息
在 Write 工具中添加文件变更的 diff 显示支持
diff --git a/src/tools/builtin/file/diffUtils.ts b/src/tools/builtin/file/diffUtils.ts
@@ -0,0 +1,108 @@
+/**
+ * 差异生成工具函数
+ * 提供 Edit 和 Write 工具共享的 diff 生成能力
+ */
+
+import * as Diff from 'diff';
+
+/**
+ * 生成差异片段（使用 unified diff 格式，显示替换前后的代码上下文）
+ *
+ * @param oldContent 旧文件内容
+ * @param newContent 新文件内容
+ * @param contextLines 上下文行数（默认 4 行）
+ * @returns diff 片段（JSON 格式，包含 patch 和行号信息）或 null
+ */
+export function generateDiffSnippet(
+  oldContent: string,
+  newContent: string,
+  contextLines: number = 4
+): string | null {
+  // 如果内容完全相同，不生成 diff
+  if (oldContent === newContent) {
+    return null;
+  }
+
+  // 使用 diff 库生成 unified diff
+  const patch = Diff.createPatch('file', oldContent, newContent, '', '', {
+    context: contextLines,
+  });
+
+  // 计算第一个变更位置的行号
+  const lines = patch.split('\n');
+  let matchLine = 1;
+  for (const line of lines) {
+    const hunkMatch = line.match(/@@ -(\d+),?(\d*) \+(\d+),?(\d*) @@/);
+    if (hunkMatch) {
+      matchLine = parseInt(hunkMatch[1], 10);
+      break;
+    }
+  }
+
+  // 返回特殊格式，包含 patch 和行号信息
+  // 使用特殊分隔符 <<<DIFF>>>，方便 MessageRenderer 识别为 diff 内容
+  return `\n<<<DIFF>>>\n${JSON.stringify({
+    patch,
+    startLine: Math.max(1, matchLine - contextLines),
+    matchLine,
+  })}\n<<</DIFF>>>\n`;
+}
+
+/**
+ * 生成带有特定替换位置的差异片段（用于 Edit 工具）
+ *
+ * @param oldContent 旧文件内容
+ * @param newContent 新文件内容
+ * @param oldString 被替换的字符串
+ * @param newString 替换后的字符串
+ * @param contextLines 上下文行数（默认 4 行）
+ * @returns diff 片段或 null
+ */
+export function generateDiffSnippetWithMatch(
+  oldContent: string,
+  newContent: string,
+  oldString: string,
+  newString: string,
+  contextLines: number = 4
+): string | null {
+  // 找到第一个替换位置
+  const firstMatchIndex = oldContent.indexOf(oldString);
+  if (firstMatchIndex === -1) return null;
+
+  // 计算替换位置的行号
+  const beforeLines = oldContent.substring(0, firstMatchIndex).split('\n');
+  const matchLine = beforeLines.length - 1;
+
+  // 分割旧内容和新内容为行数组
+  const oldLines = oldContent.split('\n');
+  const newLines = newContent.split('\n');
+
+  // 计算显示范围（考虑替换可能改变行数）
+  const oldStringLines = oldString.split('\n');
+  const newStringLines = newString.split('\n');
+  const startLine = Math.max(0, matchLine - contextLines);
+  const oldEndLine = Math.min(
+    oldLines.length,
+    matchLine + oldStringLines.length + contextLines
+  );
+  const newEndLine = Math.min(
+    newLines.length,
+    matchLine + newStringLines.length + contextLines
+  );
+
+  // 提取上下文片段
+  const oldSnippet = oldLines.slice(startLine, oldEndLine).join('\n');
+  const newSnippet = newLines.slice(startLine, newEndLine).join('\n');
+
+  // 使用 diff 库生成 unified diff
+  const patch = Diff.createPatch('file', oldSnippet, newSnippet, '', '', {
+    context: contextLines,
+  });
+
+  // 返回特殊格式，包含 patch 和行号信息
+  return `\n<<<DIFF>>>\n${JSON.stringify({
+    patch,
+    startLine: startLine + 1,
+    matchLine: matchLine + 1,
+  })}\n<<</DIFF>>>\n`;
+}
diff --git a/src/tools/builtin/file/edit.ts b/src/tools/builtin/file/edit.ts
@@ -1,11 +1,11 @@
-import * as Diff from 'diff';
 import { promises as fs } from 'fs';
 import { extname } from 'path';
 import { z } from 'zod';
 import { createTool } from '../../core/createTool.js';
 import type { ExecutionContext, ToolResult } from '../../types/index.js';
 import { ToolErrorType, ToolKind } from '../../types/index.js';
 import { ToolSchemas } from '../../validation/zodSchemas.js';
+import { generateDiffSnippetWithMatch } from './diffUtils.js';
 import { FileAccessTracker } from './FileAccessTracker.js';
 import { SnapshotManager } from './SnapshotManager.js';
 
@@ -253,7 +253,7 @@ export const editTool = createTool({
       const stats = await fs.stat(file_path);
 
       // 生成差异片段（仅显示第一个替换的上下文）
-      const diffSnippet = generateDiffSnippet(
+      const diffSnippet = generateDiffSnippetWithMatch(
         content,
         newContent,
         actualString,
@@ -406,58 +406,7 @@ function findMatches(content: string, searchString: string): number[] {
   return matches;
 }
 
-/**
- * 生成差异片段（使用 unified diff 格式，显示替换前后的代码上下文）
- */
-function generateDiffSnippet(
-  oldContent: string,
-  newContent: string,
-  oldString: string,
-  newString: string,
-  contextLines: number = 4
-): string | null {
-  // 找到第一个替换位置
-  const firstMatchIndex = oldContent.indexOf(oldString);
-  if (firstMatchIndex === -1) return null;
-
-  // 计算替换位置的行号
-  const beforeLines = oldContent.substring(0, firstMatchIndex).split('\n');
-  const matchLine = beforeLines.length - 1;
-
-  // 分割旧内容和新内容为行数组
-  const oldLines = oldContent.split('\n');
-  const newLines = newContent.split('\n');
-
-  // 计算显示范围（考虑替换可能改变行数）
-  const oldStringLines = oldString.split('\n');
-  const newStringLines = newString.split('\n');
-  const startLine = Math.max(0, matchLine - contextLines);
-  const oldEndLine = Math.min(
-    oldLines.length,
-    matchLine + oldStringLines.length + contextLines
-  );
-  const newEndLine = Math.min(
-    newLines.length,
-    matchLine + newStringLines.length + contextLines
-  );
-
-  // 提取上下文片段
-  const oldSnippet = oldLines.slice(startLine, oldEndLine).join('\n');
-  const newSnippet = newLines.slice(startLine, newEndLine).join('\n');
-
-  // 使用 diff 库生成 unified diff
-  const patch = Diff.createPatch('file', oldSnippet, newSnippet, '', '', {
-    context: contextLines,
-  });
-
-  // 返回特殊格式，包含 patch 和行号信息
-  // 使用特殊分隔符，方便前端识别为 diff 内容
-  return `\n<<<DIFF>>>\n${JSON.stringify({
-    patch,
-    startLine: startLine + 1,
-    matchLine: matchLine + 1,
-  })}\n<<</DIFF>>>\n`;
-}
+// diff 生成函数已移动到 diffUtils.ts，供 Edit 和 Write 工具共享
 
 /**
  * 格式化显示消息
diff --git a/src/tools/builtin/file/write.ts b/src/tools/builtin/file/write.ts
@@ -5,6 +5,7 @@ import { createTool } from '../../core/createTool.js';
 import type { ExecutionContext, ToolResult } from '../../types/index.js';
 import { ToolErrorType, ToolKind } from '../../types/index.js';
 import { ToolSchemas } from '../../validation/zodSchemas.js';
+import { generateDiffSnippet } from './diffUtils.js';
 import { FileAccessTracker } from './FileAccessTracker.js';
 import { SnapshotManager } from './SnapshotManager.js';
 
@@ -101,9 +102,18 @@ export const writeTool = createTool({
 
       // 检查文件是否存在（用于后续验证和快照）
       let fileExists = false;
+      let oldContent: string | null = null;
       try {
         await fs.access(file_path);
         fileExists = true;
+        // 如果文件存在且是文本文件，读取旧内容用于生成 diff
+        if (encoding === 'utf8') {
+          try {
+            oldContent = await fs.readFile(file_path, 'utf8');
+          } catch (error) {
+            console.warn('[WriteTool] 读取旧文件内容失败:', error);
+          }
+        }
       } catch {
         // 文件不存在
       }
@@ -170,6 +180,16 @@ export const writeTool = createTool({
       const lineCount = encoding === 'utf8' ? content.split('\n').length : 0;
       const fileName = file_path.split('/').pop() || file_path;
 
+      // 生成 diff（如果是覆盖现有文本文件）
+      let diffSnippet: string | null = null;
+      if (oldContent && encoding === 'utf8' && oldContent !== content) {
+        // 文件大小限制：超过 1MB 跳过 diff 生成（避免性能问题）
+        const MAX_DIFF_SIZE = 1024 * 1024; // 1MB
+        if (oldContent.length < MAX_DIFF_SIZE && content.length < MAX_DIFF_SIZE) {
+          diffSnippet = generateDiffSnippet(oldContent, content, 4);
+        }
+      }
+
       const metadata: Record<string, any> = {
         file_path,
         content_size: content.length,
@@ -180,13 +200,19 @@ export const writeTool = createTool({
         session_id: sessionId,
         message_id: messageId,
         last_modified: stats.mtime.toISOString(),
+        has_diff: !!diffSnippet, // 是否生成了 diff
         summary:
           encoding === 'utf8'
             ? `写入 ${lineCount} 行到 ${fileName}`
             : `写入 ${formatFileSize(stats.size)} 到 ${fileName}`,
       };
 
-      const displayMessage = formatDisplayMessage(file_path, metadata, content);
+      const displayMessage = formatDisplayMessage(
+        file_path,
+        metadata,
+        content,
+        diffSnippet
+      );
 
       return {
         success: true,
@@ -248,7 +274,8 @@ export const writeTool = createTool({
 function formatDisplayMessage(
   filePath: string,
   metadata: Record<string, any>,
-  content?: string
+  content?: string,
+  diffSnippet?: string | null
 ): string {
   let message = `✅ 成功写入文件: ${filePath}`;
 
@@ -264,8 +291,13 @@ function formatDisplayMessage(
     message += `\n🔐 使用编码: ${metadata.encoding}`;
   }
 
-  // 添加内容预览（仅对文本文件）
-  if (content && metadata.encoding === 'utf8') {
+  // 优先显示 diff（如果有）
+  if (diffSnippet) {
+    message += diffSnippet;
+  }
+
+  // 添加内容预览（仅对文本文件且没有 diff 时才显示完整预览）
+  if (content && metadata.encoding === 'utf8' && !diffSnippet) {
     const preview = generateContentPreview(filePath, content);
     if (preview) {
       message += '\n\n' + preview;
diff --git a/src/ui/components/DiffRenderer.tsx b/src/ui/components/DiffRenderer.tsx
@@ -8,9 +8,10 @@ import { themeManager } from '../themes/ThemeManager.js';
 
 interface DiffRendererProps {
   patch: string; // unified diff 格式的 patch
-  startLine: number; // 起始行号
-  matchLine: number; // 变更所在行号
+  startLine?: number; // 起始行号（保留用于向后兼容，但不再显示）
+  matchLine?: number; // 变更所在行号（保留用于向后兼容，但不再显示）
   terminalWidth: number;
+  maxLines?: number; // 默认显示的最大行数（默认 20 行）
 }
 
 /**
@@ -97,6 +98,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   startLine,
   matchLine,
   terminalWidth,
+  maxLines = 20, // 默认显示 20 行
 }) => {
   const theme = themeManager.getTheme();
   const parsedLines = parsePatch(patch);
@@ -105,21 +107,31 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   const maxLineNum = Math.max(...parsedLines.map((l) => l.lineNumber || 0));
   const lineNumWidth = maxLineNum.toString().length + 1;
 
+  // 判断是否需要折叠
+  const totalLines = parsedLines.length;
+  const needsCollapse = totalLines > maxLines;
+  const displayLines = needsCollapse ? parsedLines.slice(0, maxLines) : parsedLines;
+  const hiddenLines = totalLines - maxLines;
+
   return (
     <Box flexDirection="column" marginTop={1} marginBottom={1}>
       {/* 分隔符 */}
       <Text color={theme.colors.muted}>{'─'.repeat(Math.min(60, terminalWidth))}</Text>
 
-      {/* 变更位置提示 */}
-      <Text color={theme.colors.info}>
-        📍 变更位置：第 {matchLine} 行（从第 {startLine} 行开始显示）
-      </Text>
+      {/* diff 统计信息 */}
+      {needsCollapse && (
+        <Text color={theme.colors.info}>
+          📊 显示前 {maxLines} 行，共 {totalLines} 行 diff
+        </Text>
+      )}
 
-      {/* 分隔符 */}
-      <Text color={theme.colors.muted}>{'─'.repeat(Math.min(60, terminalWidth))}</Text>
+      {/* 分隔符（仅在有统计信息时显示） */}
+      {needsCollapse && (
+        <Text color={theme.colors.muted}>{'─'.repeat(Math.min(60, terminalWidth))}</Text>
+      )}
 
       {/* 渲染 diff 内容 */}
-      {parsedLines.map((line, index) => {
+      {displayLines.map((line, index) => {
         if (line.type === 'header') {
           return (
             <Text key={index} color={theme.colors.muted} dimColor>
@@ -147,7 +159,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
           fgColor = theme.colors.error;
           bgColor = undefined;
         } else {
-          fgColor = theme.colors.text;
+          fgColor = theme.colors.text.primary;
         }
 
         // 截断过长的行（保留空间给行号和前缀）
@@ -166,6 +178,15 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
         );
       })}
 
+      {/* 折叠提示 */}
+      {needsCollapse && (
+        <Box marginTop={1}>
+          <Text color={theme.colors.warning} dimColor>
+            ⚠️  已隐藏剩余 {hiddenLines} 行 diff（总共 {totalLines} 行）
+          </Text>
+        </Box>
+      )}
+
       {/* 分隔符 */}
       <Text color={theme.colors.muted}>{'─'.repeat(Math.min(60, terminalWidth))}</Text>
     </Box>
diff --git a/src/ui/components/LoadingIndicator.tsx b/src/ui/components/LoadingIndicator.tsx
@@ -130,8 +130,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = React.memo(
   (prevProps, nextProps) => {
     // 精确比较，只在必要时重渲染
     return (
-      prevProps.visible === nextProps.visible &&
-      prevProps.message === nextProps.message
+      prevProps.visible === nextProps.visible && prevProps.message === nextProps.message
     );
   }
 );
