refactor: 优化用户体验和代码清理
- 简化生成页面流程,成功后直接跳转到结果页 - 优化首页加载状态和错误处理逻辑 - 移除结果页面多余的调试日志 - 提升整体用户体验流畅度
This commit is contained in:
parent
dd97b8b439
commit
be157d0bcb
|
|
@ -1,4 +1,4 @@
|
|||
import { View, Text, Button, Image, Video } from '@tarojs/components'
|
||||
import { View, Text, Button } from '@tarojs/components'
|
||||
import { useEffect, useState } from 'react'
|
||||
import Taro, { switchTab, navigateTo } from '@tarojs/taro'
|
||||
import { useServerSdk } from '../../hooks/index'
|
||||
|
|
@ -44,7 +44,10 @@ export default function Generate() {
|
|||
|
||||
if (result.status === 'completed') {
|
||||
setStatus('success')
|
||||
setResult({ success: true, imageUrl: result.outputUrl, thumbnailUrl: result.thumbnailUrl })
|
||||
navigateTo({
|
||||
url: `/pages/result/index?images=${encodeURIComponent(JSON.stringify([result.outputUrl]))}`
|
||||
})
|
||||
return;
|
||||
} else if (result.status === 'failed') {
|
||||
setStatus('error')
|
||||
setResult({ success: false, error: result.error || '处理失败' })
|
||||
|
|
@ -98,73 +101,6 @@ export default function Generate() {
|
|||
</View>
|
||||
)
|
||||
|
||||
const renderSuccess = () => {
|
||||
const isVideo = result?.imageUrl && (result.imageUrl.includes('.mp4') || result.imageUrl.includes('video'))
|
||||
const mediaUrl = result?.imageUrl
|
||||
|
||||
return (
|
||||
<View className='generate-success'>
|
||||
<View className='success-header'>
|
||||
<View className='success-badge'>
|
||||
<Text className='success-icon'>✨</Text>
|
||||
<Text className='success-title'>处理完成!</Text>
|
||||
</View>
|
||||
<Text className='success-subtitle'>您的作品已经准备好了</Text>
|
||||
</View>
|
||||
|
||||
{mediaUrl && (
|
||||
<View className='result-preview'>
|
||||
<View className='preview-container'>
|
||||
{isVideo ? (
|
||||
<Video
|
||||
className='preview-video'
|
||||
src={mediaUrl}
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
objectFit='cover'
|
||||
showPlayBtn={false}
|
||||
showCenterPlayBtn={false}
|
||||
showFullscreenBtn={false}
|
||||
controls={false}
|
||||
poster={result?.thumbnailUrl}
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
className='preview-image'
|
||||
src={mediaUrl}
|
||||
mode='aspectFit'
|
||||
onClick={() => {
|
||||
navigateTo({
|
||||
url: `/pages/result/index?images=${encodeURIComponent(JSON.stringify([mediaUrl]))}`
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className='success-actions'>
|
||||
<View className='action-buttons'>
|
||||
<Button className='btn-primary' onClick={handleTryAgain}>
|
||||
<Text className='btn-text'>再来一张</Text>
|
||||
</Button>
|
||||
<Button className='btn-secondary' onClick={handleViewHistory}>
|
||||
<Text className='btn-text'>查看记录</Text>
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
{mediaUrl && (
|
||||
<View className='result-tips'>
|
||||
<Text className='tips-text'>点击图片可查看完整效果</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const renderError = () => (
|
||||
<View className='generate-error'>
|
||||
<View className='error-container'>
|
||||
|
|
@ -185,7 +121,6 @@ export default function Generate() {
|
|||
return (
|
||||
<View className='generate'>
|
||||
{status === 'loading' && renderLoading()}
|
||||
{status === 'success' && renderSuccess()}
|
||||
{status === 'error' && renderError()}
|
||||
</View>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -95,14 +95,14 @@ export default function Home() {
|
|||
|
||||
try {
|
||||
// 第一步:选择并上传图片
|
||||
Taro.showLoading({
|
||||
title: getLoadingText('uploading'),
|
||||
mask: true
|
||||
})
|
||||
|
||||
|
||||
const imageUrl = await sdk.chooseAndUploadImage({
|
||||
onImageSelected: () => {
|
||||
console.log('用户选择了图片')
|
||||
Taro.showLoading({
|
||||
title: getLoadingText('uploading'),
|
||||
mask: true,
|
||||
})
|
||||
},
|
||||
onProgress: () => {
|
||||
Taro.showLoading({
|
||||
|
|
@ -111,14 +111,6 @@ export default function Home() {
|
|||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 第二步:图片内容审核
|
||||
setLoadingState('auditing')
|
||||
Taro.showLoading({
|
||||
title: getLoadingText('auditing'),
|
||||
mask: true
|
||||
})
|
||||
|
||||
const auditResult = await new Promise<ImageAuditResult>((resolve, reject) => {
|
||||
submitAuditTask(
|
||||
{
|
||||
|
|
@ -147,26 +139,17 @@ export default function Home() {
|
|||
// 短暂延迟后继续业务处理
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
// 第四步:执行业务逻辑
|
||||
setLoadingState('processing')
|
||||
Taro.showLoading({
|
||||
title: getLoadingText('processing'),
|
||||
mask: true
|
||||
})
|
||||
|
||||
try {
|
||||
const taskId = await serverSdk.executeTemplate({
|
||||
imageUrl,
|
||||
templateCode: template.code
|
||||
})
|
||||
|
||||
// 隐藏loading
|
||||
Taro.hideLoading()
|
||||
|
||||
// 跳转到生成页面
|
||||
navigateTo({
|
||||
url: `/pages/generate/index?taskId=${taskId}&templateCode=${template.code}`
|
||||
})
|
||||
|
||||
} catch (businessError) {
|
||||
// 业务处理失败
|
||||
Taro.hideLoading()
|
||||
|
|
@ -176,40 +159,20 @@ export default function Home() {
|
|||
duration: 2000
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
// 审核不通过
|
||||
Taro.hideLoading()
|
||||
handleAuditFailure(auditResult)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
// 统一错误处理
|
||||
Taro.hideLoading()
|
||||
|
||||
if (typeof loadingState === 'string' && loadingState === 'uploading') {
|
||||
Taro.showToast({
|
||||
title: '图片上传失败,请重试',
|
||||
icon: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
} else if (typeof loadingState === 'string' && loadingState === 'auditing') {
|
||||
Taro.showToast({
|
||||
title: '图片审核失败,请重试',
|
||||
icon: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: error instanceof Error ? error.message : '处理失败',
|
||||
icon: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
|
||||
console.error('模板处理错误:', error)
|
||||
Taro.showToast({
|
||||
title: '图片审核失败,请重试',
|
||||
icon: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
} finally {
|
||||
setLoadingState(false)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -167,7 +167,6 @@ const ResultPage: React.FC = () => {
|
|||
}
|
||||
|
||||
const fileInfo = getFileInfoFromUrl(mediaUrl)
|
||||
console.log('文件信息:', fileInfo)
|
||||
|
||||
// 根据文件类型确定正确的扩展名
|
||||
let finalExtension = fileInfo.extension
|
||||
|
|
@ -176,11 +175,6 @@ const ResultPage: React.FC = () => {
|
|||
finalExtension = mediaType === 'video' ? 'mp4' : 'jpg'
|
||||
}
|
||||
|
||||
// 构造带扩展名的文件名
|
||||
const baseFileName = fileInfo.fileName.includes('.')
|
||||
? fileInfo.fileName
|
||||
: `${fileInfo.fileName}.${finalExtension}`
|
||||
|
||||
// 先下载文件到临时目录,指定文件路径
|
||||
showToast({ title: '下载中...', icon: 'loading', duration: 1000 * 60 })
|
||||
const downloadRes = await downloadFile({
|
||||
|
|
@ -191,27 +185,9 @@ const ResultPage: React.FC = () => {
|
|||
}
|
||||
})
|
||||
hideToast()
|
||||
console.log('下载完成:', downloadRes.tempFilePath || downloadRes.filePath)
|
||||
console.log('下载响应头:', JSON.stringify(downloadRes.header, null, 2))
|
||||
|
||||
// 使用实际的文件路径
|
||||
const filePath = downloadRes.tempFilePath
|
||||
|
||||
// 更准确的文件类型判断:优先使用扩展名,其次使用 mediaType
|
||||
const isVideoFile = finalExtension && ['mp4', 'webm', 'ogg', 'mov', 'avi', 'mkv', 'flv'].includes(finalExtension) ||
|
||||
mediaType === 'video'
|
||||
const isImageFile = finalExtension && ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(finalExtension) ||
|
||||
mediaType === 'image'
|
||||
|
||||
console.log('文件类型判断:', {
|
||||
mediaUrl,
|
||||
filePath,
|
||||
finalExtension,
|
||||
isVideoFile,
|
||||
isImageFile,
|
||||
mediaType,
|
||||
baseFileName
|
||||
})
|
||||
showToast({ title: '保存中...', icon: 'loading' })
|
||||
// 根据实际文件类型选择保存方法
|
||||
if (mediaType === 'video') {
|
||||
|
|
|
|||
Loading…
Reference in New Issue