打算使用prisma

src/app/folders/FoldersClient.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import DarkButton from "@/components/buttons/DarkButton";
-import LightButton from "@/components/buttons/LightButton";
-import ACard from "@/components/cards/ACard";
-import { Center } from "@/components/Center";
+import { ChevronRight, Folder, FolderPlus, Trash2 } from "lucide-react";
 import {
   createFolder,
   deleteFolderById,
   getFoldersWithTextPairsCountByOwner,
 } from "@/lib/controllers/FolderController";
 import { useEffect, useState } from "react";
-import InFolder from "./InFolder";
+import InFolder from "./[folder_id]/InFolder";
+import { Center } from "@/components/Center";
+import { useRouter } from "next/navigation";
 
 interface Folder {
   id: number;
@@ -26,26 +25,46 @@ interface FolderProps {
 
 const FolderCard = ({ folder, deleteCallback, openCallback }: FolderProps) => {
   return (
-    <div className="flex flex-row items-center justify-center border">
-      <div className="flex-1">
-        <div>ID: {folder.id}</div>
-        <div>Name: {folder.name}</div>
-        <div>Text Pairs Count: {folder.text_pairs_count}</div>
+    <div
+      className="flex justify-between items-center group p-4 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors"
+      onClick={openCallback}
+    >
+      <div className="flex items-center gap-3 flex-1">
+        <div className="w-10 h-10 rounded-lg bg-linear-to-br from-blue-50 to-blue-100 flex items-center justify-center group-hover:from-blue-100 group-hover:to-blue-200 transition-colors">
+          <Folder></Folder>
+        </div>
+
+        <div className="flex-1">
+          <h3 className="font-medium text-gray-900">{folder.name}</h3>
+          <p className="text-sm text-gray-500">
+            {folder.text_pairs_count} items
+          </p>
+        </div>
+
+        <div className="text-xs text-gray-400">#{folder.id}</div>
+      </div>
+
+      <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            deleteCallback();
+          }}
+          className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+        >
+          <Trash2 size={16} />
+        </button>
+        <ChevronRight size={18} className="text-gray-400" />
       </div>
-      <DarkButton className="w-fit h-fit m-2" onClick={openCallback}>
-        open
-      </DarkButton>
-      <DarkButton className="w-fit h-fit m-2" onClick={deleteCallback}>
-        delete
-      </DarkButton>
     </div>
   );
 };
 
 export default function FoldersClient({ username }: { username: string }) {
   const [folders, setFolders] = useState<Folder[]>([]);
-  const [page, setPage] = useState<"folders" | "in folder">("folders");
   const [folderId, setFolderId] = useState<number>(0);
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     getFoldersWithTextPairsCountByOwner(username).then((folders) => {
@@ -54,50 +73,76 @@ export default function FoldersClient({ username }: { username: string }) {
   }, [username]);
 
   const updateFolders = async () => {
-    const updatedFolders = await getFoldersWithTextPairsCountByOwner(username);
-    setFolders(updatedFolders as Folder[]);
+    setLoading(true);
+    try {
+      const updatedFolders =
+        await getFoldersWithTextPairsCountByOwner(username);
+      setFolders(updatedFolders as Folder[]);
+    } finally {
+      setLoading(false);
+    }
   };
-
-  if (page === "folders")
     return (
       <Center>
-        <ACard className="flex flex-col">
-          <h1 className="text-4xl font-extrabold text-center">Your Folders</h1>
-          <LightButton
-            className="w-fit"
+        <div className="w-full max-w-2xl mx-auto bg-white border border-gray-200 rounded-2xl p-6">
+          <div className="mb-6">
+            <h1 className="text-2xl font-light text-gray-900">Folders</h1>
+            <p className="text-sm text-gray-500 mt-1">
+              Manage your collections
+            </p>
+          </div>
+
+          <button
             onClick={async () => {
               const folderName = prompt("Enter folder name:");
               if (!folderName) return;
-              await createFolder(folderName, username);
-              await updateFolders();
+              setLoading(true);
+              try {
+                await createFolder(folderName, username);
+                await updateFolders();
+              } finally {
+                setLoading(false);
+              }
             }}
+            disabled={loading}
+            className="w-full p-3 border-2 border-dashed border-gray-300 rounded-xl text-gray-500 hover:border-gray-400 hover:text-gray-600 transition-colors flex items-center justify-center gap-2"
           >
-            Create Folder
-          </LightButton>
-          <div className="overflow-y-auto">
-            {folders.map((folder) => (
-              <FolderCard
-                key={folder.id}
-                folder={folder}
-                deleteCallback={() => {
-                  const confirm = prompt(
-                    "Input folder's name to delete this folder.",
-                  );
-                  if (confirm === folder.name) {
-                    deleteFolderById(folder.id).then(updateFolders);
-                  }
-                }}
-                openCallback={() => {
-                  setFolderId(folder.id);
-                  setPage("in folder");
-                }}
-              />
-            ))}
+            <FolderPlus size={18} />
+            <span>{loading ? "Creating..." : "New Folder"}</span>
+          </button>
+
+          <div className="mt-4">
+            {folders.length === 0 ? (
+              <div className="text-center py-12 text-gray-400">
+                <div className="w-16 h-16 mx-auto mb-3 rounded-lg bg-gray-100 flex items-center justify-center">
+                  <FolderPlus size={24} className="text-gray-400" />
+                </div>
+                <p className="text-sm">No folders yet</p>
+              </div>
+            ) : (
+              <div className="rounded-xl border border-gray-200 overflow-hidden">
+                {folders.map((folder) => (
+                  <FolderCard
+                    key={folder.id}
+                    folder={folder}
+                    deleteCallback={() => {
+                      const confirm = prompt(
+                        `Type "${folder.name}" to delete:`,
+                      );
+                      if (confirm === folder.name) {
+                        deleteFolderById(folder.id).then(updateFolders);
+                      }
+                    }}
+                    openCallback={() => {
+                      setFolderId(folder.id);
+                      router.push(`/folders/${folder.id}`);
+                    }}
+                  />
+                ))}
+              </div>
+            )}
           </div>
-        </ACard>
+        </div>
       </Center>
     );
-  else if (page === "in folder") {
-    return <InFolder username={username} folderId={folderId} />;
-  }
 }

src/app/folders/InFolder.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import { getTextPairsByFolderId } from "@/lib/controllers/TextPairController";
-import { useEffect, useState } from "react";
-
-interface Props {
-  username: string;
-  folderId: number;
-}
-
-interface TextPair {
-  id: number;
-  text1: string;
-  text2: string;
-  locale1: string;
-  locale2: string;
-}
-
-export default function InFolder({ folderId }: Props) {
-  const [textPairs, setTextPairs] = useState<TextPair[]>([]);
-
-  useEffect(() => {
-    getTextPairsByFolderId(folderId).then((textPairs) => {
-      setTextPairs(textPairs as TextPair[]);
-    });
-  }, [folderId, textPairs]);
-
-  const updateTextPairs = async () => {
-    const updatedTextPairs = await getTextPairsByFolderId(folderId);
-    setTextPairs(updatedTextPairs as TextPair[]);
-  };
-  
-  return (
-    <div>
-      <h1>In Folder</h1>
-    </div>
-  );
-}

src/app/folders/[folder_id]/InFolder.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { ArrowLeft, Plus, Volume2, Edit, Trash2 } from "lucide-react";
+import { Center } from "@/components/Center";
+import { createTextPair, getTextPairsByFolderId } from "@/lib/controllers/TextPairController";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import Container from "@/components/cards/Container";
+
+interface AddTextPairModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAdd: (textPair: TextPair) => void;
+}
+
+const AddTextPairModal = ({
+  isOpen,
+  onClose,
+  onAdd,
+}: AddTextPairModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
+        <h2 className="text-xl font-light mb-4">Add New Vocabulary</h2>
+        {/* 表单内容 */}
+      </div>
+    </div>
+  );
+};
+
+interface TextPair {
+  id: number;
+  text1: string;
+  text2: string;
+  locale1: string;
+  locale2: string;
+}
+
+interface TextPairCardProps {
+  textPair: TextPair;
+}
+
+const TextPairCard = ({ textPair }: TextPairCardProps) => {
+  return (
+    <div className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
+      <div className="p-4">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-2 text-xs text-gray-500">
+            <span className="px-2 py-1 bg-gray-100 rounded-md">
+              {textPair.locale1.toUpperCase()}
+            </span>
+            <span>→</span>
+            <span className="px-2 py-1 bg-gray-100 rounded-md">
+              {textPair.locale2.toUpperCase()}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-1 opacity-0 hover:opacity-100 transition-opacity">
+            <button className="p-1.5 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded-md transition-colors">
+              <Volume2 size={14} />
+            </button>
+            <button className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-md transition-colors">
+              <Edit size={14} />
+            </button>
+            <button className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors">
+              <Trash2 size={14} />
+            </button>
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          <div>
+            <div className="text-sm text-gray-500 mb-1">{textPair.locale1}</div>
+            <div className="text-gray-900">{textPair.text1}</div>
+          </div>
+
+          <div>
+            <div className="text-sm text-gray-500 mb-1">{textPair.locale2}</div>
+            <div className="text-gray-900">{textPair.text2}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default function InFolder({ folderId }: { folderId: number }) {
+  const [textPairs, setTextPairs] = useState<TextPair[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    const fetchTextPairs = async () => {
+      setLoading(true);
+      try {
+        const data = await getTextPairsByFolderId(folderId);
+        setTextPairs(data as TextPair[]);
+      } catch (error) {
+        console.error("Failed to fetch text pairs:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTextPairs();
+  }, [folderId]);
+
+  return (
+    <Center>
+      <Container className="p-6">
+        <div className="mb-6">
+          <button
+            onClick={router.back}
+            className="flex items-center gap-2 text-gray-500 hover:text-gray-700 transition-colors mb-4"
+          >
+            <ArrowLeft size={16} />
+            <span className="text-sm">Back to folders</span>
+          </button>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-light text-gray-900">Vocabulary</h1>
+              <p className="text-sm text-gray-500 mt-1">
+                {textPairs.length} items
+              </p>
+            </div>
+
+            <button
+              className="p-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+              onClick={() => {
+                setOpen(true);
+              }}
+            >
+              <Plus size={18} className="text-gray-600" />
+            </button>
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-gray-200 overflow-hidden">
+          {loading ? (
+            <div className="p-8 text-center">
+              <div className="w-8 h-8 border-2 border-gray-200 border-t-gray-400 rounded-full animate-spin mx-auto mb-3"></div>
+              <p className="text-sm text-gray-500">Loading vocabulary...</p>
+            </div>
+          ) : textPairs.length === 0 ? (
+            <div className="p-12 text-center">
+              <p className="text-sm text-gray-500 mb-2">No vocabulary items</p>
+            </div>
+          ) : (
+            <div className="divide-y divide-gray-100">
+              {textPairs.map((textPair) => (
+                <TextPairCard key={textPair.id} textPair={textPair} />
+              ))}
+            </div>
+          )}
+        </div>
+      </Container>
+      <AddTextPairModal
+        isOpen={open}
+        onClose={function (): void {
+          throw new Error("Function not implemented.");
+        }}
+        onAdd={function (textPair: TextPair): void {
+          throw new Error("Function not implemented.");
+        }}
+      ></AddTextPairModal>
+    </Center>
+  );
+}

src/app/folders/[folder_id]/page.tsx

@@ -0,0 +1,17 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import InFolder from "./InFolder";
+import { getOwnerByFolderId } from "@/lib/controllers/FolderController";
+export default async function FoldersPage({
+  params,
+}: {
+  params: Promise<{ folder_id: number }>;
+}) {
+  const session = await getServerSession();
+  const { folder_id } = await params;
+  if (!session?.user?.name) redirect(`/login`);
+  if ((await getOwnerByFolderId(folder_id)) !== session.user.name) {
+    return "you are not the owner of this folder";
+  }
+  return <InFolder folderId={folder_id} />;
+}