feat(个人中心): 优化会员横幅组件，支持深色模式与国际化；新增医疗记录卡片组件，完善健康档案功能

components/MembershipBanner.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { useTranslation } from 'react-i18next';
+
+interface MembershipBannerProps {
+  onPress: () => void;
+}
+
+export const MembershipBanner: React.FC<MembershipBannerProps> = ({ onPress }) => {
+  const { t } = useTranslation();
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        activeOpacity={0.9}
+        onPress={onPress}
+        style={styles.touchable}
+      >
+        <LinearGradient
+          colors={['#4C3AFF', '#8D5BEA']}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={styles.gradient}
+        >
+          {/* Decorative Elements */}
+          <View style={styles.decorationCircleLarge} />
+          <View style={styles.decorationCircleSmall} />
+          
+          <View style={styles.contentContainer}>
+            <View style={styles.textContainer}>
+              <View style={styles.badgeContainer}>
+                 <Ionicons name="crown" size={10} color="#FFD700" style={styles.badgeIcon} />
+                 <Text style={styles.badgeText}>PRO</Text>
+              </View>
+              <Text style={styles.title}>
+                {t('personal.membershipBanner.title', 'Unlock Premium Access')}
+              </Text>
+              <Text style={styles.subtitle} numberOfLines={1}>
+                {t('personal.membershipBanner.subtitle', 'Get unlimited access to all features')}
+              </Text>
+              
+              <View style={styles.ctaButton}>
+                <Text style={styles.ctaText}>{t('personal.membershipBanner.cta', 'Upgrade')}</Text>
+                <Ionicons name="arrow-forward" size={12} color="#4C3AFF" />
+              </View>
+            </View>
+
+            <View style={styles.illustrationContainer}>
+               {/* Use Ionicons as illustration or you can use Image if passed as prop */}
+               <Ionicons name="diamond-outline" size={56} color="rgba(255,255,255,0.15)" />
+            </View>
+          </View>
+        </LinearGradient>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 20,
+    borderRadius: 16,
+    // Premium Shadow
+    shadowColor: '#4C3AFF',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 6,
+    marginHorizontal: 4, // Add margin to avoid cutting off shadow
+  },
+  touchable: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  gradient: {
+    padding: 16,
+    minHeight: 100,
+    position: 'relative',
+    justifyContent: 'center',
+  },
+  decorationCircleLarge: {
+    position: 'absolute',
+    top: -40,
+    right: -40,
+    width: 160,
+    height: 160,
+    borderRadius: 80,
+    backgroundColor: 'rgba(255,255,255,0.08)',
+  },
+  decorationCircleSmall: {
+    position: 'absolute',
+    bottom: -30,
+    left: -30,
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    backgroundColor: 'rgba(255,255,255,0.05)',
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    zIndex: 1,
+  },
+  textContainer: {
+    flex: 1,
+    paddingRight: 12,
+    zIndex: 2,
+  },
+  badgeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 8,
+    alignSelf: 'flex-start',
+    marginBottom: 8,
+    borderWidth: 0.5,
+    borderColor: 'rgba(255,255,255,0.3)',
+  },
+  badgeIcon: {
+    marginRight: 3,
+  },
+  badgeText: {
+    color: '#FFD700',
+    fontSize: 9,
+    fontWeight: '800',
+    letterSpacing: 0.5,
+    fontFamily: 'AliBold',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#FFFFFF',
+    marginBottom: 4,
+    fontFamily: 'AliBold',
+    lineHeight: 20,
+  },
+  subtitle: {
+    fontSize: 11,
+    color: 'rgba(255,255,255,0.9)',
+    marginBottom: 12,
+    lineHeight: 14,
+    fontFamily: 'AliRegular',
+  },
+  ctaButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 14,
+    alignSelf: 'flex-start',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  ctaText: {
+    color: '#4C3AFF',
+    fontSize: 11,
+    fontWeight: '700',
+    marginRight: 4,
+    fontFamily: 'AliBold',
+  },
+  illustrationContainer: {
+    position: 'absolute',
+    right: -6,
+    bottom: -6,
+    zIndex: 1,
+    transform: [{ rotate: '-15deg' }]
+  }
+});