214 lines
9.1 KiB
TypeScript
214 lines
9.1 KiB
TypeScript
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;
|
|
|
|
return (
|
|
<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>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
);
|
|
}
|