From c74e7433dd47e732ad1e4c6897a168b3e5945ae4 Mon Sep 17 00:00:00 2001 From: dark Date: Sun, 28 Apr 2024 22:14:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=B7=AF=E7=94=B1=E5=8A=A8?= =?UTF-8?q?=E6=80=81=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 - src/components/page-loading/index.tsx | 2 +- src/pages/dashboard/index.tsx | 4 +- src/routes.tsx | 456 ++++++++++++++++------------------ 4 files changed, 217 insertions(+), 247 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 5a9062b..7a9ff3b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -32,8 +32,6 @@ function App() { return } - console.log('app render', data) - return ( { return ( <> - +
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 13c3967..697cde6 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -1,5 +1,5 @@ import { ProCard } from '@ant-design/pro-components' -import { createFileRoute, createLazyFileRoute } from '@tanstack/react-router' +import { createFileRoute } from '@tanstack/react-router' const Index = () => { @@ -19,7 +19,7 @@ const Index = () => { ) } -export const Route = createLazyFileRoute('/dashboard')({ +export const Route = createFileRoute('/dashboard')({ component: Index, }) export default Index \ No newline at end of file diff --git a/src/routes.tsx b/src/routes.tsx index 20d67d1..3078702 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -5,20 +5,19 @@ import FetchLoading from '@/components/loading/FetchLoading.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 ListPageLayout from '@/layout/ListPageLayout.tsx' +// import { Route as DashboardImport } from '@/pages/dashboard' import { Route as LoginRouteImport } from '@/pages/login' import { generateUUID } from '@/utils/uuid.ts' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { - AnyRoute, - createLazyRoute, - createRootRouteWithContext, - createRoute, - createRouter, - Outlet, - redirect, - RouterProvider, + AnyRoute, + createRootRouteWithContext, + createRoute, + createRouter, lazyRouteComponent, + Outlet, + redirect, + RouterProvider, } from '@tanstack/react-router' import { TanStackRouterDevtools } from '@tanstack/router-devtools' import { memo } from 'react' @@ -28,288 +27,261 @@ import { DevTools } from 'jotai-devtools' export const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retry: false, + defaultOptions: { + queries: { + retry: false, + } } - } }) const rootRoute = createRootRouteWithContext()({ - component: () => ( - -
- - - - -
- ), - beforeLoad: ({ location }) => { - if (location.pathname === '/') { - return redirect({ to: '/dashboard' }) - } - }, - loader: () => { + component: () => ( + +
+ + + + +
+ ), + beforeLoad: ({ location }) => { + if (location.pathname === '/') { + return redirect({ to: '/dashboard' }) + } + }, + loader: () => { - }, - notFoundComponent: NotFound, - pendingComponent: PageLoading, - errorComponent: ({ error }) => , + }, + notFoundComponent: NotFound, + pendingComponent: PageLoading, + errorComponent: ({ error }) => , }) const emptyRoute = createRoute({ - getParentRoute: () => rootRoute, - id: '/_empty', - component: EmptyLayout, + getParentRoute: () => rootRoute, + id: '/_empty', + component: EmptyLayout, }) const authRoute = AuthenticatedImport.update({ - getParentRoute: () => rootRoute, - id: '/_authenticated', + getParentRoute: () => rootRoute, + id: '/_authenticated', } as any) const layoutNormalRoute = createRoute({ - getParentRoute: () => rootRoute, - id: '/_normal_layout', - component: RootLayout, + getParentRoute: () => rootRoute, + id: '/_normal_layout', + component: RootLayout, }) const layoutAuthRoute = createRoute({ - getParentRoute: () => authRoute, - id: '/_auth_layout', - component: RootLayout, + getParentRoute: () => authRoute, + id: '/_auth_layout', + component: RootLayout, }) const notAuthRoute = createRoute({ - getParentRoute: () => layoutNormalRoute, - path: '/not-auth', - component: NotPermission + getParentRoute: () => layoutNormalRoute, + path: '/not-auth', + component: NotPermission }) // const dashboardRoute = DashboardImport.update({ -// path: '/dashboard', -// getParentRoute: () => layoutAuthRoute, +// path: '/dashboard', +// getParentRoute: () => layoutAuthRoute, // } as any) const loginRoute = LoginRouteImport.update({ - path: '/login', - getParentRoute: () => emptyRoute, + path: '/login', + getParentRoute: () => emptyRoute, } as any) - -const menusRoute = createRoute({ - getParentRoute: () => layoutAuthRoute, - path: '/system/menus', -}).lazy(async () => await import('@/pages/system/menus').then(d => d.Route)) - -const departmentsRoute = createRoute({ - getParentRoute: () => layoutAuthRoute, - path: '/system/departments', -}).lazy(async () => await import('@/pages/system/departments').then(d => d.Route)) - -const usersRoute = createRoute({ - getParentRoute: () => layoutAuthRoute, - path: '/system/users', -}).lazy(async () => await import('@/pages/system/users').then(d => d.Route)) - -const rolesRoute = createRoute({ - getParentRoute: () => layoutAuthRoute, - path: '/system/roles', -}).lazy(async () => await import('@/pages/system/roles').then(d => d.Route)) +// +// const menusRoute = createRoute({ +// getParentRoute: () => layoutAuthRoute, +// path: '/system/menus', +// }).lazy(async () => await import('@/pages/system/menus').then(d => d.Route)) +// +// const departmentsRoute = createRoute({ +// getParentRoute: () => layoutAuthRoute, +// path: '/system/departments', +// }).lazy(async () => await import('@/pages/system/departments').then(d => d.Route)) +// +// const usersRoute = createRoute({ +// getParentRoute: () => layoutAuthRoute, +// path: '/system/users', +// }).lazy(async () => await import('@/pages/system/users').then(d => d.Route)) +// +// const rolesRoute = createRoute({ +// getParentRoute: () => layoutAuthRoute, +// path: '/system/roles', +// }).lazy(async () => await import('@/pages/system/roles').then(d => d.Route)) declare module '@tanstack/react-router' { - 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': { - preLoaderRoute: typeof LoginRouteImport - parentRoute: typeof rootRoute - }, - '/system/menus': { - preLoaderRoute: typeof menusRoute - parentRoute: typeof layoutAuthRoute - }, - '/system/departments': { - preLoaderRoute: typeof departmentsRoute - parentRoute: typeof layoutAuthRoute - }, - '/system/users': { - preLoaderRoute: typeof usersRoute - parentRoute: typeof layoutAuthRoute - }, - '/system/roles': { - preLoaderRoute: typeof rolesRoute - parentRoute: typeof layoutAuthRoute - }, - '/welcome': { - preLoaderRoute: typeof rootRoute - parentRoute: typeof layoutAuthRoute - }, - } + 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': { + preLoaderRoute: typeof LoginRouteImport + parentRoute: typeof rootRoute + }, + // '/system/menus': { + // preLoaderRoute: typeof menusRoute + // parentRoute: typeof layoutAuthRoute + // }, + // '/system/departments': { + // preLoaderRoute: typeof departmentsRoute + // parentRoute: typeof layoutAuthRoute + // }, + // '/system/users': { + // preLoaderRoute: typeof usersRoute + // parentRoute: typeof layoutAuthRoute + // }, + // '/system/roles': { + // preLoaderRoute: typeof rolesRoute + // parentRoute: typeof layoutAuthRoute + // }, + '/welcome': { + preLoaderRoute: typeof rootRoute + parentRoute: typeof layoutAuthRoute + }, + } } export const generateDynamicRoutes = (menuData: MenuItem[], parentRoute: AnyRoute) => { - // 递归生成路由，如果有routes则递归生成子路由 - - const generateRoutes = (menu: MenuItem, parentRoute: AnyRoute) => { - console.log('gen route', menu) - const path = menu.path?.replace(parentRoute.options?.path, '') - const isLayout = menu.children && menu.children.length > 0 && menu.type === 'menu' - - if (isLayout && (!menu.path || !menu.component)) { - //没有component的layout，直接返回 - console.log('no-page') - return createRoute({ - getParentRoute: () => layoutAuthRoute, - id: `/layout-no-path-${generateUUID()}`, - component: RootLayout, - }) - } - - // @ts-ignore 添加menu属性，方便后面获取 - const options = { - getParentRoute: () => parentRoute, - menu, - } as any - - if (isLayout) { - options.id = path ?? `/layout-${generateUUID()}` - } else { - if (!path) { - console.log(`${menu.name}没有设置视图`) - } else { - options.path = path - } - } - - console.log('gen route', options) + // 递归生成路由，如果有routes则递归生成子路由 + + const generateRoutes = (menu: MenuItem, parentRoute: AnyRoute) => { + const path = menu.path?.replace(parentRoute.options?.path, '') + const isLayout = menu.children && menu.children.length > 0 && menu.type === 'menu' + + if (isLayout && (!menu.path || !menu.component)) { + //没有component的layout，直接返回 + return createRoute({ + getParentRoute: () => layoutAuthRoute, + id: `/layout-no-path-${generateUUID()}`, + component: EmptyLayout, + }) + } - //删除掉parentRoute的path，避免重复 - const route = createRoute(options).lazy(async () => { + // @ts-ignore 添加menu属性，方便后面获取 + const options = { + getParentRoute: () => parentRoute, + menu, + } as any + + if (isLayout) { + options.id = path ?? `/layout-${generateUUID()}` + } else { + if (!path) { + console.log(`${menu.name}没有设置视图`) + } else { + options.path = path + } + } - // @ts-ignore 获取route中的menu属性 - const menu = route.options.menu as MenuItem - let component = menu.component + let component = menu.component + // menu.type + // 1,组件(页面)，2，IFrame，3，外链接，4，按钮 + if (menu.type === 'iframe') { + component = '@/components/Iframe' + } - // menu.type - // 1,组件(页面)，2，IFrame，3，外链接，4，按钮 - if (menu.type === 'iframe') { - component = '@/components/Iframe' - } + //处理component路径 + component = component.replace(/^\/pages/, '') + component = component.replace(/^\//, '') - if (!component) { - return createLazyRoute(options.path)({ - component: () =>
404 Not Found
+ return createRoute({ + ...options, + component: lazyRouteComponent(() => import(`./pages/${component}`)), + notFoundComponent: NotFound, }) - } - - //处理component路径 - component = component.replace(/^\/pages/, '') - component = component.replace(/^\//, '') - - console.log('load', `/pages/${component}`) - /* @vite-ignore */ - const d = await import(`/pages/${component}`) - if (d.Route) { - console.log(d.Route) - return d.Route - } - if (d.GenRoute) { - return d.GenRoute(options.path) - } - return createLazyRoute(options.path)({ - component: d.default || d - }) - }) - - return route - } - - // 对menuData递归生成路由，只处理type =1 的菜单 - const did = (menus: MenuItem[], parentRoute: AnyRoute) => { - return menus.filter((item) => item.type === 'menu').map((item, index) => { - // 如果有children则递归生成子路由，同样只处理type =1 的菜单 - const route = generateRoutes(item, parentRoute) + } - // console.log(route) - if (item.children && item.children.length > 0) { - const children = did(item.children, route) - if (children.length > 0) { - route.addChildren(children) - } - } - route.init({ originalIndex: index }) - return route - }) - } + // 对menuData递归生成路由，只处理type =1 的菜单 + const did = (menus: MenuItem[], parentRoute: AnyRoute) => { + return menus.filter((item) => item.type === 'menu').map((item, index) => { + // 如果有children则递归生成子路由，同样只处理type =1 的菜单 + const route = generateRoutes(item, parentRoute) + + // console.log(route) + if (item.children && item.children.length > 0) { + const children = did(item.children, route) + if (children.length > 0) { + route.addChildren(children) + } + } + route.init({ originalIndex: index }) + return route + }) + } - const routes = did(menuData, parentRoute) + const routes = did(menuData, parentRoute) - parentRoute.addChildren(routes) + parentRoute.addChildren(routes) } const routeTree = rootRoute.addChildren( - [ - //非Layout - loginRoute, - emptyRoute, - - //不带权限Layout - layoutNormalRoute.addChildren([ - notAuthRoute, - ]), - - //带权限Layout - // dashboardRoute, - authRoute.addChildren( - [ - layoutAuthRoute - /*.addChildren( - [ - menusRoute, - departmentsRoute, - usersRoute, - rolesRoute, - ] - ),*/ - ]), - ] + [ + //非Layout + loginRoute, + emptyRoute, + + //不带权限Layout + layoutNormalRoute.addChildren([ + notAuthRoute, + ]), + + //带权限Layout + // dashboardRoute, + authRoute.addChildren( + [ + layoutAuthRoute + /*.addChildren( + [ + menusRoute, + departmentsRoute, + usersRoute, + rolesRoute, + ] + ),*/ + ]), + ] ) export const RootProvider = memo((props: { context: Partial }) => { - generateDynamicRoutes(props.context.menuData ?? [], layoutAuthRoute) + generateDynamicRoutes(props.context.menuData ?? [], layoutAuthRoute) - const router = createRouter({ - routeTree, - context: { queryClient, menuData: [] }, - defaultPreload: 'intent' - }) + const router = createRouter({ + routeTree, + context: { queryClient, menuData: [] }, + defaultPreload: 'intent' + }) - return ( - - - - ) + return ( + + + + ) }) \ No newline at end of file