Complete main UI #37
@@ -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
11
src/global.d.ts
vendored
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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: '翻译',
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user