710 lines
30 KiB
TypeScript
710 lines
30 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
||
import { Upload, FolderOpen, Trash2, Eye, Download, Search, Filter, Grid, List } from 'lucide-react'
|
||
import { invoke } from '@tauri-apps/api/core'
|
||
import { TemplateService } from '../services/tauri'
|
||
import { useTemplateProgress } from '../hooks/useProgressCommand'
|
||
|
||
interface TemplateInfo {
|
||
id: string
|
||
name: string
|
||
description: string
|
||
thumbnail_path: string
|
||
draft_content_path: string
|
||
resources_path: string
|
||
created_at: string
|
||
updated_at: string
|
||
canvas_config: any
|
||
duration: number
|
||
material_count: number
|
||
track_count: number
|
||
tags: string[]
|
||
}
|
||
|
||
// 轨道和片段的数据结构
|
||
interface TrackSegment {
|
||
id: string
|
||
type: 'video' | 'audio' | 'image' | 'text' | 'effect'
|
||
name: string
|
||
start_time: number
|
||
end_time: number
|
||
duration: number
|
||
resource_path?: string
|
||
properties?: any
|
||
effects?: any[]
|
||
}
|
||
|
||
interface Track {
|
||
id: string
|
||
name: string
|
||
type: 'video' | 'audio' | 'subtitle'
|
||
index: number
|
||
segments: TrackSegment[]
|
||
properties?: any
|
||
}
|
||
|
||
interface TemplateDetail {
|
||
id: string
|
||
name: string
|
||
description: string
|
||
canvas_config: any
|
||
tracks: Track[]
|
||
duration: number
|
||
fps: number
|
||
sample_rate?: number
|
||
}
|
||
|
||
// Import the progress interface from the hook
|
||
import type { ProgressState } from '../hooks/useProgressCommand'
|
||
|
||
interface ImportResult {
|
||
status: boolean
|
||
msg: string
|
||
imported_count: number
|
||
failed_count: number
|
||
imported_templates: TemplateInfo[]
|
||
failed_templates: Array<{
|
||
name: string
|
||
error: string
|
||
}>
|
||
}
|
||
|
||
const TemplateManagePage: React.FC = () => {
|
||
const [templates, setTemplates] = useState<TemplateInfo[]>([])
|
||
const [loading, setLoading] = useState(false)
|
||
const [searchTerm, setSearchTerm] = useState('')
|
||
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
|
||
const [selectedTemplate, setSelectedTemplate] = useState<TemplateInfo | null>(null)
|
||
const [templateDetail, setTemplateDetail] = useState<TemplateDetail | null>(null)
|
||
const [loadingDetail, setLoadingDetail] = useState(false)
|
||
const [showImportModal, setShowImportModal] = useState(false)
|
||
|
||
// Use the progress hook for template operations
|
||
const {
|
||
isExecuting: importing,
|
||
progress: importProgress,
|
||
result: importResult,
|
||
logs: importLogs,
|
||
batchImport,
|
||
reset: resetImport
|
||
} = useTemplateProgress({
|
||
onSuccess: async (result) => {
|
||
if (result.status && result.imported_count > 0) {
|
||
await loadTemplates() // Reload templates after successful import
|
||
}
|
||
}
|
||
})
|
||
|
||
// Load templates on component mount
|
||
useEffect(() => {
|
||
loadTemplates()
|
||
}, [])
|
||
|
||
const loadTemplates = async () => {
|
||
try {
|
||
setLoading(true)
|
||
const result = await TemplateService.getTemplates()
|
||
if (result.status) {
|
||
setTemplates(result.templates || [])
|
||
} else {
|
||
console.error('Failed to load templates:', result.msg)
|
||
setTemplates([])
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading templates:', error)
|
||
setTemplates([])
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
// 加载模板详情（包含轨道和片段信息）
|
||
const loadTemplateDetail = async (template: TemplateInfo) => {
|
||
try {
|
||
setLoadingDetail(true)
|
||
setSelectedTemplate(template)
|
||
|
||
// 调用后端API获取模板详情
|
||
const detail = await TemplateService.getTemplateDetail(template.id)
|
||
setTemplateDetail(detail)
|
||
} catch (error) {
|
||
console.error('Failed to load template detail:', error)
|
||
// 如果加载详情失败，至少显示基本信息
|
||
setTemplateDetail(null)
|
||
} finally {
|
||
setLoadingDetail(false)
|
||
}
|
||
}
|
||
|
||
const handleBatchImport = async () => {
|
||
try {
|
||
// Select folder using Tauri dialog
|
||
const folderResult = await invoke<string>('select_folder')
|
||
if (!folderResult) return
|
||
|
||
// Show import modal and start import
|
||
setShowImportModal(true)
|
||
await batchImport(folderResult)
|
||
} catch (error) {
|
||
console.error('Import failed:', error)
|
||
}
|
||
}
|
||
|
||
const handleDeleteTemplate = async (templateId: string) => {
|
||
if (!confirm('确定要删除这个模板吗？此操作不可撤销。')) return
|
||
|
||
try {
|
||
const result = await TemplateService.deleteTemplate(templateId)
|
||
if (result.status) {
|
||
setTemplates(templates.filter(t => t.id !== templateId))
|
||
if (selectedTemplate?.id === templateId) {
|
||
setSelectedTemplate(null)
|
||
}
|
||
} else {
|
||
alert('删除失败: ' + result.msg)
|
||
}
|
||
} catch (error) {
|
||
console.error('Delete failed:', error)
|
||
alert('删除失败: ' + (error instanceof Error ? error.message : 'Unknown error'))
|
||
}
|
||
}
|
||
|
||
const filteredTemplates = templates.filter(template =>
|
||
template.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
template.description.toLowerCase().includes(searchTerm.toLowerCase())
|
||
)
|
||
|
||
const formatDuration = (duration: number) => {
|
||
const seconds = Math.floor(duration / 1000000)
|
||
const minutes = Math.floor(seconds / 60)
|
||
const remainingSeconds = seconds % 60
|
||
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
|
||
}
|
||
|
||
// Helper function to format time (for segments, in seconds)
|
||
const formatTime = (seconds: number): string => {
|
||
const minutes = Math.floor(seconds / 60)
|
||
const secs = (seconds % 60).toFixed(2)
|
||
return `${minutes}:${secs.padStart(5, '0')}`
|
||
}
|
||
|
||
const formatDate = (dateString: string) => {
|
||
return new Date(dateString).toLocaleDateString('zh-CN')
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 p-6">
|
||
<div className="max-w-7xl mx-auto">
|
||
{/* Header */}
|
||
<div className="mb-8">
|
||
<h1 className="text-3xl font-bold text-gray-900 mb-2">模板管理</h1>
|
||
<p className="text-gray-600">管理和导入视频编辑模板</p>
|
||
</div>
|
||
|
||
{/* Actions Bar */}
|
||
<div className="bg-white rounded-lg shadow-sm p-4 mb-6">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-4">
|
||
<button
|
||
onClick={handleBatchImport}
|
||
disabled={importing}
|
||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
{importing ? (
|
||
<>
|
||
<div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
|
||
导入中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Upload size={16} />
|
||
批量导入模板
|
||
</>
|
||
)}
|
||
</button>
|
||
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={16} />
|
||
<input
|
||
type="text"
|
||
placeholder="搜索模板..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<button
|
||
onClick={() => setViewMode('grid')}
|
||
className={`p-2 rounded ${viewMode === 'grid' ? 'bg-blue-100 text-blue-600' : 'text-gray-400 hover:text-gray-600'}`}
|
||
>
|
||
<Grid size={16} />
|
||
</button>
|
||
<button
|
||
onClick={() => setViewMode('list')}
|
||
className={`p-2 rounded ${viewMode === 'list' ? 'bg-blue-100 text-blue-600' : 'text-gray-400 hover:text-gray-600'}`}
|
||
>
|
||
<List size={16} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Import Result */}
|
||
{importResult && (
|
||
<div className={`mb-6 p-4 rounded-lg ${importResult.status ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}`}>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h3 className={`font-medium ${importResult.status ? 'text-green-800' : 'text-red-800'}`}>
|
||
导入结果
|
||
</h3>
|
||
<p className={`text-sm ${importResult.status ? 'text-green-600' : 'text-red-600'}`}>
|
||
{importResult.msg}
|
||
</p>
|
||
{importResult.imported_count > 0 && (
|
||
<p className="text-sm text-green-600 mt-1">
|
||
成功导入 {importResult.imported_count} 个模板
|
||
</p>
|
||
)}
|
||
{importResult.failed_count > 0 && (
|
||
<details className="mt-2">
|
||
<summary className="text-sm text-red-600 cursor-pointer">
|
||
{importResult.failed_count} 个模板导入失败 (点击查看详情)
|
||
</summary>
|
||
<div className="mt-2 space-y-1">
|
||
{importResult.failed_templates.map((failed: any, index: number) => (
|
||
<div key={index} className="text-xs text-red-500">
|
||
{failed.name}: {failed.error}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</details>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={() => setImportResult(null)}
|
||
className="text-gray-400 hover:text-gray-600"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Templates Grid/List */}
|
||
{loading ? (
|
||
<div className="flex items-center justify-center py-12">
|
||
<div className="animate-spin rounded-full h-8 w-8 border-2 border-blue-600 border-t-transparent"></div>
|
||
<span className="ml-2 text-gray-600">加载中...</span>
|
||
</div>
|
||
) : filteredTemplates.length === 0 ? (
|
||
<div className="text-center py-12">
|
||
<FolderOpen className="mx-auto h-12 w-12 text-gray-400 mb-4" />
|
||
<h3 className="text-lg font-medium text-gray-900 mb-2">暂无模板</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
{searchTerm ? '没有找到匹配的模板' : '点击上方按钮开始导入模板'}
|
||
</p>
|
||
{!searchTerm && (
|
||
<button
|
||
onClick={handleBatchImport}
|
||
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||
>
|
||
<Upload size={16} />
|
||
导入模板
|
||
</button>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className={viewMode === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6' : 'space-y-4'}>
|
||
{filteredTemplates.map((template) => (
|
||
<div
|
||
key={template.id}
|
||
className={`bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow ${
|
||
viewMode === 'list' ? 'flex items-center p-4' : 'overflow-hidden'
|
||
}`}
|
||
>
|
||
{viewMode === 'grid' ? (
|
||
<>
|
||
{/* Thumbnail */}
|
||
<div className="h-32 bg-gray-100 flex items-center justify-center">
|
||
{template.thumbnail_path ? (
|
||
<img
|
||
src={template.thumbnail_path}
|
||
alt={template.name}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
) : (
|
||
<div className="text-gray-400">
|
||
<Grid size={32} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="p-4">
|
||
<h3 className="font-medium text-gray-900 mb-1 truncate" title={template.name}>
|
||
{template.name}
|
||
</h3>
|
||
<p className="text-sm text-gray-600 mb-2 line-clamp-2">
|
||
{template.description}
|
||
</p>
|
||
|
||
<div className="text-xs text-gray-500 space-y-1">
|
||
<div>时长: {formatDuration(template.duration)}</div>
|
||
<div>素材: {template.material_count} 个</div>
|
||
<div>轨道: {template.track_count} 个</div>
|
||
<div>创建: {formatDate(template.created_at)}</div>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
|
||
<button
|
||
onClick={() => loadTemplateDetail(template)}
|
||
className="flex items-center gap-1 text-blue-600 hover:text-blue-700 text-sm"
|
||
>
|
||
<Eye size={14} />
|
||
预览
|
||
</button>
|
||
<button
|
||
onClick={() => handleDeleteTemplate(template.id)}
|
||
className="flex items-center gap-1 text-red-600 hover:text-red-700 text-sm"
|
||
>
|
||
<Trash2 size={14} />
|
||
删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
{/* List View */}
|
||
<div className="flex-1">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h3 className="font-medium text-gray-900">{template.name}</h3>
|
||
<p className="text-sm text-gray-600">{template.description}</p>
|
||
</div>
|
||
<div className="flex items-center space-x-4 text-sm text-gray-500">
|
||
<span>{formatDuration(template.duration)}</span>
|
||
<span>{template.material_count} 素材</span>
|
||
<span>{template.track_count} 轨道</span>
|
||
<span>{formatDate(template.created_at)}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<button
|
||
onClick={() => loadTemplateDetail(template)}
|
||
className="p-2 text-blue-600 hover:text-blue-700"
|
||
>
|
||
<Eye size={16} />
|
||
</button>
|
||
<button
|
||
onClick={() => handleDeleteTemplate(template.id)}
|
||
className="p-2 text-red-600 hover:text-red-700"
|
||
>
|
||
<Trash2 size={16} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Import Progress Modal */}
|
||
{showImportModal && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||
<div className="bg-white rounded-lg max-w-4xl w-full max-h-[80vh] overflow-hidden">
|
||
<div className="p-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-xl font-bold text-gray-900">模板导入进度</h2>
|
||
{!importing && (
|
||
<button
|
||
onClick={() => setShowImportModal(false)}
|
||
className="text-gray-400 hover:text-gray-600"
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Progress Bar */}
|
||
{importProgress && (
|
||
<div className="mb-6">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="text-sm font-medium text-gray-700">{importProgress.step}</span>
|
||
<span className="text-sm text-gray-500">
|
||
{importProgress.progress >= 0 ? `${Math.round(importProgress.progress)}%` : '处理中...'}
|
||
</span>
|
||
</div>
|
||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||
<div
|
||
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
||
style={{
|
||
width: importProgress.progress >= 0 ? `${importProgress.progress}%` : '50%'
|
||
}}
|
||
></div>
|
||
</div>
|
||
<p className="text-sm text-gray-600 mt-2">{importProgress.message}</p>
|
||
{importProgress.details?.processed_templates !== undefined && importProgress.details?.total_templates !== undefined && (
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
已处理: {importProgress.details.processed_templates} / {importProgress.details.total_templates}
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Real-time Logs */}
|
||
<div className="mb-6">
|
||
<h3 className="text-sm font-medium text-gray-700 mb-2">实时日志</h3>
|
||
<div className="bg-gray-50 rounded-lg p-4 h-64 overflow-y-auto">
|
||
<div className="space-y-1">
|
||
{importLogs.map((log, index) => (
|
||
<div key={index} className="text-xs text-gray-600 font-mono">
|
||
{log}
|
||
</div>
|
||
))}
|
||
{importLogs.length === 0 && (
|
||
<div className="text-xs text-gray-400 italic">等待日志输出...</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Import Result */}
|
||
{importResult && (
|
||
<div className={`p-4 rounded-lg ${importResult.status ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}`}>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h3 className={`font-medium ${importResult.status ? 'text-green-800' : 'text-red-800'}`}>
|
||
导入完成
|
||
</h3>
|
||
<p className={`text-sm ${importResult.status ? 'text-green-600' : 'text-red-600'}`}>
|
||
{importResult.msg}
|
||
</p>
|
||
{importResult.imported_count > 0 && (
|
||
<p className="text-sm text-green-600 mt-1">
|
||
成功导入 {importResult.imported_count} 个模板
|
||
</p>
|
||
)}
|
||
{importResult.failed_count > 0 && (
|
||
<details className="mt-2">
|
||
<summary className="text-sm text-red-600 cursor-pointer">
|
||
{importResult.failed_count} 个模板导入失败 (点击查看详情)
|
||
</summary>
|
||
<div className="mt-2 space-y-1">
|
||
{importResult.failed_templates.map((failed: any, index: number) => (
|
||
<div key={index} className="text-xs text-red-500">
|
||
{failed.name}: {failed.error}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</details>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Action Buttons */}
|
||
<div className="flex justify-end space-x-3 pt-4 border-t border-gray-200 mt-6">
|
||
{importing ? (
|
||
<div className="flex items-center text-blue-600">
|
||
<div className="animate-spin rounded-full h-4 w-4 border-2 border-blue-600 border-t-transparent mr-2"></div>
|
||
导入中...
|
||
</div>
|
||
) : (
|
||
<button
|
||
onClick={() => setShowImportModal(false)}
|
||
className="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
|
||
>
|
||
关闭
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Template Detail Modal */}
|
||
{selectedTemplate && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||
<div className="bg-white rounded-lg max-w-2xl w-full max-h-[80vh] overflow-y-auto">
|
||
<div className="p-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-xl font-bold text-gray-900">模板详情</h2>
|
||
<button
|
||
onClick={() => {
|
||
setSelectedTemplate(null)
|
||
setTemplateDetail(null)
|
||
}}
|
||
className="text-gray-400 hover:text-gray-600"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">名称</label>
|
||
<p className="text-gray-900">{selectedTemplate.name}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">描述</label>
|
||
<p className="text-gray-900">{selectedTemplate.description}</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">时长</label>
|
||
<p className="text-gray-900">{formatDuration(selectedTemplate.duration)}</p>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">素材数量</label>
|
||
<p className="text-gray-900">{selectedTemplate.material_count}</p>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">轨道数量</label>
|
||
<p className="text-gray-900">{selectedTemplate.track_count}</p>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">画布尺寸</label>
|
||
<p className="text-gray-900">
|
||
{selectedTemplate.canvas_config?.width || 0} × {selectedTemplate.canvas_config?.height || 0}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">创建时间</label>
|
||
<p className="text-gray-900">{new Date(selectedTemplate.created_at).toLocaleString('zh-CN')}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">更新时间</label>
|
||
<p className="text-gray-900">{new Date(selectedTemplate.updated_at).toLocaleString('zh-CN')}</p>
|
||
</div>
|
||
|
||
{/* 轨道和片段信息 */}
|
||
<div className="border-t border-gray-200 pt-4">
|
||
<label className="block text-sm font-medium text-gray-700 mb-3">轨道和片段信息</label>
|
||
|
||
{loadingDetail ? (
|
||
<div className="flex items-center justify-center py-8">
|
||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||
<span className="ml-2 text-gray-600">加载详情中...</span>
|
||
</div>
|
||
) : templateDetail ? (
|
||
<div className="space-y-4">
|
||
{/* 画布信息 */}
|
||
<div className="bg-gray-50 rounded-lg p-3">
|
||
<h4 className="font-medium text-gray-900 mb-2">画布配置</h4>
|
||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||
<div>尺寸: {templateDetail.canvas_config?.width || 0} × {templateDetail.canvas_config?.height || 0}</div>
|
||
<div>帧率: {templateDetail.fps || 30} FPS</div>
|
||
<div>时长: {formatDuration(templateDetail.duration)}</div>
|
||
{templateDetail.sample_rate && (
|
||
<div>采样率: {templateDetail.sample_rate} Hz</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 轨道列表 */}
|
||
<div className="space-y-3">
|
||
{templateDetail.tracks.map((track, trackIndex) => (
|
||
<div key={track.id} className="border border-gray-200 rounded-lg p-3">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<h4 className="font-medium text-gray-900">
|
||
轨道 {track.index + 1}: {track.name}
|
||
</h4>
|
||
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
||
track.type === 'video' ? 'bg-blue-100 text-blue-800' :
|
||
track.type === 'audio' ? 'bg-green-100 text-green-800' :
|
||
'bg-purple-100 text-purple-800'
|
||
}`}>
|
||
{track.type === 'video' ? '视频' : track.type === 'audio' ? '音频' : '字幕'}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 片段列表 */}
|
||
<div className="space-y-2">
|
||
{track.segments.length > 0 ? (
|
||
track.segments.map((segment, segmentIndex) => (
|
||
<div key={segment.id} className="bg-gray-50 rounded p-2 text-sm">
|
||
<div className="flex items-center justify-between mb-1">
|
||
<span className="font-medium">{segment.name}</span>
|
||
<span className={`px-1.5 py-0.5 rounded text-xs ${
|
||
segment.type === 'video' ? 'bg-blue-100 text-blue-700' :
|
||
segment.type === 'audio' ? 'bg-green-100 text-green-700' :
|
||
segment.type === 'image' ? 'bg-yellow-100 text-yellow-700' :
|
||
segment.type === 'text' ? 'bg-purple-100 text-purple-700' :
|
||
'bg-gray-100 text-gray-700'
|
||
}`}>
|
||
{segment.type === 'video' ? '视频' :
|
||
segment.type === 'audio' ? '音频' :
|
||
segment.type === 'image' ? '图片' :
|
||
segment.type === 'text' ? '文本' : '特效'}
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-2 text-xs text-gray-600">
|
||
<div>开始: {formatTime(segment.start_time)}</div>
|
||
<div>结束: {formatTime(segment.end_time)}</div>
|
||
<div>时长: {formatTime(segment.duration)}</div>
|
||
</div>
|
||
{segment.resource_path && (
|
||
<div className="text-xs text-gray-500 mt-1 truncate">
|
||
资源: {segment.resource_path}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))
|
||
) : (
|
||
<div className="text-sm text-gray-500 italic">该轨道暂无片段</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-8 text-gray-500">
|
||
<p>无法加载模板详情</p>
|
||
<p className="text-sm">请检查模板文件是否完整</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex justify-end space-x-3 pt-4 border-t border-gray-200">
|
||
<button
|
||
onClick={() => {
|
||
setSelectedTemplate(null)
|
||
setTemplateDetail(null)
|
||
}}
|
||
className="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
|
||
>
|
||
关闭
|
||
</button>
|
||
<button
|
||
onClick={() => handleDeleteTemplate(selectedTemplate.id)}
|
||
className="px-4 py-2 text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
|
||
>
|
||
删除模板
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default TemplateManagePage
|