95 lines
2.4 KiB
TypeScript
95 lines
2.4 KiB
TypeScript
import { View } from '@tarojs/components'
|
||
import { useState } from 'react'
|
||
import { navigateTo } from '@tarojs/taro'
|
||
import './index.css'
|
||
import { useSdk, useUploadVideo } from '../../hooks/index'
|
||
import UploadButton from '../../components/UploadButton'
|
||
import LoadingOverlay from '../../components/LoadingOverlay'
|
||
import ErrorOverlay from '../../components/ErrorOverlay'
|
||
import { createPlatformFactory } from '../../platforms'
|
||
|
||
type PageStep = 'upload' | 'loading' | 'error'
|
||
|
||
interface AppState {
|
||
step: PageStep;
|
||
error: string | null;
|
||
}
|
||
|
||
export default function Index() {
|
||
const sdk = useSdk()
|
||
const [state, setState] = useState<AppState>({
|
||
step: 'upload',
|
||
error: null
|
||
})
|
||
|
||
const [videoPath, setVidePath] = useState<string>()
|
||
|
||
useUploadVideo((res) => {
|
||
console.log(res)
|
||
return {
|
||
videoPath: videoPath,
|
||
titleConfig: {
|
||
title: `视频发布`
|
||
},
|
||
success() {
|
||
console.log("视频发布/挂载成功");
|
||
},
|
||
fail() {
|
||
console.log("视频发布/挂载失败");
|
||
},
|
||
}
|
||
})
|
||
|
||
const chooseAndGenerateImage = async () => {
|
||
try {
|
||
// 选择图片，选择完成后会自动触发loading状态
|
||
const task_id = await sdk.chooseAndGenerateImage({
|
||
onImageSelected: () => {
|
||
// 选择图片完成后立即显示loading
|
||
setState({ step: 'loading', error: null })
|
||
}
|
||
})
|
||
|
||
// 等待生成完成
|
||
await new Promise((resolve) => setTimeout(resolve, 5000))
|
||
const urls = await sdk.getTaskStatus(task_id)
|
||
|
||
// 跳转到结果页面
|
||
navigateTo({
|
||
url: `/pages/result/index?images=${encodeURIComponent(JSON.stringify(urls))}`
|
||
})
|
||
|
||
// 重置状态
|
||
setState({ step: 'upload', error: null })
|
||
} catch (error) {
|
||
const errorMsg = error instanceof Error ? error.message : '生成失败'
|
||
setState({ step: 'error', error: errorMsg })
|
||
}
|
||
}
|
||
|
||
|
||
|
||
const resetToUpload = () => {
|
||
setState({ step: 'upload', error: null })
|
||
}
|
||
|
||
const renderCurrentStep = () => {
|
||
switch (state.step) {
|
||
case 'upload':
|
||
return <UploadButton onUpload={chooseAndGenerateImage} />
|
||
case 'loading':
|
||
return <LoadingOverlay />
|
||
case 'error':
|
||
return <ErrorOverlay onRetry={resetToUpload} />
|
||
default:
|
||
return <UploadButton onUpload={chooseAndGenerateImage} />
|
||
}
|
||
}
|
||
|
||
return (
|
||
<View className='index'>
|
||
{renderCurrentStep()}
|
||
</View>
|
||
)
|
||
}
|