51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { View, Text } from '@tarojs/components'
|
|
import { useAppDispatch, useAppSelector } from '@/store/hooks'
|
|
import { clearAuth } from '@/store/authSlice'
|
|
import { Navbar } from '@/components/navbar'
|
|
import { ListRow, ListRowGroup } from '@/components/list-row'
|
|
import { getUserInfo, type UserInfo } from '@/api/user'
|
|
import { useToast } from '@/hooks/useToast'
|
|
import { reLaunch, navigateTo } from '@/utils/navigation'
|
|
import { ROUTES } from '@/constants/routes'
|
|
import styles from './index.module.scss'
|
|
|
|
export default function Mine() {
|
|
const dispatch = useAppDispatch()
|
|
const toast = useToast()
|
|
const auth = useAppSelector((s) => s.auth)
|
|
const [user, setUser] = useState<UserInfo | null>(null)
|
|
|
|
useEffect(() => {
|
|
getUserInfo().then(setUser).catch(() => toast.error('加载用户失败'))
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
const logout = () => {
|
|
dispatch(clearAuth())
|
|
reLaunch(ROUTES.LOGIN)
|
|
}
|
|
|
|
return (
|
|
<View className={styles.page}>
|
|
<Navbar title="个人中心" autoBack={false} variant="hero" />
|
|
<View className={styles.header}>
|
|
<View className={styles.avatar}>
|
|
<Text className={styles.avatarText}>{user?.name?.[0] ?? '?'}</Text>
|
|
</View>
|
|
<View className={styles.headerInfo}>
|
|
<Text className={styles.name}>{user?.name ?? '加载中...'}</Text>
|
|
<Text className={styles.uid}>{auth.userId ? `ID: ${auth.userId}` : ''}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View className={styles.menuCard}>
|
|
<ListRowGroup>
|
|
<ListRow label="添加设备" arrow onClick={() => navigateTo(ROUTES.DEVICE_ADD)} />
|
|
<ListRow label="退出登录" arrow danger onClick={logout} />
|
|
</ListRowGroup>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|