| 1 | /** |
| 2 | * PublishDetailSkeleton - 发布详情卡片骨架屏组件 |
| 3 | * 用于发布详情加载状态的占位显示 |
| 4 | */ |
| 5 | |
| 6 | import { Skeleton } from '@/components/ui/skeleton' |
| 7 | import { cn } from '@/utils/className' |
| 8 | |
| 9 | export interface IPublishDetailSkeletonProps { |
| 10 | className?: string |
| 11 | } |
| 12 | |
| 13 | export function PublishDetailSkeleton({ className }: IPublishDetailSkeletonProps) { |
| 14 | return ( |
| 15 | <div |
| 16 | className={cn( |
| 17 | 'flex gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border border-border bg-muted/30', |
| 18 | className, |
| 19 | )} |
| 20 | > |
| 21 | {/* 左侧：封面图骨架 - 移动端更小 */} |
| 22 | <Skeleton className="w-14 h-14 sm:w-20 sm:h-20 rounded-md shrink-0" /> |
| 23 | |
| 24 | {/* 右侧：内容骨架 */} |
| 25 | <div className="flex-1 min-w-0"> |
| 26 | {/* 头部：账户信息 */} |
| 27 | <div className="flex items-center justify-between mb-1 sm:mb-1.5"> |
| 28 | <div className="flex items-center gap-1 sm:gap-1.5"> |
| 29 | <Skeleton className="w-4 h-4 sm:w-5 sm:h-5 rounded-full" /> |
| 30 | <Skeleton className="w-12 sm:w-16 h-3 rounded" /> |
| 31 | </div> |
| 32 | <Skeleton className="w-4 h-4 sm:w-[18px] sm:h-[18px] rounded" /> |
| 33 | </div> |
| 34 | |
| 35 | {/* 标题 */} |
| 36 | <Skeleton className="w-3/4 h-3 sm:h-4 rounded mb-0.5 sm:mb-1" /> |
| 37 | |
| 38 | {/* 描述 */} |
| 39 | <Skeleton className="w-full h-3 rounded mb-1 sm:mb-1.5" /> |
| 40 | |
| 41 | {/* 状态 */} |
| 42 | <Skeleton className="w-14 sm:w-16 h-5 rounded-full" /> |
| 43 | </div> |
| 44 | </div> |
| 45 | ) |
| 46 | } |
| 47 | |
| 48 | export default PublishDetailSkeleton |
| 49 |