diff --git a/pages/StorageCleaner/AutoRefreshToggle.tsx b/pages/StorageCleaner/AutoRefreshToggle.tsx index 301a35c..a062723 100644 --- a/pages/StorageCleaner/AutoRefreshToggle.tsx +++ b/pages/StorageCleaner/AutoRefreshToggle.tsx @@ -1,17 +1,44 @@ +/** + * 自动刷新开关组件 + * + * 用于 StorageCleaner 页面,控制是否自动刷新存储数据列表。 + * 以卡片形式展示,左侧为标签文本,右侧为 shadcn/ui Switch 开关。 + * + * @example + * ```tsx + * setReloadAfterClean(checked)} + * /> + * ``` + */ + 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, 'onChange'> { - autoRefresh: boolean; +export interface AutoRefreshToggleProps extends Omit< + React.HTMLAttributes, + 'onChange' +> { + /** 开关的当前状态(受控) */ + reloadAfterClean: boolean; + /** 状态变化时的回调函数 */ onChange: (checked: boolean) => void; } +/** + * 自动刷新开关 + * + * @param reloadAfterClean - 当前开关状态 + * @param onChange - 状态变化回调,接收新的布尔值 + * @param className - 额外的 CSS 类名,用于覆盖或扩展样式 + * @param props - 透传给外层 div 的其他 HTML 属性 + */ export default function AutoRefreshToggle({ - autoRefresh, + reloadAfterClean, onChange, className, ...props @@ -21,15 +48,12 @@ export default function AutoRefreshToggle({ return (
- {/* 3. 使用标准的 shadcn/ui Label 组件: - 绑定 htmlFor 建立安全的表单无障碍桥梁,使得用户点击文字也能触发开关联动 - */} + {/* Label 与 Switch 通过 htmlFor + id 关联,支持点击文字触发开关 */}
); } diff --git a/pages/StorageCleaner/index.tsx b/pages/StorageCleaner/index.tsx index db9a0df..b932a00 100644 --- a/pages/StorageCleaner/index.tsx +++ b/pages/StorageCleaner/index.tsx @@ -11,29 +11,26 @@ import { useLazyTranslation } from '@/utils/useLazyTranslation'; export default function Index() { const { t } = useLazyTranslation('storageCleaner'); - // 1. 完美对接全新重构、无需回调参数的纯净版状态 Hook const { error, isInitializing, options, sizes, - autoRefresh, + reloadAfterClean, loading, result, showConfirm, setShowConfirm, allSelected, someSelected, - handleAutoRefreshChange, + handleReloadAfterCleanChange, handleOptionChange, handleSelectAll, handleClean, } = useStorageCleaner(); - // 计算当前的按钮锁定状态:没有任何一项被勾选,或者正在清理中,则禁用大按钮 const isButtonDisabled = !(someSelected || allSelected) || loading; - // 2. 初始化骨架屏:全面升级为符合 shadcn 规范的无损微动效 Spinner if (isInitializing) { return (
@@ -45,18 +42,12 @@ export default function Index() { ); } - // 拦截非法域名或受限域名的错误提示页(ErrorDisplay 内部已在上一轮做好 p-4 居中) if (error) { return ; } return ( - /* 3. 终极版页面根容器: - - 彻底灌入 p-4,全局对齐线向内收缩 16px,终结贴边惨剧。 - - 用 space-y-3.5 替代块级外边距(mb-3 等),让所有卡片之间的垂直间距处于绝对一致的黄金比例。 - */
- {/* 存储网格核心中控面板 (内部已满血复活半选状态) */} - {/* 自动刷新开关 */} - + - {/* 4. 主行动按钮超进化: - - 彻底剥离 bg-amber-500,全面回归系统标准的 variant="destructive"。 - - 享受高风险操作该有的危险红警示,完美契合上一轮重构的二次确认弹窗基调。 - - 高级动态加载:当处于 cleaning 状态时,文字自动流转,且左侧自动淡入等宽 Loader2 图标。 - */}