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/SearchWorksResultsSkeleton.tsx
+++ b/components/skeleton/SearchWorksResultsSkeleton.tsx
@@ -0,0 +1,101 @@
+import { View, StyleSheet, Dimensions } from 'react-native'
+import { Skeleton } from './skeleton'
+
+const { width: screenWidth } = Dimensions.get('window')
+const GALLERY_GAP = 1
+const GALLERY_ITEM_SIZE = Math.floor(
+    (screenWidth - GALLERY_GAP * 2) / 3
+)
+
+export function SearchWorksResultsSkeleton() {
+    return (
+        <View style={styles.container}>
+            {/* 分类标签骨架 */}
+            <View style={styles.categoryContainer}>
+                {[1, 2, 3, 4].map((item) => (
+                    <Skeleton
+                        key={item}
+                        width={50}
+                        height={30}
+                        borderRadius={8}
+                        style={styles.categoryTag}
+                    />
+                ))}
+            </View>
+
+            {/* 作品列表骨架 */}
+            <View style={styles.scrollContent}>
+                {[1, 2].map((dateIndex) => (
+                    <View key={dateIndex}>
+                        <Skeleton width={100} height={14} borderRadius={4} style={styles.dateText} />
+                        <View style={styles.galleryGrid}>
+                            {[1, 2, 3, 4, 5, 6].map((item) => (
+                                <View
+                                    key={item}
+                                    style={[
+                                        styles.galleryItem,
+                                        item % 3 !== 2 && styles.galleryItemMarginRight,
+                                        styles.galleryItemMarginBottom,
+                                    ]}
+                                >
+                                    <Skeleton
+                                        width="100%"
+                                        height={undefined}
+                                        borderRadius={0}
+                                        style={styles.gallerySkeleton}
+                                    />
+                                </View>
+                            ))}
+                        </View>
+                    </View>
+                ))}
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#090A0B',
+    },
+    categoryContainer: {
+        flexDirection: 'row',
+        paddingHorizontal: 14,
+        paddingVertical: 16,
+        gap: 8,
+    },
+    categoryTag: {
+        marginBottom: 0,
+    },
+    scrollContent: {
+        paddingBottom: 20,
+    },
+    dateText: {
+        marginBottom: 8,
+        paddingLeft: 14,
+    },
+    galleryGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    galleryItem: {
+        width: GALLERY_ITEM_SIZE,
+        aspectRatio: 1,
+        overflow: 'hidden',
+        backgroundColor: '#1C1E22',
+        position: 'relative',
+    },
+    gallerySkeleton: {
+        width: '100%',
+        height: undefined,
+        aspectRatio: 1,
+    },
+    galleryItemMarginRight: {
+        marginRight: GALLERY_GAP,
+    },
+    galleryItemMarginBottom: {
+        marginBottom: GALLERY_GAP,
+    },
+})
+