create-nextdevtpl 2.6.0

package/template/src/features/dashboard/components/sidebar.tsx

@@ -0,0 +1,341 @@
+"use client";
+
+import { ChevronsUpDown, LogOut, Settings } from "lucide-react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { type ReactNode, useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import { dashboardConfig } from "@/config";
+import { useSidebar } from "@/features/dashboard/context";
+import { ModeToggle } from "@/features/shared";
+import { signOut, useSession } from "@/lib/auth/client";
+import { cn } from "@/lib/utils";
+
+/**
+ * Dashboard 侧边栏组件
+ *
+ * 功能:
+ * - 导航菜单 (从配置读取)
+ * - 用户信息弹出菜单
+ * - 主题切换
+ * - 设置入口
+ * - 登出功能
+ * - 支持折叠/展开
+ */
+export function DashboardSidebar({
+  compactAccountBadge,
+  accountPlanBadge,
+}: {
+  compactAccountBadge?: ReactNode;
+  accountPlanBadge?: ReactNode;
+}) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { isCollapsed, isMobileOpen, setMobileOpen, toggleSidebar } =
+    useSidebar();
+  const t = useTranslations("Dashboard");
+
+  // 获取当前用户会话
+  const { data: session } = useSession();
+  const user = session?.user;
+
+  // Popover 开关状态
+  const [open, setOpen] = useState(false);
+
+  const getNavTitle = (title: string, translationKey?: string) =>
+    translationKey ? t(translationKey) : title;
+
+  /**
+   * 获取用户名首字母作为头像回退
+   */
+  const getInitials = (name: string) => {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  /**
+   * 处理登出
+   */
+  const handleSignOut = async () => {
+    setOpen(false);
+    await signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          router.push("/");
+        },
+      },
+    });
+  };
+
+  /**
+   * 处理设置点击
+   */
+  const handleSettingsClick = () => {
+    setOpen(false);
+    router.push("/dashboard/settings");
+  };
+
+  /**
+   * 渲染侧边栏内容（桌面和移动端共用）
+   * mobile 参数控制是否为移动端模式（始终展开，点击关闭）
+   */
+  const renderSidebarContent = (mobile: boolean) => {
+    const collapsed = mobile ? false : isCollapsed;
+
+    return (
+      <>
+        {/* Logo */}
+        <div className="flex h-14 items-center px-4">
+          <Link
+            href="/"
+            className="flex items-center gap-2"
+            onClick={(e) => {
+              if (mobile) {
+                setMobileOpen(false);
+              } else if (collapsed) {
+                e.preventDefault();
+                toggleSidebar();
+              }
+            }}
+          >
+            {/* biome-ignore lint/a11y/noSvgWithoutTitle: decorative logo */}
+            <svg
+              className="h-6 w-6 shrink-0 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={cn(
+                "text-lg font-bold tracking-tight transition-opacity",
+                collapsed && "opacity-0"
+              )}
+            >
+              NextDev<span className="text-muted-foreground">Tpl</span>
+            </span>
+          </Link>
+        </div>
+
+        {/* 导航菜单 */}
+        <nav className="flex-1 space-y-4 overflow-y-auto p-3">
+          {dashboardConfig.sidebarNav.map((group) => (
+            <div key={group.title}>
+              {/* Group Label - 折叠时隐藏 */}
+              {!collapsed && (
+                <p className="mb-1.5 px-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                  {getNavTitle(group.title, group.translationKey)}
+                </p>
+              )}
+              <div className="space-y-0.5">
+                {group.items.map((item) => {
+                  // 去掉 locale 前缀后比较路径
+                  const normalizedPath = pathname.replace(/^\/[a-z]{2}\//, "/");
+                  const isActive =
+                    normalizedPath === item.href ||
+                    (item.href !== "/dashboard" &&
+                      normalizedPath.startsWith(`${item.href}/`));
+                  const Icon = item.icon;
+                  const translatedTitle = getNavTitle(
+                    item.title,
+                    item.translationKey
+                  );
+                  return (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      title={collapsed ? translatedTitle : undefined}
+                      onClick={() => mobile && setMobileOpen(false)}
+                      className={cn(
+                        "flex items-center gap-3 rounded-md px-2 py-1.5 text-sm font-medium transition-colors",
+                        isActive
+                          ? "bg-primary/10 text-primary"
+                          : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
+                        collapsed && "justify-center px-0"
+                      )}
+                    >
+                      {Icon && <Icon className="h-4 w-4 shrink-0" />}
+                      {!collapsed && (
+                        <span className="flex-1">{translatedTitle}</span>
+                      )}
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </nav>
+
+        {/* 用户信息区域 */}
+        <div className="border-t border-sidebar-border p-3">
+          {user ? (
+            <Popover open={open} onOpenChange={setOpen}>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  className={cn(
+                    "flex w-full items-center gap-3 rounded-md px-2 py-1.5 hover:bg-sidebar-accent/50 transition-colors",
+                    collapsed && "justify-center px-0"
+                  )}
+                >
+                  <Avatar className="h-8 w-8 shrink-0">
+                    <AvatarImage
+                      src={user.image || undefined}
+                      alt={user.name}
+                    />
+                    <AvatarFallback className="bg-primary text-primary-foreground text-xs">
+                      {getInitials(user.name)}
+                    </AvatarFallback>
+                  </Avatar>
+                  {!collapsed && (
+                    <>
+                      <div className="flex-1 truncate text-left">
+                        <div className="flex items-center gap-2">
+                          <p className="text-sm font-medium">{user.name}</p>
+                          {compactAccountBadge}
+                        </div>
+                        <p className="truncate text-xs text-muted-foreground">
+                          {user.email}
+                        </p>
+                      </div>
+                      <ChevronsUpDown className="h-4 w-4 text-muted-foreground" />
+                    </>
+                  )}
+                </button>
+              </PopoverTrigger>
+
+              <PopoverContent
+                side="top"
+                align="start"
+                sideOffset={8}
+                className="w-64 p-0"
+              >
+                {/* 用户信息头部 */}
+                <div className="flex items-center gap-3 p-4">
+                  <Avatar className="h-10 w-10">
+                    <AvatarImage
+                      src={user.image || undefined}
+                      alt={user.name}
+                    />
+                    <AvatarFallback className="bg-primary text-primary-foreground">
+                      {getInitials(user.name)}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 truncate">
+                    <div className="flex items-center gap-2">
+                      <p className="font-medium">{user.name}</p>
+                      {accountPlanBadge}
+                    </div>
+                    <p className="truncate text-sm text-muted-foreground">
+                      {user.email}
+                    </p>
+                  </div>
+                </div>
+
+                <Separator />
+
+                {/* 主题切换 - 使用共享 ModeToggle 组件 */}
+                <div className="flex items-center justify-center p-3">
+                  <ModeToggle variant="inline" />
+                </div>
+
+                <Separator />
+
+                {/* 菜单项 */}
+                <div className="p-2">
+                  {/* 设置 */}
+                  <button
+                    type="button"
+                    onClick={handleSettingsClick}
+                    className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-muted transition-colors"
+                  >
+                    <Settings className="h-4 w-4" />
+                    {t("sidebar.settings")}
+                  </button>
+
+                  {/* 登出 */}
+                  <button
+                    type="button"
+                    onClick={handleSignOut}
+                    className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-muted transition-colors"
+                  >
+                    <LogOut className="h-4 w-4" />
+                    {t("sidebar.logout")}
+                  </button>
+                </div>
+              </PopoverContent>
+            </Popover>
+          ) : (
+            // 加载状态
+            <div
+              className={cn(
+                "flex items-center gap-3 rounded-md px-2 py-1.5",
+                collapsed && "justify-center px-0"
+              )}
+            >
+              <div className="h-8 w-8 animate-pulse rounded-full bg-sidebar-accent shrink-0" />
+              {!collapsed && (
+                <div className="flex-1 space-y-1">
+                  <div className="h-4 w-20 animate-pulse rounded bg-sidebar-accent" />
+                  <div className="h-3 w-32 animate-pulse rounded bg-sidebar-accent" />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <>
+      {/* 桌面端侧边栏 */}
+      <aside
+        className={cn(
+          "fixed left-0 top-0 z-40 hidden h-screen flex-col bg-sidebar border-r border-sidebar-border transition-all duration-300 md:flex",
+          isCollapsed ? "w-16" : "w-64"
+        )}
+      >
+        {renderSidebarContent(false)}
+      </aside>
+
+      {/* 移动端 Sheet 侧边栏 */}
+      <Sheet open={isMobileOpen} onOpenChange={setMobileOpen}>
+        <SheetContent
+          side="left"
+          className="w-64 bg-sidebar p-0 md:hidden [&>button:last-child]:hidden"
+        >
+          <SheetTitle className="sr-only">Navigation</SheetTitle>
+          <div className="flex h-full flex-col">
+            {renderSidebarContent(true)}
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}

package/template/src/features/dashboard/context/index.ts

@@ -0,0 +1,2 @@
+// Dashboard 上下文导出
+export { SidebarProvider, useSidebar } from "./sidebar-context";

package/template/src/features/dashboard/context/sidebar-context.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { createContext, useCallback, useContext, useState } from "react";
+
+/**
+ * 侧边栏上下文类型
+ */
+interface SidebarContextType {
+  /** 侧边栏是否折叠 */
+  isCollapsed: boolean;
+  /** 切换折叠状态 */
+  toggleSidebar: () => void;
+  /** 设置折叠状态 */
+  setCollapsed: (collapsed: boolean) => void;
+  /** 移动端侧边栏是否打开 */
+  isMobileOpen: boolean;
+  /** 设置移动端侧边栏状态 */
+  setMobileOpen: (open: boolean) => void;
+  /** 切换移动端侧边栏 */
+  toggleMobile: () => void;
+}
+
+/**
+ * 侧边栏上下文
+ */
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+
+/**
+ * 侧边栏上下文提供者
+ */
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isMobileOpen, setMobileOpen] = useState(false);
+
+  const toggleSidebar = useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+
+  const setCollapsed = useCallback((collapsed: boolean) => {
+    setIsCollapsed(collapsed);
+  }, []);
+
+  const toggleMobile = useCallback(() => {
+    setMobileOpen((prev) => !prev);
+  }, []);
+
+  return (
+    <SidebarContext.Provider
+      value={{
+        isCollapsed,
+        toggleSidebar,
+        setCollapsed,
+        isMobileOpen,
+        setMobileOpen,
+        toggleMobile,
+      }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+/**
+ * 使用侧边栏上下文的 Hook
+ */
+export function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+}

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

@@ -0,0 +1,4 @@
+// Dashboard Feature
+export * from "./components";
+export * from "./context";
+export { dashboardModule } from "./manifest";

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

@@ -0,0 +1,28 @@
+import { defineModule } from "@/core/modules";
+
+export const dashboardModule = defineModule({
+  id: "dashboard",
+  name: "Dashboard",
+  description: "登录后的基础工作区与侧边栏框架",
+  kind: "core",
+  dependencies: ["shared"],
+  routes: [
+    {
+      path: "/dashboard",
+      source: "src/app/[locale]/(dashboard)/dashboard/page.tsx",
+    },
+  ],
+  navigation: [
+    {
+      area: "dashboard",
+      group: "dashboard",
+      groupTranslationKey: "nav.dashboard",
+      translationKey: "nav.dashboard",
+      href: "/dashboard",
+      icon: "dashboard",
+      order: 10,
+    },
+  ],
+  translations: ["Dashboard", "DashboardPages"],
+  schema: [],
+});

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

@@ -0,0 +1,175 @@
+"use server";
+
+/**
+ * 邮件系统 Server Actions
+ *
+ * 提供邮件相关的服务端操作接口
+ */
+
+import { eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { db } from "@/db";
+import { newsletterSubscriber } from "@/db/schema/mail";
+import { actionClient } from "@/lib/safe-action";
+
+const withMailAction = (name: string) =>
+  actionClient.metadata({ action: `mail.${name}` });
+
+// ============================================
+// Newsletter 订阅 Actions
+// ============================================
+
+/**
+ * 订阅 Newsletter
+ *
+ * 公开 Action - 任何人都可以订阅
+ * 如果邮箱已存在但取消订阅过，会重新激活订阅
+ */
+export const subscribeNewsletter = withMailAction("subscribeNewsletter")
+  .schema(
+    z.object({
+      email: z.string().email("请输入有效的邮箱地址"),
+    })
+  )
+  .action(async ({ parsedInput }) => {
+    const { email } = parsedInput;
+    const normalizedEmail = email.toLowerCase().trim();
+
+    // 检查是否已存在
+    const [existing] = await db
+      .select()
+      .from(newsletterSubscriber)
+      .where(eq(newsletterSubscriber.email, normalizedEmail))
+      .limit(1);
+
+    if (existing) {
+      // 如果已存在且已订阅，返回提示
+      if (existing.isSubscribed) {
+        return {
+          success: true,
+          message: "You are already subscribed!",
+          alreadySubscribed: true,
+        };
+      }
+
+      // 如果曾经取消过订阅，重新激活
+      await db
+        .update(newsletterSubscriber)
+        .set({
+          isSubscribed: true,
+          subscribedAt: new Date(),
+          unsubscribedAt: null,
+          updatedAt: new Date(),
+        })
+        .where(eq(newsletterSubscriber.id, existing.id));
+
+      return {
+        success: true,
+        message: "Welcome back! Your subscription has been reactivated.",
+        reactivated: true,
+      };
+    }
+
+    // 创建新订阅
+    await db.insert(newsletterSubscriber).values({
+      id: crypto.randomUUID(),
+      email: normalizedEmail,
+      isSubscribed: true,
+    });
+
+    return {
+      success: true,
+      message: "Thank you for subscribing!",
+    };
+  });
+
+/**
+ * 取消订阅 Newsletter
+ *
+ * 公开 Action - 通过邮箱取消订阅
+ * 不会删除记录，只是标记为未订阅
+ */
+export const unsubscribeNewsletter = withMailAction("unsubscribeNewsletter")
+  .schema(
+    z.object({
+      email: z.string().email("请输入有效的邮箱地址"),
+    })
+  )
+  .action(async ({ parsedInput }) => {
+    const { email } = parsedInput;
+    const normalizedEmail = email.toLowerCase().trim();
+
+    // 查找订阅记录
+    const [existing] = await db
+      .select()
+      .from(newsletterSubscriber)
+      .where(eq(newsletterSubscriber.email, normalizedEmail))
+      .limit(1);
+
+    if (!existing) {
+      return {
+        success: false,
+        message: "Email not found in our subscriber list.",
+      };
+    }
+
+    if (!existing.isSubscribed) {
+      return {
+        success: true,
+        message: "You are already unsubscribed.",
+        alreadyUnsubscribed: true,
+      };
+    }
+
+    // 更新为取消订阅状态
+    await db
+      .update(newsletterSubscriber)
+      .set({
+        isSubscribed: false,
+        unsubscribedAt: new Date(),
+        updatedAt: new Date(),
+      })
+      .where(eq(newsletterSubscriber.id, existing.id));
+
+    return {
+      success: true,
+      message: "You have been unsubscribed. We're sorry to see you go!",
+    };
+  });
+
+/**
+ * 检查邮箱订阅状态
+ */
+export const checkSubscriptionStatus = withMailAction("checkSubscriptionStatus")
+  .schema(
+    z.object({
+      email: z.string().email(),
+    })
+  )
+  .action(async ({ parsedInput }) => {
+    const { email } = parsedInput;
+    const normalizedEmail = email.toLowerCase().trim();
+
+    const [subscriber] = await db
+      .select({
+        isSubscribed: newsletterSubscriber.isSubscribed,
+        subscribedAt: newsletterSubscriber.subscribedAt,
+      })
+      .from(newsletterSubscriber)
+      .where(eq(newsletterSubscriber.email, normalizedEmail))
+      .limit(1);
+
+    if (!subscriber) {
+      return {
+        found: false,
+        isSubscribed: false,
+      };
+    }
+
+    return {
+      found: true,
+      isSubscribed: subscriber.isSubscribed,
+      subscribedAt: subscriber.subscribedAt,
+    };
+  });

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

@@ -0,0 +1,5 @@
+// Email System
+export * from "./actions";
+export * from "./templates";
+export * from "./utils";
+export { mailModule } from "./manifest";

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

@@ -0,0 +1,13 @@
+import { defineModule } from "@/core/modules";
+
+export const mailModule = defineModule({
+  id: "mail",
+  name: "Mail",
+  description: "事务邮件、邮件模板和 Newsletter",
+  kind: "core",
+  dependencies: [],
+  routes: [],
+  navigation: [],
+  translations: [],
+  schema: ["mail"],
+});

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

@@ -0,0 +1,8 @@
+export {
+  MagicLinkEmail,
+  PrimaryActionEmail,
+  ResetPasswordEmail,
+  VerifyEmailEmail,
+} from "./templates";
+export { sendEmail } from "./utils";
+export type { SendEmailParams, SendEmailResult } from "./utils";

package/template/src/features/mail/templates/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 邮件模板导出
+ */
+
+export {
+  MagicLinkEmail,
+  PrimaryActionEmail,
+  ResetPasswordEmail,
+  VerifyEmailEmail,
+} from "./primary-action-email";
+export { WelcomeEmail } from "./welcome-email";