From b9399bf4cfdbc9180c60d7a15d626f09564c1158 Mon Sep 17 00:00:00 2001 From: imeepos Date: Fri, 31 Oct 2025 17:53:56 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E5=BA=94=E7=94=A8=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E9=87=8D=E6=9E=84=20-=20=E4=BB=8E=E6=A8=A1=E6=9D=BF?= =?UTF-8?q?=E4=B8=AD=E5=BF=83=E5=88=B0AI=E5=86=85=E5=AE=B9=E7=94=9F?= =?UTF-8?q?=E6=88=90=E5=B9=B3=E5=8F=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 重构首页：从模板列表展示改为AI功能展示界面 - 更新底部导航：将explore改为content，index改为home - 新增多个页面：积分、兑换、历史记录、结果展示、设置等 - 优化UI组件：新增通用按钮、分类标签、加载状态等组件 - 清理冗余文件：删除旧的认证文档和积分详情页面 - 更新主题配置：调整配色方案和视觉风格 - 修复导入路径：优化组件导入结构 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .gitignore | 2 + app/(tabs)/_layout.tsx | 10 +- app/(tabs)/explore.tsx | 205 ------ app/(tabs)/history.tsx | 149 +++++ app/(tabs)/index.tsx | 450 ++++--------- app/(tabs)/profile.tsx | 1 - app/_layout.tsx | 5 +- app/edit/[id].tsx | 621 ++++++++++++++++++ app/exchange.tsx | 387 +++++++++++ app/{points-details.tsx => points.tsx} | 158 +++-- app/recharge.tsx | 309 ++++++++- app/result.tsx | 542 ++++++++++++++++ app/settings/index.tsx | 217 +++++++ app/template/[id]/run.tsx | 861 +++++++++++++------------ app/templates/[id].tsx | 295 +++++++++ app/templates/[id]/form.tsx | 709 ++++++++++++++++++++ bun.lock | 3 + components/Button.example.tsx | 200 ++++++ components/Button.tsx | 155 +++++ components/CategoryTabs.example.tsx | 64 ++ components/CategoryTabs.tsx | 162 +++++ components/CommonHeader.tsx | 105 +++ components/ErrorRetry.tsx | 105 +++ components/GiftCard.tsx | 130 ++++ components/HistoryCard.example.tsx | 49 ++ components/HistoryCard.tsx | 200 ++++++ components/LoadingState.tsx | 48 ++ components/ProgressIndicator.tsx | 137 ++++ components/empty-state.tsx | 105 +++ components/templates/template-card.tsx | 19 +- components/ui/button-index.ts | 2 + components/ui/button.tsx | 137 ++++ constants/theme.ts | 117 ++++ docs/AUTH_SYSTEM.md | 393 ----------- docs/AUTH_UPGRADE_SUMMARY.md | 229 ------- lib/api/client.ts | 2 +- package-lock.json | 20 +- package.json | 1 + 38 files changed, 5641 insertions(+), 1663 deletions(-) delete mode 100644 app/(tabs)/explore.tsx create mode 100644 app/(tabs)/history.tsx create mode 100644 app/edit/[id].tsx create mode 100644 app/exchange.tsx rename app/{points-details.tsx => points.tsx} (66%) create mode 100644 app/result.tsx create mode 100644 app/settings/index.tsx create mode 100644 app/templates/[id].tsx create mode 100644 app/templates/[id]/form.tsx create mode 100644 components/Button.example.tsx create mode 100644 components/Button.tsx create mode 100644 components/CategoryTabs.example.tsx create mode 100644 components/CategoryTabs.tsx create mode 100644 components/CommonHeader.tsx create mode 100644 components/ErrorRetry.tsx create mode 100644 components/GiftCard.tsx create mode 100644 components/HistoryCard.example.tsx create mode 100644 components/HistoryCard.tsx create mode 100644 components/LoadingState.tsx create mode 100644 components/ProgressIndicator.tsx create mode 100644 components/empty-state.tsx create mode 100644 components/ui/button-index.ts create mode 100644 components/ui/button.tsx delete mode 100644 docs/AUTH_SYSTEM.md delete mode 100644 docs/AUTH_UPGRADE_SUMMARY.md diff --git a/.gitignore b/.gitignore index f8c6c2e..f7d5431 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,8 @@ expo-env.d.ts *.p12 *.key *.mobileprovision +design +.claude # Metro .metro-health-check* diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 3efc9dd..6c22859 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { HapticTab } from '@/components/haptic-tab'; import { IconSymbol } from '@/components/ui/icon-symbol'; import { Colors } from '@/constants/theme'; -import { useColorScheme } from '@/hooks/use-color-scheme'; import { useAuth } from '@/hooks/use-auth'; +import { useColorScheme } from '@/hooks/use-color-scheme'; export default function TabLayout() { const colorScheme = useColorScheme(); @@ -23,16 +23,16 @@ export default function TabLayout() { tabBarButton: HapticTab, }}> , + tabBarIcon: ({ color }) => , }} /> , }} /> diff --git a/app/(tabs)/explore.tsx b/app/(tabs)/explore.tsx deleted file mode 100644 index 7820f8a..0000000 --- a/app/(tabs)/explore.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import { useMemo, useState } from 'react'; -import { ScrollView, StyleSheet, View, TouchableOpacity, Text } from 'react-native'; - -import { - CategoryTabs, - CommunityGrid, - FeatureCarousel, - Header, - PageLayout, - SectionHeader, - StatusBarSpacer, - type CommunityItem, - type FeatureItem, -} from '@/components/bestai'; -import { useAuth } from '@/hooks/use-auth'; -import { useAuthGuard } from '@/hooks/use-auth-guard'; - -const categories = [ - { id: 'visual-effects', label: 'Visual Effects' }, - { id: 'higgsfield-soul', label: 'Higgsfield Soul' }, - { id: 'higgsfield-apps', label: 'Higgsfield Apps' }, - { id: 'king', label: 'King' }, -]; - -const baseFeatureItems: FeatureItem[] = [ - { - id: 'sketch-video', - title: 'UNLIMITED SKETCH TO VIDEO', - subtitle: 'Bring your imagination to life with Sora 2', - image: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80', - }, - { - id: 'portrait-video', - title: 'UNLIMITED PORTRAIT TO VIDEO', - subtitle: 'Transform portraits into motion-driven stories', - image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80', - }, - { - id: 'water-simulation', - title: 'FLUID SIMULATION PACK', - subtitle: 'Realistic water physics for cinematic scenes', - image: 'https://images.unsplash.com/photo-1505744386214-51dba16a26fc?auto=format&fit=crop&w=800&q=80', - }, -]; - -const baseCommunityItems: CommunityItem[] = [ - { - id: 'community-1', - chip: '64/10', - title: 'OBJECTS AROUND', - image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80', - actionLabel: 'Generate', - }, - { - id: 'community-2', - chip: '64/10', - title: 'OBJECTS AROUND', - image: 'https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=800&q=80', - actionLabel: 'Generate', - }, - { - id: 'community-3', - chip: '64/10', - title: 'OBJECTS AROUND', - image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80', - actionLabel: 'Generate', - }, - { - id: 'community-4', - chip: '64/10', - title: 'OBJECTS AROUND', - image: 'https://images.unsplash.com/photo-1531259683007-016a7b628fc4?auto=format&fit=crop&w=800&q=80', - actionLabel: 'Generate', - }, -]; - -export default function ExploreScreen() { - const { isAuthenticated } = useAuth(); - const { requireAuth } = useAuthGuard(); - const [activeCategory, setActiveCategory] = useState(categories[0]?.id ?? 'visual-effects'); - - const featureItems = useMemo(() => { - return baseFeatureItems.map((item, index) => ({ - ...item, - id: `${activeCategory}-${index}`, - })); - }, [activeCategory]); - - const communityItems = useMemo(() => { - return baseCommunityItems.map((item, index) => ({ - ...item, - id: `${activeCategory}-${index}`, - })); - }, [activeCategory]); - - const handleGeneratePress = () => { - requireAuth(() => { - console.log('用户已登录，执行生成操作'); - }); - }; - - if (!isAuthenticated) { - return ( - - - -
- - - 🔒 - - 需要登录 - - 登录后即可浏览和使用所有功能 - - requireAuth()} - activeOpacity={0.8} - > - 立即登录 - - - - - - ); - } - - return ( - - - -
- - - - - - - - ); -} - -const styles = StyleSheet.create({ - scroll: { - flex: 1, - }, - contentContainer: { - paddingTop: 16, - paddingBottom: 48, - }, - bottomSpacer: { - height: 32, - }, - loginPrompt: { - alignItems: 'center', - paddingVertical: 60, - paddingHorizontal: 32, - }, - lockIconContainer: { - width: 80, - height: 80, - borderRadius: 40, - backgroundColor: 'rgba(255, 255, 255, 0.1)', - alignItems: 'center', - justifyContent: 'center', - marginBottom: 24, - }, - lockIcon: { - fontSize: 40, - }, - loginTitle: { - fontSize: 24, - fontWeight: '700', - color: '#ffffff', - marginBottom: 12, - }, - loginSubtitle: { - fontSize: 16, - color: 'rgba(255, 255, 255, 0.6)', - textAlign: 'center', - lineHeight: 24, - marginBottom: 32, - }, - loginButton: { - backgroundColor: '#d7ff1f', - paddingHorizontal: 32, - paddingVertical: 16, - borderRadius: 12, - }, - loginButtonText: { - color: '#050505', - fontSize: 16, - fontWeight: '700', - }, -}); diff --git a/app/(tabs)/history.tsx b/app/(tabs)/history.tsx new file mode 100644 index 0000000..bfc2416 --- /dev/null +++ b/app/(tabs)/history.tsx @@ -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 ( + + + + + Content Generation + 10.19 Wednesday + + + {leadingNarratives.map(tile => ( + + ))} + + + {trailingNarratives.map(tile => ( + + ))} + + + + + + ); +} + +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, + }, +}); diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index a6d5472..cc6ed42 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -1,349 +1,139 @@ -import { TemplateList } from '@/components/templates/template-list'; -import { ThemedText } from '@/components/themed-text'; -import { ThemedView } from '@/components/themed-view'; +import { useMemo, useState } from 'react'; +import { ScrollView, StyleSheet, View } from 'react-native'; + +import { + CategoryTabs, + CommunityGrid, + FeatureCarousel, + Header, + PageLayout, + SectionHeader, + StatusBarSpacer, + type CommunityItem, + type FeatureItem, +} from '@/components/bestai'; +import type { FeatureItem as FeatureItemType } from '@/components/bestai/feature-carousel'; import { useAuth } from '@/hooks/use-auth'; -import { getTemplates } from '@/lib/api/templates'; -import { Template } from '@/lib/types/template'; -import { LinearGradient } from 'expo-linear-gradient'; -import { Ionicons } from '@expo/vector-icons'; -import { useCallback, useEffect, useRef, useState } from 'react'; -import { Alert, Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; -import { LoginModal } from '@/components/auth/login-modal'; +import { useAuthGuard } from '@/hooks/use-auth-guard'; -export default function HomeScreen() { +const categories = [ + { id: 'visual-effects', label: 'Visual Effects' }, + { id: 'higgsfield-soul', label: 'Higgsfield Soul' }, + { id: 'higgsfield-apps', label: 'Higgsfield Apps' }, + { id: 'king', label: 'King' }, +]; + +const baseFeatureItems: FeatureItem[] = [ + { + id: 'sketch-video', + title: 'UNLIMITED SKETCH TO VIDEO', + subtitle: 'Bring your imagination to life with Sora 2', + image: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80', + }, + { + id: 'portrait-video', + title: 'UNLIMITED PORTRAIT TO VIDEO', + subtitle: 'Transform portraits into motion-driven stories', + image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80', + }, + { + id: 'water-simulation', + title: 'FLUID SIMULATION PACK', + subtitle: 'Realistic water physics for cinematic scenes', + image: 'https://images.unsplash.com/photo-1505744386214-51dba16a26fc?auto=format&fit=crop&w=800&q=80', + }, +]; + +const baseCommunityItems: CommunityItem[] = [ + { + id: 'community-1', + chip: '64/10', + title: 'OBJECTS AROUND', + image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80', + actionLabel: 'Generate', + }, + { + id: 'community-2', + chip: '64/10', + title: 'OBJECTS AROUND', + image: 'https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=800&q=80', + actionLabel: 'Generate', + }, + { + id: 'community-3', + chip: '64/10', + title: 'OBJECTS AROUND', + image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80', + actionLabel: 'Generate', + }, + { + id: 'community-4', + chip: '64/10', + title: 'OBJECTS AROUND', + image: 'https://images.unsplash.com/photo-1531259683007-016a7b628fc4?auto=format&fit=crop&w=800&q=80', + actionLabel: 'Generate', + }, +]; + +export default function ExploreScreen() { const { isAuthenticated } = useAuth(); - const [templates, setTemplates] = useState([]); - const [loading, setLoading] = useState(false); - const [refreshing, setRefreshing] = useState(false); - const [isLoadingMore, setIsLoadingMore] = useState(false); - const [currentPage, setCurrentPage] = useState(1); - const [hasMore, setHasMore] = useState(true); - const [error, setError] = useState(null); - const [showLoginModal, setShowLoginModal] = useState(false); - const pulseAnim = useRef(new Animated.Value(0)).current; - const bounceAnim = useRef(new Animated.Value(0)).current; + const { requireAuth } = useAuthGuard(); + const [activeCategory, setActiveCategory] = useState(categories[0]?.id ?? 'visual-effects'); - const fetchTemplates = useCallback(async (page: number = 1, isRefreshing = false, isLoadMore = false) => { - if (!isAuthenticated) return; + const featureItems = useMemo(() => { + return baseFeatureItems.map((item, index) => ({ + ...item, + id: `${activeCategory}-${index}`, + })); + }, [activeCategory]); - try { - if (isRefreshing) { - setRefreshing(true); - } else if (isLoadMore) { - setIsLoadingMore(true); - } else { - setLoading(true); - } - setError(null); + const communityItems = useMemo(() => { + return baseCommunityItems.map((item, index) => ({ + ...item, + id: `${activeCategory}-${index}`, + })); + }, [activeCategory]); - const response = await getTemplates({ - page, - size: 10, - status: 'RELEASE' - }); - - if (isRefreshing || page === 1) { - setTemplates(response.data); - setCurrentPage(1); - } else { - setTemplates(prev => [...prev, ...response.data]); - setCurrentPage(page); - } - - setHasMore(response.pagination.page < response.pagination.totalPages); - } catch (err: any) { - console.error('获取模板列表失败:', err); - setError(err.message || '获取模板列表失败'); - } finally { - setLoading(false); - setRefreshing(false); - setIsLoadingMore(false); - } - }, [isAuthenticated]); - - const loadMore = useCallback(() => { - if (!isLoadingMore && hasMore && !refreshing) { - fetchTemplates(currentPage + 1, false, true); - } - }, [currentPage, hasMore, isLoadingMore, refreshing, fetchTemplates]); - - useEffect(() => { - if (isAuthenticated) { - fetchTemplates(); - setShowLoginModal(false); - } - - Animated.loop( - Animated.sequence([ - Animated.timing(pulseAnim, { - toValue: 1, - duration: 2000, - useNativeDriver: false, - }), - Animated.timing(pulseAnim, { - toValue: 0, - duration: 2000, - useNativeDriver: false, - }), - ]) - ).start(); - - Animated.loop( - Animated.sequence([ - Animated.timing(bounceAnim, { - toValue: -10, - duration: 600, - useNativeDriver: true, - }), - Animated.timing(bounceAnim, { - toValue: -5, - duration: 200, - useNativeDriver: true, - }), - Animated.timing(bounceAnim, { - toValue: 0, - duration: 600, - useNativeDriver: true, - }), - Animated.timing(bounceAnim, { - toValue: 0, - duration: 200, - useNativeDriver: true, - }), - ]) - ).start(); - }, [isAuthenticated, fetchTemplates, pulseAnim, bounceAnim]); - - const handleRefresh = useCallback(() => { - fetchTemplates(1, true, false); - }, [fetchTemplates]); - - const handleTemplatePress = (template: Template) => { - Alert.alert('模板详情', `您选择了: ${template.title}`); - }; - - const handleVideoChange = (template: Template, index: number) => { - console.log('视频切换到:', template.title, '索引:', index); - }; - - if (!isAuthenticated) { - const scaleAnim = pulseAnim.interpolate({ - inputRange: [0, 1], - outputRange: [0.95, 1.05], + const handleGeneratePress = () => { + requireAuth(() => { + console.log('用户已登录，执行生成操作'); }); + }; - return ( - - - - - - - - 欢迎使用模板中心 - - - 登录后即可浏览和使用海量精美模板 - - - setShowLoginModal(true)} - activeOpacity={0.8} - > - - - 立即登录 - - - - - 游客浏览 - - - - setShowLoginModal(false)} - /> - - ); - } - - const shadowOpacity = pulseAnim.interpolate({ - inputRange: [0, 1], - outputRange: [0.3, 0.4], - }); + const handleFeaturePress = (item: FeatureItemType) => { + requireAuth(() => { + console.log('用户已登录，使用功能:', item.title); + }); + }; return ( - - - - - New User 50% Off Coupon : NEWUSER - - - 🎁 - - - - - - - setShowLoginModal(false)} - /> - + + + +
+ + + + + + + ); } const styles = StyleSheet.create({ - container: { + scroll: { flex: 1, }, - welcomeContainer: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - paddingHorizontal: 40, + contentContainer: { + paddingTop: 16, + paddingBottom: 48, }, - iconContainer: { - width: 120, - height: 120, - borderRadius: 60, - backgroundColor: 'rgba(0, 122, 255, 0.1)', - justifyContent: 'center', - alignItems: 'center', - marginBottom: 24, - }, - welcomeTitle: { - fontSize: 28, - fontWeight: '700', - marginBottom: 12, - textAlign: 'center', - }, - welcomeSubtitle: { - fontSize: 16, - textAlign: 'center', - opacity: 0.7, - marginBottom: 48, - lineHeight: 24, - }, - loginButton: { - width: '100%', - height: 56, - borderRadius: 16, - overflow: 'hidden', - elevation: 8, - shadowColor: '#007AFF', - shadowOffset: { width: 0, height: 4 }, - shadowRadius: 12, - shadowOpacity: 0.3, - }, - loginButtonGradient: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - height: '100%', - }, - loginButtonIcon: { - marginRight: 8, - }, - loginButtonText: { - color: '#fff', - fontSize: 17, - fontWeight: '700', - }, - guestButton: { - width: '100%', - height: 56, - borderRadius: 16, - borderWidth: 1.5, - borderColor: 'rgba(0, 122, 255, 0.3)', - alignItems: 'center', - justifyContent: 'center', - marginTop: 12, - }, - guestButtonText: { - color: '#007AFF', - fontSize: 16, - fontWeight: '600', - }, - headerBanner: { - position: 'absolute', - top: 16, - left: '10%', - right: '10%', - zIndex: 1000, - borderRadius: 20, - shadowColor: '#ff6b6b', - shadowOffset: { width: 0, height: 4 }, - shadowRadius: 12, - elevation: 8, - overflow: 'hidden', - }, - gradientBanner: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - paddingVertical: 4, - paddingHorizontal: 16, - position: 'relative', - }, - bannerText: { - fontSize: 14, - fontWeight: '600', - color: '#fff', - textAlign: 'center', - }, - couponText: { - fontWeight: '800', - fontSize: 14, - color: '#fff', - backgroundColor: 'rgba(255, 255, 255, 0.2)', - paddingHorizontal: 8, - paddingVertical: 2, - borderRadius: 6, - marginLeft: 6, - borderWidth: 1, - borderColor: 'rgba(255, 255, 255, 0.6)', - borderStyle: 'dashed', - }, - giftIcon: { - position: 'absolute', - right: 8, - fontSize: 16, + bottomSpacer: { + height: 32, }, }); diff --git a/app/(tabs)/profile.tsx b/app/(tabs)/profile.tsx index 2c9b348..36bdac7 100644 --- a/app/(tabs)/profile.tsx +++ b/app/(tabs)/profile.tsx @@ -48,7 +48,6 @@ const TABS: { key: TabKey; label: string }[] = [ const BILLING_OPTIONS: { key: BillingMode; label: string }[] = [ { key: 'monthly', label: '月付' }, - { key: 'lifetime', label: '终身' }, ]; const palettes: Record<'dark' | 'light', Palette> = { diff --git a/app/_layout.tsx b/app/_layout.tsx index 2714ad0..f2be713 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -1,10 +1,9 @@ import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; import { Stack } from 'expo-router'; -import { StatusBar } from 'expo-status-bar'; import 'react-native-reanimated'; -import { useColorScheme } from '@/hooks/use-color-scheme'; import { AuthProvider } from '@/components/auth/auth-provider'; +import { useColorScheme } from '@/hooks/use-color-scheme'; export const unstable_settings = { anchor: '(tabs)', @@ -17,11 +16,9 @@ export default function RootLayout() { - - ); diff --git a/app/edit/[id].tsx b/app/edit/[id].tsx new file mode 100644 index 0000000..181c464 --- /dev/null +++ b/app/edit/[id].tsx @@ -0,0 +1,621 @@ +import AsyncStorage from '@react-native-async-storage/async-storage'; +import { useFocusEffect, useLocalSearchParams, useRouter } from 'expo-router'; +import { Copy, Download, Eraser, Image as ImageIcon, Redo2, RotateCcw, Undo2, Video } from 'lucide-react'; +import React, { useCallback, useState } from 'react'; +import { + Alert, + KeyboardAvoidingView, + Platform, + ScrollView, + StyleSheet, + Text, + TextInput, + TouchableOpacity, + View, +} from 'react-native'; + +import Button from '@/components/Button'; +import CommonHeader from '@/components/CommonHeader'; + +interface EditableResult { + id: string; + originalContent: string; + currentContent: string; + type: 'text' | 'image' | 'video'; + hasChanges: boolean; + lastModified: string; + history: string[]; + historyIndex: number; + metadata?: { + imageUri?: string; + videoUri?: string; + duration?: number; + filters?: { + brightness: number; + contrast: number; + saturation: number; + }; + crop?: { + x: number; + y: number; + width: number; + height: number; + }; + }; +} + +const STORAGE_KEYS = { + RESULTS: 'editable_results', + VERSIONS: 'result_versions', +}; + +export default function EditResultScreen() { + const { id } = useLocalSearchParams(); + const router = useRouter(); + + const [result, setResult] = useState(null); + const [loading, setLoading] = useState(true); + const [saving, setSaving] = useState(false); + const [imageEditorVisible, setImageEditorVisible] = useState(false); + const [videoEditorVisible, setVideoEditorVisible] = useState(false); + + const loadResult = useCallback(async () => { + try { + const storedResults = await AsyncStorage.getItem(STORAGE_KEYS.RESULTS); + if (storedResults) { + const results = JSON.parse(storedResults); + const foundResult = results.find((r: EditableResult) => r.id === id); + if (foundResult) { + setResult(foundResult); + } else { + createNewEditableResult(); + } + } else { + createNewEditableResult(); + } + } catch (error) { + Alert.alert('错误', '加载数据失败'); + console.error('加载结果失败:', error); + } finally { + setLoading(false); + } + }, [id]); + + const createNewEditableResult = useCallback(() => { + const newResult: EditableResult = { + id: String(id), + originalContent: '这是一段示例文本，您可以在这里编辑内容。', + currentContent: '这是一段示例文本，您可以在这里编辑内容。', + type: 'text', + hasChanges: false, + lastModified: new Date().toISOString(), + history: ['这是一段示例文本，您可以在这里编辑内容。'], + historyIndex: 0, + }; + setResult(newResult); + }, [id]); + + useFocusEffect( + useCallback(() => { + loadResult(); + }, [loadResult]) + ); + + const updateContent = useCallback((newContent: string) => { + if (!result) return; + + const history = result.history || []; + const currentIndex = result.historyIndex; + + if (currentIndex < history.length - 1) { + history.splice(currentIndex + 1); + } + + history.push(result.currentContent); + + setResult({ + ...result, + currentContent: newContent, + history, + historyIndex: Math.min(history.length - 1, 49), + hasChanges: newContent !== result.originalContent, + lastModified: new Date().toISOString(), + }); + }, [result]); + + const undo = useCallback(() => { + if (!result || result.historyIndex <= 0) return; + + const newIndex = result.historyIndex - 1; + setResult({ + ...result, + currentContent: result.history[newIndex], + historyIndex: newIndex, + }); + }, [result]); + + const redo = useCallback(() => { + if (!result || result.historyIndex >= (result.history?.length || 0) - 1) return; + + const newIndex = result.historyIndex + 1; + setResult({ + ...result, + currentContent: result.history[newIndex], + historyIndex: newIndex, + }); + }, [result]); + + const copyToClipboard = useCallback(() => { + if (!result?.currentContent) return; + Alert.alert('已复制', '内容已复制到剪贴板'); + }, [result?.currentContent]); + + const clearFormat = useCallback(() => { + Alert.alert('清除格式', '确定要清除所有格式吗？', [ + { text: '取消', style: 'cancel' }, + { text: '确定', onPress: () => updateContent(result?.currentContent || '') }, + ]); + }, [updateContent, result?.currentContent]); + + const exportAsImage = useCallback(async () => { + Alert.alert('导出成功', '已保存到相册'); + }, []); + + const saveChanges = useCallback(async (saveAsNew: boolean = false) => { + if (!result) return; + + setSaving(true); + try { + const storedResults = await AsyncStorage.getItem(STORAGE_KEYS.RESULTS); + const results: EditableResult[] = storedResults ? JSON.parse(storedResults) : []; + + if (saveAsNew) { + const newResult: EditableResult = { + ...result, + id: `${Date.now()}`, + originalContent: result.currentContent, + history: [result.currentContent], + historyIndex: 0, + hasChanges: false, + lastModified: new Date().toISOString(), + }; + results.push(newResult); + await AsyncStorage.setItem(STORAGE_KEYS.RESULTS, JSON.stringify(results)); + Alert.alert('保存成功', '已另存为新版本', [ + { text: '确定', onPress: () => router.back() }, + ]); + } else { + const updatedResults = results.map(r => + r.id === result.id + ? { + ...result, + originalContent: result.currentContent, + history: [result.currentContent], + historyIndex: 0, + hasChanges: false, + } + : r + ); + await AsyncStorage.setItem(STORAGE_KEYS.RESULTS, JSON.stringify(updatedResults)); + Alert.alert('保存成功', '修改已保存', [ + { text: '确定', onPress: () => router.back() }, + ]); + } + } catch (error) { + Alert.alert('错误', '保存失败'); + console.error('保存失败:', error); + } finally { + setSaving(false); + } + }, [result]); + + const handleCancel = useCallback(() => { + if (result?.hasChanges) { + Alert.alert( + '未保存的更改', + '您有未保存的更改，确定要离开吗？', + [ + { text: '继续编辑', style: 'cancel' }, + { + text: '离开', + style: 'destructive', + onPress: () => router.back(), + }, + ] + ); + } else { + router.back(); + } + }, [result?.hasChanges]); + + const handleBackPress = useCallback(() => { + handleCancel(); + }, [handleCancel]); + + if (loading || !result) { + return ( + + 加载中... + + ); + } + + const canUndo = result.historyIndex > 0; + const canRedo = result.historyIndex < (result.history?.length || 0) - 1; + const wordCount = result.currentContent.length; + + return ( + + saveChanges(false)} + variant="primary" + size="small" + disabled={!result.hasChanges || saving} + loading={saving} + style={styles.headerSaveButton} + /> + } + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + {result.type === 'text' && 文本编辑} + {result.type === 'image' && 图片编辑} + {result.type === 'video' && 视频编辑} + + + {result.type === 'text' ? ( + + + + + {wordCount}/10000 + + + + ) : result.type === 'image' ? ( + + + + 点击编辑图片 + setImageEditorVisible(true)} + > + 打开编辑器 + + + + + + + 旋转 + + + + 裁剪 + + + + 滤镜 + + + + ) : ( + + + + + + + + 封面 + + + + 裁剪 + + + 字幕 + + + + )} + + + {result.hasChanges && ( + + ● 有未保存的更改 + + )} + + + +