fix: template

This commit is contained in:
root 2025-07-12 23:57:04 +08:00
parent 326c0178b8
commit 8908f0c9c1
1 changed files with 33 additions and 30 deletions

View File

@ -1,11 +1,11 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom' import { useParams, useNavigate } from 'react-router-dom'
import { import {
ArrowLeft, ArrowLeft,
RotateCcw, RotateCcw,
Trash2, Trash2,
ZoomIn, ZoomIn,
ZoomOut, ZoomOut,
Download, Download,
Share2, Share2,
Edit3, Edit3,
@ -25,7 +25,7 @@ import { useTemplateOperationV2 } from '../hooks/useTemplateProgressV2'
const TemplateDetailPageV2: React.FC = () => { const TemplateDetailPageV2: React.FC = () => {
const { templateId } = useParams<{ templateId: string }>() const { templateId } = useParams<{ templateId: string }>()
const navigate = useNavigate() const navigate = useNavigate()
const [template, setTemplate] = useState<TemplateInfo | null>(null) const [template, setTemplate] = useState<TemplateInfo | null>(null)
const [templateDetail, setTemplateDetail] = useState<TemplateDetail | null>(null) const [templateDetail, setTemplateDetail] = useState<TemplateDetail | null>(null)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
@ -44,16 +44,16 @@ const TemplateDetailPageV2: React.FC = () => {
const loadTemplateDetail = async () => { const loadTemplateDetail = async () => {
if (!templateId) return if (!templateId) return
try { try {
setLoading(true) setLoading(true)
// 并行加载基本信息和详细信息 // 并行加载基本信息和详细信息
const [templateInfo, detail] = await Promise.all([ const [templateInfo, detail] = await Promise.all([
TemplateServiceV2.getTemplate(templateId), TemplateServiceV2.getTemplate(templateId),
TemplateServiceV2.getTemplateDetail(templateId) TemplateServiceV2.getTemplateDetail(templateId)
]) ])
setTemplate(templateInfo) setTemplate(templateInfo)
setTemplateDetail(detail) setTemplateDetail(detail)
} catch (error) { } catch (error) {
@ -82,7 +82,7 @@ const TemplateDetailPageV2: React.FC = () => {
if (!template || !confirm('确定要删除这个模板吗?此操作不可撤销。')) return if (!template || !confirm('确定要删除这个模板吗?此操作不可撤销。')) return
const success = await executeDelete(() => TemplateServiceV2.deleteTemplate(template.id)) const success = await executeDelete(() => TemplateServiceV2.deleteTemplate(template.id))
if (success) { if (success) {
navigate('/templates-v2') navigate('/templates-v2')
} else if (deleteError) { } else if (deleteError) {
@ -136,8 +136,8 @@ const TemplateDetailPageV2: React.FC = () => {
) )
} }
const totalDuration = templateDetail ? const totalDuration = templateDetail ?
(templateDetail.duration > 1000000 ? templateDetail.duration / 1000000 : templateDetail.duration) : (templateDetail.duration > 1000000 ? templateDetail.duration / 1000000 : templateDetail.duration) :
template.duration template.duration
const isCloudTemplate = TemplateServiceV2.isCloudTemplate(template) const isCloudTemplate = TemplateServiceV2.isCloudTemplate(template)
@ -399,23 +399,26 @@ const TemplateDetailPageV2: React.FC = () => {
<div className="bg-white rounded-lg shadow-sm p-6"> <div className="bg-white rounded-lg shadow-sm p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-4"></h2> <h2 className="text-lg font-semibold text-gray-900 mb-4"></h2>
<div className="space-y-4"> <div className="space-y-4">
{templateDetail.tracks.map((track) => ( {templateDetail.tracks.map((track) => {
<TrackTimeline console.log(track)
key={track.id} return (
track={track} <TrackTimeline
totalDuration={totalDuration} key={track.id}
currentTime={currentTime} track={track}
onSegmentClick={(segment) => { totalDuration={totalDuration}
// 跳转到片段开始时间 currentTime={currentTime}
setCurrentTime(segment.start_time) onSegmentClick={(segment) => {
}} // 跳转到片段开始时间
onSegmentHover={(segment) => { setCurrentTime(segment.start_time)
// 可以在工具提示中显示片段详情 }}
console.log('Hovering segment:', segment?.name) onSegmentHover={(segment) => {
}} // 可以在工具提示中显示片段详情
onSegmentNameChange={handleSegmentNameChange} console.log('Hovering segment:', segment?.name)
/> }}
))} onSegmentNameChange={handleSegmentNameChange}
/>
)
})}
</div> </div>
</div> </div>
</> </>