添加新的颜色变量；更新仪表板页面布局

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

@@ -2,14 +2,24 @@ 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 {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
+import soon from './_assets/coming-soon.svg'
+import {getProfile} from '@/actions/auth'
+import {format} from 'date-fns'
+import {CheckCircleIcon, CircleAlertIcon, LinkIcon} from 'lucide-react'
+import {Button} from '@/components/ui/button'
+import RechargeModal from '@/components/composites/recharge'
+import {merge} from '@/lib/utils'
 
 export type DashboardPageProps = {}
 
 export default async function DashboardPage(props: DashboardPageProps) {
   return (
-    <Page className={`flex-auto grid grid-cols-4 grid-rows-[150px_minmax(200px,1fr)_minmax(200px,1fr)_minmax(200px,1fr)]`}>
+    <Page className={merge(
+      `flex-auto grid`,
+      `grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_300px]`,
+      `grid-rows-[150px_200px_minmax(150px,1fr)_minmax(150px,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`}/>
@@ -24,22 +34,21 @@ export default async function DashboardPage(props: DashboardPageProps) {
         <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>
+        <CardContent className={`flex-auto flex flex-col gap-2`}>
+          <div className={`flex-1 flex items-center justify-between`}>
+            <h4>包时</h4>
+            <p className={`flex flex-col items-end`}>
+              <span className={`text-sm text-weak`}>当日可提取数量</span>
+              <span className={`text-lg`}>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>
+          <div className={`border-b`}></div>
+          <div className={`flex-1 flex items-center justify-between`}>
+            <h4>包量</h4>
+            <p className={`flex flex-col items-end`}>
+              <span className={`text-sm text-weak`}>剩余可提取数量</span>
+              <span className={`text-lg`}>todo</span>
             </p>
-            <Button className={`h-9`}>去购买</Button>
           </div>
         </CardContent>
       </Card>
@@ -49,17 +58,20 @@ export default async function DashboardPage(props: DashboardPageProps) {
         <CardHeader>
           <CardTitle>长效动态套餐</CardTitle>
         </CardHeader>
-        <CardContent>
-          todo
+        <CardContent className={`flex-auto flex flex-col gap-2 items-center justify-center`}>
+          <Image alt={`coming soon`} src={soon}/>
+          <p>敬请期待</p>
         </CardContent>
       </Card>
+
       {/* 固定 */}
       <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 className={`flex-auto flex flex-col gap-2 items-center justify-center`}>
+          <Image alt={`coming soon`} src={soon}/>
+          <p>敬请期待</p>
         </CardContent>
       </Card>
 
@@ -80,18 +92,89 @@ export default async function DashboardPage(props: DashboardPageProps) {
       </section>
 
       {/* 信息 */}
-      <Card className={`col-start-4 row-start-1 row-span-2`}>
-        <CardHeader>
-          <CardTitle>个人中心</CardTitle>
-        </CardHeader>
-      </Card>
+      <UserCenter/>
 
       {/* 通知 */}
       <Card className={`col-start-4 row-start-3 row-span-2`}>
         <CardHeader>
-          <CardTitle>待办事项</CardTitle>
+          <CardTitle>通知</CardTitle>
         </CardHeader>
+        <CardContent>
+          todo
+        </CardContent>
       </Card>
     </Page>
   )
 }
+
+async function UserCenter() {
+
+  const resp = await getProfile()
+  if (!resp.success) {
+    return (
+      <div className={`col-start-4 row-start-1 row-span-2 flex justify-center items-center`}>
+        获取用户数据失败
+      </div>
+    )
+  }
+
+  const profile = resp.data
+  return (
+    <Card className={`col-start-4 row-start-1 row-span-2`}>
+      <CardContent className={`flex-auto flex flex-col justify-between`}>
+        <div className={`flex flex-col gap-1`}>
+          <p>{profile.phone}</p>
+          <p className={`text-sm text-weak`}>{`最后登录：${format(profile.last_login, 'yyyy-MM-dd HH:mm')}`}</p>
+        </div>
+        <div className={merge(
+          `flex justify-between  p-2 rounded-md`,
+          profile.id_token ? `bg-done-muted` : `bg-warn-muted`,
+        )}>
+          {profile.id_token
+            ? <>
+              <div className={`flex gap-2 items-center`}>
+                <CheckCircleIcon size={20} className={`text-done`}/>
+                <span>已实名</span>
+              </div>
+              <div className={`flex flex-col items-end`}>
+                <span className={`text-sm`}>{profile.name}</span>
+                <span className={`text-xs text-weak`}>{profile.id_no}</span>
+              </div>
+            </>
+            : <>
+              <span className={`flex gap-2 items-center`}>
+                <CircleAlertIcon className={`text-warn`}/>
+                <span>未实名</span>
+              </span>
+              <Button className={`h-9`}>去实名</Button>
+            </>
+          }
+        </div>
+        <div className={`flex flex-col gap-1`}>
+          <h4 className={`text-sm text-weak`}>账户余额</h4>
+          <div className={`flex justify-between items-baseline`}>
+            <p className={`text-xl text-accent`}>￥{profile.balance}</p>
+            <RechargeModal/>
+          </div>
+        </div>
+        <div className={`flex flex-col gap-3`}>
+          <h4 className={`text-sm text-weak`}>快捷入口</h4>
+          <div className={`flex justify-around gap-2`}>
+            <Button theme={`ghost`} className={`flex flex-col gap-2 h-auto p-2`}>
+              <LinkIcon className={`size-8`}/>
+              <span>功能入口</span>
+            </Button>
+            <Button theme={`ghost`} className={`flex flex-col gap-2 h-auto p-2`}>
+              <LinkIcon className={`size-8`}/>
+              <span>功能入口</span>
+            </Button>
+            <Button theme={`ghost`} className={`flex flex-col gap-2 h-auto p-2`}>
+              <LinkIcon className={`size-8`}/>
+              <span>功能入口</span>
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/app/globals.css

@@ -21,12 +21,15 @@
 
   --done: oklch(0.65 0.16 145);
   --done-text: oklch(1 0 0);
+  --done-muted: oklch(0.965 0.024 145);
 
   --warn: oklch(0.72 0.16 55);
   --warn-text: oklch(1 0 0);
+  --warn-muted: oklch(0.965 0.024 55);
 
   --fail: oklch(0.65 0.16 25);
   --fail-text: oklch(1 0 0);
+  --fail-muted: oklch(0.965 0.024 25);
 
   --card: oklch(1 0 0);
   --card-text: oklch(0.25 0 0);
@@ -71,12 +74,15 @@
 
   --color-done: var(--done);
   --color-done-foreground: var(--done-text);
+  --color-done-muted: var(--done-muted);
 
   --color-warn: var(--warn);
   --color-warn-foreground: var(--warn-text);
+  --color-warn-muted: var(--warn-muted);
 
   --color-fail: var(--fail);
   --color-fail-foreground: var(--fail-text);
+  --color-fail-muted: var(--fail-muted);
 
   --color-card: var(--card);
   --color-card-foreground: var(--card-text);