import React from 'react';

/**
 * 应用骨架屏
 * 在应用初始化时显示，提升用户体验
 */
const AppSkeleton: React.FC = () => {
  return (
    <div className="flex h-screen bg-slate-50">
      {/* 侧边栏骨架 */}
      <div className="w-64 border-r border-slate-200 bg-white">
        {/* Logo 区域 */}
        <div className="h-16 border-b border-slate-200 px-4 flex items-center">
          <div className="h-8 w-32 bg-slate-200 rounded animate-pulse"></div>
        </div>
        
        {/* 菜单骨架 */}
        <div className="p-4 space-y-2">
          {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
            <div key={i} className="h-10 bg-slate-200 rounded animate-pulse"></div>
          ))}
        </div>
      </div>

      {/* 主内容区骨架 */}
      <div className="flex-1 flex flex-col">
        {/* 头部骨架 */}
        <div className="h-16 border-b border-slate-200 bg-white px-6 flex items-center justify-end">
          <div className="flex items-center gap-4">
            <div className="h-8 w-48 bg-slate-200 rounded animate-pulse"></div>
            <div className="h-8 w-24 bg-slate-200 rounded animate-pulse"></div>
          </div>
        </div>

        {/* 内容区骨架 */}
        <div className="flex-1 p-6 space-y-4">
          <div className="h-12 w-64 bg-slate-200 rounded animate-pulse"></div>
          <div className="h-64 bg-white rounded shadow animate-pulse"></div>
          <div className="h-64 bg-white rounded shadow animate-pulse"></div>
        </div>
      </div>
    </div>
  );
};

export default AppSkeleton;

