feat(ui): 统一应用主题色为天空蓝并优化渐变背景

将应用主色调从 '#BBF246' 更改为 '#87CEEB'（天空蓝），并更新所有相关组件和页面中的颜色引用。同时为多个页面添加统一的渐变背景，提升视觉效果和用户体验。新增压力分析模态框组件，并优化压力计组件的交互与显示逻辑。更新应用图标和启动图资源。
2025-08-20 09:38:25 +08:00
parent 37f8c3c78d
commit d76ba48424
35 changed files with 519 additions and 184 deletions
--- a/app/(tabs)/coach.tsx
+++ b/app/(tabs)/coach.tsx
@@ -17,7 +17,7 @@ import {
  Text,
  TextInput,
  TouchableOpacity,
-  View,
+  View
 } from 'react-native';
 import Markdown from 'react-native-markdown-display';
 import Animated, { FadeInDown, FadeInUp, Layout } from 'react-native-reanimated';
@@ -32,6 +32,7 @@ import { deleteConversation, getConversationDetail, listConversations, type AiCo
 import { loadAiCoachSessionCache, saveAiCoachSessionCache } from '@/services/aiCoachSession';
 import { api, getAuthToken, postTextStream } from '@/services/api';
 import dayjs from 'dayjs';
+import { LinearGradient } from 'expo-linear-gradient';
 import { ActionSheet } from '../../components/ui/ActionSheet';

 type Role = 'user' | 'assistant';
@@ -1121,7 +1122,7 @@ export default function CoachScreen() {
          style={[
            styles.bubble,
            {
-              backgroundColor: isUser ? theme.primary : 'rgba(187,242,70,0.16)',
+              backgroundColor: theme.card, // 16% opacity
              borderTopLeftRadius: isUser ? 16 : 6,
              borderTopRightRadius: isUser ? 6 : 16,
              maxWidth: isUser ? '82%' : '90%',
@@ -1347,7 +1348,7 @@ export default function CoachScreen() {
                        </View>
                      )}
                      {isSelected && isPending && (
-                        <ActivityIndicator size="small" color="#2D5016" />
+                        <ActivityIndicator size="small" color={Colors.light.accentGreenDark} />
                      )}
                      {isSelected && !isPending && (
                        <View style={styles.selectedBadge}>
@@ -1594,7 +1595,13 @@ export default function CoachScreen() {
  }

  return (
-    <View style={[styles.screen, { backgroundColor: theme.background }]}>
+    <View style={styles.screen}>
+      <LinearGradient
+        colors={[theme.backgroundGradientStart, theme.backgroundGradientEnd]}
+        style={styles.gradientBackground}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      />
      {/* 顶部标题区域，显示教练名称、新建会话和历史按钮 */}
      <View
        style={[styles.header, { paddingTop: insets.top + 10 }]}
@@ -1608,14 +1615,14 @@ export default function CoachScreen() {
          <TouchableOpacity
            accessibilityRole="button"
            onPress={startNewConversation}
-            style={[styles.headerActionButton, { backgroundColor: 'rgba(187,242,70,0.2)' }]}
+            style={[styles.headerActionButton, { backgroundColor: `${Colors.light.accentGreen}33` }]} // 20% opacity
          >
            <Ionicons name="add-outline" size={18} color={theme.onPrimary} />
          </TouchableOpacity>
          <TouchableOpacity
            accessibilityRole="button"
            onPress={openHistory}
-            style={[styles.headerActionButton, { backgroundColor: 'rgba(187,242,70,0.2)' }]}
+            style={[styles.headerActionButton, { backgroundColor: `${Colors.light.accentGreen}33` }]} // 20% opacity
          >
            <Ionicons name="time-outline" size={18} color={theme.onPrimary} />
          </TouchableOpacity>
@@ -1680,7 +1687,7 @@ export default function CoachScreen() {
          contentContainerStyle={{ paddingHorizontal: 6, gap: 8 }}
        >
          {chips.map((c) => (
-            <TouchableOpacity key={c.key} style={[styles.chip, { borderColor: 'rgba(187,242,70,0.35)', backgroundColor: 'rgba(187,242,70,0.12)' }]} onPress={c.action}>
+            <TouchableOpacity key={c.key} style={[styles.chip, { borderColor: `${Colors.light.accentGreen}59`, backgroundColor: `${Colors.light.accentGreen}1F` }]} onPress={c.action}>
              <Text style={[styles.chipText, { color: '#192126' }]}>{c.label}</Text>
            </TouchableOpacity>
          ))}
@@ -1722,11 +1729,11 @@ export default function CoachScreen() {
          </ScrollView>
        )}

-        <View style={[styles.inputRow, { borderColor: 'rgba(187,242,70,0.35)', backgroundColor: 'rgba(187,242,70,0.08)' }]}>
+        <View style={[styles.inputRow, { borderColor: `${Colors.light.accentGreen}59`, backgroundColor: `${Colors.light.accentGreen}14` }]}>
          <TouchableOpacity
            accessibilityRole="button"
            onPress={pickImages}
-            style={[styles.mediaBtn, { backgroundColor: 'rgba(187,242,70,0.16)' }]}
+            style={[styles.mediaBtn, { backgroundColor: `${Colors.light.accentGreen}28` }]}
          >
            <Ionicons name="image-outline" size={18} color={'#192126'} />
          </TouchableOpacity>
@@ -1936,7 +1943,7 @@ const styles = StyleSheet.create({
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
-    backgroundColor: 'rgba(187,242,70,0.6)'
+    backgroundColor: `${Colors.light.accentGreen}99` // 60% opacity
  },
  dietOptionsContainer: {
    gap: 8,
@@ -1948,13 +1955,13 @@ const styles = StyleSheet.create({
    borderRadius: 12,
    backgroundColor: 'rgba(255,255,255,0.9)',
    borderWidth: 1,
-    borderColor: 'rgba(187,242,70,0.3)',
+    borderColor: `${Colors.light.accentGreen}4D`, // 30% opacity
  },
  dietOptionIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
-    backgroundColor: 'rgba(187,242,70,0.2)',
+    backgroundColor: `${Colors.light.accentGreen}33`, // 20% opacity
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
@@ -2003,7 +2010,7 @@ const styles = StyleSheet.create({
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
-    backgroundColor: 'rgba(187,242,70,0.6)',
+    backgroundColor: `${Colors.light.accentGreen}99`, // 60% opacity
    alignSelf: 'flex-end',
  },
  // markdown 基础样式承载容器的字体尺寸保持与气泡一致
@@ -2316,17 +2323,17 @@ const styles = StyleSheet.create({
  choiceButton: {
    backgroundColor: 'rgba(255,255,255,0.9)',
    borderWidth: 1,
-    borderColor: 'rgba(187,242,70,0.3)',
+    borderColor: `${Colors.light.accentGreen}4D`, // 30% opacity
    borderRadius: 12,
    padding: 12,
  },
  choiceButtonRecommended: {
-    borderColor: 'rgba(187,242,70,0.6)',
-    backgroundColor: 'rgba(187,242,70,0.1)',
+    borderColor: `${Colors.light.accentGreen}99`, // 60% opacity
+    backgroundColor: `${Colors.light.accentGreen}1A`, // 10% opacity
  },
  choiceButtonSelected: {
-    borderColor: '#2D5016',
-    backgroundColor: 'rgba(187,242,70,0.2)',
+    borderColor: Colors.light.accentGreenDark,
+    backgroundColor: `${Colors.light.accentGreen}33`, // 20% opacity
    borderWidth: 2,
  },
  choiceButtonDisabled: {
@@ -2346,10 +2353,10 @@ const styles = StyleSheet.create({
    flex: 1,
  },
  choiceLabelRecommended: {
-    color: '#2D5016',
+    color: Colors.light.accentGreenDark,
  },
  choiceLabelSelected: {
-    color: '#2D5016',
+    color: Colors.light.accentGreenDark,
    fontWeight: '700',
  },
  choiceLabelDisabled: {
@@ -2361,7 +2368,7 @@ const styles = StyleSheet.create({
    gap: 8,
  },
  recommendedBadge: {
-    backgroundColor: 'rgba(187,242,70,0.8)',
+    backgroundColor: `${Colors.light.accentGreen}CC`, // 80% opacity
    borderRadius: 6,
    paddingHorizontal: 8,
    paddingVertical: 2,
@@ -2369,10 +2376,10 @@ const styles = StyleSheet.create({
  recommendedText: {
    fontSize: 12,
    fontWeight: '700',
-    color: '#2D5016',
+    color: Colors.light.accentGreenDark,
  },
  selectedBadge: {
-    backgroundColor: '#2D5016',
+    backgroundColor: Colors.light.accentGreenDark,
    borderRadius: 6,
    paddingHorizontal: 8,
    paddingVertical: 2,
@@ -2405,6 +2412,13 @@ const styles = StyleSheet.create({
    fontWeight: '600',
    color: '#FF4444',
  },
+  gradientBackground: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
 });

 const markdownStyles = {
--- a/app/(tabs)/personal.tsx
+++ b/app/(tabs)/personal.tsx
@@ -9,6 +9,7 @@ import { Ionicons } from '@expo/vector-icons';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import { useFocusEffect } from '@react-navigation/native';
+import { LinearGradient } from 'expo-linear-gradient';
 import React, { useMemo, useState } from 'react';
 import { Alert, Image, Linking, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -287,11 +288,17 @@ export default function PersonalScreen() {
  ];

  return (
-    <View style={[styles.container, { backgroundColor: theme === 'light' ? colorTokens.pageBackgroundEmphasis : colorTokens.background }]}>
+    <View style={styles.container}>
+      <LinearGradient
+        colors={[colors.backgroundGradientStart, colors.backgroundGradientEnd]}
+        style={styles.gradientBackground}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      />
      <StatusBar barStyle={'dark-content'} backgroundColor="transparent" translucent />
-      <SafeAreaView style={[styles.safeArea, { backgroundColor: theme === 'light' ? colorTokens.pageBackgroundEmphasis : colorTokens.background }]}>
+      <SafeAreaView style={styles.safeArea}>
        <ScrollView
-          style={[styles.scrollView, { backgroundColor: theme === 'light' ? colorTokens.pageBackgroundEmphasis : colorTokens.background }]}
+          style={styles.scrollView}
          contentContainerStyle={{ paddingBottom: bottomPadding }}
          showsVerticalScrollIndicator={false}
        >
@@ -311,6 +318,13 @@ const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
+  gradientBackground: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
  safeArea: {
    flex: 1,
  },
--- a/app/(tabs)/statistics.tsx
+++ b/app/(tabs)/statistics.tsx
@@ -3,6 +3,7 @@ import { BMICard } from '@/components/BMICard';
 import { CircularRing } from '@/components/CircularRing';
 import { NutritionRadarCard } from '@/components/NutritionRadarCard';
 import { ProgressBar } from '@/components/ProgressBar';
+import { StressAnalysisModal } from '@/components/StressAnalysisModal';
 import { StressMeter } from '@/components/StressMeter';
 import { WeightHistoryCard } from '@/components/WeightHistoryCard';
 import { Colors } from '@/constants/Colors';
@@ -17,6 +18,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
+import { LinearGradient } from 'expo-linear-gradient';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
  SafeAreaView,
@@ -85,6 +87,9 @@ export default function ExploreScreen() {
  const [nutritionSummary, setNutritionSummary] = useState<NutritionSummary | null>(null);
  const [isNutritionLoading, setIsNutritionLoading] = useState(false);

+  // 压力分析浮窗状态
+  const [showStressModal, setShowStressModal] = useState(false);
+
  // 记录最近一次请求的“日期键”，避免旧请求覆盖新结果
  const latestRequestKeyRef = useRef<string | null>(null);

@@ -110,7 +115,7 @@ export default function ExploreScreen() {
      } else {
        derivedDate = days[selectedIndex]?.date?.toDate() ?? new Date();
      }
-      
+
      const requestKey = getDateKey(derivedDate);
      latestRequestKeyRef.current = requestKey;

@@ -204,10 +209,28 @@ export default function ExploreScreen() {
    }
  };

+  // 处理压力卡片点击
+  const handleStressCardPress = () => {
+    setShowStressModal(true);
+  };
+
+  // 关闭压力分析浮窗
+  const handleCloseStressModal = () => {
+    setShowStressModal(false);
+  };
+
+  // 使用统一的渐变背景色
+  const backgroundGradientColors = [colorTokens.backgroundGradientStart, colorTokens.backgroundGradientEnd] as const;

  return (
-    <View style={[styles.container, { backgroundColor: theme === 'light' ? colorTokens.pageBackgroundEmphasis : colorTokens.background }]}>
-      <SafeAreaView style={[styles.safeArea, { backgroundColor: theme === 'light' ? colorTokens.pageBackgroundEmphasis : colorTokens.background }]}>
+    <View style={styles.container}>
+      <LinearGradient
+        colors={backgroundGradientColors}
+        style={styles.gradientBackground}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      />
+      <SafeAreaView style={styles.safeArea}>
        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={{ paddingBottom: bottomPadding }}
@@ -253,12 +276,13 @@ export default function ExploreScreen() {
          <View style={styles.masonryContainer}>
            {/* 左列 */}
            <View style={styles.masonryColumn}>
-              <StressMeter 
-                value={hrvValue} 
+              <StressMeter
+                value={hrvValue}
                updateTime={hrvUpdateTime}
                style={styles.masonryCard}
+                onPress={handleStressCardPress}
              />
-              
+
              <View style={[styles.masonryCard, styles.caloriesCard]}>
                <Text style={styles.cardTitleSecondary}>消耗卡路里</Text>
                {activeCalories != null ? (
@@ -306,20 +330,20 @@ export default function ExploreScreen() {
                weight={userProfile?.weight ? parseFloat(userProfile.weight) : undefined}
                height={userProfile?.height ? parseFloat(userProfile.height) : undefined}
                style={styles.masonryCardNoBg}
-                compact={true}
+              // compact={true}
              />

              <View style={[styles.masonryCard, styles.trainingCard]}>
                <Text style={styles.cardTitleSecondary}>训练时间</Text>
                <View style={styles.trainingContent}>
-                                      <CircularRing
-                      size={120}
-                      strokeWidth={12}
-                      trackColor="#E2D9FD"
-                      progressColor="#8B74F3"
-                      progress={trainingProgress}
-                      resetToken={animToken}
-                    />
+                  <CircularRing
+                    size={120}
+                    strokeWidth={12}
+                    trackColor="#E2D9FD"
+                    progressColor="#8B74F3"
+                    progress={trainingProgress}
+                    resetToken={animToken}
+                  />
                </View>
              </View>

@@ -347,16 +371,32 @@ export default function ExploreScreen() {

        </ScrollView>
      </SafeAreaView>
+
+      {/* 压力分析浮窗 */}
+      <StressAnalysisModal
+        visible={showStressModal}
+        onClose={handleCloseStressModal}
+        hrvValue={hrvValue}
+        updateTime={hrvUpdateTime}
+      />
    </View>
  );
 }

 const primary = Colors.light.primary;
+const lightColors = Colors.light;
+const darkColors = Colors.dark;

 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: '#F6F7F8',
+  },
+  gradientBackground: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
  },
  safeArea: {
    flex: 1,
@@ -388,10 +428,10 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
  },
  dayPillNormal: {
-    backgroundColor: '#C8F852',
+    backgroundColor: lightColors.datePickerNormal,
  },
  dayPillSelected: {
-    backgroundColor: '#192126',
+    backgroundColor: lightColors.datePickerSelected,
  },
  dayLabel: {
    fontSize: 16,
@@ -414,7 +454,7 @@ const styles = StyleSheet.create({
    width: 8,
    height: 8,
    borderRadius: 4,
-    backgroundColor: '#192126',
+    backgroundColor: lightColors.datePickerSelected,
    marginTop: 10,
    marginBottom: 4,
    alignSelf: 'center',