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

/**
 * 上传队列面板
 * 展示批量上传中每个文件的独立状态/进度；失败可重试、可移除、可清空已完成。
 * 上传中的素材卡片同时也会出现在素材网格（后端 prepare 预建 asset），
 * 此面板用于展示真实传输进度与失败重试入口。
 */
import React from "react"
import {
  LoadingOutlined,
  CheckCircleFilled,
  CloseCircleFilled,
  ReloadOutlined,
  CloseOutlined,
} from "@ant-design/icons"
import type { UploadItem } from "../hooks/useAssetUpload"

export interface UploadQueuePanelProps {
  items: UploadItem[]
  onRetry: (tempId: string) => void
  onRemove: (tempId: string) => void
  onClearFinished: () => void
}

const STATUS_TEXT: Record<UploadItem["status"], string> = {
  preparing: "排队中…",
  uploading: "上传中",
  ingesting: "转码中…",
  done: "已完成",
  error: "上传失败",
}

const UploadQueuePanel: React.FC<UploadQueuePanelProps> = ({
  items,
  onRetry,
  onRemove,
  onClearFinished,
}) => {
  if (items.length === 0) return null
  const finishedCount = items.filter((it) => it.status === "done").length

  return (
    <div className="xx-upload-queue">
      <div className="xx-upload-queue-header">
        <span className="xx-upload-queue-title">
          上传任务（{items.length}
          {finishedCount > 0 ? `，已完成 ${finishedCount}` : ""}）
        </span>
        {finishedCount > 0 && (
          <button type="button" className="xx-link-btn" onClick={onClearFinished}>
            清空已完成
          </button>
        )}
      </div>
      <div className="xx-upload-queue-list">
        {items.map((it) => {
          const isActive = it.status === "preparing" || it.status === "uploading"
          const showProgress = it.status === "uploading" || it.status === "ingesting"
          return (
            <div key={it.tempId} className={`xx-upload-queue-item xx-upload-queue-${it.status}`}>
              <span className="xx-upload-queue-icon">
                {it.status === "done" || it.duplicated ? (
                  <CheckCircleFilled style={{ color: "#22c55e" }} />
                ) : it.status === "error" ? (
                  <CloseCircleFilled style={{ color: "#ef4444" }} />
                ) : (
                  <LoadingOutlined style={{ color: "var(--primary-color)" }} />
                )}
              </span>
              <div className="xx-upload-queue-body">
                <div className="xx-upload-queue-name" title={it.fileName}>
                  {it.fileName}
                </div>
                {showProgress ? (
                  <div className="xx-upload-queue-progress">
                    <div
                      className="xx-upload-queue-progress-bar"
                      style={{ width: `${it.status === "ingesting" ? 100 : it.progress}%` }}
                    />
                  </div>
                ) : null}
                <div className="xx-upload-queue-status">
                  {it.duplicated ? "素材已存在，已跳过" : STATUS_TEXT[it.status]}
                  {it.status === "uploading" ? ` ${it.progress}%` : ""}
                  {it.status === "error" && it.error ? `：${it.error}` : ""}
                </div>
              </div>
              <span className="xx-upload-queue-actions">
                {it.status === "error" && (
                  <button
                    type="button"
                    className="xx-upload-queue-btn"
                    title="重试"
                    onClick={() => onRetry(it.tempId)}
                  >
                    <ReloadOutlined />
                  </button>
                )}
                {(it.status === "error" || it.status === "done") && !isActive && (
                  <button
                    type="button"
                    className="xx-upload-queue-btn"
                    title="移除"
                    onClick={() => onRemove(it.tempId)}
                  >
                    <CloseOutlined />
                  </button>
                )}
              </span>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default UploadQueuePanel