fix: 修复模板卡片和页面的类型安全问题

- 修复TemplateCard组件中url字段的可选类型处理
- 修复home页面中模板类型字段名称错误(templateType -> code)
- 修复result页面中任务状态判断逻辑(processing -> running)
- 增强代码类型安全,避免运行时错误
This commit is contained in:
imeepos 2025-09-26 23:04:32 +08:00
parent 595e56378c
commit 4bf5935b06
3 changed files with 10 additions and 10 deletions

View File

@ -18,12 +18,12 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
// 检测output是否为视频 // 检测output是否为视频
const isOutputVideo = useMemo(() => { const isOutputVideo = useMemo(() => {
return /\.(mp4|webm|ogg|mov|avi|mkv|flv)$/i.test(template.outputExampleUrl); return /\.(mp4|webm|ogg|mov|avi|mkv|flv)$/i.test(template.outputExampleUrl || '');
}, [template.outputExampleUrl]); }, [template.outputExampleUrl]);
// 检测input是否为视频 // 检测input是否为视频
const isInputVideo = useMemo(() => { const isInputVideo = useMemo(() => {
return /\.(mp4|webm|ogg|mov|avi|mkv|flv)$/i.test(template.inputExampleUrl); return /\.(mp4|webm|ogg|mov|avi|mkv|flv)$/i.test(template.inputExampleUrl || ``);
}, [template.inputExampleUrl]); }, [template.inputExampleUrl]);
const handleClick = () => { const handleClick = () => {
@ -86,10 +86,10 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
{isOutputVideo ? ( {isOutputVideo ? (
// 当output是视频时只显示单个视频 // 当output是视频时只显示单个视频
<View className="single-video-container"> <View className="single-video-container">
<Image className="video-poster" src={template.inputExampleUrl} mode="aspectFill" /> <Image className="video-poster" src={template.inputExampleUrl || ``} mode="aspectFill" />
<Video <Video
className="single-video" className="single-video"
src={template.outputExampleUrl} src={template.outputExampleUrl || ``}
autoplay autoplay
muted muted
loop loop
@ -116,7 +116,7 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
{isInputVideo ? ( {isInputVideo ? (
<Video <Video
className="full-video" className="full-video"
src={template.inputExampleUrl} src={template.inputExampleUrl || ``}
autoplay autoplay
muted muted
loop loop
@ -127,7 +127,7 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
controls={false} controls={false}
/> />
) : ( ) : (
<Image className="full-image" src={template.inputExampleUrl} mode="aspectFill" lazyLoad /> <Image className="full-image" src={template.inputExampleUrl || ``} mode="aspectFill" lazyLoad />
)} )}
</View> </View>
@ -138,7 +138,7 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
clipPath: `polygon(${splitPosition}% 0%, 100% 0%, 100% 100%, ${splitPosition}% 100%)`, clipPath: `polygon(${splitPosition}% 0%, 100% 0%, 100% 100%, ${splitPosition}% 100%)`,
}} }}
> >
<Image className="full-image" src={template.outputExampleUrl} mode="aspectFill" lazyLoad /> <Image className="full-image" src={template.outputExampleUrl || ``} mode="aspectFill" lazyLoad />
</View> </View>
{/* 可拖拽的分割线 */} {/* 可拖拽的分割线 */}

View File

@ -92,7 +92,7 @@ export default function Home() {
const handleTemplateClick = async (template: Template) => { const handleTemplateClick = async (template: Template) => {
try { try {
// 第一步:选择并上传图片 // 第一步:选择并上传图片
const imageCount = template.templateType === '2image-to-video' ? 2 : 1; const imageCount = template.code === '2image-to-video' ? 2 : 1;
const imageUrl = await sdk.chooseAndUploadImage({ const imageUrl = await sdk.chooseAndUploadImage({
count: imageCount, count: imageCount,
onImageSelected: () => { onImageSelected: () => {

View File

@ -30,9 +30,9 @@ const ResultPage: React.FC = () => {
return; return;
} else if (result.status === 'failed') { } else if (result.status === 'failed') {
// 任务失败,停止轮询并设置错误 // 任务失败,停止轮询并设置错误
setError(result.error || result.errorMessage || '任务执行失败'); setError('任务执行失败');
return; return;
} else if (result.status === 'processing' || result.status === 'pending') { } else if (result.status === 'running' || result.status === 'pending') {
// 任务仍在进行中,继续轮询 // 任务仍在进行中,继续轮询
if (attempts < maxAttempts) { if (attempts < maxAttempts) {
timerRef.current = setTimeout(poll, 1000); timerRef.current = setTimeout(poll, 1000);