优化布局

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

@@ -5,13 +5,15 @@ import EchartsComponent from "./testchart";
 
 export default function AdminPage() {
   return (
-    <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
+    <>
-      <Col numColSpan={2} numColSpanLg={2}>
+      <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
-        <UsageAnalysis />
+        <Col numColSpan={1} numColSpanLg={1}>
-      </Col>
+          <UsageAnalysis />
-      <Col numColSpan={1} numColSpanLg={1}>
+        </Col>
-        <EchartsComponent />
+        <Col numColSpan={1} numColSpanLg={2}>
-      </Col>
+          <EchartsComponent />
-    </Grid>
+        </Col>
+      </Grid>
+    </>
   );
 }

app/app/(admin)/admin/testchart.tsx

@@ -47,7 +47,7 @@ const EchartsComponent: React.FC = () => {
     option && myChart.setOption(option);
   }, []); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
 
-  return <div id="charts" style={{ width: "100%", height: "100%" }}></div>;
+  return <div id="charts" style={{ width: "100%", height: "400px" }}></div>;
 };
 
 export default EchartsComponent;

app/app/(admin)/layout.tsx

@@ -12,14 +12,15 @@ export default async function AdminLayout({
   children: ReactNode;
 }) {
   return (
-    <div className="container mx-auto">
+    <div className="flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8 w-full">
-      <div className="relative h-32 w-32"></div>
+      <div className="w-full">
-      <div className="absolute inset-x-0 top-0 h-16">
+        <h1 className="mt-6 text-center font-cal text-3xl dark:text-white">
-        <h1 className="font-cal text-3xl font-bold dark:text-white mx-auto">
           Admin Page
         </h1>
+        <div className="mx-auto mt-4 w-11/12 max-w-screen-lg sm:w-full">
+          {children}
+        </div>
       </div>
-      {children}
     </div>
   );
 }