fix: template
This commit is contained in:
parent
326c0178b8
commit
8908f0c9c1
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue