Compare commits
2 Commits
bb7bf19236
...
8a1c5e982f
| Author | SHA1 | Date |
|---|---|---|
iHeyTang
|
8a1c5e982f | |
|
iHeyTang
|
b7c4fc8b92 |
|
|
@ -1,5 +1,5 @@
|
|||
.history {
|
||||
background: #fff;
|
||||
background: #f5f6f8;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
}
|
||||
|
||||
.history-title {
|
||||
font-size: 48px;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1d1f22;
|
||||
}
|
||||
|
||||
|
|
@ -40,7 +40,6 @@
|
|||
}
|
||||
|
||||
.loading-state {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -48,7 +47,7 @@
|
|||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 32px;
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
margin: 0 auto;
|
||||
|
|
@ -56,12 +55,12 @@
|
|||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin: 80px auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
|
|
@ -72,17 +71,18 @@
|
|||
}
|
||||
|
||||
.empty-icon-image {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 24px;
|
||||
font-size: 16px;
|
||||
color: #b9b9b9;
|
||||
display: block;
|
||||
margin-top: 32px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 28px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1d1f22;
|
||||
flex: 1;
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
}
|
||||
|
||||
.item-status {
|
||||
font-size: 22px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 8px 16px;
|
||||
border-radius: 24px;
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
}
|
||||
|
||||
.item-type {
|
||||
font-size: 22px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
|
||||
color: #fff;
|
||||
|
|
@ -252,7 +252,7 @@
|
|||
}
|
||||
|
||||
.item-time {
|
||||
font-size: 22px;
|
||||
font-size: 14px;
|
||||
color: #b9b9b9;
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
|
|
@ -280,7 +280,7 @@
|
|||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 20px;
|
||||
font-size: 14px;
|
||||
color: #007aff;
|
||||
background: rgb(0 122 255 / 10%);
|
||||
padding: 4px 12px;
|
||||
|
|
@ -336,7 +336,7 @@
|
|||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid transparent;
|
||||
border-top: 3px solid #ffffff;
|
||||
border-top: 3px solid #fff;
|
||||
border-radius: 50%;
|
||||
z-index: 6;
|
||||
animation: spin 1s linear infinite;
|
||||
|
|
@ -346,7 +346,7 @@
|
|||
/* 缩略图进度文字 */
|
||||
.thumbnail-scan-progress {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
z-index: 7;
|
||||
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%);
|
||||
|
|
|
|||
|
|
@ -13,30 +13,12 @@ export default function History() {
|
|||
const [loading, setLoading] = useState(true);
|
||||
const serverSdk = useServerSdk();
|
||||
|
||||
// 计算生成中任务的进度（暂时未使用，但保留以备后用）
|
||||
// const calculateProgress = (record: any) => {
|
||||
// if (!record?.createdAt || record.status !== 'processing') return 0;
|
||||
|
||||
// const createdAt = new Date(record.createdAt).getTime();
|
||||
// const now = Date.now();
|
||||
// const elapsedMinutes = (now - createdAt) / (1000 * 60);
|
||||
|
||||
// // 根据任务类型确定预计时间
|
||||
// const isVideo = record.taskType === 'video' || record.outputType === 'video' || record.type === 'video';
|
||||
// const estimatedTime = isVideo ? 2.5 : 1; // 视频2.5分钟，图片1分钟
|
||||
|
||||
// // 计算进度百分比，最大95%
|
||||
// const calculatedProgress = Math.min((elapsedMinutes / estimatedTime) * 100, 95);
|
||||
// return Math.max(calculatedProgress, 0);
|
||||
// };
|
||||
|
||||
const loadRecords = async () => {
|
||||
try {
|
||||
const logs = await serverSdk.getMineLogs();
|
||||
setRecords(logs || []);
|
||||
} catch (error) {
|
||||
console.error('加载记录失败:', error);
|
||||
alert(t('common.operationFailed'));
|
||||
console.error('Failed to load records:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
|
|
@ -44,47 +26,45 @@ export default function History() {
|
|||
|
||||
useEffect(() => {
|
||||
loadRecords();
|
||||
// 设置页面标题
|
||||
// Set page title
|
||||
i18nManager.updateNavigationBarTitle('history');
|
||||
}, []);
|
||||
|
||||
// 定时更新生成中任务的进度
|
||||
// Regularly update progress of generating tasks
|
||||
useEffect(() => {
|
||||
const hasGeneratingTasks = records.some(record => record.status === 'processing');
|
||||
if (!hasGeneratingTasks) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
// 触发重新渲染以更新进度
|
||||
// Trigger re-render to update progress
|
||||
setRecords(prevRecords => [...prevRecords]);
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [records]);
|
||||
|
||||
// 下拉刷新
|
||||
// Pull to refresh
|
||||
const handleRefresh = async () => {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
await loadRecords();
|
||||
alert(t('home.refreshSuccess'));
|
||||
} catch (error) {
|
||||
console.error('刷新失败:', error);
|
||||
alert(t('home.refreshFailed'));
|
||||
console.error('Refresh failed:', error);
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 点击历史记录项
|
||||
// Click history record item
|
||||
const handleItemClick = (record: any) => {
|
||||
if (record.status === 'completed' && record.outputUrl) {
|
||||
// 跳转到结果页面查看
|
||||
// Navigate to result page to view
|
||||
navigate(`/result?taskId=${record.executionId}`);
|
||||
} else if (record.status === 'failed') {
|
||||
// 显示错误信息
|
||||
alert(`${t('common.operationFailed')}\n${record.errorMessage || t('common.operationFailed')}`);
|
||||
console.error('Refresh failed:', record.errorMessage);
|
||||
// Show error message
|
||||
} else if (record.status === 'processing') {
|
||||
// 跳转到生成页面查看进度
|
||||
// Navigate to generation page to view progress
|
||||
navigate(`/result?taskId=${record.executionId}`);
|
||||
}
|
||||
};
|
||||
|
|
@ -103,17 +83,10 @@ export default function History() {
|
|||
|
||||
return (
|
||||
<div className="history">
|
||||
{/* 设置区域 */}
|
||||
<div className="history-header">
|
||||
<div className="header-content">
|
||||
<span className="history-title">{t('navigation.mine')}</span>
|
||||
{/* 语言切换器已隐藏 - 只支持英语 */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Settings area */}
|
||||
<div className="history-list">
|
||||
<div className="refresh-area" onClick={handleRefresh}>
|
||||
{refreshing && <div className="refresh-indicator">刷新中...</div>}
|
||||
{refreshing && <div className="refresh-indicator">Refreshing...</div>}
|
||||
</div>
|
||||
<div className="history-grid">
|
||||
{loading ? (
|
||||
|
|
@ -127,7 +100,7 @@ export default function History() {
|
|||
</div>
|
||||
) : (
|
||||
records.map(record => {
|
||||
// const progress = calculateProgress(record); // 暂时未使用
|
||||
// const progress = calculateProgress(record); // Temporarily unused
|
||||
const isGenerating = record.status === 'processing';
|
||||
return (
|
||||
<div key={record.id} className="history-item" onClick={() => handleItemClick(record)}>
|
||||
|
|
@ -137,12 +110,12 @@ export default function History() {
|
|||
) : (
|
||||
<div className={`thumbnail-placeholder ${record.status}`}>
|
||||
<img className="thumbnail-image" src={record.inputImageUrl.split(',')[0]} alt="thumbnail" />
|
||||
{/* 生成中状态的扫描效果 */}
|
||||
{/* Scanning effect for generating state */}
|
||||
{isGenerating && (
|
||||
<div className="thumbnail-overlay">
|
||||
<div className="thumbnail-progress-overlay" />
|
||||
<div className="thumbnail-scan-light" />
|
||||
{/* 加载loading 转圈 */}
|
||||
{/* Loading spinner */}
|
||||
<div className="thumbnail-loader" />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue