+
+
+
-
-
-
0
-
学习时长（小时）
+
+
{user.favorites.length}
+
收藏
+
+
+
+
+
+
+
+
+
+
+
+
+
{user.points || 0}
+
积分
diff --git a/src/pages/User/CenterNew.tsx b/src/pages/User/CenterNew.tsx
new file mode 100644
index 0000000..90eed3f
--- /dev/null
+++ b/src/pages/User/CenterNew.tsx
@@ -0,0 +1,729 @@
+/**
+ * 用户中心页（重构版）
+ * 包含：个人资料、修改密码、用户统计、浏览历史
+ */
+
+import React, { useEffect, useState } from 'react'
+import {
+ Tabs, Card, Avatar, Button, Form, Input, Select, DatePicker,
+ message, Modal, Statistic, Row, Col, List, Empty, Tag, Space, Divider,
+ Upload
+} from 'antd'
+import {
+ UserOutlined,
+ EditOutlined,
+ LockOutlined,
+ EyeOutlined,
+ LikeOutlined,
+ StarOutlined,
+ CommentOutlined,
+ CalendarOutlined,
+ HistoryOutlined,
+ MailOutlined,
+ PhoneOutlined,
+ ManOutlined,
+ WomanOutlined,
+ QuestionCircleOutlined,
+ CameraOutlined,
+ LoadingOutlined,
+} from '@ant-design/icons'
+import type { UploadChangeParam, UploadFile } from 'antd/es/upload/interface'
+import { Link, useNavigate } from 'react-router-dom'
+import dayjs from 'dayjs'
+import { getToken, removeToken } from '@/utils/request'
+import CustomPagination from '@components/CustomPagination'
+import { useUserStore } from '@/store/useUserStore'
+import {
+ getUserProfile,
+ updateUserProfile,
+ updateUserPassword,
+ getUserStats,
+ getViewHistory,
+ uploadAvatar,
+} from '@services/userApi'
+import type {
+ UserProfile,
+ UserProfileUpdateParams,
+ UserStats,
+ ViewHistoryItem,
+ ViewHistoryTargetType,
+} from '@/types'
+import './Center.css'
+
+const { TabPane } = Tabs
+const { Option } = Select
+
+// 性别选项
+const genderOptions = [
+ { label: '未知', value: 0, icon:
},
+ { label: '男', value: 1, icon:
},
+ { label: '女', value: 2, icon:
},
+]
+
+// 浏览历史类型映射
+const historyTypeLabels: Record
= {
+ heritage: '非遗项目',
+ inheritor: '传承人',
+ news: '资讯',
+ event: '活动',
+}
+
+const historyTypeColors: Record = {
+ heritage: 'red',
+ inheritor: 'blue',
+ news: 'green',
+ event: 'orange',
+}
+
+const UserCenterNew: React.FC = () => {
+ const navigate = useNavigate()
+ const [profileForm] = Form.useForm()
+ const [passwordForm] = Form.useForm()
+
+ // 获取Zustand store的updateUser方法
+ const { updateUser } = useUserStore()
+
+ // 状态管理
+ const [activeTab, setActiveTab] = useState('profile')
+ const [profile, setProfile] = useState(null)
+ const [stats, setStats] = useState(null)
+ const [viewHistory, setViewHistory] = useState([])
+ const [historyTotal, setHistoryTotal] = useState(0)
+ const [historyPage, setHistoryPage] = useState(1)
+ const [historyPageSize] = useState(10)
+ const [historyType, setHistoryType] = useState('')
+
+ const [loading, setLoading] = useState(false)
+ const [profileEditing, setProfileEditing] = useState(false)
+ const [passwordModalVisible, setPasswordModalVisible] = useState(false)
+ const [passwordSubmitting, setPasswordSubmitting] = useState(false)
+ const [avatarUploading, setAvatarUploading] = useState(false)
+
+ useEffect(() => {
+ // 检查登录状态
+ const token = getToken()
+ if (!token) {
+ message.warning('请先登录')
+ navigate('/login')
+ return
+ }
+
+ fetchUserProfile()
+ fetchUserStats()
+ }, [])
+
+ useEffect(() => {
+ if (activeTab === 'history') {
+ fetchViewHistory()
+ }
+ }, [activeTab, historyPage, historyType])
+
+ // 获取个人资料
+ const fetchUserProfile = async () => {
+ setLoading(true)
+ try {
+ const data = await getUserProfile()
+ setProfile(data)
+
+ // 设置表单初始值
+ profileForm.setFieldsValue({
+ nickname: data.nickname,
+ email: data.email,
+ phone: data.phone,
+ gender: data.gender,
+ birthday: data.birthday ? dayjs(data.birthday) : null,
+ province: data.province,
+ city: data.city,
+ })
+ } catch (error: any) {
+ message.error(error.message || '获取个人资料失败')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ // 获取用户统计
+ const fetchUserStats = async () => {
+ try {
+ const data = await getUserStats()
+ setStats(data)
+ } catch (error: any) {
+ console.error('获取统计信息失败:', error)
+ }
+ }
+
+ // 获取浏览历史
+ const fetchViewHistory = async () => {
+ setLoading(true)
+ try {
+ const result = await getViewHistory({
+ pageNum: historyPage,
+ pageSize: historyPageSize,
+ targetType: historyType || undefined,
+ })
+ setViewHistory(result.records)
+ setHistoryTotal(result.total)
+ } catch (error: any) {
+ message.error(error.message || '获取浏览历史失败')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ // 修改个人资料
+ const handleUpdateProfile = async () => {
+ try {
+ const values = await profileForm.validateFields()
+ setLoading(true)
+
+ const params: UserProfileUpdateParams = {
+ nickname: values.nickname,
+ email: values.email,
+ phone: values.phone,
+ gender: values.gender,
+ birthday: values.birthday ? values.birthday.format('YYYY-MM-DD') : undefined,
+ province: values.province,
+ city: values.city,
+ }
+
+ await updateUserProfile(params)
+ message.success('个人资料修改成功')
+ setProfileEditing(false)
+
+ // 刷新资料
+ await fetchUserProfile()
+
+ // 🔥 关键: 同步更新Zustand store,使Header实时更新
+ // 特别是昵称的更新
+ updateUser({
+ nickname: values.nickname,
+ email: values.email,
+ phone: values.phone,
+ })
+ } catch (error: any) {
+ if (error.errorFields) {
+ // 表单验证错误
+ return
+ }
+ message.error(error.message || '修改失败')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ // 上传头像前的校验
+ const beforeUpload = (file: File) => {
+ // 校验文件类型
+ const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
+ if (!isImage) {
+ message.error('只能上传 JPG/PNG/GIF 格式的图片!')
+ return false
+ }
+
+ // 校验文件大小 (2MB)
+ const isLt2M = file.size / 1024 / 1024 < 2
+ if (!isLt2M) {
+ message.error('图片大小不能超过 2MB!')
+ return false
+ }
+
+ return true
+ }
+
+ // 处理头像上传
+ const handleAvatarChange = async (info: UploadChangeParam) => {
+ if (info.file.status === 'uploading') {
+ setAvatarUploading(true)
+ return
+ }
+
+ if (info.file.status === 'done') {
+ // 上传成功,获取返回的头像URL
+ const avatarUrl = info.file.response
+
+ if (avatarUrl && profile) {
+ // 更新本地状态
+ setProfile({ ...profile, avatar: avatarUrl })
+
+ // 🔥 关键: 同步更新Zustand store,使Header实时更新
+ updateUser({ avatar: avatarUrl })
+
+ message.success('头像上传成功!')
+ }
+
+ setAvatarUploading(false)
+ } else if (info.file.status === 'error') {
+ setAvatarUploading(false)
+ message.error('头像上传失败,请重试')
+ }
+ }
+
+ // 自定义上传请求
+ const customUploadRequest = async (options: any) => {
+ const { file, onSuccess, onError } = options
+
+ try {
+ const avatarUrl = await uploadAvatar(file)
+ onSuccess(avatarUrl)
+ } catch (error: any) {
+ console.error('上传失败:', error)
+ onError(error)
+ }
+ }
+
+ // 修改密码
+ const handleUpdatePassword = async () => {
+ try {
+ const values = await passwordForm.validateFields()
+
+ if (values.newPassword !== values.confirmPassword) {
+ message.error('两次输入的新密码不一致')
+ return
+ }
+
+ setPasswordSubmitting(true)
+
+ await updateUserPassword({
+ oldPassword: values.oldPassword,
+ newPassword: values.newPassword,
+ confirmPassword: values.confirmPassword,
+ })
+
+ message.success('密码修改成功，请重新登录')
+ passwordForm.resetFields()
+ setPasswordModalVisible(false)
+
+ // 清除token，跳转登录页
+ removeToken()
+ setTimeout(() => {
+ navigate('/login')
+ }, 1500)
+ } catch (error: any) {
+ if (error.errorFields) {
+ return
+ }
+ message.error(error.message || '密码修改失败')
+ } finally {
+ setPasswordSubmitting(false)
+ }
+ }
+
+ // 渲染浏览历史项
+ const renderHistoryItem = (item: ViewHistoryItem) => {
+ const getLink = () => {
+ switch (item.targetType) {
+ case 'heritage':
+ return `/heritage/${item.targetId}`
+ case 'inheritor':
+ return `/inheritor/${item.targetId}`
+ case 'news':
+ return `/news/${item.targetId}`
+ case 'event':
+ return `/events/${item.targetId}`
+ default:
+ return '#'
+ }
+ }
+
+ return (
+
+ )
+ }
+ >
+
+
+ {historyTypeLabels[item.targetType]}
+
+
+ {item.targetTitle}
+
+
+ }
+ description={
+
+
+ {item.targetDescription}
+
+
+ 浏览时间：{dayjs(item.viewTime).format('YYYY-MM-DD HH:mm')}
+
+
+ }
+ />
+
+ )
+ }
+
+ if (!profile) {
+ return (
+
+
+
+ )
+ }
+
+ return (
+
+ {/* 封面背景 */}
+
+
+ {/* 个人信息概览 */}
+
+
+
+
+ {/* 头像上传组件 */}
+
+ {avatarUploading ? (
+
+
+
+ ) : (
+
+
}
+ style={{ flexShrink: 0 }}
+ />
+
+
+
+
+
+
+ {profile.nickname}
+
+
+
+ @{profile.username}
+
+ {profile.email && (
+
+ {profile.email}
+
+ )}
+ {profile.phone && (
+
+ {profile.phone}
+
+ )}
+
+
+
}
+ onClick={() => setPasswordModalVisible(true)}
+ >
+ 修改密码
+
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+
+ )}
+
+
+
+
+ {/* 详细信息区 */}
+
+
+
+ {/* 个人资料 */}
+ 个人资料} key="profile">
+ }
+ onClick={() => {
+ if (profileEditing) {
+ profileForm.resetFields()
+ }
+ setProfileEditing(!profileEditing)
+ }}
+ >
+ {profileEditing ? '取消编辑' : '编辑资料'}
+
+ }
+ >
+
+
+
+
+
+ 注册时间：{dayjs(profile.createTime).format('YYYY-MM-DD HH:mm')}
+
+
+
+
+ {/* 浏览历史 */}
+ 浏览历史} key="history">
+
+
+ 筛选类型：
+
+
+
+
}}
+ />
+
+ {/* 自定义分页 */}
+ {viewHistory.length > 0 && (
+ {
+ setHistoryPage(page)
+ }}
+ />
+ )}
+
+
+
+
+
+
+ {/* 修改密码弹窗 */}
+
{
+ setPasswordModalVisible(false)
+ passwordForm.resetFields()
+ }}
+ confirmLoading={passwordSubmitting}
+ okText="确认修改"
+ cancelText="取消"
+ width={480}
+ >
+
+
+