create-nextdevtpl 2.6.0

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

@@ -0,0 +1,13 @@
+import { defineModule } from "@/core/modules";
+
+export const analyticsModule = defineModule({
+  id: "analytics",
+  name: "Analytics",
+  description: "页面分析与可选监控脚本",
+  kind: "optional",
+  dependencies: [],
+  routes: [],
+  navigation: [],
+  translations: [],
+  schema: [],
+});

package/template/src/features/auth/components/auth-brand-panel.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+/**
+ * Auth 品牌分屏的左侧面板
+ *
+ * 根节点挂 `dark` class，让所有 token 类强制解析成暗色值——这样无论用户当前
+ * 是亮色还是暗色主题，品牌面板始终是"深色 + Spruce 主色"的高级对比效果，
+ * 与右侧跟随主题的表单形成分屏。不用写死任意颜色，全走 token。
+ */
+const POINTS = ["ship", "own", "stack"] as const;
+
+export function AuthBrandPanel() {
+  const t = useTranslations("Auth.brand");
+
+  return (
+    <aside className="dark relative hidden flex-col justify-between overflow-hidden bg-background p-12 lg:flex">
+      {/* 氛围层（dark 作用域下，光晕/网格变量解析为暗色版） */}
+      <div aria-hidden className="aura pointer-events-none absolute inset-0" />
+      <div
+        aria-hidden
+        className="bg-grid pointer-events-none absolute inset-0 opacity-60 [mask-image:radial-gradient(72%_72%_at_28%_18%,black,transparent)]"
+      />
+
+      {/* 顶部 logo */}
+      <div className="relative flex items-center gap-2">
+        {/* biome-ignore lint/a11y/noSvgWithoutTitle: decorative logo */}
+        <svg
+          className="h-6 w-6 text-primary"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2.4}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M3 17 L9 7 L13 14 L21 4" />
+          <circle cx="9" cy="7" r="1.4" fill="currentColor" stroke="none" />
+          <circle cx="21" cy="4" r="1.4" fill="currentColor" stroke="none" />
+        </svg>
+        <span className="text-lg font-bold tracking-tight text-foreground">
+          NextDev<span className="text-muted-foreground">Tpl</span>
+        </span>
+      </div>
+
+      {/* 中部：标题 + 卖点 */}
+      <div className="relative max-w-md space-y-8">
+        <div className="space-y-4">
+          <h2 className="text-balance text-[clamp(1.75rem,2.4vw,2.5rem)] font-extrabold leading-[1.08] tracking-tight text-foreground">
+            {t("headline")}
+          </h2>
+          <p className="leading-relaxed text-muted-foreground">{t("sub")}</p>
+        </div>
+        <ul className="space-y-3">
+          {POINTS.map((k) => (
+            <li
+              key={k}
+              className="flex items-center gap-3 text-sm text-foreground/90"
+            >
+              <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                <Check className="h-3 w-3" strokeWidth={3} />
+              </span>
+              {t(`points.${k}`)}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* 底部：仓库指标 */}
+      <div className="relative flex items-center gap-4 border-t border-border pt-6">
+        <div className="mono-data text-3xl font-bold tracking-tight text-foreground">
+          {t("stat.k")}
+        </div>
+        <div className="max-w-[16rem] text-xs text-muted-foreground">
+          {t("stat.v")}
+        </div>
+      </div>
+    </aside>
+  );
+}

package/template/src/features/auth/components/auth-error-alert.tsx

@@ -0,0 +1,28 @@
+/**
+ * 认证错误提示组件
+ *
+ * 用于显示登录、注册等认证流程中的错误信息
+ * 统一的错误提示样式
+ */
+
+interface AuthErrorAlertProps {
+  /** 错误信息，为 null 时不显示 */
+  message: string | null;
+  /** 自定义类名 */
+  className?: string;
+}
+
+export function AuthErrorAlert({ message, className }: AuthErrorAlertProps) {
+  // 没有错误信息时不渲染
+  if (!message) return null;
+
+  return (
+    <div
+      className={
+        className || "rounded-md bg-destructive/10 p-3 text-sm text-destructive"
+      }
+    >
+      {message}
+    </div>
+  );
+}

package/template/src/features/auth/components/auth-footer.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+
+import { siteConfig } from "@/config";
+import { CookieSettingsDialog } from "@/features/shared";
+
+/**
+ * Auth 页面底部组件
+ *
+ * 包含版权信息和法律链接
+ * Cookie Settings 链接会打开设置对话框
+ */
+export function AuthFooter() {
+  const t = useTranslations("Auth.footer");
+
+  return (
+    <footer className="border-t bg-background py-6">
+      <div className="container mx-auto flex flex-col items-center justify-between gap-4 px-4 sm:flex-row">
+        <p className="text-sm text-muted-foreground">
+          {t("copyright", {
+            year: new Date().getFullYear(),
+            name: siteConfig.name,
+          })}
+        </p>
+        <nav className="flex gap-6">
+          <Link
+            href="/legal/privacy"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            {t("privacy")}
+          </Link>
+          <Link
+            href="/legal/terms"
+            className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            {t("terms")}
+          </Link>
+          <CookieSettingsDialog>
+            <button
+              type="button"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {t("cookies")}
+            </button>
+          </CookieSettingsDialog>
+        </nav>
+      </div>
+    </footer>
+  );
+}

package/template/src/features/auth/components/auth-logo.tsx

@@ -0,0 +1,30 @@
+/**
+ * 认证页面 Logo 组件
+ *
+ * 用于登录、注册等认证页面的品牌标识展示
+ * 图标 + 文字组合
+ */
+
+export function AuthLogo() {
+  return (
+    <div className="flex items-center gap-2">
+      <svg
+        className="h-7 w-7 text-primary"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2.4}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <title>Logo</title>
+        <path d="M3 17 L9 7 L13 14 L21 4" />
+        <circle cx="9" cy="7" r="1.4" fill="currentColor" stroke="none" />
+        <circle cx="21" cy="4" r="1.4" fill="currentColor" stroke="none" />
+      </svg>
+      <span className="text-xl font-bold tracking-tight">
+        NextDev<span className="text-muted-foreground">Tpl</span>
+      </span>
+    </div>
+  );
+}

