Files
frontend/src/screens/profile/TermsOfServiceScreen.tsx

249 lines
11 KiB
TypeScript
Raw Normal View History

/**
* TermsOfServiceScreen
* BBS -
*
*/
import React, { useMemo } from 'react';
import {
View,
StyleSheet,
ScrollView,
} from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import {
useAppColors,
spacing,
type AppColors,
} from '../../theme';
import { Text } from '../../components/common';
import { useResponsive, useResponsiveSpacing } from '../../hooks';
// 内容最大宽度
const CONTENT_MAX_WIDTH = 400;
// 胡萝卜橙主题色
const THEME_COLORS = {
primary: '#FF6B35',
};
// 协议最后更新日期
const LAST_UPDATED = '2026年4月4日';
// 协议条款内容
const TERMS_SECTIONS = [
{
title: '一、协议的范围',
content: `1.1 本协议是您与萝卜社区(以下简称"我们"或"本应用")之间关于您使用本应用服务所订立的协议。
1.2
1.3 使使`,
},
{
title: '二、账号注册与使用',
content: `2.1 您确认在您开始注册程序使用本应用服务前您应当具备中华人民共和国法律规定的与您行为相适应的民事行为能力。若您是未满18周岁的未成年人应在监护人监护、指导下并获得监护人同意后使用本应用服务。
2.2 使
2.3 使使
2.4 `,
},
{
title: '三、服务内容',
content: `3.1 本应用向您提供校园社交服务,包括但不限于:发布动态、评论互动、私信聊天、群组交流、学习资料分享等功能。
3.2
3.3 `,
},
{
title: '四、用户行为规范',
content: `4.1 您在使用本应用服务时,必须遵守中华人民共和国相关法律法规,不得利用本应用从事违法违规活动。
4.2
1
2
3
4
5
6
7
8
9
4.3
1使
2使
3
4
5
6广
4.4 18使使
4.5 system@qczlit.cn `,
},
{
title: '五、知识产权',
content: `5.1 本应用的商标、标识、界面设计、程序代码、数据库等所有知识产权均归我们及我们的关联公司所有或已获得合法授权。
5.2 使使广
5.3 `,
},
{
title: '六、隐私保护',
content: `6.1 我们非常重视您的隐私保护,具体隐私政策请参见《隐私政策》。
6.2 使
6.3 `,
},
{
title: '七、免责声明',
content: `7.1 您理解并同意,本应用服务是按照现有技术和条件所能达到的现状提供的。我们会尽最大努力确保服务的连贯性和安全性,但不能随时预见和防范法律、技术以及其他风险。
7.2
1
2
3
4
7.3 `,
},
{
title: '八、违约责任',
content: `8.1 如果我们发现或收到他人举报您违反本协议约定的,我们有权根据情节轻重对相关内容进行删除、屏蔽,并视行为情节对违规账号处以包括但不限于警告、限制功能、暂停使用、永久封禁等处罚。因法律法规要求或紧急情况下,我们可能在不提前通知的情况下采取上述措施。
8.2 退
8.3 `,
},
{
title: '九、协议的终止',
content: `9.1 您有权随时终止使用本应用服务,可以通过注销账号的方式终止本协议。
9.2
1
2
3
9.3 `,
},
{
title: '十、其他',
content: `10.1 本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。
10.2
10.3 `,
},
];
function createTermsStyles(colors: AppColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
scrollContent: {
paddingHorizontal: 28,
paddingTop: 24,
},
// 内容区域
content: {
maxWidth: CONTENT_MAX_WIDTH,
alignSelf: 'center',
width: '100%',
},
// 更新日期
lastUpdated: {
fontSize: 13,
color: colors.text.hint,
marginBottom: 20,
},
// 协议内容卡片
termsCard: {
backgroundColor: '#F5F5F7',
borderRadius: 16,
padding: 20,
marginBottom: 24,
},
section: {
marginBottom: 24,
},
sectionLast: {
marginBottom: 0,
},
sectionTitle: {
fontSize: 16,
fontWeight: '600',
color: THEME_COLORS.primary,
marginBottom: 12,
},
sectionContent: {
fontSize: 14,
lineHeight: 24,
color: colors.text.primary,
},
// 底部版权
footer: {
alignItems: 'center',
},
footerText: {
fontSize: 13,
color: colors.text.hint,
textAlign: 'center',
marginBottom: 4,
},
});
}
export const TermsOfServiceScreen: React.FC = () => {
const colors = useAppColors();
const styles = useMemo(() => createTermsStyles(colors), [colors]);
const insets = useSafeAreaInsets();
const { isMobile } = useResponsive();
const responsivePadding = useResponsiveSpacing({ xs: 20, sm: 24, md: 28, lg: 32, xl: 40 });
// 底部间距,避免被 TabBar 遮挡
const scrollBottomInset = isMobile ? 64 + 24 + insets.bottom + spacing.md : spacing.lg;
return (
<SafeAreaView style={styles.container} edges={['bottom']}>
<ScrollView
contentContainerStyle={[styles.scrollContent, { paddingHorizontal: responsivePadding, paddingBottom: scrollBottomInset }]}
showsVerticalScrollIndicator={false}
>
<View style={styles.content}>
{/* 更新日期 */}
<Text style={styles.lastUpdated}>{LAST_UPDATED}</Text>
{/* 协议内容 */}
<View style={styles.termsCard}>
{TERMS_SECTIONS.map((section, index) => (
<View key={index} style={[styles.section, index === TERMS_SECTIONS.length - 1 && styles.sectionLast]}>
<Text style={styles.sectionTitle}>{section.title}</Text>
<Text style={styles.sectionContent}>{section.content}</Text>
</View>
))}
</View>
{/* 底部版权 */}
<View style={styles.footer}>
<Text style={styles.footerText}>© 2026 </Text>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
};
export default TermsOfServiceScreen;