fix: 修复模板卡片和页面的类型安全问题
- 修复TemplateCard组件中url字段的可选类型处理 - 修复home页面中模板类型字段名称错误(templateType -> code) - 修复result页面中任务状态判断逻辑(processing -> running) - 增强代码类型安全,避免运行时错误
This commit is contained in:
parent
595e56378c
commit
4bf5935b06
|
|
@ -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>
|
||||||
|
|
||||||
{/* 可拖拽的分割线 */}
|
{/* 可拖拽的分割线 */}
|
||||||
|
|
|
||||||
|
|
@ -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: () => {
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue