From 794ff536c22391b36d66d033b8e2299c410faf2c Mon Sep 17 00:00:00 2001 From: sijinhui Date: Sun, 10 Mar 2024 11:25:29 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=AE=A1=E7=90=86=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app/(admin)/admin/ana/loadging.tsx | 6 + app/app/(admin)/admin/ana/page.tsx | 29 +++++ .../admin/{ => ana}/usage-by-model-chart.tsx | 0 app/app/(admin)/admin/layout.tsx | 70 ++++++++++++ app/app/(admin)/admin/page.tsx | 92 +++++++++++---- app/app/(admin)/components/sidebar.tsx | 108 ++++++++++++++++++ app/app/(admin)/layout.tsx | 33 +++--- middleware.ts | 2 +- 8 files changed, 301 insertions(+), 39 deletions(-) create mode 100644 app/app/(admin)/admin/ana/loadging.tsx create mode 100644 app/app/(admin)/admin/ana/page.tsx rename app/app/(admin)/admin/{ => ana}/usage-by-model-chart.tsx (100%) create mode 100644 app/app/(admin)/admin/layout.tsx create mode 100644 app/app/(admin)/components/sidebar.tsx diff --git a/app/app/(admin)/admin/ana/loadging.tsx b/app/app/(admin)/admin/ana/loadging.tsx new file mode 100644 index 000000000..9bd76f449 --- /dev/null +++ b/app/app/(admin)/admin/ana/loadging.tsx @@ -0,0 +1,6 @@ +import { Spin } from "antd"; + +export default function Loading() { + // You can add any UI inside Loading, including a Skeleton. + return ; +} diff --git a/app/app/(admin)/admin/ana/page.tsx b/app/app/(admin)/admin/ana/page.tsx new file mode 100644 index 000000000..eb6414360 --- /dev/null +++ b/app/app/(admin)/admin/ana/page.tsx @@ -0,0 +1,29 @@ +import { Grid, Col } from "@tremor/react"; +import UsageByModel from "./usage-by-model-chart"; +import { getSession } from "@/lib/auth"; +import { isName, ADMIN_LIST } from "@/lib/auth_list"; +import { redirect } from "next/navigation"; + +export default async function AdminPage() { + const session = await getSession(); + if (!(session?.user?.name && ADMIN_LIST.includes(session.user.name))) { + // Replace '/dashboard' with the desired redirect path + redirect("/"); + } + + return ( + <> + + + {/**/} + {/**/} + {/**/} + {/**/} + + + + + + + ); +} diff --git a/app/app/(admin)/admin/usage-by-model-chart.tsx b/app/app/(admin)/admin/ana/usage-by-model-chart.tsx similarity index 100% rename from app/app/(admin)/admin/usage-by-model-chart.tsx rename to app/app/(admin)/admin/ana/usage-by-model-chart.tsx diff --git a/app/app/(admin)/admin/layout.tsx b/app/app/(admin)/admin/layout.tsx new file mode 100644 index 000000000..007c748a6 --- /dev/null +++ b/app/app/(admin)/admin/layout.tsx @@ -0,0 +1,70 @@ +"use client"; + +import React, { ReactNode, useState } from "react"; +import { + MenuFoldOutlined, + MenuUnfoldOutlined, + UploadOutlined, + UserOutlined, + VideoCameraOutlined, +} from "@ant-design/icons"; +import { Layout, Menu, Button, theme, ConfigProvider, ThemeConfig } from "antd"; +import SideBar from "../components/sidebar"; + +const { Header, Sider, Content } = Layout; + +function MainLayout({ children }: { children: ReactNode }) { + // const [theme, setTheme] = useState('dark'); + + const [collapsed, setCollapsed] = useState(false); + const { + token: { colorBgContainer, borderRadiusLG, colorBgLayout }, + } = theme.useToken(); + + return ( + + + +
* + + + + +
+
+ + {children} + + + + + ); +} + +export default MainLayout; diff --git a/app/app/(admin)/admin/page.tsx b/app/app/(admin)/admin/page.tsx index eb6414360..a06fceb86 100644 --- a/app/app/(admin)/admin/page.tsx +++ b/app/app/(admin)/admin/page.tsx @@ -1,29 +1,75 @@ -import { Grid, Col } from "@tremor/react"; -import UsageByModel from "./usage-by-model-chart"; -import { getSession } from "@/lib/auth"; -import { isName, ADMIN_LIST } from "@/lib/auth_list"; -import { redirect } from "next/navigation"; +"use client"; -export default async function AdminPage() { - const session = await getSession(); - if (!(session?.user?.name && ADMIN_LIST.includes(session.user.name))) { - // Replace '/dashboard' with the desired redirect path - redirect("/"); - } +import React, { useState } from "react"; +import { + AppstoreOutlined, + MailOutlined, + SettingOutlined, +} from "@ant-design/icons"; +import type { MenuProps, MenuTheme } from "antd"; +import { Menu, Switch } from "antd"; + +type MenuItem = Required["items"][number]; + +function getItem( + label: React.ReactNode, + key?: React.Key | null, + icon?: React.ReactNode, + children?: MenuItem[], + type?: "group", +): MenuItem { + return { + key, + icon, + children, + label, + type, + } as MenuItem; +} + +const items: MenuItem[] = [ + getItem("Navigation One", "sub1", , [ + getItem("Option 1", "1"), + getItem("Option 2", "2"), + getItem("Option 3", "3"), + getItem("Option 4", "4"), + ]), + + getItem("Navigation Two", "sub2", , [ + getItem("Option 5", "5"), + getItem("Option 6", "6"), + getItem("Submenu", "sub3", null, [ + getItem("Option 7", "7"), + getItem("Option 8", "8"), + ]), + ]), + + getItem("Navigation Three", "sub4", , [ + getItem("Option 9", "9"), + getItem("Option 10", "10"), + getItem("Option 11", "11"), + getItem("Option 12", "12"), + ]), +]; + +const App: React.FC = () => { + const [theme, setTheme] = useState("dark"); + const [current, setCurrent] = useState("1"); + + const changeTheme = (value: boolean) => { + setTheme(value ? "dark" : "light"); + }; + + const onClick: MenuProps["onClick"] = (e) => { + console.log("click ", e); + setCurrent(e.key); + }; return ( <> - - - {/**/} - {/**/} - {/**/} - {/**/} - - - - - +
Admin Page
); -} +}; + +export default App; diff --git a/app/app/(admin)/components/sidebar.tsx b/app/app/(admin)/components/sidebar.tsx new file mode 100644 index 000000000..841e06d32 --- /dev/null +++ b/app/app/(admin)/components/sidebar.tsx @@ -0,0 +1,108 @@ +"use client"; + +import React, { useEffect, useState } from "react"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; + +import { + AppstoreOutlined, + MailOutlined, + SettingOutlined, + DashboardTwoTone, +} from "@ant-design/icons"; +import type { MenuProps, MenuTheme } from "antd"; +import { Menu, Switch } from "antd"; + +type MenuItem = Required["items"][number]; + +function getItem( + label: React.ReactNode, + key?: React.Key | null, + icon?: React.ReactNode, + children?: MenuItem[], + type?: "group", +): MenuItem { + return { + key, + icon, + children, + label, + type, + } as MenuItem; +} + +const items: MenuItem[] = [ + getItem("面板", "dashboard", , [ + getItem("使用分析", "/admin/ana"), + ]), + + getItem("Navigation Two", "sub2", , [ + getItem("Option 5", "5"), + getItem("Option 6", "6"), + getItem("Submenu", "sub3", null, [ + getItem("Option 7", "7"), + getItem("Option 8", "8"), + ]), + ]), + + getItem("Navigation Three", "sub4", , [ + getItem("Option 9", "9"), + getItem("Option 10", "10"), + getItem("Option 11", "11"), + getItem("Option 12", "12"), + ]), +]; + +const SideBar: React.FC = () => { + const [theme, setTheme] = useState("dark"); + const [current, setCurrent] = useState("1"); + const router = useRouter(); + const [loading, setLoading] = useState(false); + + // const changeTheme = (value: boolean) => { + // setTheme(value ? 'dark' : 'light'); + // }; + + const onClick: MenuProps["onClick"] = (e) => { + console.log("click ", e); + setCurrent(e.key); + router.push(e.key); + }; + + // useEffect(() => { + // const handleStart = () => setLoading(true) + // const handleComplete = () => setLoading(false); + // router.events.on('routeChangeStart', handleStart); + // router.events.on('routeChangeComplete', handleStop); + // router.events.on('routeChangeError', handleStop); + // + // return () => { + // router. + // } + // + // }, [router]); + + return ( + <> + {/**/} +
+
+ + + ); +}; + +export default SideBar; diff --git a/app/app/(admin)/layout.tsx b/app/app/(admin)/layout.tsx index 240c0e232..93262fdab 100644 --- a/app/app/(admin)/layout.tsx +++ b/app/app/(admin)/layout.tsx @@ -1,26 +1,29 @@ import "@/app/app/login.scss"; import { Metadata } from "next"; import { ReactNode } from "react"; +import { AntdRegistry } from "@ant-design/nextjs-registry"; export const metadata: Metadata = { title: "Admin | 管理页面", }; -export default async function AdminLayout({ - children, -}: { - children: ReactNode; -}) { +export default function AdminLayout({ children }: { children: ReactNode }) { return ( -
-
-

- Admin Page -

-
- {children} -
-
-
+ <> + + {children} + + {/*
*/} + {/*
*/} + {/*

*/} + {/* Admin Page*/} + {/*

*/} + {/*
*/} + {/* {children}*/} + {/*
*/} + {/*
*/} + {/*
*/} + + ); } diff --git a/middleware.ts b/middleware.ts index baf4bbe96..f26af4795 100644 --- a/middleware.ts +++ b/middleware.ts @@ -37,7 +37,7 @@ export default async function middleware(req: NextRequest) { new URL(`/app${path}`, req.url), ); } - if (path == "/admin") { + if (path.startsWith("/admin")) { return NextResponse.rewrite( new URL(`/app${path}`, req.url), );