fix: remove unnecessary animations from StorageCleaner page

- 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
This commit is contained in:
雨霖铃
2026-05-25 20:11:39 +08:00
parent dec43f89da
commit e5ae802ab2
7 changed files with 13 additions and 17 deletions
+1 -1
View File
@@ -48,7 +48,7 @@ export default function AutoRefreshToggle({
return ( return (
<div <div
className={cn( 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', 'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex justify-between items-center',
className, className,
)} )}
{...props} {...props}
+1 -4
View File
@@ -17,10 +17,7 @@ export default function CleaningResult({ result, className, ...props }: Cleaning
const isSuccess = result.success; const isSuccess = result.success;
return ( return (
<div <div className={cn('w-full', className)} {...props}>
className={cn('animate-in fade-in slide-in-from-top-1 duration-200 w-full', className)}
{...props}
>
{/* 2. 彻底重构容器类名结构: {/* 2. 彻底重构容器类名结构:
- 成功状态:采用 Tailwind 官方推荐的 emerald 体系,利用 /10 (10% 透明度) 和 /20 (边框)。 - 成功状态:采用 Tailwind 官方推荐的 emerald 体系,利用 /10 (10% 透明度) 和 /20 (边框)。
- 失败状态:完全放权给标准的 border-destructive/20 和 bg-destructive/5。 - 失败状态:完全放权给标准的 border-destructive/20 和 bg-destructive/5。
+2 -2
View File
@@ -13,7 +13,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
// 1. 精简层级:单层外壳直接搞定居中、响应式高度与外部类名扩展 // 1. 精简层级:单层外壳直接搞定居中、响应式高度与外部类名扩展
<div <div
className={cn( className={cn(
'flex flex-col items-center justify-center py-8 min-h-[240px] sm:min-h-[360px] p-4 text-center animate-in fade-in zoom-in-95 duration-200', 'flex flex-col items-center justify-center py-8 min-h-[240px] sm:min-h-[360px] p-4 text-center',
className, className,
)} )}
{...props} {...props}
@@ -25,7 +25,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
*/} */}
<div className="w-full max-w-xs flex flex-col items-center justify-center rounded-xl p-5 border border-destructive/20 bg-destructive/5 shadow-sm"> <div className="w-full max-w-xs flex flex-col items-center justify-center rounded-xl p-5 border border-destructive/20 bg-destructive/5 shadow-sm">
{/* 3. 图标与主要错误信息全面对接 text-destructive 语义色 */} {/* 3. 图标与主要错误信息全面对接 text-destructive 语义色 */}
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive mb-3.5 shrink-0 animate-bounce [animation-duration:2s]"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive mb-3.5 shrink-0">
<AlertCircle className="h-5 w-5" /> <AlertCircle className="h-5 w-5" />
</div> </div>
+2 -2
View File
@@ -29,7 +29,7 @@ export default function OptionItem({
// 3. 跨越级交互升级:将外部容器升级为一个高度敏感的可点击 Tab 热区 // 3. 跨越级交互升级:将外部容器升级为一个高度敏感的可点击 Tab 热区
onClick={onChange} onClick={onChange}
className={cn( className={cn(
'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none transition-all duration-200', 'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none',
// 4. 彻底抛弃硬编码黄底: // 4. 彻底抛弃硬编码黄底:
// - 选中时:使用 bg-primary/5 (系统主色超淡叠加) 配合标准 border-primary/30。 // - 选中时:使用 bg-primary/5 (系统主色超淡叠加) 配合标准 border-primary/30。
// - 未选中时:保持透明 border-transparent,悬停呈现 bg-muted。 // - 未选中时:保持透明 border-transparent,悬停呈现 bg-muted。
@@ -45,7 +45,7 @@ export default function OptionItem({
<div className="flex-1 min-w-0 mr-4"> <div className="flex-1 min-w-0 mr-4">
<span <span
className={cn( className={cn(
'block text-xs font-semibold leading-tight truncate transition-colors', 'block text-xs font-semibold leading-tight truncate',
checked ? 'text-foreground font-bold' : 'text-foreground/80', checked ? 'text-foreground font-bold' : 'text-foreground/80',
)} )}
> >
@@ -42,7 +42,6 @@ export function StorageCleanerConfirm({
<DialogContent <DialogContent
className={cn( className={cn(
'w-[90%] max-w-[340px] p-6 gap-0 rounded-2xl overflow-hidden shadow-xl border border-border bg-card text-card-foreground', 'w-[90%] max-w-[340px] p-6 gap-0 rounded-2xl overflow-hidden shadow-xl border border-border bg-card text-card-foreground',
'animate-in fade-in-50 zoom-in-95 duration-200',
)} )}
> >
{/* 头部标题区域 */} {/* 头部标题区域 */}
@@ -72,7 +71,7 @@ export function StorageCleanerConfirm({
</div> </div>
{/* 风险警告横幅 */} {/* 风险警告横幅 */}
<div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px] animate-pulse [animation-duration:3s]"> <div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px]">
<AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" /> <AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
<span className="text-[11px] font-bold text-destructive leading-none tracking-tight"> <span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
{t('storageCleaner:irreversible')} {t('storageCleaner:irreversible')}
+2 -2
View File
@@ -46,7 +46,7 @@ export default function StorageOptionsGrid({
return ( return (
<div <div
className={cn( className={cn(
'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden transition-all', 'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden',
className, className,
)} )}
{...props} {...props}
@@ -75,7 +75,7 @@ export default function StorageOptionsGrid({
*/} */}
<div <div
onClick={handleToggleAll} onClick={handleToggleAll}
className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 transition-colors cursor-pointer select-none" className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 cursor-pointer select-none"
> >
<Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer"> <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer">
{t('storageCleaner:selectAll')} {t('storageCleaner:selectAll')}
+4 -4
View File
@@ -33,8 +33,8 @@ export default function Index() {
if (isInitializing) { if (isInitializing) {
return ( return (
<div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full animate-in fade-in duration-200"> <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground/80" /> <Loader2 className="h-6 w-6 text-muted-foreground/80" />
<span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide"> <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
... ...
</span> </span>
@@ -47,7 +47,7 @@ export default function Index() {
} }
return ( return (
<div className="p-4 w-full flex flex-col space-y-3.5 animate-in fade-in duration-300"> <div className="p-4 w-full flex flex-col space-y-3.5">
<StorageOptionsGrid <StorageOptionsGrid
options={options} options={options}
sizes={sizes} sizes={sizes}
@@ -67,7 +67,7 @@ export default function Index() {
size="default" size="default"
onClick={() => setShowConfirm(true)} onClick={() => setShowConfirm(true)}
disabled={isButtonDisabled} disabled={isButtonDisabled}
className="w-full h-10 font-bold shadow-sm text-sm tracking-wide transition-all active:scale-[0.99]" className="w-full h-10 font-bold shadow-sm text-sm tracking-wide"
> >
{loading ? ( {loading ? (
<> <>