更换 UI

src/pages/MePage.jsx

@@ -1,36 +1,49 @@
 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() {
-    if (!confirm('确定退出登录?')) return
+    const confirmed = window.confirm('确定退出登录?')
+    if (!confirmed) return
     await logout()
+    Toast.show({ icon: 'success', content: '已退出' })
     navigate('/login', { replace: true })
   }
 
   return (
-    <div>
-      <div className="me-header">
+    <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>
-      <div className="me-list">
-        <div className="list-item">
-          <span className="label">用户 ID</span>
-          <span className="value">#{user?.id}</span>
-        </div>
-        <div className="list-item">
-          <span className="label">注册时间</span>
-          <span className="value">{user?.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}</span>
-        </div>
-        <div className="list-item" onClick={onLogout} role="button" style={{ cursor: 'pointer' }}>
-          <span className="label danger">退出登录</span>
-          <span className="value">›</span>
-        </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>
   )
-}
+}