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 - 添加错误边界和统一状态组件 - 完善类型定义和可访问性支持 - 更新文档（优化记录、优化计划、更新日志）
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { useThemeStyles, useTheme, cn } from '@/lib/ui-styles'
|
|
|
|
interface LoadingStateProps {
|
|
message?: string
|
|
className?: string
|
|
size?: 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
export default function LoadingState({ message = '加载中...', className, size = 'md' }: LoadingStateProps) {
|
|
const styles = useThemeStyles()
|
|
const theme = useTheme()
|
|
const sizeClasses = {
|
|
sm: 'h-8 w-8 border-b-2',
|
|
md: 'h-12 w-12 border-b-2',
|
|
lg: 'h-16 w-16 border-b-2',
|
|
}
|
|
|
|
// 根据主题选择边框和文字颜色
|
|
const borderColor = theme === 'dark' ? 'border-indigo-400' : 'border-indigo-600'
|
|
const textColor = theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
|
|
|
|
return (
|
|
<div className={cn(styles.cardStyles.base, 'flex items-center justify-center py-12', className)}>
|
|
<div className="text-center">
|
|
<div
|
|
className={cn(
|
|
`animate-spin rounded-full ${borderColor} mx-auto`,
|
|
sizeClasses[size],
|
|
)}
|
|
/>
|
|
{message && <p className={cn('mt-4', textColor)}>{message}</p>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|