xiaoxia-saas/apps/web/src/components/asset-selector/AssetListItem.tsx

import React from "react"
import type { MediaAsset } from "@/api/template-editor"
import { MATERIAL_TYPE_LABELS, MATERIAL_TYPE_ICONS } from "@/api/template-editor"
import { formatSize, formatDuration, getQualityColor } from "./utils"

interface AssetListItemProps {
  asset: MediaAsset
  isSelected: boolean
  isDragging: boolean
  isDragOver: boolean
  showCheckbox: boolean
  onToggleSelect: (asset: MediaAsset, shiftKey: boolean) => void
  onCardClick: (asset: MediaAsset, e: React.MouseEvent) => void
  onDragStart: (e: React.DragEvent) => void
  onDragOver: (e: React.DragEvent) => void
  onDrop: (e: React.DragEvent) => void
  onDragEnd: () => void
  onMouseEnter: (e: React.MouseEvent) => void
  onMouseLeave: () => void
}

const AssetListItem: React.FC<AssetListItemProps> = ({
  asset,
  isSelected,
  isDragging,
  isDragOver,
  showCheckbox,
  onToggleSelect,
  onCardClick,
  onDragStart,
  onDragOver,
  onDrop,
  onDragEnd,
  onMouseEnter,
  onMouseLeave,
}) => {
  return (
    <div
      className={[
        "as-list-item",
        isSelected ? "selected" : "",
        isDragging ? "dragging" : "",
        isDragOver ? "drag-over" : "",
      ]
        .filter(Boolean)
        .join(" ")}
      draggable
      onDragStart={onDragStart}
      onDragOver={onDragOver}
      onDrop={onDrop}
      onDragEnd={onDragEnd}
      onClick={(e) => onCardClick(asset, e)}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {/* 拖拽手柄 */}
      <span className="as-list-item-drag" title="拖拽排序">
        ⠿
      </span>

      {/* Checkbox */}
      {showCheckbox && (
        <span
          data-checkbox
          className={`as-list-item-checkbox${isSelected ? " checked" : ""}`}
          onClick={(e) => {
            e.stopPropagation()
            onToggleSelect(asset, e.shiftKey)
          }}
        />
      )}

      {/* 图标 */}
      <span className="as-list-item-icon">{MATERIAL_TYPE_ICONS[asset.type]}</span>

      {/* 信息 */}
      <div className="as-list-item-info">
        <div className="as-list-item-name">{asset.name}</div>
        <div className="as-list-item-meta">
          {MATERIAL_TYPE_LABELS[asset.type]}
          {asset.duration != null && ` · ${formatDuration(asset.duration)}`}
          {asset.size != null && ` · ${formatSize(asset.size)}`}
        </div>
      </div>

      {/* 质量分 */}
      {asset.quality_score != null && (
        <span
          className="as-list-item-quality"
          style={{ color: getQualityColor(asset.quality_score) }}
        >
          {asset.quality_score}分
        </span>
      )}
    </div>
  )
}

export default AssetListItem