35 lines
1.7 KiB
TypeScript
35 lines
1.7 KiB
TypeScript
import type { DiffResult } from '../../features/documentRevision/types';
|
||
import { DiffNavigator } from './DiffNavigator';
|
||
|
||
export function VersionCompareView(props: {
|
||
fromVersion: number;
|
||
toVersion: number;
|
||
diff: DiffResult;
|
||
onClose: () => void;
|
||
}) {
|
||
const { fromVersion, toVersion, diff, onClose } = props;
|
||
const narrow = typeof window !== 'undefined' && window.innerWidth < 900;
|
||
return (
|
||
<div role="dialog" aria-label="版本比较" style={{ position: 'fixed', inset: 20, background: 'var(--panel, #fff)', border: '1px solid #ccc', zIndex: 50, padding: 12, overflow: 'auto' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<h3>比较 V{fromVersion} → V{toVersion}</h3>
|
||
<button type="button" onClick={onClose}>关闭</button>
|
||
</div>
|
||
<p>
|
||
+{diff.summary.inserts} / -{diff.summary.deletes} / ~{diff.summary.modifies} / ↔{diff.summary.moves}
|
||
{narrow ? '（窄屏 unified）' : '（宽屏 side-by-side）'}
|
||
</p>
|
||
<DiffNavigator hunks={diff.hunks} />
|
||
<div style={{ display: narrow ? 'block' : 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||
{diff.hunks.map((h) => (
|
||
<div key={h.id} id={`hunk-${h.id}`} style={{ borderLeft: '3px solid #c47', paddingLeft: 8, marginBottom: 8 }}>
|
||
<div style={{ fontSize: 12 }}>{h.kind} · {h.section || '正文'}</div>
|
||
{h.before_text != null && <pre style={{ background: '#fde8e8', margin: 0, whiteSpace: 'pre-wrap' }}>{h.before_text}</pre>}
|
||
{h.after_text != null && <pre style={{ background: '#e8f6e8', margin: 0, whiteSpace: 'pre-wrap' }}>{h.after_text}</pre>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|