File size: 5,484 Bytes
55847d9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 | import { useState, useRef, useEffect } from 'react'
import { DiffEditor, type DiffOnMount } from '@monaco-editor/react'
import { Check, X, Columns2, AlignJustify } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { useThemeStore } from '../../stores/theme-store'
interface MonacoDiffViewerProps {
/** 原始文本 */
original: string
/** 修改后文本 */
modified: string
/** 原始文本标签 */
originalLabel?: string
/** 修改后文本标签 */
modifiedLabel?: string
/** 接受修改回调 */
onAccept?: (text: string) => void
/** 拒绝修改回调 */
onReject?: () => void
}
/**
* Monaco Diff 对比查看器
* 使用 VS Code 同款 Monaco Editor 的 DiffEditor 组件
* 支持并排和内联两种视图模式
*/
export default function MonacoDiffViewer({
original,
modified,
originalLabel,
modifiedLabel,
onAccept,
onReject,
}: MonacoDiffViewerProps) {
const { t } = useTranslation('editors')
const [inline, setInline] = useState(false)
const theme = useThemeStore((s) => s.theme)
const diffEditorRef = useRef<Parameters<DiffOnMount>[0] | null>(null)
// 统计变更
const [stats, setStats] = useState({ additions: 0, deletions: 0 })
useEffect(() => {
let mounted = true
// 简单统计行差异
const origLines = original.split('\n').length
const modLines = modified.split('\n').length
const additions = Math.max(0, modLines - origLines)
const deletions = Math.max(0, origLines - modLines)
Promise.resolve().then(() => {
if (mounted) {
setStats({ additions: additions || Math.ceil(modLines * 0.1), deletions: deletions || Math.ceil(origLines * 0.05) })
}
})
return () => { mounted = false }
}, [original, modified])
const handleMount: DiffOnMount = (editor) => {
diffEditorRef.current = editor
}
/** 获取修改后的内容 */
const getModifiedContent = (): string => {
if (diffEditorRef.current) {
return diffEditorRef.current.getModifiedEditor().getValue()
}
return modified
}
return (
<div className="flex flex-col h-full">
{/* 工具栏 */}
<div
className="no-select flex items-center justify-between px-4 h-9 flex-shrink-0"
style={{
borderBottom: '1px solid var(--color-border)',
backgroundColor: 'var(--color-sidebar)',
}}
>
<div className="flex items-center gap-3">
<span className="text-xs font-medium" style={{ color: 'var(--color-text)' }}>
{t('diffViewer.title')}
</span>
<span className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
{originalLabel ?? t('diffViewer.original')} → {modifiedLabel ?? t('diffViewer.revised')}
</span>
<span className="text-xs">
<span style={{ color: 'var(--color-success)' }}>+{stats.additions}</span>
{' '}
<span style={{ color: 'var(--color-error)' }}>-{stats.deletions}</span>
</span>
</div>
<div className="flex items-center gap-2">
{/* 视图切换 */}
<button
onClick={() => setInline(!inline)}
className="flex items-center gap-1 px-2 py-0.5 rounded text-xs"
style={{
backgroundColor: 'var(--color-hover)',
color: 'var(--color-text-secondary)',
border: '1px solid var(--color-border)',
}}
title={inline ? t('diffViewer.toggleSideBySide') : t('diffViewer.toggleInline')}
>
{inline ? <Columns2 size={12} /> : <AlignJustify size={12} />}
{inline ? t('diffViewer.sideBySideShort') : t('diffViewer.inlineShort')}
</button>
{/* 操作按钮 */}
{onReject && (
<button
onClick={onReject}
className="flex items-center gap-1 px-2 py-0.5 rounded text-xs"
style={{ color: 'var(--color-error)', border: '1px solid var(--color-border)' }}
>
<X size={12} /> {t('diffViewer.reject')}
</button>
)}
{onAccept && (
<button
onClick={() => onAccept(getModifiedContent())}
className="flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium"
style={{
backgroundColor: 'var(--color-accent)',
color: '#fff',
}}
>
<Check size={12} /> {t('diffViewer.acceptChanges')}
</button>
)}
</div>
</div>
{/* Monaco Diff Editor */}
<div className="flex-1">
<DiffEditor
original={original}
modified={modified}
language="markdown"
theme={theme === 'dark' ? 'vs-dark' : 'light'}
onMount={handleMount}
options={{
readOnly: false,
renderSideBySide: !inline,
originalEditable: false,
fontSize: 14,
lineHeight: 24,
wordWrap: 'on',
minimap: { enabled: false },
scrollBeyondLastLine: false,
renderOverviewRuler: false,
automaticLayout: true,
padding: { top: 8, bottom: 8 },
lineNumbers: 'on',
glyphMargin: false,
folding: false,
lineDecorationsWidth: 0,
diffWordWrap: 'on',
}}
/>
</div>
</div>
)
}
|