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是否为视频
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]);
// 检测input是否为视频
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]);
const handleClick = () => {
@ -86,10 +86,10 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
{isOutputVideo ? (
// 当output是视频时只显示单个视频
<View className="single-video-container">
<Image className="video-poster" src={template.inputExampleUrl} mode="aspectFill" />
<Image className="video-poster" src={template.inputExampleUrl || ``} mode="aspectFill" />
<Video
className="single-video"
src={template.outputExampleUrl}
src={template.outputExampleUrl || ``}
autoplay
muted
loop
@ -116,7 +116,7 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
{isInputVideo ? (
<Video
className="full-video"
src={template.inputExampleUrl}
src={template.inputExampleUrl || ``}
autoplay
muted
loop
@ -127,7 +127,7 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
controls={false}
/>
) : (
<Image className="full-image" src={template.inputExampleUrl} mode="aspectFill" lazyLoad />
<Image className="full-image" src={template.inputExampleUrl || ``} mode="aspectFill" lazyLoad />
)}
</View>
@ -138,7 +138,7 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
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 File

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

View File

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