人生轨迹功能模块补充

course-web/src/components/UserMenu.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useStoreData } from '../hooks/useStoreData';
 import { Store } from '../utils/store';
+import { userApi } from '../api/user';
 import { User, Settings, LogOut, X, Edit2 } from 'lucide-react';
 import { GlassCard } from './ui/GlassCard';
 import { Button } from './ui/Button';
@@ -155,23 +156,44 @@ function EditProfileModal({ onClose, userProfile }) {
     gender: userProfile.gender || 'secret'
   });
   const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState('');
 
-  const handleSave = () => {
+  const handleSave = async () => {
     setIsSaving(true);
+    setError('');
     
-    // 更新用户资料
-    Store.updateProfile({
+    const updatedProfile = {
       nickname: formData.nickname,
       mbti: formData.mbti,
       zodiac: formData.zodiac,
       hobbies: formData.hobbies.split(',').map(s => s.trim()).filter(s => s),
       gender: formData.gender
-    });
+    };
+
+    try {
+      // 1. 更新本地 Store
+      Store.updateProfile(updatedProfile);
+
+      // 2. 同步到后端
+      const currentProfile = await userApi.getCurrentUser();
+      if (currentProfile.data && currentProfile.data.id) {
+        await userApi.updateUserProfile({
+          id: currentProfile.data.id,
+          nickname: updatedProfile.nickname,
+          mbti: updatedProfile.mbti,
+          zodiac: updatedProfile.zodiac,
+          hobbies: JSON.stringify(updatedProfile.hobbies),
+          gender: updatedProfile.gender
+        });
+      }
 
-    setTimeout(() => {
-      setIsSaving(false);
       onClose();
-    }, 300);
+    } catch (e) {
+      console.error('保存资料失败:', e);
+      setError(e.response?.data?.message || '保存失败，请重试');
+    } finally {
+      setIsSaving(false);
+    }
   };
 
   return (
@@ -255,6 +277,13 @@ function EditProfileModal({ onClose, userProfile }) {
               <option value="female">女</option>
             </select>
           </div>
+
+          {/* 错误提示 */}
+          {error && (
+            <div className="p-3 rounded-xl bg-red-500/10 border border-red-500/20 text-red-200 text-sm">
+              {error}
+            </div>
+          )}
         </div>
 
         {/* 操作按钮 */}