create-nextdevtpl 2.6.0

package/template/src/app/[locale]/(dashboard)/dashboard/credits/buy/buy-credits-view.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+/**
+ * 购买积分套餐视图组件
+ *
+ * 显示积分套餐列表，允许用户选择并购买
+ */
+
+import { Check, Coins, Loader2, Sparkles } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useAction } from "next-safe-action/hooks";
+import { useEffect } from "react";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { createCreditsPurchaseCheckout } from "@/features/credits/actions";
+import { CREDIT_PACKAGES } from "@/features/credits/config";
+import { cn } from "@/lib/utils";
+
+/**
+ * 购买积分套餐视图
+ */
+export function BuyCreditPackagesView() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const canceled = searchParams.get("canceled");
+
+  // 创建 Checkout Session
+  const { execute, isPending } = useAction(createCreditsPurchaseCheckout, {
+    onSuccess: ({ data }) => {
+      if (data?.url) {
+        window.location.href = data.url;
+      }
+    },
+    onError: ({ error }) => {
+      toast.error(error.serverError ?? "创建支付会话失败");
+    },
+  });
+
+  // 显示取消提示
+  useEffect(() => {
+    if (canceled) {
+      toast.info("支付已取消");
+      // 清除 URL 参数
+      router.replace("/dashboard/credits/buy");
+    }
+  }, [canceled, router]);
+
+  /**
+   * 处理购买按钮点击
+   */
+  const handlePurchase = (packageId: "lite" | "standard" | "pro") => {
+    execute({ packageId });
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-8">
+      {/* 页面标题 */}
+      <div className="text-center space-y-2">
+        <h1 className="text-3xl font-bold">Purchase Credits</h1>
+        <p className="text-muted-foreground">
+          Choose a credit package to unlock AI features and capabilities
+        </p>
+      </div>
+
+      {/* 套餐列表 */}
+      <div className="grid gap-6 md:grid-cols-3">
+        {CREDIT_PACKAGES.map((pkg) => {
+          const isPopular = "popular" in pkg && pkg.popular;
+
+          return (
+            <Card
+              key={pkg.id}
+              className={cn(
+                "relative flex flex-col",
+                isPopular && "border-primary shadow-soft"
+              )}
+            >
+              {/* 热门标签 */}
+              {isPopular && (
+                <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 gap-1">
+                  <Sparkles className="h-3 w-3" />
+                  Most Popular
+                </Badge>
+              )}
+
+              <CardHeader className="text-center pb-4">
+                <CardTitle className="text-xl">{pkg.name}</CardTitle>
+                <CardDescription>{pkg.description}</CardDescription>
+              </CardHeader>
+
+              <CardContent className="flex-1 space-y-4">
+                {/* 积分数量 */}
+                <div className="flex items-center justify-center gap-2">
+                  <Coins className="h-6 w-6 text-warning" />
+                  <span className="text-4xl font-bold">{pkg.credits}</span>
+                  <span className="text-muted-foreground">credits</span>
+                </div>
+
+                <Separator />
+
+                {/* 价格 */}
+                <div className="text-center">
+                  <span className="text-3xl font-bold">${pkg.price}</span>
+                  <span className="text-muted-foreground"> USD</span>
+                </div>
+
+                {/* 特性列表 */}
+                <ul className="space-y-2 text-sm">
+                  <li className="flex items-center gap-2">
+                    <Check className="h-4 w-4 text-success" />
+                    <span>Instant delivery</span>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <Check className="h-4 w-4 text-success" />
+                    <span>Valid for 90 days</span>
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <Check className="h-4 w-4 text-success" />
+                    <span>Use for all AI features</span>
+                  </li>
+                </ul>
+              </CardContent>
+
+              <CardFooter>
+                <Button
+                  className="w-full"
+                  variant={isPopular ? "default" : "outline"}
+                  disabled={isPending}
+                  onClick={() =>
+                    handlePurchase(pkg.id as "lite" | "standard" | "pro")
+                  }
+                >
+                  {isPending ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Processing...
+                    </>
+                  ) : (
+                    `Buy ${pkg.name}`
+                  )}
+                </Button>
+              </CardFooter>
+            </Card>
+          );
+        })}
+      </div>
+
+      {/* 返回链接 */}
+      <div className="text-center">
+        <Button
+          variant="ghost"
+          onClick={() => router.push("/dashboard/settings?tab=usage")}
+        >
+          ← Back to Usage
+        </Button>
+      </div>
+    </div>
+  );
+}

