88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
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',
|
|
},
|
|
})
|
|
|
|
|