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-07-17 20:16:35 +08:00
parent 436b44a107
commit 44ff7ce36d
3 changed files with 54 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
app/(tabs)/index.tsx
View File

@ -1,88 +1,26 @@
import IP from '@/assets/icons/svg/ip.svg'; import IP from '@/assets/icons/svg/ip.svg';
import * as MediaLibrary from 'expo-media-library'; import { checkAuthStatus } from '@/lib/auth';
import { useRouter } from 'expo-router'; import { useRouter } from 'expo-router';
import * as SecureStore from 'expo-secure-store'; import React, { useEffect, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Platform, Text, TouchableOpacity, View } from 'react-native'; import { Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
import MemoList from './memo-list';
export default function HomeScreen() { export default function HomeScreen() {
const router = useRouter(); const router = useRouter();
const { t } = useTranslation(); const { t } = useTranslation();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [token, setToken] = useState('');
const tokenInterval = useRef<NodeJS.Timeout | number>(null);
const isMounted = useRef(true);
const getAuthToken = async (): Promise<string> => {
let tokenValue = '';
if (Platform.OS === 'web') {
tokenValue = localStorage.getItem('token') || '';
} else {
tokenValue = (await SecureStore.getItemAsync('token')) || '';
}
setToken(tokenValue); // 只在获取到新token时更新状态
return tokenValue;
};
useEffect(() => { useEffect(() => {
const checkAuthStatus = async () => { setIsLoading(true);
try { checkAuthStatus(router, () => {
const loggedIn = !!token; router.replace('/ask')
setIsLoggedIn(loggedIn); }).then(() => {
setIsLoading(false);
if (loggedIn) { });
// 已登录，请求必要的权限
const { status } = await MediaLibrary.requestPermissionsAsync();
if (status === 'granted') {
console.log('Media library permission granted in HomeScreen.');
}
router.replace('/ask');
}
setIsLoading(false);
} catch (error) {
console.error('检查登录状态出错:', error);
setIsLoading(false);
} finally {
setIsLoading(false);
}
};
checkAuthStatus();
}, []); }, []);
// 轮询获取token
useEffect(() => {
// 如果已经有token，直接返回
if (token) {
if (tokenInterval.current) {
clearInterval(tokenInterval.current);
}
return;
}
if (!tokenInterval.current) return;
// 设置轮询
tokenInterval.current = setInterval(async () => {
if (isMounted.current) {
const currentToken = await getAuthToken();
// 如果获取到token，清除定时器
if (currentToken && tokenInterval.current) {
clearInterval(tokenInterval.current);
}
}
}, 5000);
// 返回清理函数
return () => {
if (tokenInterval.current) {
clearInterval(tokenInterval.current);
}
};
}, [token]); // 添加token作为依赖
if (isLoading) { if (isLoading) {
return ( return (
<View className="flex-1 bg-bgPrimary justify-center items-center"> <View className="flex-1 bg-bgPrimary justify-center items-center">
@ -93,49 +31,46 @@ export default function HomeScreen() {
return ( return (
<View className="flex-1"> <View className="flex-1">
{ <View className="flex-1 bg-bgPrimary px-[1rem] h-screen overflow-auto py-[2rem] " style={{ paddingTop: insets.top + 48 }}>
isLoggedIn ? <MemoList /> : {/* 标题区域 */}
<View className="flex-1 bg-bgPrimary px-[1rem] h-screen overflow-auto py-[2rem] " style={{ paddingTop: insets.top + 48 }}> <View className="mb-10 w-full px-5">
{/* 标题区域 */} <Text className="text-white text-3xl font-bold mb-3 text-left">
<View className="mb-10 w-full px-5"> {t('auth.welcomeAwaken.awaken', { ns: 'login' })}
<Text className="text-white text-3xl font-bold mb-3 text-left"> {"\n"}
{t('auth.welcomeAwaken.awaken', { ns: 'login' })} {t('auth.welcomeAwaken.your', { ns: 'login' })}
{"\n"} {"\n"}
{t('auth.welcomeAwaken.your', { ns: 'login' })} {t('auth.welcomeAwaken.pm', { ns: 'login' })}
{"\n"} </Text>
{t('auth.welcomeAwaken.pm', { ns: 'login' })} <Text className="text-white/85 text-base text-left">
</Text> {t('auth.welcomeAwaken.slogan', { ns: 'login' })}
<Text className="text-white/85 text-base text-left"> </Text>
{t('auth.welcomeAwaken.slogan', { ns: 'login' })} </View>
</Text>
</View>
{/* Memo 形象区域 */} {/* Memo 形象区域 */}
<View className="items-center"> <View className="items-center">
<IP /> <IP />
</View> </View>
{/* 介绍文本 */} {/* 介绍文本 */}
<Text className="text-white text-base text-center mb-[1rem] leading-6 opacity-90 px-10 -mt-[4rem]"> <Text className="text-white text-base text-center mb-[1rem] leading-6 opacity-90 px-10 -mt-[4rem]">
{t('auth.welcomeAwaken.gallery', { ns: 'login' })} {t('auth.welcomeAwaken.gallery', { ns: 'login' })}
{"\n"} {"\n"}
{t('auth.welcomeAwaken.back', { ns: 'login' })} {t('auth.welcomeAwaken.back', { ns: 'login' })}
</Text> </Text>
{/* 唤醒按钮 */} {/* 唤醒按钮 */}
<TouchableOpacity <TouchableOpacity
className="bg-white rounded-full px-10 py-4 shadow-[0_2px_4px_rgba(0,0,0,0.1)] w-full items-center" className="bg-white rounded-full px-10 py-4 shadow-[0_2px_4px_rgba(0,0,0,0.1)] w-full items-center"
onPress={async () => { onPress={async () => {
router.push('/login') router.push('/login')
}} }}
activeOpacity={0.8} activeOpacity={0.8}
> >
<Text className="text-[#4C320C] font-bold text-lg"> <Text className="text-[#4C320C] font-bold text-lg">
{t('auth.welcomeAwaken.awake', { ns: 'login' })} {t('auth.welcomeAwaken.awake', { ns: 'login' })}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
}
</View > </View >
); );
} }

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

@ -89,11 +89,13 @@ export default function OwnerPage() {
{/* 资源数据 */} {/* 资源数据 */}
<View style={styles.resourceContainer}> <View style={styles.resourceContainer}>
<View style={{ gap: 16 }}> <View style={{ gap: 16, width: "80%" }}>
<ResourceComponent title={t("generalSetting.usedStorage", { ns: "personal" })} data={{ all: userInfoDetails.total_bytes, used: countData.used_bytes }} icon={<UsedStorageSvg />} isFormatBytes={true} /> <ResourceComponent title={t("generalSetting.usedStorage", { ns: "personal" })} data={{ all: userInfoDetails.total_bytes, used: countData.used_bytes }} icon={<UsedStorageSvg />} isFormatBytes={true} />
<ResourceComponent title={t("generalSetting.remainingPoints", { ns: "personal" })} data={{ all: userInfoDetails.total_points, used: userInfoDetails.remain_points }} icon={<PointsSvg />} /> <ResourceComponent title={t("generalSetting.remainingPoints", { ns: "personal" })} data={{ all: userInfoDetails.total_points, used: userInfoDetails.remain_points }} icon={<PointsSvg />} />
</View> </View>
<MoreArrowSvg /> <View style={{ alignItems: 'flex-end', flex: 1 }}>
<MoreArrowSvg />
</View>
</View> </View>
{/* 数据统计 */} {/* 数据统计 */}
<CountComponent <CountComponent
@ -154,6 +156,7 @@ const styles = StyleSheet.create({
backgroundColor: "#FAF9F6", backgroundColor: "#FAF9F6",
padding: 16, padding: 16,
borderRadius: 18, borderRadius: 18,
paddingTop: 20
}, },
userInfo: { userInfo: {
flexDirection: 'row', flexDirection: 'row',

8
components/owner/resource.tsx
View File

@ -49,17 +49,15 @@ const styles = StyleSheet.create({
width: "90%", width: "90%",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "flex-start",
gap: 16, gap: 16,
}, },
title: { title: {
fontSize: 12, fontSize: 12,
fontWeight: "700", fontWeight: "700",
width: 100 width: "25%"
},
subtitle: {
fontSize: 10,
fontWeight: "400",
}, },
dataContainer: { dataContainer: {
position: "absolute", position: "absolute",
right: 0, right: 0,