✨ feat: 应用界面重构 - 从模板中心到AI内容生成平台
- 重构首页:从模板列表展示改为AI功能展示界面 - 更新底部导航:将explore改为content,index改为home - 新增多个页面:积分、兑换、历史记录、结果展示、设置等 - 优化UI组件:新增通用按钮、分类标签、加载状态等组件 - 清理冗余文件:删除旧的认证文档和积分详情页面 - 更新主题配置:调整配色方案和视觉风格 - 修复导入路径:优化组件导入结构 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
149
app/(tabs)/history.tsx
Normal file
149
app/(tabs)/history.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import { ThemedView } from '@/components/themed-view';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import React from 'react';
|
||||
import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
|
||||
type GalleryLane = 'leading' | 'trailing';
|
||||
|
||||
interface GalleryTile {
|
||||
id: string;
|
||||
lane: GalleryLane;
|
||||
uri: string;
|
||||
height: number;
|
||||
}
|
||||
|
||||
const curatedGallery: GalleryTile[] = [
|
||||
{
|
||||
id: 'ember-circle',
|
||||
lane: 'leading',
|
||||
uri: 'https://images.unsplash.com/photo-1616004655122-818af0f3efc6?auto=format&fit=crop&w=1200&q=80',
|
||||
height: 232,
|
||||
},
|
||||
{
|
||||
id: 'ocean-horizon',
|
||||
lane: 'trailing',
|
||||
uri: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1200&q=80',
|
||||
height: 152,
|
||||
},
|
||||
{
|
||||
id: 'studio-poise',
|
||||
lane: 'trailing',
|
||||
uri: 'https://images.unsplash.com/photo-1582096897407-9b6c86e1a8d3?auto=format&fit=crop&w=1200&q=80',
|
||||
height: 232,
|
||||
},
|
||||
{
|
||||
id: 'duo-portrait',
|
||||
lane: 'leading',
|
||||
uri: 'https://images.unsplash.com/photo-1601040122900-86ad461b8234?auto=format&fit=crop&w=1200&q=80',
|
||||
height: 148,
|
||||
},
|
||||
{
|
||||
id: 'sage-armor',
|
||||
lane: 'leading',
|
||||
uri: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=1200&q=80',
|
||||
height: 224,
|
||||
},
|
||||
{
|
||||
id: 'velvet-repose',
|
||||
lane: 'trailing',
|
||||
uri: 'https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?auto=format&fit=crop&w=1200&q=80',
|
||||
height: 188,
|
||||
},
|
||||
{
|
||||
id: 'nocturne-lounge',
|
||||
lane: 'trailing',
|
||||
uri: 'https://images.unsplash.com/photo-1573497491208-6b1acb260507?auto=format&fit=crop&w=1200&q=80',
|
||||
height: 184,
|
||||
},
|
||||
{
|
||||
id: 'sunlit-duet',
|
||||
lane: 'leading',
|
||||
uri: 'https://images.unsplash.com/photo-1531257240576-a4a0ef4af1c8?auto=format&fit=crop&w=1200&q=80',
|
||||
height: 188,
|
||||
},
|
||||
];
|
||||
|
||||
const leadingNarratives = curatedGallery.filter(tile => tile.lane === 'leading');
|
||||
const trailingNarratives = curatedGallery.filter(tile => tile.lane === 'trailing');
|
||||
|
||||
export default function HistoryScreen() {
|
||||
return (
|
||||
<ThemedView style={styles.canvas} lightColor="#050505" darkColor="#050505">
|
||||
<StatusBar style="light" />
|
||||
<SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right']}>
|
||||
<ScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
>
|
||||
<Text style={styles.heading}>Content Generation</Text>
|
||||
<Text style={styles.dateline}>10.19 Wednesday</Text>
|
||||
<View style={styles.gallery}>
|
||||
<View style={styles.leadingLane}>
|
||||
{leadingNarratives.map(tile => (
|
||||
<Image
|
||||
key={tile.id}
|
||||
source={{ uri: tile.uri }}
|
||||
style={[styles.frame, { height: tile.height }]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<View style={styles.trailingLane}>
|
||||
{trailingNarratives.map(tile => (
|
||||
<Image
|
||||
key={tile.id}
|
||||
source={{ uri: tile.uri }}
|
||||
style={[styles.frame, { height: tile.height }]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
canvas: {
|
||||
flex: 1,
|
||||
},
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 24,
|
||||
paddingBottom: 48,
|
||||
},
|
||||
heading: {
|
||||
fontSize: 24,
|
||||
fontWeight: '600',
|
||||
color: '#FFFFFF',
|
||||
textAlign: 'center',
|
||||
letterSpacing: 0.4,
|
||||
},
|
||||
dateline: {
|
||||
marginTop: 16,
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
color: '#EDEDED',
|
||||
},
|
||||
gallery: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 24,
|
||||
},
|
||||
leadingLane: {
|
||||
flex: 1,
|
||||
paddingRight: 12,
|
||||
},
|
||||
trailingLane: {
|
||||
flex: 1,
|
||||
paddingLeft: 12,
|
||||
},
|
||||
frame: {
|
||||
width: '100%',
|
||||
borderRadius: 28,
|
||||
marginBottom: 16,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user