ios app
This commit is contained in:
255
argon-pro-react-native/navigation/Menu.js
Normal file
255
argon-pro-react-native/navigation/Menu.js
Normal file
@@ -0,0 +1,255 @@
|
||||
import React from "react";
|
||||
import {
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Dimensions,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
Linking,
|
||||
} from "react-native";
|
||||
import { Block, Text, theme } from "galio-framework";
|
||||
import { useSafeArea } from "react-native-safe-area-context";
|
||||
import { Box, HStack, VStack, Icon, Pressable, Spinner } from "native-base";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { LinearGradient } from "expo-linear-gradient";
|
||||
import Images from "../constants/Images";
|
||||
import { DrawerItem as DrawerCustomItem } from "../components/index";
|
||||
import { useAuth } from "../src/contexts/AuthContext";
|
||||
|
||||
const { width } = Dimensions.get("screen");
|
||||
|
||||
// 金色主题色
|
||||
const GOLD_PRIMARY = '#D4AF37';
|
||||
|
||||
// 用户卡片组件
|
||||
const UserCard = ({ navigation }) => {
|
||||
const { user, isLoggedIn, isLoading, subscription, logout } = useAuth();
|
||||
|
||||
const handleLoginPress = () => {
|
||||
navigation.closeDrawer();
|
||||
// 使用 getParent 获取根导航器来导航到 Login
|
||||
navigation.getParent()?.navigate("Login");
|
||||
};
|
||||
|
||||
const handleLogoutPress = async () => {
|
||||
await logout();
|
||||
};
|
||||
|
||||
// 获取订阅显示文本
|
||||
const getSubscriptionText = () => {
|
||||
if (!subscription || !subscription.is_active) {
|
||||
return "免费用户";
|
||||
}
|
||||
const typeMap = { pro: "Pro 会员", max: "Max 会员" };
|
||||
return typeMap[subscription.type] || "免费用户";
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box px={4} py={4} mb={2}>
|
||||
<HStack alignItems="center" space={3}>
|
||||
<Spinner size="sm" color="primary.500" />
|
||||
<Text color="#8898AA" style={{ fontFamily: "open-sans-regular" }}>
|
||||
加载中...
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return (
|
||||
<Pressable onPress={handleLoginPress}>
|
||||
<Box
|
||||
mx={3}
|
||||
mb={3}
|
||||
p={4}
|
||||
bg="rgba(124, 58, 237, 0.1)"
|
||||
borderWidth={1}
|
||||
borderColor="rgba(124, 58, 237, 0.3)"
|
||||
borderRadius={12}
|
||||
>
|
||||
<HStack alignItems="center" space={3}>
|
||||
<Box
|
||||
w={10}
|
||||
h={10}
|
||||
bg="rgba(124, 58, 237, 0.2)"
|
||||
borderRadius={20}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Icon as={Ionicons} name="person-outline" size="md" color="#7C3AED" />
|
||||
</Box>
|
||||
<VStack flex={1}>
|
||||
<Text
|
||||
color="#333"
|
||||
style={{ fontFamily: "open-sans-bold", fontSize: 14 }}
|
||||
>
|
||||
登录/注册
|
||||
</Text>
|
||||
<Text
|
||||
color="#8898AA"
|
||||
style={{ fontFamily: "open-sans-regular", fontSize: 12 }}
|
||||
>
|
||||
登录解锁更多功能
|
||||
</Text>
|
||||
</VStack>
|
||||
<Icon as={Ionicons} name="chevron-forward" size="sm" color="#8898AA" />
|
||||
</HStack>
|
||||
</Box>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
// 已登录状态
|
||||
return (
|
||||
<Box mx={3} mb={3} p={4} bg="#F8F9FE" borderRadius={12}>
|
||||
<HStack alignItems="center" space={3}>
|
||||
<Box
|
||||
w={10}
|
||||
h={10}
|
||||
bg="#7C3AED"
|
||||
borderRadius={20}
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text style={{ color: "white", fontFamily: "open-sans-bold", fontSize: 16 }}>
|
||||
{(user?.username || user?.nickname || "U").charAt(0).toUpperCase()}
|
||||
</Text>
|
||||
</Box>
|
||||
<VStack flex={1}>
|
||||
<Text
|
||||
color="#333"
|
||||
style={{ fontFamily: "open-sans-bold", fontSize: 14 }}
|
||||
>
|
||||
{user?.nickname || user?.username || "用户"}
|
||||
</Text>
|
||||
<HStack alignItems="center" space={1}>
|
||||
<Box
|
||||
px={1.5}
|
||||
py={0.5}
|
||||
bg={subscription?.is_active ? "rgba(16, 185, 129, 0.1)" : "rgba(100, 116, 139, 0.1)"}
|
||||
borderRadius={4}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "open-sans-regular",
|
||||
fontSize: 10,
|
||||
color: subscription?.is_active ? "#10B981" : "#64748B",
|
||||
}}
|
||||
>
|
||||
{getSubscriptionText()}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Pressable onPress={handleLogoutPress}>
|
||||
<Icon as={Ionicons} name="log-out-outline" size="sm" color="#F43F5E" />
|
||||
</Pressable>
|
||||
</HStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
function CustomDrawerContent({
|
||||
drawerPosition,
|
||||
navigation,
|
||||
profile,
|
||||
focused,
|
||||
state,
|
||||
...rest
|
||||
}) {
|
||||
const insets = useSafeArea();
|
||||
const screens = [
|
||||
{ title: "事件中心", navigateTo: "EventsDrawer" },
|
||||
{ title: "市场热点", navigateTo: "MarketDrawer" },
|
||||
{ title: "Home", navigateTo: "HomeDrawer" },
|
||||
{ title: "Profile", navigateTo: "ProfileDrawer" },
|
||||
{ title: "Account", navigateTo: "AccountDrawer" },
|
||||
{ title: "Elements", navigateTo: "ElementsDrawer" },
|
||||
{ title: "Articles", navigateTo: "ArticlesDrawer" },
|
||||
{ title: "Settings", navigateTo: "SettingsDrawer" },
|
||||
];
|
||||
return (
|
||||
<Block
|
||||
style={styles.container}
|
||||
forceInset={{ top: "always", horizontal: "never" }}
|
||||
>
|
||||
{/* 品牌头部 - 黑金主题 */}
|
||||
<Box bg="#000" px={4} py={5} style={{ paddingTop: insets.top + 16 }}>
|
||||
<HStack alignItems="center" space={3}>
|
||||
<Image
|
||||
source={Images.Logo}
|
||||
style={{ width: 40, height: 40, borderRadius: 10 }}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<VStack>
|
||||
<Text style={{ color: GOLD_PRIMARY, fontFamily: "open-sans-bold", fontSize: 18 }}>
|
||||
价值前沿
|
||||
</Text>
|
||||
<Text style={{ color: "rgba(212, 175, 55, 0.6)", fontFamily: "open-sans-regular", fontSize: 11 }}>
|
||||
VALUE FRONTIER
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
<Block flex style={{ paddingLeft: 8, paddingRight: 14 }}>
|
||||
<ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
|
||||
{/* 用户卡片 */}
|
||||
<Box mt={3}>
|
||||
<UserCard navigation={navigation} />
|
||||
</Box>
|
||||
|
||||
{screens.map((item, index) => {
|
||||
return (
|
||||
<DrawerCustomItem
|
||||
title={item?.title}
|
||||
key={index}
|
||||
navigation={navigation}
|
||||
focused={state.index === index ? true : false}
|
||||
navigateTo={item?.navigateTo}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<Block
|
||||
flex
|
||||
style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}
|
||||
>
|
||||
<Block
|
||||
style={{
|
||||
borderColor: "rgba(0,0,0,0.2)",
|
||||
width: "100%",
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
color="#8898AA"
|
||||
style={{
|
||||
marginTop: 16,
|
||||
marginLeft: 8,
|
||||
fontFamily: "open-sans-regular",
|
||||
}}
|
||||
>
|
||||
DOCUMENTATION
|
||||
</Text>
|
||||
</Block>
|
||||
<DrawerCustomItem title="Getting Started" navigation={navigation} />
|
||||
</ScrollView>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: 28,
|
||||
paddingBottom: theme.SIZES.BASE,
|
||||
paddingTop: theme.SIZES.BASE * 3,
|
||||
justifyContent: "center",
|
||||
},
|
||||
});
|
||||
|
||||
export default CustomDrawerContent;
|
||||
Reference in New Issue
Block a user