663 lines
17 KiB
TypeScript
663 lines
17 KiB
TypeScript
import React, { useEffect, useMemo, useState } from 'react';
|
||
import { Alert, FlatList, Image, Pressable, StyleSheet, Text, View } from 'react-native';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { LinearGradient } from 'expo-linear-gradient';
|
||
import { Switch } from 'react-native';
|
||
import Animated, {
|
||
Easing,
|
||
FadeIn,
|
||
FadeOut,
|
||
SlideInLeft,
|
||
SlideInRight,
|
||
SlideOutLeft,
|
||
SlideOutRight,
|
||
} from 'react-native-reanimated';
|
||
|
||
import SheetModal from '@/components/ui/SheetModal';
|
||
|
||
import { MOCK_CONTENT } from '@/src/constants/mockContent';
|
||
import {
|
||
getDailyReminderSettings,
|
||
getFavorites,
|
||
setDailyReminderSettings,
|
||
type DailyReminderSettings,
|
||
} from '@/src/storage/appStorage';
|
||
|
||
import AvatarIcon from '@/assets/images/home/Profile/Default_avatar.png';
|
||
import MyLikeIcon from '@/assets/images/home/Profile/mylike.svg';
|
||
import SmallComponentIcon from '@/assets/images/home/Profile/small_component.svg';
|
||
import RemindIcon from '@/assets/images/home/Profile/remind.svg';
|
||
import PrivacyIcon from '@/assets/images/home/Profile/privacy Policy.svg';
|
||
import TermsIcon from '@/assets/images/home/Profile/terms_of_use.svg';
|
||
import LanguageIcon from '@/assets/images/home/Profile/language.svg';
|
||
|
||
type Props = {
|
||
visible: boolean;
|
||
name?: string;
|
||
onClose: () => void;
|
||
};
|
||
|
||
type Page = 'root' | 'favorites' | 'dailyReminder' | 'widget';
|
||
type NavDirection = 'forward' | 'back';
|
||
|
||
export default function ProfileModal({ visible, name, onClose }: Props) {
|
||
const { t } = useTranslation();
|
||
|
||
const [page, setPage] = useState<Page>('root');
|
||
const [navDirection, setNavDirection] = useState<NavDirection>('forward');
|
||
const isRoot = page === 'root';
|
||
|
||
// 关闭弹窗时重置为首页，避免下次打开停留在二级页
|
||
useEffect(() => {
|
||
if (!visible) {
|
||
setNavDirection('back');
|
||
setPage('root');
|
||
}
|
||
}, [visible]);
|
||
|
||
function go(next: Page, direction: NavDirection) {
|
||
setNavDirection(direction);
|
||
setPage(next);
|
||
}
|
||
|
||
function handleClose() {
|
||
setNavDirection('back');
|
||
setPage('root');
|
||
onClose();
|
||
}
|
||
|
||
function handleSheetClose() {
|
||
// 需求：二级页点击 X 等同于点击“返回”
|
||
if (!isRoot) {
|
||
go('root', 'back');
|
||
return;
|
||
}
|
||
handleClose();
|
||
}
|
||
|
||
const title = useMemo(() => {
|
||
if (page === 'favorites') return t('profile.favorites');
|
||
if (page === 'dailyReminder') return t('dailyReminder.title');
|
||
if (page === 'widget') return t('profile.widget');
|
||
return t('profile.title');
|
||
}, [page, t]);
|
||
|
||
const transition = useMemo(() => {
|
||
const duration = 220;
|
||
const easing = Easing.out(Easing.cubic);
|
||
|
||
// 进入二级页：从右侧滑入；返回：从左侧滑入
|
||
const entering =
|
||
navDirection === 'forward'
|
||
? SlideInRight.duration(duration).easing(easing)
|
||
: SlideInLeft.duration(duration).easing(easing);
|
||
|
||
// 离开：进入二级页时旧页面向左滑出；返回时旧页面向右滑出
|
||
const exiting =
|
||
navDirection === 'forward'
|
||
? SlideOutLeft.duration(duration).easing(easing)
|
||
: SlideOutRight.duration(duration).easing(easing);
|
||
|
||
return {
|
||
entering,
|
||
exiting,
|
||
fadeIn: FadeIn.duration(duration).easing(easing),
|
||
fadeOut: FadeOut.duration(duration).easing(easing),
|
||
};
|
||
}, [navDirection]);
|
||
|
||
return (
|
||
<SheetModal visible={visible} title={title} onClose={handleSheetClose}>
|
||
{!isRoot && (
|
||
<Pressable
|
||
onPress={() => go('root', 'back')}
|
||
hitSlop={8}
|
||
accessibilityRole="button"
|
||
accessibilityLabel={t('common.back')}
|
||
style={styles.backRow}
|
||
>
|
||
<Text style={styles.backText}>‹ {t('common.back')}</Text>
|
||
</Pressable>
|
||
)}
|
||
|
||
<Animated.View
|
||
key={page}
|
||
entering={transition.entering}
|
||
exiting={transition.exiting}
|
||
style={styles.pageWrap}
|
||
>
|
||
<Animated.View entering={transition.fadeIn} exiting={transition.fadeOut}>
|
||
{page === 'root' ? (
|
||
<RootPage
|
||
name={name}
|
||
onOpenFavorites={() => go('favorites', 'forward')}
|
||
onOpenWidget={() => go('widget', 'forward')}
|
||
onOpenDailyReminder={() => go('dailyReminder', 'forward')}
|
||
/>
|
||
) : page === 'favorites' ? (
|
||
<FavoritesPage visible={visible} />
|
||
) : page === 'dailyReminder' ? (
|
||
<DailyReminderPage visible={visible} onDone={() => go('root', 'back')} />
|
||
) : (
|
||
<WidgetPage />
|
||
)}
|
||
</Animated.View>
|
||
</Animated.View>
|
||
</SheetModal>
|
||
);
|
||
}
|
||
|
||
function toastTodo(t: (key: string) => string) {
|
||
Alert.alert(t('profile.todoTitle'), t('profile.todoDesc'));
|
||
}
|
||
|
||
function RootPage({
|
||
name,
|
||
onOpenFavorites,
|
||
onOpenWidget,
|
||
onOpenDailyReminder,
|
||
}: {
|
||
name?: string;
|
||
onOpenFavorites: () => void;
|
||
onOpenWidget: () => void;
|
||
onOpenDailyReminder: () => void;
|
||
}) {
|
||
const { t } = useTranslation();
|
||
return (
|
||
<>
|
||
<View style={styles.header}>
|
||
<Image source={AvatarIcon} style={styles.avatarImage} resizeMode="contain" />
|
||
<Text style={styles.name}>{name || 'Hali'}</Text>
|
||
</View>
|
||
|
||
<View style={styles.quickRow}>
|
||
<QuickCard title={t('profile.favorites')} onPress={onOpenFavorites}>
|
||
<MyLikeIcon width={34} height={34} />
|
||
</QuickCard>
|
||
<QuickCard title={t('profile.widget')} onPress={onOpenWidget}>
|
||
<SmallComponentIcon width={34} height={34} />
|
||
</QuickCard>
|
||
</View>
|
||
|
||
<View style={styles.list}>
|
||
<ListItem
|
||
icon={<RemindIcon width={22} height={22} />}
|
||
title={t('profile.dailyReminder')}
|
||
onPress={onOpenDailyReminder}
|
||
/>
|
||
<ListItem
|
||
icon={<PrivacyIcon width={22} height={22} />}
|
||
title={t('profile.privacy')}
|
||
onPress={() => toastTodo(t)}
|
||
/>
|
||
<ListItem
|
||
icon={<TermsIcon width={22} height={22} />}
|
||
title={t('profile.terms')}
|
||
onPress={() => toastTodo(t)}
|
||
/>
|
||
<ListItem
|
||
icon={<LanguageIcon width={22} height={22} />}
|
||
title={t('profile.language')}
|
||
onPress={() => toastTodo(t)}
|
||
/>
|
||
</View>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function FavoritesPage({ visible }: { visible: boolean }) {
|
||
const { t } = useTranslation();
|
||
const [ids, setIds] = useState<string[]>([]);
|
||
|
||
// 每次进入该页刷新一次，确保展示最新“喜欢”
|
||
useEffect(() => {
|
||
if (!visible) return;
|
||
let cancelled = false;
|
||
(async () => {
|
||
const list = await getFavorites();
|
||
if (!cancelled) setIds(list);
|
||
})();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [visible]);
|
||
|
||
const items = useMemo(() => {
|
||
const map = new Map(MOCK_CONTENT.map((c) => [c.id, c]));
|
||
return ids.map((id) => map.get(id)).filter(Boolean) as { id: string; text: string }[];
|
||
}, [ids]);
|
||
|
||
return (
|
||
<View style={styles.favContainer}>
|
||
{items.length === 0 ? (
|
||
<Text style={styles.favEmpty}>{t('favorites.empty')}</Text>
|
||
) : (
|
||
<FlatList
|
||
data={items}
|
||
keyExtractor={(it) => it.id}
|
||
contentContainerStyle={styles.favList}
|
||
renderItem={({ item }) => (
|
||
<View style={styles.favRow}>
|
||
<Text style={styles.favText}>{item.text}</Text>
|
||
</View>
|
||
)}
|
||
/>
|
||
)}
|
||
</View>
|
||
);
|
||
}
|
||
|
||
function DailyReminderPage({ visible, onDone }: { visible: boolean; onDone: () => void }) {
|
||
const { t } = useTranslation();
|
||
const [loading, setLoading] = useState(false);
|
||
const [timesPerDay, setTimesPerDay] = useState(3);
|
||
const [pushEnabled, setPushEnabled] = useState(false);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
if (!visible) return;
|
||
setLoading(true);
|
||
(async () => {
|
||
const s = await getDailyReminderSettings();
|
||
if (cancelled) return;
|
||
setTimesPerDay(s.timesPerDay);
|
||
setPushEnabled(s.pushEnabled);
|
||
setLoading(false);
|
||
})();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [visible]);
|
||
|
||
function clamp(next: number) {
|
||
return Math.min(10, Math.max(1, next));
|
||
}
|
||
|
||
async function onOk() {
|
||
if (loading) return;
|
||
setLoading(true);
|
||
const next: DailyReminderSettings = { timesPerDay, pushEnabled };
|
||
await setDailyReminderSettings(next);
|
||
setLoading(false);
|
||
onDone();
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<View style={styles.counter}>
|
||
<Pressable
|
||
onPress={() => setTimesPerDay((v) => clamp(v - 1))}
|
||
hitSlop={10}
|
||
style={styles.circleBtn}
|
||
accessibilityRole="button"
|
||
accessibilityLabel={t('dailyReminder.minus')}
|
||
>
|
||
<Text style={styles.circleText}>－</Text>
|
||
</Pressable>
|
||
|
||
<View style={styles.countCenter}>
|
||
<Text style={styles.countNumber}>{timesPerDay}</Text>
|
||
<Text style={styles.countUnit}>{t('dailyReminder.timesUnit')}</Text>
|
||
</View>
|
||
|
||
<Pressable
|
||
onPress={() => setTimesPerDay((v) => clamp(v + 1))}
|
||
hitSlop={10}
|
||
style={styles.circleBtn}
|
||
accessibilityRole="button"
|
||
accessibilityLabel={t('dailyReminder.plus')}
|
||
>
|
||
<Text style={styles.circleText}>＋</Text>
|
||
</Pressable>
|
||
</View>
|
||
|
||
<View style={styles.remindRow}>
|
||
<View style={styles.rowLeft}>
|
||
<View style={styles.rowIcon}>
|
||
<RemindIcon width={18} height={18} />
|
||
</View>
|
||
<Text style={styles.rowText}>{t('dailyReminder.pushLabel')}</Text>
|
||
</View>
|
||
<Switch value={pushEnabled} onValueChange={setPushEnabled} />
|
||
</View>
|
||
|
||
<Pressable onPress={onOk} disabled={loading} style={styles.okPressable}>
|
||
<LinearGradient
|
||
colors={['#F69F7B', '#F99CC0']}
|
||
start={{ x: 0, y: 0 }}
|
||
end={{ x: 1, y: 0 }}
|
||
style={[styles.okBtn, loading && styles.okBtnDisabled]}
|
||
>
|
||
<Text style={styles.okText}>{t('dailyReminder.ok')}</Text>
|
||
</LinearGradient>
|
||
</Pressable>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function WidgetPage() {
|
||
const { t } = useTranslation();
|
||
return (
|
||
<View style={styles.widgetContent}>
|
||
<View style={styles.widgetRow}>
|
||
<View style={styles.widgetCard}>
|
||
<View style={[styles.widgetPreviewInner, styles.widgetPreviewLock]}>
|
||
<Text style={styles.widgetPreviewDate} numberOfLines={1}>
|
||
{t('widget.previewDate')}
|
||
</Text>
|
||
<Text style={styles.widgetPreviewTime} numberOfLines={1}>
|
||
13:45
|
||
</Text>
|
||
</View>
|
||
<Text style={styles.widgetCardLabel}>{t('widget.lockScreen')}</Text>
|
||
</View>
|
||
|
||
<View style={styles.widgetCard}>
|
||
<View style={[styles.widgetPreviewInner, styles.widgetPreviewHome]}>
|
||
<Text style={styles.widgetPreviewQuote} numberOfLines={3}>
|
||
{t('widget.previewQuote')}
|
||
</Text>
|
||
</View>
|
||
<Text style={styles.widgetCardLabel}>{t('widget.homeScreen')}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<Text style={styles.widgetDesc}>{t('settings.widgetDesc')}</Text>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
function QuickCard({
|
||
title,
|
||
onPress,
|
||
children,
|
||
}: {
|
||
title: string;
|
||
onPress: () => void;
|
||
children: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<Pressable onPress={onPress} style={styles.quickCard} hitSlop={6}>
|
||
<Text style={styles.quickTitle}>{title}</Text>
|
||
<View style={styles.quickIconWrap}>{children}</View>
|
||
</Pressable>
|
||
);
|
||
}
|
||
|
||
function ListItem({
|
||
icon,
|
||
title,
|
||
onPress,
|
||
}: {
|
||
icon: React.ReactNode;
|
||
title: string;
|
||
onPress: () => void;
|
||
}) {
|
||
return (
|
||
<Pressable onPress={onPress} style={styles.item} hitSlop={6}>
|
||
<View style={styles.itemLeft}>
|
||
<View style={styles.itemIcon}>{icon}</View>
|
||
<Text style={styles.itemText}>{title}</Text>
|
||
</View>
|
||
<Text style={styles.chevron}>›</Text>
|
||
</Pressable>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
pageWrap: {
|
||
// 给页面切换动画一个稳定的容器，避免布局抖动
|
||
},
|
||
backRow: {
|
||
alignSelf: 'flex-start',
|
||
paddingVertical: 4,
|
||
paddingHorizontal: 2,
|
||
marginBottom: 6,
|
||
},
|
||
backText: {
|
||
color: 'rgba(94,42,40,0.75)',
|
||
fontSize: 13,
|
||
fontWeight: '700',
|
||
},
|
||
header: {
|
||
alignItems: 'center',
|
||
paddingTop: 6,
|
||
paddingBottom: 14,
|
||
},
|
||
// 头像是默认图片：234x183，没有圆角/边框/背景颜色
|
||
avatarImage: {
|
||
width: 234,
|
||
height: 183,
|
||
marginBottom: 10,
|
||
},
|
||
name: {
|
||
color: '#5E2A28',
|
||
fontSize: 18,
|
||
fontWeight: '700',
|
||
},
|
||
quickRow: {
|
||
flexDirection: 'row',
|
||
gap: 12,
|
||
paddingBottom: 14,
|
||
},
|
||
quickCard: {
|
||
flex: 1,
|
||
borderRadius: 16,
|
||
padding: 14,
|
||
backgroundColor: 'rgba(244,214,194,0.65)',
|
||
},
|
||
quickTitle: {
|
||
color: '#5E2A28',
|
||
fontSize: 14,
|
||
fontWeight: '700',
|
||
marginBottom: 10,
|
||
},
|
||
quickIconWrap: { alignItems: 'center', justifyContent: 'center', flex: 1 },
|
||
list: {
|
||
borderRadius: 16,
|
||
backgroundColor: 'rgba(255,255,255,0.75)',
|
||
overflow: 'hidden',
|
||
marginBottom: 8,
|
||
},
|
||
item: {
|
||
height: 52,
|
||
paddingHorizontal: 14,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||
borderBottomColor: 'rgba(94,42,40,0.10)',
|
||
},
|
||
itemLeft: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 10,
|
||
},
|
||
itemIcon: {
|
||
width: 28,
|
||
height: 28,
|
||
borderRadius: 10,
|
||
backgroundColor: 'rgba(244,214,194,0.55)',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
itemText: {
|
||
color: '#5E2A28',
|
||
fontSize: 15,
|
||
fontWeight: '600',
|
||
},
|
||
chevron: {
|
||
color: 'rgba(94,42,40,0.45)',
|
||
fontSize: 20,
|
||
marginTop: -2,
|
||
},
|
||
|
||
favContainer: {
|
||
borderRadius: 16,
|
||
backgroundColor: 'rgba(255,255,255,0.75)',
|
||
overflow: 'hidden',
|
||
marginBottom: 8,
|
||
},
|
||
favEmpty: {
|
||
color: 'rgba(94,42,40,0.55)',
|
||
fontSize: 15,
|
||
textAlign: 'center',
|
||
paddingVertical: 26,
|
||
paddingHorizontal: 14,
|
||
},
|
||
favList: {
|
||
paddingBottom: 10,
|
||
},
|
||
favRow: {
|
||
paddingHorizontal: 14,
|
||
paddingVertical: 14,
|
||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||
borderBottomColor: 'rgba(94,42,40,0.10)',
|
||
backgroundColor: 'rgba(255,255,255,0.15)',
|
||
},
|
||
favText: {
|
||
color: '#5E2A28',
|
||
fontSize: 15,
|
||
lineHeight: 22,
|
||
fontWeight: '600',
|
||
},
|
||
|
||
counter: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
gap: 22,
|
||
paddingTop: 8,
|
||
paddingBottom: 22,
|
||
},
|
||
circleBtn: {
|
||
width: 42,
|
||
height: 42,
|
||
borderRadius: 21,
|
||
backgroundColor: 'rgba(244,214,194,0.75)',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
circleText: {
|
||
color: '#5E2A28',
|
||
fontSize: 20,
|
||
fontWeight: '700',
|
||
marginTop: -1,
|
||
},
|
||
countCenter: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-end',
|
||
gap: 6,
|
||
},
|
||
countNumber: {
|
||
color: '#111',
|
||
fontSize: 54,
|
||
fontWeight: '800',
|
||
letterSpacing: -1,
|
||
},
|
||
countUnit: {
|
||
color: '#111',
|
||
fontSize: 16,
|
||
fontWeight: '700',
|
||
marginBottom: 10,
|
||
},
|
||
remindRow: {
|
||
height: 54,
|
||
borderRadius: 16,
|
||
backgroundColor: 'rgba(255,255,255,0.75)',
|
||
paddingHorizontal: 14,
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
marginBottom: 18,
|
||
},
|
||
rowLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
|
||
rowIcon: {
|
||
width: 28,
|
||
height: 28,
|
||
borderRadius: 10,
|
||
backgroundColor: 'rgba(244,214,194,0.55)',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
rowText: {
|
||
color: '#5E2A28',
|
||
fontSize: 15,
|
||
fontWeight: '600',
|
||
},
|
||
okPressable: {
|
||
marginBottom: 6,
|
||
},
|
||
okBtn: {
|
||
height: 52,
|
||
borderRadius: 26,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
okBtnDisabled: { opacity: 0.7 },
|
||
okText: {
|
||
color: '#fff',
|
||
fontSize: 16,
|
||
fontWeight: '700',
|
||
},
|
||
|
||
widgetContent: {
|
||
paddingBottom: 18,
|
||
gap: 14,
|
||
},
|
||
widgetRow: {
|
||
flexDirection: 'row',
|
||
gap: 12,
|
||
},
|
||
widgetCard: {
|
||
flex: 1,
|
||
borderRadius: 16,
|
||
overflow: 'hidden',
|
||
backgroundColor: 'rgba(255,255,255,0.75)',
|
||
borderWidth: StyleSheet.hairlineWidth,
|
||
borderColor: 'rgba(94,42,40,0.12)',
|
||
},
|
||
widgetPreviewInner: {
|
||
height: 120,
|
||
padding: 12,
|
||
justifyContent: 'center',
|
||
},
|
||
widgetPreviewLock: {
|
||
backgroundColor: 'rgba(244,214,194,0.65)',
|
||
},
|
||
widgetPreviewHome: {
|
||
backgroundColor: 'rgba(243,208,225,0.55)',
|
||
},
|
||
widgetPreviewDate: {
|
||
color: 'rgba(94,42,40,0.70)',
|
||
fontSize: 12,
|
||
fontWeight: '600',
|
||
marginBottom: 6,
|
||
},
|
||
widgetPreviewTime: {
|
||
color: '#ffffff',
|
||
fontSize: 44,
|
||
fontWeight: '800',
|
||
letterSpacing: 1,
|
||
},
|
||
widgetPreviewQuote: {
|
||
color: '#5E2A28',
|
||
fontSize: 14,
|
||
lineHeight: 20,
|
||
fontWeight: '700',
|
||
},
|
||
widgetCardLabel: {
|
||
paddingVertical: 10,
|
||
textAlign: 'center',
|
||
color: '#5E2A28',
|
||
fontSize: 13,
|
||
fontWeight: '700',
|
||
},
|
||
widgetDesc: {
|
||
color: 'rgba(94,42,40,0.75)',
|
||
fontSize: 13,
|
||
lineHeight: 18,
|
||
},
|
||
});
|
||
|