feat: 添加睡眠详情页面，集成睡眠数据获取功能，优化健康数据权限管理，更新相关组件以支持睡眠统计和展示

components/StressMeter.tsx

@@ -8,7 +8,7 @@ interface StressMeterProps {
   value: number | null;
   updateTime?: Date;
   style?: any;
-  hrvValue: number;
+  hrvValue: number | null;
 }
 
 export function StressMeter({ value, updateTime, style, hrvValue }: StressMeterProps) {
@@ -50,6 +50,13 @@ export function StressMeter({ value, updateTime, style, hrvValue }: StressMeterP
   // 使用传入的 hrvValue 进行转换
   const stressIndex = convertHrvToStressIndex(hrvValue);
 
+  // 调试信息
+  console.log('StressMeter 调试:', {
+    hrvValue,
+    stressIndex,
+    progressPercentage: stressIndex !== null ? Math.max(0, Math.min(100, stressIndex)) : 0
+  });
+
   // 计算进度条位置（0-100%）
   // 压力指数越高，进度条越满（红色区域越多）
   const progressPercentage = stressIndex !== null ? Math.max(0, Math.min(100, stressIndex)) : 0;

components/statistic/SleepCard.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+
+interface SleepCardProps {
+  sleepDuration?: number | null;
+  style?: object;
+  onPress?: () => void;
+}
+
+const SleepCard: React.FC<SleepCardProps> = ({
+  sleepDuration,
+  style,
+  onPress
+}) => {
+  const formatSleepDuration = (duration: number): string => {
+    const hours = Math.floor(duration / 60);
+    const minutes = Math.floor(duration % 60);
+    return `${hours}小时${minutes}分钟`;
+  };
+
+  const CardContent = (
+    <View style={[styles.container, style]}>
+      <View style={styles.cardHeaderRow}>
+        <Text style={styles.cardTitle}>睡眠</Text>
+      </View>
+      <Text style={styles.sleepValue}>
+        {sleepDuration != null ? formatSleepDuration(sleepDuration) : '——'}
+      </Text>
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        {CardContent}
+      </TouchableOpacity>
+    );
+  }
+
+  return CardContent;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    // Container styles will be inherited from parent (FloatingCard)
+  },
+  cardHeaderRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  cardTitle: {
+    fontSize: 14,
+    color: '#192126',
+  },
+  sleepValue: {
+    fontSize: 16,
+    color: '#1E40AF',
+    fontWeight: '700',
+    marginTop: 8,
+  },
+});
+
+export default SleepCard;