93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import { View, StyleSheet, Dimensions } from 'react-native'
|
|
import { Skeleton } from './skeleton'
|
|
|
|
const { width: screenWidth } = Dimensions.get('window')
|
|
|
|
export function GenerationRecordSkeleton() {
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* 顶部导航栏骨架 */}
|
|
<View style={styles.header}>
|
|
<Skeleton width={22} height={22} borderRadius={4} />
|
|
<Skeleton width={80} height={16} borderRadius={4} />
|
|
<View style={styles.headerSpacer} />
|
|
</View>
|
|
|
|
{/* AI 视频标签骨架 */}
|
|
<View style={styles.categorySection}>
|
|
<Skeleton width={16} height={16} borderRadius={4} />
|
|
<Skeleton width={60} height={16} borderRadius={4} />
|
|
</View>
|
|
|
|
{/* 原图标签骨架 */}
|
|
<View style={styles.originalImageSection}>
|
|
<Skeleton width={30} height={14} borderRadius={4} />
|
|
</View>
|
|
|
|
{/* 主图片骨架 */}
|
|
<Skeleton
|
|
width={screenWidth - 24}
|
|
height={(screenWidth - 24) * 1.32}
|
|
borderRadius={16}
|
|
style={styles.imageContainer}
|
|
/>
|
|
|
|
{/* 时长骨架 */}
|
|
<Skeleton width={50} height={14} borderRadius={4} style={styles.durationText} />
|
|
|
|
{/* 底部操作按钮骨架 */}
|
|
<View style={styles.actionButtons}>
|
|
<Skeleton width={80} height={32} borderRadius={8} />
|
|
<Skeleton width={80} height={32} borderRadius={8} />
|
|
<Skeleton width={32} height={32} borderRadius={8} style={styles.deleteButton} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#090A0B',
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 12,
|
|
paddingTop: 16,
|
|
paddingBottom: 20,
|
|
},
|
|
headerSpacer: {
|
|
width: 22,
|
|
},
|
|
categorySection: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
marginBottom: 8,
|
|
gap: 4,
|
|
},
|
|
originalImageSection: {
|
|
paddingHorizontal: 16,
|
|
marginBottom: 8,
|
|
},
|
|
imageContainer: {
|
|
marginHorizontal: 12,
|
|
marginBottom: 14,
|
|
},
|
|
durationText: {
|
|
paddingLeft: 28,
|
|
marginBottom: 22,
|
|
},
|
|
actionButtons: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 12,
|
|
gap: 8,
|
|
},
|
|
deleteButton: {
|
|
marginLeft: 'auto',
|
|
},
|
|
})
|
|
|