Add Chinese translations for medication management and personal settings

- Introduced new translation files for medication, personal, and weight management in Chinese.
- Updated the main index file to include the new translation modules.
- Enhanced the medication type definitions to include 'ointment'.
- Refactored workout type labels to utilize i18n for better localization support.
- Improved sleep quality descriptions and recommendations with i18n integration.

components/CalorieRingChart.tsx

@@ -1,9 +1,9 @@
 import { ThemedText } from '@/components/ThemedText';
+import { useI18n } from '@/hooks/useI18n';
 import { useThemeColor } from '@/hooks/useThemeColor';
-
 import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
-import Svg, { Circle } from 'react-native-svg';
+import Svg, { Circle, Defs, Stop, LinearGradient as SvgLinearGradient } from 'react-native-svg';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
@@ -26,12 +26,8 @@ export function CalorieRingChart({
   protein,
   fat,
   carbs,
-  proteinGoal,
-  fatGoal,
-  carbsGoal,
-
 }: CalorieRingChartProps) {
-  const surfaceColor = useThemeColor({}, 'surface');
+  const { t } = useI18n();
   const textColor = useThemeColor({}, 'text');
   const textSecondaryColor = useThemeColor({}, 'textSecondary');
 
@@ -46,9 +42,9 @@ export function CalorieRingChart({
   const totalAvailable = metabolism + exercise;
   const progressPercentage = totalAvailable > 0 ? Math.min((consumed / totalAvailable) * 100, 100) : 0;
 
-  // 圆环参数 - 减小尺寸以优化空间占用
-  const radius = 48;
-  const strokeWidth = 8; // 增加圆环厚度
+  // 圆环参数 - 缩小尺寸
+  const radius = 42;
+  const strokeWidth = 8;
   const center = radius + strokeWidth;
   const circumference = 2 * Math.PI * radius;
   const strokeDasharray = circumference;
@@ -70,34 +66,32 @@ export function CalorieRingChart({
   });
 
   return (
-    <View style={[styles.container, { backgroundColor: surfaceColor }]}>
-      {/* 左上角公式展示 */}
-      <View style={styles.formulaContainer}>
-        <ThemedText style={[styles.formulaText, { color: textSecondaryColor }]}>
-          还能吃 = 代谢 + 运动 - 饮食
-        </ThemedText>
-      </View>
-
-      {/* 主要内容区域 */}
+    <View style={styles.container}>
       <View style={styles.mainContent}>
         {/* 左侧圆环图 */}
         <View style={styles.chartContainer}>
           <Svg width={center * 2} height={center * 2}>
+            <Defs>
+              <SvgLinearGradient id="progressGradient" x1="0" y1="0" x2="1" y2="1">
+                <Stop offset="0" stopColor={progressPercentage > 80 ? "#FF9966" : "#4facfe"} stopOpacity="1" />
+                <Stop offset="1" stopColor={progressPercentage > 80 ? "#FF5E62" : "#00f2fe"} stopOpacity="1" />
+              </SvgLinearGradient>
+            </Defs>
             {/* 背景圆环 */}
             <Circle
               cx={center}
               cy={center}
               r={radius}
-              stroke="#F0F0F0"
+              stroke="#F5F7FA"
               strokeWidth={strokeWidth}
               fill="none"
             />
-            {/* 进度圆环 - 保持固定颜色 */}
+            {/* 进度圆环 */}
             <AnimatedCircle
               cx={center}
               cy={center}
               r={radius}
-              stroke={progressPercentage > 80 ? "#FF6B6B" : "#4ECDC4"}
+              stroke="url(#progressGradient)"
               strokeWidth={strokeWidth}
               fill="none"
               strokeDasharray={`${strokeDasharray}`}
@@ -109,68 +103,68 @@ export function CalorieRingChart({
 
           {/* 中心内容 */}
           <View style={styles.centerContent}>
-            <ThemedText style={[styles.centerLabel, { color: textSecondaryColor }]}>
-              还能吃
+            <ThemedText style={styles.centerLabel}>
+              {t('nutritionRecords.chart.remaining')}
             </ThemedText>
-            <ThemedText style={[styles.centerValue, { color: textColor }]}>
-              {Math.round(canEat)}千卡
+            <ThemedText style={styles.centerValue}>
+              {Math.round(canEat)}
+            </ThemedText>
+             <ThemedText style={styles.centerUnit}>
+              {t('nutritionRecords.nutrients.caloriesUnit')}
             </ThemedText>
           </View>
         </View>
 
-        {/* 右侧数据展示 */}
+        {/* 右侧数据展示 - 优化布局 */}
         <View style={styles.dataContainer}>
-          <View style={styles.dataBackground}>
-            {/* 左右两列布局 */}
-            <View style={styles.dataColumns}>
-              {/* 左列：卡路里数据 */}
-              <View style={styles.dataColumn}>
-                <View style={styles.dataItem}>
-                  <ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>代谢</ThemedText>
-                  <ThemedText style={[styles.dataValue, { color: textColor }]}>
-                    {Math.round(metabolism)}千卡
-                  </ThemedText>
-                </View>
+           {/* 公式 */}
+           <View style={styles.formulaContainer}>
+            <ThemedText style={styles.formulaText}>
+              {t('nutritionRecords.chart.formula')}
+            </ThemedText>
+          </View>
 
-                <View style={styles.dataItem}>
-                  <ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>运动</ThemedText>
-                  <ThemedText style={[styles.dataValue, { color: textColor }]}>
-                    {Math.round(exercise)}千卡
-                  </ThemedText>
-                </View>
-
-                <View style={styles.dataItem}>
-                  <ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>饮食</ThemedText>
-                  <ThemedText style={[styles.dataValue, { color: textColor }]}>
-                    {Math.round(consumed)}千卡
-                  </ThemedText>
-                </View>
-              </View>
-
-              {/* 右列：营养数据 */}
-              <View style={styles.dataColumn}>
-                <View style={styles.dataItem}>
-                  <ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>蛋白质</ThemedText>
-                  <ThemedText style={[styles.dataValue, { color: textColor }]}>
-                    {Math.round(protein)}g
-                  </ThemedText>
-                </View>
-
-                <View style={styles.dataItem}>
-                  <ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>脂肪</ThemedText>
-                  <ThemedText style={[styles.dataValue, { color: textColor }]}>
-                    {Math.round(fat)}g
-                  </ThemedText>
-                </View>
-
-                <View style={styles.dataItem}>
-                  <ThemedText style={[styles.dataLabel, { color: textSecondaryColor }]}>碳水</ThemedText>
-                  <ThemedText style={[styles.dataValue, { color: textColor }]}>
-                    {Math.round(carbs)}g
-                  </ThemedText>
-                </View>
-              </View>
+          {/* 代谢 & 运动 & 饮食 */}
+          <View style={styles.statsGroup}>
+            <View style={styles.statRowCompact}>
+               <View style={styles.labelWithDot}>
+                 <View style={styles.dotMetabolism} />
+                 <ThemedText style={styles.statLabel}>{t('nutritionRecords.chart.metabolism')}</ThemedText>
+               </View>
+               <ThemedText style={styles.statValue}>{Math.round(metabolism)}</ThemedText>
             </View>
+            <View style={styles.statRowCompact}>
+               <View style={styles.labelWithDot}>
+                 <View style={styles.dotExercise} />
+                 <ThemedText style={styles.statLabel}>{t('nutritionRecords.chart.exercise')}</ThemedText>
+               </View>
+               <ThemedText style={styles.statValue}>{Math.round(exercise)}</ThemedText>
+            </View>
+             <View style={styles.statRowCompact}>
+               <View style={styles.labelWithDot}>
+                 <View style={styles.dotConsumed} />
+                 <ThemedText style={styles.statLabel}>{t('nutritionRecords.chart.diet')}</ThemedText>
+               </View>
+               <ThemedText style={styles.statValue}>{Math.round(consumed)}</ThemedText>
+            </View>
+          </View>
+          
+          <View style={styles.divider} />
+
+          {/* 营养素 - 水平排布 */}
+           <View style={styles.nutritionRow}>
+             <View style={styles.nutritionItem}>
+               <ThemedText style={styles.statValueSmall}>{Math.round(protein)}{t('nutritionRecords.nutrients.unit')}</ThemedText>
+               <ThemedText style={styles.statLabelSmall}>{t('nutritionRecords.nutrients.protein')}</ThemedText>
+             </View>
+             <View style={styles.nutritionItem}>
+               <ThemedText style={styles.statValueSmall}>{Math.round(fat)}{t('nutritionRecords.nutrients.unit')}</ThemedText>
+               <ThemedText style={styles.statLabelSmall}>{t('nutritionRecords.nutrients.fat')}</ThemedText>
+             </View>
+             <View style={styles.nutritionItem}>
+               <ThemedText style={styles.statValueSmall}>{Math.round(carbs)}{t('nutritionRecords.nutrients.unit')}</ThemedText>
+               <ThemedText style={styles.statLabelSmall}>{t('nutritionRecords.nutrients.carbs')}</ThemedText>
+             </View>
           </View>
         </View>
       </View>
@@ -181,40 +175,35 @@ export function CalorieRingChart({
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#FFFFFF',
-    borderRadius: 16,
+    borderRadius: 24,
     padding: 16,
-    marginHorizontal: 16,
-    marginBottom: 8,
-    shadowColor: '#000000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.04,
-    shadowRadius: 8,
-    elevation: 2,
+    marginHorizontal: 20,
+    shadowColor: 'rgba(30, 41, 59, 0.08)',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    elevation: 6,
   },
   formulaContainer: {
-    alignItems: 'flex-start',
     marginBottom: 12,
   },
   formulaText: {
-    fontSize: 12,
+    fontSize: 10,
     fontWeight: '500',
-    color: '#999999',
-    lineHeight: 16,
+    color: '#94A3B8',
+    fontFamily: 'AliRegular',
   },
   mainContent: {
-    width: '100%',
     flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 0, // 移除底部间距，因为不再有底部营养容器
-    paddingHorizontal: 8,
+    alignItems: 'flex-start',
   },
   chartContainer: {
     position: 'relative',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 112, // 减少宽度以匹配更小的圆环 (48*2 + 8*2)
-    flexShrink: 0,
+    width: 100,
+    height: 100,
+    marginTop: 8,
   },
   centerContent: {
     position: 'absolute',
@@ -222,71 +211,95 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   centerLabel: {
-    fontSize: 11,
+    fontSize: 10,
     fontWeight: '500',
-    color: '#999999',
-    marginBottom: 2,
+    color: '#94A3B8',
+    marginBottom: 1,
+    fontFamily: 'AliRegular',
   },
   centerValue: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: '#333333',
-    marginBottom: 1,
+    fontSize: 20,
+    fontWeight: '800',
+    color: '#1E293B',
+    lineHeight: 24,
+    fontFamily: 'AliBold',
   },
-  centerPercentage: {
-    fontSize: 11,
-    fontWeight: '500',
-    color: '#999999',
+  centerUnit: {
+     fontSize: 10,
+     fontWeight: '600',
+     color: '#64748B',
+     fontFamily: 'AliRegular',
   },
   dataContainer: {
     flex: 1,
-    marginLeft: 16,
+    marginLeft: 20,
   },
-  dataBackground: {
-    backgroundColor: 'rgba(248, 250, 252, 0.8)', // 毛玻璃背景色
-    borderRadius: 12,
-    padding: 12,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.06,
-    shadowRadius: 3,
-    elevation: 1,
-    // 添加边框增强毛玻璃效果
-    borderWidth: 0.5,
-    borderColor: 'rgba(255, 255, 255, 0.8)',
-    gap: 4,
+  statsGroup: {
+    gap: 6,
   },
-  dataItem: {
+  statRowCompact: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 4,
+    justifyContent: 'space-between',
   },
-  dataIcon: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
+  labelWithDot: {
+    flexDirection: 'row',
+    alignItems: 'center',
   },
-  dataLabel: {
-    fontSize: 11,
-    fontWeight: '500',
-    color: '#999999',
-    minWidth: 28,
+  dotMetabolism: {
+     width: 6,
+     height: 6,
+     borderRadius: 3,
+     backgroundColor: '#94A3B8',
+     marginRight: 6,
   },
-  dataValue: {
-    fontSize: 11,
+  dotExercise: {
+     width: 6,
+     height: 6,
+     borderRadius: 3,
+     backgroundColor: '#4facfe',
+     marginRight: 6,
+  },
+   dotConsumed: {
+     width: 6,
+     height: 6,
+     borderRadius: 3,
+     backgroundColor: '#FF9966',
+     marginRight: 6,
+  },
+  statLabel: {
+    fontSize: 12,
+    color: '#64748B',
+    fontFamily: 'AliRegular',
+  },
+  statValue: {
+    fontSize: 13,
     fontWeight: '600',
-    color: '#333333',
+    color: '#334155',
+    fontFamily: 'AliBold',
   },
-  dataColumns: {
+  divider: {
+    height: 1,
+    backgroundColor: '#F1F5F9',
+    marginVertical: 10,
+  },
+  nutritionRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    gap: 12,
   },
-  dataColumn: {
-    flex: 1,
-    gap: 4,
+  nutritionItem: {
+    alignItems: 'center',
+  },
+  statLabelSmall: {
+    fontSize: 10,
+    color: '#94A3B8',
+    marginTop: 2,
+    fontFamily: 'AliRegular',
+  },
+   statValueSmall: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#475569',
+    fontFamily: 'AliBold',
   },
 });