From 4642130a040ffcc3622346e9ee6c54cd9175c71f Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 30 Jul 2026 09:01:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor(AssetSelector):=20=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AssetListItem.tsx              | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 apps/web/src/components/asset-selector/components/AssetListItem.tsx

diff --git a/apps/web/src/components/asset-selector/components/AssetListItem.tsx b/apps/web/src/components/asset-selector/components/AssetListItem.tsx
new file mode 100644
index 000000000..cf024980e
--- /dev/null
+++ b/apps/web/src/components/asset-selector/components/AssetListItem.tsx
@@ -0,0 +1,67 @@
+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"
+
+export interface AssetListItemProps {
+  asset: MediaAsset
+  isSelected: boolean
+  isDragging: boolean
+  isDragOver: boolean
+  showBatchSelect: boolean
+  onToggleSelect: (e: React.MouseEvent) => void
+  onMouseEnter: (e: React.MouseEvent) => void
+  onMouseLeave: () => void
+}
+
+export const AssetListItem: React.FC<AssetListItemProps> = ({
+  asset,
+  isSelected,
+  isDragging,
+  isDragOver,
+  showBatchSelect,
+  onToggleSelect,
+  onMouseEnter,
+  onMouseLeave,
+}) => {
+  return (
+    <>
+      {/* 拖拽手柄 */}
+      <span className="as-list-item-drag" title="拖拽排序">
+        ⠿
+      </span>
+
+      {/* Checkbox */}
+      {showBatchSelect && (
+        <span
+          data-checkbox
+          className={`as-list-item-checkbox${isSelected ? " checked" : ""}`}
+          onClick={onToggleSelect}
+        />
+      )}
+
+      {/* 图标 */}
+      <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>
+      )}
+    </>
+  )
+}