create-project-template-cli 1.0.1 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/README.md +112 -5
  2. package/index.js +133 -133
  3. package/package.json +9 -4
  4. package/template/react-shadcn/.husky/commit-msg +4 -4
  5. package/template/react-shadcn/.stylelintignore +19 -19
  6. package/template/react-shadcn/.stylelintrc.cjs +258 -258
  7. package/template/react-shadcn/.vscode/extensions.json +7 -7
  8. package/template/react-shadcn/README.md +75 -75
  9. package/template/react-shadcn/commitlint.config.cjs +90 -90
  10. package/template/react-shadcn/components.json +22 -22
  11. package/template/react-shadcn/eslint.config.js +58 -58
  12. package/template/react-shadcn/index.html +13 -13
  13. package/template/react-shadcn/lint-staged.config.cjs +4 -4
  14. package/template/react-shadcn/package.json +62 -62
  15. package/template/react-shadcn/pnpm-lock.yaml +4514 -4514
  16. package/template/react-shadcn/src/App.css +23 -23
  17. package/template/react-shadcn/src/App.tsx +20 -20
  18. package/template/react-shadcn/src/assets/css/tailwindcss.css +120 -120
  19. package/template/react-shadcn/src/components/ui/button.tsx +58 -58
  20. package/template/react-shadcn/src/components/ui/card.tsx +92 -92
  21. package/template/react-shadcn/src/components/ui/input.tsx +21 -21
  22. package/template/react-shadcn/src/components/ui/label.tsx +22 -22
  23. package/template/react-shadcn/src/components/ui/navigation-menu.tsx +168 -168
  24. package/template/react-shadcn/src/lib/utils.ts +6 -6
  25. package/template/react-shadcn/src/main.tsx +11 -11
  26. package/template/react-shadcn/src/router/index.tsx +71 -71
  27. package/template/react-shadcn/src/views/404/index.scss +133 -133
  28. package/template/react-shadcn/src/views/404/index.tsx +26 -26
  29. package/template/react-shadcn/src/views/Index/index.tsx +7 -7
  30. package/template/react-shadcn/src/views/index.tsx +58 -58
  31. package/template/react-shadcn/tsconfig.app.json +33 -33
  32. package/template/react-shadcn/tsconfig.json +13 -13
  33. package/template/react-shadcn/tsconfig.node.json +32 -32
  34. package/template/react-shadcn/vite.config.ts +36 -36
  35. package/template/vue-tailwindcss/src/axios/index.ts +1 -1
  36. package/utils.js +73 -73
  37. package/template/react-shadcn/.gitignore +0 -24
  38. package/template/vue-tailwindcss/.gitignore +0 -30
