尝试增加管理页面

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

@@ -0,0 +1,39 @@
+"use client";
+import { Grid, Col, Card, Text, AreaChart, Metric } from "@tremor/react";
+
+export default function AdminPage() {
+  return (
+    <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
+      <Col numColSpan={1} numColSpanLg={2}>
+        <Card>
+          <Text>Title</Text>
+          {/*<AreaChart*/}
+          {/*    className="mt-6 h-28"*/}
+          {/*    data={data}*/}
+          {/*    index="Month"*/}
+          {/*    valueFormatter={(number: number) =>*/}
+          {/*        `${Intl.NumberFormat("us").format(number).toString()}`*/}
+          {/*    }*/}
+          {/*    categories={["Total Visitors"]}*/}
+          {/*    colors={["blue"]}*/}
+          {/*    showXAxis={true}*/}
+          {/*    showGridLines={false}*/}
+          {/*    startEndOnly={true}*/}
+          {/*    showYAxis={false}*/}
+          {/*    showLegend={false}*/}
+          {/*/>*/}
+        </Card>
+      </Col>
+      <Card>
+        <Text>Title</Text>
+        <Metric>KPI 2</Metric>
+      </Card>
+      <Col>
+        <Card>
+          <Text>Title</Text>
+          <Metric>KPI 3</Metric>
+        </Card>
+      </Col>
+    </Grid>
+  );
+}

app/app/(admin)/layout.tsx

@@ -0,0 +1,24 @@
+import "@/app/app/login.scss";
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Admin | 管理页面",
+};
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex max-w-screen-xl flex-col space-y-12 p-8">
+      <div className="flex flex-col space-y-6">
+        <h1 className="font-cal text-3xl font-bold dark:text-white">
+          Admin Page
+        </h1>
+        {children}
+      </div>
+    </div>
+  );
+}

app/app/(auth)/layout.tsx

@@ -1,4 +1,4 @@
-import "@/app/styles/login.scss";
+import "@/app/app/login.scss";
 import { Metadata } from "next";
 import { ReactNode } from "react";
 // import { useEffect } from "react";

app/app/login.scss

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+.signin input[type=text] {
+  display: block;
+  margin-left: auto;
+  margin-right: auto
+}
+
+.signin hr {
+  text-align: center;
+  border: 0;
+  border-top: 1px solid var(--color-separator);
+  display: block;
+  margin: 2rem auto 1rem;
+  overflow: visible
+}
+
+.signin hr:before {
+  background: var(--color-background-card);
+  color: #888;
+  content: "or";
+  padding: 0 .4rem;
+  position: relative;
+  top: -.7rem
+}
+
+.signin .error {
+  background: #f5f5f5;
+  background: var(--color-error);
+  border-radius: .3rem;
+  font-weight: 500
+}
+
+.signin .error p {
+  color: var(--color-info-text);
+  font-size: .9rem;
+  line-height: 1.2rem;
+  padding: .5rem 1rem;
+  text-align: left
+}
+
+.signin form,.signin>div {
+  display: block
+}
+
+.signin form input[type],.signin>div input[type] {
+  margin-bottom: .5rem
+}
+
+.signin form button,.signin>div button {
+  width: 100%
+}
+
+.signin .provider+.provider {
+  margin-top: 1rem
+}