asder

src/app/addItem/[...slug]/page.jsx

-function AddItem({}) {
-    return ( 
-        <div>
-            asdasd
-        </div>
-     );
-}
-
-export default AddItem;
\ No newline at end of file

src/app/api/folder/[slug]/route.js

@@ -4,7 +4,7 @@ import prisma from "@/lib/prisma";
 
 // R -> Read One
 export async function GET(request, { params }) {
-  const slug = params.slug; // 'a', 'b', or 'c'
+  const slug = params.slug; 
   try {
     const folder = await prisma.folder.findUnique({
       where: {
@@ -18,13 +18,29 @@ export async function GET(request, { params }) {
 }
 
 //U -> Update
-export async function PUT(request) {
-  const res = await request.json();
-  return Response.json({ res });
+export async function PUT(request, { params }) {
+  const body = await request.json();
+  const slug = params.slug; 
+  try {
+    const res = await prisma.folder.update({
+      where: { id: parseInt(slug) },
+      data: { ...body },
+    });
+    return Response.json({ res });
+  } catch (error) {
+    return response(error, "err");
+  }
 }
 
 //D -> Delete
-export async function DELETE(request) {
-  const res = await request.json();
-  return Response.json({ res });
+export async function DELETE(request, { params }) {
+  const slug = params.slug; 
+  try {
+    const res = await prisma.folder.delete({
+      where: { id: parseInt(slug) },
+    });
+    return Response.json({ res });
+  } catch (error) {
+    return response(error, "err");
+  }
 }

src/app/detail/[...slug]/page.jsx

+"use client";
+
+import { getFetch } from "@/lib/doFetch";
+import { useRequest } from "ahooks";
+import { Image, Divider, Button } from "@nextui-org/react";
+import dayjs from "dayjs";
+import { BsFolderFill } from "react-icons/bs";
+import EditFolder from "@/components/EditFolder";
+import DeleteFolder from "@/components/DeleteFolder";
+
+export default function Detail({ folder, params }) {
+  //params.slug 路由传参获取
+
+  const { data, refreshAsync } = useRequest(
+    async () => {
+      let res = await getFetch({
+        url: "/api/folder/" + params.slug,
+        params: {},
+      });
+      return res?.data;
+    },
+    {
+      refreshDeps: [params.slug],
+    }
+  );
+
+  return (
+    <div className="flex w-full">
+      <Image
+        isBlurred
+        className="object-cover w-100 m-12"
+        src={data?.poster}
+        width={400}
+        alt="avatar"
+      />
+      <div className="max-w-md ml-20 mt-12 flex-1">
+        <div className="space-y-1">
+          <h1 className="text-2xl mb-2">{data?.name}</h1>
+          <p className="text-small text-default-400 ">
+            创建时间:
+            {data?.createdAt
+              ? dayjs(data.createdAt).format("YYYY-MM-DD hh:mm:ss")
+              : "-"}
+          </p>
+        </div>
+        <Divider className="my-4" />
+        <div className="flex h-5 items-center space-x-4 text-small mt-8">
+          <DeleteFolder data={data} refresh={refreshAsync}></DeleteFolder>
+
+          <Divider orientation="vertical" />
+          <EditFolder data={data} refresh={refreshAsync} />
+          <Divider orientation="vertical" />
+          <Button
+            isIconOnly
+            color="primary"
+            variant="faded"
+            aria-label="Take a edit"
+          >
+            <BsFolderFill style={{ fontSize: "20px" }} />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/addItem/page.jsx → src/app/detail/page.jsx

@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic';
 
 const ServerSidePage = dynamic(() => import('@/pages/ssr'), { ssr: false });
 
-function AddItem({}) {
+function Detail({}) {
     return ( 
         <div>
             details
@@ -11,4 +11,4 @@ function AddItem({}) {
      );
 }
 
-export default AddItem;
\ No newline at end of file
+export default Detail;
\ No newline at end of file

src/app/globals.css

@@ -23,9 +23,40 @@
   }
 }
 
-html,body{
+html{
   height: 100%;
+  overflow: hidden;
+}
+body{
+  height: 100%;
+  overflow: auto;
 }
 .ant-upload-select{
   border-radius: 16px !important;
+}
+
+/* 显示内容的滚动条 */
+body::-webkit-scrollbar {
+  width: 0.5em; /* 调整滚动条宽度 */
+  height: 0.5em;
+}
+
+/* 滚动条的轨道 */
+body::-webkit-scrollbar-track {
+  background: transparent; /* 设置轨道的背景颜色 */
+}
+
+/* 滚动条的滑块 */
+body::-webkit-scrollbar-thumb {
+  background: rgba(163, 163, 163, 0.2); /* 设置滑块的背景颜色 */
+  border-radius: 4px; /* 设置滑块的圆角 */
+}
+
+/* 鼠标悬停在滑块上时 */
+body::-webkit-scrollbar-thumb:hover {
+  background: #999; /* 设置悬停状态下滑块的背景颜色 */
+}
+
+img{
+  max-width: 200% !important;
 }
\ No newline at end of file

src/app/page.jsx

@@ -7,7 +7,8 @@ import Cards from "@/components/Cards";
 import { useRequest } from "ahooks";
 import { getFetch } from "@/lib/doFetch";
 
-export default function Home() {
+
+export default function Home(props) {
   const { data, refreshAsync, refresh } = useRequest(async () => {
     const res = await getFetch({ url: "/api/folder", params: {} });
     return res?.data ?? [];

src/app/providers.jsx

@@ -18,15 +18,21 @@ export function Providers({ children }) {
   return (
     <NextUIProvider navigate={router.push}>
       <div className="flex w-full flex-col mb-4">
-        <Tabs aria-label="Options" radius={'full'} color="primary" selectedKey={pathname} onSelectionChange={(key)=>{
-          router.push(key)
-        }}>
-          <Tab key="/"  title={'首页'}></Tab>
-          <Tab key="/addItem" title={'DOC'}></Tab>
+        <Tabs
+          aria-label="Options"
+          radius={"full"}
+          color="primary"
+          selectedKey={pathname?.includes("/detail") ? "/detail" : pathname}
+          onSelectionChange={(key) => {
+            router.push(key);
+          }}
+        >
+          <Tab key="/" title={"首页"}></Tab>
+          <Tab key="/detail" title={"DOC"}></Tab>
         </Tabs>
       </div>
       {/* <Link href="/">首页</Link>
-      <Link href="/addItem">DOC</Link> */}
+      <Link href="/detail">DOC</Link> */}
       {children}
     </NextUIProvider>
   );

src/components/AddFileInfo.jsx

@@ -15,7 +15,7 @@ import { useForm } from "react-hook-form";
 import { doFetch } from "@/lib/doFetch";
 import UploadImage from "./UploadImage";
 
-export default function AddFolder(refresh) {
+export default function AddFileInfo({refresh}) {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const { register, handleSubmit, control, setValue } = useForm();
 
@@ -28,19 +28,18 @@ export default function AddFolder(refresh) {
   };
 
   const onSubmit = async (data) => {
-    // 提交表单数据
-    let res = await doFetch({ url: "/api/folder", params: data });
+    return await doFetch({ url: "/api/folder", params: data });
   };
 
   return (
     <>
       <Button
         radius="full"
-        className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg mb-4"
+        className="bg-gradient-to-tr from-green-500 to-blue-500 text-white shadow-lg mb-4"
         onPress={onOpen}
       >
         <AiFillPlusSquare />
-        添加文件夹
+        添加文件
       </Button>
       <Modal
         isOpen={isOpen}
@@ -71,7 +70,7 @@ export default function AddFolder(refresh) {
           {(onClose) => (
             <>
               <ModalHeader className="flex flex-col gap-1">
-                添加文件夹
+                添加文件
               </ModalHeader>
               <ModalBody>
                 <form action="">

src/components/AddFolder.jsx

@@ -15,20 +15,19 @@ import { useForm } from "react-hook-form";
 import { doFetch } from "@/lib/doFetch";
 import UploadImage from "./UploadImage";
 
-export default function AddFolder(refresh) {
+export default function AddFolder({refresh}) {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const { register, handleSubmit, control, setValue } = useForm();
 
   const handleButtonClick = async (close) => {
     // 手动触发表单提交
     handleSubmit(onSubmit)();
-    await refresh();
     close();
   };
 
   const onSubmit = async (data) => {
-    // 提交表单数据
-    let res = await doFetch({ url: "/api/folder", params: data });
+    await doFetch({ url: "/api/folder", params: data });
+    await refresh();
   };
 
   return (

src/components/Cards.jsx

@@ -6,8 +6,10 @@ import { Card, CardBody, CardFooter, Image } from "@nextui-org/react";
 import prisma from '@/lib/prisma';
 import { getFetch } from "@/lib/doFetch";
 import { difftime } from "@/lib/time";
+import { useRouter } from "next/navigation";
 
 export default memo(({list}) => {
+  const router = useRouter();
 
   return (
     <div className="gap-2 grid xl:grid-cols-8 lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2">
@@ -16,10 +18,13 @@ export default memo(({list}) => {
           shadow="sm"
           key={index}
           isPressable
-          onPress={() => console.log("item pressed")}
+          onPress={() => {
+            router.push('/detail/'+item.id);
+          }}
         >
           <CardBody className="overflow-visible p-0">
             <Image
+              isZoomed
               shadow="sm"
               radius="lg"
               width="100%"
@@ -34,6 +39,22 @@ export default memo(({list}) => {
           </CardFooter>
         </Card>
       ))}
+      {
+        list.length === 0 && <Card
+        isFooterBlurred
+        radius="lg"
+        className="border-none"
+      >
+        <Image
+          alt="empty"
+          isBlurred
+          className="object-cover"
+          height={200}
+          src="/empty.png"
+          width={200}
+        />
+      </Card>
+      }
     </div>
   );
 })
\ No newline at end of file

src/components/DeleteFolder.jsx

+import React, { useEffect } from "react";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+  Input,
+} from "@nextui-org/react";
+import { useForm, Controller } from "react-hook-form";
+import { delFetch, doFetch, putFetch } from "@/lib/doFetch";
+import UploadImage from "./UploadImage";
+import { BsTrash3Fill } from "react-icons/bs";
+import { useRouter } from "next/navigation";
+
+export default function DeleteFolder({ refresh, data }) {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const router = useRouter();
+
+  const handleButtonClick = async (close) => {
+    await delFetch({url:"/api/folder/"+data.id})
+    router.back(); // 返回上一页
+  };
+
+
+  return (
+    <>
+      <Button isIconOnly color="danger" aria-label="Like" onPress={onOpen}>
+        <BsTrash3Fill style={{ fontSize: "18px" }} />
+      </Button>
+      <Modal
+        isOpen={isOpen}
+        backdrop={"blur"}
+        onOpenChange={onOpenChange}
+        motionProps={{
+          variants: {
+            enter: {
+              y: 0,
+              opacity: 1,
+              transition: {
+                duration: 0.3,
+                ease: "easeOut",
+              },
+            },
+            exit: {
+              y: -20,
+              opacity: 0,
+              transition: {
+                duration: 0.2,
+                ease: "easeIn",
+              },
+            },
+          },
+        }}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">
+                是否删除该文件夹
+              </ModalHeader>
+              <ModalBody>
+                 <p>
+                  仅可删除空文件夹
+                  </p> 
+
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  取消
+                </Button>
+                <Button
+                  color="danger"
+                  onPress={() => {
+                    handleButtonClick(onClose);
+                  }}
+                >
+                  删除
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

src/components/EditFolder.jsx

+import React, { useEffect } from "react";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+  Input,
+} from "@nextui-org/react";
+import { useForm, Controller } from "react-hook-form";
+import { doFetch, putFetch } from "@/lib/doFetch";
+import UploadImage from "./UploadImage";
+import { BsPencilSquare } from "react-icons/bs";
+import { useRouter } from "next/navigation";
+
+export default function EditFolder({ refresh, data }) {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const router = useRouter();
+
+  const { register, handleSubmit, control, setValue, formState: { errors }, } = useForm({
+    defaultValues: {
+      poster: data?.poster,
+      name: data?.name,
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      setValue("poster", data.poster);
+      setValue("name", data.name);
+      console.log(data.name);
+    }
+  }, [data, isOpen]);
+
+  const handleButtonClick = async (close) => {
+    // 手动触发表单提交
+    handleSubmit(onSubmit)();
+    close();
+  };
+
+  const onSubmit = async (params) => {
+    await putFetch({ url: "/api/folder/"+ data?.id, params });
+    await refresh();
+  };
+
+  return (
+    <>
+      <Button
+        isIconOnly
+        color="warning"
+        variant="faded"
+        aria-label="Take a photo"
+        onPress={onOpen}
+      >
+        <BsPencilSquare style={{ fontSize: "18px" }} />
+      </Button>
+      <Modal
+        isOpen={isOpen}
+        backdrop={"blur"}
+        onOpenChange={onOpenChange}
+        motionProps={{
+          variants: {
+            enter: {
+              y: 0,
+              opacity: 1,
+              transition: {
+                duration: 0.3,
+                ease: "easeOut",
+              },
+            },
+            exit: {
+              y: -20,
+              opacity: 0,
+              transition: {
+                duration: 0.2,
+                ease: "easeIn",
+              },
+            },
+          },
+        }}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">
+                编辑文件夹
+              </ModalHeader>
+              <ModalBody>
+                <form action="">
+                  <input type="hidden" {...register("poster")} />
+                  <div className="flex justify-center items-center flex-col mb-8">
+                    <UploadImage
+                      control={control}
+                      setValue={setValue}
+                    ></UploadImage>
+                  </div>
+
+                  <Controller
+                    control={control}
+                    rules={{
+                      required: true,
+                    }}
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <Input
+                        type="text"
+                        label="文件夹"
+                        name="name"
+                        onBlur={onBlur}
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
+                    name="name"
+                  />
+                  {errors.firstName && <p>This is required.</p>}
+                </form>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  取消
+                </Button>
+                <Button
+                  color="primary"
+                  onPress={() => {
+                    handleButtonClick(onClose);
+                  }}
+                >
+                  提交
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

src/pages/api/demo/index.js

@@ -25,10 +25,6 @@ export default async function handler(req, res) {
       });
       break;
     case "POST":
-      console.log("====================================");
-      console.log(body);
-      console.log("====================================");
-      
       const created = await prisma.folder.create({
         data:body
       });

src/pages/ssr.jsx

@@ -22,9 +22,6 @@ export const getServerSideProps = async () => {
     //   },
     // },
   });
-  console.log('==========11=================');
-  console.log(folders);
-  console.log('==========22================');
   return {
     props: { folders },
     // revalidate: 10, //轮询