mirror of
https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git
synced 2025-10-01 23:56:39 +08:00
优化管理页面
This commit is contained in:
sijinhui
parent
2e74ddb5fc
commit
794ff536c2
6
app/app/(admin)/admin/ana/loadging.tsx
Normal file
6
app/app/(admin)/admin/ana/loadging.tsx
Normal file
@ -0,0 +1,6 @@
|
||||
import { Spin } from "antd";
|
||||
|
||||
export default function Loading() {
|
||||
// You can add any UI inside Loading, including a Skeleton.
|
||||
return <Spin />;
|
||||
}
|
||||
29
app/app/(admin)/admin/ana/page.tsx
Normal file
29
app/app/(admin)/admin/ana/page.tsx
Normal file
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
70
app/app/(admin)/admin/layout.tsx
Normal file
70
app/app/(admin)/admin/layout.tsx
Normal file
@ -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;
|
||||
@ -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<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">
|
||||
<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>
|
||||
<div>Admin Page</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
108
app/app/(admin)/components/sidebar.tsx
Normal file
108
app/app/(admin)/components/sidebar.tsx
Normal file
@ -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;
|
||||
@ -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 (
|
||||
<div className="flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8 w-full">
|
||||
<div className="w-full">
|
||||
<h1 className="mt-6 text-center font-cal text-3xl dark:text-white">
|
||||
Admin Page
|
||||
</h1>
|
||||
<div className="mx-auto mt-4 w-11/12 max-w-screen-lg sm:w-full">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
<AntdRegistry>
|
||||
{children}
|
||||
|
||||
{/*<div className="flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8 w-full">*/}
|
||||
{/* <div className="w-full">*/}
|
||||
{/* <h1 className="mt-6 text-center font-cal text-3xl dark:text-white">*/}
|
||||
{/* Admin Page*/}
|
||||
{/* </h1>*/}
|
||||
{/* <div className="mx-auto mt-4 w-11/12 max-w-screen-lg sm:w-full">*/}
|
||||
{/* {children}*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
</AntdRegistry>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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),
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user