feat: 样式改版

This commit is contained in:
jinyaqiu 2025-08-08 17:57:54 +08:00
parent d7e07b327a
commit f975ef6ec4
12 changed files with 56 additions and 47 deletions

View File

@ -129,8 +129,8 @@ export default function OwnerPage() {
{/* 作品数据 */} {/* 作品数据 */}
<View className='flex flex-row justify-between gap-[1rem]'> <View className='flex flex-row justify-between gap-[1rem]'>
<CreateCountComponent title={t("generalSetting.storiesCreated", { ns: "personal" })} icon={<StoriesSvg width={30} height={30} />} number={userInfoDetails.stories_count} /> <CreateCountComponent title={t("generalSetting.storiesCreated", { ns: "personal" })} icon={<StoriesSvg width={16} height={16} />} number={userInfoDetails.stories_count} />
<CreateCountComponent title={t("generalSetting.conversationsWithMemo", { ns: "personal" })} icon={<ConversationsSvg width={30} height={30} />} number={userInfoDetails.conversations_count} /> <CreateCountComponent title={t("generalSetting.conversationsWithMemo", { ns: "personal" })} icon={<ConversationsSvg width={16} height={16} />} number={userInfoDetails.conversations_count} />
</View> </View>
{/* 排行榜 */} {/* 排行榜 */}

View File

@ -221,7 +221,7 @@ const Setting = () => {
<TouchableOpacity onPress={() => { router.push('/owner') }}> <TouchableOpacity onPress={() => { router.push('/owner') }}>
<ReturnArrowSvg /> <ReturnArrowSvg />
</TouchableOpacity> </TouchableOpacity>
<Text style={styles.modalTitle}>{t('generalSetting.allTitle', { ns: 'personal' })}</Text> <ThemedText style={styles.modalTitle} >{t('generalSetting.allTitle', { ns: 'personal' })}</ThemedText>
<Text style={{ opacity: 0 }}>×</Text> <Text style={{ opacity: 0 }}>×</Text>
</View> </View>
<ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}> <ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}>
@ -269,11 +269,11 @@ const Setting = () => {
</View> */} </View> */}
{/* 权限信息 */} {/* 权限信息 */}
<View style={{ marginTop: 16 }}> <View style={{ marginTop: 16 }}>
<ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('permission.permissionManagement', { ns: 'personal' })}</ThemedText> <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('permission.permissionManagement', { ns: 'personal' })}</ThemedText>
<View style={styles.content}> <View style={styles.content}>
{/* 相册权限 */} {/* 相册权限 */}
<View style={styles.item}> <View style={styles.item}>
<ThemedText style={styles.itemText}>{t('permission.galleryAccess', { ns: 'personal' })}</ThemedText> <ThemedText style={styles.itemText} type="sfPro">{t('permission.galleryAccess', { ns: 'personal' })}</ThemedText>
<CustomSwitch <CustomSwitch
isEnabled={albumEnabled} isEnabled={albumEnabled}
toggleSwitch={toggleAlbum} toggleSwitch={toggleAlbum}
@ -284,7 +284,7 @@ const Setting = () => {
{/* 位置权限 */} {/* 位置权限 */}
<View style={styles.item}> <View style={styles.item}>
<View> <View>
<ThemedText style={styles.itemText}>{t('permission.locationPermission', { ns: 'personal' })}</ThemedText> <ThemedText style={styles.itemText} type="sfPro">{t('permission.locationPermission', { ns: 'personal' })}</ThemedText>
</View> </View>
<CustomSwitch <CustomSwitch
isEnabled={locationEnabled} isEnabled={locationEnabled}
@ -294,7 +294,7 @@ const Setting = () => {
<Divider /> <Divider />
<View style={styles.item}> <View style={styles.item}>
<View> <View>
<ThemedText style={styles.itemText}>{t('permission.pushNotification', { ns: 'personal' })}</ThemedText> <ThemedText style={styles.itemText} type="sfPro">{t('permission.pushNotification', { ns: 'personal' })}</ThemedText>
</View> </View>
<CustomSwitch <CustomSwitch
isEnabled={notificationsEnabled} isEnabled={notificationsEnabled}
@ -335,62 +335,62 @@ const Setting = () => {
</View> */} </View> */}
{/* 协议 */} {/* 协议 */}
<View style={{ marginTop: 16 }}> <View style={{ marginTop: 16 }}>
<ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('lcenses.title', { ns: 'personal' })}</ThemedText> <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('lcenses.title', { ns: 'personal' })}</ThemedText>
<View style={styles.content}> <View style={styles.content}>
<TouchableOpacity style={styles.item} onPress={() => { setModalType('privacy'); setPrivacyModalVisible(true) }} > <TouchableOpacity style={styles.item} onPress={() => { setModalType('privacy'); setPrivacyModalVisible(true) }} >
<ThemedText style={styles.itemText}>{t('lcenses.privacyPolicy', { ns: 'personal' })}</ThemedText> <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.privacyPolicy', { ns: 'personal' })}</ThemedText>
<RightArrowSvg /> <RightArrowSvg />
</TouchableOpacity> </TouchableOpacity>
<Divider /> <Divider />
<TouchableOpacity style={styles.item} onPress={() => { setModalType('terms'); setPrivacyModalVisible(true) }} > <TouchableOpacity style={styles.item} onPress={() => { setModalType('terms'); setPrivacyModalVisible(true) }} >
<ThemedText style={styles.itemText}>{t('lcenses.applyPermission', { ns: 'personal' })}</ThemedText> <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.applyPermission', { ns: 'personal' })}</ThemedText>
<RightArrowSvg /> <RightArrowSvg />
</TouchableOpacity> </TouchableOpacity>
<Divider /> <Divider />
<TouchableOpacity style={styles.item} onPress={() => { setModalType('user'); setPrivacyModalVisible(true) }} > <TouchableOpacity style={styles.item} onPress={() => { setModalType('user'); setPrivacyModalVisible(true) }} >
<ThemedText style={styles.itemText}>{t('lcenses.userAgreement', { ns: 'personal' })}</ThemedText> <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.userAgreement', { ns: 'personal' })}</ThemedText>
<RightArrowSvg /> <RightArrowSvg />
</TouchableOpacity> </TouchableOpacity>
<Divider /> <Divider />
<TouchableOpacity style={styles.item} onPress={() => { setModalType('ai'); setPrivacyModalVisible(true) }} > <TouchableOpacity style={styles.item} onPress={() => { setModalType('ai'); setPrivacyModalVisible(true) }} >
<ThemedText style={styles.itemText}>{t('lcenses.aiPolicy', { ns: 'personal' })}</ThemedText> <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.aiPolicy', { ns: 'personal' })}</ThemedText>
<RightArrowSvg /> <RightArrowSvg />
</TouchableOpacity> </TouchableOpacity>
<Divider /> <Divider />
<TouchableOpacity style={styles.item} onPress={() => { setLcensesModalVisible(true) }} > <TouchableOpacity style={styles.item} onPress={() => { setLcensesModalVisible(true) }} >
<ThemedText style={styles.itemText}>{t('lcenses.qualification', { ns: 'personal' })}</ThemedText> <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.qualification', { ns: 'personal' })}</ThemedText>
<RightArrowSvg /> <RightArrowSvg />
</TouchableOpacity> </TouchableOpacity>
<Divider /> <Divider />
<TouchableOpacity style={[styles.item, { display: language == "en" ? 'none' : 'flex' }]} onPress={() => Linking.openURL("https://beian.miit.gov.cn/")} > <TouchableOpacity style={[styles.item, { display: language == "en" ? 'none' : 'flex' }]} onPress={() => Linking.openURL("https://beian.miit.gov.cn/")} >
<ThemedText style={styles.itemText}>{t('lcenses.ICP', { ns: 'personal' })}ICP备2025133004号-2A</ThemedText> <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.ICP', { ns: 'personal' })}ICP备2025133004号-2A</ThemedText>
<RightArrowSvg /> <RightArrowSvg />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
{/* 其他信息 */} {/* 其他信息 */}
<View style={{ marginTop: 16 }}> <View style={{ marginTop: 16 }}>
<ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.otherInformation', { ns: 'personal' })}</ThemedText> <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('generalSetting.otherInformation', { ns: 'personal' })}</ThemedText>
<View style={styles.content}> <View style={styles.content}>
<TouchableOpacity style={styles.item} onPress={() => Linking.openURL("https://work.weixin.qq.com/kfid/kfca0ac87f4e05e8bfd")} > <TouchableOpacity style={styles.item} onPress={() => Linking.openURL("https://work.weixin.qq.com/kfid/kfca0ac87f4e05e8bfd")} >
<ThemedText style={styles.itemText}>{t('generalSetting.contactUs', { ns: 'personal' })}</ThemedText> <ThemedText style={styles.itemText} type="sfPro">{t('generalSetting.contactUs', { ns: 'personal' })}</ThemedText>
{/* <RightArrowSvg /> */} {/* <RightArrowSvg /> */}
</TouchableOpacity> </TouchableOpacity>
<Divider /> <Divider />
<View style={styles.item}> <View style={styles.item}>
<ThemedText style={styles.itemText}>{t('generalSetting.version', { ns: 'personal' })}</ThemedText> <ThemedText style={styles.itemText} type="sfPro">{t('generalSetting.version', { ns: 'personal' })}</ThemedText>
<ThemedText style={styles.itemText}>{"0.5.0"}</ThemedText> <ThemedText style={styles.itemText}>{"0.5.0"}</ThemedText>
</View> </View>
</View> </View>
</View> </View>
{/* 退出 */} {/* 退出 */}
<TouchableOpacity style={[styles.premium, { marginVertical: 8 }]} onPress={handleLogout}> <TouchableOpacity style={[styles.premium, { marginVertical: 8 }]} onPress={handleLogout}>
<ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.logout', { ns: 'personal' })}</ThemedText> <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('generalSetting.logout', { ns: 'personal' })}</ThemedText>
<LogoutSvg /> <LogoutSvg />
</TouchableOpacity> </TouchableOpacity>
{/* 注销账号 */} {/* 注销账号 */}
<TouchableOpacity style={[styles.premium, { marginVertical: 8 }]} onPress={() => setDeleteModalVisible(true)}> <TouchableOpacity style={[styles.premium, { marginVertical: 8 }]} onPress={() => setDeleteModalVisible(true)}>
<ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.deleteAccount', { ns: 'personal' })}</ThemedText> <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('generalSetting.deleteAccount', { ns: 'personal' })}</ThemedText>
<DeleteSvg /> <DeleteSvg />
</TouchableOpacity> </TouchableOpacity>
</ScrollView> </ScrollView>

