diff --git a/src/app.config.ts b/src/app.config.ts index 15c683b..aabf258 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -1,6 +1,7 @@ export default defineAppConfig({ pages: [ - 'pages/index/index' + 'pages/index/index', + 'pages/result/index' ], window: { backgroundTextStyle: 'light', diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 4813e82..3dbae78 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -1,17 +1,16 @@ 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 ImageResultViewer from '../../components/ImageResultViewer' import ErrorOverlay from '../../components/ErrorOverlay' -type PageStep = 'upload' | 'loading' | 'result' | 'error' +type PageStep = 'upload' | 'loading' | 'error' interface AppState { step: PageStep; - images: string[]; error: string | null; } @@ -19,7 +18,6 @@ export default function Index() { const sdk = useSdk() const [state, setState] = useState({ step: 'upload', - images: [], error: null }) @@ -29,7 +27,7 @@ export default function Index() { const task_id = await sdk.chooseAndGenerateImage({ onImageSelected: () => { // 选择图片完成后立即显示loading - setState({ step: 'loading', images: [], error: null }) + setState({ step: 'loading', error: null }) } }) @@ -37,15 +35,21 @@ export default function Index() { await new Promise((resolve) => setTimeout(resolve, 5000)) const urls = await sdk.getTaskStatus(task_id) - setState({ step: 'result', images: urls, error: null }) + // 跳转到结果页面 + 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', images: [], error: errorMsg }) + setState({ step: 'error', error: errorMsg }) } } const resetToUpload = () => { - setState({ step: 'upload', images: [], error: null }) + setState({ step: 'upload', error: null }) } const renderCurrentStep = () => { @@ -54,8 +58,6 @@ export default function Index() { return case 'loading': return - case 'result': - return case 'error': return default: diff --git a/src/pages/result/index.config.ts b/src/pages/result/index.config.ts new file mode 100644 index 0000000..71b56d1 --- /dev/null +++ b/src/pages/result/index.config.ts @@ -0,0 +1,8 @@ +export default definePageConfig({ + navigationBarTitleText: '图片预览', + navigationBarBackgroundColor: '#2c3e50', + navigationBarTextStyle: 'white', + backgroundColorTop: '#2c3e50', + backgroundColorBottom: '#34495e', + backgroundColor: '#2c3e50' +}) \ No newline at end of file diff --git a/src/components/ImageResultViewer/index.css b/src/pages/result/index.css similarity index 88% rename from src/components/ImageResultViewer/index.css rename to src/pages/result/index.css index 07f8ae0..95386c5 100644 --- a/src/components/ImageResultViewer/index.css +++ b/src/pages/result/index.css @@ -1,16 +1,12 @@ -.fullscreen-container { - position: fixed; - top: 0; - left: 0; +.result-page { width: 100%; - height: 100%; + height: 100vh; background: black; - z-index: 999; display: flex; flex-direction: column; } -.fullscreen-header { +.result-header { display: flex; justify-content: space-between; align-items: center; @@ -25,7 +21,7 @@ border-bottom: 2rpx solid rgba(255, 255, 255, 0.1); } -.fullscreen-title { +.result-title { font-size: 36rpx; font-weight: bold; } @@ -42,7 +38,7 @@ text-align: center; } -.fullscreen-image-container { +.result-image-container { flex: 1; width: 100%; position: relative; @@ -80,7 +76,7 @@ z-index: 1; } -.fullscreen-image { +.result-image { max-width: 100%; max-height: 100%; width: 100%; diff --git a/src/components/ImageResultViewer/index.tsx b/src/pages/result/index.tsx similarity index 54% rename from src/components/ImageResultViewer/index.tsx rename to src/pages/result/index.tsx index 5aa42f9..4b6d5a1 100644 --- a/src/components/ImageResultViewer/index.tsx +++ b/src/pages/result/index.tsx @@ -1,16 +1,13 @@ -import { View, Text, Button, Image } from '@tarojs/components' -import { memo } from 'react' -import { saveImageToPhotosAlbum, downloadFile, showToast } from '@tarojs/taro' +import { View, Image } from '@tarojs/components' +import { memo, useEffect, useState } from 'react' +import { saveImageToPhotosAlbum, downloadFile, showToast, navigateBack, getCurrentInstance } from '@tarojs/taro' import { useAd } from '../../hooks/useAd' -import DownloadSection from '../DownloadSection' +import DownloadSection from '../../components/DownloadSection' import './index.css' -interface ImageResultViewerProps { - images: string[] - onClose: () => void -} - -const ImageResultViewer: React.FC = memo(({ images, onClose }) => { +const ResultPage: React.FC = memo(() => { + const [images, setImages] = useState([]) + // 广告激励下载功能 const { loading: adLoading } = useAd({ onReward: () => { @@ -24,8 +21,36 @@ const ImageResultViewer: React.FC = memo(({ images, onCl } }) + useEffect(() => { + // 获取页面参数 + const instance = getCurrentInstance() + const params = instance?.router?.params + + if (params?.images) { + try { + const imageList = JSON.parse(decodeURIComponent(params.images)) + setImages(imageList) + } catch (error) { + console.error('解析图片参数失败:', error) + showToast({ + title: '参数错误', + icon: 'error' + }) + navigateBack() + } + } else { + showToast({ + title: '缺少图片参数', + icon: 'error' + }) + navigateBack() + } + }, []) + // 下载图片到本地相册 const handleDownloadImages = async () => { + if (!images.length) return + try { showToast({ title: '开始下载...', icon: 'loading' }) @@ -52,25 +77,14 @@ const ImageResultViewer: React.FC = memo(({ images, onCl } } - // 触发看广告下载 - // const handleWatchAdToDownload = () => { - // if (adLoading) { - // showToast({ title: '广告加载中...', icon: 'loading' }) - // return - // } - // showAd() - // } + if (!images.length) { + return null + } return ( - - - 图片预览 - - ✕ - - + = memo(({ images, onCl }} > - + @@ -87,4 +101,4 @@ const ImageResultViewer: React.FC = memo(({ images, onCl ) }) -export default ImageResultViewer \ No newline at end of file +export default ResultPage \ No newline at end of file