雨霖铃
107 lines
3.8 KiB
TypeScript
107 lines
3.8 KiB
TypeScript
import { Loader2 } from 'lucide-react'; // 引入标准的高级阻尼 Spinner 图标
|
|
import { Button } from '@/components/ui/button';
|
|
import StorageCleanerConfirm from '@/pages/StorageCleaner/StorageCleanerConfirm';
|
|
import { useStorageCleaner } from './useStorageCleaner';
|
|
import StorageOptionsGrid from './StorageOptionsGrid';
|
|
import AutoRefreshToggle from './AutoRefreshToggle';
|
|
import ErrorDisplay from './ErrorDisplay';
|
|
import CleaningResult from './CleaningResult';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
|
|
export default function Index() {
|
|
const { t } = useLazyTranslation('storageCleaner');
|
|
|
|
// 1. 完美对接全新重构、无需回调参数的纯净版状态 Hook
|
|
const {
|
|
error,
|
|
isInitializing,
|
|
options,
|
|
sizes,
|
|
autoRefresh,
|
|
loading,
|
|
result,
|
|
showConfirm,
|
|
setShowConfirm,
|
|
allSelected,
|
|
someSelected,
|
|
handleAutoRefreshChange,
|
|
handleOptionChange,
|
|
handleSelectAll,
|
|
handleClean,
|
|
} = useStorageCleaner();
|
|
|
|
// 计算当前的按钮锁定状态：没有任何一项被勾选，或者正在清理中，则禁用大按钮
|
|
const isButtonDisabled = !(someSelected || allSelected) || loading;
|
|
|
|
// 2. 初始化骨架屏：全面升级为符合 shadcn 规范的无损微动效 Spinner
|
|
if (isInitializing) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full animate-in fade-in duration-200">
|
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground/80" />
|
|
<span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
|
|
正在读取站点数据...
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 拦截非法域名或受限域名的错误提示页（ErrorDisplay 内部已在上一轮做好 p-4 居中）
|
|
if (error) {
|
|
return <ErrorDisplay error={error} />;
|
|
}
|
|
|
|
return (
|
|
/* 3. 终极版页面根容器：
|
|
- 彻底灌入 p-4，全局对齐线向内收缩 16px，终结贴边惨剧。
|
|
- 用 space-y-3.5 替代块级外边距（mb-3 等），让所有卡片之间的垂直间距处于绝对一致的黄金比例。
|
|
*/
|
|
<div className="p-4 w-full flex flex-col space-y-3.5 animate-in fade-in duration-300">
|
|
{/* 存储网格核心中控面板 (内部已满血复活半选状态) */}
|
|
<StorageOptionsGrid
|
|
options={options}
|
|
sizes={sizes}
|
|
allSelected={allSelected}
|
|
someSelected={someSelected}
|
|
onOptionChange={handleOptionChange}
|
|
onSelectAll={handleSelectAll}
|
|
/>
|
|
|
|
{/* 自动刷新开关 */}
|
|
<AutoRefreshToggle autoRefresh={autoRefresh} onChange={handleAutoRefreshChange} />
|
|
|
|
{/* 4. 主行动按钮超进化：
|
|
- 彻底剥离 bg-amber-500，全面回归系统标准的 variant="destructive"。
|
|
- 享受高风险操作该有的危险红警示，完美契合上一轮重构的二次确认弹窗基调。
|
|
- 高级动态加载：当处于 cleaning 状态时，文字自动流转，且左侧自动淡入等宽 Loader2 图标。
|
|
*/}
|
|
<Button
|
|
variant="destructive"
|
|
size="default"
|
|
onClick={() => setShowConfirm(true)}
|
|
disabled={isButtonDisabled}
|
|
className="w-full h-10 font-bold shadow-sm text-sm tracking-wide transition-all active:scale-[0.99]"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
{t('storageCleaner:cleaning')}
|
|
</>
|
|
) : (
|
|
t('storageCleaner:cleanNow')
|
|
)}
|
|
</Button>
|
|
|
|
{/* 动态清理结果返回反馈卡片 */}
|
|
<CleaningResult result={result} />
|
|
|
|
{/* 二次风险防御确认弹窗 */}
|
|
<StorageCleanerConfirm
|
|
open={showConfirm}
|
|
onClose={() => setShowConfirm(false)}
|
|
onConfirm={handleClean}
|
|
options={options}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|