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

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

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,
+  },
+});