create-nextdevtpl 2.6.0

package/template/src/app/globals.css

@@ -0,0 +1,406 @@
+@import "fumadocs-ui/style.css";
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* ============================================================
+   NextDevTpl · "Engineered Spec-Sheet" 设计系统
+   色板：暖中性底（亮：冷 drafting paper / 暗：暖石墨）+ Spruce 主色
+   字体：Geist Sans（正文/展示）+ Geist Mono（点缀/数据）
+   ============================================================ */
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  /* 字体：geist 包注入 --font-geist-sans/mono；后面挂 CJK 回退栈 */
+  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, "SFMono-Regular",
+    "Cascadia Code", Consolas, "Roboto Mono", Menlo, monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  /* 圆角：偏克制的 10px 基准（lg=10 / md=8 / sm=6 / xl=14） */
+  --radius: 0.625rem;
+
+  /* ── 亮色：冷 drafting paper 底 + 暖石墨墨色 ── */
+  --background: oklch(0.985 0.003 95);
+  --foreground: oklch(0.24 0.006 60);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.24 0.006 60);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.24 0.006 60);
+
+  /* 主色：Spruce 深云杉绿（品牌定） */
+  --primary: oklch(0.40 0.072 184);
+  --primary-foreground: oklch(0.99 0.005 95);
+
+  --secondary: oklch(0.965 0.005 95);
+  --secondary-foreground: oklch(0.24 0.006 60);
+
+  --muted: oklch(0.965 0.005 95);
+  --muted-foreground: oklch(0.50 0.008 60);
+
+  --accent: oklch(0.965 0.005 95);
+  --accent-foreground: oklch(0.24 0.006 60);
+
+  /* 语义色 */
+  --destructive: oklch(0.58 0.20 28);
+  --success: oklch(0.52 0.095 165);
+  --warning: oklch(0.74 0.13 70);
+
+  /* 发丝级边框：暖灰 */
+  --border: oklch(0.905 0.006 90);
+  --input: oklch(0.905 0.006 90);
+  --ring: oklch(0.40 0.072 184);
+
+  /* 氛围层：极淡网格 + 双色光晕 */
+  --grid-line: oklch(0.24 0.006 60 / 0.045);
+  --glow-1: oklch(0.50 0.09 184 / 0.10);
+  --glow-2: oklch(0.45 0.06 250 / 0.05);
+
+  /* 图表色（与主色成体系） */
+  --chart-1: oklch(0.40 0.072 184);
+  --chart-2: oklch(0.55 0.10 165);
+  --chart-3: oklch(0.72 0.13 70);
+  --chart-4: oklch(0.58 0.20 28);
+  --chart-5: oklch(0.50 0.12 295);
+
+  /* 侧栏 */
+  --sidebar: oklch(0.975 0.004 95);
+  --sidebar-foreground: oklch(0.24 0.006 60);
+  --sidebar-primary: oklch(0.40 0.072 184);
+  --sidebar-primary-foreground: oklch(0.99 0.005 95);
+  --sidebar-accent: oklch(0.95 0.005 95);
+  --sidebar-accent-foreground: oklch(0.24 0.006 60);
+  --sidebar-border: oklch(0.905 0.006 90);
+  --sidebar-ring: oklch(0.40 0.072 184);
+
+  /* ── Fumadocs 主题对齐 ──
+     把 --color-fd-* 全部映射到设计系统 token，让 docs/blog 不再是
+     Fumadocs 默认蓝/灰，而是 Spruce + 暖中性，与全站一致。
+     此处 :root 未分层，优先级高于 Fumadocs 在 @layer theme 里的定义；
+     且值是 var(--token)，会随 .dark 自动切换，故只需写一处。 */
+  --color-fd-background: var(--background);
+  --color-fd-foreground: var(--foreground);
+  --color-fd-muted: var(--muted);
+  --color-fd-muted-foreground: var(--muted-foreground);
+  --color-fd-popover: var(--popover);
+  --color-fd-popover-foreground: var(--popover-foreground);
+  --color-fd-card: var(--card);
+  --color-fd-card-foreground: var(--card-foreground);
+  --color-fd-border: var(--border);
+  --color-fd-primary: var(--primary);
+  --color-fd-primary-foreground: var(--primary-foreground);
+  --color-fd-secondary: var(--secondary);
+  --color-fd-secondary-foreground: var(--secondary-foreground);
+  --color-fd-accent: var(--accent);
+  --color-fd-accent-foreground: var(--accent-foreground);
+  --color-fd-ring: var(--ring);
+  --color-fd-error: var(--destructive);
+  --color-fd-success: var(--success);
+  --color-fd-warning: var(--warning);
+  --color-fd-info: var(--primary);
+  --color-fd-idea: var(--success);
+  --color-fd-diff-add: var(--success);
+  --color-fd-diff-add-symbol: var(--success);
+  --color-fd-diff-remove: var(--destructive);
+  --color-fd-diff-remove-symbol: var(--destructive);
+  --color-fd-overlay: oklch(0.1 0 0 / 0.5);
+}
+
+.dark {
+  /* ── 暗色：暖石墨（非 zinc 冷灰）+ 更亮的 Spruce ── */
+  --background: oklch(0.165 0.004 60);
+  --foreground: oklch(0.93 0.004 90);
+  --card: oklch(0.205 0.005 60);
+  --card-foreground: oklch(0.93 0.004 90);
+  --popover: oklch(0.205 0.005 60);
+  --popover-foreground: oklch(0.93 0.004 90);
+
+  --primary: oklch(0.68 0.11 178);
+  --primary-foreground: oklch(0.165 0.004 60);
+
+  --secondary: oklch(0.25 0.005 60);
+  --secondary-foreground: oklch(0.93 0.004 90);
+
+  --muted: oklch(0.23 0.005 60);
+  --muted-foreground: oklch(0.66 0.006 70);
+
+  --accent: oklch(0.25 0.005 60);
+  --accent-foreground: oklch(0.93 0.004 90);
+
+  --destructive: oklch(0.62 0.19 28);
+  --success: oklch(0.60 0.10 165);
+  --warning: oklch(0.74 0.13 70);
+
+  --border: oklch(0.30 0.006 60);
+  --input: oklch(0.27 0.006 60);
+  --ring: oklch(0.68 0.11 178);
+
+  --grid-line: oklch(0.93 0.004 90 / 0.04);
+  --glow-1: oklch(0.68 0.11 178 / 0.14);
+  --glow-2: oklch(0.50 0.12 295 / 0.08);
+
+  --chart-1: oklch(0.68 0.11 178);
+  --chart-2: oklch(0.62 0.11 165);
+  --chart-3: oklch(0.74 0.13 70);
+  --chart-4: oklch(0.62 0.19 28);
+  --chart-5: oklch(0.60 0.13 295);
+
+  --sidebar: oklch(0.14 0.004 60);
+  --sidebar-foreground: oklch(0.93 0.004 90);
+  --sidebar-primary: oklch(0.68 0.11 178);
+  --sidebar-primary-foreground: oklch(0.165 0.004 60);
+  --sidebar-accent: oklch(0.23 0.005 60);
+  --sidebar-accent-foreground: oklch(0.93 0.004 90);
+  --sidebar-border: oklch(0.26 0.006 60);
+  --sidebar-ring: oklch(0.68 0.11 178);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    scroll-behavior: smooth;
+  }
+  body {
+    @apply bg-background text-foreground;
+    /* 数字列对齐：所有 tabular 场景默认受益 */
+    font-feature-settings: "cv11", "ss01";
+  }
+  /* 锚点跳转时考虑 sticky header 的高度 */
+  [id] {
+    scroll-margin-top: 5rem;
+  }
+  .container {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    max-width: 1280px;
+  }
+  @media (min-width: 640px) {
+    .container {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
+  /* 选区用主色 */
+  ::selection {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+  /* 极简滚动条 */
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--foreground) 14%, transparent);
+    border-radius: 999px;
+    border: 3px solid transparent;
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--foreground) 24%, transparent);
+    background-clip: content-box;
+  }
+}
+
+/* ============================================================
+   组件级工具类：eyebrow 标签 / 网格底纹 / 光晕氛围 / 颗粒噪点
+   都挂 CSS 变量，亮暗 + 主色切换自动跟随
+   ============================================================ */
+@layer components {
+  /* mono 大写小标签——技术控制台视觉的核心点缀 */
+  .eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--primary);
+  }
+  .eyebrow::before {
+    content: "";
+    width: 0.4rem;
+    height: 0.4rem;
+    background: var(--primary);
+    border-radius: 1px;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
+  }
+
+  /* 极淡网格底纹（工程图纸味） */
+  .bg-grid {
+    background-image: linear-gradient(
+        var(--grid-line) 1px,
+        transparent 1px
+      ),
+      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+    background-size: 56px 56px;
+    background-position: center;
+  }
+
+  /* 双色光晕氛围——用在 hero / cta 等需要深度的区块 */
+  .aura {
+    position: relative;
+  }
+  .aura::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: radial-gradient(
+        55% 50% at 78% -4%,
+        var(--glow-1),
+        transparent 70%
+      ),
+      radial-gradient(45% 42% at 8% 4%, var(--glow-2), transparent 72%);
+  }
+  .aura > * {
+    position: relative;
+  }
+
+  /* 颗粒噪点叠加（消除塑料感）——挂在需要的区块上 */
+  .grain {
+    position: relative;
+  }
+  .grain::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0.045;
+    mix-blend-mode: soft-light;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  }
+
+  /* 数据/代码默认等宽 + tabular 数字 */
+  .mono-data {
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum";
+  }
+
+  /* 分层柔性阴影（亮暗各一套） */
+  .shadow-soft {
+    box-shadow: 0 1px 0 0 color-mix(in srgb, var(--foreground) 4%, transparent),
+      0 1px 2px 0 color-mix(in srgb, var(--foreground) 5%, transparent),
+      0 14px 30px -16px color-mix(in srgb, var(--foreground) 14%, transparent);
+  }
+  .shadow-lifted {
+    box-shadow: 0 1px 0 0 color-mix(in srgb, var(--foreground) 5%, transparent),
+      0 30px 70px -30px color-mix(in srgb, var(--foreground) 22%, transparent);
+  }
+}
+
+/* ============================================================
+   修复 Fumadocs 样式与 NavigationMenu 下拉菜单的冲突
+   （Fumadocs 的 .hidden 会干扰 Radix NavigationMenu 状态）
+   ============================================================ */
+[data-slot="navigation-menu"] .hidden,
+[data-slot="navigation-menu-viewport"].hidden,
+[data-slot="navigation-menu-content"].hidden {
+  display: revert !important;
+}
+[data-slot="navigation-menu-viewport-wrapper"] {
+  display: flex !important;
+  position: absolute !important;
+  top: 100% !important;
+  left: 0 !important;
+  z-index: 50 !important;
+  justify-content: center !important;
+}
+[data-slot="navigation-menu-viewport"] {
+  z-index: 100 !important;
+}
+[data-slot="navigation-menu-content"] {
+  width: auto !important;
+}
+[data-slot="navigation-menu-item"] {
+  position: relative !important;
+}
+
+/* 修复 Fumadocs 搜索对话框位置 - 确保垂直居中 */
+[role="dialog"][data-state="open"] {
+  top: 50% !important;
+  --tw-translate-y: -50% !important;
+}
+
+/* 闪卡翻转动画 - 使用 scale 过渡模拟翻转 */
+.flip-card {
+  perspective: 800px;
+}
+.flip-card-face {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.flip-card-face-hidden {
+  transform: rotateY(90deg);
+  opacity: 0;
+  position: absolute;
+  inset: 0;
+}
+.flip-card-face-visible {
+  transform: rotateY(0deg);
+  opacity: 1;
+  position: relative;
+}
+
+/* 尊重「减少动态」偏好 */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}

