127 lines
3.3 KiB
TypeScript
127 lines
3.3 KiB
TypeScript
import { ConversationItem } from '@/components/chat/ConversationItem';
|
||
import { AppColors } from '@/constants/theme';
|
||
import { mockConversations } from '@/data/mockData';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import { router } from 'expo-router';
|
||
import React from 'react';
|
||
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
|
||
export default function ChatListScreen() {
|
||
const handleConversationPress = (conversationId: string) => {
|
||
router.push(`/chat/${conversationId}`);
|
||
};
|
||
|
||
return (
|
||
<SafeAreaView style={styles.container} edges={['top']}>
|
||
{/* Header */}
|
||
<View style={styles.header}>
|
||
<Text style={styles.headerTitle}>往事拾遗</Text>
|
||
</View>
|
||
|
||
{/* Content */}
|
||
<ScrollView
|
||
style={styles.content}
|
||
contentContainerStyle={styles.contentContainer}
|
||
showsVerticalScrollIndicator={false}
|
||
>
|
||
{/* Section Title */}
|
||
<Text style={styles.sectionTitle}>我的对话</Text>
|
||
|
||
{/* Conversation List */}
|
||
{mockConversations.map((conversation) => (
|
||
<React.Fragment key={conversation.id}>
|
||
<ConversationItem
|
||
conversation={conversation}
|
||
onPress={() => handleConversationPress(conversation.id)}
|
||
/>
|
||
<View style={styles.divider} />
|
||
</React.Fragment>
|
||
))}
|
||
|
||
{/* Tip Card */}
|
||
<View style={styles.tipCard}>
|
||
<View style={styles.tipHeader}>
|
||
<Ionicons
|
||
name="information-circle-outline"
|
||
size={18}
|
||
color={AppColors.mediumPurple}
|
||
/>
|
||
<Text style={styles.tipTitle}>小贴士</Text>
|
||
</View>
|
||
<Text style={styles.tipContent}>
|
||
每天花几分钟聊聊往事，AI 会帮您整理成完整的回忆录。您可以聊童年趣事、求学经历、工作故事，或者任何难忘的回忆。
|
||
</Text>
|
||
</View>
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: AppColors.mediumPurple,
|
||
},
|
||
header: {
|
||
height: 62,
|
||
paddingHorizontal: 20,
|
||
justifyContent: 'center',
|
||
backgroundColor: AppColors.mediumPurple,
|
||
},
|
||
headerTitle: {
|
||
fontSize: 32,
|
||
fontWeight: '600',
|
||
color: AppColors.white,
|
||
},
|
||
content: {
|
||
flex: 1,
|
||
backgroundColor: AppColors.cream,
|
||
},
|
||
contentContainer: {
|
||
paddingBottom: 20,
|
||
},
|
||
sectionTitle: {
|
||
fontSize: 13,
|
||
color: AppColors.slatePurple,
|
||
fontWeight: '500',
|
||
letterSpacing: 0.5,
|
||
paddingHorizontal: 20,
|
||
paddingTop: 16,
|
||
paddingBottom: 10,
|
||
},
|
||
divider: {
|
||
height: 1,
|
||
backgroundColor: 'rgba(32, 0, 40, 0.06)',
|
||
marginHorizontal: 20,
|
||
},
|
||
tipCard: {
|
||
marginHorizontal: 20,
|
||
marginTop: 20,
|
||
padding: 16,
|
||
backgroundColor: AppColors.white,
|
||
borderRadius: 16,
|
||
shadowColor: AppColors.deepPurple,
|
||
shadowOffset: { width: 0, height: 2 },
|
||
shadowOpacity: 0.06,
|
||
shadowRadius: 12,
|
||
elevation: 2,
|
||
},
|
||
tipHeader: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 8,
|
||
},
|
||
tipTitle: {
|
||
fontSize: 14,
|
||
fontWeight: '500',
|
||
color: AppColors.deepPurple,
|
||
marginLeft: 8,
|
||
},
|
||
tipContent: {
|
||
fontSize: 13,
|
||
color: AppColors.slatePurple,
|
||
lineHeight: 21,
|
||
},
|
||
});
|