feat(challenges): 优化挑战列表与详情页交互体验

- 替换 Image 为 expo-image 并启用缓存策略
- 调整礼物按钮尺寸与图标大小
- 加入挑战失败时弹出 Toast 提示
- 统一异步流程并移除冗余状态监听
- 清理调试日志与多余空行

app/(tabs)/challenges.tsx

@@ -9,12 +9,12 @@ import {
   selectChallengesListStatus,
   type ChallengeCardViewModel,
 } from '@/store/challengesSlice';
+import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
 import React, { useEffect } from 'react';
 import {
   ActivityIndicator,
-  Image,
   ScrollView,
   StatusBar,
   StyleSheet,
@@ -42,6 +42,9 @@ export default function ChallengesScreen() {
   const listStatus = useAppSelector(selectChallengesListStatus);
   const listError = useAppSelector(selectChallengesListError);
 
+  console.log('challenges', challenges);
+
+
   useEffect(() => {
     if (listStatus === 'idle') {
       dispatch(fetchChallenges());
@@ -124,7 +127,7 @@ export default function ChallengesScreen() {
                 end={{ x: 1, y: 1 }}
                 style={styles.giftButton}
               >
-                <IconSymbol name="gift.fill" size={22} color={colorTokens.onPrimary} />
+                <IconSymbol name="gift.fill" size={18} color={colorTokens.onPrimary} />
               </LinearGradient>
             </TouchableOpacity>
           </View>
@@ -162,7 +165,7 @@ function ChallengeCard({ challenge, surfaceColor, textColor, mutedColor, onPress
       <Image
         source={{ uri: challenge.image }}
         style={styles.cardImage}
-        resizeMode="cover"
+        cachePolicy={'memory-disk'}
       />
 
       <View style={styles.cardContent}>
@@ -252,8 +255,8 @@ const styles = StyleSheet.create({
     borderRadius: 26,
   },
   giftButton: {
-    width: 52,
+    width: 32,
-    height: 52,
+    height: 32,
     borderRadius: 26,
     alignItems: 'center',
     justifyContent: 'center',

app/challenges/[id].tsx

@@ -17,6 +17,7 @@ import {
   selectProgressError,
   selectProgressStatus,
 } from '@/store/challengesSlice';
+import { Toast } from '@/utils/toast.utils';
 import { Ionicons } from '@expo/vector-icons';
 import { BlurView } from 'expo-blur';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -82,6 +83,7 @@ export default function ChallengeDetailScreen() {
   const challengeSelector = useMemo(() => (id ? selectChallengeById(id) : undefined), [id]);
   const challenge = useAppSelector((state) => (challengeSelector ? challengeSelector(state) : undefined));
 
+
   const detailStatusSelector = useMemo(() => (id ? selectChallengeDetailStatus(id) : undefined), [id]);
   const detailStatus = useAppSelector((state) => (detailStatusSelector ? detailStatusSelector(state) : 'idle'));
   const detailErrorSelector = useMemo(() => (id ? selectChallengeDetailError(id) : undefined), [id]);
@@ -103,22 +105,22 @@ export default function ChallengeDetailScreen() {
   const progressError = useAppSelector((state) => (progressErrorSelector ? progressErrorSelector(state) : undefined));
 
   useEffect(() => {
-    if (id) {
+    const getData = async (id: string) => {
-      dispatch(fetchChallengeDetail(id));
+      try {
+        await dispatch(fetchChallengeDetail(id)).unwrap;
+      } catch (error) {
+      }
     }
+
+    if (id) {
+      getData(id);
+    }
+
   }, [dispatch, id]);
 
+
   const [showCelebration, setShowCelebration] = useState(false);
 
-  useEffect(() => {
-    setShowCelebration(false);
-  }, [id]);
-
-  useEffect(() => {
-    if (joinStatus === 'succeeded') {
-      setShowCelebration(true);
-    }
-  }, [joinStatus]);
 
   useEffect(() => {
     if (!showCelebration) {
@@ -179,11 +181,16 @@ export default function ChallengeDetailScreen() {
     }
   };
 
-  const handleJoin = () => {
+  const handleJoin = async () => {
     if (!id || joinStatus === 'loading') {
       return;
     }
-    dispatch(joinChallenge(id));
+    try {
+      await dispatch(joinChallenge(id));
+      setShowCelebration(true)
+    } catch (error) {
+      Toast.error('加入挑战失败')
+    }
   };
 
   const handleLeave = () => {

store/challengesSlice.ts

@@ -1,4 +1,3 @@
-import { createAsyncThunk, createSelector, createSlice } from '@reduxjs/toolkit';
 import {
   type ChallengeDetailDto,
   type ChallengeListItemDto,
@@ -11,6 +10,7 @@ import {
   listChallenges,
   reportChallengeProgress as reportChallengeProgressApi,
 } from '@/services/challengesApi';
+import { createAsyncThunk, createSelector, createSlice } from '@reduxjs/toolkit';
 import type { RootState } from './index';
 
 type AsyncStatus = 'idle' | 'loading' | 'succeeded' | 'failed';
@@ -81,8 +81,11 @@ export const fetchChallengeDetail = createAsyncThunk<ChallengeDetail, string, {
   'challenges/fetchDetail',
   async (id, { rejectWithValue }) => {
     try {
-      return await getChallengeDetail(id);
+      const ret = await getChallengeDetail(id);
+
+      return ret;
     } catch (error) {
+      console.log('######', error);
       return rejectWithValue(toErrorMessage(error));
     }
   }
@@ -290,6 +293,8 @@ const formatMonthDay = (input: string | undefined): string | undefined => {
 };
 
 const buildDateRangeLabel = (challenge: ChallengeEntity): string => {
+  console.log('!!!!!！', challenge);
+
   const startLabel = formatMonthDay(challenge.startAt);
   const endLabel = formatMonthDay(challenge.endAt);
   if (startLabel && endLabel) {