545 lines
14 KiB
TypeScript
545 lines
14 KiB
TypeScript
import { ThemedView } from '@/components/themed-view';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
Image,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
RefreshControl,
|
|
Platform,
|
|
TouchableOpacity
|
|
} from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { getTemplateGenerations, TemplateGeneration } from '@/lib/api/template-generations';
|
|
import { router } from 'expo-router';
|
|
|
|
interface GroupedData {
|
|
[date: string]: TemplateGeneration[];
|
|
}
|
|
|
|
/**
|
|
* 根据文件 URL 后缀名判断媒体类型
|
|
*/
|
|
function getMediaType(url: string): 'image' | 'video' | 'unknown' {
|
|
if (!url) return 'unknown';
|
|
|
|
const extension = url.split('.').pop()?.toLowerCase() || '';
|
|
|
|
const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'];
|
|
const videoExts = ['mp4', 'webm', 'avi', 'mov', 'mkv', 'flv', 'm4v'];
|
|
|
|
if (imageExts.includes(extension)) return 'image';
|
|
if (videoExts.includes(extension)) return 'video';
|
|
return 'unknown';
|
|
}
|
|
|
|
const groupByDate = (data: TemplateGeneration[]): GroupedData => {
|
|
const groups: GroupedData = {};
|
|
|
|
data.forEach(item => {
|
|
const date = new Date(item.createdAt);
|
|
const dateKey = date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
weekday: 'short'
|
|
});
|
|
|
|
if (!groups[dateKey]) {
|
|
groups[dateKey] = [];
|
|
}
|
|
groups[dateKey].push(item);
|
|
});
|
|
|
|
return groups;
|
|
};
|
|
|
|
const formatDateLabel = (dateStr: string): string => {
|
|
const date = new Date(dateStr);
|
|
const today = new Date();
|
|
const yesterday = new Date(today);
|
|
yesterday.setDate(yesterday.getDate() - 1);
|
|
|
|
const dateOnly = new Date(date.toDateString());
|
|
const todayOnly = new Date(today.toDateString());
|
|
const yesterdayOnly = new Date(yesterday.toDateString());
|
|
|
|
if (dateOnly.getTime() === todayOnly.getTime()) {
|
|
return 'Today';
|
|
} else if (dateOnly.getTime() === yesterdayOnly.getTime()) {
|
|
return 'Yesterday';
|
|
} else {
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
weekday: 'short'
|
|
});
|
|
}
|
|
};
|
|
|
|
const distributeToColumns = (items: TemplateGeneration[]) => {
|
|
const leftColumn: TemplateGeneration[] = [];
|
|
const rightColumn: TemplateGeneration[] = [];
|
|
let leftHeight = 0;
|
|
let rightHeight = 0;
|
|
|
|
items.forEach(item => {
|
|
const height = item.type === 'VIDEO' ? 280 : 240;
|
|
|
|
if (leftHeight <= rightHeight) {
|
|
leftColumn.push(item);
|
|
leftHeight += height + 16;
|
|
} else {
|
|
rightColumn.push(item);
|
|
rightHeight += height + 16;
|
|
}
|
|
});
|
|
|
|
return { leftColumn, rightColumn };
|
|
};
|
|
|
|
const getImageHeight = (type: string): number => {
|
|
switch (type) {
|
|
case 'VIDEO':
|
|
return 280;
|
|
case 'IMAGE':
|
|
return 240;
|
|
default:
|
|
return 200;
|
|
}
|
|
};
|
|
|
|
const getStatusColor = (status: string): string => {
|
|
switch (status) {
|
|
case 'completed':
|
|
return '#4CAF50';
|
|
case 'processing':
|
|
case 'pending':
|
|
return '#FFA726';
|
|
case 'failed':
|
|
return '#EF5350';
|
|
default:
|
|
return '#9E9E9E';
|
|
}
|
|
};
|
|
|
|
const getStatusText = (status: string): string => {
|
|
switch (status) {
|
|
case 'completed':
|
|
return '已完成';
|
|
case 'processing':
|
|
case 'pending':
|
|
return '处理中';
|
|
case 'failed':
|
|
return '失败';
|
|
default:
|
|
return status;
|
|
}
|
|
};
|
|
|
|
export default function HistoryScreen() {
|
|
const [groupedData, setGroupedData] = useState<GroupedData>({});
|
|
const [loading, setLoading] = useState(true);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [loadingMore, setLoadingMore] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [page, setPage] = useState(1);
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const [allGenerations, setAllGenerations] = useState<TemplateGeneration[]>([]);
|
|
|
|
const fetchData = async (pageNum: number = 1, isRefresh: boolean = false) => {
|
|
try {
|
|
if (isRefresh) {
|
|
setRefreshing(true);
|
|
} else if (pageNum === 1) {
|
|
setLoading(true);
|
|
} else {
|
|
setLoadingMore(true);
|
|
}
|
|
|
|
const response = await getTemplateGenerations({ page: pageNum, limit: 20 });
|
|
|
|
if (response.success && response.data) {
|
|
const newGenerations = response.data.generations;
|
|
|
|
if (isRefresh || pageNum === 1) {
|
|
setAllGenerations(newGenerations);
|
|
setPage(1);
|
|
} else {
|
|
setAllGenerations(prev => [...prev, ...newGenerations]);
|
|
}
|
|
|
|
setHasMore(newGenerations.length === 20);
|
|
const grouped = groupByDate(isRefresh || pageNum === 1 ? newGenerations : [...allGenerations, ...newGenerations]);
|
|
setGroupedData(grouped);
|
|
setError(null);
|
|
} else {
|
|
setError('获取数据失败');
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to fetch data:', err);
|
|
setError(err instanceof Error ? err.message : '获取数据失败');
|
|
} finally {
|
|
setLoading(false);
|
|
setRefreshing(false);
|
|
setLoadingMore(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchData(1);
|
|
}, []);
|
|
|
|
const onRefresh = useCallback(() => {
|
|
fetchData(1, true);
|
|
}, []);
|
|
|
|
const loadMore = useCallback(() => {
|
|
if (!loadingMore && hasMore && !loading) {
|
|
const nextPage = page + 1;
|
|
setPage(nextPage);
|
|
fetchData(nextPage, false);
|
|
}
|
|
}, [loadingMore, hasMore, page, loading]);
|
|
|
|
const handleScroll = (event: any) => {
|
|
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
|
|
const paddingToBottom = 20;
|
|
const isCloseToBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
|
|
|
|
if (isCloseToBottom && !loadingMore && hasMore) {
|
|
loadMore();
|
|
}
|
|
};
|
|
|
|
const renderMediaItem = (item: TemplateGeneration) => {
|
|
const url = item.resultUrl && item.resultUrl.length > 0 ? item.resultUrl[0] : null;
|
|
|
|
if (!url) {
|
|
return (
|
|
<View style={[styles.image, { height: getImageHeight(item.type) }, styles.placeholderImage]}>
|
|
<Text style={styles.placeholderText}>
|
|
{item.type === 'VIDEO' ? '🎬' : item.type === 'IMAGE' ? '🖼️' : '📝'}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const mediaType = getMediaType(url);
|
|
|
|
if (mediaType === 'video') {
|
|
if (Platform.OS === 'web') {
|
|
return (
|
|
<video
|
|
src={url}
|
|
style={{
|
|
width: '100%',
|
|
height: getImageHeight(item.type),
|
|
objectFit: 'cover' as any,
|
|
}}
|
|
muted
|
|
playsInline
|
|
preload="metadata"
|
|
/>
|
|
);
|
|
} else {
|
|
return (
|
|
<View style={[styles.image, { height: getImageHeight(item.type) }, styles.videoPlaceholder]}>
|
|
<Text style={styles.videoIcon}>🎬</Text>
|
|
<Text style={styles.videoText}>视频</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Image
|
|
source={{ uri: url }}
|
|
style={[styles.image, { height: getImageHeight(item.type) }]}
|
|
resizeMode="cover"
|
|
/>
|
|
);
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<ThemedView style={styles.canvas} lightColor="#050505" darkColor="#050505">
|
|
<StatusBar style="light" />
|
|
<SafeAreaView style={styles.safeArea}>
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator size="large" color="#FFFFFF" />
|
|
<Text style={styles.loadingText}>加载中...</Text>
|
|
</View>
|
|
</SafeAreaView>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<ThemedView style={styles.canvas} lightColor="#050505" darkColor="#050505">
|
|
<StatusBar style="light" />
|
|
<SafeAreaView style={styles.safeArea}>
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>{error}</Text>
|
|
</View>
|
|
</SafeAreaView>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ThemedView style={styles.canvas} lightColor="#050505" darkColor="#050505">
|
|
<StatusBar style="light" />
|
|
<SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right']}>
|
|
<ScrollView
|
|
showsVerticalScrollIndicator={false}
|
|
contentContainerStyle={styles.scrollContent}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={refreshing}
|
|
onRefresh={onRefresh}
|
|
tintColor="#FFFFFF"
|
|
colors={['#FFFFFF']}
|
|
/>
|
|
}
|
|
onScroll={handleScroll}
|
|
scrollEventThrottle={400}
|
|
>
|
|
<Text style={styles.heading}>Content Generation</Text>
|
|
|
|
{Object.keys(groupedData).length === 0 ? (
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.emptyText}>暂无生成记录</Text>
|
|
</View>
|
|
) : (
|
|
Object.entries(groupedData).map(([date, items]) => {
|
|
const { leftColumn, rightColumn } = distributeToColumns(items);
|
|
|
|
return (
|
|
<View key={date} style={styles.dateGroup}>
|
|
<Text style={styles.dateline}>{date}</Text>
|
|
<View style={styles.gallery}>
|
|
<View style={styles.leadingLane}>
|
|
{leftColumn.map(item => (
|
|
<TouchableOpacity
|
|
key={item.id}
|
|
style={styles.frame}
|
|
onPress={() => router.push(`/result?generationId=${item.id}`)}
|
|
activeOpacity={0.9}
|
|
>
|
|
{renderMediaItem(item)}
|
|
|
|
<View style={styles.overlay}>
|
|
<View style={styles.statusBadge}>
|
|
<View style={[styles.statusDot, { backgroundColor: getStatusColor(item.status) }]} />
|
|
<Text style={styles.statusText}>{getStatusText(item.status)}</Text>
|
|
</View>
|
|
<Text style={styles.templateName}>{item.template?.title || '未知模板'}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
<View style={styles.trailingLane}>
|
|
{rightColumn.map(item => (
|
|
<TouchableOpacity
|
|
key={item.id}
|
|
style={styles.frame}
|
|
onPress={() => router.push(`/result?generationId=${item.id}`)}
|
|
activeOpacity={0.9}
|
|
>
|
|
{renderMediaItem(item)}
|
|
|
|
<View style={styles.overlay}>
|
|
<View style={styles.statusBadge}>
|
|
<View style={[styles.statusDot, { backgroundColor: getStatusColor(item.status) }]} />
|
|
<Text style={styles.statusText}>{getStatusText(item.status)}</Text>
|
|
</View>
|
|
<Text style={styles.templateName}>{item.template?.title || '未知模板'}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
})
|
|
)}
|
|
|
|
{loadingMore && (
|
|
<View style={styles.loadingMoreContainer}>
|
|
<ActivityIndicator size="small" color="#FFFFFF" />
|
|
<Text style={styles.loadingMoreText}>加载更多...</Text>
|
|
</View>
|
|
)}
|
|
|
|
{!hasMore && allGenerations.length > 0 && (
|
|
<View style={styles.noMoreContainer}>
|
|
<Text style={styles.noMoreText}>没有更多内容了</Text>
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
canvas: {
|
|
flex: 1,
|
|
},
|
|
safeArea: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
paddingHorizontal: 24,
|
|
paddingTop: 24,
|
|
paddingBottom: 48,
|
|
},
|
|
heading: {
|
|
fontSize: 24,
|
|
fontWeight: '600',
|
|
color: '#FFFFFF',
|
|
textAlign: 'center',
|
|
letterSpacing: 0.4,
|
|
},
|
|
dateline: {
|
|
marginTop: 16,
|
|
marginBottom: 16,
|
|
fontSize: 16,
|
|
fontWeight: '500',
|
|
color: '#EDEDED',
|
|
},
|
|
gallery: {
|
|
flexDirection: 'row',
|
|
marginBottom: 24,
|
|
},
|
|
leadingLane: {
|
|
flex: 1,
|
|
paddingRight: 12,
|
|
},
|
|
trailingLane: {
|
|
flex: 1,
|
|
paddingLeft: 12,
|
|
},
|
|
frame: {
|
|
width: '100%',
|
|
borderRadius: 16,
|
|
marginBottom: 16,
|
|
overflow: 'hidden',
|
|
backgroundColor: '#1A1A1A',
|
|
},
|
|
image: {
|
|
width: '100%',
|
|
},
|
|
placeholderImage: {
|
|
backgroundColor: '#2A2A2A',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
placeholderText: {
|
|
fontSize: 48,
|
|
},
|
|
videoPlaceholder: {
|
|
backgroundColor: '#1A1A1A',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
videoIcon: {
|
|
fontSize: 48,
|
|
marginBottom: 8,
|
|
},
|
|
videoText: {
|
|
fontSize: 14,
|
|
color: '#9E9E9E',
|
|
},
|
|
overlay: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
padding: 12,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
borderBottomLeftRadius: 16,
|
|
borderBottomRightRadius: 16,
|
|
},
|
|
statusBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: 4,
|
|
},
|
|
statusDot: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
marginRight: 6,
|
|
},
|
|
statusText: {
|
|
fontSize: 12,
|
|
color: '#FFFFFF',
|
|
fontWeight: '500',
|
|
},
|
|
templateName: {
|
|
fontSize: 13,
|
|
color: '#FFFFFF',
|
|
fontWeight: '600',
|
|
},
|
|
loadingContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
loadingText: {
|
|
marginTop: 16,
|
|
fontSize: 16,
|
|
color: '#FFFFFF',
|
|
},
|
|
errorContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: 24,
|
|
},
|
|
errorText: {
|
|
fontSize: 16,
|
|
color: '#EF5350',
|
|
textAlign: 'center',
|
|
},
|
|
emptyContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: 48,
|
|
},
|
|
emptyText: {
|
|
fontSize: 16,
|
|
color: '#9E9E9E',
|
|
textAlign: 'center',
|
|
},
|
|
dateGroup: {
|
|
marginBottom: 24,
|
|
},
|
|
loadingMoreContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingVertical: 20,
|
|
gap: 12,
|
|
},
|
|
loadingMoreText: {
|
|
fontSize: 14,
|
|
color: '#9E9E9E',
|
|
},
|
|
noMoreContainer: {
|
|
paddingVertical: 20,
|
|
alignItems: 'center',
|
|
},
|
|
noMoreText: {
|
|
fontSize: 14,
|
|
color: '#666666',
|
|
},
|
|
});
|