feat: 优化个人中心页面

app/(tabs)/personal.tsx

@@ -1,110 +1,387 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { Ionicons } from '@expo/vector-icons';
+import React, { useState } from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableOpacity,
+  View
+} from 'react-native';
 
-import { Collapsible } from '@/components/Collapsible';
-import { ExternalLink } from '@/components/ExternalLink';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
+export default function PersonalScreen() {
+  const [notificationEnabled, setNotificationEnabled] = useState(true);
+  const colorScheme = useColorScheme();
+  const colors = Colors[colorScheme ?? 'light'];
 
-export default function TabTwoScreen() {
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
-      headerImage={
-        <IconSymbol
-          size={310}
-          color="#808080"
-          name="chevron.left.forwardslash.chevron.right"
-          style={styles.headerImage}
+  const ProfileHeader = () => (
+    <View style={styles.headerContainer}>
+      {/* 标题 */}
+      <Text style={styles.headerTitle}>Profile</Text>
+    </View>
+  );
+
+  const UserInfoSection = () => (
+    <View style={styles.userInfoCard}>
+      <View style={styles.userInfoContainer}>
+        {/* 头像 */}
+        <View style={styles.avatarContainer}>
+          <View style={styles.avatar}>
+            <View style={styles.avatarContent}>
+              {/* 简单的头像图标，您可以替换为实际图片 */}
+              <View style={styles.avatarIcon}>
+                <View style={styles.avatarFace} />
+                <View style={styles.avatarBody} />
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* 用户信息 */}
+        <View style={styles.userDetails}>
+          <Text style={styles.userName}>Masi Ramezanzade</Text>
+          <Text style={styles.userProgram}>Lose a Fat Program</Text>
+        </View>
+
+                  {/* 编辑按钮 */}
+          <TouchableOpacity style={dynamicStyles.editButton}>
+            <Text style={dynamicStyles.editButtonText}>Edit</Text>
+          </TouchableOpacity>
+      </View>
+    </View>
+  );
+
+  const StatsSection = () => (
+    <View style={styles.statsContainer}>
+      <View style={styles.statItem}>
+        <Text style={dynamicStyles.statValue}>180cm</Text>
+        <Text style={styles.statLabel}>Height</Text>
+      </View>
+      <View style={styles.statItem}>
+        <Text style={dynamicStyles.statValue}>65kg</Text>
+        <Text style={styles.statLabel}>Weight</Text>
+      </View>
+      <View style={styles.statItem}>
+        <Text style={dynamicStyles.statValue}>22yo</Text>
+        <Text style={styles.statLabel}>Age</Text>
+      </View>
+    </View>
+  );
+
+  const MenuSection = ({ title, items }: { title: string; items: any[] }) => (
+    <View style={styles.menuSection}>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      {items.map((item, index) => (
+        <TouchableOpacity key={index} style={styles.menuItem}>
+          <View style={styles.menuItemLeft}>
+            <View style={[styles.menuIcon]}>
+              <Ionicons name={item.icon} size={20} color={colors.primary} />
+            </View>
+            <Text style={styles.menuItemText}>{item.title}</Text>
+          </View>
+          {item.type === 'switch' ? (
+            <Switch
+              value={notificationEnabled}
+              onValueChange={setNotificationEnabled}
+              trackColor={{ false: '#E5E5E5', true: colors.primary }}
+              thumbColor="#FFFFFF"
+              style={styles.switch}
             />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Explore</ThemedText>
-      </ThemedView>
-      <ThemedText>This app includes example code to help you get started.</ThemedText>
-      <Collapsible title="File-based routing">
-        <ThemedText>
-          This app has two screens:{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
-        </ThemedText>
-        <ThemedText>
-          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
-          sets up the tab navigator.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/router/introduction">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Android, iOS, and web support">
-        <ThemedText>
-          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
-          <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
-        </ThemedText>
-      </Collapsible>
-      <Collapsible title="Images">
-        <ThemedText>
-          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
-          different screen densities
-        </ThemedText>
-        <Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
-        <ExternalLink href="https://reactnative.dev/docs/images">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Custom fonts">
-        <ThemedText>
-          Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
-          <ThemedText style={{ fontFamily: 'SpaceMono' }}>
-            custom fonts such as this one.
-          </ThemedText>
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Light and dark mode components">
-        <ThemedText>
-          This template has light and dark mode support. The{' '}
-          <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
-          what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Animations">
-        <ThemedText>
-          This template includes an example of an animated component. The{' '}
-          <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
-          library to create a waving hand animation.
-        </ThemedText>
-        {Platform.select({
-          ios: (
-            <ThemedText>
-              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
-              component provides a parallax effect for the header image.
-            </ThemedText>
-          ),
-        })}
-      </Collapsible>
-    </ParallaxScrollView>
+          ) : (
+            <Ionicons name="chevron-forward" size={20} color="#C4C4C4" />
+          )}
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+
+  // 动态创建样式
+  const dynamicStyles = {
+    editButton: {
+      backgroundColor: colors.primary,
+      paddingHorizontal: 20,
+      paddingVertical: 10,
+      borderRadius: 20,
+    },
+    editButtonText: {
+      color: '#192126',
+      fontSize: 14,
+      fontWeight: '600' as const,
+    },
+    statValue: {
+      fontSize: 18,
+      fontWeight: 'bold' as const,
+      color: colors.primary,
+      marginBottom: 4,
+    },
+    floatingButton: {
+      width: 56,
+      height: 56,
+      borderRadius: 28,
+      backgroundColor: colors.primary,
+      alignItems: 'center' as const,
+      justifyContent: 'center' as const,
+      shadowColor: colors.primary,
+      shadowOffset: {
+        width: 0,
+        height: 4,
+      },
+      shadowOpacity: 0.3,
+      shadowRadius: 8,
+      elevation: 8,
+    },
+  };
+
+  const accountItems = [
+    {
+      icon: 'person-outline',
+      iconBg: '#E8F5E8',
+      iconColor: '#4ADE80',
+      title: 'Personal Data',
+    },
+    {
+      icon: 'trophy-outline',
+      iconBg: '#E8F5E8',
+      iconColor: '#4ADE80',
+      title: 'Achievement',
+    },
+    {
+      icon: 'time-outline',
+      iconBg: '#E8F5E8',
+      iconColor: '#4ADE80',
+      title: 'Activity History',
+    },
+    {
+      icon: 'stats-chart-outline',
+      iconBg: '#E8F5E8',
+      iconColor: '#4ADE80',
+      title: 'Workout Progress',
+    },
+  ];
+
+  const notificationItems = [
+    {
+      icon: 'notifications-outline',
+      iconBg: '#E8F5E8',
+      iconColor: '#4ADE80',
+      title: 'Pop-up Notification',
+      type: 'switch',
+    },
+  ];
+
+  const otherItems = [
+    {
+      icon: 'mail-outline',
+      iconBg: '#E8F5E8',
+      iconColor: '#4ADE80',
+      title: 'Contact Us',
+    },
+    {
+      icon: 'shield-checkmark-outline',
+      iconBg: '#E8F5E8',
+      iconColor: '#4ADE80',
+      title: 'Privacy Policy',
+    },
+    {
+      icon: 'settings-outline',
+      iconBg: '#E8F5E8',
+      iconColor: '#4ADE80',
+      title: 'Settings',
+    },
+  ];
+
+  return (
+    <View style={styles.container}>
+      <StatusBar barStyle="dark-content" backgroundColor="transparent" translucent />
+      <SafeAreaView style={styles.safeArea}>
+        <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+          <ProfileHeader />
+          <UserInfoSection />
+          <StatsSection />
+          <MenuSection title="Account" items={accountItems} />
+          <MenuSection title="Notification" items={notificationItems} />
+          <MenuSection title="Other" items={otherItems} />
+
+          {/* 底部浮动按钮 */}
+          <View style={styles.floatingButtonContainer}>
+            <TouchableOpacity style={dynamicStyles.floatingButton}>
+              <Ionicons name="search" size={24} color="#192126" />
+            </TouchableOpacity>
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  headerImage: {
-    color: '#808080',
-    bottom: -90,
-    left: -35,
-    position: 'absolute',
+  container: {
+    flex: 1,
+    backgroundColor: '#F5F5F5', // 浅灰色背景
   },
-  titleContainer: {
+  safeArea: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+    paddingHorizontal: 20,
+    backgroundColor: '#F5F5F5',
+  },
+  // 头部导航
+  headerContainer: {
     flexDirection: 'row',
-    gap: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 10,
+    paddingBottom: 20,
   },
+
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#000',
+  },
+
+  // 用户信息区域
+  userInfoCard: {
+    borderRadius: 16,
+    marginBottom: 20,
+  },
+  userInfoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 20,
+  },
+  avatarContainer: {
+    marginRight: 15,
+  },
+  avatar: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#E8D4F0',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  avatarContent: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarIcon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarFace: {
+    width: 25,
+    height: 25,
+    borderRadius: 12.5,
+    backgroundColor: '#D4A574',
+    marginBottom: 5,
+  },
+  avatarBody: {
+    width: 30,
+    height: 20,
+    borderRadius: 15,
+    backgroundColor: '#F4C842',
+  },
+  userDetails: {
+    flex: 1,
+  },
+  userName: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#000',
+    marginBottom: 4,
+  },
+  userProgram: {
+    fontSize: 14,
+    color: '#888',
+  },
+
+  // 统计信息区域
+  statsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    padding: 20,
+    marginBottom: 20,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  statItem: {
+    alignItems: 'center',
+    flex: 1,
+  },
+
+  statLabel: {
+    fontSize: 12,
+    color: '#888',
+  },
+  // 菜单区域
+  menuSection: {
+    marginBottom: 20,
+    backgroundColor: '#FFFFFF',
+    padding: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#000',
+    marginBottom: 12,
+    paddingHorizontal: 4,
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 8,
+  },
+  menuItemLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  menuIcon: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  menuItemText: {
+    fontSize: 16,
+    color: '#000',
+    flex: 1,
+  },
+  switch: {
+    transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
+  },
+  // 浮动按钮
+  floatingButtonContainer: {
+    position: 'absolute',
+    bottom: 30,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    pointerEvents: 'box-none',
+  },
+
 });

constants/Colors.ts

@@ -3,7 +3,8 @@
  * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
  */
 
-const tintColorLight = '#0a7ea4';
+const primaryColor = '#BBF246'; // 应用主题色
+const tintColorLight = primaryColor;
 const tintColorDark = '#fff';
 
 export const Colors = {
@@ -11,16 +12,22 @@ export const Colors = {
     text: '#11181C',
     background: '#fff',
     tint: tintColorLight,
+    primary: primaryColor,
     icon: '#687076',
     tabIconDefault: '#687076',
-    tabIconSelected: tintColorLight,
+    tabIconSelected: '#192126', // tab 激活时的文字/图标颜色（深色，在亮色背景上显示）
+    tabBarBackground: '#192126', // tab 栏背景色
+    tabBarActiveBackground: primaryColor, // tab 激活时的背景色
   },
   dark: {
     text: '#ECEDEE',
     background: '#151718',
     tint: tintColorDark,
+    primary: primaryColor,
     icon: '#9BA1A6',
     tabIconDefault: '#9BA1A6',
-    tabIconSelected: tintColorDark,
+    tabIconSelected: '#192126', // 在亮色背景上使用深色文字
+    tabBarBackground: '#192126',
+    tabBarActiveBackground: primaryColor,
   },
 };