package/template/src/app/[locale]/(dashboard)/dashboard/credits/buy/page.tsx

@@ -0,0 +1,12 @@
+import { redirect } from "next/navigation";
+
+/**
+ * 购买积分页面 - 暂时禁用
+ *
+ * 积分包购买功能暂时隐藏，重定向到设置页面
+ * TODO: 未来启用时恢复此页面
+ */
+export default async function BuyCreditsPage() {
+  // 暂时禁用积分包购买，重定向到设置页面
+  redirect("/dashboard/settings?tab=usage");
+}

package/template/src/app/[locale]/(dashboard)/dashboard/credits/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function CreditsPage() {
+  redirect("/dashboard/settings?tab=usage");
+}

package/template/src/app/[locale]/(dashboard)/dashboard/loading.tsx

@@ -0,0 +1,41 @@
+/**
+ * Dashboard 页面加载骨架屏
+ *
+ * Next.js App Router 会在页面数据获取时自动显示此组件
+ * 提供即时视觉反馈，避免页面切换时的"卡顿"感
+ */
+export default function DashboardLoading() {
+  return (
+    <div className="container mx-auto py-6 px-4 md:px-6 animate-pulse">
+      {/* 页面标题骨架 */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="space-y-2">
+          <div className="h-8 w-48 bg-muted rounded" />
+          <div className="h-4 w-64 bg-muted rounded" />
+        </div>
+        <div className="h-10 w-32 bg-muted rounded" />
+      </div>
+
+      {/* 内容区域骨架 */}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton list
+          <div key={i} className="rounded-lg border p-6 space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-full bg-muted" />
+              <div className="space-y-2 flex-1">
+                <div className="h-4 w-3/4 bg-muted rounded" />
+                <div className="h-3 w-1/2 bg-muted rounded" />
+              </div>
+            </div>
+            <div className="h-20 w-full bg-muted rounded" />
+            <div className="flex gap-2">
+              <div className="h-8 w-20 bg-muted rounded" />
+              <div className="h-8 w-20 bg-muted rounded" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/src/app/[locale]/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,299 @@
+import { eq } from "drizzle-orm";
+import {
+  ArrowRight,
+  Coins,
+  Headset,
+  Settings,
+  TrendingDown,
+  TrendingUp,
+} from "lucide-react";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { db } from "@/db";
+import { creditsBalance } from "@/db/schema/credits";
+import { getUserTransactions } from "@/features/credits";
+import { getUserPlan } from "@/features/subscription";
+import { Link } from "@/i18n/routing";
+import { auth } from "@/lib/auth";
+
+/**
+ * 积分"进账"类型（用于最近动态里判断 +/- 方向与配色）
+ * 其余类型（consumption / expiration）按支出处理
+ */
+const GAIN_TYPES = new Set([
+  "purchase",
+  "monthly_grant",
+  "registration_bonus",
+  "admin_grant",
+  "refund",
+]);
+
+export default async function DashboardPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const t = await getTranslations({
+    locale,
+    namespace: "DashboardPages.dashboard",
+  });
+
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session?.user) {
+    redirect("/sign-in");
+  }
+
+  const userId = session.user.id;
+
+  // 并行拉真实数据：积分余额 / 订阅计划 / 最近交易
+  const [balanceData, userPlan, transactions] = await Promise.all([
+    db.query.creditsBalance.findFirst({
+      where: eq(creditsBalance.userId, userId),
+    }),
+    getUserPlan(userId),
+    getUserTransactions(userId, { limit: 6 }),
+  ]);
+
+  const balance = balanceData?.balance ?? 0;
+  const totalEarned = balanceData?.totalEarned ?? 0;
+  const totalSpent = balanceData?.totalSpent ?? 0;
+
+  const dateFormatter = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+  });
+
+  // 计划卡：续期 / 取消 / 免费的副标题
+  let planHint = t("planCard.free");
+  if (userPlan.hasActiveSubscription && userPlan.currentPeriodEnd) {
+    const date = dateFormatter.format(new Date(userPlan.currentPeriodEnd));
+    planHint = userPlan.cancelAtPeriodEnd
+      ? t("planCard.cancels", { date })
+      : t("planCard.renews", { date });
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* 标题 */}
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{t("title")}</h1>
+        <p className="text-muted-foreground">{t("subtitle")}</p>
+      </div>
+
+      {/* 指标卡 */}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          accent
+          hint={t("stats.credits.description")}
+          icon={Coins}
+          label={t("stats.credits.title")}
+          mono
+          value={balance.toLocaleString()}
+        />
+        <StatCard
+          hint={t("stats.plan.description")}
+          icon={TrendingUp}
+          label={t("stats.plan.title")}
+          value={userPlan.planName}
+        />
+        <StatCard
+          hint={t("stats.earned.description")}
+          icon={TrendingUp}
+          label={t("stats.earned.title")}
+          mono
+          value={`+${totalEarned.toLocaleString()}`}
+        />
+        <StatCard
+          hint={t("stats.spent.description")}
+          icon={TrendingDown}
+          label={t("stats.spent.title")}
+          mono
+          value={`−${totalSpent.toLocaleString()}`}
+        />
+      </div>
+
+      {/* 主体网格：最近动态（2 列）+ 计划卡 / 快捷操作（1 列） */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* 最近动态 */}
+        <Card className="gap-0 py-0 shadow-none lg:col-span-2">
+          <div className="flex items-center justify-between p-6 pb-4">
+            <h3 className="font-semibold tracking-tight">
+              {t("transactions.title")}
+            </h3>
+            <Button
+              variant="ghost"
+              size="sm"
+              asChild
+              className="text-muted-foreground"
+            >
+              <Link href="/dashboard/settings">
+                {t("transactions.viewAll")}
+                <ArrowRight className="h-3.5 w-3.5" />
+              </Link>
+            </Button>
+          </div>
+          <div className="border-t px-6 pb-4">
+            {transactions.length === 0 ? (
+              <EmptyState text={t("transactions.empty")} />
+            ) : (
+              <ul className="divide-y divide-border">
+                {transactions.map((tx) => {
+                  const gain = GAIN_TYPES.has(tx.type);
+                  const Icon = gain ? TrendingUp : TrendingDown;
+                  return (
+                    <li
+                      key={tx.id}
+                      className="flex items-center gap-3 py-3 first:pt-4 last:pb-1"
+                    >
+                      <span
+                        className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${
+                          gain
+                            ? "bg-success/15 text-success"
+                            : "bg-muted text-muted-foreground"
+                        }`}
+                      >
+                        <Icon className="h-4 w-4" />
+                      </span>
+                      <div className="min-w-0 flex-1">
+                        <div className="truncate text-sm font-medium">
+                          {tx.description ?? tx.type.replace(/_/g, " ")}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {dateFormatter.format(new Date(tx.createdAt))}
+                        </div>
+                      </div>
+                      <div
+                        className={`mono-data text-sm font-semibold ${
+                          gain ? "text-success" : "text-foreground"
+                        }`}
+                      >
+                        {gain ? "+" : "−"}
+                        {tx.amount.toLocaleString()}
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        </Card>
+
+        {/* 侧栏：计划卡 + 快捷操作 */}
+        <div className="space-y-6">
+          <Card className="gap-0 py-0 shadow-none">
+            <div className="p-6">
+              <span className="eyebrow">{t("stats.plan.title")}</span>
+              <div className="mt-4 text-2xl font-bold tracking-tight">
+                {userPlan.planName}
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground">{planHint}</p>
+              <Button
+                asChild
+                size="sm"
+                className="mt-5 w-full"
+                variant={userPlan.hasActiveSubscription ? "outline" : "default"}
+              >
+                <Link href="/dashboard/settings">
+                  {userPlan.hasActiveSubscription
+                    ? t("planCard.manage")
+                    : t("planCard.upgrade")}
+                </Link>
+              </Button>
+            </div>
+          </Card>
+
+          <Card className="gap-0 p-2 shadow-none">
+            <QuickAction href="/dashboard/credits/buy" icon={Coins}>
+              {t("actions.credits")}
+            </QuickAction>
+            <QuickAction href="/dashboard/settings" icon={Settings}>
+              {t("actions.settings")}
+            </QuickAction>
+            <QuickAction href="/dashboard/support" icon={Headset}>
+              {t("actions.support")}
+            </QuickAction>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** 指标小卡 */
+function StatCard({
+  accent = false,
+  hint,
+  icon: Icon,
+  label,
+  mono = false,
+  value,
+}: {
+  accent?: boolean;
+  hint: string;
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  mono?: boolean;
+  value: string;
+}) {
+  return (
+    <Card className="gap-0 py-0 shadow-none">
+      <div className="p-5">
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-medium text-muted-foreground">
+            {label}
+          </span>
+          <Icon
+            className={`h-4 w-4 ${accent ? "text-primary" : "text-muted-foreground/60"}`}
+          />
+        </div>
+        <div
+          className={`mt-3 text-2xl font-bold tracking-tight ${
+            mono ? "mono-data" : ""
+          } ${accent ? "text-primary" : "text-foreground"}`}
+        >
+          {value}
+        </div>
+        <div className="mt-1 text-xs text-muted-foreground">{hint}</div>
+      </div>
+    </Card>
+  );
+}
+
+/** 空状态 */
+function EmptyState({ text }: { text: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 py-10 text-center">
+      <span className="flex h-10 w-10 items-center justify-center rounded-full bg-muted text-muted-foreground">
+        <Coins className="h-5 w-5" />
+      </span>
+      <p className="max-w-xs text-sm text-muted-foreground">{text}</p>
+    </div>
+  );
+}
+
+/** 快捷操作行 */
+function QuickAction({
+  href,
+  icon: Icon,
+  children,
+}: {
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link
+      href={href}
+      className="flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors hover:bg-muted"
+    >
+      <Icon className="h-4 w-4 text-muted-foreground" />
+      <span className="flex-1">{children}</span>
+      <ArrowRight className="h-3.5 w-3.5 text-muted-foreground/50" />
+    </Link>
+  );
+}

package/template/src/app/[locale]/(dashboard)/dashboard/settings/page.tsx

@@ -0,0 +1,38 @@
+import { redirect } from "next/navigation";
+import { SettingsProfileView } from "@/features/settings";
+import { getServerSession } from "@/lib/auth/server";
+
+/**
+ * 设置页面元数据
+ */
+export const metadata = {
+  title: "Settings | NextDevTpl",
+  description: "管理您的账户设置和偏好",
+};
+
+/**
+ * 用户设置页面
+ *
+ * Server Component - 在服务端获取用户数据
+ * 将数据传递给客户端 SettingsProfileView 组件
+ */
+export default async function SettingsPage() {
+  // 获取当前用户会话
+  const session = await getServerSession();
+
+  // 如果用户未登录，重定向到登录页
+  if (!session?.user) {
+    redirect("/sign-in");
+  }
+
+  return (
+    <SettingsProfileView
+      user={{
+        id: session.user.id,
+        name: session.user.name || "",
+        email: session.user.email || "",
+        image: session.user.image,
+      }}
+    />
+  );
+}