- {/* ─── 上传进度弹窗（圆形动画 + 百分比） ─── */}
-
-
-
-
- {uploadProgress}%
- 上传中…
-
-
+ {/* ─── 上传进度弹窗 ─── */}
+
{/* 两栏布局 */}
{/* ─── 左侧：视频库列表 ─── */}
-
- {libraries.map((lib) => (
-
setActiveLibId(lib.id)}
- >
-
-
- {kindIcon(lib.kind)} {lib.name}
-
-
{
- e?.stopPropagation()
- handleDeleteLibrary(lib.id)
- }}
- onCancel={(e) => e?.stopPropagation()}
- okText="删除"
- cancelText="取消"
- >
-
-
-
-
- {kindLabel(lib.kind)} · {lib.count} 个素材
-
-
- ))}
-
- {/* 新建视频库 */}
-
setCreateModalOpen(true)}>
-
- 新建视频库
-
-
+
setCreateModalOpen(true)}
+ />
{/* ─── 右侧：内容区 ─── */}
@@ -771,79 +520,27 @@ const AssetLibrary: React.FC = () => {
{/* 筛选栏 */}
-
-
- }
- value={searchText}
- onChange={(e) => setSearchText(e.target.value)}
- allowClear
- style={{ width: 220 }}
- />
-
-
-
-
-
- 共 {filteredAssets.length} 个素材
-
-
+
{/* 批量操作栏 */}
{selectedIds.size > 0 && (
-
-
已选 {selectedIds.size} 项
-
-
}
- onClick={() => setTagModalOpen(true)}
- >
- 打标签
-
-
}
- onClick={() => setClassifyModalOpen(true)}
- >
- 改分类
-
-
}
- onClick={() => setMarkModalOpen(true)}
- >
- 智能标记
-
-
- }>
- 批量删除
-
-
-
+
setTagModalOpen(true)}
+ onClassifyClick={() => setClassifyModalOpen(true)}
+ onMarkClick={() => setMarkModalOpen(true)}
+ onBatchDelete={handleBatchDelete}
+ />
)}
{/* 素材网格 */}
@@ -890,231 +587,75 @@ const AssetLibrary: React.FC = () => {
-
-
名称
-
setNewLibName(e.target.value)}
- maxLength={50}
- />
-
-
-
类型
-
-
-
暂无可播放的文件地址
-
素材 ID: {playingAsset?.id}
-
-
- 模式：
- setTagMode(e.target.value)}>
- 追加标签
- 替换全部标签
-
-
-
-
setBatchTagInput(e.target.value)}
- onKeyDown={handleTagInputKeyDown}
- style={{ flex: 1 }}
- />
-
- {batchTags.length > 0 && (
-
- {batchTags.map((tag) => (
- removeBatchTag(tag)} color="blue">
- {tag}
-
- ))}
-
- )}
- {tagMode === "replace" && batchTags.length > 0 && (
-
- 替换模式将清除素材原有全部标签
-
- )}
-
-
- 将选中的 {selectedIds.size} 个素材统一修改为以下分类：
-
-
setBatchCategory(v)}
- placeholder="请选择分类"
- style={{ width: "100%" }}
- options={CATEGORY_OPTIONS}
- />
-
-
将选中的 {selectedIds.size} 个素材标记为：
-
setBatchSmartView(e.target.value)}
- className="xx-batch-mark-options"
- >
-
-
- 推荐
- 质量优良，可直接用于生产
-
-
-
-
- 慎用
- 存在一定问题，需人工审核后再使用
-
-
-
-
- 高风险
- 存在严重问题，不建议使用
-
-
-
-
-
-
- 总计 {operationResult.total} 个
-
-
-
- 成功 {operationResult.success_count} 个
-
- {operationResult.failure_count > 0 && (
-
-
- 失败 {operationResult.failure_count} 个
-
- )}
-
-
- {(operationResult?.succeeded?.length ?? 0) > 0 && (
-
-
- 成功列表
-
-
- {operationResult?.succeeded?.map((id) => (
-
- {id}
-
- ))}
-
-
- )}
-
- {(operationResult?.failed?.length ?? 0) > 0 && (
-
-
- 失败列表
-
-
- {operationResult?.failed?.map((id) => (
-
- {id}
-
- ))}
-
-
- )}
-
)
}
diff --git a/apps/web/src/pages/assets/components/AssetCard.tsx b/apps/web/src/pages/assets/components/AssetCard.tsx
new file mode 100644
index 000000000..6f83b573d
--- /dev/null
+++ b/apps/web/src/pages/assets/components/AssetCard.tsx
@@ -0,0 +1,128 @@
+import React from "react"
+import {
+ PlayCircleOutlined,
+ CheckOutlined,
+ DeleteOutlined,
+ ExperimentOutlined,
+ LoadingOutlined,
+ CloseCircleOutlined,
+} from "@ant-design/icons"
+import { Popconfirm } from "antd"
+import type { AssetItem } from "@/pages/assets/types"
+import { thumbGradient } from "@/pages/assets/utils/asset"
+import { kindIcon } from "@/pages/assets/utils/kindIcon"
+import { StatusPill } from "./AssetSkeleton"
+
+/* ============================================================
+ * AssetCard — 素材卡片（网格视图）
+ * ============================================================ */
+export interface AssetCardProps {
+ asset: AssetItem
+ selected: boolean
+ diagnosing?: boolean
+ onToggle: () => void
+ onDiagnose: () => void
+ onPlay: () => void
+ onDelete: () => void
+}
+
+const AssetCard: React.FC
= ({
+ asset,
+ selected,
+ diagnosing,
+ onToggle,
+ onDiagnose,
+ onPlay,
+ onDelete,
+}) => (
+
+ {/* 缩略图区 */}
+
+ {asset.thumbUrl ? (
+
+ ) : (
+
+ {asset.loading ? : kindIcon(asset.kind)}
+
+ )}
+
+ {/* 处理中遮罩 */}
+ {asset.loading && (
+
+
+ 处理中
+
+ )}
+
+ {/* 失败状态标识 */}
+ {asset.status === "bad" && asset.statusLabel === "处理失败" && (
+
+
+ 处理失败
+
+ )}
+
+ {/* 视频/配音类显示播放按钮（处理中/失败不显示） */}
+ {asset.kind === "video" && !asset.loading && asset.status !== "bad" && (
+
{
+ e.stopPropagation()
+ onPlay()
+ }}
+ >
+
+
+ )}
+
+ {/* 删除按钮 */}
+
{
+ e?.stopPropagation()
+ onDelete()
+ }}
+ onCancel={(e) => e?.stopPropagation()}
+ okText="删除"
+ cancelText="取消"
+ okButtonProps={{ danger: true }}
+ >
+ e.stopPropagation()}>
+
+
+
+
+ {/* 选中态勾选 */}
+ {selected && (
+
+
+
+ )}
+
+
+ {/* 信息区 */}
+
+
+ {asset.name}
+
+
+
+ {asset.duration && {asset.duration}}
+
+
+
+
+
+ }
+ value={searchText}
+ onChange={(e) => onSearchChange(e.target.value)}
+ allowClear
+ style={{ width: 220 }}
+ />
+
+
+
+
+
+ 共 {totalCount} 个素材
+
+
+
将选中的 {selectedCount} 个素材统一修改为以下分类：
+
onCategoryChange(v)}
+ placeholder="请选择分类"
+ style={{ width: "100%" }}
+ options={CATEGORY_OPTIONS}
+ />
+
+
将选中的 {selectedCount} 个素材标记为：
+
onSmartViewChange(e.target.value)}
+ className="xx-batch-mark-options"
+ >
+
+
+ 推荐
+ 质量优良，可直接用于生产
+
+
+
+
+ 慎用
+ 存在一定问题，需人工审核后再使用
+
+
+
+
+ 高风险
+ 存在严重问题，不建议使用
+
+
+
+
+
已选 {selectedCount} 项
+
+
} onClick={onTagClick}>
+ 打标签
+
+
} onClick={onClassifyClick}>
+ 改分类
+
+
} onClick={onMarkClick}>
+ 智能标记
+
+
+ }>
+ 批量删除
+
+
+
+
+ 模式：
+ onTagModeChange(e.target.value)}>
+ 追加标签
+ 替换全部标签
+
+
+
+
onTagInputChange(e.target.value)}
+ onKeyDown={onTagInputKeyDown}
+ style={{ flex: 1 }}
+ />
+
+ {tags.length > 0 && (
+
+ {tags.map((tag) => (
+ onRemoveTag(tag)} color="blue">
+ {tag}
+
+ ))}
+
+ )}
+ {tagMode === "replace" && tags.length > 0 && (
+
+ 替换模式将清除素材原有全部标签
+
+ )}
+
+
+
名称
+
onNameChange(e.target.value)}
+ maxLength={50}
+ />
+
+
+
类型
+
+
+ {libraries.map((lib) => (
+
onSelect(lib.id)}
+ >
+
+
+ {kindIcon(lib.kind)} {lib.name}
+
+
{
+ e?.stopPropagation()
+ onDelete(lib.id)
+ }}
+ onCancel={(e) => e?.stopPropagation()}
+ okText="删除"
+ cancelText="取消"
+ >
+
+
+
+
+ {kindLabel(lib.kind)} · {lib.count} 个素材
+
+
+ ))}
+
+ {/* 新建视频库 */}
+
+
+
暂无可播放的文件地址
+
素材 ID: {asset?.id}
+
+
+
+ 总计 {result.total} 个
+
+
+
+ 成功 {result.success_count} 个
+
+ {result.failure_count > 0 && (
+
+
+ 失败 {result.failure_count} 个
+
+ )}
+
+
+ {(result?.succeeded?.length ?? 0) > 0 && (
+
+
+ 成功列表
+
+
+ {result?.succeeded?.map((id) => (
+
+ {id}
+
+ ))}
+
+
+ )}
+
+ {(result?.failed?.length ?? 0) > 0 && (
+
+
+ 失败列表
+
+
+ {result?.failed?.map((id) => (
+
+ {id}
+
+ ))}
+
+
+ )}
+
+
+
+ {progress}%
+ 上传中…
+
+