xiaoxia-saas/apps/web/src/pages/assets/components/AssetGridSection.tsx

/**
 * AssetLibrary 素材网格区域（含加载/错误/空状态）
 */
import React from "react"
import { PictureOutlined, ExclamationCircleOutlined } from "@ant-design/icons"
import { Button } from "@/components/ui"
import type { AssetItem } from "../types"
import AssetCard from "./AssetCard"
import { SkeletonCard } from "./AssetSkeleton"

/** 上传中素材的实时进度（asset_id → 进度信息），由上传队列合并到卡片 */
export type UploadProgressMap = Map<string, { progress: number; uploading: boolean }>

export interface AssetGridSectionProps {
  loading: boolean
  error: boolean
  errorMessage?: string
  assets: AssetItem[]
  selectedIds: Set<string>
  diagnosingId: string | null
  uploadProgressMap?: UploadProgressMap
  onRetry?: () => void
  onToggleSelect: (id: string) => void
  onDiagnose: (asset: AssetItem) => void
  onPlay: (asset: AssetItem) => void
  onDelete: (id: string) => void
}

export const AssetGridSection: React.FC<AssetGridSectionProps> = ({
  loading,
  error,
  errorMessage,
  assets,
  selectedIds,
  diagnosingId,
  uploadProgressMap,
  onRetry,
  onToggleSelect,
  onDiagnose,
  onPlay,
  onDelete,
}) => {
  if (loading) {
    return (
      <div className="xx-asset-grid">
        {Array.from({ length: 8 }).map((_, i) => (
          <SkeletonCard key={i} />
        ))}
      </div>
    )
  }

  if (error) {
    return (
      <div className="xx-assets-empty">
        <div className="xx-assets-empty-icon">
          <ExclamationCircleOutlined />
        </div>
        <p className="xx-assets-empty-title">{errorMessage || "加载失败"}</p>
        {onRetry && (
          <Button buttonType="primary" buttonSize="sm" onClick={onRetry}>
            重新加载
          </Button>
        )}
      </div>
    )
  }

  if (assets.length > 0) {
    return (
      <div className="xx-asset-grid">
        {assets.map((asset) => (
          <AssetCard
            key={asset.id}
            asset={asset}
            selected={selectedIds.has(asset.id)}
            diagnosing={diagnosingId === asset.id}
            uploadProgress={uploadProgressMap?.get(asset.id)}
            onToggle={() => onToggleSelect(asset.id)}
            onDiagnose={() => onDiagnose(asset)}
            onPlay={() => onPlay(asset)}
            onDelete={() => onDelete(asset.id)}
          />
        ))}
      </div>
    )
  }

  return (
    <div className="xx-assets-empty">
      <div className="xx-assets-empty-icon">
        <PictureOutlined />
      </div>
      <p className="xx-assets-empty-title">暂无素材，请上传或切换视频库</p>
    </div>
  )
}

export default AssetGridSection