50 lines
1.6 KiB
React
50 lines
1.6 KiB
React
import { useNavigate } from 'react-router-dom'
|
|
import { Avatar, List, NavBar, Toast } from 'antd-mobile'
|
|
import { useAuth } from '../auth/AuthContext.jsx'
|
|
|
|
// 我的页: 顶部 NavBar + 用户头像卡片 + 信息列表
|
|
// 使用 antd-mobile: NavBar / List / Avatar / Toast
|
|
export default function MePage() {
|
|
const { user, logout } = useAuth()
|
|
const navigate = useNavigate()
|
|
|
|
async function onLogout() {
|
|
const confirmed = window.confirm('确定退出登录?')
|
|
if (!confirmed) return
|
|
await logout()
|
|
Toast.show({ icon: 'success', content: '已退出' })
|
|
navigate('/login', { replace: true })
|
|
}
|
|
|
|
return (
|
|
<div className="me-page">
|
|
<NavBar back={null} className="me-navbar">我的</NavBar>
|
|
<div className="me-profile">
|
|
<Avatar
|
|
className="me-avatar"
|
|
src={user?.avatar}
|
|
style={{ '--size': '64px', '--border-radius': '50%' }}
|
|
>
|
|
{(user?.name || '?').slice(0, 1).toUpperCase()}
|
|
</Avatar>
|
|
<div className="me-name">{user?.name || '用户'}</div>
|
|
<div className="me-email">{user?.email}</div>
|
|
</div>
|
|
<List className="me-list" mode="card">
|
|
<List.Item extra={'#' + (user?.id || '-')}>用户 ID</List.Item>
|
|
<List.Item extra={user?.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}>
|
|
注册时间
|
|
</List.Item>
|
|
<List.Item
|
|
onClick={onLogout}
|
|
clickable
|
|
arrowIcon={false}
|
|
className="me-logout"
|
|
>
|
|
退出登录
|
|
</List.Item>
|
|
</List>
|
|
</div>
|
|
)
|
|
}
|