e4dcb6260a
Some checks failed
CI Check / check (push) Has been cancelled
- 创建统一UI三层架构系统（基础层、颜色层、组合层） - 拆分Admin页面为独立Tab组件（MonitorTab、UsersTab、DepartmentsTab等） - 提取公共逻辑到Hooks（useToast、useDataFetch、useUserOperations等） - 提取工具函数（validators、formatters、api等） - 创建统一弹窗组件（Modal）和useModal Hook - 添加错误边界和统一状态组件 - 完善类型定义和可访问性支持 - 更新文档（优化记录、优化计划、更新日志）
169 lines
6.6 KiB
TypeScript
169 lines
6.6 KiB
TypeScript
/**
|
||
* 统一的动画工具类
|
||
* 苹果风格 + 炫彩元素
|
||
*/
|
||
|
||
// 基础动画类
|
||
export const animations = {
|
||
// 淡入淡出
|
||
fadeIn: 'animate-in fade-in duration-500',
|
||
fadeOut: 'animate-out fade-out duration-300',
|
||
fadeInUp: 'animate-in fade-in slide-in-from-bottom-4 duration-500',
|
||
fadeInDown: 'animate-in fade-in slide-in-from-top-4 duration-500',
|
||
fadeInLeft: 'animate-in fade-in slide-in-from-left-4 duration-500',
|
||
fadeInRight: 'animate-in fade-in slide-in-from-right-4 duration-500',
|
||
|
||
// 缩放
|
||
scaleIn: 'animate-in zoom-in-95 duration-300',
|
||
scaleOut: 'animate-out zoom-out-95 duration-200',
|
||
scaleUp: 'hover:scale-105 active:scale-95 transition-transform duration-200',
|
||
|
||
// 旋转
|
||
spin: 'animate-spin',
|
||
spinSlow: 'animate-spin-slow',
|
||
|
||
// 脉冲
|
||
pulse: 'animate-pulse',
|
||
pulseSlow: 'animate-pulse-slow',
|
||
|
||
// 弹跳
|
||
bounce: 'animate-bounce',
|
||
bounceIn: 'animate-in bounce-in duration-500',
|
||
|
||
// 滑动
|
||
slideInFromLeft: 'animate-in slide-in-from-left duration-500',
|
||
slideInFromRight: 'animate-in slide-in-from-right duration-500',
|
||
slideInFromTop: 'animate-in slide-in-from-top duration-500',
|
||
slideInFromBottom: 'animate-in slide-in-from-bottom duration-500',
|
||
|
||
// 交错动画延迟
|
||
stagger: {
|
||
'0': 'delay-0',
|
||
'75': 'delay-75',
|
||
'100': 'delay-100',
|
||
'150': 'delay-150',
|
||
'200': 'delay-200',
|
||
'300': 'delay-300',
|
||
'500': 'delay-500',
|
||
},
|
||
} as const
|
||
|
||
// 炫彩渐变背景
|
||
export const gradientBackgrounds = {
|
||
// 苹果风格渐变（统一 Hero 卡片背景颜色）
|
||
appleLight: 'bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-900 dark:via-slate-800 dark:to-indigo-900',
|
||
appleDark: 'bg-gradient-to-br from-slate-900 via-indigo-900 to-purple-900 dark:from-slate-950 dark:via-indigo-950 dark:to-purple-950',
|
||
|
||
// Hero 卡片背景渐变（CSS linear-gradient 格式，用于内联样式）
|
||
heroBase: {
|
||
light: 'linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #eef2ff 100%)',
|
||
dark: 'linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e1b4b 100%)',
|
||
},
|
||
|
||
// 炫彩渐变
|
||
rainbow: 'bg-gradient-to-r from-pink-500 via-red-500 via-yellow-500 via-green-500 via-blue-500 via-indigo-500 to-purple-500',
|
||
rainbowSubtle: 'bg-gradient-to-br from-pink-100 via-purple-100 via-indigo-100 to-blue-100 dark:from-pink-900/20 dark:via-purple-900/20 dark:via-indigo-900/20 dark:to-blue-900/20',
|
||
rainbowVibrant: 'bg-gradient-to-br from-pink-500/20 via-purple-500/20 via-indigo-500/20 to-blue-500/20',
|
||
|
||
// 霓虹效果
|
||
neon: 'bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500',
|
||
neonSubtle: 'bg-gradient-to-br from-cyan-100 via-blue-100 to-purple-100 dark:from-cyan-900/30 dark:via-blue-900/30 dark:to-purple-900/30',
|
||
|
||
// 金属质感
|
||
metallic: 'bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500',
|
||
|
||
// 玻璃态
|
||
glass: 'bg-white/10 dark:bg-white/5 backdrop-blur-md border border-white/20',
|
||
glassStrong: 'bg-white/20 dark:bg-white/10 backdrop-blur-lg border border-white/30',
|
||
} as const
|
||
|
||
// 炫彩光晕效果
|
||
export const glowEffects = {
|
||
// 基础光晕
|
||
glow: 'shadow-lg shadow-indigo-500/50',
|
||
glowStrong: 'shadow-xl shadow-indigo-500/70',
|
||
glowRainbow: 'shadow-xl shadow-[0_0_30px_rgba(139,92,246,0.5)]',
|
||
|
||
// 彩色光晕
|
||
glowPink: 'shadow-lg shadow-pink-500/50',
|
||
glowPurple: 'shadow-lg shadow-purple-500/50',
|
||
glowBlue: 'shadow-lg shadow-blue-500/50',
|
||
glowCyan: 'shadow-lg shadow-cyan-500/50',
|
||
|
||
// 悬停光晕
|
||
glowHover: 'hover:shadow-xl hover:shadow-indigo-500/60 transition-shadow duration-300',
|
||
glowHoverRainbow: 'hover:shadow-2xl hover:shadow-[0_0_40px_rgba(139,92,246,0.6)] transition-shadow duration-300',
|
||
} as const
|
||
|
||
// 边框动画
|
||
export const borderAnimations = {
|
||
// 渐变边框
|
||
gradientBorder: 'border-2 border-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-border',
|
||
|
||
// 闪烁边框
|
||
shimmer: 'relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent',
|
||
|
||
// 霓虹边框
|
||
neon: 'border-2 border-cyan-400 shadow-[0_0_10px_rgba(34,211,238,0.5)]',
|
||
neonHover: 'hover:border-cyan-300 hover:shadow-[0_0_20px_rgba(34,211,238,0.7)] transition-all duration-300',
|
||
} as const
|
||
|
||
// 文本动画
|
||
export const textAnimations = {
|
||
// 渐变文本
|
||
gradientText: 'bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent',
|
||
gradientTextRainbow: 'bg-gradient-to-r from-pink-500 via-red-500 via-yellow-500 via-green-500 via-blue-500 via-indigo-500 to-purple-500 bg-clip-text text-transparent',
|
||
|
||
// 闪烁文本
|
||
shimmerText: 'animate-[shimmer_2s_infinite] bg-gradient-to-r from-gray-400 via-white to-gray-400 bg-clip-text text-transparent',
|
||
|
||
// 发光文本
|
||
glowText: 'text-indigo-400 drop-shadow-[0_0_8px_rgba(99,102,241,0.8)]',
|
||
glowTextRainbow: 'drop-shadow-[0_0_10px_rgba(139,92,246,0.6)]',
|
||
} as const
|
||
|
||
// 卡片动画
|
||
export const cardAnimations = {
|
||
// 悬停提升
|
||
lift: 'transition-all duration-300 hover:-translate-y-1 hover:shadow-xl',
|
||
liftStrong: 'transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl',
|
||
|
||
// 3D 倾斜效果
|
||
tilt: 'transition-all duration-300 hover:rotate-1 hover:scale-105',
|
||
|
||
// 闪烁效果
|
||
shimmer: 'relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent',
|
||
|
||
// 光晕跟随鼠标
|
||
glowFollow: 'transition-all duration-500',
|
||
} as const
|
||
|
||
// 按钮动画
|
||
export const buttonAnimations = {
|
||
// 基础按钮动画
|
||
base: 'transition-all duration-200 active:scale-95',
|
||
|
||
// 炫彩按钮
|
||
rainbow: 'bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600 transition-all duration-300',
|
||
|
||
// 霓虹按钮
|
||
neon: 'bg-cyan-500 hover:bg-cyan-400 shadow-lg shadow-cyan-500/50 hover:shadow-xl hover:shadow-cyan-500/70 transition-all duration-300',
|
||
|
||
// 玻璃态按钮
|
||
glass: 'bg-white/10 dark:bg-white/5 backdrop-blur-md border border-white/20 hover:bg-white/20 dark:hover:bg-white/10 transition-all duration-300',
|
||
|
||
// 脉冲按钮
|
||
pulse: 'animate-pulse hover:animate-none',
|
||
} as const
|
||
|
||
// 组合动画工具函数
|
||
export function combineAnimations(...animations: string[]): string {
|
||
return animations.filter(Boolean).join(' ')
|
||
}
|
||
|
||
// 条件动画
|
||
export function conditionalAnimation(condition: boolean, animation: string, fallback = ''): string {
|
||
return condition ? animation : fallback
|
||
}
|
||
|