b9399bf4cf
- 重构首页：从模板列表展示改为AI功能展示界面 - 更新底部导航：将explore改为content，index改为home - 新增多个页面：积分、兑换、历史记录、结果展示、设置等 - 优化UI组件：新增通用按钮、分类标签、加载状态等组件 - 清理冗余文件：删除旧的认证文档和积分详情页面 - 更新主题配置：调整配色方案和视觉风格 - 修复导入路径：优化组件导入结构 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
106 lines
2.3 KiB
TypeScript
106 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
View,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
ViewStyle,
|
|
StyleProp,
|
|
} from 'react-native';
|
|
import { ThemedText } from './themed-text';
|
|
import { Colors, Spacing, BorderRadius, FontSize, Shadow } from '@/constants/theme';
|
|
|
|
interface EmptyStateProps {
|
|
icon?: string;
|
|
title: string;
|
|
description?: string;
|
|
actionText?: string;
|
|
onAction?: () => void;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
export function EmptyState({
|
|
icon = '📄',
|
|
title,
|
|
description,
|
|
actionText,
|
|
onAction,
|
|
style,
|
|
}: EmptyStateProps) {
|
|
return (
|
|
<View style={[styles.container, style]}>
|
|
<View style={styles.content}>
|
|
<ThemedText style={styles.icon}>{icon}</ThemedText>
|
|
|
|
<ThemedText style={styles.title}>{title}</ThemedText>
|
|
|
|
{description ? (
|
|
<ThemedText style={styles.description}>
|
|
{description}
|
|
</ThemedText>
|
|
) : null}
|
|
|
|
{actionText && onAction ? (
|
|
<TouchableOpacity
|
|
style={styles.actionButton}
|
|
onPress={onAction}
|
|
activeOpacity={0.8}
|
|
>
|
|
<ThemedText style={styles.actionText}>
|
|
{actionText}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: '100%',
|
|
height: '100%',
|
|
backgroundColor: Colors.background.secondary,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingHorizontal: Spacing.xxl,
|
|
},
|
|
content: {
|
|
alignItems: 'center',
|
|
maxWidth: 280,
|
|
},
|
|
icon: {
|
|
fontSize: 48,
|
|
lineHeight: 64,
|
|
marginBottom: Spacing.lg,
|
|
},
|
|
title: {
|
|
fontSize: FontSize.md,
|
|
fontWeight: '600',
|
|
color: Colors.text.primary,
|
|
textAlign: 'center',
|
|
marginBottom: Spacing.sm,
|
|
},
|
|
description: {
|
|
fontSize: FontSize.sm,
|
|
color: Colors.text.tertiary,
|
|
textAlign: 'center',
|
|
lineHeight: 20,
|
|
marginBottom: Spacing.lg,
|
|
},
|
|
actionButton: {
|
|
backgroundColor: Colors.brand.primary,
|
|
paddingHorizontal: Spacing.xl,
|
|
paddingVertical: Spacing.md,
|
|
borderRadius: BorderRadius.md,
|
|
minWidth: 120,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
...Shadow.small,
|
|
},
|
|
actionText: {
|
|
color: '#ffffff',
|
|
fontSize: FontSize.md,
|
|
fontWeight: '600',
|
|
},
|
|
});
|