雨霖铃
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
/**
|
|
* 自动刷新开关组件
|
|
*
|
|
* 用于 StorageCleaner 页面，控制是否自动刷新存储数据列表。
|
|
* 以卡片形式展示，左侧为标签文本，右侧为 shadcn/ui Switch 开关。
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <AutoRefreshToggle
|
|
* reloadAfterClean={reloadAfterClean}
|
|
* onChange={(checked) => setReloadAfterClean(checked)}
|
|
* />
|
|
* ```
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
import { cn } from '@/lib/utils';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Label } from '@/components/ui/label';
|
|
|
|
export interface AutoRefreshToggleProps extends Omit<
|
|
React.HTMLAttributes<HTMLDivElement>,
|
|
'onChange'
|
|
> {
|
|
/** 开关的当前状态（受控） */
|
|
reloadAfterClean: boolean;
|
|
/** 状态变化时的回调函数 */
|
|
onChange: (checked: boolean) => void;
|
|
}
|
|
|
|
/**
|
|
* 自动刷新开关
|
|
*
|
|
* @param reloadAfterClean - 当前开关状态
|
|
* @param onChange - 状态变化回调，接收新的布尔值
|
|
* @param className - 额外的 CSS 类名，用于覆盖或扩展样式
|
|
* @param props - 透传给外层 div 的其他 HTML 属性
|
|
*/
|
|
export default function AutoRefreshToggle({
|
|
reloadAfterClean,
|
|
onChange,
|
|
className,
|
|
...props
|
|
}: AutoRefreshToggleProps) {
|
|
const { t } = useLazyTranslation('storageCleaner');
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'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}
|
|
>
|
|
{/* Label 与 Switch 通过 htmlFor + id 关联，支持点击文字触发开关 */}
|
|
<Label
|
|
htmlFor="auto-refresh-switch"
|
|
className="text-sm font-bold text-foreground cursor-pointer select-none tracking-tight"
|
|
>
|
|
{t('storageCleaner:autoRefresh')}
|
|
</Label>
|
|
|
|
<Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />
|
|
</div>
|
|
);
|
|
}
|