package/template/src/app/icon.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="24" rx="5" fill="#0F5C57" />
+  <path d="M3 17 L9 7 L13 14 L21 4" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" />
+  <circle cx="9" cy="7" r="1.6" fill="#FFFFFF" />
+  <circle cx="21" cy="4" r="1.6" fill="#FFFFFF" />
+</svg>

package/template/src/app/image-proxy/[...path]/route.ts

@@ -0,0 +1,137 @@
+/**
+ * Image Proxy 路由
+ *
+ * 安全地代理访问存储中的图片
+ * 路由: /image-proxy/{bucket}/{key}
+ *
+ * 示例: /image-proxy/avatars/user-123/1234567890.jpg
+ */
+
+import { type NextRequest, NextResponse } from "next/server";
+
+import { DEFAULT_SIGNED_URL_EXPIRES } from "@/features/storage/types";
+import { storageService } from "@/services/storage";
+
+// ============================================
+// 配置
+// ============================================
+
+/**
+ * 获取允许的存储桶白名单
+ *
+ * 安全措施：只允许代理访问预定义的存储桶
+ */
+function getAllowedBuckets(): string[] {
+  const avatarsBucket = process.env.NEXT_PUBLIC_AVATARS_BUCKET_NAME;
+  const uploadsBucket = process.env.STORAGE_BUCKET_NAME ?? "nextdevtpl-uploads";
+
+  const buckets = new Set<string>([uploadsBucket]);
+
+  if (avatarsBucket) {
+    buckets.add(avatarsBucket);
+  }
+
+  return [...buckets];
+}
+
+/**
+ * 缓存时间 (秒)
+ *
+ * 与签名 URL 有效期保持一致
+ */
+const CACHE_MAX_AGE = DEFAULT_SIGNED_URL_EXPIRES;
+
+// ============================================
+// 路由处理器
+// ============================================
+
+/**
+ * GET /image-proxy/[...path]
+ *
+ * 代理图片请求，生成签名 URL 并重定向
+ *
+ * @param _request - Next.js 请求对象 (未使用)
+ * @param params - 路由参数 (path 数组)
+ */
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  try {
+    const { path } = await params;
+
+    // 解析路径: [bucket, ...keyParts]
+    if (!path || path.length < 2) {
+      return NextResponse.json(
+        { error: "Invalid path: expected /image-proxy/{bucket}/{key}" },
+        { status: 400 }
+      );
+    }
+
+    const [bucket, ...keyParts] = path;
+    const key = keyParts.join("/");
+
+    // 安全检查：验证存储桶在白名单中
+    const allowedBuckets = getAllowedBuckets();
+    if (!bucket || !allowedBuckets.includes(bucket)) {
+      console.warn(`[Image Proxy] 拒绝访问未授权的存储桶: ${bucket}`);
+      return NextResponse.json(
+        { error: "Bucket not allowed" },
+        { status: 403 }
+      );
+    }
+
+    // 验证文件键名不为空
+    if (!key) {
+      return NextResponse.json(
+        { error: "File key is required" },
+        { status: 400 }
+      );
+    }
+
+    // 生成签名 URL
+    const signedUrl = await storageService.createDownloadUrl({
+      key,
+      bucket,
+      expiresIn: CACHE_MAX_AGE,
+    });
+
+    // 重定向到签名 URL
+    // 设置缓存头，让浏览器/CDN 缓存响应
+    return NextResponse.redirect(signedUrl, {
+      status: 302,
+      headers: {
+        "Cache-Control": `public, max-age=${CACHE_MAX_AGE}, s-maxage=${CACHE_MAX_AGE}`,
+        // 告诉 CDN 可以缓存
+        "CDN-Cache-Control": `public, max-age=${CACHE_MAX_AGE}`,
+      },
+    });
+  } catch (error) {
+    console.error("[Image Proxy] 错误:", error);
+
+    // 返回错误响应
+    return NextResponse.json(
+      { error: "Failed to generate signed URL" },
+      { status: 500 }
+    );
+  }
+}
+
+// ============================================
+// 路由配置
+// ============================================
+
+/**
+ * 运行时配置
+ *
+ * 使用 Edge Runtime 以获得更好的性能
+ * 注意：如果 S3 客户端不支持 Edge，可以切换回 nodejs
+ */
+// export const runtime = "edge";
+
+/**
+ * 动态路由配置
+ *
+ * 强制动态渲染，因为签名 URL 需要实时生成
+ */
+export const dynamic = "force-dynamic";

