create-project-template-cli 1.0.0 → 1.0.1
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.
- package/README.md +5 -5
- package/index.js +133 -133
- package/package.json +2 -2
- package/template/react-shadcn/.gitignore +24 -0
- package/template/react-shadcn/.husky/commit-msg +4 -4
- package/template/react-shadcn/.stylelintignore +19 -19
- package/template/react-shadcn/.stylelintrc.cjs +258 -258
- package/template/react-shadcn/.vscode/extensions.json +7 -7
- package/template/react-shadcn/README.md +75 -75
- package/template/react-shadcn/commitlint.config.cjs +90 -90
- package/template/react-shadcn/components.json +22 -22
- package/template/react-shadcn/eslint.config.js +58 -58
- package/template/react-shadcn/index.html +13 -13
- package/template/react-shadcn/lint-staged.config.cjs +4 -4
- package/template/react-shadcn/package.json +62 -62
- package/template/react-shadcn/pnpm-lock.yaml +4514 -4514
- package/template/react-shadcn/src/App.css +23 -23
- package/template/react-shadcn/src/App.tsx +20 -20
- package/template/react-shadcn/src/assets/css/tailwindcss.css +120 -120
- package/template/react-shadcn/src/components/ui/button.tsx +58 -58
- package/template/react-shadcn/src/components/ui/card.tsx +92 -92
- package/template/react-shadcn/src/components/ui/input.tsx +21 -21
- package/template/react-shadcn/src/components/ui/label.tsx +22 -22
- package/template/react-shadcn/src/components/ui/navigation-menu.tsx +168 -168
- package/template/react-shadcn/src/lib/utils.ts +6 -6
- package/template/react-shadcn/src/main.tsx +11 -11
- package/template/react-shadcn/src/router/index.tsx +71 -71
- package/template/react-shadcn/src/views/404/index.scss +133 -133
- package/template/react-shadcn/src/views/404/index.tsx +26 -26
- package/template/react-shadcn/src/views/Index/index.tsx +7 -7
- package/template/react-shadcn/src/views/index.tsx +58 -58
- package/template/react-shadcn/tsconfig.app.json +33 -33
- package/template/react-shadcn/tsconfig.json +13 -13
- package/template/react-shadcn/tsconfig.node.json +32 -32
- package/template/react-shadcn/vite.config.ts +36 -36
- package/template/vue-tailwindcss/.gitignore +30 -0
- package/utils.js +73 -73
|
@@ -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);
|