feat: 初始化 Toolso.AI 开源 AI 工具导航站项目

🎯 项目概述
- 一个开源的 AI 工具导航站，帮助用户发现和探索优秀的 AI 工具
- 基于 Next.js 16 + React 19 构建的现代化全栈应用

✨ 核心功能
- AI 工具目录：分类展示、搜索筛选、工具详情页
- 工具提交：用户可提交新工具，社区驱动
- 管理后台：工具审核、用户管理、角色权限控制
- 博客系统：MDX 驱动，AI 资讯和教程
- 国际化支持：中文/英文双语 (next-intl)
- 用户认证：Better Auth + Google OAuth
- 深色/浅色主题切换

🛠 技术栈
- 前端：Next.js 16 (App Router) + React 19 + TypeScript
- 样式：Tailwind CSS + Framer Motion 动画
- UI 组件：自定义组件库 + Radix UI
- 表单验证：React Hook Form + Zod
- 数据库：PostgreSQL + Drizzle ORM
- 认证：Better Auth (邮箱密码 + Google OAuth)
- 邮件：Resend (验证邮件 + Newsletter)
- 存储：Cloudflare R2 / AWS S3 兼容

📁 项目结构
- src/app/[locale]/(auth) - 认证页面
- src/app/[locale]/(marketing) - 营销页面 (首页、博客、工具目录)
- src/app/[locale]/(protected) - 受保护页面 (仪表板、个人资料)
- src/app/[locale]/(admin) - 管理后台
- src/features - 功能模块
- src/lib - 核心业务逻辑
- messages - 国际化翻译文件

🗄 数据库
- 包含 user, session, account, verification, passwordResetToken 等核心表
- 支持 Drizzle ORM 迁移管理

📝 文档
- 完整的 CLAUDE.md 项目指南
- 环境变量配置示例 (.env.example)
- MIT 开源许可证

src/components/blog-layout.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { BlogWithSlug } from "@/lib/blog";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { Container } from "./container";
+import Image from "next/image";
+import { Logo } from "./Logo";
+import Link from "next/link";
+import { format } from "date-fns";
+export function BlogLayout({
+  blog,
+  children,
+}: {
+  blog: BlogWithSlug;
+  children: React.ReactNode;
+}) {
+  return (
+    <Container className="mt-16 lg:mt-32">
+      <div className="flex justify-between items-center px-2 py-8">
+        <Link href="/blog" className="flex space-x-2 items-center">
+          <IconArrowLeft className="w-4 h-4 text-muted-foreground" />
+          <span className="text-sm text-muted-foreground">Back</span>
+        </Link>
+        <div className="flex space-x-2 items-center">
+          <div className="flex space-x-2 items-center ">
+            <Image
+              src={blog.author.src}
+              alt={blog.author.name}
+              width={20}
+              height={20}
+              className="rounded-full h-5 w-5"
+            />
+            <p className="text-sm font-normal text-muted-foreground">
+              {blog.author.name}
+            </p>
+          </div>
+          <div className="h-5 rounded-lg w-0.5 bg-border" />
+          <time dateTime={blog.date} className="flex items-center text-base ">
+            <span className="text-muted-foreground text-sm">
+              {format(new Date(blog.date), "MMMM dd, yyyy")}
+            </span>
+          </time>
+        </div>
+      </div>
+      <div className="max-w-4xl mx-auto">
+        {blog.image ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={blog.image}
+            className="h-40 md:h-96 w-full aspect-square object-cover rounded-3xl"
+            alt={blog.title}
+          />
+        ) : (
+          <div className="h-40 md:h-96 w-full aspect-square rounded-3xl shadow-derek bg-card flex items-center justify-center">
+            <Logo />
+          </div>
+        )}
+      </div>
+      <div className="xl:relative">
+        <div className="mx-auto max-w-2xl">
+          <article className="pb-8">
+            <header className="flex flex-col">
+              <h1 className="mt-8 text-4xl font-bold tracking-tight text-foreground sm:text-5xl ">
+                {blog.title}
+              </h1>
+            </header>
+            <div
+              className="mt-8 prose prose-sm dark:prose-invert"
+              data-mdx-content
+            >
+              {children}
+            </div>
+          </article>
+        </div>
+      </div>
+    </Container>
+  );
+}