PC端的部分适配

This commit is contained in:
2026-03-16 17:47:10 +08:00
parent 798dd7c9a0
commit cb2087f779
30 changed files with 4242 additions and 438 deletions

View File

@@ -32,6 +32,7 @@ import { PostCard, TabBar, SearchBar } from '../../components/business';
import { Loading, EmptyState, Text, ImageGallery, ImageGridItem, ResponsiveGrid } from '../../components/common';
import { HomeStackParamList, RootStackParamList } from '../../navigation/types';
import { useResponsive, useResponsiveSpacing } from '../../hooks/useResponsive';
import { SearchScreen } from './SearchScreen';
type NavigationProp = NativeStackNavigationProp<HomeStackParamList, 'Home'> & NativeStackNavigationProp<RootStackParamList>;
@@ -84,6 +85,9 @@ export const HomeScreen: React.FC = () => {
const [postImages, setPostImages] = useState<ImageGridItem[]>([]);
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
// 搜索显示状态(用于内嵌搜索页面)
const [showSearch, setShowSearch] = useState(false);
// 用于跟踪当前页面显示的帖子 ID以便从 store 同步状态
const postIdsRef = React.useRef<Set<string>>(new Set());
const inFlightRequestKeysRef = React.useRef<Set<string>>(new Set());
@@ -325,9 +329,9 @@ export const HomeScreen: React.FC = () => {
})
), [handleSwipeTabChange]);
// 跳转到搜索页
// 跳转到搜索页(使用内嵌模式,不再依赖导航)
const handleSearchPress = () => {
navigation.navigate('Search');
setShowSearch(true);
};
// 跳转到帖子详情
@@ -630,6 +634,19 @@ export const HomeScreen: React.FC = () => {
);
};
// 搜索页面内嵌模式
if (showSearch) {
return (
<SafeAreaView style={styles.container} edges={['top']}>
<StatusBar barStyle="dark-content" backgroundColor={colors.background.paper} />
<SearchScreen
onBack={() => setShowSearch(false)}
/>
</SafeAreaView>
);
}
// 正常首页内容
return (
<SafeAreaView style={styles.container} edges={['top']}>
<StatusBar barStyle="dark-content" backgroundColor={colors.background.paper} />
@@ -667,7 +684,20 @@ export const HomeScreen: React.FC = () => {
</View>
{/* 帖子列表 */}
<GestureDetector gesture={swipeGesture}>
{isMobile ? (
// 移动端:使用 GestureDetector 支持手势切换 Tab
<GestureDetector gesture={swipeGesture}>
<View style={styles.contentContainer}>
{viewMode === 'list' ? (
renderListContent()
) : (
// 网格模式:使用响应式网格
renderResponsiveGrid()
)}
</View>
</GestureDetector>
) : (
// 桌面端/平板端:不使用 GestureDetector避免拦截侧边栏点击
<View style={styles.contentContainer}>
{viewMode === 'list' ? (
renderListContent()
@@ -676,7 +706,7 @@ export const HomeScreen: React.FC = () => {
renderResponsiveGrid()
)}
</View>
</GestureDetector>
)}
{/* 漂浮发帖按钮 */}
<TouchableOpacity
@@ -695,9 +725,9 @@ export const HomeScreen: React.FC = () => {
{/* 图片查看器 */}
<ImageGallery
visible={showImageViewer}
images={postImages.map(img => ({
id: img.id || img.url || String(Math.random()),
url: img.url || img.uri || ''
images={postImages.map(img => ({
id: img.id || img.url || String(Math.random()),
url: img.url || img.uri || ''
}))}
initialIndex={selectedImageIndex}
onClose={() => setShowImageViewer(false)}
@@ -717,6 +747,12 @@ const styles = StyleSheet.create({
},
searchWrapper: {
paddingBottom: spacing.sm,
// 移除阴影效果
shadowColor: 'transparent',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0,
},
viewToggleBtn: {
width: 44,