Refactor tab component

components/ui/tab/index.tsx

@@ -0,0 +1,38 @@
+import { IconBack } from "~assets/icons";
+import type { ReactNode, PropsWithChildren } from "react";
+
+import styles from "./tab.module.less";
+
+interface HeaderProps {
+  title: ReactNode;
+  onBack: () => void;
+}
+
+function Tab({ children }: PropsWithChildren) {
+  return (
+    <div className={styles.tab}>
+      {children}
+    </div>
+  );
+}
+
+Tab.Header = function Header({ title, onBack }: HeaderProps) {
+  return (
+    <header className={styles.header}>
+      <button className={styles.back} onClick={onBack}>
+        <IconBack />
+      </button>
+      <h2>{title}</h2>
+    </header>
+  );
+}
+
+Tab.Body = function Body({ children }: PropsWithChildren) {
+  return (
+    <main className={styles.body}>
+      {children}
+    </main>
+  );
+}
+
+export default Tab;

components/ui/tab/tab.module.less

@@ -0,0 +1,30 @@
+.tab {
+  .header {
+    padding: .75em;
+    position: relative;
+    text-align: center;
+    border-bottom: 1px solid #eee;
+
+    .back {
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 2em;
+      font-size: 1.3em;
+      position: absolute;
+      transition: background-color .3s;
+
+      &:hover {
+        background-color: #eee;
+      }
+
+      svg {
+        width: 1em;
+      }
+    }
+  }
+
+  .body {
+    padding: 1em;
+  }
+}

popup/bili.module.less

@@ -1,5 +1,6 @@
 .bili {
   gap: 1em;
+  width: 600px;
   display: flex;
 
   .image {

popup/bili.tsx

@@ -1,12 +1,12 @@
 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 Tab from "~components/ui/tab";
+import Form from "~components/ui/form";
 import { add } from "~components/ui/message/utils";
+import Placeholder from "~components/ui/placeholder";
+
+import styles from "./bili.module.less";
 
 interface ReadProps {
   onBack: () => void;
@@ -45,7 +45,6 @@ function Toy({ onBack }: ReadProps) {
 
   const [imgs, setImgs] = useState([]);
   const [currentImg, setCurrentImg] = useState(0);
-  const [failed, setFailed] = useState(false);
 
   const submitForm = (body: FormValue) => {
     sendToBackground({
@@ -74,37 +73,35 @@ function Toy({ onBack }: ReadProps) {
   useEffect(() => {
     getInfo().then((res) => {
       if (!res) {
-        setFailed(true);
         return;
       }
 
-      const { image, ...othors } = res;
+      const { images, ...others } = res;
 
-      setValues(othors);
+      setImgs(images);
-      setImgs(res.images);
       setCurrentImg(0);
+
+      // ! 必须等组件渲染出来才能设置值，这里是个问题
+      window.requestAnimationFrame(() => {
+        setValues(others);
+      });
     })
   }, []);
 
   return (
-    <div className={styles.tab} style={{ width: 600 }}>
+    <Tab>
-      <header className={styles.header}>
+      <Tab.Header title="添加手办" onBack={onBack} />
-        <button className={styles.back} onClick={onBack}>
+      <Tab.Body>
-          <IconBack />
+        <Placeholder className={styles.bili} show={imgs.length === 0} value="非 B 站会员购页面">
-        </button>
+          <div className={styles.image}>
-        <h2>添加手办</h2>
-      </header>
-      <main className={styles.body}>
-        <Placeholder className={stylesB.bili} show={failed} value="非 B 站会员购页面">
-          <div className={stylesB.image}>
             <img src={imgs[currentImg]} alt="" />
-            <div className={stylesB.selector}>
+            <div className={styles.selector}>
               {imgs.map((item, index) => (
                 <img key={index} src={item} alt="" onClick={() => setCurrentImg(index)} />
               ))}
             </div>
           </div>
-          <Form className={stylesB.form} onSubmit={onSubmit(submitForm)}>
+          <Form className={styles.form} onSubmit={onSubmit(submitForm)}>
             <div>
               <label htmlFor="name">中文名</label>
               <input {...bindInput("name")} required placeholder="中文名" />
@@ -141,8 +138,8 @@ function Toy({ onBack }: ReadProps) {
             <button type="submit">提交</button>
           </Form>
         </Placeholder>
-      </main>
+      </Tab.Body>
-    </div>
+    </Tab>
   );
 }
 

popup/popup.module.less

@@ -27,34 +27,3 @@
     background-color: #eee;
   }
 }
-
-.tab {
-  .header {
-    padding: .75em;
-    position: relative;
-    text-align: center;
-    border-bottom: 1px solid #eee;
-
-    .back {
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 2em;
-      font-size: 1.3em;
-      position: absolute;
-      transition: background-color .3s;
-
-      &:hover {
-        background-color: #eee;
-      }
-
-      svg {
-        width: 1em;
-      }
-    }
-  }
-
-  .body {
-    padding: 1em;
-  }
-}

popup/read.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { sendToBackground } from "@plasmohq/messaging";
-import Form from "~components/ui/form";
-import { IconBack } from "~assets/icons";
-import styles from "./popup.module.less";
 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 ReadProps {
@@ -51,7 +50,6 @@ const submitForm = (body: FormValue) => {
 }
 
 function Read({ onBack }: ReadProps) {
-  const [count, setCount] = useState(0);
   const { bindInput, setValues, onSubmit } = useForm<FormValue>({
     initialValues: {
       tags: "",
@@ -69,14 +67,9 @@ function Read({ onBack }: ReadProps) {
   }, []);
 
   return (
-    <div className={styles.tab}>
+    <Tab>
-      <header className={styles.header}>
+      <Tab.Header title="在看" onBack={onBack} />
-        <button className={styles.back} onClick={onBack}>
+      <Tab.Body>
-          <IconBack />
-        </button>
-        <h2>在看</h2>
-      </header>
-      <main className={styles.body}>
         <Form onSubmit={onSubmit(submitForm)}>
           <input {...bindInput("title")} required placeholder="标题" />
           <input {...bindInput("link")} required placeholder="链接" />
@@ -106,10 +99,8 @@ function Read({ onBack }: ReadProps) {
           </div>
           <button type="submit">提交</button>
         </Form>
-        {count}
+      </Tab.Body>
-        <button onClick={() => setCount(prevCount => prevCount + 1)}>add</button>
+    </Tab>
-      </main>
-    </div>
   );
 }