feat: 更新心情记录功能及相关组件

- 在心情日历中新增心情圆环展示，显示心情强度
- 修改心情记录编辑页面，支持使用图标替代表情
- 优化心情类型配置，使用图片资源替代原有表情
- 新增多种心情图标，丰富用户选择
- 更新相关样式，提升用户体验和界面美观性
- 更新文档，详细描述新功能和使用方法

app/mood/edit.tsx

@@ -11,20 +11,21 @@ import {
   selectMoodRecordsByDate,
   updateMoodRecord
 } from '@/store/moodSlice';
+import { Ionicons } from '@expo/vector-icons';
 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,
+  Alert, Image,
   ScrollView,
   StyleSheet,
   Text,
   TextInput,
   TouchableOpacity,
-  View,
+  View
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function MoodEditScreen() {
   const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
@@ -149,11 +150,11 @@ export default function MoodEditScreen() {
         start={{ x: 0, y: 0 }}
         end={{ x: 0, y: 1 }}
       />
-      
+
       {/* 装饰性圆圈 */}
       <View style={styles.decorativeCircle1} />
       <View style={styles.decorativeCircle2} />
-      <SafeAreaView style={styles.safeArea}>
+      <SafeAreaView style={styles.safeArea} edges={['top']}>
         <HeaderBar
           title={existingMood ? '编辑心情' : '记录心情'}
           onBack={() => router.back()}
@@ -183,7 +184,7 @@ export default function MoodEditScreen() {
                   ]}
                   onPress={() => setSelectedMood(mood.type)}
                 >
-                  <Text style={styles.moodEmoji}>{mood.emoji}</Text>
+                  <Image source={mood.image} style={styles.moodImage} />
                   <Text style={styles.moodLabel}>{mood.label}</Text>
                 </TouchableOpacity>
               ))}
@@ -224,26 +225,27 @@ export default function MoodEditScreen() {
 
         {/* 底部按钮 */}
         <View style={styles.footer}>
-          {existingMood && (
+          <View style={styles.buttonRow}>
+
             <TouchableOpacity
-              style={[styles.deleteButton, isDeleting && styles.disabledButton]}
-              onPress={handleDelete}
-              disabled={isDeleting}
+              style={[styles.saveButton, (!selectedMood || isLoading) && styles.disabledButton]}
+              onPress={handleSave}
+              disabled={!selectedMood || isLoading}
             >
-              <Text style={styles.deleteButtonText}>
-                {isDeleting ? '删除中...' : '删除记录'}
+              <Text style={styles.saveButtonText}>
+                {isLoading ? '保存中...' : existingMood ? '更新心情' : '保存心情'}
               </Text>
             </TouchableOpacity>
-          )}
-          <TouchableOpacity
-            style={[styles.saveButton, (!selectedMood || isLoading) && styles.disabledButton]}
-            onPress={handleSave}
-            disabled={!selectedMood || isLoading}
-          >
-            <Text style={styles.saveButtonText}>
-              {isLoading ? '保存中...' : existingMood ? '更新心情' : '保存心情'}
-            </Text>
-          </TouchableOpacity>
+            {existingMood && (
+              <TouchableOpacity
+                style={[styles.deleteIconButton, isDeleting && styles.disabledButton]}
+                onPress={handleDelete}
+                disabled={isDeleting}
+              >
+                <Ionicons name="trash-outline" size={24} color="#f95555" />
+              </TouchableOpacity>
+            )}
+          </View>
         </View>
       </SafeAreaView>
     </View>
@@ -329,10 +331,10 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   moodOption: {
-    width: '30%',
+    width: '18%',
     alignItems: 'center',
-    paddingVertical: 20,
-    marginBottom: 16,
+    paddingVertical: 16,
+    marginBottom: 12,
     borderRadius: 16,
     backgroundColor: 'rgba(122,90,248,0.05)',
     borderWidth: 1,
@@ -348,8 +350,9 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 2,
   },
-  moodEmoji: {
-    fontSize: 28,
+  moodImage: {
+    width: 40,
+    height: 40,
     marginBottom: 10,
   },
   moodLabel: {
@@ -401,30 +404,42 @@ const styles = StyleSheet.create({
     fontWeight: '500',
   },
   footer: {
-    padding: 20,
-    backgroundColor: 'rgba(255,255,255,0.95)',
-    shadowColor: '#7a5af8',
-    shadowOffset: { width: 0, height: -4 },
-    shadowOpacity: 0.1,
-    shadowRadius: 12,
-    elevation: 6,
+    padding: 16,
+    position: 'absolute',
+    bottom: 24,
+    right: 8,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
   },
   saveButton: {
     backgroundColor: '#7a5af8',
-    borderRadius: 16,
-    paddingVertical: 18,
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
     alignItems: 'center',
-    marginTop: 12,
+    marginLeft: 12,
     shadowColor: '#7a5af8',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.2,
     shadowRadius: 4,
     elevation: 3,
   },
+  deleteIconButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 12,
+  },
   deleteButton: {
     backgroundColor: '#f95555',
-    borderRadius: 16,
-    paddingVertical: 18,
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
     alignItems: 'center',
     shadowColor: '#f95555',
     shadowOffset: { width: 0, height: 2 },
@@ -439,12 +454,12 @@ const styles = StyleSheet.create({
   },
   saveButtonText: {
     color: '#fff',
-    fontSize: 16,
-    fontWeight: '700',
+    fontSize: 14,
+    fontWeight: '600',
   },
   deleteButtonText: {
     color: '#fff',
-    fontSize: 16,
-    fontWeight: '700',
+    fontSize: 14,
+    fontWeight: '600',
   },
 });