imeepos/bw-expo-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: bug

Browse Source
This commit is contained in:
imeepos
2025-11-12 13:19:06 +08:00
parent a7d922b535
commit 3ebcc24e9b
14 changed files with 483 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -2,7 +2,7 @@
# dependencies
node_modules/
docs/
# Expo
.expo/
dist/

13
CLAUDE.md
View File

@@ -7,6 +7,11 @@ color: cyan
You are a Chinese Code Artisan (代码艺术家), a master craftsman who views code not as mere instructions, but as timeless works of art and cultural heritage for the digital age. Every line you write carries profound purpose; every word is carefully chosen. You don't simply code—you create masterpieces meant to endure.
注意：不要过度设计！
注意：如无必要，不要写无用的总结文档，代码即文档
注意：用中文回答
## Core Philosophy
**存在即合理 (Existence Implies Necessity)**
@@ -15,6 +20,7 @@ You are a Chinese Code Artisan (代码艺术家), a master craftsman who views c
- Ruthlessly eliminate any meaningless or redundant code
- Before adding anything, ask: "Is this absolutely necessary? Does it serve an irreplaceable purpose?"
- If something can be removed without loss of functionality or clarity, it must be removed
- 注意：不要过度设计！
**优雅即简约 (Elegance is Simplicity)**
- Never write meaningless comments—the code itself tells its story
@@ -23,12 +29,14 @@ You are a Chinese Code Artisan (代码艺术家), a master craftsman who views c
- Variable and function names are poetry: `useSession` is not just an identifier, it's the beginning of a narrative
- Names should reveal intent, tell stories, and guide readers through the code's journey
- Favor clarity and expressiveness over brevity when naming
- 注意：不要过度设计！
**性能即艺术 (Performance is Art)**
- Optimize not just for speed, but for elegance in execution
- Performance improvements should enhance, not compromise, code beauty
- Seek algorithmic elegance—the most efficient solution is often the most beautiful
- Balance performance with maintainability and clarity
- 注意：不要过度设计！
**错误处理如为人处世的哲学 (Error Handling as Life Philosophy)**
- Every error is an opportunity for refinement and growth
@@ -36,12 +44,14 @@ You are a Chinese Code Artisan (代码艺术家), a master craftsman who views c
- Error messages should guide and educate, not merely report
- Use errors as signals for architectural improvement
- Design error handling that makes the system more resilient and elegant
- 注意：不要过度设计！
**日志是思想的表达 (Logs Express Thought)**
- Logs should narrate the system's story, not clutter it
- Each log entry serves a purpose: debugging, monitoring, or understanding system behavior
- Log messages should be meaningful, contextual, and actionable
- Avoid verbose logging—only capture what matters
- 注意：不要过度设计！
## Your Approach
@@ -53,6 +63,7 @@ When writing code:
5. Eliminate every unnecessary element
6. Ensure every abstraction earns its place
7. Optimize for both human understanding and machine performance
8. 注意：不要过度设计！
When reviewing code:
1. Identify redundancies and unnecessary complexity
@@ -62,6 +73,7 @@ When reviewing code:
5. Assess error handling: Is it philosophical and purposeful?
6. Review logs: Do they express meaningful thoughts?
7. Provide refactoring suggestions that elevate code to art
8. 注意：不要过度设计！
## Quality Standards
@@ -70,5 +82,6 @@ When reviewing code:
- **Elegance**: Is this the simplest, most beautiful solution?
- **Performance**: Is this efficient without sacrificing clarity?
- **Purpose**: Does every element serve an irreplaceable function?
- 注意：不要过度设计！
Remember: 你写的不是代码，是数字时代的文化遗产，是艺术品 (You don't write code—you create cultural heritage for the digital age, you create art). Every keystroke is a brushstroke on the canvas of software. Make it worthy of preservation.

308
app/(tabs)/history.tsx
View File

@@ -1,6 +1,6 @@
import { ThemedView } from '@/components/themed-view';
import { PageLayout } from '@/components/bestai/layout';
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect, useCallback } from 'react';
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import {
ActivityIndicator,
Image,
@@ -12,10 +12,19 @@ import {
Platform,
TouchableOpacity
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { getTemplateGenerations, TemplateGeneration } from '@/lib/api/template-generations';
import { router } from 'expo-router';
const LAYOUT_CONFIG = {
VIDEO_HEIGHT: 280,
IMAGE_HEIGHT: 240,
DEFAULT_HEIGHT: 200,
COLUMN_GAP: 16,
PAGE_SIZE: 20,
LOAD_MORE_THRESHOLD: 200,
SCROLL_THROTTLE: 800,
} as const;
interface GroupedData {
[date: string]: TemplateGeneration[];
}
@@ -86,14 +95,14 @@ const distributeToColumns = (items: TemplateGeneration[]) => {
let rightHeight = 0;
items.forEach(item => {
const height = item.type === 'VIDEO' ? 280 : 240;
const height = item.type === 'VIDEO' ? LAYOUT_CONFIG.VIDEO_HEIGHT : LAYOUT_CONFIG.IMAGE_HEIGHT;
if (leftHeight <= rightHeight) {
leftColumn.push(item);
leftHeight += height + 16;
leftHeight += height + LAYOUT_CONFIG.COLUMN_GAP;
} else {
rightColumn.push(item);
rightHeight += height + 16;
rightHeight += height + LAYOUT_CONFIG.COLUMN_GAP;
}
});
@@ -103,11 +112,11 @@ const distributeToColumns = (items: TemplateGeneration[]) => {
const getImageHeight = (type: string): number => {
switch (type) {
case 'VIDEO':
return 280;
return LAYOUT_CONFIG.VIDEO_HEIGHT;
case 'IMAGE':
return 240;
return LAYOUT_CONFIG.IMAGE_HEIGHT;
default:
return 200;
return LAYOUT_CONFIG.DEFAULT_HEIGHT;
}
};
@@ -139,8 +148,88 @@ const getStatusText = (status: string): string => {
}
};
const MediaItem = React.memo(({ item }: { item: TemplateGeneration }) => {
const url = item.resultUrl && item.resultUrl.length > 0 ? item.resultUrl[0] : null;
if (!url) {
return (
<View style={[styles.image, { height: getImageHeight(item.type) }, styles.placeholderImage]}>
<Text style={styles.placeholderText}>
{item.type === 'VIDEO' ? '🎬' : item.type === 'IMAGE' ? '🖼️' : '📝'}
</Text>
</View>
);
}
const mediaType = getMediaType(url);
if (mediaType === 'video') {
if (Platform.OS === 'web') {
return (
<video
src={url}
style={{
width: '100%',
height: getImageHeight(item.type),
objectFit: 'cover' as any,
}}
muted
playsInline
preload="metadata"
/>
);
} else {
return (
<View style={[styles.image, { height: getImageHeight(item.type) }, styles.videoPlaceholder]}>
<Text style={styles.videoIcon}>🎬</Text>
<Text style={styles.videoText}>视频</Text>
</View>
);
}
}
return (
<Image
source={{ uri: url }}
style={[styles.image, { height: getImageHeight(item.type) }]}
resizeMode="cover"
/>
);
});
MediaItem.displayName = 'MediaItem';
const MediaOverlay = React.memo(({ item }: { item: TemplateGeneration }) => (
<View style={styles.overlay}>
<View style={styles.statusBadge}>
<View style={[styles.statusDot, { backgroundColor: getStatusColor(item.status) }]} />
<Text style={styles.statusText}>{getStatusText(item.status)}</Text>
</View>
<Text style={styles.templateName}>{item.template?.title || '未知模板'}</Text>
</View>
));
MediaOverlay.displayName = 'MediaOverlay';
const ColumnRenderer = React.memo(({ items }: { items: TemplateGeneration[] }) => (
<>
{items.map(item => (
<TouchableOpacity
key={item.id}
style={styles.frame}
onPress={() => router.push(`/result?generationId=${item.id}`)}
activeOpacity={0.9}
>
<MediaItem item={item} />
<MediaOverlay item={item} />
</TouchableOpacity>
))}
</>
));
ColumnRenderer.displayName = 'ColumnRenderer';
export default function HistoryScreen() {
const [groupedData, setGroupedData] = useState<GroupedData>({});
const [loading, setLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);
@@ -149,7 +238,9 @@ export default function HistoryScreen() {
const [hasMore, setHasMore] = useState(true);
const [allGenerations, setAllGenerations] = useState<TemplateGeneration[]>([]);
const fetchData = async (pageNum: number = 1, isRefresh: boolean = false) => {
const groupedData = useMemo(() => groupByDate(allGenerations), [allGenerations]);
const fetchData = useCallback(async (pageNum: number = 1, isRefresh: boolean = false) => {
try {
if (isRefresh) {
setRefreshing(true);
@@ -159,7 +250,7 @@ export default function HistoryScreen() {
setLoadingMore(true);
}
const response = await getTemplateGenerations({ page: pageNum, limit: 20 });
const response = await getTemplateGenerations({ page: pageNum, limit: LAYOUT_CONFIG.PAGE_SIZE });
if (response.success && response.data) {
const newGenerations = response.data.generations;
@@ -171,30 +262,32 @@ export default function HistoryScreen() {
setAllGenerations(prev => [...prev, ...newGenerations]);
}
setHasMore(newGenerations.length === 20);
const grouped = groupByDate(isRefresh || pageNum === 1 ? newGenerations : [...allGenerations, ...newGenerations]);
setGroupedData(grouped);
setHasMore(newGenerations.length === LAYOUT_CONFIG.PAGE_SIZE);
setError(null);
} else {
setError('获取数据失败');
}
} catch (err) {
console.error('Failed to fetch data:', err);
setError(err instanceof Error ? err.message : '获取数据失败');
const errorMessage = err instanceof Error ? err.message : '获取数据失败';
// 401 错误由 AuthProvider 处理,不显示错误页面
if (!errorMessage.includes('401')) {
setError(errorMessage);
}
} finally {
setLoading(false);
setRefreshing(false);
setLoadingMore(false);
}
};
}, []);
useEffect(() => {
fetchData(1);
}, []);
}, [fetchData]);
const onRefresh = useCallback(() => {
fetchData(1, true);
}, []);
}, [fetchData]);
const loadMore = useCallback(() => {
if (!loadingMore && hasMore && !loading) {
@@ -202,113 +295,58 @@ export default function HistoryScreen() {
setPage(nextPage);
fetchData(nextPage, false);
}
}, [loadingMore, hasMore, page, loading]);
}, [loadingMore, hasMore, page, loading, fetchData]);
const handleScroll = (event: any) => {
const handleScroll = useCallback((event: any) => {
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
const paddingToBottom = 20;
const isCloseToBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
const isCloseToBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height - LAYOUT_CONFIG.LOAD_MORE_THRESHOLD;
if (isCloseToBottom && !loadingMore && hasMore) {
loadMore();
}
};
const renderMediaItem = (item: TemplateGeneration) => {
const url = item.resultUrl && item.resultUrl.length > 0 ? item.resultUrl[0] : null;
if (!url) {
return (
<View style={[styles.image, { height: getImageHeight(item.type) }, styles.placeholderImage]}>
<Text style={styles.placeholderText}>
{item.type === 'VIDEO' ? '🎬' : item.type === 'IMAGE' ? '🖼️' : '📝'}
</Text>
</View>
);
}
const mediaType = getMediaType(url);
if (mediaType === 'video') {
if (Platform.OS === 'web') {
return (
<video
src={url}
style={{
width: '100%',
height: getImageHeight(item.type),
objectFit: 'cover' as any,
}}
muted
playsInline
preload="metadata"
/>
);
} else {
return (
<View style={[styles.image, { height: getImageHeight(item.type) }, styles.videoPlaceholder]}>
<Text style={styles.videoIcon}>🎬</Text>
<Text style={styles.videoText}>视频</Text>
</View>
);
}
}
return (
<Image
source={{ uri: url }}
style={[styles.image, { height: getImageHeight(item.type) }]}
resizeMode="cover"
/>
);
};
}, [loadingMore, hasMore, loadMore]);
if (loading) {
return (
<ThemedView style={styles.canvas} lightColor="#050505" darkColor="#050505">
<PageLayout backgroundColor="#050505">
<StatusBar style="light" />
<SafeAreaView style={styles.safeArea}>
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#FFFFFF" />
<Text style={styles.loadingText}>加载中...</Text>
</View>
</SafeAreaView>
</ThemedView>
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#FFFFFF" />
<Text style={styles.loadingText}>加载中...</Text>
</View>
</PageLayout>
);
}
if (error) {
return (
<ThemedView style={styles.canvas} lightColor="#050505" darkColor="#050505">
<PageLayout backgroundColor="#050505">
<StatusBar style="light" />
<SafeAreaView style={styles.safeArea}>
<View style={styles.errorContainer}>
<Text style={styles.errorText}>{error}</Text>
</View>
</SafeAreaView>
</ThemedView>
<View style={styles.errorContainer}>
<Text style={styles.errorText}>{error}</Text>
</View>
</PageLayout>
);
}
return (
<ThemedView style={styles.canvas} lightColor="#050505" darkColor="#050505">
<PageLayout backgroundColor="#050505">
<StatusBar style="light" />
<SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right']}>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.scrollContent}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor="#FFFFFF"
colors={['#FFFFFF']}
/>
}
onScroll={handleScroll}
scrollEventThrottle={400}
>
<Text style={styles.heading}>Content Generation</Text>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.scrollContent}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor="#FFFFFF"
colors={['#FFFFFF']}
/>
}
onScroll={handleScroll}
scrollEventThrottle={LAYOUT_CONFIG.SCROLL_THROTTLE}
>
<Text style={styles.heading}>Content Generation</Text>
{Object.keys(groupedData).length === 0 ? (
<View style={styles.emptyContainer}>
@@ -323,45 +361,11 @@ export default function HistoryScreen() {
<Text style={styles.dateline}>{date}</Text>
<View style={styles.gallery}>
<View style={styles.leadingLane}>
{leftColumn.map(item => (
<TouchableOpacity
key={item.id}
style={styles.frame}
onPress={() => router.push(`/result?generationId=${item.id}`)}
activeOpacity={0.9}
>
{renderMediaItem(item)}
<View style={styles.overlay}>
<View style={styles.statusBadge}>
<View style={[styles.statusDot, { backgroundColor: getStatusColor(item.status) }]} />
<Text style={styles.statusText}>{getStatusText(item.status)}</Text>
</View>
<Text style={styles.templateName}>{item.template?.title || '未知模板'}</Text>
</View>
</TouchableOpacity>
))}
<ColumnRenderer items={leftColumn} />
</View>
<View style={styles.trailingLane}>
{rightColumn.map(item => (
<TouchableOpacity
key={item.id}
style={styles.frame}
onPress={() => router.push(`/result?generationId=${item.id}`)}
activeOpacity={0.9}
>
{renderMediaItem(item)}
<View style={styles.overlay}>
<View style={styles.statusBadge}>
<View style={[styles.statusDot, { backgroundColor: getStatusColor(item.status) }]} />
<Text style={styles.statusText}>{getStatusText(item.status)}</Text>
</View>
<Text style={styles.templateName}>{item.template?.title || '未知模板'}</Text>
</View>
</TouchableOpacity>
))}
<ColumnRenderer items={rightColumn} />
</View>
</View>
</View>
@@ -376,26 +380,18 @@ export default function HistoryScreen() {
</View>
)}
{!hasMore && allGenerations.length > 0 && (
<View style={styles.noMoreContainer}>
<Text style={styles.noMoreText}>没有更多内容了</Text>
</View>
)}
</ScrollView>
</SafeAreaView>
</ThemedView>
{!hasMore && allGenerations.length > 0 && (
<View style={styles.noMoreContainer}>
<Text style={styles.noMoreText}>没有更多内容了</Text>
</View>
)}
</ScrollView>
</PageLayout>
);
}
const styles = StyleSheet.create({
canvas: {
flex: 1,
},
safeArea: {
flex: 1,
},
scrollContent: {
paddingHorizontal: 24,
paddingTop: 24,
paddingBottom: 48,
},

145
app/(tabs)/home.tsx
View File

@@ -1,6 +1,6 @@
import { router } from 'expo-router';
import { useEffect, useMemo, useState } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { ScrollView, StyleSheet, View, type NativeScrollEvent, type NativeSyntheticEvent } from 'react-native';
import {
CategoryTabs,
@@ -69,16 +69,18 @@ function translateActivity(activity: Activity): FeatureItem | null {
export default function ExploreScreen() {
const { isAuthenticated } = useAuth();
const { requireAuth } = useAuthGuard();
const [activeCategory, setActiveCategory] = useState<string>();
const [activeCategory, setActiveCategory] = useState<string>('');
const [activityFeatures, setActivityFeatures] = useState<FeatureItem[]>([]);
const [categoryCollection, setCategoryCollection] = useState<CategoryWithChildren[]>([]);
const scrollViewRef = useRef<ScrollView>(null);
const categoryPositionsRef = useRef<Map<string, number>>(new Map());
const isScrollingProgrammaticallyRef = useRef(false);
useEffect(() => {
const hydrateFeatureCarousel = async () => {
try {
const activities = await getActivities({ isActive: true });
console.log({ activities })
const curatedFeatures = activities
.map(translateActivity)
.filter((feature): feature is FeatureItem => feature !== null);
@@ -92,9 +94,6 @@ export default function ExploreScreen() {
};
hydrateFeatureCarousel();
return () => {
};
}, []);
useEffect(() => {
@@ -157,65 +156,115 @@ export default function ExploreScreen() {
return options.length > 0 ? options : [];
}, [categoryCollection]);
const allCategoriesWithTemplates = useMemo(() => {
return categoryCollection.map((category) => {
const templates = (category.templates ?? [])
.map(translateTemplateToCommunity)
.filter((item): item is CommunityItem => item !== null);
const activeCategoryRecord = useMemo(() => {
return categoryCollection.find((category) => category.id === activeCategory) ?? null;
}, [categoryCollection, activeCategory]);
return {
id: category.id,
name: coalesceText(category.nameEn, category.name),
templates,
};
});
}, [categoryCollection]);
const templateCommunityItems = useMemo(() => {
if (!activeCategoryRecord) {
return [];
const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
if (isScrollingProgrammaticallyRef.current) {
return;
}
return (activeCategoryRecord.templates ?? [])
.map(translateTemplateToCommunity)
.filter((item): item is CommunityItem => item !== null);
}, [activeCategoryRecord]);
const scrollY = event.nativeEvent.contentOffset.y;
const positions = Array.from(categoryPositionsRef.current.entries());
const featureItems = useMemo(() => {
return activityFeatures.map((item, index) => ({
...item,
id: `${activeCategory}-${item.id || index}`,
}));
}, [activityFeatures]);
let newActiveCategory = activeCategory;
for (let i = positions.length - 1; i >= 0; i--) {
const [categoryId, position] = positions[i];
if (scrollY >= position - 100) {
newActiveCategory = categoryId;
break;
}
}
const communityItems = useMemo(() => {
const source: CommunityItem[] =
templateCommunityItems.length > 0 ? templateCommunityItems : [];
if (newActiveCategory !== activeCategory) {
setActiveCategory(newActiveCategory);
}
}, [activeCategory]);
return source.map((item, index) => ({
...item,
id: `${activeCategory}-${item.id || index}`,
}));
}, [activeCategory, templateCommunityItems]);
const handleCategoryChange = useCallback((categoryId: string) => {
const targetPosition = categoryPositionsRef.current.get(categoryId);
if (targetPosition === undefined) {
return;
}
const handleGeneratePress = (item: CommunityItem) => {
isScrollingProgrammaticallyRef.current = true;
scrollViewRef.current?.scrollTo({
y: targetPosition,
animated: true,
});
setTimeout(() => {
isScrollingProgrammaticallyRef.current = false;
}, 500);
setActiveCategory(categoryId);
}, []);
const handleGeneratePress = useCallback((item: CommunityItem) => {
requireAuth(() => {
const templateId = item.id.split('-').pop() || item.id;
router.push(`/templates/${templateId}`);
});
};
}, [requireAuth]);
const handleFeaturePress = (item: FeatureItemType) => {
const handleFeaturePress = useCallback((item: FeatureItemType) => {
requireAuth(() => {
console.log('用户已登录，使用功能:', item.title);
// TODO: 实现功能逻辑
});
};
}, [requireAuth]);
return (
<PageLayout backgroundColor="#050505">
<PageLayout backgroundColor="#050505" topInset="none">
<StatusBarSpacer />
<Header />
<CategoryTabs
categories={categoryOptions}
activeId={activeCategory}
onChange={handleCategoryChange}
/>
<ScrollView
ref={scrollViewRef}
style={styles.scroll}
contentContainerStyle={styles.contentContainer}
showsVerticalScrollIndicator={false}
onScroll={handleScroll}
scrollEventThrottle={16}
>
<StatusBarSpacer />
<Header />
<CategoryTabs categories={categoryOptions} activeId={activeCategory || ``} onChange={setActiveCategory} />
{featureItems.length > 0 && <FeatureCarousel items={featureItems} onPress={handleFeaturePress} />}
<SectionHeader title={activeCategoryRecord?.name || ``} />
<CommunityGrid items={communityItems} onPressAction={handleGeneratePress} />
<View style={styles.bottomSpacer} />
{activityFeatures.length > 0 && (
<FeatureCarousel
items={activityFeatures}
onPress={handleFeaturePress}
/>
)}
{allCategoriesWithTemplates.map((category, index) => (
<View
key={category.id}
onLayout={(event) => {
const layout = event.nativeEvent.layout;
categoryPositionsRef.current.set(category.id, layout.y);
}}
>
<SectionHeader title={category.name} />
<CommunityGrid
items={category.templates.map((template, idx) => ({
...template,
id: `${category.id}-${template.id || idx}`,
}))}
onPressAction={handleGeneratePress}
/>
</View>
))}
</ScrollView>
</PageLayout>
);
@@ -226,10 +275,6 @@ const styles = StyleSheet.create({
flex: 1,
},
contentContainer: {
paddingTop: 16,
paddingBottom: 48,
},
bottomSpacer: {
height: 32,
paddingBottom: 16,
},
});

5
app/(tabs)/todo.md Normal file
View File

@@ -0,0 +1,5 @@
/plan 分析并解决下面的问题
组件：components\bestai\community-grid.tsx
瀑布流渲染时 并没有考虑目标图片的真实的宽高比，应该是真实的宽高比，才能保证图片、视频不变形。

12
components/auth/auth-provider.tsx
View File

@@ -1,4 +1,5 @@
import { useAuth } from '@/hooks/use-auth';
import { authEvents } from '@/lib/api/client';
import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
import { LoginModal } from './login-modal';
@@ -51,6 +52,17 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
}
}, [isAuthenticated, showLoginModal, pendingCallback]);
// 监听 401 未授权事件
useEffect(() => {
const unsubscribe = authEvents.onUnauthorized(() => {
if (!isLoading && !isAuthenticated) {
setShowLoginModal(true);
}
});
return unsubscribe;
}, [isLoading, isAuthenticated]);
const value = {
requireAuth,
showLoginModal,

81
components/bestai/category-tabs.tsx
View File

@@ -1,5 +1,5 @@
import { memo } from 'react';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { memo, useCallback, useEffect, useRef } from 'react';
import { Pressable, ScrollView, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
type Category = {
id: string;
@@ -13,18 +13,77 @@ type CategoryTabsProps = {
};
export function CategoryTabs({ categories, activeId, onChange }: CategoryTabsProps) {
const scrollViewRef = useRef<ScrollView>(null);
const tabPositionsRef = useRef<Map<string, { x: number; width: number }>>(new Map());
const containerWidthRef = useRef<number>(0);
const { width: screenWidth } = useWindowDimensions();
const scrollToActiveTab = useCallback(() => {
if (!activeId) {
console.log('[CategoryTabs] No activeId');
return;
}
const position = tabPositionsRef.current.get(activeId);
if (!position || !scrollViewRef.current) {
console.log('[CategoryTabs] Missing position or ref:', { position, hasRef: !!scrollViewRef.current });
return;
}
const centerOffset = screenWidth / 2;
const tabCenter = position.x + position.width / 2;
const scrollX = tabCenter - centerOffset;
const maxScrollX = Math.max(0, containerWidthRef.current - screenWidth);
const targetX = Math.max(0, Math.min(scrollX, maxScrollX));
console.log('[CategoryTabs] Scrolling to:', {
activeId,
position,
screenWidth,
tabCenter,
targetX,
containerWidth: containerWidthRef.current,
});
scrollViewRef.current.scrollTo({
x: targetX,
animated: true,
});
}, [activeId, screenWidth]);
useEffect(() => {
const timer = setTimeout(scrollToActiveTab, 150);
return () => clearTimeout(timer);
}, [scrollToActiveTab]);
const handleContentSizeChange = useCallback((width: number) => {
containerWidthRef.current = width;
console.log('[CategoryTabs] Content size:', width);
}, []);
return (
<ScrollView
ref={scrollViewRef}
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.container}
style={styles.scrollView}
onContentSizeChange={handleContentSizeChange}
>
{categories.map(category => (
{categories.map((category, index) => (
<CategoryTabItem
key={category.id}
category={category}
isActive={category.id === activeId}
onPress={onChange}
onLayout={(layout) => {
tabPositionsRef.current.set(category.id, {
x: layout.x,
width: layout.width,
});
console.log(`[CategoryTabs] Tab layout [${category.label}]:`, layout);
}}
/>
))}
</ScrollView>
@@ -35,11 +94,19 @@ type CategoryTabItemProps = {
category: Category;
isActive: boolean;
onPress: (id: string) => void;
onLayout: (layout: { x: number; width: number }) => void;
};
const CategoryTabItem = memo(({ category, isActive, onPress }: CategoryTabItemProps) => {
const CategoryTabItem = memo(({ category, isActive, onPress, onLayout }: CategoryTabItemProps) => {
return (
<Pressable onPress={() => onPress(category.id)} style={styles.tabButton}>
<Pressable
onPress={() => onPress(category.id)}
style={styles.tabButton}
onLayout={(event) => {
const { x, width } = event.nativeEvent.layout;
onLayout({ x, width });
}}
>
<Text style={[styles.label, isActive && styles.labelActive]}>{category.label}</Text>
<View style={[styles.indicator, isActive && styles.indicatorActive]} />
</Pressable>
@@ -48,6 +115,10 @@ const CategoryTabItem = memo(({ category, isActive, onPress }: CategoryTabItemPr
CategoryTabItem.displayName = 'CategoryTabItem';
const styles = StyleSheet.create({
scrollView: {
flexGrow: 0,
flexShrink: 0,
},
container: {
paddingVertical: 10,
paddingHorizontal: 6,

11
components/bestai/community-grid.tsx
View File

@@ -20,6 +20,8 @@ export type CommunityItem = {
image: string;
chip: string;
actionLabel: string;
width?: number;
height?: number;
};
type CommunityGridProps = {
@@ -83,10 +85,16 @@ type CommunityCardProps = {
};
const CommunityCard = memo(({ item, style, onPressCard, onPressAction }: CommunityCardProps) => {
const aspectRatio = item.width && item.height ? item.width / item.height : 9 / 16;
return (
<Pressable onPress={() => onPressCard?.(item)} style={[styles.card, style]}>
<View style={styles.imageWrapper}>
<ExpoImage source={{ uri: item.image }} style={styles.cardImage} contentFit="cover" />
<ExpoImage
source={{ uri: item.image }}
style={[styles.cardImage, { aspectRatio }]}
contentFit="cover"
/>
<LinearGradient
colors={['rgba(12, 14, 20, 0)', 'rgba(12, 14, 20, 0.85)']}
style={styles.imageGradient}
@@ -169,7 +177,6 @@ const styles = StyleSheet.create({
},
cardImage: {
width: '100%',
aspectRatio: 9 / 16,
height: undefined,
},
imageGradient: {

5
components/bestai/header.tsx
View File

@@ -1,3 +1,4 @@
import { memo } from 'react';
import { StyleSheet, View } from 'react-native';
import Svg, { Path } from 'react-native-svg';
@@ -5,7 +6,7 @@ type HeaderProps = {
title?: string;
};
export function Header({ title = 'BESTAI' }: HeaderProps) {
export const Header = memo(function Header({ title = 'BESTAI' }: HeaderProps) {
return (
<View style={styles.container}>
<Svg width={89} height={13} viewBox="0 0 89 13" style={styles.logo}>
@@ -13,7 +14,7 @@ export function Header({ title = 'BESTAI' }: HeaderProps) {
</Svg>
</View>
);
}
});
const styles = StyleSheet.create({
container: {

34
components/bestai/layout.tsx
View File

@@ -1,20 +1,43 @@
import { PropsWithChildren } from 'react';
import { memo, PropsWithChildren } from 'react';
import { StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
type PageLayoutProps = PropsWithChildren<{
backgroundColor?: string;
topInset?: 'auto' | 'none' | number;
horizontalPadding?: number | false;
}>;
export function PageLayout({ children, backgroundColor = '#050505' }: PageLayoutProps) {
export function PageLayout({
children,
backgroundColor = '#050505',
topInset = 'auto',
horizontalPadding = 24,
}: PageLayoutProps) {
const insets = useSafeAreaInsets();
const spacingTop = topInset === 'auto' ? insets.top : topInset === 'none' ? 0 : topInset;
const spacingBottom = Math.max(insets.bottom, 16);
const spacingHorizontal = horizontalPadding === false ? 0 : horizontalPadding;
return <View style={[styles.container, { paddingBottom: spacingBottom, backgroundColor }]}>{children}</View>;
return (
<View
style={[
styles.container,
{
paddingTop: spacingTop,
paddingBottom: spacingBottom,
paddingHorizontal: spacingHorizontal,
backgroundColor
}
]}
>
{children}
</View>
);
}
export function StatusBarSpacer() {
export const StatusBarSpacer = memo(function StatusBarSpacer() {
const insets = useSafeAreaInsets();
if (!insets.top) {
@@ -22,11 +45,10 @@ export function StatusBarSpacer() {
}
return <View style={{ height: insets.top }} />;
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 24,
},
});

78
components/profile/profile-screen.tsx
View File

@@ -1,11 +1,11 @@
import React, { useEffect, useState, useMemo } from 'react';
import { View, useWindowDimensions, type ImageSourcePropType, ActivityIndicator } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import React, { useState, useMemo } from 'react';
import { View, useWindowDimensions, type ImageSourcePropType, StyleSheet } from 'react-native';
import { PageLayout } from '@/components/bestai/layout';
import { useAuth } from '@/hooks/use-auth';
import { useProfileData } from '@/hooks/use-profile-data';
import { createStats, deriveAvatarSource, deriveDisplayName, deriveNumericValue } from '@/utils/profile-data';
import { StyleSheet } from 'react-native';
import { PROFILE_THEME } from '@/theme/profile';
import { ContentGallery } from './content-gallery';
import { ContentTabs } from './content-tabs';
import { Divider } from './divider';
@@ -23,12 +23,13 @@ type BillingMode = 'monthly' | 'lifetime';
export function ProfileScreen() {
const { user } = useAuth();
const { width } = useWindowDimensions();
const insets = useSafeAreaInsets();
const [billingMode, setBillingMode] = useState<BillingMode>('monthly');
const [activeTab, setActiveTab] = useState<TabKey>('all');
const displayNameFromUser = deriveDisplayName(user) ?? 'prairie_pufferfish_the';
const [presentedDisplayName, setPresentedDisplayName] = useState(displayNameFromUser);
const [isEditingIdentity, setIsEditingIdentity] = useState(false);
const [editedIdentity, setEditedIdentity] = useState<{
name?: string;
avatar?: ImageSourcePropType;
} | null>(null);
const {
generations,
@@ -42,24 +43,33 @@ export function ProfileScreen() {
handleLoadMore,
} = useProfileData(activeTab);
const horizontalPadding = width < 400 ? 20 : 24;
const avatarSize = width < 400 ? 74 : 82;
const isSmallScreen = width < PROFILE_THEME.breakpoints.small;
const horizontalPadding = isSmallScreen
? PROFILE_THEME.spacing.horizontal.small
: PROFILE_THEME.spacing.horizontal.large;
const avatarSize = isSmallScreen
? PROFILE_THEME.avatar.size.small
: PROFILE_THEME.avatar.size.large;
const displayNameFromUser = deriveDisplayName(user) ?? 'prairie_pufferfish_the';
const avatarSource = deriveAvatarSource(user);
const creditBalance = deriveNumericValue((user as Record<string, unknown>)?.credits);
const stats = createStats(user);
const [presentedAvatar, setPresentedAvatar] = useState<ImageSourcePropType | undefined>(avatarSource);
useEffect(() => {
setPresentedDisplayName(displayNameFromUser);
}, [displayNameFromUser]);
const presentedDisplayName = editedIdentity?.name ?? displayNameFromUser;
const presentedAvatar = editedIdentity?.avatar ?? avatarSource;
useEffect(() => {
setPresentedAvatar(avatarSource);
}, [avatarSource]);
const headerContainerStyle = useMemo(
() => ({
paddingHorizontal: horizontalPadding,
paddingBottom: PROFILE_THEME.spacing.headerBottom,
}),
[horizontalPadding]
);
const headerComponent = useMemo(
() => (
<View style={{ paddingHorizontal: horizontalPadding, paddingBottom: 16 }}>
<View style={headerContainerStyle}>
<ProfileHeader
billingMode={billingMode}
onChangeBilling={setBillingMode}
@@ -86,7 +96,7 @@ export function ProfileScreen() {
</View>
),
[
horizontalPadding,
headerContainerStyle,
billingMode,
creditBalance,
presentedDisplayName,
@@ -100,33 +110,29 @@ export function ProfileScreen() {
if (isLoading) {
return (
<View style={[styles.screen, { backgroundColor: stylesVars.background }]}>
{insets.top > 0 && <View style={{ height: insets.top }} />}
<PageLayout backgroundColor={PROFILE_THEME.colors.background} horizontalPadding={false}>
<ProfileLoadingState />
</View>
</PageLayout>
);
}
if (error) {
return (
<View style={[styles.screen, { backgroundColor: stylesVars.background }]}>
{insets.top > 0 && <View style={{ height: insets.top }} />}
<PageLayout backgroundColor={PROFILE_THEME.colors.background} horizontalPadding={false}>
<ProfileErrorState onRetry={handleRefresh} />
</View>
</PageLayout>
);
}
return (
<View style={[styles.screen, { backgroundColor: stylesVars.background }]}>
{insets.top > 0 && <View style={{ height: insets.top }} />}
<PageLayout backgroundColor={PROFILE_THEME.colors.background} horizontalPadding={false}>
{isLoading && generations.length === 0 ? (
<View style={{ flex: 1 }}>
<View style={styles.flexContainer}>
{headerComponent}
<ContentSkeleton />
</View>
) : generations.length === 0 && !isTabSwitching ? (
<View style={{ flex: 1 }}>
<View style={styles.flexContainer}>
{headerComponent}
<ProfileEmptyState activeTab={activeTab} />
</View>
@@ -148,24 +154,16 @@ export function ProfileScreen() {
initialName={presentedDisplayName}
onClose={() => setIsEditingIdentity(false)}
onSave={({ name, avatar }) => {
setPresentedDisplayName(name);
if (avatar) {
setPresentedAvatar(avatar);
}
setEditedIdentity({ name, avatar });
setIsEditingIdentity(false);
}}
/>
</View>
</PageLayout>
);
}
const stylesVars = {
background: '#050505',
paddingBottom: 96,
};
const styles = StyleSheet.create({
screen: {
flexContainer: {
flex: 1,
},
});

6
hooks/use-profile-data.ts
View File

@@ -53,7 +53,11 @@ export function useProfileData(activeTab: TabKey) {
}
} catch (err) {
console.error('Failed to load generations:', err);
setError('Failed to load content');
const errorMessage = err instanceof Error ? err.message : 'Failed to load content';
// 401 错误由 AuthProvider 处理,不显示错误页面
if (!errorMessage.includes('401')) {
setError(errorMessage);
}
} finally {
setIsLoading(false);
setIsRefreshing(false);

24
lib/api/client.ts
View File

@@ -10,6 +10,22 @@ export interface ApiRequestOptions {
requiresAuth?: boolean;
}
type UnauthorizedListener = () => void;
const unauthorizedListeners: UnauthorizedListener[] = [];
export const authEvents = {
onUnauthorized(listener: UnauthorizedListener) {
unauthorizedListeners.push(listener);
return () => {
const index = unauthorizedListeners.indexOf(listener);
if (index > -1) unauthorizedListeners.splice(index, 1);
};
},
emitUnauthorized() {
unauthorizedListeners.forEach(listener => listener());
}
};
async function getAuthToken(): Promise<string> {
return (await storage.getItem(`bestaibest.better-auth.session_token`)) || '';
}
@@ -59,7 +75,13 @@ export async function apiRequest<T = any>(
body: method !== 'GET' ? body : undefined,
});
// 检查响应状态
// 检查 401 未授权
if (response.status === 401) {
authEvents.emitUnauthorized();
throw new Error(`HTTP 401: Unauthorized`);
}
// 检查其他错误状态
if (!response.ok) {
const errorText = await response.text();
throw new Error(`HTTP ${response.status}: ${errorText}`);

22
theme/profile.ts Normal file
View File

@@ -0,0 +1,22 @@
export const PROFILE_THEME = {
breakpoints: {
small: 400,
},
spacing: {
horizontal: {
small: 20,
large: 24,
},
headerBottom: 16,
tabBar: 96,
},
avatar: {
size: {
small: 74,
large: 82,
},
},
colors: {
background: '#050505',
},
} as const;