feat(vscode-ide-companion): 新增 DiffDisplay 组件和 diff 统计工具

- 增强 DiffDisplay 组件，支持更丰富的差异展示
- 新增 diffStats.ts 工具，提供差异统计功能
- 新增样式文件 DiffDisplay.css

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

packages/vscode-ide-companion/src/webview/components/toolcalls/shared/DiffDisplay.css

@@ -0,0 +1,315 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * DiffDisplay 组件样式
+ */
+
+/* ========================================
+   容器样式
+   ======================================== */
+
+.diff-display-container {
+  font-family: var(--vscode-font-family);
+  font-size: var(--vscode-font-size);
+  width: 100%;
+}
+
+/* ========================================
+   紧凑视图样式 - 超简洁版本
+   ======================================== */
+
+.diff-compact-view {
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  background: var(--vscode-editor-background);
+  overflow: hidden;
+}
+
+.diff-compact-clickable {
+  padding: 6px 10px;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.15s ease-in-out;
+}
+
+.diff-compact-clickable:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+
+.diff-compact-clickable:active {
+  opacity: 0.9;
+}
+
+.diff-compact-clickable:focus {
+  outline: 1px solid var(--vscode-focusBorder);
+  outline-offset: -1px;
+}
+
+.diff-compact-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.diff-file-info {
+  flex: 1;
+  min-width: 0; /* 允许文字截断 */
+  font-weight: 500;
+  font-size: 0.95em;
+}
+
+.diff-file-info .file-link {
+  color: var(--vscode-foreground);
+}
+
+.diff-stats {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-family: var(--vscode-editor-font-family, 'Menlo', 'Monaco', 'Courier New', monospace);
+  font-size: 0.85em;
+  flex-shrink: 0;
+}
+
+.diff-stats > span {
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.stat-added {
+  color: var(--vscode-gitDecoration-addedResourceForeground, #4ec9b0);
+}
+
+.stat-removed {
+  color: var(--vscode-gitDecoration-deletedResourceForeground, #f48771);
+}
+
+.stat-changed {
+  color: var(--vscode-gitDecoration-modifiedResourceForeground, #e5c07b);
+}
+
+.stat-no-change {
+  color: var(--vscode-descriptionForeground);
+  opacity: 0.7;
+}
+
+.diff-compact-actions {
+  padding: 4px 10px 6px;
+  border-top: 1px solid var(--vscode-panel-border);
+  background: var(--vscode-editorGroupHeader-tabsBackground);
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* ========================================
+   完整视图样式
+   ======================================== */
+
+.diff-full-view {
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.diff-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  background: var(--vscode-editorGroupHeader-tabsBackground);
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.diff-file-path {
+  font-weight: 500;
+  flex: 1;
+}
+
+.diff-header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.diff-stats-line {
+  padding: 8px 12px;
+  background: var(--vscode-editor-background);
+  color: var(--vscode-descriptionForeground);
+  font-size: 0.9em;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.diff-section {
+  padding: 12px;
+  background: var(--vscode-editor-background);
+}
+
+.diff-section + .diff-section {
+  border-top: 1px solid var(--vscode-panel-border);
+}
+
+.diff-label {
+  font-size: 0.85em;
+  color: var(--vscode-descriptionForeground);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+}
+
+/* ========================================
+   按钮样式
+   ======================================== */
+
+.diff-action-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: var(--vscode-font-family);
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  white-space: nowrap;
+}
+
+.diff-action-button svg {
+  flex-shrink: 0;
+}
+
+.diff-action-button.primary {
+  background: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+}
+
+.diff-action-button.primary:hover {
+  background: var(--vscode-button-hoverBackground);
+}
+
+.diff-action-button.primary:active {
+  opacity: 0.9;
+}
+
+.diff-action-button.secondary {
+  background: transparent;
+  color: var(--vscode-textLink-foreground);
+  padding: 4px 8px;
+  font-size: 0.85em;
+}
+
+.diff-action-button.secondary:hover {
+  background: var(--vscode-button-secondaryHoverBackground);
+  text-decoration: underline;
+}
+
+.diff-action-button:focus {
+  outline: 1px solid var(--vscode-focusBorder);
+  outline-offset: 2px;
+}
+
+.diff-action-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ========================================
+   代码块样式
+   ======================================== */
+
+.diff-section .code-block {
+  margin: 0;
+  padding: 12px;
+  background: var(--vscode-textCodeBlock-background, rgba(0, 0, 0, 0.1));
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  overflow-x: auto;
+  font-family: var(--vscode-editor-font-family, 'Menlo', 'Monaco', 'Courier New', monospace);
+  font-size: 0.9em;
+  line-height: 1.5;
+}
+
+.diff-section .code-content {
+  white-space: pre;
+  color: var(--vscode-editor-foreground);
+}
+
+/* ========================================
+   响应式调整
+   ======================================== */
+
+@media (max-width: 600px) {
+  .diff-compact-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .diff-stats {
+    align-self: flex-start;
+  }
+
+  .diff-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .diff-header-actions {
+    align-self: flex-end;
+  }
+}
+
+/* ========================================
+   高对比度模式支持
+   ======================================== */
+
+@media (prefers-contrast: high) {
+  .diff-compact-view,
+  .diff-full-view {
+    border-width: 2px;
+  }
+
+  .diff-stats > span {
+    font-weight: 700;
+    border: 1px solid currentColor;
+  }
+
+  .diff-action-button {
+    border: 1px solid currentColor;
+  }
+}
+
+/* ========================================
+   深色主题优化
+   ======================================== */
+
+@media (prefers-color-scheme: dark) {
+  .diff-compact-view:hover {
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  .stat-added {
+    background: rgba(78, 201, 176, 0.2);
+  }
+
+  .stat-removed {
+    background: rgba(244, 135, 113, 0.2);
+  }
+
+  .stat-changed {
+    background: rgba(229, 192, 123, 0.2);
+  }
+}
+
+/* ========================================
+   LocationsList 样式（用于 FileLink 列表）
+   ======================================== */
+
+.locations-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}

packages/vscode-ide-companion/src/webview/components/toolcalls/shared/DiffDisplay.tsx

@@ -7,6 +7,13 @@
  */
 
 import type React from 'react';
+import { useState, useMemo } from 'react';
+import { FileLink } from '../../shared/FileLink.js';
+import {
+  calculateDiffStats,
+  formatDiffStatsDetailed,
+} from '../../../utils/diffStats.js';
+import './DiffDisplay.css';
 
 /**
  * Props for DiffDisplay
@@ -16,57 +23,140 @@ interface DiffDisplayProps {
   oldText?: string | null;
   newText?: string;
   onOpenDiff?: () => void;
+  /** 默认显示模式：'compact' | 'full' */
+  defaultMode?: 'compact' | 'full';
 }
 
 /**
- * Display diff with before/after sections and option to open in VSCode diff viewer
+ * Display diff with compact stats or full before/after sections
+ * Supports toggling between compact and full view modes
  */
 export const DiffDisplay: React.FC<DiffDisplayProps> = ({
   path,
   oldText,
   newText,
   onOpenDiff,
-}) => (
-  <div className="diff-display-container">
-    <div className="diff-header">
-      <div className="diff-file-path">
-        <strong>{path || 'Unknown file'}</strong>
+  defaultMode = 'compact',
+}) => {
+  // 视图模式状态：紧凑或完整
+  const [viewMode, setViewMode] = useState<'compact' | 'full'>(defaultMode);
+
+  // 计算 diff 统计信息（仅在文本变化时重新计算）
+  const stats = useMemo(
+    () => calculateDiffStats(oldText, newText),
+    [oldText, newText],
+  );
+
+  // 渲染紧凑视图
+  const renderCompactView = () => (
+    <div className="diff-compact-view">
+      <div
+        className="diff-compact-clickable"
+        onClick={onOpenDiff}
+        role="button"
+        tabIndex={0}
+        title="Click to open diff in VS Code"
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onOpenDiff?.();
+          }
+        }}
+      >
+        <div className="diff-compact-header">
+          {path && (
+            <div className="diff-file-info">
+              <FileLink
+                path={path}
+                showFullPath={false}
+                className="diff-file-link"
+                disableClick={true}
+              />
+            </div>
+          )}
+          <div className="diff-stats">
+            {stats.added > 0 && (
+              <span className="stat-added">+{stats.added}</span>
+            )}
+            {stats.removed > 0 && (
+              <span className="stat-removed">-{stats.removed}</span>
+            )}
+            {stats.changed > 0 && (
+              <span className="stat-changed">~{stats.changed}</span>
+            )}
+            {stats.total === 0 && (
+              <span className="stat-no-change">No changes</span>
+            )}
+          </div>
+        </div>
       </div>
-      {onOpenDiff && (
+      <div className="diff-compact-actions">
         <button
-          className="open-diff-button"
-          onClick={onOpenDiff}
-          title="Open in VS Code diff viewer"
+          className="diff-action-button secondary"
+          onClick={(e) => {
+            e.stopPropagation();
+            setViewMode('full');
+          }}
+          title="Show full before/after content"
         >
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path
-              d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
-              fill="currentColor"
-            />
-            <path
-              d="M5.25 8a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75z"
-              fill="currentColor"
-            />
-          </svg>
-          Open Diff
+          Show Details
         </button>
+      </div>
+    </div>
+  );
+
+  // 渲染完整视图
+  const renderFullView = () => (
+    <div className="diff-full-view">
+      <div className="diff-header">
+        <div className="diff-file-path">
+          {path && <FileLink path={path} showFullPath={true} />}
+        </div>
+        <div className="diff-header-actions">
+          {onOpenDiff && (
+            <button
+              className="diff-action-button primary"
+              onClick={onOpenDiff}
+              title="Open in VS Code diff viewer"
+            >
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+                <path d="M13.5 7l-4-4v3h-6v2h6v3l4-4z" fill="currentColor" />
+              </svg>
+              Open Diff
+            </button>
+          )}
+          <button
+            className="diff-action-button secondary"
+            onClick={() => setViewMode('compact')}
+            title="Collapse to compact view"
+          >
+            Collapse
+          </button>
+        </div>
+      </div>
+      <div className="diff-stats-line">{formatDiffStatsDetailed(stats)}</div>
+      {oldText !== undefined && (
+        <div className="diff-section">
+          <div className="diff-label">Before:</div>
+          <pre className="code-block">
+            <div className="code-content">{oldText || '(empty)'}</div>
+          </pre>
+        </div>
+      )}
+      {newText !== undefined && (
+        <div className="diff-section">
+          <div className="diff-label">After:</div>
+          <pre className="code-block">
+            <div className="code-content">{newText}</div>
+          </pre>
+        </div>
       )}
     </div>
-    {oldText !== undefined && (
-      <div className="diff-section">
-        <div className="diff-label">Before:</div>
-        <pre className="code-block">
-          <div className="code-content">{oldText || '(empty)'}</div>
-        </pre>
-      </div>
-    )}
-    {newText !== undefined && (
-      <div className="diff-section">
-        <div className="diff-label">After:</div>
-        <pre className="code-block">
-          <div className="code-content">{newText}</div>
-        </pre>
-      </div>
-    )}
-  </div>
-);
+  );
+
+  return (
+    <div className="diff-display-container">
+      {viewMode === 'compact' ? renderCompactView() : renderFullView()}
+    </div>
+  );
+};