108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
import { Image, View,Text } from '@tarojs/components';
|
||
import { navigateBack } from '@tarojs/taro';
|
||
import { useEffect, useState } from 'react';
|
||
|
||
interface GeneratingComponentProps {
|
||
task: any;
|
||
}
|
||
|
||
const GeneratingComponent: React.FC<GeneratingComponentProps> = ({ task }) => {
|
||
const [progress, setProgress] = useState(0);
|
||
|
||
// 根据任务创建时间和类型计算真实进度
|
||
useEffect(() => {
|
||
let interval: NodeJS.Timeout | null = null;
|
||
|
||
const calculateProgress = () => {
|
||
if (!task?.createdAt) return 0;
|
||
|
||
const createdAt = new Date(task.createdAt).getTime();
|
||
const now = Date.now();
|
||
const elapsedMinutes = (now - createdAt) / (1000 * 60);
|
||
|
||
// 根据任务类型确定预计时间
|
||
const isVideo = task.taskType === 'video' || task.outputType === 'video' || task.type === 'video';
|
||
const estimatedTime = isVideo ? 2.5 : 1; // 视频3分钟，图片1分钟
|
||
|
||
// 计算进度百分比，最大95%
|
||
const calculatedProgress = Math.min((elapsedMinutes / estimatedTime) * 100, 95);
|
||
return Math.max(calculatedProgress, 0);
|
||
};
|
||
|
||
// 立即计算一次
|
||
setProgress(calculateProgress());
|
||
|
||
// 每秒更新一次进度
|
||
interval = setInterval(() => {
|
||
setProgress(calculateProgress());
|
||
}, 1000);
|
||
|
||
return () => {
|
||
if (interval) {
|
||
clearInterval(interval);
|
||
}
|
||
};
|
||
}, [task]);
|
||
|
||
const handleLaterView = () => {
|
||
navigateBack();
|
||
};
|
||
|
||
return (
|
||
<View className="result-page generating">
|
||
<View className="generating-content">
|
||
{/* 进度方框 */}
|
||
<View className="progress-container">
|
||
<View className="progress-circle">
|
||
<View
|
||
className="progress-fill"
|
||
style={{
|
||
background: `conic-gradient(#ff9500 ${progress * 3.6}deg, transparent 0deg)`,
|
||
}}
|
||
/>
|
||
<View className="progress-inner">
|
||
{/* 预览图片或占位符 */}
|
||
{task?.inputImageUrl ? (
|
||
<Image className="preview-image" src={task.inputImageUrl} mode="aspectFill" />
|
||
) : (
|
||
<View className="preview-placeholder">
|
||
<View className="placeholder-icon">🎨</View>
|
||
</View>
|
||
)}
|
||
{/* 图片遮罩层 */}
|
||
<View className="progress-overlay" />
|
||
{/* 光扫描动画 */}
|
||
<View className="scan-light" />
|
||
<View className="scan-progress" >{Math.round(progress)}%</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 状态文本 */}
|
||
<View className="status-section">
|
||
<View className="status-title">
|
||
<Image className="status-icon-image" src="/assets/icons/funnel.png" />
|
||
<Text className="status-title-text">生成中...</Text>
|
||
</View>
|
||
<View className="status-subtitle">内容生成中，请耐心等待</View>
|
||
</View>
|
||
|
||
{/* 操作按钮 */}
|
||
<View className="generating-actions">
|
||
<View className="later-btn" onClick={handleLaterView}>
|
||
稍后查看
|
||
</View>
|
||
</View>
|
||
|
||
{/* 提示信息 */}
|
||
<View className="tips-section">
|
||
<View className="tips-label">· T I P S ·</View>
|
||
<View className="tips-text">退出本页面不影响生成进度</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default GeneratingComponent;
|