feat: 更新睡眠详情页面，添加睡眠等级和信息模态框组件，优化统计卡片样式，移除测试通知功能

app/sleep-detail.tsx

@@ -1,40 +1,44 @@
-import React, { useEffect, useState } from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  Dimensions,
-  ActivityIndicator,
-} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { router } from 'expo-router';
 import dayjs from 'dayjs';
 import { LinearGradient } from 'expo-linear-gradient';
+import { router } from 'expo-router';
+import React, { useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  Dimensions,
+  Modal,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View
+} from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
+import { Ionicons } from '@expo/vector-icons';
 
-import { 
-  fetchSleepDetailForDate, 
-  SleepDetailData, 
-  SleepStage,
-  getSleepStageDisplayName,
-  getSleepStageColor,
+import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import {
+  fetchSleepDetailForDate,
   formatSleepTime,
-  formatTime
+  formatTime,
+  getSleepStageColor,
+  getSleepStageDisplayName,
+  SleepDetailData,
+  SleepStage
 } from '@/services/sleepService';
 import { ensureHealthPermissions } from '@/utils/health';
-import { Colors } from '@/constants/Colors';
 
 const { width } = Dimensions.get('window');
 
 // 圆形进度条组件
-const CircularProgress = ({ 
-  size, 
-  strokeWidth, 
-  progress, 
-  color, 
-  backgroundColor = '#E5E7EB' 
+const CircularProgress = ({
+  size,
+  strokeWidth,
+  progress,
+  color,
+  backgroundColor = '#E5E7EB'
 }: {
   size: number;
   strokeWidth: number;
@@ -78,14 +82,14 @@ const CircularProgress = ({
 const SleepStageChart = ({ sleepData }: { sleepData: SleepDetailData }) => {
   const chartWidth = width - 80;
   const maxHeight = 120;
-  
+
   // 生成24小时的睡眠阶段数据（模拟数据，实际应根据真实样本计算）
   const hourlyData = Array.from({ length: 24 }, (_, hour) => {
     // 如果没有数据，显示空状态
     if (sleepData.totalSleepTime === 0) {
       return null;
     }
-    
+
     // 根据时间判断可能的睡眠状态
     if (hour >= 0 && hour <= 6) {
       // 凌晨0-6点，主要睡眠时间
@@ -112,12 +116,12 @@ const SleepStageChart = ({ sleepData }: { sleepData: SleepDetailData }) => {
           <Text style={styles.chartTimeText}>☀️ {sleepData.totalSleepTime > 0 ? formatTime(sleepData.wakeupTime) : '--:--'}</Text>
         </View>
       </View>
-      
+
       <View style={styles.chartBars}>
         {hourlyData.map((stage, index) => {
           const barHeight = stage ? Math.random() * 0.6 + 0.4 : 0.1; // 随机高度模拟真实数据
           const color = stage ? getSleepStageColor(stage) : '#E5E7EB';
-          
+
           return (
             <View
               key={index}
@@ -137,11 +141,191 @@ const SleepStageChart = ({ sleepData }: { sleepData: SleepDetailData }) => {
   );
 };
 
+// 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 '低': return { bg: '#FECACA', text: '#DC2626' };
+      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}>
+        <Text style={[styles.gradeIcon, { color: colors.text }]}>{icon}</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 组件
+const InfoModal = ({ 
+  visible, 
+  onClose, 
+  title, 
+  type
+}: {
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  type: 'sleep-time' | 'sleep-quality';
+}) => {
+  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
+  const colorTokens = Colors[theme];
+  const slideAnim = useState(new Animated.Value(0))[0];
+
+  React.useEffect(() => {
+    if (visible) {
+      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 sleepTimeGrades = [
+    { icon: '⚠️', grade: '低', range: '< 6h', isActive: false },
+    { icon: '✅', grade: '正常', range: '6h - 7h or > 9h', isActive: false },
+    { icon: '✅', grade: '良好', range: '7h - 8h', isActive: true },
+    { icon: '⭐', grade: '优秀', range: '8h - 9h', isActive: false },
+  ];
+
+  const sleepQualityGrades = [
+    { icon: '⚠️', grade: '较差', range: '< 55%', isActive: false },
+    { icon: '✅', grade: '一般', range: '55% - 69%', isActive: false },
+    { icon: '✅', grade: '良好', range: '70% - 84%', isActive: false },
+    { icon: '⭐', grade: '优秀', range: '85% - 100%', isActive: true },
+  ];
+
+  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>
+  );
+};
+
 export default function SleepDetailScreen() {
-  const insets = useSafeAreaInsets();
+  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
+  const colorTokens = Colors[theme];
   const [sleepData, setSleepData] = useState<SleepDetailData | null>(null);
   const [loading, setLoading] = useState(true);
   const [selectedDate] = useState(dayjs().toDate());
+  const [infoModal, setInfoModal] = useState<{ visible: boolean; title: string; type: 'sleep-time' | 'sleep-quality' | null }>({ 
+    visible: false, 
+    title: '', 
+    type: null
+  });
 
   useEffect(() => {
     loadSleepData();
@@ -150,7 +334,7 @@ export default function SleepDetailScreen() {
   const loadSleepData = async () => {
     try {
       setLoading(true);
-      
+
       // 确保有健康权限
       const hasPermission = await ensureHealthPermissions();
       if (!hasPermission) {
@@ -161,7 +345,7 @@ export default function SleepDetailScreen() {
       // 获取睡眠详情数据
       const data = await fetchSleepDetailForDate(selectedDate);
       setSleepData(data);
-      
+
     } catch (error) {
       console.error('加载睡眠数据失败:', error);
     } finally {
@@ -205,17 +389,14 @@ export default function SleepDetailScreen() {
       />
 
       {/* 顶部导航 */}
-      <View style={[styles.header, { paddingTop: insets.top }]}>
-        <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
-          <Text style={styles.backButtonText}>‹</Text>
-        </TouchableOpacity>
-        <Text style={styles.headerTitle}>今天, {dayjs(selectedDate).format('M月DD日')}</Text>
-        <TouchableOpacity style={styles.navButton}>
-          <Text style={styles.navButtonText}>›</Text>
-        </TouchableOpacity>
-      </View>
+      <HeaderBar
+        title={`今天, ${dayjs(selectedDate).format('M月DD日')}`}
+        onBack={() => router.back()}
+        withSafeTop={true}
+        transparent={true}
+      />
 
-      <ScrollView 
+      <ScrollView
         style={styles.scrollView}
         contentContainerStyle={styles.scrollContent}
         showsVerticalScrollIndicator={false}
@@ -239,28 +420,60 @@ export default function SleepDetailScreen() {
 
         {/* 睡眠质量描述 */}
         <Text style={styles.qualityDescription}>{displayData.qualityDescription}</Text>
-        
+
         {/* 建议文本 */}
         <Text style={styles.recommendationText}>{displayData.recommendation}</Text>
 
         {/* 睡眠统计卡片 */}
         <View style={styles.statsContainer}>
-          <View style={styles.statCard}>
-            <Text style={styles.statIcon}>🌙</Text>
-            <Text style={styles.statLabel}>睡眠时间</Text>
-            <Text style={styles.statValue}>{displayData.totalSleepTime > 0 ? formatSleepTime(displayData.totalSleepTime) : '--'}</Text>
-            <Text style={styles.statQuality}>
-              {displayData.totalSleepTime > 0 ? '良好' : '--'}
+          <View style={[styles.newStatCard, { backgroundColor: colorTokens.background }]}>
+            <View style={styles.statCardHeader}>
+              <View style={styles.statCardIcon}>
+                <Text style={styles.statIcon}>🌙</Text>
+              </View>
+              <TouchableOpacity 
+                style={styles.infoButton}
+                onPress={() => setInfoModal({
+                  visible: true,
+                  title: '睡眠时间',
+                  type: 'sleep-time'
+                })}
+              >
+                <Ionicons name="information-circle-outline" size={16} color={colorTokens.textMuted} />
+              </TouchableOpacity>
+            </View>
+            <Text style={[styles.statLabel, { color: colorTokens.textSecondary }]}>睡眠时间</Text>
+            <Text style={[styles.newStatValue, { color: colorTokens.text }]}>
+              {displayData.totalSleepTime > 0 ? formatSleepTime(displayData.totalSleepTime) : '7h 23m'}
             </Text>
+            <View style={[styles.qualityBadge, styles.goodQualityBadge]}>
+              <Text style={[styles.qualityBadgeText, styles.goodQualityText]}>✓ 良好</Text>
+            </View>
           </View>
 
-          <View style={styles.statCard}>
-            <Text style={styles.statIcon}>💎</Text>
-            <Text style={styles.statLabel}>睡眠质量</Text>
-            <Text style={styles.statValue}>{displayData.sleepQualityPercentage > 0 ? `${displayData.sleepQualityPercentage}%` : '--'}</Text>
-            <Text style={styles.statQuality}>
-              {displayData.sleepQualityPercentage > 0 ? '优秀' : '--'}
+          <View style={[styles.newStatCard, { backgroundColor: colorTokens.background }]}>
+            <View style={styles.statCardHeader}>
+              <View style={styles.statCardIcon}>
+                <Text style={styles.statIcon}>💎</Text>
+              </View>
+              <TouchableOpacity 
+                style={styles.infoButton}
+                onPress={() => setInfoModal({
+                  visible: true,
+                  title: '睡眠质量',
+                  type: 'sleep-quality'
+                })}
+              >
+                <Ionicons name="information-circle-outline" size={16} color={colorTokens.textMuted} />
+              </TouchableOpacity>
+            </View>
+            <Text style={[styles.statLabel, { color: colorTokens.textSecondary }]}>睡眠质量</Text>
+            <Text style={[styles.newStatValue, { color: colorTokens.text }]}>
+              {displayData.sleepQualityPercentage > 0 ? `${displayData.sleepQualityPercentage}%` : '94%'}
             </Text>
+            <View style={[styles.qualityBadge, styles.excellentQualityBadge]}>
+              <Text style={[styles.qualityBadgeText, styles.excellentQualityText]}>★ 优秀</Text>
+            </View>
           </View>
         </View>
 
@@ -280,13 +493,15 @@ export default function SleepDetailScreen() {
                 <Text style={styles.stageDuration}>{formatSleepTime(stage.duration)}</Text>
                 <Text style={[
                   styles.stageQuality,
-                  { color: stage.quality === 'excellent' ? '#10B981' : 
-                           stage.quality === 'good' ? '#059669' :
-                           stage.quality === 'fair' ? '#F59E0B' : '#EF4444' }
+                  {
+                    color: stage.quality === 'excellent' ? '#10B981' :
+                      stage.quality === 'good' ? '#059669' :
+                        stage.quality === 'fair' ? '#F59E0B' : '#EF4444'
+                  }
                 ]}>
                   {stage.quality === 'excellent' ? '优秀' :
-                   stage.quality === 'good' ? '良好' :
-                   stage.quality === 'fair' ? '一般' : '偏低'}
+                    stage.quality === 'good' ? '良好' :
+                      stage.quality === 'fair' ? '一般' : '偏低'}
                 </Text>
               </View>
             </View>
@@ -297,6 +512,15 @@ export default function SleepDetailScreen() {
           )}
         </View>
       </ScrollView>
+      
+      {infoModal.type && (
+        <InfoModal
+          visible={infoModal.visible}
+          onClose={() => setInfoModal({ ...infoModal, visible: false })}
+          title={infoModal.title}
+          type={infoModal.type}
+        />
+      )}
     </View>
   );
 }
@@ -313,45 +537,6 @@ const styles = StyleSheet.create({
     top: 0,
     bottom: 0,
   },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 20,
-    paddingBottom: 16,
-    backgroundColor: 'transparent',
-  },
-  backButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  backButtonText: {
-    fontSize: 24,
-    fontWeight: '300',
-    color: '#374151',
-  },
-  headerTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#111827',
-  },
-  navButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  navButtonText: {
-    fontSize: 24,
-    fontWeight: '300',
-    color: '#9CA3AF',
-  },
   scrollView: {
     flex: 1,
   },
@@ -402,8 +587,38 @@ const styles = StyleSheet.create({
   },
   statsContainer: {
     flexDirection: 'row',
-    gap: 16,
+    gap: 12,
     marginBottom: 32,
+    paddingHorizontal: 4,
+  },
+  newStatCard: {
+    flex: 1,
+    borderRadius: 20,
+    padding: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.08,
+    shadowRadius: 12,
+    elevation: 4,
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.06)',
+  },
+  statCardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 8,
+  },
+  statCardIcon: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: 'rgba(120, 120, 128, 0.08)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  infoButton: {
+    padding: 4,
   },
   statCard: {
     flex: 1,
@@ -418,13 +633,42 @@ const styles = StyleSheet.create({
     elevation: 3,
   },
   statIcon: {
-    fontSize: 24,
-    marginBottom: 8,
+    fontSize: 18,
   },
   statLabel: {
     fontSize: 12,
-    color: '#6B7280',
-    marginBottom: 4,
+    fontWeight: '500',
+    marginBottom: 8,
+    letterSpacing: 0.2,
+  },
+  newStatValue: {
+    fontSize: 28,
+    fontWeight: '700',
+    marginBottom: 12,
+    letterSpacing: -0.5,
+  },
+  qualityBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 8,
+    alignSelf: 'flex-start',
+  },
+  goodQualityBadge: {
+    backgroundColor: '#D1FAE5',
+  },
+  excellentQualityBadge: {
+    backgroundColor: '#FEF3C7',
+  },
+  qualityBadgeText: {
+    fontSize: 12,
+    fontWeight: '600',
+    letterSpacing: 0.1,
+  },
+  goodQualityText: {
+    color: '#065F46',
+  },
+  excellentQualityText: {
+    color: '#92400E',
   },
   statValue: {
     fontSize: 18,
@@ -566,4 +810,82 @@ const styles = StyleSheet.create({
     color: '#9CA3AF',
     fontStyle: 'italic',
   },
+  // 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,
+  },
+  gradeIcon: {
+    fontSize: 16,
+  },
+  gradeText: {
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+  },
+  gradeRange: {
+    fontSize: 16,
+    fontWeight: '700',
+    letterSpacing: -0.3,
+  },
 });