scriptoriumadmin/skillhub
1
0
Fork 0
mirror of https://github.com/iflytek/skillhub.git synced 2026-08-27 11:14:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

style(skill-compare): add background colors for diff add/delete lines

Browse source
This commit is contained in:
dongmucat 2026-05-07 15:58:39 +08:00
parent 5c95ab2b38
commit 13e148741d
1 changed files with 23 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/src/pages/skill-version-compare.tsx
View file

@ -248,12 +248,30 @@ export function SkillVersionComparePage() {
) : file.truncated ? (
<div className="text-sm text-muted-foreground">{t('skillCompare.truncatedFile')}</div>
) : (
<div className="space-y-1 font-mono text-sm">
<div className="overflow-hidden rounded-md border border-border/40 font-mono text-sm">
{file.hunks.flatMap((hunk) => hunk.lines).map((line, index) => (
<div key={`${file.path}-${index}`} className="grid grid-cols-[56px_56px_1fr] gap-3">
<span className="text-muted-foreground">{line.oldLineNumber ?? ''}</span>
<span className="text-muted-foreground">{line.newLineNumber ?? ''}</span>
<span className="whitespace-pre overflow-x-auto">
<div
key={`${file.path}-${index}`}
className={[
'grid grid-cols-[56px_56px_1fr] gap-0',
line.type === 'ADD' ? 'bg-emerald-50 dark:bg-emerald-950/30' : '',
line.type === 'DELETE' ? 'bg-rose-50 dark:bg-rose-950/30' : '',
].join(' ')}
>
<span className="select-none border-r border-border/30 px-2 py-0.5 text-right text-xs text-muted-foreground">
{line.oldLineNumber ?? ''}
</span>
<span className="select-none border-r border-border/30 px-2 py-0.5 text-right text-xs text-muted-foreground">
{line.newLineNumber ?? ''}
</span>
<span
className={[
'whitespace-pre overflow-x-auto px-3 py-0.5',
line.type === 'ADD' ? 'text-emerald-700 dark:text-emerald-400' : '',
line.type === 'DELETE' ? 'text-rose-700 dark:text-rose-400' : '',
line.type === 'CONTEXT' ? 'text-foreground' : '',
].join(' ')}
>
{line.type === 'ADD' ? '+' : line.type === 'DELETE' ? '-' : ' '}
{line.content}
</span>