feat(tabs): 添加个人页面标签并重构标签栏布局

- 新增个人页面标签和对应的页面文件
- 将标签栏布局从垂直改为水平排列
- 隐藏顶部标题栏以提供更简洁的界面
- 调整选中状态下的内边距和间距
- 将界面文本本地化为中文
- 在图标映射中添加person图标支持

app/(tabs)/index.tsx

@@ -1,75 +1,121 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { HelloWave } from '@/components/HelloWave';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
+import { SearchBox } from '@/components/SearchBox';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
+import { WorkoutCard } from '@/components/WorkoutCard';
+import React from 'react';
+import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
+
+const workoutData = [
+  {
+    id: 1,
+    title: '体态评估',
+    duration: 50,
+    imageSource: require('@/assets/images/react-logo.png'),
+  },
+  {
+    id: 2,
+    title: 'Hand\nTraining',
+    calories: 600,
+    duration: 40,
+    imageSource: require('@/assets/images/react-logo.png'),
+  },
+  {
+    id: 3,
+    title: 'Core\nWorkout',
+    calories: 450,
+    duration: 35,
+    imageSource: require('@/assets/images/react-logo.png'),
+  },
+];
 
 export default function HomeScreen() {
   return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={
-        <Image
-          source={require('@/assets/images/partial-react-logo.png')}
-          style={styles.reactLogo}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
-        <HelloWave />
+    <SafeAreaView style={styles.safeArea}>
+      <ThemedView style={styles.container}>
+        <ScrollView showsVerticalScrollIndicator={false}>
+          {/* Header Section */}
+          <View style={styles.header}>
+            <ThemedText style={styles.greeting}>Good Morning 🔥</ThemedText>
+            <ThemedText style={styles.userName}>Pramuditya Uzumaki</ThemedText>
+          </View>
+
+          {/* Search Box */}
+          <SearchBox placeholder="Search" />
+
+          {/* Popular Workouts Section */}
+          <View style={styles.sectionContainer}>
+            <ThemedText style={styles.sectionTitle}>Popular Workouts</ThemedText>
+
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={styles.workoutScrollContainer}
+              style={styles.workoutScroll}
+            >
+              {workoutData.map((workout) => (
+                <WorkoutCard
+                  key={workout.id}
+                  title={workout.title}
+                  calories={workout.calories}
+                  duration={workout.duration}
+                  imageSource={workout.imageSource}
+                  onPress={() => console.log(`Pressed ${workout.title}`)}
+                />
+              ))}
+            </ScrollView>
+          </View>
+
+          {/* Add some spacing at the bottom */}
+          <View style={styles.bottomSpacing} />
+        </ScrollView>
       </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
-        <ThemedText>
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
-          Press{' '}
-          <ThemedText type="defaultSemiBold">
-            {Platform.select({
-              ios: 'cmd + d',
-              android: 'cmd + m',
-              web: 'F12',
-            })}
-          </ThemedText>{' '}
-          to open developer tools.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 2: Explore</ThemedText>
-        <ThemedText>
-          {`Tap the Explore tab to learn more about what's included in this starter app.`}
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          {`When you're ready, run `}
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
+  safeArea: {
+    flex: 1,
+    backgroundColor: '#F7F8FA',
   },
-  stepContainer: {
-    gap: 8,
-    marginBottom: 8,
+  container: {
+    flex: 1,
+    backgroundColor: '#F7F8FA',
   },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
+  header: {
+    paddingHorizontal: 24,
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+  greeting: {
+    fontSize: 16,
+    color: '#8A8A8E',
+    fontWeight: '400',
+    marginBottom: 6,
+  },
+  userName: {
+    fontSize: 30,
+    fontWeight: 'bold',
+    color: '#1A1A1A',
+    lineHeight: 36,
+  },
+  sectionContainer: {
+    marginTop: 24,
+  },
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#1A1A1A',
+    paddingHorizontal: 24,
+    marginBottom: 18,
+  },
+  workoutScroll: {
+    paddingLeft: 24,
+  },
+  workoutScrollContainer: {
+    paddingRight: 24,
+  },
+  bottomSpacing: {
+    height: 120,
   },
 });