feat: 集成后台任务管理功能及相关组件

- 新增后台任务管理器，支持任务的注册、执行和状态监控
- 实现自定义Hook，简化后台任务的使用和管理
- 添加示例任务，包括数据同步、健康数据更新和通知检查等
- 更新文档，详细描述后台任务系统的实现和使用方法
- 优化相关组件，确保用户体验和界面一致性

app/mood/edit.tsx

@@ -1,28 +1,29 @@
+import MoodIntensitySlider from '@/components/MoodIntensitySlider';
 import { HeaderBar } from '@/components/ui/HeaderBar';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { getMoodOptions, MoodType } from '@/services/moodCheckins';
 import {
-    createMoodRecord,
-    deleteMoodRecord,
-    fetchDailyMoodCheckins,
-    selectMoodRecordsByDate,
-    updateMoodRecord
+  createMoodRecord,
+  deleteMoodRecord,
+  fetchDailyMoodCheckins,
+  selectMoodRecordsByDate,
+  updateMoodRecord
 } from '@/store/moodSlice';
 import dayjs from 'dayjs';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router, useLocalSearchParams } from 'expo-router';
 import React, { useEffect, useState } from 'react';
 import {
-    Alert,
-    SafeAreaView,
-    ScrollView,
-    StyleSheet,
-    Text,
-    TextInput,
-    TouchableOpacity,
-    View,
+  Alert,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
 } from 'react-native';
 
 export default function MoodEditScreen() {
@@ -133,28 +134,8 @@ export default function MoodEditScreen() {
     );
   };
 
-  const renderIntensitySlider = () => {
-    return (
-      <View style={styles.intensityContainer}>
-        <Text style={styles.intensityLabel}>心情强度: {intensity}</Text>
-        <View style={styles.intensitySlider}>
-          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((level) => (
-            <TouchableOpacity
-              key={level}
-              style={[
-                styles.intensityDot,
-                intensity >= level && styles.intensityDotActive
-              ]}
-              onPress={() => setIntensity(level)}
-            />
-          ))}
-        </View>
-        <View style={styles.intensityLabels}>
-          <Text style={styles.intensityLabelText}>轻微</Text>
-          <Text style={styles.intensityLabelText}>强烈</Text>
-        </View>
-      </View>
-    );
+  const handleIntensityChange = (value: number) => {
+    setIntensity(value);
   };
 
   // 使用统一的渐变背景色
@@ -210,12 +191,17 @@ export default function MoodEditScreen() {
           </View>
 
           {/* 心情强度选择 */}
-          {selectedMood && (
-            <View style={styles.intensitySection}>
-              <Text style={styles.sectionTitle}>心情强度</Text>
-              {renderIntensitySlider()}
-            </View>
-          )}
+          <View style={styles.intensitySection}>
+            <Text style={styles.sectionTitle}>心情强度</Text>
+            <MoodIntensitySlider
+              value={intensity}
+              onValueChange={handleIntensityChange}
+              min={1}
+              max={10}
+              width={320}
+            />
+          </View>
+
 
           {/* 心情描述 */}
           {selectedMood && (
@@ -383,50 +369,7 @@ const styles = StyleSheet.create({
     shadowRadius: 12,
     elevation: 6,
   },
-  intensityContainer: {
-    alignItems: 'center',
-  },
-  intensityLabel: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#192126',
-    marginBottom: 16,
-  },
-  intensitySlider: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%',
-    marginBottom: 12,
-    paddingHorizontal: 10,
-  },
-  intensityDot: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: 'rgba(122,90,248,0.1)',
-    borderWidth: 2,
-    borderColor: 'rgba(122,90,248,0.2)',
-  },
-  intensityDotActive: {
-    backgroundColor: '#7a5af8',
-    borderColor: '#7a5af8',
-    shadowColor: '#7a5af8',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  intensityLabels: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%',
-    paddingHorizontal: 10,
-  },
-  intensityLabelText: {
-    fontSize: 13,
-    color: '#5d6676',
-    fontWeight: '500',
-  },
+
   descriptionSection: {
     backgroundColor: 'rgba(255,255,255,0.95)',
     margin: 16,