| 1 | /** |
| 2 | * ChatLoadingSkeleton - 聊天页面加载骨架屏 |
| 3 | * 在页面初始加载时显示 |
| 4 | */ |
| 5 | 'use client' |
| 6 | |
| 7 | import { Skeleton } from '@/components/ui/skeleton' |
| 8 | import { cn } from '@/utils/className' |
| 9 | |
| 10 | export function ChatLoadingSkeleton() { |
| 11 | return ( |
| 12 | <div className="flex flex-col h-screen bg-background"> |
| 13 | {/* 顶部导航骨架 */} |
| 14 | <header className="flex items-center gap-3 px-4 py-3 bg-background border-b border-border"> |
| 15 | <Skeleton className="w-8 h-8 rounded-full" /> |
| 16 | <Skeleton className="w-32 h-5" /> |
| 17 | </header> |
| 18 | |
| 19 | {/* 消息区域骨架 - 外层负责滚动，内层限宽居中 */} |
| 20 | <div className="flex-1 overflow-hidden"> |
| 21 | <div className="h-full overflow-y-auto"> |
| 22 | <div className="max-w-6xl mx-auto px-4 pt-4 pb-4 space-y-4"> |
| 23 | {[1, 2, 3].map(i => ( |
| 24 | <div key={i} className={cn('flex gap-3', i % 2 === 0 ? 'flex-row-reverse' : '')}> |
| 25 | <Skeleton className="w-8 h-8 rounded-full shrink-0" /> |
| 26 | <div className="space-y-2"> |
| 27 | <Skeleton className="w-48 h-16 rounded-2xl" /> |
| 28 | </div> |
| 29 | </div> |
| 30 | ))} |
| 31 | </div> |
| 32 | </div> |
| 33 | </div> |
| 34 | |
| 35 | {/* 底部输入区域骨架 - 限宽居中 */} |
| 36 | <div className="p-4 shrink-0"> |
| 37 | <div className="max-w-6xl mx-auto"> |
| 38 | <Skeleton className="w-full h-14 rounded-2xl" /> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
| 42 | ) |
| 43 | } |
| 44 |