✨ feat: impl accounts and channels

app/page.tsx

@@ -1,19 +1,213 @@
-import { Button } from "@/components/ui/button"
+import { redirect } from "next/navigation";
+import Link from "next/link";
+import {
+  ArrowRightIcon,
+  CreditCardIcon,
+  DollarSignIcon,
+  LayersIcon,
+  PlusIcon,
+  SlidersHorizontalIcon,
+  TrendingUpIcon,
+  WalletIcon,
+} from "lucide-react";
+
+import { auth } from "@/lib/auth";
+import { AppSidebar } from "@/components/app-sidebar";
+import { AppHeader } from "@/components/app-header";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  SidebarInset,
+  SidebarProvider,
+} from "@/components/ui/sidebar";
+
+export default async function HomePage() {
+  const session = await auth();
+
+  // 若用户未登录，由于 proxy 会拦截并重定向，作为服务端页面增加双重保障
+  if (!session?.user) {
+    redirect("/login");
+  }
+
+  const user = session.user;
+  const userName = user.name || "Fluxent 用户";
+  const userEmail = user.email || "";
+  const userAvatar = user.image || null;
 
-export default function Page() {
   return (
-    <div className="flex min-h-svh p-6">
-      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
-        <div>
-          <h1 className="font-medium">Project ready!</h1>
-          <p>You may now add components and start building.</p>
-          <p>We&apos;ve already added the button component for you.</p>
-          <Button className="mt-2">Button</Button>
+    <SidebarProvider>
+      <AppSidebar
+        user={{
+          name: userName,
+          email: userEmail,
+          avatar: userAvatar,
+        }}
+      />
+      <SidebarInset>
+        <AppHeader title="控制台" />
+
+        {/* Inset Main Dashboard Content */}
+        <div className="flex flex-1 flex-col gap-6 p-4 md:p-6 lg:p-8">
+          {/* Welcome greeting banner */}
+          <div className="relative overflow-hidden rounded-2xl border border-border/80 bg-gradient-to-br from-card via-card to-muted/40 p-6 md:p-8">
+            <div className="relative z-10 flex flex-col gap-3 md:max-w-2xl">
+              <h1 className="font-heading text-2xl font-bold tracking-tight text-foreground md:text-3xl">
+                欢迎回来，{userName}
+              </h1>
+              <p className="text-sm text-muted-foreground leading-relaxed">
+                这是您的 Fluxent 多币种资产与记账中心。通过左侧导航栏，您可以轻松追踪你的资金流动、管理银行与支付卡账户、维护清晰的收支流水。
+              </p>
+
+              <div className="mt-2 flex flex-wrap items-center gap-3">
+                <Button size="sm" className="text-xs">
+                  <PlusIcon data-icon="inline-start" />
+                  记一笔交易
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="text-xs"
+                  render={<Link href="/accounts" />}
+                  nativeButton={false}
+                >
+                  <LayersIcon data-icon="inline-start" />
+                  管理资金账户
+                </Button>
+              </div>
+            </div>
+
+            {/* Subtle background decoration */}
+            <div className="pointer-events-none absolute -right-12 -bottom-12 size-64 rounded-full bg-primary/5 blur-2xl" />
+          </div>
+
+          {/* Quick Metrics & Highlights Cards (3 columns on desktop) */}
+          <div className="grid gap-4 md:grid-cols-3">
+            <Card className="border-border/70 bg-card/60 backdrop-blur-xs">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-xs font-medium text-muted-foreground">
+                  总资产估值 (CNY)
+                </CardTitle>
+                <DollarSignIcon className="size-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold tracking-tight">¥ 0.00</div>
+                <p className="mt-1 text-[11px] text-muted-foreground">
+                  暂未录入资金账户余额
+                </p>
+              </CardContent>
+            </Card>
+
+            <Card className="border-border/70 bg-card/60 backdrop-blur-xs">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-xs font-medium text-muted-foreground">
+                  活跃账户与卡片
+                </CardTitle>
+                <WalletIcon className="size-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold tracking-tight">0</div>
+                <p className="mt-1 text-[11px] text-muted-foreground">
+                  支持银行卡、信用卡、电子钱包
+                </p>
+              </CardContent>
+            </Card>
+
+            <Card className="border-border/70 bg-card/60 backdrop-blur-xs">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-xs font-medium text-muted-foreground">
+                  本月记账笔数
+                </CardTitle>
+                <TrendingUpIcon className="size-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold tracking-tight">0</div>
+                <p className="mt-1 text-[11px] text-muted-foreground">
+                  全场景交易流水自动归集
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Next Steps / Feature Guide (3 columns) */}
+          <div className="flex flex-col gap-4">
+            <h2 className="font-heading text-base font-semibold tracking-tight text-foreground">
+              开始搭建您的资产版图
+            </h2>
+            <div className="grid gap-4 md:grid-cols-3">
+              <Link
+                href="/accounts"
+                className="group flex flex-col justify-between rounded-xl border border-border/80 bg-card p-5 transition-all hover:border-foreground/30 hover:shadow-sm"
+              >
+                <div className="flex flex-col gap-2">
+                  <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                    <CreditCardIcon className="size-4.5" />
+                  </div>
+                  <h3 className="font-heading text-sm font-semibold text-foreground">
+                    1. 添加账户与支付渠道
+                  </h3>
+                  <p className="text-xs text-muted-foreground leading-relaxed">
+                    录入您的现金账户、活期存款，或绑定支持港币、美元、日元结算的跨境信用卡与电子钱包。
+                  </p>
+                </div>
+                <div className="mt-4 flex items-center gap-1 text-xs font-medium text-primary">
+                  <span>去配置账户</span>
+                  <ArrowRightIcon
+                    data-icon="inline-end"
+                    className="size-3.5 transition-transform group-hover:translate-x-0.5"
+                  />
+                </div>
+              </Link>
+
+              <div className="group flex flex-col justify-between rounded-xl border border-border/80 bg-card p-5 transition-all hover:border-foreground/30 hover:shadow-sm">
+                <div className="flex flex-col gap-2">
+                  <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                    <LayersIcon className="size-4.5" />
+                  </div>
+                  <h3 className="font-heading text-sm font-semibold text-foreground">
+                    2. 建立首笔复式流水
+                  </h3>
+                  <p className="text-xs text-muted-foreground leading-relaxed">
+                    支持自动计算交易币种到入账币种的清算汇率与手续费，让每一分折损清清楚楚。
+                  </p>
+                </div>
+                <div className="mt-4 flex items-center gap-1 text-xs font-medium text-primary">
+                  <span>新增记账</span>
+                  <ArrowRightIcon
+                    data-icon="inline-end"
+                    className="size-3.5 transition-transform group-hover:translate-x-0.5"
+                  />
+                </div>
+              </div>
+
+              <div className="group flex flex-col justify-between rounded-xl border border-border/80 bg-card p-5 transition-all hover:border-foreground/30 hover:shadow-sm">
+                <div className="flex flex-col gap-2">
+                  <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                    <SlidersHorizontalIcon className="size-4.5" />
+                  </div>
+                  <h3 className="font-heading text-sm font-semibold text-foreground">
+                    3. 账户首选项与设置
+                  </h3>
+                  <p className="text-xs text-muted-foreground leading-relaxed">
+                    配置个人偏好货币、导出记账数据或连接外部服务。
+                  </p>
+                </div>
+                <div className="mt-4 flex items-center gap-1 text-xs font-medium text-primary">
+                  <span>偏好设置</span>
+                  <ArrowRightIcon
+                    data-icon="inline-end"
+                    className="size-3.5 transition-transform group-hover:translate-x-0.5"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div className="font-mono text-xs text-muted-foreground">
-          (Press <kbd>d</kbd> to toggle dark mode)
-        </div>
-      </div>
-    </div>
-  )
+      </SidebarInset>
+    </SidebarProvider>
+  );
 }