153 lines
4.0 KiB
TypeScript
153 lines
4.0 KiB
TypeScript
import { useState } from 'react'
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Pressable,
|
|
Dimensions,
|
|
FlatList,
|
|
} from 'react-native'
|
|
import { Image } from 'expo-image'
|
|
import Drawer from '@/components/ui/drawer'
|
|
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/android-icon-background.png'),
|
|
}))
|
|
|
|
export default function AIGenerationRecordDrawer({
|
|
visible,
|
|
onClose,
|
|
onSelectImage,
|
|
type = 'ai-record',
|
|
}: AIGenerationRecordDrawerProps) {
|
|
const handleImageSelect = (imageSource: any) => {
|
|
onSelectImage?.(imageSource)
|
|
onClose()
|
|
}
|
|
|
|
const title = type === 'ai-record' ? 'AI 生成记录' : '最近用过'
|
|
const images = type === 'ai-record' ? mockAIRecordImages : mockRecentImages
|
|
|
|
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)}
|
|
>
|
|
<Image
|
|
source={item.uri}
|
|
style={styles.image}
|
|
contentFit="cover"
|
|
/>
|
|
</Pressable>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Drawer
|
|
visible={visible}
|
|
onClose={onClose}
|
|
position="bottom"
|
|
height="98%"
|
|
showCloseButton={false}
|
|
>
|
|
<View 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}
|
|
/>
|
|
</View>
|
|
</Drawer>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
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',
|
|
},
|
|
imageGrid: {
|
|
paddingHorizontal: 0,
|
|
paddingBottom: 20,
|
|
},
|
|
imageItem: {
|
|
aspectRatio: 1,
|
|
overflow: 'hidden',
|
|
backgroundColor: '#262A31',
|
|
},
|
|
image: {
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
})
|
|
|