378 lines
10 KiB
TypeScript
378 lines
10 KiB
TypeScript
import { ThemedView } from '@/components/themed-view';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import React, { useState, useEffect } from 'react';
|
|
import { ActivityIndicator, Image, ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { getTemplateGenerations, TemplateGeneration } from '@/lib/api/template-generations';
|
|
|
|
interface GroupedData {
|
|
[date: string]: TemplateGeneration[];
|
|
}
|
|
|
|
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 [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await getTemplateGenerations({ limit: 100 });
|
|
|
|
if (response.success && response.data) {
|
|
const grouped = groupByDate(response.data.generations);
|
|
setGroupedData(grouped);
|
|
} else {
|
|
setError('获取数据失败');
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : '获取数据失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
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}
|
|
>
|
|
<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 => (
|
|
<View key={item.id} style={styles.frame}>
|
|
{item.resultUrl && item.resultUrl.length > 0 ? (
|
|
<Image
|
|
source={{ uri: item.resultUrl[0] }}
|
|
style={[styles.image, { height: getImageHeight(item.type) }]}
|
|
/>
|
|
) : (
|
|
<View style={[styles.image, { height: getImageHeight(item.type) }, styles.placeholderImage]}>
|
|
<Text style={styles.placeholderText}>
|
|
{item.type === 'VIDEO' ? '🎬' : item.type === 'IMAGE' ? '🖼️' : '📝'}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
<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>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
<View style={styles.trailingLane}>
|
|
{rightColumn.map(item => (
|
|
<View key={item.id} style={styles.frame}>
|
|
{item.resultUrl && item.resultUrl.length > 0 ? (
|
|
<Image
|
|
source={{ uri: item.resultUrl[0] }}
|
|
style={[styles.image, { height: getImageHeight(item.type) }]}
|
|
/>
|
|
) : (
|
|
<View style={[styles.image, { height: getImageHeight(item.type) }, styles.placeholderImage]}>
|
|
<Text style={styles.placeholderText}>
|
|
{item.type === 'VIDEO' ? '🎬' : item.type === 'IMAGE' ? '🖼️' : '📝'}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
<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>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</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: 28,
|
|
marginBottom: 16,
|
|
overflow: 'hidden',
|
|
},
|
|
image: {
|
|
width: '100%',
|
|
borderRadius: 28,
|
|
},
|
|
placeholderImage: {
|
|
backgroundColor: '#2A2A2A',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
placeholderText: {
|
|
fontSize: 48,
|
|
},
|
|
overlay: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
padding: 12,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.6)',
|
|
borderBottomLeftRadius: 28,
|
|
borderBottomRightRadius: 28,
|
|
},
|
|
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,
|
|
},
|
|
});
|