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

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

components/SearchBox.tsx

@@ -0,0 +1,61 @@
+import { useThemeColor } from '@/hooks/useThemeColor';
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { StyleSheet, TextInput, View } from 'react-native';
+
+interface SearchBoxProps {
+  placeholder?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+}
+
+export function SearchBox({ placeholder = "Search", value, onChangeText }: SearchBoxProps) {
+  const backgroundColor = useThemeColor({}, 'background');
+  const textColor = useThemeColor({}, 'text');
+  const iconColor = useThemeColor({ light: '#9BA1A6', dark: '#687076' }, 'icon');
+
+  return (
+    <View style={[styles.container, { backgroundColor: backgroundColor }]}>
+      <Ionicons name="search" size={20} color={iconColor} style={styles.icon} />
+      <TextInput
+        style={[styles.input, { color: textColor }]}
+        placeholder={placeholder}
+        placeholderTextColor={iconColor}
+        value={value}
+        onChangeText={onChangeText}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 25,
+    paddingHorizontal: 18,
+    paddingVertical: 14,
+    marginHorizontal: 20,
+    marginVertical: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 3,
+    borderWidth: 1,
+    borderColor: '#F0F0F0',
+  },
+  icon: {
+    marginRight: 12,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    color: '#333',
+    height: 20,
+  },
+});

components/WorkoutCard.tsx

@@ -0,0 +1,124 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+interface WorkoutCardProps {
+  title: string;
+  calories: number;
+  duration: number;
+  imageSource: any;
+  onPress?: () => void;
+}
+
+export function WorkoutCard({ title, calories, duration, imageSource, onPress }: WorkoutCardProps) {
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress}>
+      <ImageBackground
+        source={imageSource}
+        style={styles.backgroundImage}
+        imageStyle={styles.imageStyle}
+      >
+        <View style={styles.overlay}>
+          <View style={styles.content}>
+            <View style={styles.textContainer}>
+              <Text style={styles.title}>{title}</Text>
+
+              <View style={styles.statsContainer}>
+                {calories !== undefined && (
+                  <View style={styles.statItem}>
+                    <Ionicons name="flame-outline" size={16} color="#fff" />
+                    <Text style={styles.statText}>{calories} Kcal</Text>
+                  </View>
+                )}
+
+                <View style={styles.statItem}>
+                  <Ionicons name="time-outline" size={16} color="#fff" />
+                  <Text style={styles.statText}>{duration} Min</Text>
+                </View>
+              </View>
+            </View>
+
+            <TouchableOpacity style={styles.playButton}>
+              <Ionicons name="play" size={24} color="#000" />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </ImageBackground>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 280,
+    height: 170,
+    marginRight: 16,
+    borderRadius: 20,
+    overflow: 'hidden',
+  },
+  backgroundImage: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  imageStyle: {
+    borderRadius: 20,
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    borderRadius: 20,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    padding: 18,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    color: '#fff',
+    marginBottom: 14,
+    lineHeight: 26,
+  },
+  statsContainer: {
+    flexDirection: 'column',
+    gap: 6,
+  },
+  statItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.25)',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 15,
+    alignSelf: 'flex-start',
+  },
+  statText: {
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: '600',
+    marginLeft: 4,
+  },
+  playButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: '#A8E866',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 5,
+    elevation: 6,
+  },
+});

components/ui/IconSymbol.tsx

@@ -1,7 +1,7 @@
 // Fallback for using MaterialIcons on Android and web.
 
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
-import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
+import { SymbolViewProps, SymbolWeight } from 'expo-symbols';
 import { ComponentProps } from 'react';
 import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
 
@@ -18,6 +18,7 @@ const MAPPING = {
   'paperplane.fill': 'send',
   'chevron.left.forwardslash.chevron.right': 'code',
   'chevron.right': 'chevron-right',
+  'person.fill': 'person',
 } as IconMapping;
 
 /**