carrot_bbs/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

双端适配，web端的修改父容器和接口

Browse Source
This commit is contained in:
LostSalt
2026-03-29 02:34:13 +08:00
parent 3c071957ce
commit ebb0c003e3
16 changed files with 1419 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/screens/material/MaterialsScreen.tsx
View File

@@ -24,8 +24,11 @@ import {
type AppColors,
} from '../../theme';
import * as hrefs from '../../navigation/hrefs';
import { Text, ResponsiveContainer, Loading } from '../../components/common';
import { Text, Loading } from '../../components/common';
import { useResponsive, useResponsiveSpacing, useBreakpointGTE } from '../../hooks/useResponsive';
// 学科卡片最大宽度设置
const SUBJECT_CARD_MAX_WIDTH = 720;
import type { MaterialSubject } from '../../types/material';
import { materialRepository } from '../../data/repositories/MaterialRepository';
@@ -87,6 +90,9 @@ export const MaterialsScreen: React.FC = () => {
shadowOpacity: 0.06,
shadowRadius: 8,
elevation: 2,
maxWidth: SUBJECT_CARD_MAX_WIDTH,
alignSelf: 'center' as const,
width: '100%' as const,
}),
[colors]
);
@@ -177,42 +183,23 @@ export const MaterialsScreen: React.FC = () => {
</View>
{/* Content */}
{isWideScreen ? (
<ResponsiveContainer maxWidth={800}>
<ScrollView
style={styles.scroll}
contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={handleRefresh}
tintColor={colors.primary.main}
/>
}
>
{renderContent()}
</ScrollView>
</ResponsiveContainer>
) : (
<ScrollView
style={styles.scroll}
contentContainerStyle={[
styles.scrollContent,
{ paddingBottom: scrollBottomInset, paddingHorizontal: responsivePadding },
]}
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={handleRefresh}
tintColor={colors.primary.main}
/>
}
>
{renderContent()}
</ScrollView>
)}
<ScrollView
style={styles.scroll}
contentContainerStyle={[
styles.scrollContent,
{ paddingBottom: scrollBottomInset, paddingHorizontal: responsivePadding },
]}
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={handleRefresh}
tintColor={colors.primary.main}
/>
}
>
{renderContent()}
</ScrollView>
</SafeAreaView>
);
};

22
src/screens/material/SubjectMaterialsScreen.tsx
View File

@@ -25,8 +25,11 @@ import {
type AppColors,
} from '../../theme';
import * as hrefs from '../../navigation/hrefs';
import { Text, ResponsiveContainer, Loading } from '../../components/common';
import { Text, Loading } from '../../components/common';
import { useResponsive, useResponsiveSpacing, useBreakpointGTE } from '../../hooks/useResponsive';
// 资料卡片最大宽度
const MATERIAL_CARD_MAX_WIDTH = 720;
import type { MaterialSubject, MaterialFile, MaterialFileType } from '../../types/material';
import {
materialRepository,
@@ -120,6 +123,9 @@ export const SubjectMaterialsScreen: React.FC = () => {
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 1,
maxWidth: MATERIAL_CARD_MAX_WIDTH,
alignSelf: 'center' as const,
width: '100%' as const,
}),
[colors]
);
@@ -266,17 +272,9 @@ export const SubjectMaterialsScreen: React.FC = () => {
</View>
{/* Content */}
{isWideScreen ? (
<ResponsiveContainer maxWidth={800}>
<View style={[styles.contentWrapper, { paddingBottom: scrollBottomInset }]}>
{renderContent()}
</View>
</ResponsiveContainer>
) : (
<View style={[styles.contentWrapper, { paddingBottom: scrollBottomInset, paddingHorizontal: responsivePadding }]}>
{renderContent()}
</View>
)}
<View style={[styles.contentWrapper, { paddingBottom: scrollBottomInset, paddingHorizontal: responsivePadding }]}>
{renderContent()}
</View>
</SafeAreaView>
);
};