雨霖铃
e5ae802ab2
- Remove entrance animations (animate-in, fade-in, zoom-in) from all components - Remove scale effect (active:scale-[0.99]) from clean button - Remove transition effects (transition-all, transition-colors) from OptionItem, StorageOptionsGrid, AutoRefreshToggle - Remove bouncing animation from error icon - Remove pulsing animation from warning banner - Keep animate-spin on button loading spinner as functional indicator
51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { CheckCircle, XCircle } from 'lucide-react';
|
|
import type { CleaningResult as CleaningResultType } from '@/types/storage';
|
|
import { formatCleaningResult } from '@/utils/storageCleaner';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心类名合并工具
|
|
|
|
interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
result: CleaningResultType | null;
|
|
}
|
|
|
|
export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
|
|
const { t } = useLazyTranslation('storageCleaner');
|
|
|
|
if (!result) return null;
|
|
|
|
const isSuccess = result.success;
|
|
|
|
return (
|
|
<div className={cn('w-full', className)} {...props}>
|
|
{/* 2. 彻底重构容器类名结构：
|
|
- 成功状态：采用 Tailwind 官方推荐的 emerald 体系，利用 /10 (10% 透明度) 和 /20 (边框)。
|
|
- 失败状态：完全放权给标准的 border-destructive/20 和 bg-destructive/5。
|
|
- 这样在明暗双色模式切换时，色彩会自动与背景完美融为一体。
|
|
*/}
|
|
<div
|
|
className={cn(
|
|
'flex items-start gap-3 rounded-xl py-2.5 px-3.5 border shadow-sm',
|
|
isSuccess
|
|
? 'bg-emerald-500/5 border-emerald-500/20 text-emerald-600 dark:text-emerald-400'
|
|
: 'bg-destructive/5 border-destructive/20 text-destructive',
|
|
)}
|
|
>
|
|
{/* 3. 图标样式向系统语义全面对齐 */}
|
|
{isSuccess ? (
|
|
<CheckCircle className="h-4 w-4 shrink-0 mt-0.5 text-emerald-500" />
|
|
) : (
|
|
<XCircle className="h-4 w-4 shrink-0 mt-0.5 text-destructive" />
|
|
)}
|
|
|
|
{/* 4. 文本排版细节微调 */}
|
|
<span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
|
|
{isSuccess
|
|
? formatCleaningResult(result, t)
|
|
: result.error || t('storageCleaner:partialFailure')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|