mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-19 09:33:53 +00:00
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>
This commit is contained in:
yiliang114
@@ -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;
|
||||
}
|
||||
@@ -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,42 +23,118 @@ 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">
|
||||
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>
|
||||
<div className="diff-compact-actions">
|
||||
<button
|
||||
className="diff-action-button secondary"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setViewMode('full');
|
||||
}}
|
||||
title="Show full before/after content"
|
||||
>
|
||||
Show Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 渲染完整视图
|
||||
const renderFullView = () => (
|
||||
<div className="diff-full-view">
|
||||
<div className="diff-header">
|
||||
<div className="diff-file-path">
|
||||
<strong>{path || 'Unknown file'}</strong>
|
||||
{path && <FileLink path={path} showFullPath={true} />}
|
||||
</div>
|
||||
<div className="diff-header-actions">
|
||||
{onOpenDiff && (
|
||||
<button
|
||||
className="open-diff-button"
|
||||
className="diff-action-button primary"
|
||||
onClick={onOpenDiff}
|
||||
title="Open in VS Code diff viewer"
|
||||
>
|
||||
<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 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>
|
||||
@@ -69,4 +152,11 @@ export const DiffDisplay: React.FC<DiffDisplayProps> = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="diff-display-container">
|
||||
{viewMode === 'compact' ? renderCompactView() : renderFullView()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
160
packages/vscode-ide-companion/src/webview/utils/diffStats.ts
Normal file
160
packages/vscode-ide-companion/src/webview/utils/diffStats.ts
Normal file
@@ -0,0 +1,160 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen Team
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*
|
||||
* Diff 统计计算工具
|
||||
*/
|
||||
|
||||
/**
|
||||
* Diff 统计信息
|
||||
*/
|
||||
export interface DiffStats {
|
||||
/** 新增行数 */
|
||||
added: number;
|
||||
/** 删除行数 */
|
||||
removed: number;
|
||||
/** 修改行数（估算值） */
|
||||
changed: number;
|
||||
/** 总变更行数 */
|
||||
total: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算两个文本之间的 diff 统计信息
|
||||
*
|
||||
* 使用简单的行对比算法（避免引入重量级 diff 库）
|
||||
* 算法说明：
|
||||
* 1. 将文本按行分割
|
||||
* 2. 比较行的集合差异
|
||||
* 3. 估算修改行数（同时出现在新增和删除中的行数）
|
||||
*
|
||||
* @param oldText 旧文本内容
|
||||
* @param newText 新文本内容
|
||||
* @returns diff 统计信息
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* const stats = calculateDiffStats(
|
||||
* "line1\nline2\nline3",
|
||||
* "line1\nline2-modified\nline4"
|
||||
* );
|
||||
* // { added: 2, removed: 2, changed: 1, total: 3 }
|
||||
* ```
|
||||
*/
|
||||
export function calculateDiffStats(
|
||||
oldText: string | null | undefined,
|
||||
newText: string | undefined,
|
||||
): DiffStats {
|
||||
// 处理空值情况
|
||||
const oldContent = oldText || '';
|
||||
const newContent = newText || '';
|
||||
|
||||
// 按行分割
|
||||
const oldLines = oldContent.split('\n').filter((line) => line.trim() !== '');
|
||||
const newLines = newContent.split('\n').filter((line) => line.trim() !== '');
|
||||
|
||||
// 如果其中一个为空，直接计算
|
||||
if (oldLines.length === 0) {
|
||||
return {
|
||||
added: newLines.length,
|
||||
removed: 0,
|
||||
changed: 0,
|
||||
total: newLines.length,
|
||||
};
|
||||
}
|
||||
|
||||
if (newLines.length === 0) {
|
||||
return {
|
||||
added: 0,
|
||||
removed: oldLines.length,
|
||||
changed: 0,
|
||||
total: oldLines.length,
|
||||
};
|
||||
}
|
||||
|
||||
// 使用 Set 进行快速查找
|
||||
const oldSet = new Set(oldLines);
|
||||
const newSet = new Set(newLines);
|
||||
|
||||
// 计算新增：在 new 中但不在 old 中的行
|
||||
const addedLines = newLines.filter((line) => !oldSet.has(line));
|
||||
|
||||
// 计算删除：在 old 中但不在 new 中的行
|
||||
const removedLines = oldLines.filter((line) => !newSet.has(line));
|
||||
|
||||
// 估算修改：取较小值（因为修改的行既被删除又被添加）
|
||||
// 这是一个简化的估算，实际的 diff 算法会更精确
|
||||
const estimatedChanged = Math.min(addedLines.length, removedLines.length);
|
||||
|
||||
const added = addedLines.length - estimatedChanged;
|
||||
const removed = removedLines.length - estimatedChanged;
|
||||
const changed = estimatedChanged;
|
||||
|
||||
return {
|
||||
added,
|
||||
removed,
|
||||
changed,
|
||||
total: added + removed + changed,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化 diff 统计信息为人类可读的文本
|
||||
*
|
||||
* @param stats diff 统计信息
|
||||
* @returns 格式化后的文本，例如 "+5 -3 ~2"
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* formatDiffStats({ added: 5, removed: 3, changed: 2, total: 10 });
|
||||
* // "+5 -3 ~2"
|
||||
* ```
|
||||
*/
|
||||
export function formatDiffStats(stats: DiffStats): string {
|
||||
const parts: string[] = [];
|
||||
|
||||
if (stats.added > 0) {
|
||||
parts.push(`+${stats.added}`);
|
||||
}
|
||||
|
||||
if (stats.removed > 0) {
|
||||
parts.push(`-${stats.removed}`);
|
||||
}
|
||||
|
||||
if (stats.changed > 0) {
|
||||
parts.push(`~${stats.changed}`);
|
||||
}
|
||||
|
||||
return parts.join(' ') || 'No changes';
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化详细的 diff 统计信息
|
||||
*
|
||||
* @param stats diff 统计信息
|
||||
* @returns 详细的描述文本
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* formatDiffStatsDetailed({ added: 5, removed: 3, changed: 2, total: 10 });
|
||||
* // "+5 lines, -3 lines, ~2 lines"
|
||||
* ```
|
||||
*/
|
||||
export function formatDiffStatsDetailed(stats: DiffStats): string {
|
||||
const parts: string[] = [];
|
||||
|
||||
if (stats.added > 0) {
|
||||
parts.push(`+${stats.added} ${stats.added === 1 ? 'line' : 'lines'}`);
|
||||
}
|
||||
|
||||
if (stats.removed > 0) {
|
||||
parts.push(`-${stats.removed} ${stats.removed === 1 ? 'line' : 'lines'}`);
|
||||
}
|
||||
|
||||
if (stats.changed > 0) {
|
||||
parts.push(`~${stats.changed} ${stats.changed === 1 ? 'line' : 'lines'}`);
|
||||
}
|
||||
|
||||
return parts.join(', ') || 'No changes';
|
||||
}
|
||||
Reference in New Issue
Block a user