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 - 添加错误边界和统一状态组件 - 完善类型定义和可访问性支持 - 更新文档（优化记录、优化计划、更新日志）
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
'use client'
|
||
|
||
import { useThemeStyles, useTheme, cn } from '@/lib/ui-styles'
|
||
|
||
interface ErrorStateProps {
|
||
message: string
|
||
onRetry?: () => void
|
||
retryLabel?: string
|
||
className?: string
|
||
}
|
||
|
||
export default function ErrorState({
|
||
message,
|
||
onRetry,
|
||
retryLabel = '重试',
|
||
className,
|
||
}: ErrorStateProps) {
|
||
const styles = useThemeStyles()
|
||
const theme = useTheme()
|
||
|
||
// 根据主题选择错误状态的颜色
|
||
const errorBg = theme === 'dark' ? 'bg-red-900/30' : 'bg-red-50'
|
||
const errorBorder = theme === 'dark' ? 'border-red-800' : 'border-red-200'
|
||
const errorText = theme === 'dark' ? 'text-red-300' : 'text-red-700'
|
||
|
||
return (
|
||
<div className={cn('text-center py-12', className)}>
|
||
<div
|
||
className={cn(
|
||
styles.cardStyles.base,
|
||
`${errorBg} ${errorBorder} ${errorText} px-4 py-3`,
|
||
)}
|
||
>
|
||
<strong className="font-bold">错误：</strong>
|
||
<span className="block sm:inline">{message}</span>
|
||
</div>
|
||
{onRetry && (
|
||
<button onClick={onRetry} className={cn(styles.buttonStyles.primary, 'mt-4')}>
|
||
{retryLabel}
|
||
</button>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|