create-nextdevtpl 2.6.0

package/template/src/features/marketing/components/testimonials.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { Quote } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+import { Reveal } from "@/components/motion/reveal";
+
+export function Testimonials() {
+  const t = useTranslations("Testimonials");
+
+  // 取前 3 条，保持页面紧凑
+  const testimonialItems = [0, 1, 2].map((i) => ({
+    content: t(`items.${i}.content`),
+    author: t(`items.${i}.author`),
+    role: t(`items.${i}.role`),
+  }));
+
+  return (
+    <section className="border-t py-24">
+      <div className="container">
+        <Reveal>
+          <div className="mb-14 max-w-2xl">
+            <span className="eyebrow">{t("label")}</span>
+            <h2 className="mt-4 text-balance text-3xl font-extrabold tracking-tight text-foreground md:text-4xl">
+              {t("title")}
+            </h2>
+            <p className="mt-4 text-muted-foreground">{t("subtitle")}</p>
+          </div>
+        </Reveal>
+
+        <Reveal delay={0.08}>
+          <div className="grid gap-px overflow-hidden rounded-xl border bg-border md:grid-cols-3">
+            {testimonialItems.map((testimonial) => (
+              <figure
+                key={testimonial.author}
+                className="flex flex-col justify-between gap-6 bg-card p-7"
+              >
+                <blockquote>
+                  <Quote className="mb-3 h-5 w-5 text-primary" />
+                  <p className="text-sm leading-relaxed text-foreground/80">
+                    {testimonial.content}
+                  </p>
+                </blockquote>
+                <figcaption className="border-t pt-4">
+                  <div className="text-sm font-semibold text-foreground">
+                    {testimonial.author}
+                  </div>
+                  <div className="mt-0.5 font-mono text-xs text-muted-foreground">
+                    {testimonial.role}
+                  </div>
+                </figcaption>
+              </figure>
+            ))}
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}

package/template/src/features/marketing/components/use-cases-section.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { BookOpen, Briefcase, GraduationCap, Languages } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Card, CardContent } from "@/components/ui/card";
+
+const useCaseConfig = [
+  { key: "students" as const, icon: GraduationCap },
+  { key: "professionals" as const, icon: Briefcase },
+  { key: "language" as const, icon: Languages },
+  { key: "knowledge" as const, icon: BookOpen },
+];
+
+export function UseCasesSection() {
+  const t = useTranslations("UseCases");
+
+  return (
+    <section id="use-cases" className="container py-24">
+      <div className="mx-auto max-w-6xl">
+        {/* Header */}
+        <div className="mb-16 text-center">
+          <p className="mb-2 text-sm font-medium uppercase tracking-wider text-primary">
+            {t("label")}
+          </p>
+          <h2 className="mb-4 text-balance text-3xl font-bold tracking-tight md:text-4xl">
+            {t("title")}
+          </h2>
+          <p className="mx-auto max-w-2xl text-muted-foreground">
+            {t("subtitle")}
+          </p>
+        </div>
+
+        {/* Use Cases Grid */}
+        <div className="grid gap-6 md:grid-cols-2">
+          {useCaseConfig.map((uc) => {
+            const Icon = uc.icon;
+            const examples = t.raw(`items.${uc.key}.examples`) as string[];
+            return (
+              <Card
+                key={uc.key}
+                className="group border-border shadow-none transition-colors hover:border-primary/20"
+              >
+                <CardContent className="p-6">
+                  <div className="flex items-start gap-4">
+                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
+                      <Icon className="h-6 w-6" />
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold">
+                        {t(`items.${uc.key}.title`)}
+                      </h3>
+                      <p className="text-sm text-primary">
+                        {t(`items.${uc.key}.subtitle`)}
+                      </p>
+                    </div>
+                  </div>
+                  <p className="mt-4 text-sm text-muted-foreground">
+                    {t(`items.${uc.key}.description`)}
+                  </p>
+                  <div className="mt-4 flex flex-wrap gap-2">
+                    {examples.map((example) => (
+                      <span
+                        key={example}
+                        className="inline-flex rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground"
+                      >
+                        {example}
+                      </span>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/features/marketing/index.ts

@@ -0,0 +1,3 @@
+// Marketing Feature
+export * from "./components";
+export { marketingModule } from "./manifest";

package/template/src/features/marketing/manifest.ts

@@ -0,0 +1,35 @@
+import { defineModule } from "@/core/modules";
+
+export const marketingModule = defineModule({
+  id: "marketing",
+  name: "Marketing",
+  description: "首页、定价、页头页脚与营销内容",
+  kind: "optional",
+  dependencies: ["payment", "shared"],
+  routes: [
+    {
+      path: "/",
+      source: "src/app/[locale]/(marketing)/page.tsx",
+    },
+    {
+      path: "/legal/[slug]",
+      source: "src/app/[locale]/(marketing)/legal/[slug]/page.tsx",
+    },
+  ],
+  navigation: [],
+  translations: [
+    "HomePage",
+    "Hero",
+    "Features",
+    "HowItWorks",
+    "UseCases",
+    "Testimonials",
+    "FAQ",
+    "CTA",
+    "Header",
+    "Navigation",
+    "Pricing",
+    "Footer",
+  ],
+  schema: [],
+});

package/template/src/features/payment/actions.ts

@@ -0,0 +1,182 @@
+"use server";
+
+import { eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { findPlanByPriceId, getBaseUrl, paymentConfig } from "@/config/payment";
+import { db } from "@/db";
+import { subscription } from "@/db/schema/subscription";
+import { logEvent } from "@/lib/logger";
+import { protectedAction } from "@/lib/safe-action";
+import { paymentService } from "@/services/payment";
+
+import { PaymentType } from "./types";
+
+/**
+ * 创建支付 Checkout Session
+ *
+ * 支持订阅支付和一次性支付两种模式
+ */
+export const createCheckoutSession = protectedAction
+  .metadata({ action: "payment.createCheckoutSession" })
+  .schema(
+    z.object({
+      priceId: z.string().min(1, "价格 ID 不能为空"),
+      type: z.nativeEnum(PaymentType).optional(),
+      successUrl: z.string().optional(),
+      cancelUrl: z.string().optional(),
+    })
+  )
+  .action(async ({ parsedInput, ctx }) => {
+    const { cancelUrl, priceId, successUrl, type } = parsedInput;
+    const { userId } = ctx;
+
+    // 检查是否已有活跃订阅
+    const [existingSub] = await db
+      .select({ status: subscription.status })
+      .from(subscription)
+      .where(eq(subscription.userId, userId))
+      .limit(1);
+
+    if (
+      existingSub &&
+      ["active", "trialing", "lifetime"].includes(existingSub.status)
+    ) {
+      throw new Error("您已有活跃订阅，请先取消当前订阅后再订阅新计划");
+    }
+
+    // 查找计划和价格信息
+    const { plan } = findPlanByPriceId(priceId);
+
+    const baseUrl = getBaseUrl();
+
+    logEvent("payment.checkout.started", {
+      userId,
+      priceId,
+      planId: plan?.id ?? "unknown",
+      provider: paymentService.provider,
+    });
+
+    const checkout = await paymentService.createCheckout({
+      productId: priceId,
+      mode: type === PaymentType.ONE_TIME ? "one-time" : "subscription",
+      successUrl:
+        successUrl ??
+        `${baseUrl}${paymentConfig.redirectAfterCheckout}?success=true`,
+      cancelUrl: cancelUrl ?? `${baseUrl}${paymentConfig.redirectAfterCancel}`,
+      requestId: `${userId}_${Date.now()}`,
+      metadata: {
+        userId,
+        planId: plan?.id ?? "unknown",
+      },
+    });
+
+    return { url: checkout.url };
+  });
+
+/**
+ * 取消订阅
+ *
+ * 调用支付服务取消用户的订阅
+ */
+export const cancelSubscription = protectedAction
+  .metadata({ action: "payment.cancelSubscription" })
+  .action(async ({ ctx }) => {
+    const { userId } = ctx;
+
+    // 查询用户的订阅
+    const [userSubscription] = await db
+      .select({ subscriptionId: subscription.subscriptionId })
+      .from(subscription)
+      .where(eq(subscription.userId, userId))
+      .limit(1);
+
+    if (!userSubscription?.subscriptionId) {
+      throw new Error("您还没有订阅任何计划");
+    }
+
+    await paymentService.cancelSubscription(userSubscription.subscriptionId);
+
+    // 更新数据库状态
+    await db
+      .update(subscription)
+      .set({
+        cancelAtPeriodEnd: true,
+        updatedAt: new Date(),
+      })
+      .where(eq(subscription.userId, userId));
+
+    logEvent("payment.subscription.canceled", {
+      userId,
+      subscriptionId: userSubscription.subscriptionId,
+    });
+
+    return { success: true };
+  });
+
+/**
+ * 获取用户当前订阅状态
+ *
+ * 用于在前端显示用户的订阅信息
+ */
+export const getUserSubscription = protectedAction
+  .metadata({ action: "payment.getUserSubscription" })
+  .action(async ({ ctx }) => {
+    const { userId } = ctx;
+
+    // 查询用户的订阅信息
+    const [userSubscription] = await db
+      .select()
+      .from(subscription)
+      .where(eq(subscription.userId, userId))
+      .limit(1);
+
+    if (!userSubscription) {
+      return { subscription: null };
+    }
+
+    // 检查订阅是否有效
+    const isActive = ["active", "trialing"].includes(userSubscription.status);
+    const isTrialing = userSubscription.status === "trialing";
+
+    return {
+      subscription: {
+        id: userSubscription.id,
+        status: userSubscription.status,
+        priceId: userSubscription.priceId,
+        currentPeriodStart: userSubscription.currentPeriodStart,
+        currentPeriodEnd: userSubscription.currentPeriodEnd,
+        cancelAtPeriodEnd: userSubscription.cancelAtPeriodEnd,
+        isActive,
+        isTrialing,
+      },
+    };
+  });
+
+/**
+ * 检查用户是否有有效订阅
+ */
+export const hasActiveSubscription = protectedAction
+  .metadata({ action: "payment.hasActiveSubscription" })
+  .action(async ({ ctx }) => {
+    const { userId } = ctx;
+
+    const [userSubscription] = await db
+      .select({ status: subscription.status })
+      .from(subscription)
+      .where(eq(subscription.userId, userId))
+      .limit(1);
+
+    if (!userSubscription) {
+      return { hasSubscription: false, status: null };
+    }
+
+    const isActive = ["active", "trialing", "lifetime"].includes(
+      userSubscription.status
+    );
+
+    return {
+      hasSubscription: isActive,
+      status: userSubscription.status,
+    };
+  });

package/template/src/features/payment/index.ts

@@ -0,0 +1,4 @@
+// Payment System
+export * from "./actions";
+export * from "./types";
+export { paymentModule } from "./manifest";

package/template/src/features/payment/manifest.ts

@@ -0,0 +1,18 @@
+import { defineModule } from "@/core/modules";
+
+export const paymentModule = defineModule({
+  id: "payment",
+  name: "Payment",
+  description: "支付结账、订阅生命周期和 Webhook",
+  kind: "optional",
+  dependencies: ["subscription"],
+  routes: [
+    {
+      path: "/api/webhooks/payment",
+      source: "src/app/api/webhooks/payment/route.ts",
+    },
+  ],
+  navigation: [],
+  translations: [],
+  schema: [],
+});

package/template/src/features/payment/server.ts

@@ -0,0 +1,7 @@
+export type {
+  PaymentAdapter,
+  PaymentCheckout,
+  PaymentSubscription,
+  PaymentWebhookEvent,
+} from "@/core/services";
+export { paymentService } from "@/services/payment";

package/template/src/features/payment/types.ts

@@ -0,0 +1,202 @@
+/**
+ * 支付系统类型定义
+ *
+ * 定义支付相关的所有类型、枚举和接口
+ */
+
+import type { PaymentProvider } from "@/core/services";
+
+// ============================================
+// 支付类型枚举
+// ============================================
+
+/**
+ * 支付类型
+ */
+export enum PaymentType {
+  /** 订阅支付（周期性） */
+  SUBSCRIPTION = "subscription",
+  /** 一次性支付 */
+  ONE_TIME = "one-time",
+}
+
+/**
+ * 计划周期
+ */
+export enum PlanInterval {
+  /** 月付 */
+  MONTH = "monthly",
+  /** 年付 */
+  YEAR = "yearly",
+}
+
+/**
+ * 订阅状态
+ */
+export enum SubscriptionStatus {
+  /** 活跃 */
+  ACTIVE = "active",
+  /** 试用中 */
+  TRIALING = "trialing",
+  /** 已取消 */
+  CANCELED = "canceled",
+  /** 未完成 */
+  INCOMPLETE = "incomplete",
+  /** 未完成且已过期 */
+  INCOMPLETE_EXPIRED = "incomplete_expired",
+  /** 逾期未付 */
+  PAST_DUE = "past_due",
+  /** 已暂停 */
+  PAUSED = "paused",
+  /** 未支付 */
+  UNPAID = "unpaid",
+}
+
+// ============================================
+// 价格和计划接口
+// ============================================
+
+/**
+ * 价格配置
+ */
+export interface PriceConfig {
+  /** 支付类型 */
+  type: PaymentType;
+  /** 支付供应商价格 ID */
+  priceId: string;
+  /** 金额 */
+  amount: number;
+  /** 周期（仅订阅类型需要） */
+  interval?: PlanInterval;
+  /** 试用期天数（可选） */
+  trialPeriodDays?: number;
+}
+
+/**
+ * 计划配置
+ */
+export interface PlanConfig {
+  /** 计划唯一标识 */
+  id: string;
+  /** 是否为免费计划 */
+  isFree?: boolean;
+  /** 是否为终身计划 */
+  isLifetime?: boolean;
+  /** 是否为企业计划 */
+  isEnterprise?: boolean;
+  /** 是否为热门/推荐计划 */
+  popular?: boolean;
+  /** 是否高亮显示 */
+  highlighted?: boolean;
+  /** 价格列表 */
+  prices?: PriceConfig[];
+}
+
+/**
+ * 计划显示信息（用于定价页面）
+ */
+export interface PlanDisplayInfo {
+  /** 计划名称 */
+  name: string;
+  /** 计划描述 */
+  description: string;
+  /** 功能列表 */
+  features: string[];
+  /** CTA 按钮文本 */
+  cta: string;
+  /** 是否使用深色主题 */
+  dark?: boolean;
+}
+
+/**
+ * 完整计划信息（配置 + 显示信息）
+ */
+export interface Plan extends PlanConfig, PlanDisplayInfo {}
+
+// ============================================
+// 支付配置接口
+// ============================================
+
+/**
+ * 支付系统配置
+ */
+export interface PaymentConfig {
+  /** 支付提供商 */
+  provider: PaymentProvider;
+  /** 货币 */
+  currency: string;
+  /** 年付折扣百分比 */
+  yearlyDiscount: number;
+  /** 支付完成后重定向 URL */
+  redirectAfterCheckout: string;
+  /** 取消支付后重定向 URL */
+  redirectAfterCancel: string;
+  /** 计划配置 */
+  plans: {
+    free?: PlanConfig;
+    starter?: PlanConfig;
+    pro?: PlanConfig;
+    ultra?: PlanConfig;
+  };
+}
+
+/**
+ * 定价页面配置
+ */
+export interface PricingConfig {
+  /** 标题 */
+  title: string;
+  /** 副标题 */
+  subtitle: string;
+  /** 周期选项文本 */
+  frequencies: [string, string];
+  /** 年付折扣百分比 */
+  yearlyDiscount: number;
+  /** 计划列表 */
+  plans: Plan[];
+}
+
+// ============================================
+// Server Action 参数接口
+// ============================================
+
+/**
+ * 创建 Checkout Session 参数
+ */
+export interface CreateCheckoutParams {
+  /** 价格 ID */
+  priceId: string;
+  /** 支付类型 */
+  type?: PaymentType;
+  /** 试用期天数 */
+  trialPeriodDays?: number;
+  /** 成功回调 URL */
+  successUrl?: string;
+  /** 取消回调 URL */
+  cancelUrl?: string;
+}
+
+/**
+ * 创建 Customer Portal 参数
+ */
+export interface CreatePortalParams {
+  /** 返回 URL */
+  returnUrl?: string;
+}
+
+// ============================================
+// Webhook 事件数据接口
+// ============================================
+
+/**
+ * 订阅数据
+ */
+export interface SubscriptionData {
+  id: string;
+  status: string;
+  priceId: string;
+  customerId: string;
+  currentPeriodStart: Date | null;
+  currentPeriodEnd: Date | null;
+  cancelAtPeriodEnd: boolean;
+}

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

@@ -0,0 +1,6 @@
+export { PseoCta } from "./pseo-cta";
+export { PseoFaq } from "./pseo-faq";
+export { PseoFeatureGrid } from "./pseo-feature-grid";
+export { PseoHero } from "./pseo-hero";
+export { PseoRelated } from "./pseo-related";
+export { PseoUseCases } from "./pseo-use-cases";

package/template/src/features/pseo/components/pseo-cta.tsx

@@ -0,0 +1,51 @@
+import { MessageCircle } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Link } from "@/i18n/routing";
+
+import type { PseoPage } from "../lib/pseo-data";
+
+export function PseoCta({ page }: { page: PseoPage }) {
+  const { cta } = page.data;
+
+  return (
+    <section className="container py-24" id="cta">
+      <div className="mx-auto max-w-4xl">
+        <div className="relative overflow-hidden rounded-3xl bg-primary px-8 py-12 text-center text-primary-foreground md:px-16 md:py-16">
+          <div className="absolute -left-24 -top-24 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
+          <div className="absolute -bottom-24 -right-24 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
+
+          <div className="relative">
+            <h2 className="mb-4 text-balance text-3xl font-bold tracking-tight md:text-4xl">
+              {cta.title}
+            </h2>
+            <p className="mx-auto mb-8 max-w-2xl text-primary-foreground/80">
+              {cta.description}
+            </p>
+
+            <div className="mb-6 flex flex-col justify-center gap-3 sm:flex-row">
+              <Button size="lg" className="gap-2 bg-white text-primary" asChild>
+                <Link href={cta.primaryCta.href}>
+                  <MessageCircle className="h-4 w-4" />
+                  {cta.primaryCta.label}
+                </Link>
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/40 text-white hover:bg-white/10"
+                asChild
+              >
+                <Link href={cta.secondaryCta.href}>
+                  {cta.secondaryCta.label}
+                </Link>
+              </Button>
+            </div>
+
+            <p className="text-sm text-primary-foreground/70">{cta.note}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/features/pseo/components/pseo-faq.tsx

@@ -0,0 +1,40 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+import type { PseoPage } from "../lib/pseo-data";
+
+export function PseoFaq({ page }: { page: PseoPage }) {
+  const { sections, faq } = page.data;
+
+  return (
+    <section className="container py-24" id="faq">
+      <div className="mx-auto max-w-3xl">
+        <div className="mb-12 text-center">
+          <h2 className="mb-4 text-balance text-3xl font-bold tracking-tight md:text-4xl">
+            {sections.faq.title}
+          </h2>
+          <p className="mx-auto max-w-2xl text-muted-foreground">
+            {sections.faq.subtitle}
+          </p>
+        </div>
+
+        <Accordion type="single" collapsible className="w-full">
+          {faq.map((item, index) => (
+            <AccordionItem key={item.question} value={`item-${index}`}>
+              <AccordionTrigger className="text-left">
+                {item.question}
+              </AccordionTrigger>
+              <AccordionContent className="text-muted-foreground">
+                {item.answer}
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </section>
+  );
+}