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

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;