雨霖铃
ec92afa294
移除 chromeI18n 工具、_locales 翻译文件和 manifest default_locale 配置， 将所有 UI 文案改为直接硬编码中文，并更新相关测试与文档。
83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
total: number;
|
|
/** 0-based index */
|
|
currentIndex: number;
|
|
onPrev: () => void;
|
|
onNext: () => void;
|
|
}
|
|
|
|
export default function DiffNavigator({
|
|
total,
|
|
currentIndex,
|
|
onPrev,
|
|
onNext,
|
|
className,
|
|
...props
|
|
}: DiffNavigatorProps) {
|
|
const isFirst = currentIndex <= 0;
|
|
const isLast = currentIndex >= total - 1;
|
|
|
|
if (total === 0) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center justify-center gap-3 px-4 py-2 rounded-lg border border-border bg-muted/30 select-none',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<span className="text-xs font-semibold text-muted-foreground/90">{'无差异'}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'inline-flex items-center justify-center gap-3 px-3 h-9 rounded-md border border-border/80 bg-secondary/60 shadow-sm',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{/* 上一处差异按钮 */}
|
|
<button
|
|
type="button"
|
|
disabled={isFirst}
|
|
aria-label={'上一个'}
|
|
onClick={onPrev}
|
|
className={cn(
|
|
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
|
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
|
|
'disabled:pointer-events-none disabled:opacity-30',
|
|
)}
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</button>
|
|
|
|
<span className="text-xs font-bold font-mono min-w-[54px] text-center text-foreground/90 tabular-nums select-none">
|
|
{currentIndex + 1} <span className="text-muted-foreground/60 font-sans mx-0.5">/</span>{' '}
|
|
{total}
|
|
</span>
|
|
|
|
{/* 下一处差异按钮 */}
|
|
<button
|
|
type="button"
|
|
disabled={isLast}
|
|
aria-label={'下一个'}
|
|
onClick={onNext}
|
|
className={cn(
|
|
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
|
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
|
|
'disabled:pointer-events-none disabled:opacity-30',
|
|
)}
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|