Add bilibili toy form submit

background/messages/bili.ts

@@ -0,0 +1,37 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging";
+
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  const { token, siteUrl } = await chrome.storage.local.get(["token", "siteUrl"]);
+
+  if (req.body.action === "submitAddForm") {
+    const { values } = req.body;
+
+    let imageBlob: Blob | undefined;
+
+    if (values.imageUrl) {
+      imageBlob = await fetch(values.imageUrl).then((res) => res.blob());
+    }
+
+    const formData = new FormData();
+
+    Object.keys(values).forEach((item) => {
+      formData.append(item, String(values[item]));
+    });
+
+    if (imageBlob) {
+      formData.append("image", imageBlob);
+    }
+
+    const addReq = await fetch(`${siteUrl}/api/toy/add`, {
+      method: "POST",
+      body: formData,
+      headers: {
+        "paul-token-code": token,
+      },
+    }).then((res) => res.json());
+
+    res.send(addReq);
+  }
+}
+
+export default handler;

popup/bili.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useState, type FormEvent } from "react";
+import { useEffect, useState } from "react";
+import { sendToBackground } from "@plasmohq/messaging";
 import Placeholder from "~components/ui/placeholder";
 import Form from "~components/ui/form";
 import { IconBack } from "~assets/icons";
 import styles from "./popup.module.less";
 import stylesB from "./bili.module.less";
 import useForm from "~hooks/useForm";
+import { add } from "~components/ui/message/utils";
 
 interface ReadProps {
   onBack: () => void;
@@ -39,15 +41,36 @@ function Toy({ onBack }: ReadProps) {
     initialValues: {
       type: 3,
     },
-    onSubmit: (values) => {
-      console.log(values);
-    },
   });
 
   const [imgs, setImgs] = useState([]);
   const [currentImg, setCurrentImg] = useState(0);
   const [failed, setFailed] = useState(false);
 
+  const submitForm = (body: FormValue) => {
+    sendToBackground({
+      name: "bili",
+      body: {
+        action: "submitAddForm",
+        values: {
+          ...body,
+          imageUrl: imgs[0],
+        },
+      },
+    }).then((res) => {
+      if (res.status === "Success") {
+        add({
+          content: "提交成功",
+        });
+      }
+      else {
+        add({
+          content: res.msg,
+        });
+      }
+    });
+  }
+
   useEffect(() => {
     getInfo().then((res) => {
       if (!res) {
@@ -77,34 +100,34 @@ function Toy({ onBack }: ReadProps) {
             <img src={imgs[currentImg]} alt="" />
             <div className={stylesB.selector}>
               {imgs.map((item, index) => (
-                <img src={item} alt="" onClick={() => setCurrentImg(index)} />
+                <img key={index} src={item} alt="" onClick={() => setCurrentImg(index)} />
               ))}
             </div>
           </div>
-          <Form className={stylesB.form} onSubmit={onSubmit((data) => console.log(data))}>
+          <Form className={stylesB.form} onSubmit={onSubmit(submitForm)}>
             <div>
               <label htmlFor="name">中文名</label>
               <input {...bindInput("name")} required placeholder="中文名" />
             </div>
             <div>
               <label htmlFor="ename">英文名</label>
-              <input {...bindInput("ename")} required placeholder="英文名" />
+              <input {...bindInput("ename")} placeholder="英文名" />
             </div>
             <div>
               <label htmlFor="project">作品</label>
-              <input {...bindInput("project")} required placeholder="作品" />
+              <input {...bindInput("project")} placeholder="作品" />
             </div>
             <div>
               <label htmlFor="made">制作</label>
-              <input {...bindInput("made")} required placeholder="制作" />
+              <input {...bindInput("made")} placeholder="制作" />
             </div>
             <div>
               <label htmlFor="sale">发售日期</label>
-              <input {...bindInput("sale")} required placeholder="发售日期" />
+              <input {...bindInput("sale")} placeholder="发售日期" />
             </div>
             <div>
               <label htmlFor="type">状态</label>
-              <select {...bindInput("type")}>
+              <select {...bindInput("type")} required>
                 <option value={1}>已到货</option>
                 <option value={2}>已预订</option>
                 <option value={3}>想要但没钱</option>
@@ -112,7 +135,7 @@ function Toy({ onBack }: ReadProps) {
             </div>
             <div>
               <label htmlFor="desc">描述</label>
-              <textarea {...bindInput("desc")} rows={5} required placeholder="描述"></textarea>
+              <textarea {...bindInput("desc")} rows={5} placeholder="描述"></textarea>
             </div>
 
             <button type="submit">提交</button>

popup/read.tsx

@@ -1,5 +1,5 @@
-import { sendToBackground } from "@plasmohq/messaging";
 import { useEffect, useState } from "react";
+import { sendToBackground } from "@plasmohq/messaging";
 import Form from "~components/ui/form";
 import { IconBack } from "~assets/icons";
 import styles from "./popup.module.less";