create-nextdevtpl 2.6.0

package/template/src/features/settings/actions/delete-account.ts

@@ -0,0 +1,50 @@
+"use server";
+
+import { eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { db, user } from "@/db";
+import { subscription } from "@/db/schema/subscription";
+import { protectedAction } from "@/lib/safe-action";
+import { paymentService } from "@/services/payment";
+
+export const deleteAccountAction = protectedAction
+  .metadata({ action: "settings.deleteAccount" })
+  .schema(z.object({ confirm: z.literal(true) }))
+  .action(async ({ ctx }) => {
+    const [activeSubscription] = await db
+      .select({
+        subscriptionId: subscription.subscriptionId,
+        status: subscription.status,
+        cancelAtPeriodEnd: subscription.cancelAtPeriodEnd,
+      })
+      .from(subscription)
+      .where(eq(subscription.userId, ctx.userId))
+      .limit(1);
+
+    if (
+      activeSubscription?.subscriptionId &&
+      !activeSubscription.cancelAtPeriodEnd &&
+      ["active", "trialing", "past_due", "paused"].includes(
+        activeSubscription.status
+      )
+    ) {
+      await paymentService.cancelSubscription(
+        activeSubscription.subscriptionId
+      );
+    }
+
+    const [deletedUser] = await db
+      .delete(user)
+      .where(eq(user.id, ctx.userId))
+      .returning({ id: user.id });
+
+    if (!deletedUser) {
+      throw new Error("删除账户失败，请稍后重试");
+    }
+
+    return {
+      success: true,
+      message: "账户已删除",
+    };
+  });

package/template/src/features/settings/actions/index.ts

@@ -0,0 +1,3 @@
+// Settings feature - action exports
+export { deleteAccountAction } from "./delete-account";
+export { updateProfileAction } from "./update-profile";

package/template/src/features/settings/actions/update-profile.ts

@@ -0,0 +1,49 @@
+"use server";
+
+import { eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+
+import { db, user } from "@/db";
+import { updateProfileSchema } from "@/features/settings/schemas";
+import { protectedAction } from "@/lib/safe-action";
+
+/**
+ * 更新用户资料 Server Action
+ *
+ * 功能:
+ * - 验证用户已登录 (通过 protectedAction 中间件)
+ * - 更新数据库中的用户名称和头像
+ * - 刷新设置页面缓存
+ *
+ * @param data - 包含 name 和/或 image 字段的对象
+ * @returns 成功消息
+ */
+export const updateProfileAction = protectedAction
+  .metadata({ action: "settings.updateProfile" })
+  .schema(updateProfileSchema)
+  .action(async ({ parsedInput: data, ctx }) => {
+    // 构建更新对象
+    const updateData: { name?: string; image?: string; updatedAt: Date } = {
+      updatedAt: new Date(),
+    };
+
+    // 如果提供了 name，添加到更新对象
+    if (data.name !== undefined) {
+      updateData.name = data.name;
+    }
+
+    // 如果提供了 image，添加到更新对象
+    if (data.image !== undefined) {
+      updateData.image = data.image;
+    }
+
+    // 使用 Drizzle 更新用户资料
+    await db.update(user).set(updateData).where(eq(user.id, ctx.userId));
+
+    // 刷新设置页面缓存，使 UI 更新
+    revalidatePath("/dashboard/settings");
+
+    return {
+      message: "资料更新成功",
+    };
+  });

package/template/src/features/settings/components/billing-section.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+/**
+ * 账单设置组件
+ *
+ * Settings > Billing Tab 的主要内容
+ * 包含:
+ * - 当前订阅计划
+ * - 支付方式
+ * - 账单历史
+ */
+
+import { Loader2, Receipt, Sparkles } from "lucide-react";
+import { useLocale, useTranslations } from "next-intl";
+import { useAction } from "next-safe-action/hooks";
+import { useEffect, useMemo, useState, useTransition } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { findPlanByPriceId } from "@/config/payment";
+import {
+  PLAN_PRIVILEGES,
+  type SubscriptionPlan,
+} from "@/config/subscription-plan";
+import { cancelSubscription } from "@/features/payment/actions";
+import { getMyPlanAction } from "@/features/subscription/actions";
+import { PlanBadge, type PlanType } from "@/features/subscription/components";
+import { Link } from "@/i18n/routing";
+
+/**
+ * 账单设置组件
+ */
+export function BillingSection() {
+  const t = useTranslations("Settings.billing");
+  const locale = useLocale();
+
+  // 获取用户订阅计划
+  const { execute: fetchPlan, result: planResult } = useAction(getMyPlanAction);
+  const userPlan = (planResult.data?.plan as PlanType) || "free";
+  const planConfig = PLAN_PRIVILEGES[userPlan as SubscriptionPlan];
+  const isCancelPending = planResult.data?.cancelAtPeriodEnd ?? false;
+
+  // 取消订阅
+  const [isCancelling, startCancelTransition] = useTransition();
+  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+
+  // 计算续期日期和价格
+  const renewalDate = useMemo(() => {
+    const iso = planResult.data?.currentPeriodEnd;
+    if (!iso) return null;
+    return new Date(iso);
+  }, [planResult.data?.currentPeriodEnd]);
+
+  const formattedRenewalDate = renewalDate
+    ? renewalDate.toLocaleDateString(locale === "zh" ? "zh-CN" : "en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      })
+    : null;
+
+  const priceDisplay = useMemo(() => {
+    if (userPlan === "free") return "$0";
+    const priceId = planResult.data?.priceId;
+    if (!priceId) return "-";
+    const { price } = findPlanByPriceId(priceId);
+    if (!price) return "-";
+    return `$${price.amount}`;
+  }, [userPlan, planResult.data?.priceId]);
+
+  const priceInterval = useMemo(() => {
+    if (userPlan === "free") return t("currentPlan.perMonth");
+    const priceId = planResult.data?.priceId;
+    if (!priceId) return "";
+    const { price } = findPlanByPriceId(priceId);
+    if (!price) return "";
+    return price.interval === "yearly"
+      ? t("currentPlan.perYear")
+      : t("currentPlan.perMonth");
+  }, [userPlan, planResult.data?.priceId, t]);
+
+  // 组件挂载时获取计划
+  useEffect(() => {
+    fetchPlan();
+  }, [fetchPlan]);
+
+  // 处理取消订阅
+  const handleCancelSubscription = () => {
+    startCancelTransition(async () => {
+      try {
+        await cancelSubscription();
+        setCancelDialogOpen(false);
+        fetchPlan(); // 刷新状态
+      } catch (error) {
+        console.error("Failed to cancel subscription:", error);
+      }
+    });
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* 当前计划 */}
+      <section className="space-y-6">
+        <div>
+          <h2 className="text-xl font-semibold">{t("currentPlan.title")}</h2>
+          <p className="text-sm text-muted-foreground">
+            {t("currentPlan.description")}
+          </p>
+        </div>
+
+        <div className="rounded-lg border p-6">
+          <div className="flex items-start justify-between">
+            <div className="flex items-center gap-4">
+              <PlanBadge plan={userPlan} size="lg" showLabel={false} />
+              <div>
+                <div className="flex items-center gap-2">
+                  <h3 className="text-lg font-semibold">
+                    {planConfig.name} Plan
+                  </h3>
+                  <Badge variant="secondary">{t("currentPlan.current")}</Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {userPlan === "free"
+                    ? t("currentPlan.basicFeatures")
+                    : t("currentPlan.premiumFeatures")}
+                </p>
+              </div>
+            </div>
+            {userPlan === "free" && (
+              <Button asChild>
+                <Link href="/#pricing">
+                  <Sparkles className="mr-2 h-4 w-4" />
+                  {t("currentPlan.upgradePlan")}
+                </Link>
+              </Button>
+            )}
+            {userPlan !== "free" && (
+              <div className="flex items-center gap-2">
+                {isCancelPending ? (
+                  <Badge variant="secondary" className="text-warning">
+                    {t("currentPlan.cancelPending", {
+                      date: formattedRenewalDate ?? "",
+                    })}
+                  </Badge>
+                ) : (
+                  <AlertDialog
+                    open={cancelDialogOpen}
+                    onOpenChange={setCancelDialogOpen}
+                  >
+                    <AlertDialogTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="text-muted-foreground"
+                      >
+                        {t("currentPlan.cancelSubscription")}
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>
+                          {t("currentPlan.cancelDialog.title")}
+                        </AlertDialogTitle>
+                        <AlertDialogDescription className="space-y-2">
+                          <span className="block">
+                            {t("currentPlan.cancelDialog.description", {
+                              date: formattedRenewalDate ?? "",
+                            })}
+                          </span>
+                          <span className="block font-medium text-foreground">
+                            {t("currentPlan.cancelDialog.keepBenefits", {
+                              date: formattedRenewalDate ?? "",
+                            })}
+                          </span>
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>
+                          {t("currentPlan.cancelDialog.cancel")}
+                        </AlertDialogCancel>
+                        <AlertDialogAction
+                          onClick={handleCancelSubscription}
+                          disabled={isCancelling}
+                          className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                        >
+                          {isCancelling && (
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          )}
+                          {t("currentPlan.cancelDialog.confirm")}
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                )}
+              </div>
+            )}
+          </div>
+
+          <Separator className="my-4" />
+
+          <div className="grid grid-cols-3 gap-4 text-sm">
+            <div>
+              <p className="text-muted-foreground">
+                {t("currentPlan.monthlyCredits")}
+              </p>
+              <p className="font-medium">
+                {planConfig.monthlyCredits.toLocaleString()} credits
+              </p>
+            </div>
+            <div>
+              <p className="text-muted-foreground">
+                {t("currentPlan.renewalDate")}
+              </p>
+              <p
+                className={`font-medium ${isCancelPending ? "text-warning" : ""}`}
+              >
+                {formattedRenewalDate ?? t("currentPlan.notApplicable")}
+              </p>
+            </div>
+            <div>
+              <p className="text-muted-foreground">{t("currentPlan.price")}</p>
+              <p className="font-medium">
+                {priceDisplay}
+                {priceInterval && (
+                  <span className="text-muted-foreground font-normal">
+                    {" "}
+                    /{priceInterval}
+                  </span>
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Separator />
+
+      {/* 账单历史 */}
+      <section className="space-y-6">
+        <div>
+          <h2 className="text-xl font-semibold">{t("history.title")}</h2>
+          <p className="text-sm text-muted-foreground">
+            {t("history.description")}
+          </p>
+        </div>
+
+        {/* 表格 */}
+        <div className="rounded-lg border">
+          {/* 表头 */}
+          <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-muted/50 text-sm font-medium text-muted-foreground">
+            <div className="col-span-3">{t("history.date")}</div>
+            <div className="col-span-4">{t("history.historyDescription")}</div>
+            <div className="col-span-2 text-right">{t("history.amount")}</div>
+            <div className="col-span-2 text-center">{t("history.status")}</div>
+            <div className="col-span-1 text-center">{t("history.invoice")}</div>
+          </div>
+
+          <Separator />
+
+          {/* 空状态 */}
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <Receipt className="h-12 w-12 text-muted-foreground/50 mb-4" />
+            <p className="text-muted-foreground">{t("history.noHistory")}</p>
+            <p className="text-sm text-muted-foreground/70">
+              {t("history.noHistoryHint")}
+            </p>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

package/template/src/features/settings/components/index.ts

@@ -0,0 +1,3 @@
+// 设置功能 - 组件导出
+export { ProfileForm } from "./profile-form";
+export { SettingsProfileView } from "./settings-profile-view";

package/template/src/features/settings/components/profile-form.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import { useAction } from "next-safe-action/hooks";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import type { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { updateProfileAction } from "@/features/settings/actions";
+import { updateProfileSchema } from "@/features/settings/schemas";
+
+/**
+ * ProfileForm Props 类型
+ */
+interface ProfileFormProps {
+  /** 初始数据，用于填充表单默认值 */
+  initialData: {
+    name: string;
+  };
+}
+
+/**
+ * 表单数据类型，从 Zod Schema 推断
+ */
+type FormValues = z.infer<typeof updateProfileSchema>;
+
+/**
+ * 个人资料表单组件
+ *
+ * 功能:
+ * - 显示用户当前名称
+ * - 允许用户修改名称
+ * - 表单验证 (使用 Zod)
+ * - 提交时调用 Server Action 更新数据库
+ * - 显示成功/错误 Toast 通知
+ */
+export function ProfileForm({ initialData }: ProfileFormProps) {
+  /**
+   * 使用 react-hook-form 创建表单实例
+   * - zodResolver: 使用 Zod schema 进行验证
+   * - defaultValues: 初始值来自服务端传入的数据
+   */
+  const form = useForm<FormValues>({
+    resolver: zodResolver(updateProfileSchema),
+    defaultValues: {
+      name: initialData.name,
+    },
+  });
+
+  /**
+   * 使用 next-safe-action 的 useAction Hook
+   * 绑定 updateProfileAction Server Action
+   */
+  const { execute, isPending } = useAction(updateProfileAction, {
+    /**
+     * 操作成功回调
+     */
+    onSuccess: ({ data }) => {
+      if (data?.message) {
+        toast.success(data.message);
+      }
+    },
+    /**
+     * 操作失败回调
+     */
+    onError: ({ error }) => {
+      // 显示服务器返回的错误信息
+      if (error.serverError) {
+        toast.error(error.serverError);
+      }
+      // 显示验证错误信息
+      if (error.validationErrors) {
+        const errors = Object.values(error.validationErrors).flat();
+        toast.error(errors.join(", ") || "验证失败");
+      }
+    },
+  });
+
+  /**
+   * 表单提交处理函数
+   */
+  const onSubmit = (values: FormValues) => {
+    execute(values);
+  };
+
+  return (
+    <Card className="max-w-2xl">
+      {/* 卡片头部 */}
+      <CardHeader>
+        <CardTitle>General Settings</CardTitle>
+        <CardDescription>
+          更新您的个人资料信息。这些信息将在您的公开资料中显示。
+        </CardDescription>
+      </CardHeader>
+
+      {/* 表单内容 */}
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <CardContent className="space-y-4">
+            {/* 显示名称输入字段 */}
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Display Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="请输入您的名称"
+                      disabled={isPending}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    这是您的公开显示名称，最少 2 个字符。
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+
+          {/* 卡片底部 - 提交按钮 */}
+          <CardFooter className="border-t pt-6">
+            <Button type="submit" disabled={isPending}>
+              {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {isPending ? "Saving..." : "Save Changes"}
+            </Button>
+          </CardFooter>
+        </form>
+      </Form>
+    </Card>
+  );
+}