雨霖铃
d38bafe237
移除 chrome.i18n 后，将各功能页面、布局与工具模块的 UI 文案改为内联中文； 删除冗余注释与过度抽象（如 ToolCard、StatCard），精简 props 与状态管理； 同步优化 JsonTools、StorageCleaner、Timestamp、TestDataGenerator、Dashboard、 Base64Converter、RightClickRestorer、TextStatistics、TopBar、RouterProvider、 ThemeModeProvider 及生成器库与 utils 工具文件。
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import type { StorageCleanerOptions } from '@/types/storage';
|
|
import type { StorageSizeInfo } from '../useStorageCleaner';
|
|
import OptionItem from './OptionItem';
|
|
import { cn } from '@/lib/utils';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Label } from '@/components/ui/label';
|
|
import { CLEAN_OPTION_KEYS } from '../constants';
|
|
|
|
interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
options: StorageCleanerOptions;
|
|
sizes: Record<string, StorageSizeInfo>;
|
|
allSelected: boolean;
|
|
someSelected: boolean;
|
|
onOptionChange: (key: keyof StorageCleanerOptions) => void;
|
|
onSelectAll: (checked: boolean) => void;
|
|
}
|
|
|
|
export default function StorageOptionsGrid({
|
|
options,
|
|
sizes,
|
|
allSelected,
|
|
someSelected,
|
|
onOptionChange,
|
|
onSelectAll,
|
|
className,
|
|
...props
|
|
}: StorageOptionsGridProps) {
|
|
const handleToggleAll = () => {
|
|
onSelectAll(!allSelected);
|
|
};
|
|
|
|
return (
|
|
<div className={cn('w-full overflow-hidden', className)} {...props}>
|
|
<div className="px-3.5 pt-3.5 pb-2">
|
|
<div className="grid grid-cols-2 gap-2 items-stretch">
|
|
{CLEAN_OPTION_KEYS.map((key) => (
|
|
<OptionItem
|
|
key={key}
|
|
labelKey={key}
|
|
checked={options[key]}
|
|
sizeInfo={sizes[key]}
|
|
onChange={() => onOptionChange(key)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
onClick={handleToggleAll}
|
|
className="border-t border-border flex justify-between items-center pl-3.5 pr-7 py-2.5 bg-muted/20 hover:bg-muted/40 cursor-pointer select-none transition-colors"
|
|
>
|
|
<Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer tracking-wide uppercase">
|
|
全选所有项
|
|
</Label>
|
|
|
|
<Checkbox
|
|
checked={allSelected ? true : someSelected ? 'indeterminate' : false}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onCheckedChange={(checked) => onSelectAll(checked === true)}
|
|
className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-muted-foreground/40"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|