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/skeleton/AIGenerationRecordDrawerSkeleton.tsx
+++ b/components/skeleton/AIGenerationRecordDrawerSkeleton.tsx
@@ -0,0 +1,87 @@
+import { View, StyleSheet, FlatList, Dimensions, Platform } from 'react-native'
+import { Skeleton } from './skeleton'
+
+const { width: screenWidth } = Dimensions.get('window')
+
+const GAP = 2
+const NUM_COLUMNS = 3
+const ITEM_WIDTH = (screenWidth - GAP * 2) / NUM_COLUMNS
+
+export function AIGenerationRecordDrawerSkeleton() {
+    return (
+        <View style={styles.container}>
+            {/* 顶部标题栏骨架 */}
+            <View style={styles.header}>
+                <Skeleton width={120} height={18} borderRadius={4} />
+                <View style={styles.closeButton}>
+                    <Skeleton width={24} height={24} borderRadius={12} />
+                </View>
+            </View>
+
+            {/* 图片网格骨架 */}
+            <FlatList
+                data={Array.from({ length: 30 }, (_, i) => i)}
+                keyExtractor={(item) => item.toString()}
+                numColumns={NUM_COLUMNS}
+                contentContainerStyle={styles.imageGrid}
+                renderItem={({ index }) => {
+                    const isLastInRow = (index + 1) % NUM_COLUMNS === 0
+
+                    return (
+                        <View
+                            style={[
+                                styles.imageItem,
+                                {
+                                    width: ITEM_WIDTH,
+                                    marginRight: isLastInRow ? 0 : GAP,
+                                    marginBottom: GAP,
+                                },
+                            ]}
+                        >
+                            <Skeleton width="100%" height="100%" borderRadius={0} />
+                        </View>
+                    )
+                }}
+                showsVerticalScrollIndicator={false}
+            />
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#16181B',
+        paddingTop: 12,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+        paddingBottom: 12,
+        position: 'relative',
+    },
+    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',
+    },
+})
+
+