package/template/src/app/layout.tsx

@@ -0,0 +1,73 @@
+import { GeistMono } from "geist/font/mono";
+import { GeistSans } from "geist/font/sans";
+import type { Metadata } from "next";
+import { cookies } from "next/headers";
+
+import { siteConfig } from "@/config";
+
+import "./globals.css";
+
+/**
+ * 全局元数据配置
+ * 使用 siteConfig 集中管理
+ */
+export const metadata: Metadata = {
+  title: {
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  keywords: [...siteConfig.keywords],
+  authors: [{ name: siteConfig.author.name, url: siteConfig.author.url }],
+  creator: siteConfig.author.name,
+  metadataBase: new URL(siteConfig.url),
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: siteConfig.url,
+    title: siteConfig.name,
+    description: siteConfig.description,
+    siteName: siteConfig.name,
+    images: [
+      {
+        url: siteConfig.ogImage,
+        width: 1200,
+        height: 630,
+        alt: siteConfig.name,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: siteConfig.name,
+    description: siteConfig.description,
+    images: [siteConfig.ogImage],
+    creator: "@nextdevtpl",
+  },
+  manifest: "/site.webmanifest",
+};
+
+/**
+ * 根布局
+ *
+ * 提供基础 HTML 结构和字体配置
+ * 实际内容由 [locale]/layout.tsx 处理
+ */
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const cookieStore = await cookies();
+  const locale = cookieStore.get("NEXT_LOCALE")?.value ?? "en";
+
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <body
+        className={`${GeistSans.variable} ${GeistMono.variable} font-sans antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/template/src/app/robots.ts

@@ -0,0 +1,29 @@
+import type { MetadataRoute } from "next";
+
+import { siteConfig } from "@/config";
+
+/**
+ * 动态生成 robots.txt
+ *
+ * 允许所有搜索引擎爬虫访问
+ * 指向 sitemap.xml
+ */
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+        disallow: [
+          "/api/",
+          "/dashboard/",
+          "/sign-in",
+          "/sign-up",
+          "/forgot-password",
+          "/reset-password",
+        ],
+      },
+    ],
+    sitemap: `${siteConfig.url}/sitemap.xml`,
+  };
+}