Merge pull request #28 from sijinhui/antd

Antd

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 <Spin />;
+}

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 (
+    <>
+      <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
+        <Col numColSpan={1} numColSpanSm={2} numColSpanLg={3}>
+          {/*<UsageAnalysis />*/}
+          {/*<Card></Card>*/}
+          {/*<DatePicker className="max-w-sm mx-auto justify-center" />*/}
+          {/*<DateRangePickerSpanish />*/}
+        </Col>
+        <Col numColSpan={1} numColSpanSm={2} numColSpanLg={3}>
+          <UsageByModel />
+        </Col>
+      </Grid>
+    </>
+  );
+}

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<ThemeConfig>('dark');
+
+  const [collapsed, setCollapsed] = useState(false);
+  const {
+    token: { colorBgContainer, borderRadiusLG, colorBgLayout },
+  } = theme.useToken();
+
+  return (
+    <ConfigProvider
+      theme={{
+        // 1. 单独使用暗色算法
+        algorithm: theme.defaultAlgorithm,
+        // token: {
+        //     colorPrimary: "#00b96b",
+        // }
+      }}
+    >
+      <Layout style={{ height: "100%" }}>
+        <Sider>
+          <div className="demo-logo-vertical" />*
+          <SideBar />
+        </Sider>
+
+        <Layout>
+          <Header style={{ padding: 0, background: colorBgContainer }}>
+            <Button
+              type="text"
+              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+              onClick={() => setCollapsed(!collapsed)}
+              style={{
+                fontSize: "16px",
+                width: 64,
+                height: 64,
+              }}
+            />
+          </Header>
+          <Content
+            style={{
+              margin: "24px 16px",
+              padding: 24,
+              minHeight: 280,
+              background: colorBgLayout,
+              borderRadius: borderRadiusLG,
+            }}
+          >
+            {children}
+          </Content>
+        </Layout>
+      </Layout>
+    </ConfigProvider>
+  );
+}
+
+export default MainLayout;

app/app/(admin)/admin/page.tsx

@@ -1,29 +1,75 @@
-import { Grid, Col } from "@tremor/react";
+"use client";
-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() {
+import React, { useState } from "react";
-  const session = await getSession();
+import {
-  if (!(session?.user?.name && ADMIN_LIST.includes(session.user.name))) {
+  AppstoreOutlined,
-    // Replace '/dashboard' with the desired redirect path
+  MailOutlined,
-    redirect("/");
+  SettingOutlined,
-  }
+} from "@ant-design/icons";
+import type { MenuProps, MenuTheme } from "antd";
+import { Menu, Switch } from "antd";
+
+type MenuItem = Required<MenuProps>["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", <MailOutlined />, [
+    getItem("Option 1", "1"),
+    getItem("Option 2", "2"),
+    getItem("Option 3", "3"),
+    getItem("Option 4", "4"),
+  ]),
+
+  getItem("Navigation Two", "sub2", <AppstoreOutlined />, [
+    getItem("Option 5", "5"),
+    getItem("Option 6", "6"),
+    getItem("Submenu", "sub3", null, [
+      getItem("Option 7", "7"),
+      getItem("Option 8", "8"),
+    ]),
+  ]),
+
+  getItem("Navigation Three", "sub4", <SettingOutlined />, [
+    getItem("Option 9", "9"),
+    getItem("Option 10", "10"),
+    getItem("Option 11", "11"),
+    getItem("Option 12", "12"),
+  ]),
+];
+
+const App: React.FC = () => {
+  const [theme, setTheme] = useState<MenuTheme>("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 (
     <>
-      <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
+      <div>Admin Page</div>
-        <Col numColSpan={1} numColSpanSm={2} numColSpanLg={3}>
-          {/*<UsageAnalysis />*/}
-          {/*<Card></Card>*/}
-          {/*<DatePicker className="max-w-sm mx-auto justify-center" />*/}
-          {/*<DateRangePickerSpanish />*/}
-        </Col>
-        <Col numColSpan={1} numColSpanSm={2} numColSpanLg={3}>
-          <UsageByModel />
-        </Col>
-      </Grid>
     </>
   );
-}
+};
+
+export default App;

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<MenuProps>["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", <AppstoreOutlined />, [
+    getItem("使用分析", "/admin/ana"),
+  ]),
+
+  getItem("Navigation Two", "sub2", <AppstoreOutlined />, [
+    getItem("Option 5", "5"),
+    getItem("Option 6", "6"),
+    getItem("Submenu", "sub3", null, [
+      getItem("Option 7", "7"),
+      getItem("Option 8", "8"),
+    ]),
+  ]),
+
+  getItem("Navigation Three", "sub4", <SettingOutlined />, [
+    getItem("Option 9", "9"),
+    getItem("Option 10", "10"),
+    getItem("Option 11", "11"),
+    getItem("Option 12", "12"),
+  ]),
+];
+
+const SideBar: React.FC = () => {
+  const [theme, setTheme] = useState<MenuTheme>("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 (
+    <>
+      {/*<Switch*/}
+      {/*    // checked={theme === 'dark'}*/}
+      {/*    // onChange={changeTheme}*/}
+      {/*    checkedChildren="Dark"*/}
+      {/*    unCheckedChildren="Light"*/}
+      {/*/>*/}
+      <br />
+      <br />
+      <Menu
+        theme={theme}
+        onClick={onClick}
+        // style={{ width: 256 }}
+        defaultOpenKeys={["dashboard"]}
+        selectedKeys={[current]}
+        mode="inline"
+        items={items}
+      />
+    </>
+  );
+};
+
+export default SideBar;

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({
+export default function AdminLayout({ children }: { children: ReactNode }) {
-  children,
-}: {
-  children: ReactNode;
-}) {
   return (
-    <div className="flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8 w-full">
+    <>
-      <div className="w-full">
+      <AntdRegistry>
-        <h1 className="mt-6 text-center font-cal text-3xl dark:text-white">
+        {children}
-          Admin Page
+
-        </h1>
+        {/*<div className="flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8 w-full">*/}
-        <div className="mx-auto mt-4 w-11/12 max-w-screen-lg sm:w-full">
+        {/*  <div className="w-full">*/}
-          {children}
+        {/*    <h1 className="mt-6 text-center font-cal text-3xl dark:text-white">*/}
-        </div>
+        {/*      Admin Page*/}
-      </div>
+        {/*    </h1>*/}
-    </div>
+        {/*    <div className="mx-auto mt-4 w-11/12 max-w-screen-lg sm:w-full">*/}
+        {/*      {children}*/}
+        {/*    </div>*/}
+        {/*  </div>*/}
+        {/*</div>*/}
+      </AntdRegistry>
+    </>
   );
 }

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),
         );

package.json

@@ -16,6 +16,7 @@
     "proxy-dev": "sh ./scripts/init-proxy.sh && proxychains -f ./scripts/proxychains.conf yarn dev"
   },
   "dependencies": {
+    "@ant-design/nextjs-registry": "^1.0.0",
     "@fortaine/fetch-event-source": "^3.0.6",
     "@hello-pangea/dnd": "^16.5.0",
     "@next-auth/prisma-adapter": "^1.0.7",
@@ -25,6 +26,7 @@
     "@tremor/react": "^3.13.4",
     "@vercel/analytics": "^1.1.2",
     "@vercel/speed-insights": "^1.0.9",
+    "antd": "^5.15.1",
     "echarts": "^5.4.3",
     "emoji-picker-react": "^4.7.10",
     "fuse.js": "^7.0.0",
@@ -85,4 +87,4 @@
   "resolutions": {
     "lint-staged/yaml": "^2.2.2"
   }
-}
+}