feat: 重构睡眠详情模块，扩展数据类型并引入独立组件以优化代码结构

2025-09-09 22:12:12 +08:00
parent a7f5379d5a
commit b0c572c1d4
3 changed files with 566 additions and 502 deletions
--- a/components/sleep/InfoModal.tsx
+++ b/components/sleep/InfoModal.tsx
@@ -0,0 +1,307 @@
+import { Ionicons } from '@expo/vector-icons';
+import React, { useState } from 'react';
+import {
+  Animated,
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View
+} from 'react-native';
+
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+// 睡眠详情数据类型
+export type SleepDetailData = {
+  sleepScore: number;
+  totalSleepTime: number;
+  sleepQualityPercentage: number;
+  bedtime: string;
+  wakeupTime: string;
+  timeInBed: number;
+  sleepStages: any[];
+  rawSleepSamples: any[];
+  averageHeartRate: number | null;
+  sleepHeartRateData: any[];
+  sleepEfficiency: number;
+  qualityDescription: string;
+  recommendation: string;
+};
+
+// Sleep Grade Component 睡眠等级组件
+const SleepGradeCard = ({
+  icon,
+  grade,
+  range,
+  isActive = false
+}: {
+  icon: string;
+  grade: string;
+  range: string;
+  isActive?: boolean;
+}) => {
+  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
+  const colorTokens = Colors[theme];
+
+  const getGradeColor = (grade: string) => {
+    switch (grade) {
+      case '低': case '较差': return { bg: '#FECACA', text: '#DC2626' };
+      case '正常': case '一般': return { bg: '#D1FAE5', text: '#065F46' };
+      case '良好': return { bg: '#D1FAE5', text: '#065F46' };
+      case '优秀': return { bg: '#FEF3C7', text: '#92400E' };
+      default: return { bg: colorTokens.pageBackgroundEmphasis, text: colorTokens.textSecondary };
+    }
+  };
+
+  const colors = getGradeColor(grade);
+
+  return (
+    <View style={[
+      styles.gradeCard,
+      {
+        backgroundColor: isActive ? colors.bg : colorTokens.pageBackgroundEmphasis,
+        borderColor: isActive ? colors.text : 'transparent',
+      }
+    ]}>
+      <View style={styles.gradeCardLeft}>
+        <Ionicons name={icon as any} size={16} color={colors.text} />
+        <Text style={[
+          styles.gradeText,
+          { color: isActive ? colors.text : colorTokens.textSecondary }
+        ]}>
+          {grade}
+        </Text>
+      </View>
+      <Text style={[
+        styles.gradeRange,
+        { color: isActive ? colors.text : colorTokens.textSecondary }
+      ]}>
+        {range}
+      </Text>
+    </View>
+  );
+};
+
+// Info Modal 组件
+export const InfoModal = ({
+  visible,
+  onClose,
+  title,
+  type,
+  sleepData
+}: {
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  type: 'sleep-time' | 'sleep-quality';
+  sleepData: SleepDetailData;
+}) => {
+  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
+  const colorTokens = Colors[theme];
+  const slideAnim = useState(new Animated.Value(0))[0];
+
+  React.useEffect(() => {
+    if (visible) {
+      // 重置动画值确保每次打开都有动画
+      slideAnim.setValue(0);
+      Animated.spring(slideAnim, {
+        toValue: 1,
+        useNativeDriver: true,
+        tension: 100,
+        friction: 8,
+      }).start();
+    } else {
+      Animated.spring(slideAnim, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 100,
+        friction: 8,
+      }).start();
+    }
+  }, [visible]);
+
+  const translateY = slideAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [300, 0],
+  });
+
+  const opacity = slideAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
+
+  // 根据实际睡眠时间计算等级
+  const getSleepTimeGrade = (totalSleepMinutes: number) => {
+    const hours = totalSleepMinutes / 60;
+    if (hours < 6) return 0; // 低
+    if ((hours >= 6 && hours < 7) || hours > 9) return 1; // 正常
+    if (hours >= 7 && hours < 8) return 2; // 良好
+    if (hours >= 8 && hours <= 9) return 3; // 优秀
+    return 1; // 默认正常
+  };
+
+  // 根据实际睡眠质量百分比计算等级
+  const getSleepQualityGrade = (qualityPercentage: number) => {
+    if (qualityPercentage < 55) return 0; // 较差
+    if (qualityPercentage < 70) return 1; // 一般
+    if (qualityPercentage < 85) return 2; // 良好
+    return 3; // 优秀
+  };
+
+  const currentSleepTimeGrade = getSleepTimeGrade(sleepData.totalSleepTime || 443); // 默认7h23m
+  const currentSleepQualityGrade = getSleepQualityGrade(sleepData.sleepQualityPercentage || 94); // 默认94%
+
+  const sleepTimeGrades = [
+    { icon: 'alert-circle-outline', grade: '低', range: '< 6h', isActive: currentSleepTimeGrade === 0 },
+    { icon: 'checkmark-circle-outline', grade: '正常', range: '6h - 7h or > 9h', isActive: currentSleepTimeGrade === 1 },
+    { icon: 'checkmark-circle', grade: '良好', range: '7h - 8h', isActive: currentSleepTimeGrade === 2 },
+    { icon: 'star', grade: '优秀', range: '8h - 9h', isActive: currentSleepTimeGrade === 3 },
+  ];
+
+  const sleepQualityGrades = [
+    { icon: 'alert-circle-outline', grade: '较差', range: '< 55%', isActive: currentSleepQualityGrade === 0 },
+    { icon: 'checkmark-circle-outline', grade: '一般', range: '55% - 69%', isActive: currentSleepQualityGrade === 1 },
+    { icon: 'checkmark-circle', grade: '良好', range: '70% - 84%', isActive: currentSleepQualityGrade === 2 },
+    { icon: 'star', grade: '优秀', range: '85% - 100%', isActive: currentSleepQualityGrade === 3 },
+  ];
+
+  const currentGrades = type === 'sleep-time' ? sleepTimeGrades : sleepQualityGrades;
+
+  const getDescription = () => {
+    if (type === 'sleep-time') {
+      return '睡眠最重要 - 它占据了你睡眠得分的一半以上。长时间的睡眠可以减少睡眠债务，但是规律的睡眠时间对于高质量的休息至关重要。';
+    } else {
+      return '睡眠质量综合评估您的睡眠效率、深度睡眠时长、REM睡眠比例等多个指标。高质量的睡眠不仅仅取决于时长，还包括睡眠的连续性和各睡眠阶段的平衡。';
+    }
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="none"
+      onRequestClose={onClose}
+    >
+      <TouchableOpacity
+        style={styles.modalOverlay}
+        activeOpacity={1}
+        onPress={onClose}
+      >
+        <Animated.View style={[
+          styles.infoModalContent,
+          {
+            backgroundColor: colorTokens.background,
+            transform: [{ translateY }],
+            opacity,
+          }
+        ]}>
+          <View style={styles.modalHandle} />
+          <View style={styles.infoModalHeader}>
+            <Text style={[styles.infoModalTitle, { color: colorTokens.text }]}>
+              {title}
+            </Text>
+            <TouchableOpacity onPress={onClose} style={styles.infoModalCloseButton}>
+              <Ionicons name="close" size={20} color={colorTokens.textSecondary} />
+            </TouchableOpacity>
+          </View>
+
+          {/* 等级卡片区域 */}
+          <View style={styles.gradesContainer}>
+            {currentGrades.map((grade, index) => (
+              <SleepGradeCard
+                key={index}
+                icon={grade.icon}
+                grade={grade.grade}
+                range={grade.range}
+                isActive={grade.isActive}
+              />
+            ))}
+          </View>
+
+          <Text style={[styles.infoModalText, { color: colorTokens.textSecondary }]}>
+            {getDescription()}
+          </Text>
+        </Animated.View>
+      </TouchableOpacity>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  // Info Modal 样式
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  infoModalContent: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    paddingTop: 12,
+    paddingHorizontal: 20,
+    paddingBottom: 34,
+    minHeight: 200,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+  modalHandle: {
+    width: 36,
+    height: 4,
+    backgroundColor: '#D1D5DB',
+    borderRadius: 2,
+    alignSelf: 'center',
+    marginBottom: 20,
+  },
+  infoModalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  infoModalTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    letterSpacing: -0.3,
+  },
+  infoModalCloseButton: {
+    padding: 4,
+  },
+  infoModalText: {
+    fontSize: 15,
+    lineHeight: 22,
+    letterSpacing: -0.1,
+  },
+  // Grade Cards 样式
+  gradesContainer: {
+    marginBottom: 20,
+    gap: 8,
+  },
+  gradeCard: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  gradeCardLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  gradeText: {
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+  },
+  gradeRange: {
+    fontSize: 16,
+    fontWeight: '700',
+    letterSpacing: -0.3,
+  },
+});
--- a/components/sleep/SleepStagesInfoModal.tsx
+++ b/components/sleep/SleepStagesInfoModal.tsx
@@ -0,0 +1,246 @@
+import { Ionicons } from '@expo/vector-icons';
+import React, { useState } from 'react';
+import {
+  Animated,
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View
+} from 'react-native';
+
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+// Sleep Stages Info Modal 组件
+export const SleepStagesInfoModal = ({
+  visible,
+  onClose
+}: {
+  visible: boolean;
+  onClose: () => void;
+}) => {
+  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
+  const colorTokens = Colors[theme];
+  const slideAnim = useState(new Animated.Value(0))[0];
+
+  React.useEffect(() => {
+    if (visible) {
+      slideAnim.setValue(0);
+      Animated.spring(slideAnim, {
+        toValue: 1,
+        useNativeDriver: true,
+        tension: 100,
+        friction: 8,
+      }).start();
+    } else {
+      Animated.spring(slideAnim, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 100,
+        friction: 8,
+      }).start();
+    }
+  }, [visible]);
+
+  const translateY = slideAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [300, 0],
+  });
+
+  const opacity = slideAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="none"
+      onRequestClose={onClose}
+    >
+      <View style={styles.modalOverlay}>
+        <Pressable
+          style={StyleSheet.absoluteFillObject}
+          onPress={onClose}
+        />
+        <Animated.View
+          style={[
+            styles.sleepStagesModalContent,
+            {
+              backgroundColor: colorTokens.background,
+              transform: [{ translateY }],
+              opacity,
+            }
+          ]}
+        >
+          <View style={styles.sleepStagesModalInner}>
+            <View style={styles.modalHandle} />
+
+            <View style={styles.sleepStagesModalHeader}>
+              <Text style={[styles.sleepStagesModalTitle, { color: colorTokens.text }]}>
+                了解你的睡眠阶段
+              </Text>
+              <TouchableOpacity onPress={onClose} style={styles.infoModalCloseButton}>
+                <Ionicons name="close" size={24} color={colorTokens.textSecondary} />
+              </TouchableOpacity>
+            </View>
+
+            <ScrollView
+              style={styles.sleepStagesScrollView}
+              contentContainerStyle={styles.sleepStagesScrollContent}
+              showsVerticalScrollIndicator={false}
+              bounces={true}
+              scrollEnabled={true}
+            >
+              <Text style={[styles.sleepStagesDescription, { color: colorTokens.textSecondary }]}>
+                人们对睡眠阶段和睡眠质量有许多误解。有些人可能需要更多深度睡眠，其他人则不然。科学家和医生仍在探索不同睡眠阶段的作用及其对身体的影响。通过跟踪睡眠阶段并留意每天清晨的感受，你或许能深入了解自己的睡眠。
+              </Text>
+
+              {/* 清醒时间 */}
+              <View style={styles.sleepStageInfoCard}>
+                <View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
+                  <View style={styles.sleepStageInfoTitleContainer}>
+                    <View style={[styles.sleepStageDot, { backgroundColor: '#F59E0B' }]} />
+                    <Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>清醒时间</Text>
+                  </View>
+                </View>
+                <Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
+                  一次睡眠期间，你可能会醒来几次。偶尔醒来很正常。可能你会立刻再次入睡，并不记得曾在夜间醒来。
+                </Text>
+              </View>
+
+              {/* 快速动眼睡眠 */}
+              <View style={styles.sleepStageInfoCard}>
+                <View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
+                  <View style={styles.sleepStageInfoTitleContainer}>
+                    <View style={[styles.sleepStageDot, { backgroundColor: '#EC4899' }]} />
+                    <Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>快速动眼睡眠</Text>
+                  </View>
+                </View>
+                <Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
+                  这一睡眠阶段可能对学习和记忆产生一定影响。在此阶段，你的肌肉最为放松，眼球也会快速左右移动。这也是你大多数梦境出现的阶段。
+                </Text>
+              </View>
+
+              {/* 核心睡眠 */}
+              <View style={styles.sleepStageInfoCard}>
+                <View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
+                  <View style={styles.sleepStageInfoTitleContainer}>
+                    <View style={[styles.sleepStageDot, { backgroundColor: '#8B5CF6' }]} />
+                    <Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>核心睡眠</Text>
+                  </View>
+                </View>
+                <Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
+                  这一阶段有时也称为浅睡期，与其他阶段一样重要。此阶段通常占据你每晚大部分的睡眠时间。对于认知至关重要的脑电波会在这一阶段产生。
+                </Text>
+              </View>
+
+              {/* 深度睡眠 */}
+              <View style={styles.sleepStageInfoCard}>
+                <View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
+                  <View style={styles.sleepStageInfoTitleContainer}>
+                    <View style={[styles.sleepStageDot, { backgroundColor: '#3B82F6' }]} />
+                    <Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>深度睡眠</Text>
+                  </View>
+                </View>
+                <Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
+                  因为脑电波的特征，这一阶段也称为慢波睡眠。在此阶段，身体组织得到修复，并释放重要荷尔蒙。它通常出现在睡眠的前半段，且持续时间较长。深度睡眠期间，身体非常放松，因此相较于其他阶段，你可能更难在此阶段醒来。
+                </Text>
+              </View>
+            </ScrollView>
+          </View>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  modalHandle: {
+    width: 36,
+    height: 4,
+    backgroundColor: '#D1D5DB',
+    borderRadius: 2,
+    alignSelf: 'center',
+    marginBottom: 20,
+  },
+  infoModalCloseButton: {
+    padding: 4,
+  },
+  // Sleep Stages Modal 样式
+  sleepStagesModalContent: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    height: '80%',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+  sleepStagesModalInner: {
+    flex: 1,
+    paddingTop: 12,
+    paddingHorizontal: 20,
+    paddingBottom: 34,
+  },
+  sleepStagesModalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  sleepStagesModalTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    letterSpacing: -0.4,
+  },
+  sleepStagesScrollView: {
+    flex: 1,
+  },
+  sleepStagesScrollContent: {
+    paddingBottom: 40,
+  },
+  sleepStagesDescription: {
+    fontSize: 15,
+    lineHeight: 22,
+    letterSpacing: -0.1,
+    marginBottom: 24,
+  },
+  sleepStageInfoCard: {
+    marginBottom: 20,
+  },
+  sleepStageInfoHeader: {
+    paddingBottom: 12,
+    marginBottom: 12,
+  },
+  sleepStageInfoTitleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  sleepStageDot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  sleepStageInfoTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+  },
+  sleepStageInfoContent: {
+    fontSize: 15,
+    lineHeight: 22,
+    letterSpacing: -0.1,
+  },
+});