+
+ );
+ }
+
+ // If not authenticated, show login prompt
+ if (isAuthenticated === false) {
+ return (
+
+
+
+ Initializing application...
+
+
+ );
+ }
return (
-
+
+
+ Redirecting to login page...
+
+
+ );
}
-
-
-export default App
+export default App;
diff --git a/src/components/BottomNavigation/index.css b/src/components/BottomNavigation/index.css
new file mode 100644
index 0000000..e942fe1
--- /dev/null
+++ b/src/components/BottomNavigation/index.css
@@ -0,0 +1,46 @@
+.bottom-navigation {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 60px;
+ background-color: #fff;
+ border-top: 1px solid #e5e5e5;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ z-index: 1000;
+ padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tab-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ height: 100%;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.tab-item:hover {
+ background-color: #f5f5f5;
+}
+
+.tab-icon {
+ width: 24px;
+ height: 24px;
+ margin-bottom: 4px;
+}
+
+.tab-text {
+ font-size: 12px;
+ color: #8E9BAE;
+ transition: color 0.2s ease;
+}
+
+.tab-item.active .tab-text {
+ color: #1D1F22;
+ font-weight: 500;
+}
diff --git a/src/components/BottomNavigation/index.tsx b/src/components/BottomNavigation/index.tsx
new file mode 100644
index 0000000..ede2542
--- /dev/null
+++ b/src/components/BottomNavigation/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useI18n } from '../../hooks/useI18n';
+import './index.css';
+
+const BottomNavigation: React.FC = () => {
+ const { t } = useI18n();
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const tabs = [
+ {
+ path: '/home',
+ text: t('navigation.playground'),
+ icon: '/assets/icons/playground.png',
+ selectedIcon: '/assets/icons/playground-selected.png',
+ },
+ {
+ path: '/history',
+ text: t('navigation.mine'),
+ icon: '/assets/icons/user.png',
+ selectedIcon: '/assets/icons/user-selected.png',
+ },
+ ];
+
+ const handleTabClick = (path: string) => {
+ navigate(path);
+ };
+
+ return (
+
+
+
+
+ {!hideBottomNavPages.includes(location.pathname) &&
+ {tabs.map((tab) => {
+ const isActive = location.pathname === tab.path;
+ return (
+
+ );
+};
+
+export default BottomNavigation;
diff --git a/src/components/LanguageSwitcher/index.tsx b/src/components/LanguageSwitcher/index.tsx
index a18c8a7..eacd2ae 100644
--- a/src/components/LanguageSwitcher/index.tsx
+++ b/src/components/LanguageSwitcher/index.tsx
@@ -2,9 +2,7 @@
* 语言切换组件
*/
-import { View, Text } from '@tarojs/components';
import { useState } from 'react';
-import Taro from '@tarojs/taro';
import { useI18n } from '../../hooks/useI18n';
import { Language } from '../../i18n';
import { i18nManager } from '../../i18n/manager';
diff --git a/src/components/LoadingOverlay/index.tsx b/src/components/LoadingOverlay/index.tsx
index 8696f06..0f11cff 100644
--- a/src/components/LoadingOverlay/index.tsx
+++ b/src/components/LoadingOverlay/index.tsx
@@ -1,25 +1,21 @@
-import { View, Text } from '@tarojs/components';
-import { useI18n } from '../../hooks/useI18n';
-import './index.css';
-
interface LoadingOverlayProps {
- children?: React.ReactNode;
+ visible: boolean;
+ text?: string;
}
-const LoadingOverlay: React.FC handleTabClick(tab.path)}
+ >
+ 
+ {tab.text}
+
+ );
+ })}
+
+
);
};
diff --git a/src/components/TemplateCard/index.css b/src/components/TemplateCard/index.css
index 70b19b7..6271030 100644
--- a/src/components/TemplateCard/index.css
+++ b/src/components/TemplateCard/index.css
@@ -24,17 +24,17 @@
position: relative;
padding: 0;
flex: 1;
- min-height: 480px;
- border-radius: 32px;
+ min-height: 280px;
+ border-radius: 16px;
}
.merged-image-container {
position: relative;
- border-radius: 32px;
+ border-radius: 16px;
overflow: hidden;
width: 100%;
height: 100%;
- min-height: 480px;
+ min-height: 280px;
display: block;
}
@@ -44,7 +44,7 @@
left: 0;
width: 100%;
height: 100%;
- min-height: 480px;
+ min-height: 280px;
}
.overlay-layer {
@@ -56,7 +56,7 @@
.full-image {
width: 100%;
height: 100%;
- min-height: 480px;
+ min-height: 280px;
object-fit: cover;
display: block;
transform: translateZ(0);
@@ -139,7 +139,7 @@
background: #0000004d;
backdrop-filter: blur(5px);
color: #fff;
- font-size: 24px;
+ font-size: 11px;
font-weight: 500;
border-radius: 100px;
border: 1px solid #ffffff4d;
@@ -147,7 +147,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- padding: 12px 16px;
+ padding: 8px 12px;
text-align: center;
}
@@ -157,18 +157,21 @@
border-radius: 16px;
overflow: hidden;
width: 100%;
- min-height: 480px;
+ min-height: 280px;
display: block;
}
.single-video {
width: 100%;
height: 100%;
- min-height: 480px;
+ min-height: 280px;
object-fit: cover;
+ object-position: center;
display: block;
border-radius: 16px;
- position: relative;
+ position: absolute;
+ top: 0;
+ left: 0;
z-index: 2;
transform: translateZ(0);
backface-visibility: hidden;
@@ -183,6 +186,7 @@
height: 100%;
z-index: 1;
object-fit: cover;
+ object-position: center;
border-radius: 16px;
}
@@ -190,16 +194,20 @@
.full-video {
width: 100%;
height: 100%;
- min-height: 480px;
+ min-height: 280px;
object-fit: cover;
+ object-position: center;
display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
transform: translateZ(0);
backface-visibility: hidden;
}
.watermark-text {
color: rgb(255 255 255 / 50%);
- font-size: 20px;
+ font-size: 11px;
font-weight: 400;
text-align: center;
}
diff --git a/src/components/TemplateCard/index.tsx b/src/components/TemplateCard/index.tsx
index 8aa2df1..1f45088 100644
--- a/src/components/TemplateCard/index.tsx
+++ b/src/components/TemplateCard/index.tsx
@@ -1,6 +1,4 @@
-import { View, Text, Image, Video } from '@tarojs/components';
import { useState, useRef, useMemo } from 'react';
-import Taro from '@tarojs/taro';
import { Template } from '../../store/types';
import { useI18n } from '../../hooks/useI18n';
import './index.css';
@@ -37,16 +35,12 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
// 获取容器信息
const getContainerInfo = () => {
return new Promise(resolve => {
- const query = Taro.createSelectorQuery();
- query
- .select(`#${containerId}`)
- .boundingClientRect(rect => {
- if (rect) {
- setContainerInfo(rect);
- resolve(rect);
- }
- })
- .exec();
+ const element = document.getElementById(containerId);
+ if (element) {
+ const rect = element.getBoundingClientRect();
+ setContainerInfo(rect);
+ resolve(rect);
+ }
});
};
@@ -83,89 +77,69 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
};
return (
-
+
+
+ {text}
+
{/* 根据output类型显示不同的内容 */}
{isOutputVideo ? (
// 当output是视频时，只显示单个视频
-
-
-
+
- ✨{template.name}
-
-
- {t('templates.aiGeneratedContent')}
-
-
-
+
+
)}
-
+ 
+
{/* 模板名称悬浮 - 视频底部 */}
-
- ✨{template.name}
-
-
- {t('templates.aiGeneratedContent')}
-
-
+
) : (
// 原有的图片对比逻辑
-
+ ✨{template.name}
+
+
+
-
- ⟷
-
-
+
{/* 模板名称悬浮 - 图片底部 */}
-
{/* 原图层 - 完整图片/视频 */}
-
+
-
+ 
+
{/* 可拖拽的分割线 */}
-
{isInputVideo ? (
-
) : (
-
{/* 效果图层 - 完整图片，通过遮罩显示右半部分 */}
-
+ ⟷
+
+
+ ✨{template.name}
+
+
+
+ );
+ }
+
+ if (!userInfo) {
+ return null;
+ }
+
+ return (
+ 加载中...
+
+
+ );
+}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 4b40f09..a126939 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -2,5 +2,6 @@
export { useAd } from './useAd'
export { useSdk, useServerSdk } from './useSdk'
-export { useUploadVideo } from './useUploadVideo'
+// 暂时注释掉有Taro依赖的hook
+// export { useUploadVideo } from './useUploadVideo'
export { useI18n } from './useI18n'
diff --git a/src/hooks/useAd.ts b/src/hooks/useAd.ts
index c89626d..c77c1c4 100644
--- a/src/hooks/useAd.ts
+++ b/src/hooks/useAd.ts
@@ -1,5 +1,4 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { createPlatformFactory, RewardedVideoAd, RewardedVideoCloseCb, RewardedVideoErrorCb } from "../platforms";
+import { useState, useCallback } from 'react';
// 广告奖励回调函数类型
type AdRewardCallback = () => void;
@@ -17,187 +16,29 @@ interface UseAdOptions {
onReward?: AdRewardCallback; // 观看完整广告后的奖励回调
onClose?: (isEnded: boolean) => void; // 广告关闭回调，传入是否完整观看
}
-// 创建平台广告实例
+
+// H5版本的广告Hook - 不需要广告功能，直接给予奖励
export function useAd(options?: UseAdOptions): UseAdReturn {
- const factory = createPlatformFactory()
- const [loading, setLoading] = useState(true);
- const [adAvailable, setAdAvailable] = useState(false);
- const [adLoaded, setAdLoaded] = useState(false); // 广告是否已加载完成
- const adRef = useRef
+ {userInfo.picture ? (
+ 
+ ) : (
+
+
+ {userInfo.name?.charAt(0) || 'U'}
+
+ )}
+
+
+
+ {userInfo.name || '未知用户'}
+ {userInfo.email || ''}
+
+
);
}
diff --git a/src/pages/friends-photo/hooks/index.ts b/src/pages/friends-photo/hooks/index.ts
deleted file mode 100644
index 8513c14..0000000
--- a/src/pages/friends-photo/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useImageUpload } from './useImageUpload';
diff --git a/src/pages/friends-photo/hooks/useImageUpload.ts b/src/pages/friends-photo/hooks/useImageUpload.ts
deleted file mode 100644
index adb31e3..0000000
--- a/src/pages/friends-photo/hooks/useImageUpload.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import { useState } from 'react';
-import Taro from '@tarojs/taro';
-import { useSdk } from '../../../hooks/index';
-import { useImageDetectionTaskManager, ImageAuditResult, AuditConclusion } from '../../../hooks/useImageDetectionTaskManager';
-import { useI18n } from '../../../hooks/useI18n';
-
-export function useImageUpload() {
- const [image1, setImage1] = useState
+ {uploading ? (
+ 
) : (
-
- {title}
-
+
+
+
+
+ ) : imageUrl ? (
+ 上传中...
+
+ 
+
)}
-
-
+
+ {title}
+
{/* 上传区域 */}
-
- uploadSingleImage(1)} />
- uploadSingleImage(2)} />
-
+
-
-
+
+
+
);
}
diff --git a/src/pages/history/index.config.ts b/src/pages/history/index.config.ts
deleted file mode 100644
index a3ac056..0000000
--- a/src/pages/history/index.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default definePageConfig({
- navigationBarTitleText: '',
- navigationBarBackgroundColor: '#ffffff',
- navigationBarTextStyle: 'black',
- backgroundColorTop: '#ffffff',
- backgroundColorBottom: '#ffffff',
- backgroundColor: '#ffffff'
-})
\ No newline at end of file
diff --git a/src/pages/history/index.tsx b/src/pages/history/index.tsx
index c1a95d0..56d5f20 100644
--- a/src/pages/history/index.tsx
+++ b/src/pages/history/index.tsx
@@ -1,6 +1,5 @@
-import { Image, ScrollView, Text, View } from '@tarojs/components';
-import Taro, { navigateTo } from '@tarojs/taro';
import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
import { useServerSdk } from '../../hooks/index';
import { useI18n } from '../../hooks/useI18n';
import { i18nManager } from '../../i18n/manager';
@@ -8,27 +7,28 @@ import { i18nManager } from '../../i18n/manager';
import './index.css';
export default function History() {
const { t } = useI18n();
+ const navigate = useNavigate();
const [records, setRecords] = useState
+
{/* 固定底部按钮 */}
-
{/* 设置区域 */}
-
-
- {t('navigation.mine')}
+
-
+
);
}
diff --git a/src/pages/home/index.config.ts b/src/pages/home/index.config.ts
deleted file mode 100644
index e2b22c2..0000000
--- a/src/pages/home/index.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default definePageConfig({
- navigationBarTitleText: '游乐场', // 默认标题，运行时会被i18n替换
- navigationBarBackgroundColor: '#F5F6F8',
- navigationBarTextStyle: 'black',
- backgroundColorTop: '#F5F6F8',
- backgroundColorBottom: '#F5F6F8',
- backgroundColor: '#F5F6F8'
-})
diff --git a/src/pages/home/index.css b/src/pages/home/index.css
index 7cb9007..61a6ba4 100644
--- a/src/pages/home/index.css
+++ b/src/pages/home/index.css
@@ -1,6 +1,6 @@
.home {
/* background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); */
- background: #F5F6F8;
+ background: #f5f6f8;
height: 100vh;
display: flex;
flex-direction: column;
@@ -25,6 +25,7 @@
.home-scroll {
flex: 1;
height: 100%;
+ overflow-y: auto;
}
.home-header {
@@ -58,6 +59,6 @@
gap: 14px;
max-width: 100%;
margin: 0 auto;
- padding: 14px 28px;
+ padding: 14px 16px 80px 16px;
min-height: 100%;
}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 7ca0513..c2ea74d 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -1,29 +1,22 @@
-import { View, ScrollView } from '@tarojs/components';
import { useEffect, useState } from 'react';
-import Taro, { navigateTo } from '@tarojs/taro';
+import { useNavigate } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from '../../hooks/redux';
import { selectTemplates } from '../../selectors/template';
import { initTemplates } from '../../actions/template';
import { Template } from '../../store/types';
import TemplateCard from '../../components/TemplateCard';
-import { useSdk, useServerSdk } from '../../hooks/index';
-import { useImageDetectionTaskManager, ImageAuditResult, AuditConclusion } from '../../hooks/useImageDetectionTaskManager';
+import { useServerSdk } from '../../hooks/index';
import { useI18n } from '../../hooks/useI18n';
import { i18nManager } from '../../i18n/manager';
-// import LanguageSwitcher from '../../components/LanguageSwitcher'; // 已隐藏 - 只支持英语
import './index.css';
-// 定义详细的加载状态类型
-type LoadingState = false | 'uploading' | 'auditing' | 'processing';
-
export default function Home() {
const { t } = useI18n();
+ const navigate = useNavigate();
const dispatch = useAppDispatch();
const templates = useAppSelector(selectTemplates);
- const sdk = useSdk();
const serverSdk = useServerSdk();
- const { submitAuditTask } = useImageDetectionTaskManager();
const [refreshing, setRefreshing] = useState(false);
const loadTemplates = async () => {
@@ -33,11 +26,7 @@ export default function Home() {
dispatch(initTemplates(templates));
} catch (error) {
console.error('加载模板失败:', error);
- Taro.showToast({
- title: t('home.loadTemplatesFailed'),
- icon: 'error',
- duration: 2000,
- });
+ alert(t('home.loadTemplatesFailed'));
}
};
@@ -46,11 +35,7 @@ export default function Home() {
setRefreshing(true);
try {
await loadTemplates();
- Taro.showToast({
- title: t('home.refreshSuccess'),
- icon: 'success',
- duration: 1500,
- });
+ alert(t('home.refreshSuccess'));
} catch (error) {
console.error(t('home.refreshFailed'), error);
} finally {
@@ -66,65 +51,23 @@ export default function Home() {
i18nManager.updateNavigationBarTitle('home');
}, [dispatch]);
- // 获取加载状态的显示文本
- const getLoadingText = (state: LoadingState): string => {
- switch (state) {
- default:
- return t('common.pleaseWait');
- }
- };
-
- // 处理审核失败
- const handleAuditFailure = (auditResult: ImageAuditResult) => {
- const messages: Record
+
-
+ {t('navigation.mine')}
{/* 语言切换器已隐藏 - 只支持英语 */}
-
-
+
+
+
+
+ {refreshing &&
+ 刷新中...
}
+
{loading ? (
-
- {t('common.loading')}
-
+
- {t('history.noRecords')}
-
+ handleItemClick(record)}>
-
+
-
-
+
+
+ {t('common.loading')}
+
) : records.length === 0 ? (
-
+ 
+ {t('history.noRecords')}
+
) : (
records.map(record => {
- const progress = calculateProgress(record);
+ // const progress = calculateProgress(record); // 暂时未使用
const isGenerating = record.status === 'processing';
return (
-
+ {t('history.noRecords')}
+ handleItemClick(record)}>
+
-
- {record.templateName}
-
-
- {formatTime(record.createdAt)}
-
-
-
+
);
})
)}
-
{record.status === 'completed' && record.outputResult ? (
- [0]})
) : (
-
-
+
-
+
{/* 生成中状态的扫描效果 */}
{isGenerating && (
-
-
+
)}
-
+
+
{/* 加载loading 转圈 */}
-
)}
-
+
+
+ {record.templateName}
+
+
+ {formatTime(record.createdAt)}
+
+
+
);
}
diff --git a/src/pages/result/components/ErrorComponent.tsx b/src/pages/result/components/ErrorComponent.tsx
index 60c16bf..05380fe 100644
--- a/src/pages/result/components/ErrorComponent.tsx
+++ b/src/pages/result/components/ErrorComponent.tsx
@@ -1,32 +1,33 @@
-import { View } from '@tarojs/components';
-import { navigateBack, switchTab } from '@tarojs/taro';
+import { useNavigate } from 'react-router-dom';
interface ErrorComponentProps {
error: string;
}
const ErrorComponent: React.FC
+
+
+ {refreshing &&
+ Loading...
}
+
{templates.map(template => (
+
+
);
};
diff --git a/src/pages/result/components/GeneratingComponent.tsx b/src/pages/result/components/GeneratingComponent.tsx
index 992b51d..359ac27 100644
--- a/src/pages/result/components/GeneratingComponent.tsx
+++ b/src/pages/result/components/GeneratingComponent.tsx
@@ -1,5 +1,4 @@
-import { Image, View, Text } from '@tarojs/components';
-import { navigateBack } from '@tarojs/taro';
+import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
interface GeneratingComponentProps {
@@ -7,6 +6,7 @@ interface GeneratingComponentProps {
}
const GeneratingComponent: React.FC
+
+
+
+ 处理失败
+ {error}
+
+
+
再来一张
-
- navigateBack()}>
+
+ navigate(-1)}>
返回
-
-
-
-
+
+
+
-
- 生成中...
-
- 内容生成中，请耐心等待
-
+
-
+
- · T I P S ·
- 退出本页面不影响生成进度
-
-
-
+
+
);
};
diff --git a/src/pages/result/components/SuccessComponent.tsx b/src/pages/result/components/SuccessComponent.tsx
index cf8d090..95a580a 100644
--- a/src/pages/result/components/SuccessComponent.tsx
+++ b/src/pages/result/components/SuccessComponent.tsx
@@ -1,169 +1,66 @@
-import { Image, Video, View } from '@tarojs/components';
-import { downloadFile, hideToast, saveImageToPhotosAlbum, saveVideoToPhotosAlbum, showToast, switchTab } from '@tarojs/taro';
-import { useAd } from '../../../hooks/useAd';
+import { useNavigate } from 'react-router-dom';
interface SuccessComponentProps {
task: any;
}
const SuccessComponent: React.FC
{/* 进度方框 */}
-
-
-
+
{/* 状态文本 */}
-
+
-
+
+
{/* 预览图片或占位符 */}
{task?.inputImageUrl ? (
- [0]})
) : (
-
- 🎨
-
+ {Math.round(progress)}%
-
-
-
+
+
+
+
)}
{/* 图片遮罩层 */}
- 🎨
+ {Math.round(progress)}%
+
+
{/* 操作按钮 */}
-
+ 
+ 生成中...
+
+
+ 生成中...
+ 内容生成中，请耐心等待
+
+
{/* 提示信息 */}
-
稍后查看
-
-
+
+
+
+ · T I P S ·
+ 退出本页面不影响生成进度
+
+
);
};
diff --git a/src/pages/result/index.config.ts b/src/pages/result/index.config.ts
deleted file mode 100644
index 943151a..0000000
--- a/src/pages/result/index.config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default definePageConfig({
- navigationBarTitleText: '预览',
- navigationBarBackgroundColor: '#ffffff',
- navigationBarTextStyle: 'black',
- backgroundColorTop: '#ffffff',
- backgroundColorBottom: '#ffffff',
- backgroundColor: '#ffffff'
-})
diff --git a/src/pages/result/index.css b/src/pages/result/index.css
index 00c426b..f71c627 100644
--- a/src/pages/result/index.css
+++ b/src/pages/result/index.css
@@ -30,7 +30,7 @@
display: flex;
align-items: center;
justify-content: center;
- padding: 20px 44px;
+ padding: 20px 16px;
position: relative;
z-index: 2;
}
@@ -42,7 +42,7 @@
display: flex;
align-items: center;
justify-content: center;
- border-radius: 32px;
+ border-radius: 16px;
overflow: hidden;
position: relative;
}
@@ -51,7 +51,7 @@
width: 100%;
height: auto;
max-height: 60vh;
- border-radius: 32px;
+ border-radius: 16px;
object-fit: cover;
}
@@ -59,12 +59,12 @@
width: 100%;
height: 60vh;
object-fit: contain;
- border-radius: 32px;
+ border-radius: 16px;
}
/* 底部操作区域 */
.result-actions {
- padding: 20px 40px 40px;
+ padding: 20px 16px 40px;
z-index: 10;
}
@@ -72,36 +72,40 @@
display: flex;
align-items: center;
justify-content: center;
- gap: 24px;
- margin-bottom: 48px;
+ gap: 14px;
+ margin-bottom: 20px;
}
/* 下载按钮 - 大按钮 */
.download-btn {
- width: 480px;
- height: 96px;
- background: #1D1F22;
- border-radius: 28px;
+ width: 100%;
+ height: 60px;
+ background: #1d1f22;
+ border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
- font-size: 28px;
+ font-size: 16px;
font-weight: 400;
+ border: none;
+ cursor: pointer;
}
/* 查看按钮 - 小按钮 */
.view-btn {
flex: 1;
- height: 96px;
+ height: 60px;
border: 1px solid #1d1f22;
- border-radius: 28px;
+ border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #1d1f22;
- font-size: 28px;
+ font-size: 16px;
font-weight: 400;
+ background: white;
+ cursor: pointer;
}
/* 返回首页链接 */
@@ -109,7 +113,7 @@
display: flex;
align-items: center;
justify-content: center;
- font-size: 28px;
+ font-size: 16px;
font-weight: 400;
color: #919191;
}
@@ -119,9 +123,9 @@
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
+ justify-content: flex-start;
height: 100vh;
- padding: 60px 32px;
+ padding: 80px 16px 160px;
box-sizing: border-box;
position: relative;
}
@@ -130,13 +134,14 @@
.progress-container {
position: relative;
margin-bottom: 60px;
+ margin-top: 20px;
}
/* 进度方框 */
.progress-circle {
- width: 316px;
- height: 316px;
- border-radius: 48px;
+ width: 280px;
+ height: 280px;
+ border-radius: 24px;
position: relative;
display: flex;
align-items: center;
@@ -148,8 +153,8 @@
.progress-fill {
position: absolute;
inset: -10px;
- border-radius: 48px;
- background: conic-gradient(#FFCF5F 0deg, #FFCF5F 0deg, transparent 0deg, transparent 360deg);
+ border-radius: 24px;
+ background: conic-gradient(#ffcf5f 0deg, #ffcf5f 0deg, transparent 0deg, transparent 360deg);
padding: 10px;
z-index: 1;
}
@@ -157,11 +162,8 @@
.progress-inner {
width: 100%;
height: 100%;
- border-radius: 48px;
+ border-radius: 24px;
background: white;
- display: flex;
- align-items: center;
- justify-content: center;
position: relative;
z-index: 2;
overflow: hidden;
@@ -179,8 +181,9 @@
inset: 0;
width: 100%;
height: 100%;
- border-radius: 48px;
+ border-radius: 24px;
z-index: 3;
+ object-fit: cover;
}
/* 预览占位符 */
@@ -189,7 +192,7 @@
inset: 0;
width: 100%;
height: 100%;
- border-radius: 48px;
+ border-radius: 24px;
background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
display: flex;
align-items: center;
@@ -201,13 +204,8 @@
.progress-overlay {
position: absolute;
inset: 0;
- border-radius: 48px;
- background: linear-gradient(
- 135deg,
- rgb(0 0 0 / 20%) 0%,
- rgb(0 0 0 / 10%) 50%,
- rgb(0 0 0 / 30%) 100%
- );
+ border-radius: 24px;
+ background: linear-gradient(135deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 30%) 100%);
z-index: 4;
pointer-events: none;
}
@@ -232,14 +230,11 @@
/* 进度文字 */
.scan-progress {
- font-size: 56px;
- color: #FFFFFF;
+ font-size: 32px;
+ color: #ffffff;
font-weight: 700;
z-index: 6;
- text-shadow:
- 0 2px 4px rgb(0 0 0 / 50%),
- 0 0 8px rgb(0 0 0 / 30%),
- 0 0 16px rgb(0 0 0 / 20%);
+ text-shadow: 0 2px 4px rgb(0 0 0 / 50%), 0 0 8px rgb(0 0 0 / 30%), 0 0 16px rgb(0 0 0 / 20%);
position: absolute;
top: 50%;
left: 50%;
@@ -258,19 +253,19 @@
}
.placeholder-icon {
- font-size: 48px;
+ font-size: 32px;
opacity: 0.6;
}
/* 状态区域 */
.status-section {
text-align: center;
- margin-bottom: 210px;
+ margin-bottom: 60px;
}
.status-icon-image {
- width: 40px;
- height: 40px;
+ width: 24px;
+ height: 24px;
margin-right: 8px;
}
@@ -278,55 +273,56 @@
display: flex;
align-items: center;
justify-content: center;
- font-size: 40px;
+ font-size: 18px;
font-weight: 500;
- color: #1D1F22;
- margin-bottom: 24px;
+ color: #1d1f22;
+ margin-bottom: 12px;
}
.status-subtitle {
- font-size: 24px;
+ font-size: 14px;
color: #919191;
}
/* 生成中操作按钮 */
.generating-actions {
- margin-bottom: 60px;
+ margin-bottom: 40px;
}
.later-btn {
- width: 480px;
- height: 96px;
- background: #1D1F22;
- border-radius: 28px;
+ width: 200px;
+ height: 60px;
+ background: #1d1f22;
+ border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
- font-size: 28px;
+ font-size: 16px;
font-weight: 500;
+ cursor: pointer;
}
/* 提示区域 */
.tips-section {
text-align: center;
position: absolute;
- bottom: 150px;
+ bottom: 60px;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
.tips-label {
- font-size: 16px;
+ font-size: 11px;
font-weight: 500;
- color: #B9B9B9;
+ color: #b9b9b9;
letter-spacing: 2px;
- margin-bottom: 12px;
+ margin-bottom: 8px;
}
.tips-text {
- font-size: 22px;
+ font-size: 12px;
color: #919191;
}
@@ -342,58 +338,86 @@
align-items: center;
justify-content: center;
height: 100vh;
- padding: 60px 32px;
+ padding: 60px 16px;
box-sizing: border-box;
}
.error-container {
text-align: center;
- margin-bottom: 80px;
+ margin-bottom: 40px;
}
.error-text {
- font-size: 36px;
+ font-size: 18px;
font-weight: 500;
color: #333;
- margin-bottom: 16px;
+ margin-bottom: 12px;
}
.error-message {
- font-size: 28px;
+ font-size: 14px;
color: #666;
}
.error-actions {
display: flex;
- gap: 24px;
+ gap: 14px;
}
.try-again-btn {
- width: 160px;
- height: 80px;
+ width: 120px;
+ height: 60px;
background: #333;
- border-radius: 40px;
+ border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
- font-size: 28px;
+ font-size: 16px;
font-weight: 500;
+ border: none;
+ cursor: pointer;
}
.back-btn {
- width: 120px;
- height: 80px;
+ width: 100px;
+ height: 60px;
border: 1px solid #333;
- border-radius: 40px;
+ border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #333;
- font-size: 28px;
+ font-size: 16px;
font-weight: 500;
+ background: white;
+ cursor: pointer;
}
+/* 成功页面样式 */
+.result-page.success {
+ background: #f5f6f8;
+ padding: 0;
+}
+
+.success-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ padding: 60px 16px;
+ box-sizing: border-box;
+}
+
+.success-actions {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ margin-top: 20px;
+ width: 100%;
+ max-width: 300px;
+}
/* 下载提示文字 */
.download-tip {
diff --git a/src/pages/result/index.tsx b/src/pages/result/index.tsx
index 98388df..5e8cdf2 100644
--- a/src/pages/result/index.tsx
+++ b/src/pages/result/index.tsx
@@ -1,5 +1,5 @@
-import { getCurrentInstance, navigateBack, showToast } from '@tarojs/taro';
import { useEffect, useRef, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
import { useServerSdk } from '../../hooks';
import ErrorComponent from './components/ErrorComponent';
import GeneratingComponent from './components/GeneratingComponent';
@@ -7,6 +7,8 @@ import SuccessComponent from './components/SuccessComponent';
import './index.css';
const ResultPage: React.FC = () => {
+ const [searchParams] = useSearchParams();
+ const navigate = useNavigate();
const [taskId, setTaskId] = useState
+
-
-
- {getButtonText()}
-
-
- switchTab({ url: '/pages/home/index' })}>
- 返回首页
-
-
- {getTipText()}
-
+
+
+ {task?.outputUrl ? (
+ task.outputUrl.includes('.mp4') ? (
+
+ ) : (
+ 
+ )
) : (
-
- {/* 底部操作区域 */}
-
+
)}
-
-
+ 结果生成中...
+
+
+
+
+