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:
@@ -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}
|
||||||
|
|||||||
@@ -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。
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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')}
|
||||||
|
|||||||
@@ -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')}
|
||||||
|
|||||||
@@ -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 ? (
|
||||||
<>
|
<>
|
||||||
|
|||||||
Reference in New Issue
Block a user