Add nickname. Recode route.

This commit is contained in:
2023-10-31 18:44:18 +08:00
parent 652d3f0132
commit b314a9f801
7 changed files with 64 additions and 10 deletions

View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import Icon from '@ant-design/icons' import Icon from '@ant-design/icons'
import { getLoginStatus, getUsername, logout } from '@/utils/auth' import { getLoginStatus, getNickName, logout } from '@/utils/auth'
import { getRedirectUrl } from '@/utils/common' import { getRedirectUrl } from '@/utils/common'
import { notification } from 'antd' import { notification } from 'antd'
import { COLOR_ERROR } from '@/constants/common.constants.ts' import { COLOR_ERROR } from '@/constants/common.constants.ts'
@@ -11,7 +11,7 @@ const SidebarFooter: React.FC = () => {
const location = useLocation() const location = useLocation()
const navigate = useNavigate() const navigate = useNavigate()
const [exiting, setExiting] = useState(false) const [exiting, setExiting] = useState(false)
const [username, setUsername] = useState('') const [nickName, setNickName] = useState('')
const handleClickAvatar = () => { const handleClickAvatar = () => {
if (getLoginStatus()) { if (getLoginStatus()) {
@@ -42,8 +42,8 @@ const SidebarFooter: React.FC = () => {
useEffect(() => { useEffect(() => {
if (getLoginStatus()) { if (getLoginStatus()) {
void getUsername().then((username) => { void getNickName().then((nickName) => {
setUsername(username) setNickName(nickName)
}) })
} }
}, [loginStatus]) }, [loginStatus])
@@ -60,7 +60,7 @@ const SidebarFooter: React.FC = () => {
</NavLink> </NavLink>
</span> </span>
<span hidden={!getLoginStatus()} className={'text'}> <span hidden={!getLoginStatus()} className={'text'}>
{username} {nickName}
</span> </span>
<div <div
hidden={!getLoginStatus()} hidden={!getLoginStatus()}

11
src/global.d.ts vendored
View File

@@ -12,6 +12,7 @@ interface ImportMeta {
type RouteJsonObject = { type RouteJsonObject = {
path: string path: string
absolutePath?: string
id?: string id?: string
element?: React.JSX.Element element?: React.JSX.Element
component?: React.ComponentType component?: React.ComponentType
@@ -26,6 +27,7 @@ type RouteJsonObject = {
} }
type RouteHandle = { type RouteHandle = {
absolutePath: string
name?: string name?: string
menu?: boolean menu?: boolean
auth?: boolean auth?: boolean
@@ -62,12 +64,21 @@ type UserWithInfoVo = {
lastLoginIp: string lastLoginIp: string
createTime: Date createTime: Date
updateTime: Date updateTime: Date
userInfo: UserInfoVo
modules: ModuleVo[] modules: ModuleVo[]
menus: MenuVo[] menus: MenuVo[]
elements: ElementVo[] elements: ElementVo[]
operations: OperationVo[] operations: OperationVo[]
} }
type UserInfoVo = {
id: string
userId: string
nickName: string
avatar: string
email: string
}
type ModuleVo = { type ModuleVo = {
id: number id: number
name: string name: string

View File

@@ -39,7 +39,7 @@ const Login: React.FC = () => {
description: ( description: (
<> <>
<span> <span>
<strong>{user.username}</strong> <strong>{user.userInfo.nickName}</strong>
</span> </span>
<br /> <br />
<span> <span>

View File

@@ -3,6 +3,7 @@ import React from 'react'
const home: RouteJsonObject[] = [ const home: RouteJsonObject[] = [
{ {
path: '', path: '',
absolutePath: '/',
id: 'home', id: 'home',
component: React.lazy(() => import('@/pages/home')), component: React.lazy(() => import('@/pages/home')),
name: '主页', name: '主页',
@@ -17,6 +18,7 @@ const home: RouteJsonObject[] = [
}, },
{ {
path: '/tools', path: '/tools',
absolutePath: '/tools',
id: 'url-tools', id: 'url-tools',
children: [ children: [
{ {

View File

@@ -39,17 +39,20 @@ const root: RouteJsonObject[] = [
component: React.lazy(() => import('@/AuthRoute')), component: React.lazy(() => import('@/AuthRoute')),
children: [ children: [
{ {
path: '/login', path: 'login',
absolutePath: '/login',
id: 'login', id: 'login',
component: React.lazy(() => import('@/pages/Login')) component: React.lazy(() => import('@/pages/Login'))
}, },
{ {
path: '/loading', path: 'loading',
absolutePath: '/loading',
id: 'loading', id: 'loading',
component: React.lazy(() => import('@/components/common/LoadingMask')) component: React.lazy(() => import('@/components/common/LoadingMask'))
}, },
{ {
path: '/tools', path: 'tools',
absolutePath: '/tools',
id: 'toolsFramework', id: 'toolsFramework',
component: React.lazy(() => import('@/pages/ToolsFramework')), component: React.lazy(() => import('@/pages/ToolsFramework')),
children: setTitle(tools, '氮工具'), children: setTitle(tools, '氮工具'),
@@ -57,7 +60,8 @@ const root: RouteJsonObject[] = [
auth: false auth: false
}, },
{ {
path: '/user', path: 'user',
absolutePath: '/user',
id: 'userFramework', id: 'userFramework',
component: React.lazy(() => import('@/pages/UserFramework')), component: React.lazy(() => import('@/pages/UserFramework')),
children: setTitle(user, '个人中心'), children: setTitle(user, '个人中心'),
@@ -66,6 +70,7 @@ const root: RouteJsonObject[] = [
}, },
{ {
path: '', path: '',
absolutePath: '/',
id: 'homeFramework', id: 'homeFramework',
component: React.lazy(() => import('@/pages/HomeFramework')), component: React.lazy(() => import('@/pages/HomeFramework')),
children: home children: home

View File

@@ -3,6 +3,7 @@ import React from 'react'
export const tools: RouteJsonObject[] = [ export const tools: RouteJsonObject[] = [
{ {
path: '', path: '',
absolutePath: '/tools',
id: 'tools', id: 'tools',
component: React.lazy(() => import('@/pages/tools')), component: React.lazy(() => import('@/pages/tools')),
icon: React.lazy(() => import('~icons/fatweb/home.jsx')), icon: React.lazy(() => import('~icons/fatweb/home.jsx')),
@@ -12,6 +13,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'all', path: 'all',
absolutePath: '/tools/all',
id: 'tools-all', id: 'tools-all',
component: React.lazy(() => import('@/pages/tools')), component: React.lazy(() => import('@/pages/tools')),
name: '全部工具', name: '全部工具',
@@ -22,6 +24,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation', path: 'translation',
absolutePath: '/tools/translation',
id: 'tools-translation', id: 'tools-translation',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译', name: '翻译',

View File

@@ -54,12 +54,45 @@ export const requestUserInfo = async () => {
}) })
} }
export const getNickName = async () => {
const user = await getUserInfo()
return user.userInfo.nickName
}
export const getUsername = async () => { export const getUsername = async () => {
const user = await getUserInfo() const user = await getUserInfo()
return user.username return user.username
} }
export const getPermissionPath = (): string[] => {
const s = getLocalStorage(STORAGE_USER_INFO_KEY)
if (s === null) {
return []
}
const user = JSON.parse(s) as UserWithInfoVo
const paths: string[] = []
user.menus.forEach((menu) => {
paths.join(menu.url)
})
return paths
}
export const getAuthRoute = (route: RouteJsonObject[]): RouteJsonObject[] => {
return route.map((value) => {
if (value.auth) {
value.path
}
if (value.children) {
value.children = getAuthRoute(value.children)
}
return value
})
}
export const getCaptchaSrc = () => { export const getCaptchaSrc = () => {
captcha = getCaptcha(300, 150, 4) captcha = getCaptcha(300, 150, 4)
return captcha.base64Src return captcha.base64Src