|
@ -1,19 +1,27 @@ |
|
|
|
|
|
import NotPermission from '@/components/error/403.tsx' |
|
|
|
|
|
import NotFound from '@/components/error/404.tsx' |
|
|
|
|
|
import ErrorPage from '@/components/error/error.tsx' |
|
|
|
|
|
import PageLoading from '@/components/page-loading' |
|
|
|
|
|
import { Route as AuthenticatedImport } from '@/layout/_authenticated.tsx' |
|
|
|
|
|
import EmptyLayout from '@/layout/EmptyLayout.tsx' |
|
|
|
|
|
import ListPageLayout from '@/layout/ListPageLayout.tsx' |
|
|
|
|
|
import { Route as DashboardImport } from '@/pages/dashboard' |
|
|
|
|
|
import { Route as LoginRouteImport } from '@/pages/login' |
|
|
|
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query' |
|
|
import { |
|
|
import { |
|
|
createRouter, |
|
|
|
|
|
|
|
|
AnyRoute, |
|
|
|
|
|
createLazyRoute, |
|
|
|
|
|
createRootRouteWithContext, |
|
|
createRoute, |
|
|
createRoute, |
|
|
RouterProvider, AnyRoute, redirect, createRootRouteWithContext, createLazyRoute, Outlet, |
|
|
|
|
|
|
|
|
createRouter, |
|
|
|
|
|
Outlet, |
|
|
|
|
|
redirect, |
|
|
|
|
|
RouterProvider, |
|
|
} from '@tanstack/react-router' |
|
|
} from '@tanstack/react-router' |
|
|
import { TanStackRouterDevtools } from '@tanstack/router-devtools' |
|
|
import { TanStackRouterDevtools } from '@tanstack/router-devtools' |
|
|
|
|
|
import { memo } from 'react' |
|
|
import RootLayout from './layout/RootLayout' |
|
|
import RootLayout from './layout/RootLayout' |
|
|
import ListPageLayout from '@/layout/ListPageLayout.tsx' |
|
|
|
|
|
import { Route as LoginRouteImport } from '@/pages/login' |
|
|
|
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query' |
|
|
|
|
|
import { useAtomValue } from 'jotai' |
|
|
|
|
|
|
|
|
|
|
|
import { IRootContext, MenuItem } from './types' |
|
|
import { IRootContext, MenuItem } from './types' |
|
|
import { appAtom, menuDataAtom } from './store/system.ts' |
|
|
|
|
|
import { useAtom } from 'jotai/index' |
|
|
|
|
|
import EmptyLayout from '@/layout/EmptyLayout.tsx' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export const queryClient = new QueryClient({ |
|
|
export const queryClient = new QueryClient({ |
|
@ -34,75 +42,119 @@ const rootRoute = createRootRouteWithContext<IRootContext>()({ |
|
|
), |
|
|
), |
|
|
beforeLoad: ({ location }) => { |
|
|
beforeLoad: ({ location }) => { |
|
|
if (location.pathname === '/') { |
|
|
if (location.pathname === '/') { |
|
|
return redirect({ to: '/welcome' }) |
|
|
|
|
|
|
|
|
return redirect({ to: '/dashboard' }) |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
notFoundComponent: () => <div>404 Not Found</div>, |
|
|
|
|
|
|
|
|
notFoundComponent: NotFound, |
|
|
|
|
|
pendingComponent: PageLoading, |
|
|
|
|
|
errorComponent: ({ error }) => <ErrorPage error={error}/>, |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
const emptyRoute = createRoute({ |
|
|
const emptyRoute = createRoute({ |
|
|
getParentRoute: () => rootRoute, |
|
|
getParentRoute: () => rootRoute, |
|
|
id: '/empty', |
|
|
|
|
|
|
|
|
id: '/_empty', |
|
|
component: EmptyLayout, |
|
|
component: EmptyLayout, |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
const layoutRoute = createRoute({ |
|
|
|
|
|
|
|
|
const authRoute = AuthenticatedImport.update({ |
|
|
getParentRoute: () => rootRoute, |
|
|
getParentRoute: () => rootRoute, |
|
|
id: '/layout', |
|
|
|
|
|
|
|
|
id: '/_authenticated', |
|
|
|
|
|
} as any) |
|
|
|
|
|
|
|
|
|
|
|
const layoutNormalRoute = createRoute({ |
|
|
|
|
|
getParentRoute: () => rootRoute, |
|
|
|
|
|
id: '/_normal_layout', |
|
|
|
|
|
component: RootLayout, |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const layoutAuthRoute = createRoute({ |
|
|
|
|
|
getParentRoute: () => authRoute, |
|
|
|
|
|
id: '/_auth_layout', |
|
|
component: RootLayout, |
|
|
component: RootLayout, |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const notAuthRoute = createRoute({ |
|
|
|
|
|
getParentRoute: () => layoutNormalRoute, |
|
|
|
|
|
path: '/not-auth', |
|
|
|
|
|
component: NotPermission |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const dashboardRoute = DashboardImport.update({ |
|
|
|
|
|
path: '/dashboard', |
|
|
|
|
|
getParentRoute: () => layoutAuthRoute, |
|
|
|
|
|
} as any) |
|
|
|
|
|
|
|
|
const loginRoute = LoginRouteImport.update({ |
|
|
const loginRoute = LoginRouteImport.update({ |
|
|
path: '/login', |
|
|
path: '/login', |
|
|
getParentRoute: () => emptyRoute, |
|
|
getParentRoute: () => emptyRoute, |
|
|
} as any) |
|
|
} as any) |
|
|
|
|
|
|
|
|
const menusRoute = createRoute({ |
|
|
const menusRoute = createRoute({ |
|
|
getParentRoute: () => layoutRoute, |
|
|
|
|
|
|
|
|
getParentRoute: () => layoutAuthRoute, |
|
|
path: '/system/menus', |
|
|
path: '/system/menus', |
|
|
}).lazy(async () => await import('@/pages/system/menus').then(d => d.Route)) |
|
|
}).lazy(async () => await import('@/pages/system/menus').then(d => d.Route)) |
|
|
|
|
|
|
|
|
const departmentsRoute = createRoute({ |
|
|
const departmentsRoute = createRoute({ |
|
|
getParentRoute: () => layoutRoute, |
|
|
|
|
|
|
|
|
getParentRoute: () => layoutAuthRoute, |
|
|
path: '/system/departments', |
|
|
path: '/system/departments', |
|
|
}).lazy(async () => await import('@/pages/system/departments').then(d => d.Route)) |
|
|
}).lazy(async () => await import('@/pages/system/departments').then(d => d.Route)) |
|
|
|
|
|
|
|
|
const usersRoute = createRoute({ |
|
|
const usersRoute = createRoute({ |
|
|
getParentRoute: () => layoutRoute, |
|
|
|
|
|
|
|
|
getParentRoute: () => layoutAuthRoute, |
|
|
path: '/system/users', |
|
|
path: '/system/users', |
|
|
}).lazy(async () => await import('@/pages/system/users').then(d => d.Route)) |
|
|
}).lazy(async () => await import('@/pages/system/users').then(d => d.Route)) |
|
|
|
|
|
|
|
|
const rolesRoute = createRoute({ |
|
|
const rolesRoute = createRoute({ |
|
|
getParentRoute: () => layoutRoute, |
|
|
|
|
|
|
|
|
getParentRoute: () => layoutAuthRoute, |
|
|
path: '/system/roles', |
|
|
path: '/system/roles', |
|
|
}).lazy(async () => await import('@/pages/system/roles').then(d => d.Route)) |
|
|
}).lazy(async () => await import('@/pages/system/roles').then(d => d.Route)) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
declare module '@tanstack/react-router' { |
|
|
declare module '@tanstack/react-router' { |
|
|
interface FileRoutesByPath { |
|
|
interface FileRoutesByPath { |
|
|
|
|
|
'/_authenticated': { |
|
|
|
|
|
preLoaderRoute: typeof AuthenticatedImport |
|
|
|
|
|
parentRoute: typeof rootRoute |
|
|
|
|
|
}, |
|
|
|
|
|
'/_normal_layout': { |
|
|
|
|
|
preLoaderRoute: typeof layoutNormalRoute |
|
|
|
|
|
parentRoute: typeof rootRoute |
|
|
|
|
|
}, |
|
|
|
|
|
'/_layout': { |
|
|
|
|
|
preLoaderRoute: typeof layoutAuthRoute |
|
|
|
|
|
parentRoute: typeof rootRoute |
|
|
|
|
|
}, |
|
|
|
|
|
'/': { |
|
|
|
|
|
preLoaderRoute: typeof DashboardImport |
|
|
|
|
|
parentRoute: typeof layoutAuthRoute |
|
|
|
|
|
}, |
|
|
|
|
|
'/dashboard': { |
|
|
|
|
|
preLoaderRoute: typeof DashboardImport |
|
|
|
|
|
parentRoute: typeof layoutAuthRoute |
|
|
|
|
|
}, |
|
|
'/login': { |
|
|
'/login': { |
|
|
preLoaderRoute: typeof LoginRouteImport |
|
|
preLoaderRoute: typeof LoginRouteImport |
|
|
parentRoute: typeof rootRoute |
|
|
parentRoute: typeof rootRoute |
|
|
}, |
|
|
}, |
|
|
'/system/menus': { |
|
|
'/system/menus': { |
|
|
preLoaderRoute: typeof menusRoute |
|
|
preLoaderRoute: typeof menusRoute |
|
|
parentRoute: typeof layoutRoute |
|
|
|
|
|
|
|
|
parentRoute: typeof layoutAuthRoute |
|
|
}, |
|
|
}, |
|
|
'/system/departments': { |
|
|
'/system/departments': { |
|
|
preLoaderRoute: typeof departmentsRoute |
|
|
preLoaderRoute: typeof departmentsRoute |
|
|
parentRoute: typeof layoutRoute |
|
|
|
|
|
|
|
|
parentRoute: typeof layoutAuthRoute |
|
|
}, |
|
|
}, |
|
|
'/system/users': { |
|
|
'/system/users': { |
|
|
preLoaderRoute: typeof usersRoute |
|
|
preLoaderRoute: typeof usersRoute |
|
|
parentRoute: typeof layoutRoute |
|
|
|
|
|
|
|
|
parentRoute: typeof layoutAuthRoute |
|
|
}, |
|
|
}, |
|
|
'/system/roles': { |
|
|
'/system/roles': { |
|
|
preLoaderRoute: typeof rolesRoute |
|
|
preLoaderRoute: typeof rolesRoute |
|
|
parentRoute: typeof layoutRoute |
|
|
|
|
|
|
|
|
parentRoute: typeof layoutAuthRoute |
|
|
}, |
|
|
}, |
|
|
'/welcome': { |
|
|
'/welcome': { |
|
|
preLoaderRoute: typeof rootRoute |
|
|
preLoaderRoute: typeof rootRoute |
|
|
parentRoute: typeof layoutRoute |
|
|
|
|
|
|
|
|
parentRoute: typeof layoutAuthRoute |
|
|
}, |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@ -110,9 +162,20 @@ declare module '@tanstack/react-router' { |
|
|
|
|
|
|
|
|
const routeTree = rootRoute.addChildren( |
|
|
const routeTree = rootRoute.addChildren( |
|
|
[ |
|
|
[ |
|
|
|
|
|
//非Layout
|
|
|
loginRoute, |
|
|
loginRoute, |
|
|
emptyRoute, |
|
|
emptyRoute, |
|
|
layoutRoute.addChildren( |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//不带权限Layout
|
|
|
|
|
|
layoutNormalRoute.addChildren([ |
|
|
|
|
|
notAuthRoute, |
|
|
|
|
|
]), |
|
|
|
|
|
|
|
|
|
|
|
//带权限Layout
|
|
|
|
|
|
dashboardRoute, |
|
|
|
|
|
authRoute.addChildren( |
|
|
|
|
|
[ |
|
|
|
|
|
layoutAuthRoute.addChildren( |
|
|
[ |
|
|
[ |
|
|
menusRoute, |
|
|
menusRoute, |
|
|
departmentsRoute, |
|
|
departmentsRoute, |
|
@ -121,6 +184,8 @@ const routeTree = rootRoute.addChildren( |
|
|
] |
|
|
] |
|
|
), |
|
|
), |
|
|
] |
|
|
] |
|
|
|
|
|
) |
|
|
|
|
|
] |
|
|
) |
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -207,33 +272,15 @@ export const generateDynamicRoutes = (menuData: MenuItem[]) => { |
|
|
|
|
|
|
|
|
const router = createRouter({ |
|
|
const router = createRouter({ |
|
|
routeTree, |
|
|
routeTree, |
|
|
context: { queryClient, menuData: undefined }, |
|
|
|
|
|
|
|
|
context: { queryClient, menuData: [] }, |
|
|
defaultPreload: 'intent' |
|
|
defaultPreload: 'intent' |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
export const RootProvider = () => { |
|
|
|
|
|
|
|
|
|
|
|
const [ , ] = useAtom(appAtom) |
|
|
|
|
|
const { data, isError, isPending } = useAtomValue(menuDataAtom) |
|
|
|
|
|
|
|
|
|
|
|
if (isError) { |
|
|
|
|
|
return <div>Error</div> |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (isPending) { |
|
|
|
|
|
return <div>Loading...</div> |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
router.update({ |
|
|
|
|
|
context: { |
|
|
|
|
|
queryClient, |
|
|
|
|
|
menuData: data, |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
export const RootProvider = memo((props: { context: Partial<IRootContext> }) => { |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<QueryClientProvider client={queryClient}> |
|
|
<QueryClientProvider client={queryClient}> |
|
|
<RouterProvider router={router}/> |
|
|
|
|
|
|
|
|
<RouterProvider router={router} context={{ ...props.context, queryClient }}/> |
|
|
</QueryClientProvider> |
|
|
</QueryClientProvider> |
|
|
) |
|
|
) |
|
|
} |
|
|
|
|
|
|
|
|
}) |