Initial commit: expo-popcore-app

app/generationRecord.tsx

@@ -0,0 +1,244 @@
+import {
+    View,
+    Text,
+    StyleSheet,
+    ScrollView,
+    Dimensions,
+    Pressable,
+    StatusBar as RNStatusBar,
+} from 'react-native'
+import { StatusBar } from 'expo-status-bar'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { Image } from 'expo-image'
+import { useRouter, useLocalSearchParams } from 'expo-router'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { LeftArrowIcon, DeleteIcon, EditIcon, ChangeIcon, WhiteStarIcon } from '@/components/icon'
+import { DeleteConfirmDialog } from '@/components/ui/delete-confirm-dialog'
+
+const { width: screenWidth } = Dimensions.get('window')
+
+export default function GenerationRecordScreen() {
+    const { t } = useTranslation()
+    const router = useRouter()
+    const params = useLocalSearchParams()
+    const workId = params.id as string
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+
+    const handleDelete = () => {
+        // TODO: 实现删除逻辑
+        console.log('删除记录:', workId)
+    }
+
+    return (
+        <SafeAreaView style={styles.container} edges={['top']}>
+            <StatusBar style="light" />
+            <RNStatusBar barStyle="light-content" />
+            <ScrollView
+                style={styles.scrollView}
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
+            >
+                {/* 顶部导航栏 */}
+                <View style={styles.header}>
+                    <Pressable
+                        style={styles.backButton}
+                        onPress={() => router.back()}
+                    >
+                        <LeftArrowIcon />
+                    </Pressable>
+                    <Text style={styles.headerTitle}>{t('generationRecord.title')}</Text>
+                    <View style={styles.headerSpacer} />
+                </View>
+
+                {/* AI 视频标签 */}
+                <View style={styles.categorySection}>
+                    <View style={styles.categoryIcon}>
+                        <WhiteStarIcon />
+                    </View>
+                    <Text style={styles.categoryText}>{t('generationRecord.aiVideo')}</Text>
+                </View>
+
+                {/* 原图标签 */}
+                <View style={styles.originalImageSection}>
+                    <Text style={styles.originalImageLabel}>{t('generationRecord.originalImage')}</Text>
+                    <View style={styles.originalImageDivider} />
+                </View>
+
+                {/* 主图片/视频预览区域 */}
+                <View style={styles.imageContainer}>
+                    <Image
+                        source={require('@/assets/images/android-icon-background.png')}
+                        style={styles.mainImage}
+                        contentFit="cover"
+                    />
+                    {/* 视频时长显示 */}
+                   
+                       
+                </View>
+                <Text style={styles.durationText}>00:03</Text>
+                {/* 底部操作按钮 */}
+                <View style={styles.actionButtons}>
+                    <Pressable style={styles.actionButton}   onPress={() => {
+                        router.push({
+                                pathname: '/generateVideo' as any,
+                                params: {
+                                    template: JSON.stringify({
+                                        id: 1,
+                                        title: 'AI 视频',
+                                        image: require('@/assets/images/android-icon-background.png'),
+                                        users: 6349,
+                                        height: 214,
+                                    }),
+                                },
+                            })
+                        }}>
+                        <EditIcon />
+                        <Text style={styles.actionButtonText}>{t('generationRecord.reEdit')}</Text>
+                    </Pressable>
+                    <Pressable style={styles.actionButton}>
+                        <ChangeIcon />
+                        <Text style={styles.actionButtonText}>{t('generationRecord.regenerate')}</Text>
+                    </Pressable>
+                    <Pressable 
+                        style={styles.deleteButton}
+                        onPress={() => setDeleteDialogOpen(true)}
+                    >
+                        <DeleteIcon />
+                    </Pressable>
+                </View>
+            </ScrollView>
+
+            {/* 删除确认弹窗 */}
+            <DeleteConfirmDialog
+                open={deleteDialogOpen}
+                onOpenChange={setDeleteDialogOpen}
+                onConfirm={handleDelete}
+            />
+        </SafeAreaView>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#090A0B',
+    },
+    scrollView: {
+        flex: 1,
+        backgroundColor: '#090A0B',
+    },
+    scrollContent: {
+        backgroundColor: '#090A0B',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingTop: 16,
+        paddingBottom: 20,
+    },
+    backButton: {
+        width: 22,
+        height: 22,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    headerTitle: {
+        color: '#F5F5F5',
+        fontSize: 14,
+        fontWeight: '600',
+        flex: 1,
+        textAlign: 'center',
+    },
+    headerSpacer: {
+        width: 22,
+    },
+    categorySection: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        marginBottom: 8,
+        gap:4,
+    },
+    categoryIcon: {
+        width: 16,
+        height: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    categoryText: {
+        color: '#F5F5F5',
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    originalImageSection: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        marginBottom: 8,
+    },
+    originalImageLabel: {
+        color: '#8A8A8A',
+        fontSize: 13,
+        marginRight: 6,
+    },
+    originalImageDivider: {
+        width: 1,
+        height: 12,
+        backgroundColor: '#FFFFFF33',
+    },
+    imageContainer: {
+        width: screenWidth - 24,
+        height: (screenWidth - 24) * 1.32, // 根据设计稿比例计算
+        marginHorizontal: 12,
+        marginBottom: 14,
+        borderRadius: 16,
+        overflow: 'hidden',
+        backgroundColor: '#1C1E22',
+        position: 'relative',
+    },
+    mainImage: {
+        width: '100%',
+        height: '100%',
+    },
+    durationText: {
+        paddingLeft: 28,
+        color: '#F5F5F5',
+        fontSize: 13,
+        marginBottom: 22,
+        fontWeight: '500',
+    },
+    actionButtons: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        gap: 8,
+    },
+    actionButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 8,
+        paddingVertical: 6,
+        borderRadius: 8,
+        backgroundColor: '#1C1E22',
+        height: 32,
+    },
+    actionButtonText: {
+        color: '#F5F5F5',
+        fontSize: 11,
+        fontWeight: '500',
+    },
+    deleteButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 8,
+        backgroundColor: '#1C1E22',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: 'auto',
+    },
+})
+