682 lines
25 KiB
TypeScript
682 lines
25 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import {
|
||
FileVideo, FileAudio, FileImage, Clock, ExternalLink, ChevronDown, ChevronUp,
|
||
Monitor, Volume2, Palette, Calendar, Hash, Zap, HardDrive, Film, Eye, Brain, Loader2, User, Edit2, Trash2, RefreshCw
|
||
} from 'lucide-react';
|
||
import { Material, MaterialSegment } from '../types/material';
|
||
import { useMaterialStore } from '../store/materialStore';
|
||
import { useVideoClassificationStore } from '../store/videoClassificationStore';
|
||
import { Model } from '../types/model';
|
||
import { invoke } from '@tauri-apps/api/core';
|
||
import { DeleteConfirmDialog } from './DeleteConfirmDialog';
|
||
import { MaterialThumbnail } from './MaterialThumbnail';
|
||
import { MaterialUsageBadge } from './MaterialUsageStatus';
|
||
import { useMaterialUsage } from '../hooks/useMaterialUsage';
|
||
|
||
interface MaterialCardProps {
|
||
material: Material;
|
||
onEdit?: (material: Material) => void;
|
||
onDelete?: (materialId: string, materialName: string) => void;
|
||
onReprocess?: (materialId: string) => void;
|
||
onUsageReset?: () => void; // 使用状态重置后的回调
|
||
}
|
||
|
||
// 格式化时间（秒转为 mm:ss 格式）
|
||
const formatTime = (seconds: number): string => {
|
||
const minutes = Math.floor(seconds / 60);
|
||
const remainingSeconds = Math.floor(seconds % 60);
|
||
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
||
};
|
||
|
||
// 格式化文件大小
|
||
const formatFileSize = (bytes: number): string => {
|
||
if (bytes === 0) return '0 B';
|
||
const k = 1024;
|
||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||
};
|
||
|
||
// 格式化比特率
|
||
const formatBitrate = (bitrate: number): string => {
|
||
if (bitrate >= 1000000) {
|
||
return `${(bitrate / 1000000).toFixed(1)} Mbps`;
|
||
} else if (bitrate >= 1000) {
|
||
return `${(bitrate / 1000).toFixed(0)} Kbps`;
|
||
}
|
||
return `${bitrate} bps`;
|
||
};
|
||
|
||
// 格式化分辨率
|
||
const formatResolution = (width: number, height: number): string => {
|
||
return `${width}×${height}`;
|
||
};
|
||
|
||
// 格式化日期
|
||
const formatDate = (dateString: string): string => {
|
||
return new Date(dateString).toLocaleDateString('zh-CN', {
|
||
year: 'numeric',
|
||
month: 'short',
|
||
day: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 素材卡片组件
|
||
* 显示素材信息和切分片段
|
||
*/
|
||
export const MaterialCard: React.FC<MaterialCardProps> = ({ material, onEdit, onDelete, onReprocess, onUsageReset }) => {
|
||
const { getMaterialSegments } = useMaterialStore();
|
||
const { startClassification, isLoading: classificationLoading } = useVideoClassificationStore();
|
||
const { usageStats } = useMaterialUsage();
|
||
const [segments, setSegments] = useState<MaterialSegment[]>([]);
|
||
const [showSegments, setShowSegments] = useState(false);
|
||
const [loadingSegments, setLoadingSegments] = useState(false);
|
||
const [isClassifying, setIsClassifying] = useState(false);
|
||
const [associatedModel, setAssociatedModel] = useState<Model | null>(null);
|
||
const [loadingModel, setLoadingModel] = useState(false);
|
||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||
const [thumbnailCache, setThumbnailCache] = useState<Map<string, string>>(new Map());
|
||
const [showDetails, setShowDetails] = useState(false);
|
||
const [isDeleting, setIsDeleting] = useState(false);
|
||
const [isReprocessing, setIsReprocessing] = useState(false);
|
||
const [isResettingUsage, setIsResettingUsage] = useState(false);
|
||
|
||
// 获取素材的使用统计
|
||
const materialUsageStats = usageStats.find(stats => stats.material_id === material.id);
|
||
|
||
|
||
|
||
// 获取状态颜色
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case 'Completed':
|
||
return 'text-green-600 bg-green-50';
|
||
case 'Processing':
|
||
return 'text-blue-600 bg-blue-50';
|
||
case 'Failed':
|
||
return 'text-red-600 bg-red-50';
|
||
case 'Pending':
|
||
return 'text-yellow-600 bg-yellow-50';
|
||
default:
|
||
return 'text-gray-600 bg-gray-50';
|
||
}
|
||
};
|
||
|
||
// 获取关联的模特信息
|
||
useEffect(() => {
|
||
let isMounted = true; // 用于防止组件卸载后设置状态
|
||
|
||
const fetchAssociatedModel = async () => {
|
||
if (!material.model_id) {
|
||
if (isMounted) {
|
||
setAssociatedModel(null);
|
||
setLoadingModel(false);
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (isMounted) {
|
||
setLoadingModel(true);
|
||
}
|
||
|
||
try {
|
||
const model = await invoke<Model>('get_model_by_id', { id: material.model_id });
|
||
if (isMounted) {
|
||
setAssociatedModel(model);
|
||
}
|
||
} catch (error) {
|
||
console.error('获取关联模特失败:', error);
|
||
if (isMounted) {
|
||
setAssociatedModel(null);
|
||
}
|
||
} finally {
|
||
if (isMounted) {
|
||
setLoadingModel(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
fetchAssociatedModel();
|
||
|
||
// 清理函数
|
||
return () => {
|
||
isMounted = false;
|
||
};
|
||
}, [material.model_id]);
|
||
|
||
// 加载切分片段
|
||
const loadSegments = async () => {
|
||
if (segments.length > 0) {
|
||
setShowSegments(!showSegments);
|
||
return;
|
||
}
|
||
|
||
setLoadingSegments(true);
|
||
try {
|
||
const materialSegments = await getMaterialSegments(material.id);
|
||
setSegments(materialSegments);
|
||
setShowSegments(true);
|
||
} catch (error) {
|
||
console.error('加载切分片段失败:', error);
|
||
} finally {
|
||
setLoadingSegments(false);
|
||
}
|
||
};
|
||
|
||
// 打开文件所在文件夹
|
||
const openFileLocation = async (filePath: string) => {
|
||
try {
|
||
const { revealItemInDir } = await import('@tauri-apps/plugin-opener');
|
||
|
||
// 处理 Windows 路径格式，移除 \\?\ 前缀
|
||
let normalizedPath = filePath;
|
||
if (normalizedPath.startsWith('\\\\?\\')) {
|
||
normalizedPath = normalizedPath.substring(4);
|
||
}
|
||
|
||
console.log('打开文件位置:', normalizedPath);
|
||
await revealItemInDir(normalizedPath);
|
||
} catch (error) {
|
||
console.error('打开文件位置失败:', error);
|
||
|
||
// 如果 revealItemInDir 失败，尝试打开文件所在目录
|
||
try {
|
||
const { openPath } = await import('@tauri-apps/plugin-opener');
|
||
|
||
// 获取文件所在目录
|
||
const pathParts = filePath.split(/[/\\]/);
|
||
pathParts.pop(); // 移除文件名
|
||
const dirPath = pathParts.join('\\');
|
||
|
||
let normalizedDirPath = dirPath;
|
||
if (normalizedDirPath.startsWith('\\\\?\\')) {
|
||
normalizedDirPath = normalizedDirPath.substring(4);
|
||
}
|
||
|
||
console.log('尝试打开目录:', normalizedDirPath);
|
||
await openPath(normalizedDirPath);
|
||
} catch (fallbackError) {
|
||
console.error('备用方法也失败:', fallbackError);
|
||
alert('无法打开文件位置，请检查文件是否存在');
|
||
}
|
||
}
|
||
};
|
||
|
||
// 启动AI分类
|
||
const handleStartClassification = async () => {
|
||
if (!material.project_id) {
|
||
console.error('缺少项目ID');
|
||
return;
|
||
}
|
||
|
||
setIsClassifying(true);
|
||
try {
|
||
const request = {
|
||
material_id: material.id,
|
||
project_id: material.project_id,
|
||
overwrite_existing: false,
|
||
priority: 1,
|
||
};
|
||
|
||
const taskIds = await startClassification(request);
|
||
console.log(`已创建 ${taskIds.length} 个分类任务`);
|
||
|
||
// 可以在这里显示成功消息或打开进度对话框
|
||
} catch (error) {
|
||
console.error('启动AI分类失败:', error);
|
||
// 可以在这里显示错误消息
|
||
} finally {
|
||
setIsClassifying(false);
|
||
}
|
||
};
|
||
|
||
// 处理删除素材
|
||
const handleDeleteClick = () => {
|
||
setShowDeleteConfirm(true);
|
||
};
|
||
|
||
const handleDeleteConfirm = async () => {
|
||
if (!onDelete) return;
|
||
|
||
setIsDeleting(true);
|
||
try {
|
||
await onDelete(material.id, material.name);
|
||
setShowDeleteConfirm(false);
|
||
} catch (error) {
|
||
console.error('删除素材失败:', error);
|
||
} finally {
|
||
setIsDeleting(false);
|
||
}
|
||
};
|
||
|
||
const handleDeleteCancel = () => {
|
||
setShowDeleteConfirm(false);
|
||
};
|
||
|
||
// 处理重新处理素材
|
||
const handleReprocessClick = async () => {
|
||
if (!onReprocess) return;
|
||
|
||
setIsReprocessing(true);
|
||
try {
|
||
await onReprocess(material.id);
|
||
} catch (error) {
|
||
console.error('重新处理素材失败:', error);
|
||
} finally {
|
||
setIsReprocessing(false);
|
||
}
|
||
};
|
||
|
||
// 处理重置使用状态
|
||
const handleResetUsage = async () => {
|
||
if (!materialUsageStats || materialUsageStats.used_segments === 0) return;
|
||
|
||
setIsResettingUsage(true);
|
||
try {
|
||
// 获取素材的所有片段ID
|
||
const segmentIds = segments.map(segment => segment.id);
|
||
|
||
// 如果没有加载片段，先加载
|
||
if (segmentIds.length === 0) {
|
||
await loadSegments();
|
||
// 重新获取片段ID
|
||
const updatedSegments = await getMaterialSegments(material.id);
|
||
const updatedSegmentIds = updatedSegments.map(segment => segment.id);
|
||
|
||
// 调用重置API
|
||
await invoke('reset_material_segment_usage', {
|
||
segmentIds: updatedSegmentIds
|
||
});
|
||
} else {
|
||
// 调用重置API
|
||
await invoke('reset_material_segment_usage', {
|
||
segmentIds
|
||
});
|
||
}
|
||
|
||
console.log('素材使用状态重置成功');
|
||
|
||
// 通知父组件刷新使用状态数据
|
||
if (onUsageReset) {
|
||
onUsageReset();
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('重置素材使用状态失败:', error);
|
||
} finally {
|
||
setIsResettingUsage(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="border border-gray-200 rounded-lg p-3 hover:shadow-md transition-shadow">
|
||
{/* 素材基本信息 */}
|
||
<div className="flex items-start gap-3 mb-3">
|
||
{/* 缩略图 */}
|
||
<MaterialThumbnail
|
||
material={material}
|
||
size="medium"
|
||
thumbnailCache={thumbnailCache}
|
||
setThumbnailCache={setThumbnailCache}
|
||
/>
|
||
|
||
{/* 素材信息 */}
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex-1 min-w-0">
|
||
<h4 className="font-medium text-gray-900 truncate text-sm">{material.name}</h4>
|
||
<div className="flex items-center gap-3 mt-1 text-xs text-gray-500">
|
||
<span className="flex items-center gap-1">
|
||
<HardDrive className="w-3 h-3" />
|
||
{formatFileSize(material.file_size)}
|
||
</span>
|
||
<span className="flex items-center gap-1">
|
||
<Calendar className="w-3 h-3" />
|
||
{formatDate(material.created_at)}
|
||
</span>
|
||
{/* 使用状态显示 */}
|
||
{materialUsageStats && (
|
||
<MaterialUsageBadge
|
||
usageCount={materialUsageStats.total_usage_count}
|
||
isUsed={materialUsageStats.used_segments > 0}
|
||
size="small"
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
<div className="flex items-center space-x-1 ml-2">
|
||
{/* 重新处理按钮 - 仅在状态为 Pending 时显示 */}
|
||
{material.processing_status === 'Pending' && onReprocess && (
|
||
<button
|
||
onClick={handleReprocessClick}
|
||
disabled={isReprocessing}
|
||
className="text-gray-400 hover:text-green-500 transition-colors disabled:opacity-50 p-1"
|
||
title="重新处理"
|
||
>
|
||
{isReprocessing ? (
|
||
<Loader2 className="w-3 h-3 animate-spin" />
|
||
) : (
|
||
<RefreshCw className="w-3 h-3" />
|
||
)}
|
||
</button>
|
||
)}
|
||
|
||
{onEdit && (
|
||
<button
|
||
onClick={() => onEdit(material)}
|
||
className="text-gray-400 hover:text-blue-500 transition-colors p-1"
|
||
title="编辑素材"
|
||
>
|
||
<Edit2 className="w-3 h-3" />
|
||
</button>
|
||
)}
|
||
|
||
{onDelete && (
|
||
<button
|
||
onClick={handleDeleteClick}
|
||
className="text-gray-400 hover:text-red-500 transition-colors p-1"
|
||
title="删除素材"
|
||
>
|
||
<Trash2 className="w-3 h-3" />
|
||
</button>
|
||
)}
|
||
|
||
<span className={`px-2 py-1 text-xs rounded-full ${getStatusColor(material.processing_status)}`}>
|
||
{material.processing_status}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 快速操作区域 */}
|
||
<div className="flex items-center justify-between pt-2">
|
||
<div className="flex items-center space-x-2">
|
||
{/* AI分类按钮 */}
|
||
{material.material_type === 'Video' && material.processing_status === 'Completed' && (
|
||
<button
|
||
onClick={handleStartClassification}
|
||
disabled={isClassifying || classificationLoading}
|
||
className="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 disabled:opacity-50 flex items-center gap-1"
|
||
>
|
||
{isClassifying ? (
|
||
<Loader2 className="w-3 h-3 animate-spin" />
|
||
) : (
|
||
<Brain className="w-3 h-3" />
|
||
)}
|
||
AI分类
|
||
</button>
|
||
)}
|
||
|
||
{/* 重置使用状态按钮 - 仅在有使用记录时显示 */}
|
||
{materialUsageStats && materialUsageStats.used_segments > 0 && (
|
||
<button
|
||
onClick={handleResetUsage}
|
||
disabled={isResettingUsage}
|
||
className="text-xs px-2 py-1 bg-orange-50 text-orange-600 rounded hover:bg-orange-100 disabled:opacity-50 flex items-center gap-1"
|
||
title="重置使用状态"
|
||
>
|
||
{isResettingUsage ? (
|
||
<Loader2 className="w-3 h-3 animate-spin" />
|
||
) : (
|
||
<RefreshCw className="w-3 h-3" />
|
||
)}
|
||
重置使用
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* 展开/折叠详细信息按钮 */}
|
||
<button
|
||
onClick={() => setShowDetails(!showDetails)}
|
||
className="text-gray-400 hover:text-gray-600 transition-colors text-xs flex items-center gap-1"
|
||
>
|
||
{showDetails ? (
|
||
<>
|
||
<span>收起</span>
|
||
<ChevronUp className="w-3 h-3" />
|
||
</>
|
||
) : (
|
||
<>
|
||
<span>详情</span>
|
||
<ChevronDown className="w-3 h-3" />
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
{/* 素材详细信息 - 可折叠 */}
|
||
{showDetails && (
|
||
<div className="space-y-3 pt-3 border-t border-gray-100">
|
||
{/* 关联模特信息 */}
|
||
{material.model_id && (
|
||
<div className="bg-purple-50 rounded-lg p-3">
|
||
<div className="flex items-center space-x-2">
|
||
<User className="w-4 h-4 text-purple-600" />
|
||
<span className="text-sm font-medium text-purple-700">关联模特</span>
|
||
</div>
|
||
{loadingModel ? (
|
||
<div className="flex items-center space-x-2 mt-2">
|
||
<Loader2 className="w-3 h-3 animate-spin text-purple-600" />
|
||
<span className="text-xs text-purple-600">加载中...</span>
|
||
</div>
|
||
) : associatedModel ? (
|
||
<div className="mt-2 space-y-1">
|
||
<p className="text-sm font-medium text-gray-900">{associatedModel.name}</p>
|
||
{associatedModel.stage_name && (
|
||
<p className="text-xs text-gray-600">艺名: {associatedModel.stage_name}</p>
|
||
)}
|
||
{associatedModel.description && (
|
||
<p className="text-xs text-gray-600">{associatedModel.description}</p>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<p className="text-xs text-red-600 mt-2">模特信息加载失败</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 元数据信息 */}
|
||
{material.metadata !== 'None' && (
|
||
<div className="space-y-2">
|
||
{/* 视频元数据 */}
|
||
{material.metadata && typeof material.metadata === 'object' && 'Video' in material.metadata && (
|
||
<div className="bg-blue-50 rounded-lg p-3 space-y-2">
|
||
<div className="flex items-center space-x-1 text-blue-700 font-medium text-sm">
|
||
<FileVideo className="w-4 h-4" />
|
||
<span>视频信息</span>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
|
||
<div className="flex items-center space-x-1">
|
||
<Clock className="w-3 h-3" />
|
||
<span>{formatTime(material.metadata.Video.duration)}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Monitor className="w-3 h-3" />
|
||
<span>{formatResolution(material.metadata.Video.width, material.metadata.Video.height)}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Zap className="w-3 h-3" />
|
||
<span>{formatBitrate(material.metadata.Video.bitrate)}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Film className="w-3 h-3" />
|
||
<span>{material.metadata.Video.fps} fps</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Hash className="w-3 h-3" />
|
||
<span>{material.metadata.Video.codec}</span>
|
||
</div>
|
||
{material.metadata.Video.has_audio && (
|
||
<div className="flex items-center space-x-1">
|
||
<Volume2 className="w-3 h-3" />
|
||
<span>{material.metadata.Video.audio_codec || 'Audio'}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 音频元数据 */}
|
||
{material.metadata && typeof material.metadata === 'object' && 'Audio' in material.metadata && (
|
||
<div className="bg-green-50 rounded-lg p-3 space-y-2">
|
||
<div className="flex items-center space-x-1 text-green-700 font-medium text-sm">
|
||
<FileAudio className="w-4 h-4" />
|
||
<span>音频信息</span>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
|
||
<div className="flex items-center space-x-1">
|
||
<Clock className="w-3 h-3" />
|
||
<span>{formatTime(material.metadata.Audio.duration)}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Zap className="w-3 h-3" />
|
||
<span>{formatBitrate(material.metadata.Audio.bitrate)}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Volume2 className="w-3 h-3" />
|
||
<span>{material.metadata.Audio.sample_rate} Hz</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Hash className="w-3 h-3" />
|
||
<span>{material.metadata.Audio.codec}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 图片元数据 */}
|
||
{material.metadata && typeof material.metadata === 'object' && 'Image' in material.metadata && (
|
||
<div className="bg-purple-50 rounded-lg p-3 space-y-2">
|
||
<div className="flex items-center space-x-1 text-purple-700 font-medium text-sm">
|
||
<FileImage className="w-4 h-4" />
|
||
<span>图片信息</span>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
|
||
<div className="flex items-center space-x-1">
|
||
<Monitor className="w-3 h-3" />
|
||
<span>{formatResolution(material.metadata.Image.width, material.metadata.Image.height)}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1">
|
||
<Palette className="w-3 h-3" />
|
||
<span>{material.metadata.Image.format}</span>
|
||
</div>
|
||
{material.metadata.Image.dpi && (
|
||
<div className="flex items-center space-x-1">
|
||
<Eye className="w-3 h-3" />
|
||
<span>{material.metadata.Image.dpi} DPI</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 处理统计信息 */}
|
||
{(material.scene_detection || material.segments.length > 0) && (
|
||
<div className="bg-gray-50 rounded-lg p-3 space-y-2">
|
||
<div className="flex items-center space-x-1 text-gray-700 font-medium text-sm">
|
||
<Film className="w-4 h-4" />
|
||
<span>处理统计</span>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2 text-xs text-gray-600">
|
||
{material.scene_detection && (
|
||
<div className="flex items-center space-x-1">
|
||
<Eye className="w-3 h-3" />
|
||
<span>{material.scene_detection.total_scenes} 个场景</span>
|
||
</div>
|
||
)}
|
||
{material.segments.length > 0 && (
|
||
<div className="flex items-center space-x-1">
|
||
<Hash className="w-3 h-3" />
|
||
<span>{material.segments.length} 个片段</span>
|
||
</div>
|
||
)}
|
||
{material.processed_at && (
|
||
<div className="flex items-center space-x-1">
|
||
<Calendar className="w-3 h-3" />
|
||
<span>已处理</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 切分片段控制 */}
|
||
{material.material_type === 'Video' && material.processing_status === 'Completed' && (
|
||
<div className="mt-3 pt-3 border-t border-gray-100">
|
||
<div className="flex items-center justify-between">
|
||
<button
|
||
onClick={loadSegments}
|
||
disabled={loadingSegments}
|
||
className="flex items-center space-x-2 text-sm text-blue-600 hover:text-blue-800 disabled:opacity-50"
|
||
>
|
||
{loadingSegments ? (
|
||
<div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
|
||
) : showSegments ? (
|
||
<ChevronUp className="w-4 h-4" />
|
||
) : (
|
||
<ChevronDown className="w-4 h-4" />
|
||
)}
|
||
<span>{loadingSegments ? '加载中...' : showSegments ? '隐藏片段' : '查看切分片段'}</span>
|
||
</button>
|
||
|
||
|
||
</div>
|
||
|
||
{/* 切分片段列表 */}
|
||
{showSegments && segments.length > 0 && (
|
||
<div className="mt-3">
|
||
<div className="text-xs text-gray-500 mb-2">
|
||
共 {segments.length} 个片段，总时长 {formatTime(segments.reduce((total, seg) => total + seg.duration, 0))}
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-1 max-h-32 overflow-y-auto">
|
||
{segments.map((segment) => (
|
||
<div key={segment.id} className="flex items-center justify-between p-1.5 bg-gray-50 rounded text-xs">
|
||
<div className="flex items-center space-x-1">
|
||
<span className="font-medium">#{segment.segment_index + 1}</span>
|
||
<span className="text-gray-500">{formatTime(segment.duration)}</span>
|
||
</div>
|
||
<button
|
||
onClick={() => openFileLocation(segment.file_path)}
|
||
className="text-blue-600 hover:text-blue-800"
|
||
title="打开文件位置"
|
||
>
|
||
<ExternalLink className="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showSegments && segments.length === 0 && (
|
||
<div className="mt-3 text-sm text-gray-500">
|
||
暂无切分片段
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 删除确认对话框 */}
|
||
<DeleteConfirmDialog
|
||
isOpen={showDeleteConfirm}
|
||
title="删除素材"
|
||
message="确定要删除这个素材吗？此操作不可撤销。"
|
||
itemName={material.name}
|
||
deleting={isDeleting}
|
||
onConfirm={handleDeleteConfirm}
|
||
onCancel={handleDeleteCancel}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|