selfrelease
0df8aa77d9
- 员工花名册管理（加密存储、导入导出） - 薪酬管理（发薪批次、薪酬模版、加班费计算、工资条） - 社保公积金（多城市配置、版本管理、基数调整） - 解聘管理（6步流程、证据链、工作交接） - AI 助手（合同审查、风险预测、RAG 知识库） - Dashboard 仪表盘 - 设置与通知
62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import clsx from 'clsx'
|
|
|
|
interface SkeletonProps {
|
|
className?: string
|
|
lines?: number
|
|
}
|
|
|
|
/**
|
|
* 骨架屏组件
|
|
* 用于数据加载时的占位显示，减少布局闪烁
|
|
*/
|
|
export function Skeleton({ className }: SkeletonProps) {
|
|
return <div className={clsx('animate-pulse rounded bg-gray-200', className)} />
|
|
}
|
|
|
|
/**
|
|
* 多行文本骨架屏
|
|
*/
|
|
export function SkeletonText({ lines = 3, className }: SkeletonProps) {
|
|
return (
|
|
<div className={clsx('space-y-2', className)}>
|
|
{Array.from({ length: lines }).map((_, i) => (
|
|
<Skeleton key={i} className={clsx('h-4', i === lines - 1 && 'w-2/3')} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* 卡片骨架屏
|
|
*/
|
|
export function SkeletonCard() {
|
|
return (
|
|
<div className="p-4 rounded-lg border border-gray-200 space-y-3">
|
|
<Skeleton className="h-5 w-1/3" />
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-2/3" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* 页面级骨架屏
|
|
*/
|
|
export function SkeletonPage() {
|
|
return (
|
|
<div className="space-y-4">
|
|
<Skeleton className="h-8 w-48" />
|
|
<div className="flex gap-1">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-8 w-20" />
|
|
))}
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<SkeletonCard key={i} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|