cef1c697a5
- 创建新的pages/result页面用于图片预览 - 修改index页面改用页面跳转替换组件调用 - 通过URL参数传递图片数据 - 在app.config.ts中注册新页面路由 - 删除ImageResultViewer组件，功能迁移至result页面 - 优化页面状态管理，简化index页面逻辑
74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import { View } from '@tarojs/components'
|
||
import { useState } from 'react'
|
||
import { navigateTo } from '@tarojs/taro'
|
||
import './index.css'
|
||
import { useSdk } from '../../hooks/index'
|
||
import UploadButton from '../../components/UploadButton'
|
||
import LoadingOverlay from '../../components/LoadingOverlay'
|
||
import ErrorOverlay from '../../components/ErrorOverlay'
|
||
|
||
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 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>
|
||
)
|
||
}
|