View File

@ -172,7 +172,7 @@ export default function OwnerPage() {
<TouchableOpacity onPress={() => { router.push('/owner') }} style={{ padding: 16 }}> <TouchableOpacity onPress={() => { router.push('/owner') }} style={{ padding: 16 }}>
<ReturnArrowSvg /> <ReturnArrowSvg />
</TouchableOpacity> </TouchableOpacity>
<ThemedText style={styles.headerTitle}> <ThemedText style={styles.headerTitle} >
Top Memory Makers Top Memory Makers
</ThemedText> </ThemedText>
<ThemedText className='opacity-0'>123</ThemedText> <ThemedText className='opacity-0'>123</ThemedText>

View File

@ -95,6 +95,7 @@ const CascaderComponent: React.FC<CascaderProps> = ({
textStyle, textStyle,
isActive && [styles.activeText, activeTextStyle] isActive && [styles.activeText, activeTextStyle]
]} ]}
type='sfPro'
> >
{item.name} {item.name}
</ThemedText> </ThemedText>

View File

@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Modal from 'react-native-modal'; import Modal from 'react-native-modal';
import Cascader, { CascaderItem } from '../cascader'; import Cascader, { CascaderItem } from '../cascader';
import { ThemedText } from '../ThemedText';
interface ClassifyModalProps { interface ClassifyModalProps {
modalVisible: boolean; modalVisible: boolean;
@ -39,9 +40,9 @@ const ClassifyModal = (props: ClassifyModalProps) => {
<View style={styles.modalView}> <View style={styles.modalView}>
<View style={styles.modalHeader}> <View style={styles.modalHeader}>
<Text style={{ opacity: 0 }}>Settings</Text> <Text style={{ opacity: 0 }}>Settings</Text>
<Text style={styles.modalTitle}>{t('generalSetting.classify', { ns: 'personal' })}</Text> <ThemedText style={styles.modalTitle}>{t('generalSetting.classify', { ns: 'personal' })}</ThemedText>
<TouchableOpacity onPress={() => setModalVisible(false)}> <TouchableOpacity onPress={() => setModalVisible(false)}>
<Text style={styles.closeButton}>×</Text> <ThemedText style={styles.closeButton}>×</ThemedText>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}> <ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}>

View File

@ -20,12 +20,10 @@ const CreateCountComponent = React.memo((props: CreateCountProps) => {
return ( return (
<View style={containerStyle}> <View style={containerStyle}>
<View style={styles.header}> <View style={styles.header}>
<View className="mt-1"> <ThemedText type="sfPro" weight="bold" color="textSecondary" size="xxs" style={{ lineHeight: 16 }}>{props.title}</ThemedText>
{props.icon} {props.icon}
</View>
<ThemedText style={styles.title} className="!text-textSecondary">{props.title}</ThemedText>
</View> </View>
<ThemedText style={styles.number} className="!text-textSecondary">{props.number}</ThemedText> <ThemedText weight="bold" color="textSecondary" size="title" style={{ lineHeight: 36, textAlign: "right" }}>{props.number}</ThemedText>
</View> </View>
); );
}); });
@ -35,11 +33,12 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "center", // alignItems: "center",
justifyContent: "center", justifyContent: "center",
gap: 8, gap: 8,
backgroundColor: "#FAF9F6", backgroundColor: "#FAF9F6",
padding: 16, paddingVertical: 16,
paddingRight: 16,
borderRadius: 12, borderRadius: 12,
shadowColor: "#000", shadowColor: "#000",
shadowOffset: { shadowOffset: {
@ -51,13 +50,12 @@ const styles = StyleSheet.create({
// elevation: 1, // elevation: 1,
}, },
header: { header: {
width: "100%", width: "90%",
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center",
paddingHorizontal: 16, paddingHorizontal: 16,
justifyContent: "center", alignItems: "flex-start",
gap: 8, gap: 4,
}, },
title: { title: {
fontSize: 20, fontSize: 20,

View File

@ -36,6 +36,7 @@ const PodiumComponent = ({ data }: IPodium) => {
numberOfLines={1} numberOfLines={1}
ellipsizeMode="tail" ellipsizeMode="tail"
style={styles.title} style={styles.title}
type="inter"
> >
{data[1]?.user_nick_name} {data[1]?.user_nick_name}
</ThemedText> </ThemedText>
@ -65,6 +66,7 @@ const PodiumComponent = ({ data }: IPodium) => {
numberOfLines={2} numberOfLines={2}
ellipsizeMode="tail" ellipsizeMode="tail"
style={styles.title} style={styles.title}
type="inter"
> >
{data[0]?.user_nick_name} {data[0]?.user_nick_name}
</ThemedText> </ThemedText>
@ -94,6 +96,7 @@ const PodiumComponent = ({ data }: IPodium) => {
numberOfLines={1} numberOfLines={1}
ellipsizeMode="tail" ellipsizeMode="tail"
style={styles.title} style={styles.title}
type="inter"
> >
{data[2]?.user_nick_name} {data[2]?.user_nick_name}
</ThemedText> </ThemedText>

View File

@ -15,9 +15,9 @@ const RankList = (props: IRankList) => {
contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 16, marginTop: 16 }} contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 16, marginTop: 16 }}
> >
<View style={styles.item}> <View style={styles.item}>
<ThemedText style={styles.headerText}>Rank</ThemedText> <ThemedText style={styles.headerText} type="sfPro">Rank</ThemedText>
<ThemedText style={styles.headerText}>Username</ThemedText> <ThemedText style={styles.headerText} type="sfPro">Username</ThemedText>
<ThemedText style={styles.headerText}>Profile</ThemedText> <ThemedText style={styles.headerText} type="sfPro">Profile</ThemedText>
</View> </View>
{props.data?.filter((item, index) => index > 2).map((item, index) => ( {props.data?.filter((item, index) => index > 2).map((item, index) => (
<View <View
@ -35,8 +35,8 @@ const RankList = (props: IRankList) => {
<OwnerSvg width="100%" height="100%" /> <OwnerSvg width="100%" height="100%" />
</View> </View>
)} )}
<ThemedText style={styles.itemRank}>{index + 1}</ThemedText> <ThemedText style={styles.itemRank} type="sfPro">{index + 1}</ThemedText>
<ThemedText style={styles.itemName}>{item.user_nick_name}</ThemedText> <ThemedText style={styles.itemName} type="inter">{item.user_nick_name}</ThemedText>
<View style={{ opacity: index == 1 ? 0 : 1 }}> <View style={{ opacity: index == 1 ? 0 : 1 }}>
{(() => { {(() => {
const [imageError, setImageError] = useState(false); const [imageError, setImageError] = useState(false);
@ -66,9 +66,9 @@ const styles = StyleSheet.create({
backgroundColor: 'white', backgroundColor: 'white',
}, },
headerText: { headerText: {
fontSize: 14, fontSize: 12,
color: "#4C320C", color: "#4C320C",
fontWeight: "600" fontWeight: "500"
}, },
item: { item: {
flexDirection: 'row', flexDirection: 'row',
@ -85,7 +85,7 @@ const styles = StyleSheet.create({
fontWeight: "700" fontWeight: "700"
}, },
itemName: { itemName: {
fontSize: 14, fontSize: 12,
color: "#AC7E35", color: "#AC7E35",
}, },
self: { self: {

View File

@ -79,11 +79,11 @@ const UserInfo = (props: UserInfoProps) => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.info}> <View style={styles.info}>
<ThemedText style={styles.nickname}>{userInfo?.nickname}</ThemedText> <ThemedText style={styles.nickname} type="sfPro">{userInfo?.nickname}</ThemedText>
<ThemedText style={styles.userId}>{t('generalSetting.userId', { ns: 'personal' })}{userInfo?.user_id}</ThemedText> <ThemedText style={styles.userId} type="inter">{t('generalSetting.userId', { ns: 'personal' })}{userInfo?.user_id}</ThemedText>
<View style={styles.location}> <View style={styles.location}>
<LocationSvg /> <LocationSvg />
<ThemedText style={styles.userId}> <ThemedText style={styles.userId} type="inter">
{currentLocation?.country}-{currentLocation?.city}-{currentLocation?.district} {currentLocation?.country}-{currentLocation?.city}-{currentLocation?.district}
</ThemedText> </ThemedText>
<TouchableOpacity <TouchableOpacity

View File

@ -35,9 +35,13 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
<View className='flex flex-row items-center gap-2 w-full justify-between'> <View className='flex flex-row items-center gap-2 w-full justify-between'>
<View style={{ width: "100%", flexDirection: "row", alignItems: "center", gap: 2 }}> <View style={{ width: "100%", flexDirection: "row", alignItems: "center", gap: 2 }}>
<ThemedText <ThemedText
style={{ maxWidth: "90%", color: '#4C320C', fontSize: 32, lineHeight: 36, fontWeight: '700' }} style={{ maxWidth: "90%", lineHeight: 30 }}
weight='bold'
color='textSecondary'
size='3xl'
numberOfLines={1} numberOfLines={1}
ellipsizeMode="tail" ellipsizeMode="tail"
> >
{userInfo?.user_info?.nickname} {userInfo?.user_info?.nickname}
</ThemedText> </ThemedText>
@ -62,6 +66,7 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
flexShrink: 1, flexShrink: 1,
flexGrow: 0, flexGrow: 0,
}} }}
type="inter"
numberOfLines={1} numberOfLines={1}
ellipsizeMode="tail" ellipsizeMode="tail"
> >
@ -91,6 +96,7 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
maxWidth: 40, maxWidth: 40,
lineHeight: 20 lineHeight: 20
}} }}
type="inter"
numberOfLines={1} numberOfLines={1}
ellipsizeMode="tail" ellipsizeMode="tail"
> >

View File

@ -38,6 +38,6 @@ export const Fonts = {
} as const; } as const;
export type FontWeight = keyof Omit<typeof Fonts, 'quicksand' | 'sfPro' | 'inter' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'>; export type FontWeight = keyof Omit<typeof Fonts, 'quicksand' | 'sfPro' | 'inter' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'>;
export type FontSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'title'; export type FontSize = "xxs" | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "title";
export type FontColor = 'bgPrimary' | 'bgSecondary' | 'textPrimary' | 'textSecondary' | 'textThird' | 'textWhite'; export type FontColor = 'bgPrimary' | 'bgSecondary' | 'textPrimary' | 'textSecondary' | 'textThird' | 'textWhite';

View File

@ -74,7 +74,7 @@
"confirm": "Confirm", "confirm": "Confirm",
"location": "Location", "location": "Location",
"rank": "Top Memory Makers", "rank": "Top Memory Makers",
"userId": "User ID", "userId": "User ID : ",
"usedStorage": "Storage Used", "usedStorage": "Storage Used",
"remainingPoints": "Points Remaining", "remainingPoints": "Points Remaining",
"totalVideo": "Total Videos", "totalVideo": "Total Videos",