create-nextdevtpl 2.6.0

package/template/src/features/auth/components/sign-up-form.tsx

@@ -0,0 +1,307 @@
+"use client";
+
+import { Eye, EyeOff, Mail } from "lucide-react";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { GoogleIcon } from "@/features/shared";
+import {
+  resendVerificationEmail,
+  signInWithGoogle,
+  signUpWithEmail,
+} from "@/lib/auth/client";
+
+import { AuthErrorAlert } from "./auth-error-alert";
+import { AuthLogo } from "./auth-logo";
+
+/**
+ * 注册表单组件
+ *
+ * 功能:
+ * - Google OAuth 注册
+ * - GitHub OAuth 注册
+ * - 邮箱密码注册
+ */
+export function SignUpForm() {
+  const t = useTranslations("Auth.signUp");
+  const tCommon = useTranslations("Auth.common");
+
+  // 表单状态
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [emailSent, setEmailSent] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+
+  /**
+   * 启动重发冷却倒计时
+   */
+  const startCooldown = () => {
+    setResendCooldown(60);
+    const timer = setInterval(() => {
+      setResendCooldown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+  };
+
+  /**
+   * 重新发送验证邮件
+   */
+  const handleResendEmail = async () => {
+    if (resendCooldown > 0) return;
+
+    try {
+      await resendVerificationEmail(email);
+      startCooldown();
+    } catch {
+      // 静默失败，不暴露用户是否存在
+    }
+  };
+
+  /**
+   * 处理 Google 注册
+   */
+  const handleGoogleSignUp = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      await signInWithGoogle();
+    } catch {
+      setError(t("errors.google"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * 处理邮箱密码注册
+   */
+  const handleEmailSignUp = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!name || !email || !password) {
+      setError(t("errors.missingFields"));
+      return;
+    }
+
+    if (password.length < 8) {
+      setError(t("errors.passwordTooShort"));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError(t("errors.passwordMismatch"));
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+      const result = await signUpWithEmail(email, password, name);
+
+      if (result.error) {
+        setError(t("errors.emailInUse"));
+        setIsLoading(false);
+        return;
+      }
+
+      // 注册成功，显示验证邮件提示
+      if (result.data?.token) {
+        toast.success(tCommon("success"));
+        window.location.href = "/dashboard";
+        return;
+      }
+
+      setEmailSent(true);
+      startCooldown();
+    } catch {
+      setError(t("errors.emailInUse"));
+      setIsLoading(false);
+    }
+  };
+
+  // 邮箱验证提示
+  if (emailSent) {
+    return (
+      <div className="w-full max-w-md space-y-6">
+        <div className="flex flex-col items-center space-y-4 text-center">
+          <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-success/15 text-success">
+            <Mail className="h-6 w-6" />
+          </div>
+          <h1 className="text-2xl font-semibold tracking-tight">
+            {t("verifyEmail.title")}
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            {t("verifyEmail.description", { email })}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            {t("verifyEmail.hint")}
+          </p>
+        </div>
+
+        <div className="flex flex-col items-center gap-3">
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={handleResendEmail}
+            disabled={resendCooldown > 0}
+          >
+            {resendCooldown > 0
+              ? t("verifyEmail.resendCooldown", { seconds: resendCooldown })
+              : t("verifyEmail.resend")}
+          </Button>
+          <Link
+            href="/sign-in"
+            className="text-sm text-muted-foreground hover:text-foreground underline"
+          >
+            {t("verifyEmail.backToSignIn")}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-md space-y-6">
+      {/* Logo 和标题 */}
+      <div className="flex flex-col items-center space-y-2 text-center">
+        <AuthLogo />
+        <h1 className="text-2xl font-semibold tracking-tight">{t("title")}</h1>
+        <p className="text-sm text-muted-foreground">{t("subtitle")}</p>
+      </div>
+
+      {/* 错误提示 */}
+      <AuthErrorAlert message={error} />
+
+      {/* OAuth 登录按钮 */}
+      <div className="space-y-3">
+        <Button
+          variant="outline"
+          className="w-full"
+          onClick={handleGoogleSignUp}
+          disabled={isLoading}
+        >
+          <GoogleIcon className="mr-2 h-4 w-4" />
+          {tCommon("google")}
+        </Button>
+      </div>
+
+      {/* 分隔线 */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <Separator className="w-full" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-muted/30 px-2 text-muted-foreground">
+            {tCommon("or")}
+          </span>
+        </div>
+      </div>
+
+      {/* 邮箱密码表单 */}
+      <form onSubmit={handleEmailSignUp} className="space-y-4">
+        {/* 姓名输入 */}
+        <div className="space-y-2">
+          <Label htmlFor="name">{t("nameLabel")}</Label>
+          <Input
+            id="name"
+            type="text"
+            placeholder={t("namePlaceholder")}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            disabled={isLoading}
+            autoComplete="name"
+          />
+        </div>
+
+        {/* 邮箱输入 */}
+        <div className="space-y-2">
+          <Label htmlFor="email">{t("emailLabel")}</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder={t("emailPlaceholder")}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            disabled={isLoading}
+            autoComplete="email"
+          />
+        </div>
+
+        {/* 密码输入 */}
+        <div className="space-y-2">
+          <Label htmlFor="password">{t("passwordLabel")}</Label>
+          <div className="relative">
+            <Input
+              id="password"
+              type={showPassword ? "text" : "password"}
+              placeholder={t("passwordPlaceholder")}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={isLoading}
+              autoComplete="new-password"
+              className="pr-10"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+              tabIndex={-1}
+            >
+              {showPassword ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* 确认密码输入 */}
+        <div className="space-y-2">
+          <Label htmlFor="confirmPassword">{t("confirmPasswordLabel")}</Label>
+          <Input
+            id="confirmPassword"
+            type={showPassword ? "text" : "password"}
+            placeholder={t("confirmPasswordPlaceholder")}
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            disabled={isLoading}
+            autoComplete="new-password"
+          />
+        </div>
+
+        {/* 提交按钮 */}
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? t("loading") : t("submit")}
+        </Button>
+      </form>
+
+      {/* 登录链接 */}
+      <p className="text-center text-sm text-muted-foreground">
+        {t("haveAccount")}{" "}
+        <Link
+          href="/sign-in"
+          className="font-medium text-foreground hover:underline"
+        >
+          {t("signInLink")}
+        </Link>
+      </p>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,30 @@
+import { defineModule } from "@/core/modules";
+
+export const authModule = defineModule({
+  id: "auth",
+  name: "Authentication",
+  description: "登录、注册、会话和账号安全",
+  kind: "core",
+  dependencies: ["mail", "shared"],
+  routes: [
+    {
+      path: "/sign-in",
+      source: "src/app/[locale]/(auth)/sign-in/page.tsx",
+    },
+    {
+      path: "/sign-up",
+      source: "src/app/[locale]/(auth)/sign-up/page.tsx",
+    },
+    {
+      path: "/forgot-password",
+      source: "src/app/[locale]/(auth)/forgot-password/page.tsx",
+    },
+    {
+      path: "/api/auth/[...all]",
+      source: "src/app/api/auth/[...all]/route.ts",
+    },
+  ],
+  navigation: [],
+  translations: ["Auth"],
+  schema: ["auth"],
+});

package/template/src/features/blog/components/blog-post-item.tsx

@@ -0,0 +1,72 @@
+import Link from "next/link";
+import type { BlogPost } from "../data/mock-posts";
+
+interface BlogPostItemProps {
+  post: BlogPost;
+}
+
+export function BlogPostItem({ post }: BlogPostItemProps) {
+  return (
+    <article className="group">
+      <Link
+        href={`/blog/${post.slug}`}
+        className="flex flex-col gap-8 md:flex-row md:items-start"
+      >
+        {/* Text Content */}
+        <div className="flex-1 space-y-4">
+          {/* Tags */}
+          <div className="flex flex-wrap gap-2">
+            {post.tags.map((tag) => (
+              <span
+                key={tag}
+                className="text-xs font-medium uppercase tracking-wider text-muted-foreground"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+
+          {/* Title */}
+          <h2 className="text-2xl font-bold tracking-tight transition-colors group-hover:text-primary md:text-3xl">
+            {post.title}
+          </h2>
+
+          {/* Excerpt */}
+          <p className="leading-relaxed text-muted-foreground">
+            {post.excerpt}
+          </p>
+
+          {/* Metadata */}
+          <p className="text-sm text-muted-foreground">
+            {post.author} • {post.date}
+          </p>
+        </div>
+
+        {/* Image */}
+        <div className="relative aspect-video w-full shrink-0 overflow-hidden rounded-xl border bg-muted md:w-[380px]">
+          <div className="flex h-full items-center justify-center">
+            {/* Placeholder for blog image */}
+            <div className="grid grid-cols-2 gap-3 p-6">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-background shadow-sm">
+                <span className="text-lg font-bold">N</span>
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-background shadow-sm">
+                <span className="text-lg font-bold text-primary">⚛</span>
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-background shadow-sm">
+                <span className="text-lg font-bold text-muted-foreground">
+                  TS
+                </span>
+              </div>
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-background shadow-sm">
+                <span className="text-lg font-bold text-muted-foreground">
+                  🌊
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </article>
+  );
+}

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

@@ -0,0 +1 @@
+export { BlogPostItem } from "./blog-post-item";

package/template/src/features/blog/data/mock-posts.ts

@@ -0,0 +1,62 @@
+export interface BlogPost {
+  slug: string;
+  title: string;
+  excerpt: string;
+  tags: string[];
+  author: string;
+  date: string;
+  image: string;
+}
+
+export const mockPosts: BlogPost[] = [
+  {
+    slug: "nextdevtpl-blog-system",
+    title: "NEXTDEVTPL Blog System",
+    excerpt:
+      "Learn how to create and manage blog content with Fumadocs MDX in NEXTDEVTPL. A comprehensive guide to setting up your blog, writing posts, and customizing the appearance of your content.",
+    tags: ["NEXTDEVTPL", "BLOG", "FUMADOCS", "MDX", "CONTENT-MANAGEMENT"],
+    author: "NEXTDEVTPL Team",
+    date: "7/11/2025",
+    image: "/images/blog/blog-system.png",
+  },
+  {
+    slug: "nextdevtpl-tech-stack",
+    title: "NEXTDEVTPL Tech Stack",
+    excerpt:
+      "Learn about the powerful technologies and tools that make NEXTDEVTPL a cutting-edge SaaS starter kit. From Next.js 16 to Drizzle ORM, discover how each piece fits together.",
+    tags: ["NEXTDEVTPL", "TECH-STACK", "SAAS", "NEXTJS"],
+    author: "NEXTDEVTPL Team",
+    date: "7/10/2025",
+    image: "/images/blog/tech-stack.png",
+  },
+  {
+    slug: "update-nextdevtpl-codebase",
+    title: "Update the NEXTDEVTPL Codebase",
+    excerpt:
+      "Keep your NEXTDEVTPL project up-to-date with the latest features and security patches. This guide walks you through the process of syncing with upstream changes.",
+    tags: ["NEXTDEVTPL", "UPDATE", "GIT", "MAINTENANCE"],
+    author: "NEXTDEVTPL Team",
+    date: "7/9/2025",
+    image: "/images/blog/update-codebase.png",
+  },
+  {
+    slug: "authentication-with-better-auth",
+    title: "Authentication with Better Auth",
+    excerpt:
+      "Implement secure authentication in your NEXTDEVTPL application using Better Auth. Learn about OAuth providers, magic links, and session management.",
+    tags: ["AUTH", "SECURITY", "BETTER-AUTH", "OAUTH"],
+    author: "NEXTDEVTPL Team",
+    date: "7/8/2025",
+    image: "/images/blog/auth.png",
+  },
+  {
+    slug: "database-with-drizzle-orm",
+    title: "Database Setup with Drizzle ORM",
+    excerpt:
+      "Set up your database with Drizzle ORM for type-safe queries and easy migrations. This guide covers PostgreSQL setup, schema design, and best practices.",
+    tags: ["DATABASE", "DRIZZLE", "POSTGRESQL", "ORM"],
+    author: "NEXTDEVTPL Team",
+    date: "7/7/2025",
+    image: "/images/blog/database.png",
+  },
+];

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

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

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

@@ -0,0 +1,22 @@
+import { defineModule } from "@/core/modules";
+
+export const blogModule = defineModule({
+  id: "blog",
+  name: "Blog",
+  description: "内容博客与文章列表",
+  kind: "optional",
+  dependencies: ["marketing"],
+  routes: [
+    {
+      path: "/blog",
+      source: "src/app/[locale]/(marketing)/blog/page.tsx",
+    },
+    {
+      path: "/blog/[slug]",
+      source: "src/app/[locale]/(marketing)/blog/[slug]/page.tsx",
+    },
+  ],
+  navigation: [],
+  translations: [],
+  schema: [],
+});

package/template/src/features/credits/account.ts

@@ -0,0 +1,76 @@
+/**
+ * 积分账户管理
+ */
+
+import { eq } from "drizzle-orm";
+
+import { db } from "@/db";
+import { creditsBalance } from "@/db/schema/credits";
+
+/**
+ * 确保用户有积分账户
+ *
+ * 如果账户不存在则创建
+ */
+export async function ensureCreditsBalance(userId: string) {
+  const [existing] = await db
+    .select()
+    .from(creditsBalance)
+    .where(eq(creditsBalance.userId, userId))
+    .limit(1);
+
+  if (existing) {
+    return existing;
+  }
+
+  const [newBalance] = await db
+    .insert(creditsBalance)
+    .values({
+      id: crypto.randomUUID(),
+      userId,
+      balance: 0,
+      totalEarned: 0,
+      totalSpent: 0,
+      status: "active",
+    })
+    .returning();
+
+  if (!newBalance) {
+    throw new Error("创建积分账户失败");
+  }
+
+  return newBalance;
+}
+
+/**
+ * 获取用户积分余额
+ */
+export async function getCreditsBalance(userId: string) {
+  return await ensureCreditsBalance(userId);
+}
+
+/**
+ * 冻结用户积分账户
+ */
+export async function freezeCreditsAccount(userId: string) {
+  await db
+    .update(creditsBalance)
+    .set({
+      status: "frozen",
+      updatedAt: new Date(),
+    })
+    .where(eq(creditsBalance.userId, userId));
+}
+
+/**
+ * 解冻用户积分账户
+ */
+export async function unfreezeCreditsAccount(userId: string) {
+  await db
+    .update(creditsBalance)
+    .set({
+      status: "active",
+      updatedAt: new Date(),
+    })
+    .where(eq(creditsBalance.userId, userId));
+}