-
BasicLayout
-
+
+
+
+
+
+
)
}
\ No newline at end of file
diff --git a/src/layout/basic/sideMenu.jsx b/src/layout/basic/sideMenu.jsx
new file mode 100644
index 0000000..984ab04
--- /dev/null
+++ b/src/layout/basic/sideMenu.jsx
@@ -0,0 +1,31 @@
+import { useLocation, useNavigate } from "react-router-dom"
+
+export default function SideMenu() {
+ const location = useLocation()
+ const navigator = useNavigate()
+ const handleMenuClick = (path) => {
+ navigator(path)
+ }
+ console.log('pathname', location.pathname);
+ const LIST = [{
+ label: '主页',
+ path: '/'
+ }, {
+ label: '其他',
+ path: '/other'
+ }]
+ return (
+ <>
+ {LIST.map((item, index) => {
+ return (
+
handleMenuClick(item.path)}
+ >{item.label}
+ )
+ })}
+
+ )
+}
\ No newline at end of file
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 0000000..20aa603
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/main.jsx b/src/main.jsx
index 9d69970..a4c95d7 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,11 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
-import { RouterProvider } from 'react-router-dom'
-import router from './router/index.js'
+import BasicRouter from './router/index.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
-
+
,
)
diff --git a/src/router/index.js b/src/router/index.js
deleted file mode 100644
index 865db0c..0000000
--- a/src/router/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createBrowserRouter } from "react-router-dom";
-import Home from "../views/home";
-import BasicLayout from "../layout/basic";
-import ErrorPage from "../layout/errorPage";
-import Login from "../views/login";
-
-const router = createBrowserRouter([
- {
- path: '/',
- element: BasicLayout(),
- children: [
- {
- path: '/',
- element: Home()
- }
- ],
- },
- {
- path: '/login',
- element: Login()
- },
- {
- path: '*',
- element: ErrorPage()
- }
-])
-
-export default router;
\ No newline at end of file
diff --git a/src/router/index.jsx b/src/router/index.jsx
new file mode 100644
index 0000000..0802644
--- /dev/null
+++ b/src/router/index.jsx
@@ -0,0 +1,20 @@
+import Home from "../views/home";
+import BasicLayout from "../layout/basic";
+import ErrorPage from "../layout/errorPage";
+import Login from "../views/login";
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+
+export default function BasicRouter() {
+ return (
+
+
+ }>
+ } />
+ } />
+
+ } />
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/views/home/index.jsx b/src/views/home/index.jsx
index ddd5070..354c297 100644
--- a/src/views/home/index.jsx
+++ b/src/views/home/index.jsx
@@ -1,5 +1,192 @@
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog"
+
export default function Home() {
+ const invoices = [
+ {
+ invoice: "INV001",
+ paymentStatus: "Paid",
+ totalAmount: "$250.00",
+ paymentMethod: "Credit Card",
+ },
+ {
+ invoice: "INV002",
+ paymentStatus: "Pending",
+ totalAmount: "$150.00",
+ paymentMethod: "PayPal",
+ },
+ {
+ invoice: "INV003",
+ paymentStatus: "Unpaid",
+ totalAmount: "$350.00",
+ paymentMethod: "Bank Transfer",
+ },
+ {
+ invoice: "INV004",
+ paymentStatus: "Paid",
+ totalAmount: "$450.00",
+ paymentMethod: "Credit Card",
+ },
+ {
+ invoice: "INV005",
+ paymentStatus: "Paid",
+ totalAmount: "$550.00",
+ paymentMethod: "PayPal",
+ },
+ {
+ invoice: "INV006",
+ paymentStatus: "Pending",
+ totalAmount: "$200.00",
+ paymentMethod: "Bank Transfer",
+ },
+ {
+ invoice: "INV007",
+ paymentStatus: "Unpaid",
+ totalAmount: "$300.00",
+ paymentMethod: "Credit Card",
+ },
+ ]
+
return (
-
HOME
+
+
+
+
+
+
+
+
+
+ | Song |
+ Artist |
+ Year |
+
+
+
+
+ | The Sliding Mr. Bones (Next Stop, Pottersville) |
+ Malcolm Lockyer |
+ 1961 |
+
+
+ | Witchy Woman |
+ The Eagles |
+ 1972 |
+
+
+ | Shining Star |
+ Earth, Wind, and Fire |
+ 1975 |
+
+
+
+
+ {/* A list of your recent invoices. */}
+
+
+ Invoice
+ Status
+ Method
+ Amount
+
+
+
+ {invoices.map((invoice) => (
+
+ {invoice.invoice}
+ {invoice.paymentStatus}
+ {invoice.paymentMethod}
+ {invoice.totalAmount}
+
+ ))}
+
+
+
+ Total
+ $2,500.00
+
+
+
+
+
)
}
\ No newline at end of file
diff --git a/src/views/login/index.css b/src/views/login/index.css
new file mode 100644
index 0000000..89d64b4
--- /dev/null
+++ b/src/views/login/index.css
@@ -0,0 +1,4 @@
+.left-image {
+ background-image: url(https://ui.shadcn.com/_next/image?url=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1548516173-3cabfa4607e9%3Fauto%3Dformat%26fit%3Dcrop%26w%3D300%26q%3D80&w=384&q=75);
+ background-size: cover;
+}
\ No newline at end of file
diff --git a/src/views/login/index.jsx b/src/views/login/index.jsx
index 25bb0d3..7bce4dc 100644
--- a/src/views/login/index.jsx
+++ b/src/views/login/index.jsx
@@ -1,5 +1,67 @@
+import './index.css'
+import { useNavigate } from 'react-router-dom'
+
export default function Login() {
+ const navigator = useNavigate()
+ const handleClick = () => {
+ navigator('/')
+ }
return (
-
Login
+
+
+
+
+
+
+ 创建账户
+
+
+ 输入邮箱以创建账户
+
+
+
+
+
+
+
+
+
+
+ Or continue with
+
+
+
+
+
+
+ By clicking continue, you agree to our
+
+ Terms of Service
+
+ and
+
+ Privacy Policy
+ .
+
+
+
+
)
}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..0a5fa43
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: ["class"],
+ content: [
+ './pages/**/*.{js,jsx}',
+ './components/**/*.{js,jsx}',
+ './app/**/*.{js,jsx}',
+ './src/**/*.{js,jsx}',
+ ],
+ prefix: "",
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: "0" },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
+}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 5a33944..3320ab1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,13 @@
import { defineConfig } from 'vite'
+import path from "path"
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
})