Database setup

app/(root)/page.tsx

@@ -1,14 +1,17 @@
 import BookCard from "@/components/BookCard";
 import HeroSection from "@/components/HeroSection";
-import { sampleBooks } from "@/lib/constants";
+import { getAllBooks } from "@/lib/actions/book.actions";
+
+export default async function Page() {
+  const bookResult = await getAllBooks();
+  const books = bookResult.success ? bookResult.data ?? [] : [];
 
-export default function Page() {
   return (
-    <div className="container wrapper">
+    <main className="container wrapper">
       <HeroSection />
 
       <div className="library-books-grid">
-        {sampleBooks.map((book) => (
+        {books.map((book) => (
           <BookCard
             key={book._id}
             title={book.title}
@@ -18,6 +21,6 @@ export default function Page() {
           />
         ))}
       </div>
-    </div>
+    </main>
   );
 }

app/api/upload/route.ts

@@ -0,0 +1,52 @@
+import { MAX_FILE_SIZE } from "@/lib/constants";
+import { auth } from "@clerk/nextjs/server";
+import { handleUpload, HandleUploadBody } from "@vercel/blob/client";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest): Promise<NextResponse> {
+    const body = (await request.json()) as HandleUploadBody;
+
+    try {
+        // 处理上传请求
+        const jsonResponse = await handleUpload({
+            token: process.env.BLOB_READ_WRITE_TOKEN,
+            body,
+            request,
+            // 在生成上传令牌之前执行的函数
+            onBeforeGenerateToken: async () => {
+                // 检查用户是否登录
+                const { userId } = await auth();
+                if (!userId) {
+                    throw new Error("Unauthorized: 用户未登录");
+                }
+
+                return {
+                    allowedContentTypes: [
+                        "application/pdf",
+                        "image/jpeg",
+                        "image/png",
+                        "image/webp",
+                    ],
+                    addRandomSuffix: true,
+                    maximumSizeInBytes: MAX_FILE_SIZE,
+                    tokenPayload: JSON.stringify({ userId }),
+                };
+            },
+            // 上传完成后的回调
+            onUploadCompleted: async ({ blob, tokenPayload }) => {
+                console.log("文件已上传至 Blob", blob.url);
+
+                const payload = tokenPayload ? JSON.parse(tokenPayload) : null;
+                const userId = payload?.userId;
+
+                // TODO: 上报PostHog
+            },
+        });
+
+        return NextResponse.json(jsonResponse);
+    } catch (e) {
+        const message = e instanceof Error ? e.message : "未知错误";
+        const status = message.includes("Unauthorized") ? 401 : 500;
+        return NextResponse.json({ error: message }, { status });
+    }
+}

app/layout.tsx

@@ -4,7 +4,7 @@ import { ClerkProvider } from "@clerk/nextjs";
 import "./globals.css";
 import NavBar from "@/components/NavBar";
 import { CLERK_AUTH_APPEARANCE_OVERRIDE } from "@/lib/constants";
-
+import { Toaster } from "@/components/ui/sonner"
 
 const ibmPlexSerif = IBM_Plex_Serif({
   variable: "--font-ibm-plex-serif",
@@ -40,6 +40,7 @@ export default function RootLayout({
         <ClerkProvider appearance={CLERK_AUTH_APPEARANCE_OVERRIDE}>
           <NavBar />
           {children}
+          <Toaster />
         </ClerkProvider>
       </body>
     </html>

components/UploadForm.tsx

@@ -5,8 +5,13 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
 import { Upload, Image as ImageIcon, X } from "lucide-react";
-import { cn } from "@/lib/utils";
-
+import { cn, parsePDFFile } from "@/lib/utils";
+import {
+  MAX_FILE_SIZE,
+  ACCEPTED_PDF_TYPES,
+  MAX_IMAGE_SIZE,
+  ACCEPTED_IMAGE_TYPES,
+} from "@/lib/constants";
 import {
   Form,
   FormControl,
@@ -16,6 +21,11 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { useAuth } from "@clerk/nextjs";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+import { checkBookExists, createBook, saveBookSegments } from "@/lib/actions/book.actions";
+import { upload } from "@vercel/blob/client";
 
 const VOICES = {
   male: [
@@ -42,34 +52,155 @@ const VOICES = {
 };
 
 const formSchema = z.object({
-  pdfFile: z.any().refine((file) => file, "请选择一本 PDF 文件"),
-  coverImage: z.any().optional(),
-  title: z.string().min(1, "标题是必填项"),
-  author: z.string().min(1, "作者是必填项"),
+  title: z.string().min(1, "标题是必填项").max(100, "标题不能超过 100 个字符"),
+  author: z.string().min(1, "作者是必填项").max(100, "作者名不能超过 100 个字符"),
   voice: z.string().min(1, "请选择一个语音"),
+  pdfFile: z
+    .instanceof(File, { message: "请选择一本 PDF 文件" })
+    .refine((file) => file.size <= MAX_FILE_SIZE, "文件大小不能超过 50MB")
+    .refine((file) => ACCEPTED_PDF_TYPES.includes(file.type), "仅支持 PDF 格式的文件"),
+  coverImage: z
+    .instanceof(File)
+    .optional()
+    .refine((file) => !file || file.size <= MAX_IMAGE_SIZE, "图片大小不能超过 10MB")
+    .refine(
+      (file) => !file || ACCEPTED_IMAGE_TYPES.includes(file.type),
+      "仅支持 .jpg、.jpeg、.png 和 .webp 格式的图片",
+    ),
 });
 
 export default function UploadForm() {
   const [isLoading, setIsLoading] = useState(false);
   const [pdfFilename, setPdfFilename] = useState<string | null>(null);
   const [coverFilename, setCoverFilename] = useState<string | null>(null);
+  const { userId } = useAuth();
+  const router = useRouter();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       title: "",
       author: "",
       voice: "",
+      pdfFile: undefined,
+      coverImage: undefined,
     },
   });
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
+  async function onSubmit(data: z.infer<typeof formSchema>) {
+    // 检查用户是否登录
+    if (!userId) {
+      return toast.error("上传图书前请先登录！");
+    }
+
     setIsLoading(true);
-    // Simulate API call
-    setTimeout(() => {
+
+    // PostHog -> Track Book Uploads ...
+
+    try {
+      // 检查图书是否已存在
+      const existsCheck = await checkBookExists(data.title);
+      if (existsCheck.exists && existsCheck.book) {
+        toast.info("同名的图书已存在！");
+        // 清空表单
+        form.reset();
+        // 已存在就跳转到该图书的详情页面
+        router.push(`/books/${existsCheck.book.slug}`);
+        return;
+      }
+
+      // 格式化文件名
+      const fileTitle = data.title.replace(/\s+/g, "-").toLowerCase();
+      // 解析 PDF 文件
+      const pdfFile = data.pdfFile;
+      const parsedPdf = await parsePDFFile(pdfFile);
+      if (parsedPdf.content.length === 0) {
+        toast.error("无法解析 PDF 文件，请上传有效的 PDF 文件！");
+        return;
+      }
+
+      // 上传pdf
+      const uploadedPdfBlob = await upload(fileTitle, pdfFile, {
+        access: "public",
+        handleUploadUrl: "/api/upload",
+        contentType: "application/pdf",
+      })
+
+      // 上传封面
+      let coverUrl: string;
+
+      if (data.coverImage) {
+        const coverFile = data.coverImage;
+        const uploadedCoverBlob = await upload(`${fileTitle}_cover.png`, coverFile, {
+          access: "public",
+          handleUploadUrl: "/api/upload",
+          contentType: coverFile.type,
+        })
+        coverUrl = uploadedCoverBlob.url;
+      } else {
+        const response = await fetch(parsedPdf.cover);
+        const blob = await response.blob();
+
+        const uploadedCoverBlob = await upload(`${fileTitle}_cover.png`, blob, {
+          access: "public",
+          handleUploadUrl: "/api/upload",
+          contentType: "image/png",
+        })
+        coverUrl = uploadedCoverBlob.url;
+      }
+
+      // 创建图书
+      const book = await createBook({
+        clerkId: userId,
+        title: data.title,
+        author: data.author,
+        persona: data.voice,
+        fileURL: uploadedPdfBlob.url,
+        fileBlobKey: uploadedPdfBlob.pathname,
+        coverURL: coverUrl,
+        fileSize: pdfFile.size,
+      })
+
+      // 创建失败
+      if (!book.success) {
+        throw new Error("创建图书失败");
+      }
+
+      // 创建的图书已存在
+      if (book.alreadyExists) {
+        toast.info("同名的图书已存在！");
+        // 清空表单
+        form.reset();
+        // 已存在就跳转到该图书的详情页面
+        router.push(`/books/${book.data.slug}`);
+        return;
+      }
+
+      // 创建成功
+      // 保存图书片段
+      const segments = await saveBookSegments(
+        book.data._id,
+        userId,
+        parsedPdf.content,
+      )
+
+      if (!segments.success) {
+        toast.error("保存图书片段失败");
+        throw new Error("保存图书片段失败");
+      }
+
+      toast.success("图书创建成功！");
+      // 清空表单
+      form.reset();
+      // 创建新书成功跳转到首页
+      router.push(`/`);
+
+    } catch (e) {
+      console.error(e);
+      toast.error("上传图书失败，请稍后重试！");
+    } finally {
       setIsLoading(false);
-      console.log("Form Submitted:", values);
-    }, 2000);
+    }
   }
 
   return (

components/ui/sonner.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

database/models/book-segment.model.ts

@@ -0,0 +1,23 @@
+import { IBookSegment } from "@/type";
+import { Schema, models, model } from "mongoose";
+
+// 创建 BookSegmentSchema
+const BookSegmentSchema = new Schema<IBookSegment>({
+    clerkId: {type: String, required: true},
+    bookId: {type: Schema.Types.ObjectId, ref: "Book", required: true, index: true},
+    content: {type: String, required: true},
+    segmentIndex: {type: Number, required: true, index: true},
+    pageNumber: {type: Number, index: true},
+    wordCount: {type: Number, required: true},
+}, {timestamps: true})
+
+// 为常见查询场景创建复合字段索引，上面定义的"index: true"是单字段索引
+// 当 Vapi 朗读一本书时，它会按顺序获取段落。而这个复合索引可以让查找即时完成，而不是扫描数据集中的每个数据段。
+BookSegmentSchema.index({bookId: 1, segmentIndex: 1}, {unique: true});
+BookSegmentSchema.index({bookId: 1, pageNumber: 1});
+BookSegmentSchema.index({bookId: 1, content: 'text'});
+
+// 防止每次 Next.js 开发环境热更时重复创建模型
+const BookSegment = models.BookSegment || model("BookSegment", BookSegmentSchema);
+
+export default BookSegment;

database/models/book.model.ts

@@ -0,0 +1,22 @@
+import { IBook } from "@/type";
+import { Schema, models, model } from "mongoose";
+
+// 创建 BookSchema
+const BookSchema = new Schema<IBook>({
+    clerkId: {type: String, required: true},
+    title: {type: String, required: true},
+    slug: {type: String, required: true, unique: true, lowercase: true, trim: true},
+    author: {type: String, required: true},
+    persona: {type: String},
+    fileURL: {type: String, required: true},
+    fileBlobKey: {type: String, required: true},
+    coverURL: {type: String},
+    coverBlobKey: {type: String},
+    fileSize: {type: Number, required: true},
+    totalSegments: {type: Number, default: 0},
+}, {timestamps: true})
+
+// 防止每次 Next.js 开发环境热更时重复创建模型
+const Book = models.Book || model("Book", BookSchema);
+
+export default Book;