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

app/(tabs)/personal.tsx

@@ -1,13 +1,16 @@
 import ActivityHeatMap from '@/components/ActivityHeatMap';
 import { BadgeShowcaseModal } from '@/components/badges/BadgeShowcaseModal';
+import { MembershipBanner } from '@/components/MembershipBanner';
 import { PRIVACY_POLICY_URL, USER_AGREEMENT_URL } from '@/constants/Agree';
-import { palette } from '@/constants/Colors';
+import { Colors } from '@/constants/Colors';
 import { ROUTES } from '@/constants/Routes';
 import { getTabBarBottomPadding } from '@/constants/TabBar';
 import { useMembershipModal } from '@/contexts/MembershipModalContext';
 import { useVersionCheck } from '@/contexts/VersionCheckContext';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { useI18n } from '@/hooks/useI18n';
 import type { BadgeDto } from '@/services/badges';
 import { reportBadgeShowcaseDisplayed } from '@/services/badges';
 import { updateUser, type UserLanguage } from '@/services/users';
@@ -56,6 +59,8 @@ type LanguageOption = {
 };
 
 export default function PersonalScreen() {
+  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
+  const colorTokens = Colors[theme];
   const dispatch = useAppDispatch();
   const { confirmLogout, confirmDeleteAccount, isLoggedIn, pushIfAuthedElseLogin, ensureLoggedIn } = useAuthGuard();
   const { openMembershipModal } = useMembershipModal();
@@ -70,6 +75,11 @@ export default function PersonalScreen() {
   const [refreshing, setRefreshing] = useState(false);
   const { checkForUpdate, isChecking: isCheckingVersion, updateInfo } = useVersionCheck();
 
+  const gradientColors: [string, string] =
+    theme === 'dark'
+      ? ['#1f2230', '#10131e']
+      : [colorTokens.backgroundGradientStart, colorTokens.backgroundGradientEnd];
+
   const languageOptions = useMemo<LanguageOption[]>(() => ([
     {
       code: 'zh' as AppLanguage,
@@ -350,25 +360,6 @@ export default function PersonalScreen() {
     </View>
   );
 
-  const MembershipBanner = () => (
-    <View style={styles.sectionContainer}>
-      <TouchableOpacity
-        activeOpacity={0.9}
-        onPress={() => {
-          void handleMembershipPress();
-        }}
-      >
-        <Image
-          source={{ uri: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/banner/vip2.png' }}
-          style={styles.membershipBannerImage}
-          contentFit="cover"
-          transition={200}
-          cachePolicy="memory-disk"
-        />
-      </TouchableOpacity>
-    </View>
-  );
-
   const VipMembershipCard = () => {
     const fallbackProfile = userProfile as Record<string, unknown>;
     const fallbackExpire = ['membershipExpiration', 'vipExpiredAt', 'vipExpiresAt', 'vipExpireDate']
@@ -780,15 +771,13 @@ export default function PersonalScreen() {
   );
 
   return (
-    <View style={styles.container}>
-      <StatusBar barStyle={'dark-content'} backgroundColor="transparent" translucent />
+    <View style={[styles.container, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
+      <StatusBar barStyle={theme === 'dark' ? 'light-content' : 'dark-content'} backgroundColor="transparent" translucent />
 
       {/* 背景渐变 */}
       <LinearGradient
-        colors={[palette.purple[100], '#F5F5F5']}
-        start={{ x: 1, y: 0 }}
-        end={{ x: 0.3, y: 0.4 }}
-        style={styles.gradientBackground}
+        colors={gradientColors}
+        style={StyleSheet.absoluteFillObject}
       />
 
       <ScrollView
@@ -810,7 +799,7 @@ export default function PersonalScreen() {
         }
       >
         <UserHeader />
-        {userProfile.isVip ? <VipMembershipCard /> : <MembershipBanner />}
+        {userProfile.isVip ? <VipMembershipCard /> : <MembershipBanner onPress={() => void handleMembershipPress()} />}
         <HealthProfileEntry />
         <BadgesPreviewSection />
         <View style={styles.fishRecordContainer}>
@@ -842,14 +831,6 @@ export default function PersonalScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F5F5F5',
-  },
-  gradientBackground: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    height: '60%',
   },
   scrollView: {
     flex: 1,
@@ -876,11 +857,6 @@ const styles = StyleSheet.create({
     elevation: 2,
     overflow: 'hidden',
   },
-  membershipBannerImage: {
-    width: '100%',
-    height: 180,
-    borderRadius: 16,
-  },
   vipCard: {
     borderRadius: 20,
     padding: 20,