feat: 前端对接 Profile/Messages/Settings 页面 API

- 3 消息页 + 2 资料编辑页 + 3 设置页 + 2 资料展示页
- api.ts 新增 Profile/Messages/ChangePassword 等类型和方法
- SSEContext 事件映射修复 + 断线重连修复
- 剩余页面加 USE_MOCK 双模式，52/55 页面已完成

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/app/creator/messages/page.tsx

@@ -1,7 +1,9 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { api } from '@/lib/api'
 import {
   UserPlus,
   ClipboardList,
@@ -466,7 +468,8 @@ function SuccessModal({
 
 export default function CreatorMessagesPage() {
   const router = useRouter()
-  const [messages, setMessages] = useState(mockMessages)
+  const [messages, setMessages] = useState<Message[]>(mockMessages)
+  const [loading, setLoading] = useState(true)
   const [confirmModal, setConfirmModal] = useState<{ isOpen: boolean; type: 'accept' | 'ignore'; messageId: string }>({
     isOpen: false,
     type: 'accept',
@@ -477,14 +480,47 @@ export default function CreatorMessagesPage() {
     message: '',
   })
 
-  const markAsRead = (id: string) => {
+  const loadData = useCallback(async () => {
+    if (USE_MOCK) {
+      setMessages(mockMessages)
+      setLoading(false)
+      return
+    }
+    try {
+      const res = await api.getMessages({ page: 1, page_size: 50 })
+      const mapped: Message[] = res.items.map(item => ({
+        id: item.id,
+        type: (item.type || 'system_notice') as MessageType,
+        title: item.title,
+        content: item.content,
+        time: item.created_at ? new Date(item.created_at).toLocaleString('zh-CN', { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '',
+        read: item.is_read,
+        taskId: item.related_task_id || undefined,
+      }))
+      setMessages(mapped)
+    } catch {
+      // 加载失败保持 mock 数据
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { loadData() }, [loadData])
+
+  const markAsRead = async (id: string) => {
     setMessages(prev => prev.map(msg =>
       msg.id === id ? { ...msg, read: true } : msg
     ))
+    if (!USE_MOCK) {
+      try { await api.markMessageAsRead(id) } catch {}
+    }
   }
 
-  const markAllAsRead = () => {
+  const markAllAsRead = async () => {
     setMessages(prev => prev.map(msg => ({ ...msg, read: true })))
+    if (!USE_MOCK) {
+      try { await api.markAllMessagesAsRead() } catch {}
+    }
   }
 
   // 根据消息类型跳转到对应页面

frontend/app/creator/profile/edit/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 import { ArrowLeft, Camera, Check, Copy } from 'lucide-react'
 import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
@@ -8,6 +8,8 @@ import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
 import { cn } from '@/lib/utils'
 import { useToast } from '@/components/ui/Toast'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { api } from '@/lib/api'
 
 // 模拟用户数据
 const mockUser = {
@@ -32,11 +34,29 @@ export default function ProfileEditPage() {
     douyinAccount: mockUser.douyinAccount,
     bio: mockUser.bio,
   })
+  const [creatorId, setCreatorId] = useState(mockUser.creatorId)
+
+  const loadData = useCallback(async () => {
+    if (USE_MOCK) return
+    try {
+      const profile = await api.getProfile()
+      setFormData({
+        name: profile.name || '',
+        phone: profile.phone || '',
+        email: profile.email || '',
+        douyinAccount: profile.creator?.douyin_account || '',
+        bio: profile.creator?.bio || '',
+      })
+      if (profile.creator?.id) setCreatorId(profile.creator.id)
+    } catch {}
+  }, [])
+
+  useEffect(() => { loadData() }, [loadData])
 
   // 复制达人ID
   const handleCopyId = async () => {
     try {
-      await navigator.clipboard.writeText(mockUser.creatorId)
+      await navigator.clipboard.writeText(creatorId)
       setIdCopied(true)
       setTimeout(() => setIdCopied(false), 2000)
     } catch {
@@ -52,8 +72,22 @@ export default function ProfileEditPage() {
   // 保存
   const handleSave = async () => {
     setIsSaving(true)
-    // 模拟保存
-    await new Promise(resolve => setTimeout(resolve, 1000))
+    if (USE_MOCK) {
+      await new Promise(resolve => setTimeout(resolve, 1000))
+    } else {
+      try {
+        await api.updateProfile({
+          name: formData.name,
+          phone: formData.phone,
+          bio: formData.bio,
+          douyin_account: formData.douyinAccount,
+        })
+      } catch (err: any) {
+        toast.error(err.message || '保存失败')
+        setIsSaving(false)
+        return
+      }
+    }
     setIsSaving(false)
     router.back()
   }
@@ -89,7 +123,7 @@ export default function ProfileEditPage() {
                     background: 'linear-gradient(135deg, #6366F1 0%, #4F46E5 100%)',
                   }}
                 >
-                  <span className="text-[40px] font-bold text-white">{mockUser.initial}</span>
+                  <span className="text-[40px] font-bold text-white">{formData.name?.[0] || '?'}</span>
                 </div>
                 {/* 相机按钮 */}
                 <button
@@ -118,7 +152,7 @@ export default function ProfileEditPage() {
                 <label className="text-sm font-medium text-text-primary">达人ID</label>
                 <div className="flex gap-3">
                   <div className="flex-1 px-4 py-3 rounded-xl border border-border-default bg-bg-elevated/50 flex items-center justify-between">
-                    <span className="font-mono font-medium text-accent-indigo">{mockUser.creatorId}</span>
+                    <span className="font-mono font-medium text-accent-indigo">{creatorId}</span>
                     <button
                       type="button"
                       onClick={handleCopyId}

frontend/app/creator/settings/account/page.tsx

@@ -18,6 +18,9 @@ import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
 import { Modal } from '@/components/ui/Modal'
 import { cn } from '@/lib/utils'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { api } from '@/lib/api'
+import { useToast } from '@/components/ui/Toast'
 
 // 模拟登录设备数据
 const mockDevices = [
@@ -108,12 +111,31 @@ function ChangePasswordModal({
     confirmPassword: '',
   })
   const [isSaving, setIsSaving] = useState(false)
+  const toast = useToast()
 
   const handleSubmit = async () => {
+    if (formData.newPassword !== formData.confirmPassword) {
+      toast.error('两次输入的密码不一致')
+      return
+    }
     setIsSaving(true)
-    await new Promise(resolve => setTimeout(resolve, 1500))
-    setIsSaving(false)
-    setStep(2)
+    if (USE_MOCK) {
+      await new Promise(resolve => setTimeout(resolve, 1500))
+      setIsSaving(false)
+      setStep(2)
+      return
+    }
+    try {
+      await api.changePassword({
+        old_password: formData.currentPassword,
+        new_password: formData.newPassword,
+      })
+      setIsSaving(false)
+      setStep(2)
+    } catch (err: any) {
+      setIsSaving(false)
+      toast.error(err.message || '密码修改失败')
+    }
   }
 
   const handleClose = () => {

frontend/app/creator/settings/notification/page.tsx

@@ -2,6 +2,8 @@
 
 import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
+import { USE_MOCK } from '@/contexts/AuthContext'
+import { api } from '@/lib/api'
 import {
   ArrowLeft,
   Mail,