雨霖铃
d38bafe237
移除 chrome.i18n 后，将各功能页面、布局与工具模块的 UI 文案改为内联中文； 删除冗余注释与过度抽象（如 ToolCard、StatCard），精简 props 与状态管理； 同步优化 JsonTools、StorageCleaner、Timestamp、TestDataGenerator、Dashboard、 Base64Converter、RightClickRestorer、TextStatistics、TopBar、RouterProvider、 ThemeModeProvider 及生成器库与 utils 工具文件。
81 lines
2.2 KiB
TypeScript
81 lines
2.2 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>
|
|
);
|
|
}
|