@@ -1,21 +1,21 @@
1
- import * as React from "react"
2
-
3
- import { cn } from "@/lib/utils"
4
-
5
- function Input({ className, type, ...props }: React.ComponentProps<"input">) {
6
- return (
7
- <input
8
- type={type}
9
- data-slot="input"
10
- className={cn(
11
- "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12
- "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13
- "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14
- className
15
- )}
16
- {...props}
17
- />
18
- )
19
- }
20
-
21
- export { Input }
1
+ import * as React from "react"
2
+
3
+ import { cn } from "@/lib/utils"
4
+
5
+ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
6
+ return (
7
+ <input
8
+ type={type}
9
+ data-slot="input"
10
+ className={cn(
11
+ "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12
+ "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13
+ "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14
+ className
15
+ )}
16
+ {...props}
17
+ />
18
+ )
19
+ }
20
+
21
+ export { Input }
@@ -1,22 +1,22 @@
1
- import * as React from "react";
2
- import * as LabelPrimitive from "@radix-ui/react-label";
3
-
4
- import { cn } from "@/lib/utils";
5
-
6
- function Label({
7
- className,
8
- ...props
9
- }: React.ComponentProps<typeof LabelPrimitive.Root>) {
10
- return (
11
- <LabelPrimitive.Root
12
- data-slot="label"
13
- className={cn(
14
- "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
15
- className
16
- )}
17
- {...props}
18
- />
19
- );
20
- }
21
-
22
- export { Label };
1
+ import * as React from "react";
2
+ import * as LabelPrimitive from "@radix-ui/react-label";
3
+
4
+ import { cn } from "@/lib/utils";
5
+
6
+ function Label({
7
+ className,
8
+ ...props
9
+ }: React.ComponentProps<typeof LabelPrimitive.Root>) {
10
+ return (
11
+ <LabelPrimitive.Root
12
+ data-slot="label"
13
+ className={cn(
14
+ "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
15
+ className
16
+ )}
17
+ {...props}
18
+ />
19
+ );
20
+ }
21
+
22
+ export { Label };
@@ -1,168 +1,168 @@
1
- import * as React from "react";
2
- import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
3
- import { cva } from "class-variance-authority";
4
- import { ChevronDownIcon } from "lucide-react";
5
-
6
- import { cn } from "@/lib/utils";
7
-
8
- function NavigationMenu({
9
- className,
10
- children,
11
- viewport = true,
12
- ...props
13
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
14
- viewport?: boolean
15
- }) {
16
- return (
17
- <NavigationMenuPrimitive.Root
18
- data-slot="navigation-menu"
19
- data-viewport={viewport}
20
- className={cn(
21
- "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
22
- className
23
- )}
24
- {...props}
25
- >
26
- {children}
27
- {viewport && <NavigationMenuViewport />}
28
- </NavigationMenuPrimitive.Root>
29
- );
30
- }
31
-
32
- function NavigationMenuList({
33
- className,
34
- ...props
35
- }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
36
- return (
37
- <NavigationMenuPrimitive.List
38
- data-slot="navigation-menu-list"
39
- className={cn(
40
- "group flex flex-1 list-none items-center justify-center gap-1",
41
- className
42
- )}
43
- {...props}
44
- />
45
- );
46
- }
47
-
48
- function NavigationMenuItem({
49
- className,
50
- ...props
51
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
52
- return (
53
- <NavigationMenuPrimitive.Item
54
- data-slot="navigation-menu-item"
55
- className={cn("relative", className)}
56
- {...props}
57
- />
58
- );
59
- }
60
-
61
- const navigationMenuTriggerStyle = cva(
62
- "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
63
- );
64
-
65
- function NavigationMenuTrigger({
66
- className,
67
- children,
68
- ...props
69
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
70
- return (
71
- <NavigationMenuPrimitive.Trigger
72
- data-slot="navigation-menu-trigger"
73
- className={cn(navigationMenuTriggerStyle(), "group", className)}
74
- {...props}
75
- >
76
- {children}{" "}
77
- <ChevronDownIcon
78
- className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
79
- aria-hidden="true"
80
- />
81
- </NavigationMenuPrimitive.Trigger>
82
- );
83
- }
84
-
85
- function NavigationMenuContent({
86
- className,
87
- ...props
88
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
89
- return (
90
- <NavigationMenuPrimitive.Content
91
- data-slot="navigation-menu-content"
92
- className={cn(
93
- "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
94
- "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
95
- className
96
- )}
97
- {...props}
98
- />
99
- );
100
- }
101
-
102
- function NavigationMenuViewport({
103
- className,
104
- ...props
105
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
106
- return (
107
- <div
108
- className={cn(
109
- "absolute top-full left-0 isolate z-50 flex justify-center"
110
- )}
111
- >
112
- <NavigationMenuPrimitive.Viewport
113
- data-slot="navigation-menu-viewport"
114
- className={cn(
115
- "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
116
- className
117
- )}
118
- {...props}
119
- />
120
- </div>
121
- );
122
- }
123
-
124
- function NavigationMenuLink({
125
- className,
126
- ...props
127
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
128
- return (
129
- <NavigationMenuPrimitive.Link
130
- data-slot="navigation-menu-link"
131
- className={cn(
132
- "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
133
- className
134
- )}
135
- {...props}
136
- />
137
- );
138
- }
139
-
140
- function NavigationMenuIndicator({
141
- className,
142
- ...props
143
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
144
- return (
145
- <NavigationMenuPrimitive.Indicator
146
- data-slot="navigation-menu-indicator"
147
- className={cn(
148
- "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
149
- className
150
- )}
151
- {...props}
152
- >
153
- <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
154
- </NavigationMenuPrimitive.Indicator>
155
- );
156
- }
157
-
158
- export {
159
- NavigationMenu,
160
- NavigationMenuList,
161
- NavigationMenuItem,
162
- NavigationMenuContent,
163
- NavigationMenuTrigger,
164
- NavigationMenuLink,
165
- NavigationMenuIndicator,
166
- NavigationMenuViewport,
167
- navigationMenuTriggerStyle,
168
- };
1
+ import * as React from "react";
2
+ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
3
+ import { cva } from "class-variance-authority";
4
+ import { ChevronDownIcon } from "lucide-react";
5
+
6
+ import { cn } from "@/lib/utils";
7
+
8
+ function NavigationMenu({
9
+ className,
10
+ children,
11
+ viewport = true,
12
+ ...props
13
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
14
+ viewport?: boolean
15
+ }) {
16
+ return (
17
+ <NavigationMenuPrimitive.Root
18
+ data-slot="navigation-menu"
19
+ data-viewport={viewport}
20
+ className={cn(
21
+ "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
22
+ className
23
+ )}
24
+ {...props}
25
+ >
26
+ {children}
27
+ {viewport && <NavigationMenuViewport />}
28
+ </NavigationMenuPrimitive.Root>
29
+ );
30
+ }
31
+
32
+ function NavigationMenuList({
33
+ className,
34
+ ...props
35
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
36
+ return (
37
+ <NavigationMenuPrimitive.List
38
+ data-slot="navigation-menu-list"
39
+ className={cn(
40
+ "group flex flex-1 list-none items-center justify-center gap-1",
41
+ className
42
+ )}
43
+ {...props}
44
+ />
45
+ );
46
+ }
47
+
48
+ function NavigationMenuItem({
49
+ className,
50
+ ...props
51
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
52
+ return (
53
+ <NavigationMenuPrimitive.Item
54
+ data-slot="navigation-menu-item"
55
+ className={cn("relative", className)}
56
+ {...props}
57
+ />
58
+ );
59
+ }
60
+
61
+ const navigationMenuTriggerStyle = cva(
62
+ "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
63
+ );
64
+
65
+ function NavigationMenuTrigger({
66
+ className,
67
+ children,
68
+ ...props
69
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
70
+ return (
71
+ <NavigationMenuPrimitive.Trigger
72
+ data-slot="navigation-menu-trigger"
73
+ className={cn(navigationMenuTriggerStyle(), "group", className)}
74
+ {...props}
75
+ >
76
+ {children}{" "}
77
+ <ChevronDownIcon
78
+ className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
79
+ aria-hidden="true"
80
+ />
81
+ </NavigationMenuPrimitive.Trigger>
82
+ );
83
+ }
84
+
85
+ function NavigationMenuContent({
86
+ className,
87
+ ...props
88
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
89
+ return (
90
+ <NavigationMenuPrimitive.Content
91
+ data-slot="navigation-menu-content"
92
+ className={cn(
93
+ "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
94
+ "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
95
+ className
96
+ )}
97
+ {...props}
98
+ />
99
+ );
100
+ }
101
+
102
+ function NavigationMenuViewport({
103
+ className,
104
+ ...props
105
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
106
+ return (
107
+ <div
108
+ className={cn(
109
+ "absolute top-full left-0 isolate z-50 flex justify-center"
110
+ )}
111
+ >
112
+ <NavigationMenuPrimitive.Viewport
113
+ data-slot="navigation-menu-viewport"
114
+ className={cn(
115
+ "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
116
+ className
117
+ )}
118
+ {...props}
119
+ />
120
+ </div>
121
+ );
122
+ }
123
+
124
+ function NavigationMenuLink({
125
+ className,
126
+ ...props
127
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
128
+ return (
129
+ <NavigationMenuPrimitive.Link
130
+ data-slot="navigation-menu-link"
131
+ className={cn(
132
+ "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
133
+ className
134
+ )}
135
+ {...props}
136
+ />
137
+ );
138
+ }
139
+
140
+ function NavigationMenuIndicator({
141
+ className,
142
+ ...props
143
+ }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
144
+ return (
145
+ <NavigationMenuPrimitive.Indicator
146
+ data-slot="navigation-menu-indicator"
147
+ className={cn(
148
+ "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
149
+ className
150
+ )}
151
+ {...props}
152
+ >
153
+ <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
154
+ </NavigationMenuPrimitive.Indicator>
155
+ );
156
+ }
157
+
158
+ export {
159
+ NavigationMenu,
160
+ NavigationMenuList,
161
+ NavigationMenuItem,
162
+ NavigationMenuContent,
163
+ NavigationMenuTrigger,
164
+ NavigationMenuLink,
165
+ NavigationMenuIndicator,
166
+ NavigationMenuViewport,
167
+ navigationMenuTriggerStyle,
168
+ };
@@ -1,6 +1,6 @@
1
- import { clsx, type ClassValue } from "clsx";
2
- import { twMerge } from "tailwind-merge";
3
-
4
- export function cn(...inputs: ClassValue[]) {
5
- return twMerge(clsx(inputs));
6
- }
1
+ import { clsx, type ClassValue } from "clsx";
2
+ import { twMerge } from "tailwind-merge";
3
+
4
+ export function cn(...inputs: ClassValue[]) {
5
+ return twMerge(clsx(inputs));
6
+ }
@@ -1,11 +1,11 @@
1
- import { StrictMode } from 'react';
2
- import { createRoot } from 'react-dom/client';
3
-
4
- import './assets/css/tailwindcss.css';
5
- import App from './App.tsx';
6
-
7
- createRoot(document.getElementById('root')!).render(
8
- <StrictMode>
9
- <App />
10
- </StrictMode>,
11
- );
1
+ import { StrictMode } from 'react';
2
+ import { createRoot } from 'react-dom/client';
3
+
4
+ import './assets/css/tailwindcss.css';
5
+ import App from './App.tsx';
6
+
7
+ createRoot(document.getElementById('root')!).render(
8
+ <StrictMode>
9
+ <App />
10
+ </StrictMode>,
11
+ );
@@ -1,71 +1,71 @@
1
- import React, { lazy, type ReactNode } from "react";
2
- import type { RouteObject } from "react-router-dom";
3
- import { createBrowserRouter, Navigate } from "react-router-dom";
4
- // import Index from "../views/index.tsx";
5
- // import Login from "../views/login.tsx";
6
-
7
- // import Layout from "../components/Layout"; // 请根据实际路径调整
8
- // import NotFound from "../components/NotFound"; // 请根据实际路径调整
9
-
10
- // 定义模块导入的类型
11
- type RouteModule = Promise<{ default: React.ComponentType<any> }>;
12
- // 定义单个路由项的类型
13
- // 这里用类型交叉,避免接口继承报错
14
-
15
- type DynamicRoute = RouteObject & {
16
- path: string;
17
- element: ReactNode;
18
- };
19
- // 单独处理 NotFound 组件
20
- const NotFound = lazy(() => import("../views/404/index.tsx"));
21
- const ROOT = lazy(() => import("../views/index.tsx"));
22
- const generateRoutes = (): DynamicRoute[] => {
23
- const app = Object.entries(
24
- import.meta.glob("../views/*/*.tsx") as Record<string, () => RouteModule>
25
- );
26
-
27
- const routes: DynamicRoute[] = [];
28
-
29
- app.forEach(([path, module]) => {
30
- const pathArr = path.split("/");
31
- const pathName = pathArr[pathArr.length - 2];
32
- const LazyComponent = lazy(() =>
33
- module().then((m) => ({ default: m.default }))
34
- );
35
-
36
- routes.push({
37
- path: `/${pathName}`,
38
- element: <LazyComponent />,
39
- });
40
- });
41
-
42
- return routes;
43
- };
44
- console.log(generateRoutes());
45
- export const router = createBrowserRouter([
46
- {
47
- path: "/",
48
- // 重定向
49
- // // 请确保Layout组件已正确导入
50
- element: <ROOT />,
51
- children: [
52
- { path: "", element: <Navigate to="/Index" replace /> },
53
- ...generateRoutes(),
54
- ],
55
- // 重定向
56
- },
57
- {
58
- path: "/login",
59
- element: ''
60
- // <React.Suspense fallback={<div>Loading...</div>}>
61
- // <Login />
62
- // </React.Suspense>
63
-
64
- },
65
- {
66
- path: "*",
67
- // 懒加载
68
- element: <NotFound />
69
- },
70
- ]);
71
- console.log(router);
1
+ import React, { lazy, type ReactNode } from "react";
2
+ import type { RouteObject } from "react-router-dom";
3
+ import { createBrowserRouter, Navigate } from "react-router-dom";
4
+ // import Index from "../views/index.tsx";
5
+ // import Login from "../views/login.tsx";
6
+
7
+ // import Layout from "../components/Layout"; // 请根据实际路径调整
8
+ // import NotFound from "../components/NotFound"; // 请根据实际路径调整
9
+
10
+ // 定义模块导入的类型
11
+ type RouteModule = Promise<{ default: React.ComponentType<any> }>;
12
+ // 定义单个路由项的类型
13
+ // 这里用类型交叉,避免接口继承报错
14
+
15
+ type DynamicRoute = RouteObject & {
16
+ path: string;
17
+ element: ReactNode;
18
+ };
19
+ // 单独处理 NotFound 组件
20
+ const NotFound = lazy(() => import("../views/404/index.tsx"));
21
+ const ROOT = lazy(() => import("../views/index.tsx"));
22
+ const generateRoutes = (): DynamicRoute[] => {
23
+ const app = Object.entries(
24
+ import.meta.glob("../views/*/*.tsx") as Record<string, () => RouteModule>
25
+ );
26
+
27
+ const routes: DynamicRoute[] = [];
28
+
29
+ app.forEach(([path, module]) => {
30
+ const pathArr = path.split("/");
31
+ const pathName = pathArr[pathArr.length - 2];
32
+ const LazyComponent = lazy(() =>
33
+ module().then((m) => ({ default: m.default }))
34
+ );
35
+
36
+ routes.push({
37
+ path: `/${pathName}`,
38
+ element: <LazyComponent />,
39
+ });
40
+ });
41
+
42
+ return routes;
43
+ };
44
+ console.log(generateRoutes());
45
+ export const router = createBrowserRouter([
46
+ {
47
+ path: "/",
48
+ // 重定向
49
+ // // 请确保Layout组件已正确导入
50
+ element: <ROOT />,
51
+ children: [
52
+ { path: "", element: <Navigate to="/Index" replace /> },
53
+ ...generateRoutes(),
54
+ ],
55
+ // 重定向
56
+ },
57
+ {
58
+ path: "/login",
59
+ element: ''
60
+ // <React.Suspense fallback={<div>Loading...</div>}>
61
+ // <Login />
62
+ // </React.Suspense>
63
+
64
+ },
65
+ {
66
+ path: "*",
67
+ // 懒加载
68
+ element: <NotFound />
69
+ },
70
+ ]);
71
+ console.log(router);