package/template/src/features/auth/components/forgot-password-form.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { KeyRound, Loader2, Mail } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { forgetPassword } from "@/lib/auth/client";
+
+import { AuthErrorAlert } from "./auth-error-alert";
+
+/**
+ * 忘记密码表单组件
+ *
+ * 功能:
+ * - 输入邮箱地址
+ * - 发送密码重置链接
+ * - 显示成功/错误状态
+ */
+export function ForgotPasswordForm() {
+  // 表单状态
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  /**
+   * 处理表单提交
+   */
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!email) {
+      setError("Please enter your email address");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      await forgetPassword(email, "/reset-password");
+
+      setIsSuccess(true);
+    } catch {
+      setError("Failed to send reset link. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 成功状态显示
+  if (isSuccess) {
+    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">
+            Check your email
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            We&apos;ve sent a password reset link to{" "}
+            <span className="font-medium text-foreground">{email}</span>
+          </p>
+        </div>
+
+        {/* 返回登录 */}
+        <div className="text-center">
+          <Link
+            href="/sign-in"
+            className="text-sm text-muted-foreground hover:text-foreground"
+          >
+            <span className="underline">Back to Login</span>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-md space-y-6">
+      {/* Logo 和标题 */}
+      <div className="flex flex-col items-center space-y-4 text-center">
+        {/* Logo 图标 */}
+        <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+          <KeyRound className="h-6 w-6" />
+        </div>
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Forgot your password?
+        </h1>
+        <p className="text-sm text-muted-foreground">
+          Enter your email below and we&apos;ll send you a link to reset it.
+        </p>
+      </div>
+
+      {/* 错误提示 */}
+      <AuthErrorAlert message={error} />
+
+      {/* 表单 */}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {/* 邮箱输入 */}
+        <div className="space-y-2">
+          <Label htmlFor="email">Email address</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="jane@example.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            disabled={isLoading}
+            autoComplete="email"
+            autoFocus
+          />
+        </div>
+
+        {/* 提交按钮 */}
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Sending...
+            </>
+          ) : (
+            "Send reset password link"
+          )}
+        </Button>
+      </form>
+
+      {/* 返回登录链接 */}
+      <p className="text-center text-sm text-muted-foreground">
+        Remember your password?{" "}
+        <Link
+          href="/sign-in"
+          className="font-medium text-foreground hover:underline"
+        >
+          Back to Login
+        </Link>
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+// Auth 功能模块组件导出
+
+export { AuthBrandPanel } from "./auth-brand-panel";
+export { AuthErrorAlert } from "./auth-error-alert";
+export { AuthFooter } from "./auth-footer";
+export { AuthLogo } from "./auth-logo";
+export { ForgotPasswordForm } from "./forgot-password-form";
+export { SignInForm } from "./sign-in-form";
+export { SignUpForm } from "./sign-up-form";

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

@@ -0,0 +1,241 @@
+"use client";
+
+import { Eye, EyeOff } 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,
+  signInWithEmail,
+  signInWithGoogle,
+} from "@/lib/auth/client";
+
+import { AuthErrorAlert } from "./auth-error-alert";
+import { AuthLogo } from "./auth-logo";
+
+/**
+ * 登录表单组件
+ *
+ * 功能:
+ * - Google OAuth 登录
+ * - 邮箱密码登录
+ */
+export function SignInForm() {
+  const t = useTranslations("Auth.signIn");
+  const tCommon = useTranslations("Auth.common");
+
+  // 表单状态
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showResend, setShowResend] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+
+  /**
+   * 重新发送验证邮件
+   */
+  const handleResendEmail = async () => {
+    if (resendCooldown > 0 || !email) return;
+
+    try {
+      await resendVerificationEmail(email);
+      setResendCooldown(60);
+      const timer = setInterval(() => {
+        setResendCooldown((prev) => {
+          if (prev <= 1) {
+            clearInterval(timer);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+    } catch {
+      // 静默失败
+    }
+  };
+
+  /**
+   * 处理 Google 登录
+   */
+  const handleGoogleSignIn = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      await signInWithGoogle();
+    } catch {
+      setError(t("errors.google"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * 处理邮箱密码登录
+   */
+  const handleEmailSignIn = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!email || !password) {
+      setError(t("errors.missingFields"));
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setError(null);
+      const result = await signInWithEmail(email, password);
+
+      if (result.error) {
+        if (result.error.code === "EMAIL_NOT_VERIFIED") {
+          setError(t("errors.emailNotVerified"));
+          setShowResend(true);
+        } else {
+          setError(t("errors.invalidCredentials"));
+          setShowResend(false);
+        }
+        setIsLoading(false);
+        return;
+      }
+
+      // 登录成功，提示并跳转
+      toast.success(t("success"));
+      window.location.href = "/dashboard";
+    } catch {
+      setError(t("errors.invalidCredentials"));
+      setIsLoading(false);
+    }
+  };
+
+  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} />
+
+      {/* 重发验证邮件 */}
+      {showResend && (
+        <Button
+          variant="outline"
+          className="w-full"
+          onClick={handleResendEmail}
+          disabled={resendCooldown > 0}
+        >
+          {resendCooldown > 0
+            ? t("resendCooldown", { seconds: resendCooldown })
+            : t("resendVerification")}
+        </Button>
+      )}
+
+      {/* OAuth 登录按钮 */}
+      <div className="space-y-3">
+        <Button
+          variant="outline"
+          className="w-full"
+          onClick={handleGoogleSignIn}
+          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-background px-2 text-muted-foreground">
+            {tCommon("or")}
+          </span>
+        </div>
+      </div>
+
+      {/* 邮箱密码表单 */}
+      <form onSubmit={handleEmailSignIn} className="space-y-4">
+        {/* 邮箱输入 */}
+        <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"}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={isLoading}
+              autoComplete="current-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="text-left">
+          <Link
+            href="/forgot-password"
+            className="text-sm text-muted-foreground underline hover:text-foreground transition-colors"
+          >
+            {t("forgotPassword")}
+          </Link>
+        </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("noAccount")}{" "}
+        <Link
+          href="/sign-up"
+          className="font-medium text-foreground hover:underline"
+        >
+          {t("signUpLink")}
+        </Link>
+      </p>
+    </div>
+  );
+}