Initial commit: expo-popcore-app

2025-12-25 16:25:55 +08:00
commit 02d0c807cd
160 changed files with 39560 additions and 0 deletions
--- a/components/drawer/AIGenerationRecordDrawer.tsx
+++ b/components/drawer/AIGenerationRecordDrawer.tsx
@@ -0,0 +1,213 @@
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react'
+import {
+    View,
+    Text,
+    StyleSheet,
+    Pressable,
+    Dimensions,
+    FlatList,
+    Platform,
+} from 'react-native'
+import { Image } from 'expo-image'
+import { useTranslation } from 'react-i18next'
+import BottomSheet, { BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet'
+import { CloseIcon } from '@/components/icon'
+
+const { width: screenWidth } = Dimensions.get('window')
+
+type DrawerType = 'ai-record' | 'recent'
+
+interface AIGenerationRecordDrawerProps {
+    visible: boolean
+    onClose: () => void
+    onSelectImage?: (imageUri: any) => void
+    type?: DrawerType
+}
+
+// 模拟 AI 生成记录图片数据
+const mockAIRecordImages = Array.from({ length: 12 }, (_, i) => ({
+    id: i + 1,
+    uri: require('@/assets/images/android-icon-background.png'),
+}))
+
+// 模拟最近用过的图片数据
+const mockRecentImages = Array.from({ length: 12 }, (_, i) => ({
+    id: i + 1,
+    uri: require('@/assets/images/membership.png'),
+}))
+
+export default function AIGenerationRecordDrawer({
+    visible,
+    onClose,
+    onSelectImage,
+    type = 'ai-record',
+}: AIGenerationRecordDrawerProps) {
+    const { t } = useTranslation()
+    const bottomSheetRef = useRef<BottomSheet>(null)
+    
+    const snapPoints = useMemo(() => ['98%'], [])
+    
+    useEffect(() => {
+        if (visible) {
+            bottomSheetRef.current?.expand()
+        } else {
+            bottomSheetRef.current?.close()
+        }
+    }, [visible])
+    
+    const handleSheetChanges = useCallback((index: number) => {
+        if (index === -1) {
+            onClose()
+        }
+    }, [onClose])
+    
+    const handleImageSelect = (imageSource: any) => {
+        onSelectImage?.(imageSource)
+        onClose()
+    }
+
+    const title = type === 'ai-record' ? t('aiGenerationRecord.title') : t('aiGenerationRecord.recentUsed')
+    const images = type === 'ai-record' ? mockAIRecordImages : mockRecentImages
+    
+    const renderBackdrop = useCallback(
+        (props: any) => (
+            <BottomSheetBackdrop
+                {...props}
+                disappearsOnIndex={-1}
+                appearsOnIndex={0}
+                opacity={0.5}
+            />
+        ),
+        []
+    )
+
+    const renderImageItem = ({ item, index }: { item: typeof mockAIRecordImages[0]; index: number }) => {
+        const gap = 2
+        const itemWidth = (screenWidth - gap * 2) / 3
+        
+        return (
+            <Pressable
+                style={[
+                    styles.imageItem,
+                    {
+                        width: itemWidth,
+                        marginRight: (index + 1) % 3 !== 0 ? gap : 0,
+                        marginBottom: gap,
+                    },
+                ]}
+                onPress={() => handleImageSelect(item.uri)}
+                android_ripple={{ color: 'rgba(255, 255, 255, 0.1)' }}
+            >
+                <Image
+                    source={item.uri}
+                    style={styles.image}
+                    contentFit="cover"
+                />
+            </Pressable>
+        )
+    }
+
+    return (
+        <BottomSheet
+            ref={bottomSheetRef}
+            index={visible ? 0 : -1}
+            snapPoints={snapPoints}
+            onChange={handleSheetChanges}
+            enablePanDownToClose
+            backgroundStyle={styles.bottomSheetBackground}
+            handleIndicatorStyle={styles.handleIndicator}
+            backdropComponent={renderBackdrop}
+        >
+            <BottomSheetView style={styles.container}>
+                {/* 顶部标题栏 */}
+                <View style={styles.header}>
+                    <Text style={styles.title}>{title}</Text>
+                    <Pressable
+                        style={styles.closeButton}
+                        onPress={onClose}
+                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                    >
+                        <CloseIcon />
+                    </Pressable>
+                </View>
+
+                {/* 图片网格 */}
+                <FlatList
+                    data={images}
+                    renderItem={renderImageItem}
+                    keyExtractor={(item) => item.id.toString()}
+                    numColumns={3}
+                    contentContainerStyle={styles.imageGrid}
+                    showsVerticalScrollIndicator={false}
+                    removeClippedSubviews={Platform.OS === 'android'}
+                    maxToRenderPerBatch={Platform.OS === 'ios' ? 10 : 5}
+                    updateCellsBatchingPeriod={Platform.OS === 'ios' ? 50 : 100}
+                    initialNumToRender={Platform.OS === 'ios' ? 15 : 10}
+                    windowSize={Platform.OS === 'ios' ? 10 : 5}
+                    getItemLayout={(data, index) => {
+                        const gap = 2
+                        const itemWidth = (screenWidth - gap * 2) / 3
+                        const rowIndex = Math.floor(index / 3)
+                        return {
+                            length: itemWidth,
+                            offset: rowIndex * (itemWidth + gap),
+                            index,
+                        }
+                    }}
+                />
+            </BottomSheetView>
+        </BottomSheet>
+    )
+}
+
+const styles = StyleSheet.create({
+    bottomSheetBackground: {
+        backgroundColor: '#16181B',
+    },
+    handleIndicator: {
+        backgroundColor: '#666666',
+    },
+    container: {
+        flex: 1,
+        backgroundColor: '#16181B',
+        paddingTop: 12,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+        paddingBottom: 12,
+        position: 'relative',
+    },
+    title: {
+        color: '#F5F5F5',
+        fontSize: 15,
+        fontWeight: '600',
+    },
+    closeButton: {
+        position: 'absolute',
+        right: 16,
+        width: 24,
+        height: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10,
+    },
+    imageGrid: {
+        paddingHorizontal: 0,
+        paddingBottom: Platform.OS === 'ios' ? 20 : 16,
+    },
+    imageItem: {
+        // aspectRatio = width / height
+        // 1 : 1.3 (width : height) => 1 / 1.3
+        aspectRatio: 1 / 1.3,
+        overflow: 'hidden',
+        backgroundColor: '#262A31',
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+})
+