FairClip/memowake-front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 样式改版

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/(tabs)/owner.tsx
View File

@ -129,8 +129,8 @@ export default function OwnerPage() {
{/* 作品数据 */}
<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.conversationsWithMemo", { ns: "personal" })} icon={<ConversationsSvg width={30} height={30} />} number={userInfoDetails.conversations_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={16} height={16} />} number={userInfoDetails.conversations_count} />
</View>
{/* 排行榜 */}

34
app/(tabs)/setting.tsx
View File

@ -221,7 +221,7 @@ const Setting = () => {
<TouchableOpacity onPress={() => { router.push('/owner') }}>
<ReturnArrowSvg />
</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>
</View>
<ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}>
@ -269,11 +269,11 @@ const Setting = () => {
</View> */}
{/* 权限信息 */}
<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.item}>
<ThemedText style={styles.itemText}>{t('permission.galleryAccess', { ns: 'personal' })}</ThemedText>
<ThemedText style={styles.itemText} type="sfPro">{t('permission.galleryAccess', { ns: 'personal' })}</ThemedText>
<CustomSwitch
isEnabled={albumEnabled}
toggleSwitch={toggleAlbum}
@ -284,7 +284,7 @@ const Setting = () => {
{/* 位置权限 */}
<View style={styles.item}>
<View>
<ThemedText style={styles.itemText}>{t('permission.locationPermission', { ns: 'personal' })}</ThemedText>
<ThemedText style={styles.itemText} type="sfPro">{t('permission.locationPermission', { ns: 'personal' })}</ThemedText>
</View>
<CustomSwitch
isEnabled={locationEnabled}
@ -294,7 +294,7 @@ const Setting = () => {
<Divider />
<View style={styles.item}>
<View>
<ThemedText style={styles.itemText}>{t('permission.pushNotification', { ns: 'personal' })}</ThemedText>
<ThemedText style={styles.itemText} type="sfPro">{t('permission.pushNotification', { ns: 'personal' })}</ThemedText>
</View>
<CustomSwitch
isEnabled={notificationsEnabled}
@ -335,62 +335,62 @@ const Setting = () => {
</View> */}
{/* 协议 */}
<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}>
<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 />
</TouchableOpacity>
<Divider />
<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 />
</TouchableOpacity>
<Divider />
<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 />
</TouchableOpacity>
<Divider />
<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 />
</TouchableOpacity>
<Divider />
<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 />
</TouchableOpacity>
<Divider />
<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 />
</TouchableOpacity>
</View>
</View>
{/* 其他信息 */}
<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}>
<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 /> */}
</TouchableOpacity>
<Divider />
<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>
</View>
</View>
</View>
{/* 退出 */}
<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 />
</TouchableOpacity>
{/* 注销账号 */}
<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 />
</TouchableOpacity>
</ScrollView>

2
app/(tabs)/top.tsx
View File

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

1
components/cascader.tsx
View File

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

5
components/owner/classify.tsx
View File

@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Modal from 'react-native-modal';
import Cascader, { CascaderItem } from '../cascader';
import { ThemedText } from '../ThemedText';
interface ClassifyModalProps {
modalVisible: boolean;
@ -39,9 +40,9 @@ const ClassifyModal = (props: ClassifyModalProps) => {
<View style={styles.modalView}>
<View style={styles.modalHeader}>
<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)}>
<Text style={styles.closeButton}>×</Text>
<ThemedText style={styles.closeButton}>×</ThemedText>
</TouchableOpacity>
</View>
<ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}>

20
components/owner/createCount.tsx
View File

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

3
components/owner/podium.tsx
View File

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

16
components/owner/rankList.tsx
View File

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

6
components/owner/userInfo.tsx
View File

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

8
components/owner/userName.tsx
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 style={{ width: "100%", flexDirection: "row", alignItems: "center", gap: 2 }}>
<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}
ellipsizeMode="tail"
>
{userInfo?.user_info?.nickname}
</ThemedText>
@ -62,6 +66,7 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
flexShrink: 1,
flexGrow: 0,
}}
type="inter"
numberOfLines={1}
ellipsizeMode="tail"
>
@ -91,6 +96,7 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
maxWidth: 40,
lineHeight: 20
}}
type="inter"
numberOfLines={1}
ellipsizeMode="tail"
>

2
constants/Fonts.ts
View File

@ -38,6 +38,6 @@ export const Fonts = {
} as const;
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';

2
i18n/locales/en/personal.json
View File

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