雨霖铃
53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
import { cn } from '@/lib/utils';
|
|
// 引入官方的 Switch 原子组件
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Label } from '@/components/ui/label';
|
|
|
|
interface AutoRefreshToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
autoRefresh: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
}
|
|
|
|
export default function AutoRefreshToggle({
|
|
autoRefresh,
|
|
onChange,
|
|
className,
|
|
...props
|
|
}: AutoRefreshToggleProps) {
|
|
const { t } = useLazyTranslation('storageCleaner');
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
// 外层包裹维持优雅的 shadcn 风格中性卡片，去除硬编码 mb-3 扩展灵活性
|
|
'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm transition-all focus-within:ring-1 focus-within:ring-ring flex justify-between items-center',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{/* 3. 使用标准的 shadcn/ui Label 组件：
|
|
绑定 htmlFor 建立安全的表单无障碍桥梁，使得用户点击文字也能触发开关联动
|
|
*/}
|
|
<Label
|
|
htmlFor="auto-refresh-switch"
|
|
className="text-sm font-bold text-foreground cursor-pointer select-none tracking-tight"
|
|
>
|
|
{t('storageCleaner:autoRefresh')}
|
|
</Label>
|
|
|
|
{/* 4. 超进化：彻底废除 200 个字符的原生 checkbox 拼接！
|
|
完美调用 shadcn 的 Switch 组件。它会自动应用全站统一的主色（Primary）、
|
|
带阻尼的滑块硬件加速动效、以及教科书级别的 WAI-ARIA 无障碍键盘焦点提示。
|
|
*/}
|
|
<Switch
|
|
id="auto-refresh-switch"
|
|
checked={autoRefresh}
|
|
onCheckedChange={onChange}
|
|
className="data-[state=checked]:bg-primary" // 如果依然需要特定的琥珀色可写 data-[state=checked]:bg-amber-500
|
|
/>
|
|
</div>
|
|
);
|
|
}
|