feat(auth): 为未登录用户添加登录引导界面

为目标页面、营养记录、食物添加等功能添加登录状态检查和引导界面，确保用户在未登录状态下能够获得清晰的登录提示和指引。 - 在目标页面添加精美的未登录引导界面，包含渐变背景和登录按钮 - 为食物记录相关组件添加登录状态检查，未登录时自动跳转登录页面 - 重构血氧饱和度卡片为独立数据获取，移除对外部数据依赖 - 移除个人页面的实验性SwiftUI组件，统一使用原生TouchableOpacity - 清理统计页面和营养记录页面的冗余代码和未使用变量
2025-09-19 15:52:24 +08:00
parent ccfccca7bc
commit 9bcea25a2f
10 changed files with 220 additions and 194 deletions
--- a/app/(tabs)/goals.tsx
+++ b/app/(tabs)/goals.tsx
@@ -109,6 +109,8 @@ export default function GoalsScreen() {
  const onRefresh = async () => {
    setRefreshing(true);
    try {
+      if (!isLoggedIn) return
+
      await loadTasks();
    } finally {
      setRefreshing(false);
@@ -117,6 +119,8 @@ export default function GoalsScreen() {

  // 加载更多任务
  const handleLoadMoreTasks = async () => {
+    if (!isLoggedIn) return
+
    if (tasksPagination.hasMore && !tasksLoading) {
      try {
        await dispatch(loadMoreTasks()).unwrap();
@@ -319,6 +323,61 @@ export default function GoalsScreen() {

  // 渲染空状态
  const renderEmptyState = () => {
+    // 未登录状态下的引导
+    if (!isLoggedIn) {
+      return (
+        <View style={styles.emptyStateLogin}>
+          <LinearGradient
+            colors={['#F0F9FF', '#FEFEFE', '#F0F9FF']}
+            style={styles.emptyStateLoginBackground}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+          />
+
+          <View style={styles.emptyStateLoginContent}>
+            {/* 清新的图标设计 */}
+            <View style={styles.emptyStateLoginIconContainer}>
+              <LinearGradient
+                colors={[colorTokens.primary, '#9B8AFB']}
+                style={styles.emptyStateLoginIconGradient}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 1 }}
+              >
+                <MaterialIcons name="person-outline" size={32} color="#FFFFFF" />
+              </LinearGradient>
+            </View>
+
+            {/* 主标题 */}
+            <Text style={[styles.emptyStateLoginTitle, { color: colorTokens.text }]}>
+              开启您的健康之旅
+            </Text>
+
+            {/* 副标题 */}
+            <Text style={[styles.emptyStateLoginSubtitle, { color: colorTokens.textSecondary }]}>
+              登录后即可创建个人目标，让我们一起建立健康的生活习惯
+            </Text>
+
+            {/* 登录按钮 */}
+            <TouchableOpacity
+              style={[styles.emptyStateLoginButton, { backgroundColor: colorTokens.primary }]}
+              onPress={() => pushIfAuthedElseLogin('/goals')}
+            >
+              <LinearGradient
+                colors={[colorTokens.primary, '#9B8AFB']}
+                style={styles.emptyStateLoginButtonGradient}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 1 }}
+              >
+                <Text style={styles.emptyStateLoginButtonText}>立即登录</Text>
+                <MaterialIcons name="arrow-forward" size={18} color="#FFFFFF" />
+              </LinearGradient>
+            </TouchableOpacity>
+          </View>
+        </View>
+      );
+    }
+
+    // 已登录但无任务的状态
    let title = '暂无任务';
    let subtitle = '创建目标后，系统会自动生成相应的任务';

@@ -710,6 +769,80 @@ const styles = StyleSheet.create({
    textAlign: 'center',
    lineHeight: 20,
  },
+  // 未登录空状态样式
+  emptyStateLogin: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+    paddingVertical: 80,
+    position: 'relative',
+  },
+  emptyStateLoginBackground: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    borderRadius: 24,
+  },
+  emptyStateLoginContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1,
+  },
+  emptyStateLoginIconContainer: {
+    marginBottom: 24,
+    shadowColor: '#7A5AF8',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.15,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+  emptyStateLoginIconGradient: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyStateLoginTitle: {
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 12,
+    textAlign: 'center',
+    letterSpacing: -0.5,
+  },
+  emptyStateLoginSubtitle: {
+    fontSize: 16,
+    lineHeight: 24,
+    textAlign: 'center',
+    marginBottom: 32,
+    paddingHorizontal: 8,
+  },
+  emptyStateLoginButton: {
+    borderRadius: 28,
+    shadowColor: '#7A5AF8',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 12,
+    elevation: 6,
+  },
+  emptyStateLoginButtonGradient: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 28,
+    gap: 8,
+  },
+  emptyStateLoginButtonText: {
+    color: '#FFFFFF',
+    fontSize: 17,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+  },
  loadMoreContainer: {
    alignItems: 'center',
    paddingVertical: 20,
--- a/app/(tabs)/personal.tsx
+++ b/app/(tabs)/personal.tsx
@@ -9,8 +9,6 @@ import { DEFAULT_MEMBER_NAME, fetchActivityHistory, fetchMyProfile } from '@/sto
 import { getItem, setItem } from '@/utils/kvStore';
 import { log } from '@/utils/logger';
 import { getNotificationEnabled, setNotificationEnabled as saveNotificationEnabled } from '@/utils/userPreferences';
-import { Button, Host, Text as SwiftText } from '@expo/ui/swift-ui';
-import { frame, glassEffect } from '@expo/ui/swift-ui/modifiers';
 import { Ionicons } from '@expo/vector-icons';
 import { useFocusEffect } from '@react-navigation/native';
 import { isLiquidGlassAvailable } from 'expo-glass-effect';
@@ -215,32 +213,9 @@ export default function PersonalScreen() {
            <Text style={styles.userName}>{displayName}</Text>
          </TouchableOpacity>
        </View>
-        {isLgAvaliable ? <Host style={{
-          marginRight: 18,
-        }}>
-          <Button
-            variant='default'
-            onPress={() => {
-              pushIfAuthedElseLogin('/profile/edit')
-            }}
-            modifiers={[
-              frame({
-                width: 60,
-                height: 30,
-              }),
-              glassEffect({
-                glass: {
-                  variant: 'regular',
-                  interactive: true
-                }
-              })
-            ]} >
-            <SwiftText size={14} color='black' weight={'medium'}>{isLoggedIn ? '编辑' : '登录'}</SwiftText>
-          </Button>
-        </Host> : <TouchableOpacity style={styles.editButton} onPress={() => pushIfAuthedElseLogin('/profile/edit')}>
+        <TouchableOpacity style={styles.editButton} onPress={() => pushIfAuthedElseLogin('/profile/edit')}>
          <Text style={styles.editButtonText}>{isLoggedIn ? '编辑' : '登录'}</Text>
-        </TouchableOpacity>}
-
+        </TouchableOpacity>

      </View>

--- a/app/(tabs)/statistics.tsx
+++ b/app/(tabs)/statistics.tsx
@@ -20,7 +20,6 @@ import { fetchTodayWaterStats } from '@/store/waterSlice';
 import { getMonthDaysZh, getTodayIndexInMonth } from '@/utils/date';
 import { fetchHealthDataForDate, testHRVDataFetch } from '@/utils/health';
 import { getTestHealthData } from '@/utils/mockHealthData';
-import { calculateNutritionGoals } from '@/utils/nutrition';
 import dayjs from 'dayjs';
 import { LinearGradient } from 'expo-linear-gradient';
 import { debounce } from 'lodash';
@@ -92,8 +91,6 @@ export default function ExploreScreen() {
  const activeCalories = useMockData ? (mockData?.activeEnergyBurned ?? null) : (healthData?.activeEnergyBurned ?? null);
  const basalMetabolism: number | null = useMockData ? (mockData?.basalEnergyBurned ?? null) : (healthData?.basalEnergyBurned ?? null);

-  const oxygenSaturation = useMockData ? (mockData?.oxygenSaturation ?? null) : (healthData?.oxygenSaturation ?? null);
-


  // 用于触发动画重置的 token（当日期或数据变化时更新）
@@ -102,15 +99,6 @@ export default function ExploreScreen() {
  // 从 Redux 获取营养数据
  const nutritionSummary = useAppSelector(selectNutritionSummaryByDate(currentSelectedDateString));

-  // 计算用户的营养目标
-  const nutritionGoals = useMemo(() => {
-    return calculateNutritionGoals({
-      weight: userProfile.weight,
-      height: userProfile.height,
-      birthDate: userProfile?.birthDate ? new Date(userProfile?.birthDate) : undefined,
-      gender: userProfile?.gender || undefined,
-    });
-  }, [userProfile]);

  // 心情相关状态
  const dispatch = useAppDispatch();
@@ -226,13 +214,6 @@ export default function ExploreScreen() {
      loadingRef.current.health = true;
      console.log('=== 开始HealthKit初始化流程 ===');

-      // const ok = await ensureHealthPermissions();
-      // if (!ok) {
-      //   const errorMsg = '无法获取健康权限，请确保在真实iOS设备上运行并授权应用访问健康数据';
-      //   console.warn(errorMsg);
-      //   return;
-      // }
-
      latestRequestKeyRef.current = requestKey;

      console.log('权限获取成功，开始获取健康数据...', derivedDate);
@@ -251,7 +232,6 @@ export default function ExploreScreen() {
            activeCalories: data.activeEnergyBurned,
            basalEnergyBurned: data.basalEnergyBurned,
            hrv: data.hrv,
-            oxygenSaturation: data.oxygenSaturation,
            heartRate: data.heartRate,
            activeEnergyBurned: data.activeEnergyBurned,
            activeCaloriesGoal: data.activeCaloriesGoal,
@@ -358,14 +338,6 @@ export default function ExploreScreen() {
    loadAllData(currentSelectedDate);
  }, [])

-  // 页面聚焦时的数据加载逻辑
-  // useFocusEffect(
-  //   React.useCallback(() => {
-  //     // 页面聚焦时加载数据，使用缓存机制避免频繁请求
-  //     console.log('页面聚焦，检查是否需要刷新数据...');
-  //     loadAllData(currentSelectedDate);
-  //   }, [loadAllData, currentSelectedDate])
-  // );

  // AppState 监听：应用从后台返回前台时的处理
  useEffect(() => {
@@ -487,16 +459,10 @@ export default function ExploreScreen() {
        {/* 营养摄入雷达图卡片 */}
        <NutritionRadarCard
          nutritionSummary={nutritionSummary}
-          nutritionGoals={nutritionGoals}
          burnedCalories={(basalMetabolism || 0) + (activeCalories || 0)}
          basalMetabolism={basalMetabolism || 0}
          activeCalories={activeCalories || 0}
          resetToken={animToken}
-          onMealPress={(mealType: 'breakfast' | 'lunch' | 'dinner' | 'snack') => {
-            console.log('选择餐次:', mealType);
-            // 这里可以导航到营养记录页面
-            pushIfAuthedElseLogin('/nutrition/records');
-          }}
        />

        <WeightHistoryCard />
@@ -575,9 +541,7 @@ export default function ExploreScreen() {
            {/* 血氧饱和度卡片 */}
            <FloatingCard style={styles.masonryCard} delay={1750}>
              <OxygenSaturationCard
-                resetToken={animToken}
                style={styles.basalMetabolismCardOverride}
-                oxygenSaturation={oxygenSaturation}
              />
            </FloatingCard>

--- a/app/nutrition/records.tsx
+++ b/app/nutrition/records.tsx
@@ -300,42 +300,6 @@ export default function NutritionRecordsScreen() {
    });
  };

-  // 渲染视图模式切换器
-  const renderViewModeToggle = () => (
-    <View style={[styles.viewModeContainer, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
-      <Text style={[styles.monthTitle, { color: colorTokens.text }]}>{monthTitle}</Text>
-      <View style={[styles.toggleContainer, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
-        <TouchableOpacity
-          style={[
-            styles.toggleButton,
-            viewMode === 'daily' && { backgroundColor: colorTokens.primary }
-          ]}
-          onPress={() => setViewMode('daily')}
-        >
-          <Text style={[
-            styles.toggleText,
-            { color: viewMode === 'daily' ? colorTokens.onPrimary : colorTokens.textSecondary }
-          ]}>
-            按天查看
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={[
-            styles.toggleButton,
-            viewMode === 'all' && { backgroundColor: colorTokens.primary }
-          ]}
-          onPress={() => setViewMode('all')}
-        >
-          <Text style={[
-            styles.toggleText,
-            { color: viewMode === 'all' ? colorTokens.onPrimary : colorTokens.textSecondary }
-          ]}>
-            全部记录
-          </Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );

  // 渲染日期选择器（仅在按天查看模式下显示）
  const renderDateSelector = () => {