petsoft

个人笔记, 只记录有意义的地方, 应该没有学习的价值

安装项目

npx create-next-app .

带括号不会被计入路由, 如login的路由是http://localhost:3000/login

允许外链

images: {
        remotePatterns: [
            {
                protocol: "https",
                hostname: "bytegrad.com",
            }
        ]
    }

next.config.mjs

看起来不错的UI库

https://ui.shadcn.com/docs

npx shadcn-ui init

<p className="opacity-80">current guests</p>

用于设置元素的不透明度

<div className="grid grid-cols-3 grid-rows-[45px_1fr]"></div>

网格的第一行高度为45px, 第二行将占用除第一行之外的所有可用空间.

<div className="grid grid-rows-[45px_300px_500px] md:grid-cols-3 md:grid-rows-[45px_1fr] gap-4 h-[600px]">
        <div className="md:row-start-1 md:row-span-1 md:col-start-1 md:col-span-1">
          <SearchForm />
        </div>
        <div className="md:row-start-2 md:row-span-full md:col-start-1 md:col-span-1">
          <ContentBlock>
            <PetList />
          </ContentBlock>
        </div>
        <div className="md:row-start-1 md:row-span-full md:col-start-2 md:col-span-full">
          <ContentBlock>
            <PetDetails />
          </ContentBlock>
        </div>
      </div>

grid的示例, 直接看代码

const handleAddPet = (newPet: Omit<Pet, "id">) => {
    setPets((prevPets) => {
      return [
        ...prevPets,
        {
          id: String(Date.now()),
          ...newPet,
        },
      ];
    });
  };

处理id属性

prisma

npm install typescript ts-node @types/node --save-dev

npm install prisma --save-dev

npx prisma init --datasource-provider sqlite

npx prisma db push

添加种子

"prisma": {
    "seed": "ts-node --compiler-options {\"module\":\"commonjs\"} prisma/seed.ts"
  },

package.json中添加

npx prisma db seed

export default function PetFormBtn({ actionType }: petFoemBtnProps) {
  const { pending } = useFormStatus();
  return (
    <Button type="submit" disabled={pending}>
      {actionType === "add" ? "Add a new Pet" : "Edit Pet"}
    </Button>
  );
}

管理按钮的状态

const [isPending, startTransition] = useTransition();
<PetButtons
          buttonType="checkout"
          disabled={isPending}
          onclick={async () => {
            startTransition(() => {
              checkoutPet(selectedPet?.id);
            });
          }}
        />

管理按钮的状态

    <form
      action={async (formData) => {
        if (actionType === "add") {
          // onFormSubmit();
          handleAddPet(formData);
        } else {
          // onFormSubmit();
          handleEditPet(formData);
        }
        setTimeout(onFormSubmit, 0);
      }}
    >

久仰setTimeout(0)大名, 今天终于见识了.gpt的解释如下

cursor yyds