初步实现仪表盘界面布局

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

@@ -1,43 +1,104 @@
 import Page from '@/components/page'
+import Image from 'next/image'
+import banner from './_assets/banner.webp'
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card'
+import {Button} from '@/components/ui/button'
+import {getProfile} from '@/actions/auth/auth'
+import {redirect} from 'next/navigation'
+import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
 
 export type DashboardPageProps = {}
 
 export default async function DashboardPage(props: DashboardPageProps) {
 
-  return (
-    <Page mode={`blank`} className={`flex-auto grid grid-cols-4 grid-rows-4`}>
-      {/* banner */}
-      <section className={`col-start-1 row-start-1 col-span-3 bg-red-200`}>
+  const profile = await getProfile()
+  if (!profile) {
+    return redirect('/login')
+  }
 
+  return (
+    <Page className={`flex-auto grid grid-cols-4 grid-rows-[150px_minmax(200px,1fr)_minmax(200px,1fr)_minmax(200px,1fr)]`}>
+      {/* banner */}
+      <section className={`col-start-1 row-start-1 col-span-3 relative rounded-lg overflow-hidden`}>
+        <Image src={banner} alt={`banner image`} className={`w-full h-full inset-0 absolute object-cover`}/>
+        <div className={`flex flex-col absolute inset-0 justify-center px-8 gap-1`}>
+          <h3 className={`text-2xl text-primary font-medium`}>代理IP资源，先测后买</h3>
+          <p className={`text-primary font-medium`}>短效/长效/固定IP代理，一站式服务</p>
+        </div>
       </section>
 
       {/* 短效 */}
-      <section className={`col-start-1 row-start-2 bg-red-200`}>
-
-      </section>
+      <Card className={`col-start-1 row-start-2 py-4`}>
+        <CardHeader>
+          <CardTitle>短效动态套餐</CardTitle>
+        </CardHeader>
+        <CardContent className={`flex gap-4`}>
+          <div className={`flex-1 flex flex-col items-stretch justify-center gap-2`}>
+            <h4 className={`text-lg`}>包时</h4>
+            <p className={`flex justify-between`}>
+              <span>套餐数量</span>
+              <span>todo</span>
+            </p>
+            <Button className={`h-9`}>去购买</Button>
+          </div>
+          <div className={`flex-1 flex flex-col items-stretch justify-center gap-2`}>
+            <h4 className={`text-lg`}>包量</h4>
+            <p className={`flex justify-between`}>
+              <span>套餐数量</span>
+              <span>todo</span>
+            </p>
+            <Button className={`h-9`}>去购买</Button>
+          </div>
+        </CardContent>
+      </Card>
       {/* 长效 */}
-      <section className={`col-start-2 row-start-2 bg-red-200`}>
-
-      </section>
+      <Card className={`col-start-2 row-start-2`}>
+        <CardHeader>
+          <CardTitle>长效动态套餐</CardTitle>
+        </CardHeader>
+        <CardContent>
+          todo
+        </CardContent>
+      </Card>
       {/* 固定 */}
-      <section className={`col-start-3 row-start-2 bg-red-200`}>
-
-      </section>
+      <Card className={`col-start-3 row-start-2 py-4`}>
+        <CardHeader className={`px-4`}>
+          <CardTitle>固定IP套餐</CardTitle>
+        </CardHeader>
+        <CardContent className={`flex px-4 gap-4`}>
+          todo
+        </CardContent>
+      </Card>
 
       {/* 图表 */}
-      <section className={`col-start-1 row-start-3 col-span-3 row-span-2 bg-red-200`}>
-
+      <section className={`col-start-1 row-start-3 col-span-3 row-span-2`}>
+        <Tabs defaultValue={`dynamic`}>
+          <TabsList>
+            <TabsTrigger value={`dynamic`} className={`data-[state=active]:text-primary`}>动态 IP 套餐</TabsTrigger>
+            <TabsTrigger value={`static`} className={`data-[state=active]:text-primary`}>静态 IP 套餐</TabsTrigger>
+          </TabsList>
+          <TabsContent value={`dynamic`}>
+            dynamic
+          </TabsContent>
+          <TabsContent value={`static`}>
+            static
+          </TabsContent>
+        </Tabs>
       </section>
 
       {/* 信息 */}
-      <section className={`col-start-4 row-start-1 row-span-2 bg-red-200`}>
-
-      </section>
+      <Card className={`col-start-4 row-start-1 row-span-2`}>
+        <CardHeader>
+          <CardTitle>个人中心</CardTitle>
+        </CardHeader>
+      </Card>
 
       {/* 通知 */}
-      <section className={`col-start-4 row-start-3 row-span-2 bg-red-200`}>
-
-      </section>
+      <Card className={`col-start-4 row-start-3 row-span-2`}>
+        <CardHeader>
+          <CardTitle>待办事项</CardTitle>
+        </CardHeader>
+      </Card>
     </Page>
   )
 }