Add say form submit & popup entry

assets/icons.tsx

@@ -16,6 +16,12 @@ export function IconBili() {
   );
 }
 
+export function IconSay() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.29117 20.8242L2 22L3.17581 16.7088C2.42544 15.3056 2 13.7025 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C10.2975 22 8.6944 21.5746 7.29117 20.8242Z"></path></svg>
+  );
+}
+
 export function IconBack() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z"></path></svg>

background/messages/say.ts

@@ -0,0 +1,26 @@
+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 === "addSay") {
+    const { values } = req.body;
+    const formData = new FormData();
+
+    Object.keys(values).forEach((item) => {
+      formData.append(item, String(values[item]));
+    });
+
+    const addReq = await fetch(`${siteUrl}/api/say/add`, {
+      method: "POST",
+      body: formData,
+      headers: {
+        "paul-token-code": token,
+      },
+    }).then((res) => res.json());
+
+    res.send(addReq);
+  }
+}
+
+export default handler;

components/biz/say/index.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef } from "react";
+import { sendToBackground } from "@plasmohq/messaging";
+import useForm from "~hooks/useForm";
+import Tab from "~components/ui/tab";
+import Form from "~components/ui/form";
+import { add } from "~components/ui/message/utils";
+
+interface FormValue {
+  content: string;
+  author: string;
+  origin: string;
+  links: string;
+  is_comment: boolean;
+}
+
+const submitForm = (body: FormValue) => {
+  sendToBackground({
+    name: "say",
+    body: {
+      action: "addSay",
+      values: body,
+    },
+  }).then((res) => {
+    add({
+      content: res.msg,
+    });
+  }).catch((e) => {
+    if (e instanceof Error) {
+      add({
+        content: e.message,
+      });
+    }
+  });
+}
+
+function Say() {
+  const formRef = useRef<HTMLFormElement>();
+
+  const { bindInput, onSubmit } = useForm<FormValue>({
+    initialValues: {
+      is_comment: true,
+    },
+  });
+
+  return (
+    <Tab>
+      <Tab.Body>
+        <Form ref={formRef} onSubmit={onSubmit(submitForm)}>
+          <div>
+            <label htmlFor="content">内容</label>
+            <textarea {...bindInput("content")} rows={5} required placeholder="内容"></textarea>
+          </div>
+          <div>
+            <label htmlFor="author">作者</label>
+            <input {...bindInput("author")} placeholder="作者" />
+          </div>
+          <div>
+            <label htmlFor="links">链接</label>
+            <input {...bindInput("links")} placeholder="链接" />
+          </div>
+          <div>
+            <label htmlFor="is_comment">摘抄</label>
+            <input type="checkbox" role="switch" {...bindInput("is_comment")} placeholder="摘抄" />
+          </div>
+        </Form>
+      </Tab.Body>
+      <Tab.Footer>
+        <button onClick={() => formRef.current?.requestSubmit()}>提交</button>
+      </Tab.Footer>
+    </Tab>
+  );
+}
+
+export default Say;

popup/menu.tsx

@@ -1,4 +1,4 @@
-import { IconBili, IconPaul, IconRead, IconSetting } from "~assets/icons";
+import { IconBili, IconPaul, IconRead, IconSay, IconSetting } from "~assets/icons";
 import styles from "./popup.module.less";
 
 const items = [
@@ -8,10 +8,15 @@ const items = [
     value: "read",
   },
   {
-    name: "增加手办",
+    name: "手办",
     icon: <IconBili />,
     value: "toy",
   },
+  {
+    name: "语录",
+    icon: <IconSay />,
+    value: "say",
+  },
   {
     name: "访问网站",
     icon: <IconPaul />,

sidepanel/index.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Read from "~components/biz/read";
 import Toy from "~components/biz/toy";
+import Say from "~components/biz/say";
 import Message from "~components/ui/message";
 import { clsn } from "~utils";
 
@@ -10,7 +11,7 @@ import styles from "./sidepanel.module.less";
 const initialType = new URLSearchParams(location.search).get("type") || "read";
 
 const tabItems = [
-  { title: "在读", value: "read" },
+  { title: "在看", value: "read" },
   { title: "手办", value: "toy" },
   { title: "语录", value: "say" },
 ];
@@ -22,7 +23,8 @@ function SidePanel() {
     <div className={styles.root}>
       <nav className={styles.nav}>
         {tabItems.map((item) => (
-          <a className={clsn(type === item.value && styles.active)}
+          <a key={item.value}
+            className={clsn(type === item.value && styles.active)}
             onClick={() => setType(item.value)}
           >
             {item.title}
@@ -31,6 +33,7 @@ function SidePanel() {
       </nav>
       {type === "read" && <Read />}
       {type === "toy" && <Toy />}
+      {type === "say" && <Say />}
       <Message />
     </div>
   );