feat: 更新心情相关页面和组件

- 在心情统计、日历和编辑页面中引入 HeaderBar 组件，提升界面一致性和用户体验
- 移除冗余的头部视图代码，简化组件结构
- 更新心情日历和编辑页面的样式，使用新的颜色常量，增强视觉效果
- 优化心情统计页面的加载状态显示，提升用户交互体验

app/mood/calendar.tsx

@@ -1,3 +1,4 @@
+import { HeaderBar } from '@/components/ui/HeaderBar';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { useMoodData } from '@/hooks/useMoodData';
@@ -200,13 +201,13 @@ export default function MoodCalendarScreen() {
         end={{ x: 0, y: 1 }}
       />
       <SafeAreaView style={styles.safeArea}>
-        <View style={styles.header}>
-          <TouchableOpacity onPress={() => router.back()}>
-            <Text style={styles.backButton}>←</Text>
-          </TouchableOpacity>
-          <Text style={styles.headerTitle}>心情日历</Text>
-          <View style={styles.headerSpacer} />
-        </View>
+        <HeaderBar
+          title="心情日历"
+          onBack={() => router.back()}
+          withSafeTop={false}
+          transparent={true}
+          tone="light"
+        />
 
         <ScrollView style={styles.content}>
           {/* 日历视图 */}
@@ -347,27 +348,7 @@ const styles = StyleSheet.create({
   safeArea: {
     flex: 1,
   },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingVertical: 16,
-  },
-  backButton: {
-    fontSize: 24,
-    color: '#666',
-  },
-  headerTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#333',
-    flex: 1,
-    textAlign: 'center',
-  },
-  headerSpacer: {
-    width: 24,
-  },
+
   content: {
     flex: 1,
   },
@@ -430,11 +411,11 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
   dayButtonSelected: {
-    backgroundColor: '#4CAF50',
+    backgroundColor: Colors.light.accentGreen,
   },
   dayButtonToday: {
     borderWidth: 2,
-    borderColor: '#4CAF50',
+    borderColor: Colors.light.accentGreen,
   },
   dayContent: {
     position: 'relative',
@@ -456,7 +437,7 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
   dayNumberToday: {
-    color: '#4CAF50',
+    color: Colors.light.accentGreen,
     fontWeight: '600',
   },
   dayNumberDisabled: {
@@ -520,7 +501,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     height: 32,
     borderRadius: 16,
-    backgroundColor: '#4CAF50',
+    backgroundColor: Colors.light.accentGreen,
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -538,7 +519,7 @@ const styles = StyleSheet.create({
     width: 48,
     height: 48,
     borderRadius: 24,
-    backgroundColor: '#4CAF50',
+    backgroundColor: Colors.light.accentGreen,
     justifyContent: 'center',
     alignItems: 'center',
     marginRight: 12,

app/mood/edit.tsx

@@ -1,3 +1,4 @@
+import { HeaderBar } from '@/components/ui/HeaderBar';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -168,15 +169,13 @@ export default function MoodEditScreen() {
         end={{ x: 0, y: 1 }}
       />
       <SafeAreaView style={styles.safeArea}>
-        <View style={styles.header}>
-          <TouchableOpacity onPress={() => router.back()}>
-            <Text style={styles.backButton}>←</Text>
-          </TouchableOpacity>
-          <Text style={styles.headerTitle}>
-            {existingMood ? '编辑心情' : '记录心情'}
-          </Text>
-          <View style={styles.headerSpacer} />
-        </View>
+        <HeaderBar
+          title={existingMood ? '编辑心情' : '记录心情'}
+          onBack={() => router.back()}
+          withSafeTop={false}
+          transparent={true}
+          tone="light"
+        />
 
         <ScrollView style={styles.content}>
           {/* 日期显示 */}
@@ -274,27 +273,7 @@ const styles = StyleSheet.create({
   safeArea: {
     flex: 1,
   },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingVertical: 16,
-  },
-  backButton: {
-    fontSize: 24,
-    color: '#666',
-  },
-  headerTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#333',
-    flex: 1,
-    textAlign: 'center',
-  },
-  headerSpacer: {
-    width: 24,
-  },
+
   content: {
     flex: 1,
   },
@@ -339,7 +318,7 @@ const styles = StyleSheet.create({
   selectedMoodOption: {
     backgroundColor: '#e8f5e8',
     borderWidth: 2,
-    borderColor: '#4CAF50',
+    borderColor: Colors.light.accentGreen,
   },
   moodEmoji: {
     fontSize: 24,
@@ -378,7 +357,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#ddd',
   },
   intensityDotActive: {
-    backgroundColor: '#4CAF50',
+    backgroundColor: Colors.light.accentGreen,
   },
   intensityLabels: {
     flexDirection: 'row',
@@ -416,7 +395,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
   saveButton: {
-    backgroundColor: '#4CAF50',
+    backgroundColor: Colors.light.accentGreen,
     borderRadius: 12,
     paddingVertical: 16,
     alignItems: 'center',